Registration and login forms are two basic but important pages in a web application. In this topic, we will develop a registration and login system in using PHP session and cookie with MySQL. We will have a top menu where Register and Login links will appear. We will add the "Show Password" and "Remember Me" checkboxes in the registration and login form respectively. Also, we will display the user's name on the header after login.
Below are the two screens for registration and login.
Create a MySQL table to store the user details
We will create a table named 'users' in MySQL database. User details will be stored in this table during registration. The table structure is given below:
The table has 5 columns.
- id - it is the primary key and auto-incremented
- email - email id of the user who is registering
- name - name of the user
- password - password given by the user during registration
Create table script is given below, you can use this code to create the table. You can also download it from the download section.
CREATE TABLE `users` (
`id` int(11) NOT NULL,
`name` varchar(255) NOT NULL,
`email` varchar(255) NOT NULL,
`password` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);
ALTER TABLE `users`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
Connect to MySQL database (dbconnect.php)
Below is the PHP code to connect to the database. We will create this script under the "cfg" folder and include it in all the programs.
<?php
$server = "localhost";
$uid = "root";
$pwd = "";
$dbname = "test";
$conn = new mysqli($server, $uid, $pwd, $dbname);
if ($conn->connect_error)
die("DB connection failed ".$conn->connect_error);
We are using new mysqli()
to create an instance of mysqli. Parameters are given below:
- server - localhost
- userid - root
- password - no password for user root
- database name - test.
You can also read the topic How to connect to MySQL database in PHP using MySQLi and PDO.
Create a top menu (top_menu.php)
This menu will include - Home, registration and Login on a menu bar. We will include this menu in all other pages (Home, registration and Login) so that this menu will be visible on these pages.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration and login in PHP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="topmenu">
<div class="menubar">
<a href="index.php">Home</a>
<a href="register.php">Register</a>
<a href="login.php">Login</a>
<a href="logout.php">Logout</a>
</div>
</div>
</body>
</html>
We have used Bootstrap 5 and our custom styles. Add below style in css/style.css
.
.topmenu{
background-color: #1a738a;
padding: 20px 0;
}
.topmenu .menubar{
padding: 0 50px;
}
.topmenu a{
color:#fff;
padding: 0 30px;
text-decoration: none;
font-size: 18px;
}
.topmenu a:hover{
color:aqua;
}
h1{
text-align: center;
}
If you run this menu using localhost/login/top_menu.php
, it will be displayed as below:
Create a Home page (index.php)
We will create a simple html page here, just to show that you are on the home page.
Let us look at the code for index.php
<?php
include "top_menu.php";
?>
<h1>Registration and login in PHP</h1>
</body>
</html>
We have just included top_menu.php
and displayed a heading. Also, we have moved the body and html closing tags here and added CSS to display h1 in the center. So, when you click on the Home link from the menu this page will be displayed.
Develop a PHP registration form (register.php)
We will design the registration form in html first and then we will write the PHP code to register the user.
<?php
include "cfg/dbconnect.php";
include "top_menu.php";
?>
<h1>Registration</h1>
<div class="container">
<form action="" method="post">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input
type="text"
class="form-control"
name="name"
id="name"
placeholder="Enter Name"
/>
<div class="input-err text-danger"></div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="text"
class="form-control"
name="email"
id="email"
placeholder="Enter email"
/>
<div class="input-err text-danger"></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password</label>
<input
type="password"
class="form-control"
name="pwd"
id="pwd"
placeholder="Enter password"
/>
<div class="input-err text-danger"></div>
</div>
<div class="mb-3">
<label for="conf_pwd" class="form-label">Confirm Password</label>
<input
type="password"
class="form-control"
name="conf_pwd"
id="conf_pwd"
placeholder="Enter Confirm password"
/>
<div class="input-err text-danger"></div>
</div>
<div class="form-check">
<input
class="form-check-input"
name=""
id=""
type="checkbox"
value="checkedValue"
aria-label="Show Password"
onclick = "showPwd()"
/>Show Password
</div>
<div class="reg-button text-center mt-3">
<button
type="submit"
name = "submit"
class="btn btn-primary">
Register
</button>
</div>
<p>Already Registered? Login <a href="login.php">here</a></p>
</form>
</div>
</body>
</html>
We have included dbconnect.php
and top_menu.php
and then added an html registration form. This registration form includes name, email, password and confirm password fields. Also, a checkbox is added to show the password. The JavaScript function showPwd()
will be called when this checkbox is checked. We will write the JavaScript function to show password later.
Add the below styles for the form in style.css
.
form{
width: 50%;
margin: auto;
border: 1px solid #000;
padding: 14px;
border-radius: 10px;
background-color: #76b4d0;
}
When the form is submitted, we will first validate the inputs and then proceed with the registration. See the below code for registration form in PHP.
if (isset($_POST['submit'])){
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$pwd = trim($_POST['pwd']);
$conf_pwd = trim($_POST['conf_pwd']);
// validate fields
if ($name == ""){
$name_err = "Name is mandatory";
$error = true;
}
if ($email == ""){
$email_err = "Email is mandatory";
$error = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)){
$email_err = "Invalid Email format";
$error = true;
}
else{ // check if email already registered
$sql = "select * from users where email = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s",$email);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows >0){
$email_err = "Email already registered";
$error = true;
}
}
if ($pwd == ""){
$pwd_err = "Passqword is mandatory";
$error = true;
}
elseif (strlen($pwd) < 6) {
$pwd_err = "Password must be atleast 6 characters";
$error = true;
}
if ($conf_pwd == ""){
$conf_pwd_err = "Confirm Password is mandatory";
$error = true;
}
if ($pwd !="" && $conf_pwd !=""){
if ($pwd != $conf_pwd){
$conf_pwd_err = "Passwords do not match";
$error = true;
}
}
// all validations passed
if (!$error){
$pwd = password_hash($pwd, PASSWORD_DEFAULT);
$sql = "insert into users (name, email, password) value(?, ?, ?)";
try{
$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $name, $email, $pwd);
$stmt->execute();
$succ_msg = "Registration successful. Please <a href='login.php'>login</a>";
$name = $email ="";
}
catch(Exception $e){
$error_msg = $e->getMessage();
}
}
}
If form validation fails, $error flag
is set to true. Note that we are validating email format and unique email id. Also, some validations are added for the password and confirm password.
If all validations are successful, we insert the user details in the 'users' table and set the success or error messages accordingly. We will display the validation error messages in the form and also, we will display the success and error messages on top of the form.
JavaScript to show password
We use the below JavaScript function to show/hide the password when the user checks the "Show Password" checkbox.
function showPwd(){
var pwd = document.getElementById("pwd");
var conf_pwd = document.getElementById("conf_pwd");
if (pwd.type === "password")
pwd.type = "text";
else
pwd.type = "password"
if (conf_pwd.type === "password")
conf_pwd.type = "text";
else
conf_pwd.type = "password"
}
To display the error message on the form, we will add the below code just before the form:
<div class="err-msg">
<?php if (!empty($succ_msg)){ ?>
<div class="alert alert-success">
<?= $succ_msg?>
</div>
<?php } ?>
<?php if (!empty($error_msg)){ ?>
<div class="alert alert-danger">
<?= $error_msg?>
</div>
<?php } ?>
</div>
Add below styles in style.css
for error messages:
.err-msg{
width: 50%;
margin: auto;
}
Below is the complete code for register.php
.
<?php
include "cfg/dbconnect.php";
$name = $email = $pwd = $conf_pwd = "";
$name_err = $email_err = $pwd_err = $conf_pwd_err = "";
$error = false;
$err_msg = "";
if (isset($_POST['submit'])){
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$pwd = trim($_POST['pwd']);
$conf_pwd = trim($_POST['conf_pwd']);
// validate fields
if ($name == ""){
$name_err = "Name is mandatory";
$error = true;
}
if ($email == ""){
$email_err = "Email is mandatory";
$error = true;
}
elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)){
$email_err = "Invalid Email format";
$error = true;
}
else{ // check if email already registered
$sql = "select * from users where email = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("s",$email);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows >0){
$email_err = "Email already registered";
$error = true;
}
}
if ($pwd == ""){
$pwd_err = "Passqword is mandatory";
$error = true;
}
elseif (strlen($pwd) < 6) {
$pwd_err = "Password must be atleast 6 characters";
$error = true;
}
if ($conf_pwd == ""){
$conf_pwd_err = "Confirm Password is mandatory";
$error = true;
}
if ($pwd !="" && $conf_pwd !=""){
if ($pwd != $conf_pwd){
$conf_pwd_err = "Passwords do not match";
$error = true;
}
}
// all validations passed
if (!$error){
$pwd = password_hash($pwd, PASSWORD_DEFAULT);
$sql = "insert into users (name, email, password) value(?, ?, ?)";
try{
$stmt = $conn->prepare($sql);
$stmt->bind_param("sss", $name, $email, $pwd);
$stmt->execute();
$succ_msg = "Registration successful. Please <a href='login.php'>login</a>";
$name = $email ="";
}
catch(Exception $e){
$error_msg = $e->getMessage();
}
}
}
include "top_menu.php";
?>
<h1>Registration</h1>
<div class="container">
<div class="err-msg">
<?php if (!empty($succ_msg)){ ?>
<div class="alert alert-success">
<?= $succ_msg?>
</div>
<?php } ?>
<?php if (!empty($error_msg)){ ?>
<div class="alert alert-danger">
<?= $error_msg?>
</div>
<?php } ?>
</div>
<form action="" method="post">
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input
type="text"
class="form-control"
name="name"
id="name"
placeholder="Enter Name"
value="<?=$name?>"
/>
<div class="input-err text-danger"><?= $name_err?></div>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="text"
class="form-control"
name="email"
id="email"
placeholder="Enter email"
value="<?=$email?>"
/>
<div class="input-err text-danger"><?= $email_err?></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password</label>
<input
type="password"
class="form-control"
name="pwd"
id="pwd"
placeholder="Enter password"
/>
<div class="input-err text-danger"><?= $pwd_err?></div>
</div>
<div class="mb-3">
<label for="conf_pwd" class="form-label">Confirm Password</label>
<input
type="password"
class="form-control"
name="conf_pwd"
id="conf_pwd"
placeholder="Enter Confirm password"
/>
<div class="input-err text-danger"><?= $conf_pwd_err?></div>
</div>
<div class="form-check">
<input
class="form-check-input"
name=""
id=""
type="checkbox"
value="checkedValue"
aria-label="Show Password"
onclick = "showPwd()"
/>Show Password
</div>
<div class="reg-button text-center mt-3">
<button
type="submit"
name = "submit"
class="btn btn-primary">
Register
</button>
</div>
<p>Already Registered? Login <a href="login.php">here</a></p>
</form>
</div>
<script>
function showPwd(){
var pwd = document.getElementById("pwd");
var conf_pwd = document.getElementById("conf_pwd");
if (pwd.type === "password")
pwd.type = "text";
else
pwd.type = "password"
if (conf_pwd.type === "password")
conf_pwd.type = "text";
else
conf_pwd.type = "password"
}
</script>
</body>
</html>
Develop a PHP Login form (login.php)
Our login form will have an email id and password for the user to login into the system. After the login form is submitted, we need to validate the email id and password entered by the user against the values stored in the database.
The login form design is given below, the error message we are displaying here is defined after the form is submitted, just check the PHP code for login page next.
<?php
include "top_menu.php";
?>
<h1>Login</h1>
<div class="container">
<div class="err-msg">
<?php if (!empty($error_msg)){ ?>
<div class="alert alert-danger">
<?= $error_msg?>
</div>
<?php } ?>
</div>
<form action="" method="post">
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="text"
class="form-control"
name="email"
id="email"
placeholder="Enter email"
value="<?=$email?>"
/>
<div class="input-err text-danger"><?= $email_err?></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password</label>
<input
type="password"
class="form-control"
name="pwd"
id="pwd"
placeholder="Enter password"
/>
<div class="input-err text-danger"><?= $pwd_err?></div>
</div>
<div class="form-check">
<input
class="form-check-input"
name="remember"
id=""
type="checkbox"
value="checkedValue"
aria-label="Remember Me"
/>Remember Me
</div>
<div class="reg-button text-center mt-3">
<button
type="submit"
name = "submit"
class="btn btn-primary">
Login
</button>
</div>
<p>Not Registered? Click <a href="register.php">here</a> to register</p>
</form>
</div>
</body>
</html>
Here, we are using a form to get the email id and password from the user.
When the user clicks on the Submit button if a matching row is found, we redirect the user to the home page, if not, we give a message in the login form so that the user can re-enter login details.
See the below PHP code for the login page:
<?php
session_start();
include "cfg/dbconnect.php";
$email = $pwd = "";
$email_err = $pwd_err = "";
$error = false;
$err_msg = "";
if (isset($_POST['submit'])){
$email = trim($_POST['email']);
$pwd = trim($_POST['pwd']);
// validate fields
if ($email == ""){
$email_err = "Email is mandatory";
$error = true;
}
if ($pwd == ""){
$pwd_err = "Password is mandatory";
$error = true;
}
// all validations passed
if (!$error){
$sql = "select * from users where email = ?";
try{
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows >0){
$row = $result->fetch_assoc();
$stored_pwd = $row['password'];
if (password_verify($pwd, $stored_pwd)){
// login successful
$_SESSION['name'] = $row['name'];
header("location:index.php");
}
else{
$error_msg = "Incorrect Password";
}
}
else {
$error_msg = "Email id not registered";
}
}
catch(Exception $e){
$error_msg = $e->getMessage();
}
}
}
Note that we are using the PHP session here, at the beginning we used the session_start()
function and after successful login, we are using a PHP session variable $_SESSION['name']
.
Update top menu to display user name after login
We need to update the code in top_menu.php
. When the user logs in, we want to show Logout only; Register and Login should not be displayed then. Similarly, when the user is not logged in, we should only show Register and Login; Logout should not be displayed. So, we update top_menu.php
as below:
<?php
if (!isset($_SESSION) || session_id() == "" || session_status() === PHP_SESSION_NONE)
session_start()
?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Registration and login in PHP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="topmenu">
<div class="menubar">
<a href="index.php">Home</a>
<?php if (isset($_SESSION['name'])){ ?>
<div class="user">
<span>Welcome <?= $_SESSION['name']?> </span>
<a href="logout.php">Logout</a>
</div>
<?php } else { ?>
<a href="register.php">Register</a>
<a href="login.php">Login</a>
<?php } ?>
</div>
</div>
We added session_start()
, but here we are checking if the session already started or not, if not started, we are using session_start()
, since we have already used it in login.php
. In the menu bar, we are checking if the SESSION variable "name" is available, accordingly, we are showing the links. If the user is logged-in we display the user name from the session variable.
Add code for Remember-Me using PHP cookie
We already have a checkbox in the login form for Remember-Me. When the user checks this checkbox, the email id will automatically be displayed in the email field and the checkbox will be checked during the next login. We will use remember-me cookie to implement this option. In PHP, we have setcookie()
function and $_COOKIE[]
superglobal. We will use them here.
After successful login, we will add the below code in login.php.
if (isset($_POST['remember'])){
setcookie("remember_email", $email, time()+365*24*3600);
setcookie("remember", $remember, time()+365*24*3600);
}
else{
setcookie("remember_email", $email, time() - 365*24*3600);
setcookie("remember", $remember, time() - 365*24*3600);
}
We check if the Remember-Me checkbox is checked, then we create two cookies, "remember_email" (for the email) and "remember" (for the checkbox) using the setcookie()
function. These cookies will be valid for one year. Use the time()
function and add 365 days converted to seconds. But if the checkbox is unchecked, we delete the cookies by giving a past date, which means the cookies will expire.
In the login form, we can display the email if the cookie is available. Similarly, the checkbox should be checked if the cookie is available for the checkbox. So, we will display the value in the email input and check the Remember-Me checkbox accordingly as shown below:
<php
$display_email = isset($_COOKIE['remember_email']) ? $_COOKIE['remember_email'] : $email;
$checked = !empty($remember) ? "checked" : (isset($_COOKIE['remember']) ? "checked" : "");
?>
If the cookie for the email is set, display that email in the email field, otherwise display the email entered by the user. Similar logic is used for the "remember" cookie, here we need to decide if the checkbox will be checked or not.
We will use these two variables in the login form. $display_email
will be used as the value of the email field and $checked
will be used for the checkbox as given below:
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="text"
class="form-control"
name="email"
id="email"
placeholder="Enter email"
value="<?=$display_email?>"
/>
<div class="input-err text-danger"><?= $email_err?></div>
</div>
See the value of the email field. For the checkbox, <?= $checked?>
is used to check the checkbox.
<div class="form-check">
<input
class="form-check-input"
name="remember"
id=""
type="checkbox"
value="checkedValue"
aria-label="Remember Me"
<?= $checked?>
/>Remember Me
</div>
Here is the complete code for login.php
<?php
session_start();
include "cfg/dbconnect.php";
$email = $pwd = "";
$email_err = $pwd_err = "";
$error = false;
$err_msg = "";
if (isset($_POST['submit'])){
$email = trim($_POST['email']);
$pwd = trim($_POST['pwd']);
if (isset($_POST['remember']))
$remember = $_POST['remember'];
// validate fields
if ($email == ""){
$email_err = "Email is mandatory";
$error = true;
}
if ($pwd == ""){
$pwd_err = "Password is mandatory";
$error = true;
}
// all validations passed
if (!$error){
$sql = "select * from users where email = ?";
try{
$stmt = $conn->prepare($sql);
$stmt->bind_param("s", $email);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows >0){
$row = $result->fetch_assoc();
$stored_pwd = $row['password'];
if (password_verify($pwd, $stored_pwd)){
// login successful
if (isset($_POST['remember'])){
setcookie("remember_email", $email, time()+365*24*3600);
setcookie("remember", $remember, time()+365*24*3600);
}
else{
setcookie("remember_email", $email, time() - 365*24*3600);
setcookie("remember", $remember, time() - 365*24*3600);
}
$_SESSION['name'] = $row['name'];
header("location:index.php");
}
else{
$error_msg = "Incorrect Password";
}
}
else {
$error_msg = "Email id not registered";
}
}
catch(Exception $e){
$error_msg = $e->getMessage();
}
}
}
include "top_menu.php";
?>
<h1>Login</h1>
<div class="container">
<div class="err-msg">
<?php if (!empty($error_msg)){ ?>
<div class="alert alert-danger">
<?= $error_msg?>
</div>
<?php } ?>
</div>
<form action="" method="post">
<?php
$display_email = isset($_COOKIE['remember_email']) ? $_COOKIE['remember_email'] : $email;
$checked = !empty($remember) ? "checked" : (isset($_COOKIE['remember']) ? "checked" : "");
?>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input
type="text"
class="form-control"
name="email"
id="email"
placeholder="Enter email"
value="<?=$display_email?>"
/>
<div class="input-err text-danger"><?= $email_err?></div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password</label>
<input
type="password"
class="form-control"
name="pwd"
id="pwd"
placeholder="Enter password"
/>
<div class="input-err text-danger"><?= $pwd_err?></div>
</div>
<div class="form-check">
<input
class="form-check-input"
name="remember"
id=""
type="checkbox"
value="checkedValue"
aria-label="Remember Me"
<?= $checked?>
/>Remember Me
</div>
<div class="reg-button text-center mt-3">
<button
type="submit"
name = "submit"
class="btn btn-primary">
Login
</button>
</div>
<p>Not Registered? Click <a href="register.php">here</a> to register</p>
</form>
</div>
</body>
</html>
We added styles to display the username and logout on the right side of the menu bar.
Here is the complete style.css
.
.topmenu{
background-color: #1a738a;
padding: 20px 0;
}
.topmenu .menubar{
padding: 0 50px;
}
.topmenu a{
color:#fff;
padding: 0 30px;
text-decoration: none;
font-size: 18px;
}
.topmenu a:hover{
color:aqua;
}
h1{
text-align: center;
}
form{
width: 50%;
margin: auto;
border: 1px solid #000;
padding: 14px;
border-radius: 10px;
background-color: #76b4d0;
}
.input-err{
height: 10px;
}
.err-msg{
width: 50%;
margin: auto;
}
.user{
float: right;
color: #fff;
}
Now we need to write the code for logout.php
. See the code below:
<?php
session_start();
session_unset();
session_destroy();
header("location:index.php");
We unset all PHP session variables using the session_unset()
function. Then delete the session using session_destroy()
. After that, we redirect the user to the home page.
We are done with our development, let us now test our application.
2 Thoughts on "Login and Registration Forms in PHP and MySQL with Session"
Post a Comment