In this blog post we going to make login & registration form using PHP and MySQL. I have already shared signup and login form using PHP and MySQL with prepared statement.
In this blog I'll show you another way to store data in database or another way to make sign up & login form using PHP & MYSQL. However, if you want more security then you should use prepared statement.
Sign up and login functionality is like a security of website. Its use to protect sensitive, private, etc information and only get access to known user (however user have to remember id and its password).
Video Tutorial of Login & Registration Form Using PHP & MySQL Database.
Sign Up & Login form Using PHP & MYSQL.
First we’ll make a signup or registration form and when users have done registration it will redirect to the login page and after successful login it will redirect into the website main page a welcome page.
In the welcome page there is a detail of users displaying who have logged in and also have a logout text, by clicking on it, the user can logout and redirect to the login page.
I hope you know how to run php on your computer. I use xampp server (search on google).
Install xampp server in one new folder (I have named it xampp folder) in C drive.
After installation, in that xampp folder, go to htdocs and create a new folder with whatever name you want and open that folder in your code editor.
To show preview of php code. Open xampp server start the apache and mysql modul and search on browser 'localhost/you folder name'.
We'll create this below files in that folder:
Signup.php
Signup.css
Login.php
Login.css
Config.php
Logout.php
Welcome.php
So, let's start making login and registration form using PHP & MySQL step by step. First, we going to make sign up page.
Signup Form Using PHP & MySQL.
So first create two files with signup.php & signup.css. Link the css files with php files with link tag.
Below is the simple code for sign up form design.
signup.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="signup.css">
</head>
<body>
<div class="box">
<h2>Sign Up</h2>
<form action="#">
<div class="input_box">
<input type="text" placeholder="Username" name="username" required>
</div>
<div class="input_box">
<input type="text" placeholder="Email Id" name="email" required>
</div>
<div class="input_box">
<input type="text" placeholder="Create Password" name="password" required>
</div>
<div class="input_box">
<input type="text" placeholder="Confirm Password" name="confirm_password" required>
</div>
<div class="links">By creating an account you agree to <a href="#">Terms & Conditions</a></div>
<button type="submit">Create Account</button>
<div class="links">Already have an account? <a href="login.php">Login</a></div>
<div class="links">Need help? <a href="#">Contact Us</a></div>
</form>
</div>
</body>
</html>
signup.css
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(45deg, #3a3c93, #e923b5);
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
background-color: #fff;
padding: 40px 20px;
border-radius: 10px;
box-shadow: 0px 5px 20px -5px #000;
text-align: center;
}
.box h2{
font-size: 40px;
font-weight: bold;
margin-bottom: 30px;
}
.box form .input_box{
width: 100%;
margin-top: 20px;
background-color: #f2f2f2;
border-radius: 100px;
}
.box form .input_box input{
width: 90%;
font-size: 22px;
padding: 12px 0px;
border: none;
outline: none;
background-color: transparent;
}
.error{
color: red;
text-align: left;
margin-left: 10px;
margin-top: 2px;
}
.box form button{
width: 100%;
font-size: 25px;
font-weight: bold;
background: linear-gradient(45deg, #3a3c93, #e923b5);
color: #fff;
padding: 10px;
border: none;
margin: 10px 0px;
border-radius: 100px;
cursor: pointer;
transition: 0.2s;
}
.box form button:active{
transform: scale(0.9);
}
.box form .links{
font-size: 16px;
margin: 15px 0px;
}
.box form .links a{
font-size: 18px;
font-weight: bold;
color: blue;
text-decoration: none;
}
Output:
Design of the sign up form is ready. We are going to make some changes in this form after adding the backend (PHP) to show error messages and send post requests. (We are going to send data with a post request.)
Now let's add backend functionality to these forms. But let first create a database and establish a connection with it.
Creating database
I have created a database with the name 'registration' and table name 'signup'.
Created four columns (id, username, email, password). Added length 50 to id username and email and 100 to password so that it can store only limited characters according to length set to it.
Establish connection with database.
config.php
<?php
$server = "localhost";
$username = "root";
$password = "";
$database = "registration";
$con = mysqli_connect($server , $username , $password , $database);
if(!$con){
echo "Connection Error";
}
?>
After connection now let's add functionality to the signup form to insert data in the database.
First, we are going to create a connection with the database. For that, we add a config.php file (for database conmection).
signup.php
include "config.php";
Create variables for error messages.
signup.php
$username_error = "";
$email_error = "";
$password_error = "";
$confirm_password_error = "";
Now let's add the if condition, that when a post request is sent, then the inside code will be executed. We are going to define variables, validate input fields, store error messages in error message variables, inserting data, when this condition is true means the post request sent.
signup.php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
}
To send this post request we need to add method="post" attribute to the form tag of the sign up form.
And also add functionality to show error messages inside form.
signup.php
<div class="box">
<h2>Sign Up</h2>
<form action="#" method="post">
<div class="input_box">
<input type="text" placeholder="Username" name="username" required>
</div>
<?php if(!empty($username_error)){ ?>
<p class="error"><?php echo $username_error ?></p>
<?php } ?>
<div class="input_box">
<input type="text" placeholder="Email Id" name="email" required>
</div>
<?php if(!empty($email_error)){ ?>
<p class="error"><?php echo $email_error ?></p>
<?php } ?>
<div class="input_box">
<input type="text" placeholder="Create Password" name="password" required>
</div>
<?php if(!empty($password_error)){ ?>
<p class="error"><?php echo $password_error ?></p>
<?php } ?>
<div class="input_box">
<input type="text" placeholder="Confirm Password" name="confirm_password" required>
</div>
<?php if(!empty($confirm_password_error)){ ?>
<p class="error"><?php echo $confirm_password_error ?></p>
<?php } ?>
<div class="links">By creating an account you agree to <a href="#">Terms & Conditions</a></div>
<button type="submit">Create Account</button>
<div class="links">Already have an account? <a href="login.php">Login</a></div>
<div class="links">Need help? <a href="#">Contact Us</a></div>
</form>
</div>
Now create variables for input fields.
signup.php
$username = mysqli_real_escape_string($con, $_POST['username']);
$email = mysqli_real_escape_string($con, $_POST['email']);
$password = mysqli_real_escape_string($con, $_POST['password']);
$confirm_password = mysqli_real_escape_string($con, $_POST['confirm_password']);
After creating variables, now we have to validate input fields one by one.
Basically, we'll add conditions to input fields. So users must fill input fields accordingly, to get successfully registered. You can also set more conditions as I may have missed some.
First, we are going to validate the username.
Validating username.
Here are some conditions I given to username input field:
- Username cannot be blank.
- It must be less than or equal to 50 characters.
If above conditions are not full filled than we store the error messages in $username_error variable
You have to make sure to not take character more than limit you have set in database (we set 50 for username in database here)
signup.php
// Username validation
if (!empty(trim($username))) {
if (strlen($username) <= 50) {
$username = trim($username);
} else {
$username_error = "Username must be less than or equal to 50 charcters";
}
} else {
$username_error = "Username cannot be blank";
}
After username validation. Let's validate email.
Validating email.
Conditions I have given to email input field:
- Email cannot be empty.
- It must be less than or equal to 50 characters.
- Email must be valid email.
- It must not be already registered or it must be not already in the database.
If the above conditions are not fully filled then we store the error message in $email_error variable.
signup.php
// Email validation
if (!empty(trim($email))) {
if (strlen($email) <= 50) {
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
$email_check = "SELECT * FROM signup WHERE email = '$email'";
$query = mysqli_query($con, $email_check);
if (mysqli_num_rows($query) == 1) {
$email_error = "Email already exists";
}
} else {
$email_error = "Please enter valid email";
}
} else {
$email_error = "Email must be less than or equal to 50 characters";
}
} else {
$email_error = "Email cannot be blank";
}
After email validation. Now let's validate password.
Validating password.
Conditions I have given to password input field:
- Passwords should not be empty.
- Passwords must be greater than or equal to 8 characters and less than or equal to 16 characters.
If the above conditions are not fully filled then we store the error message in the $password_error variable.
signup.php
// Password_validation
if(!empty(trim($password))){
if(strlen($password) >= 8){
if(strlen($password) <= 16){
$password = trim($password);
}else{
$password_error = "Password must be greater than or equal to 8 characters and less than or equal to 16 characters";
}
}else{
$password_error = "Password must be greater than or equal to 8 characters and less than or equal to 16 characters";
}
}else{
$password_error = "Password cannot be blank";
}
After password validation. Let's validate confirm password.
Validating confirm password.
Conditions I have given to confirm password.
- It should not be empty.
- It must be the same as a password.
If the above conditions are not fully filled then we store the error message in the $confirm_password_error variable.
signup.php
// Confirm password validation
if(!empty(trim($confirm_password))){
if($password === $confirm_password){
$confirm_password = trim($confirm_password);
}else{
$confirm_password_error = "Password not matched";
}
}else{
$confirm_password_error = "Confirm password cannot be blank";
}
So, our validation is completed.
Now if no error occurs means all error variables are empty as we stored error messages in those error variables.
So, if all error variables are empty then we insert data into the database.
signup.php
// Insert data if no error occurs
if(empty($username_error) &&
empty($email_error) &&
empty($password_error) &&
empty($confirm_password_error)){
$insert = "INSERT INTO signup (username, email, password) VALUES ('$username', '$email', '$password')";
$insert_query = mysqli_query($con , $insert);
if($insert_query){
header('location:login.php');
}
}
Now let's check if the code is working or not.
So I have just fill the details according to the conditions set to it. You can see the demo in above youtube video.
After clicking on create account button or submit button.
See the data successfully inserted in the database.
Here the data is inserted but it'll show an error message 404 not found, it's because we redirect to the login form and we haven't created it yet.
After inserting data successfully. We need to redirect users to login form so let's create a login form.
Login Form Using PHP & MySQL.
Create another two files with login.php and login.css. Link these css files with login.php file with link tag.
Below is the simple code for login form design using HTML and CSS.
login.php
<div class="box">
<h2>Login</h2>
<form action="#">
<div class="input_box">
<input type="text" name="email" placeholder="Email Id" required>
</div>
<div class="input_box">
<input type="text" name="password" placeholder="Password" required>
</div>
<div class="links" style="text-align: right;"><a href="#">Forgot Password?</a></div>
<button type="submit">Login</button>
<div class="links">Don't have an account? <a href="signup.php">Sign Up</a></div>
<div class="links">Need help? <a href="#">Contact Us</a></div>
</form>
</div>
login.css
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background: linear-gradient(45deg, #3a3c93, #e923b5);
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
width: 400px;
background-color: #fff;
padding: 40px 20px;
border-radius: 10px;
box-shadow: 0px 5px 20px -5px #000;
text-align: center;
}
.box h2{
font-size: 40px;
font-weight: bold;
margin-bottom: 30px;
}
.box form .input_box{
width: 100%;
margin-top: 20px;
background-color: #f2f2f2;
border-radius: 100px;
}
.box form .input_box input{
width: 90%;
font-size: 22px;
padding: 12px 0px;
border: none;
outline: none;
background-color: transparent;
}
.error{
color: red;
text-align: left;
margin-left: 10px;
margin-top: 2px;
}
.box form button{
width: 100%;
font-size: 25px;
font-weight: bold;
background: linear-gradient(45deg, #3a3c93, #e923b5);
color: #fff;
padding: 10px;
border: none;
margin: 10px 0px;
border-radius: 100px;
cursor: pointer;
transition: 0.2s;
}
.box form button:active{
transform: scale(0.9);
}
.box form .links{
font-size: 16px;
margin: 15px 0px;
}
.box form .links a{
font-size: 18px;
font-weight: bold;
color: blue;
text-decoration: none;
}
We are going to make some changes at the time of adding backend (PHP) in these forms, to show error messages and to send post requests. (we are going to send data with a post request.)
Now let's add backend functionality to this login form.
First create error variables to store error messages.
login.php
include "config.php";
$error = "";
$email_error = "";
$password_error = "";
Now let's add if condition, that when post request sent by user then if condition true and inside code will execute. We'll add variables for input fields, validate it, store error messages in error variables, check for credentials and make user login.
We going to show error message inside the form (HTML).
login.php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
}
To send this post request we need to add method="post" attribute to the form tag of the login form.
And also add functionality to show error messages in login from.
login.php
<div class="box">
<h2>Login</h2>
<form action="#" method="post">
<?php if(!empty($error)){ ?>
<p class="error" style="text-align: center;"><?php echo $error; ?></p>
<?php } ?>
<div class="input_box">
<input type="text" name="email" placeholder="Email Id" required>
</div>
<?php if(!empty($email_error)){ ?>
<p class="error"><?php echo $email_error; ?></p>
<?php } ?>
<div class="input_box">
<input type="text" name="password" placeholder="Password" required>
</div>
<?php if(!empty($password_error)){ ?>
<p class="error"><?php echo $password_error; ?></p>
<?php } ?>
<div class="links" style="text-align: right;"><a href="#">Forgot Password?</a></div>
<button type="submit">Login</button>
<div class="links">Don't have an account? <a href="signup.php">Sign Up</a></div>
<div class="links">Need help? <a href="#">Contact Us</a></div>
</form>
</div>
Add basic validation to the email and password input field. We just check if it is empty or not.
If empty then we store error messages in error variables.
login.php
$email = mysqli_real_escape_string($con, $_POST['email']);
$password = mysqli_real_escape_string($con, $_POST['password']);
// Basic validation
if(!empty(trim($email))){
$email = trim($email);
}else{
$email_error = "Please enter your email";
}
if(!empty(trim($password))){
$password = trim($password);
}else{
$password_error = "Please enter your password";
}
Now if all error variables are empty then we check if the entered email and its password is correct or not.
login.php
// Make user login if correct details entered.
if(empty($email_error) && empty($password_error) && empty($error)){
$select = "SELECT * FROM signup WHERE email = '$email' AND password = '$password'";
$query = mysqli_query($con , $select);
if(mysqli_num_rows($query) == 1){
$result = mysqli_fetch_assoc($query);
session_start();
$_SESSION['id'] = $result['id'];
$_SESSION['username'] = $result['username'];
$_SESSION['email'] = $result['email'];
$_SESSION['loggedin'] = true;
header('location:welcome.php');
}else{
$error = "Incorrect details";
}
}
If the correct details are entered then first, we start the session and create session variables for id username and email and store user details accordingly and redirect users to the main page or welcome page (welcome page is not created yet we'll create it later).
And we also need to check if the user is already logged in or not when it lands on the login page.
So at the start of code we need to check if the user is already logged in or not.
I have checked user login status with session['id'] variable.
login.php
session_start();
if(isset($_SESSION['id'])){
header('location:welcome.php');
exit;
}
So, let's make a welcome.php page so that users can redirect to it when login is successfully done.
Welcome page.
Create another file with the name welcome.php.
In this file we first check, is user logged in or not. If not then we redirect it to the login page.
welcome.php
<?php
session_start();
if(!isset($_SESSION['id'])){
header('location:login.php');
exit;
}
include "config.php";
?>
Now let's add some details of the user who logged in and on the welcome page. Like username, id, email and a logout link.
welcome.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Name = <?php echo $_SESSION['username']; ?></h1>
<h2>Id = <?php echo $_SESSION['id'] ?></h2>
<h2>Email Id = <?php echo $_SESSION['email'] ?></h2>
<br>
<h2><a href="logout.php">Logout</a></h2>
</body>
</html>
I have added logout.php to the anchor tag of the logout link. That we haven't created yet.
Logout link is not working as we have not created any functionality or files that are in the anchor tag of the logout link. So, let's create a logout file.
Logout
Create another file with logout.php. write code for logout functionality. When a user clicks on the logout link, it will logout and redirect to the login page.
logout.php
<?php
session_start();
$_SESSION = array();
session_destroy();
header('location:login.php');
?>
Now let's test it.
So first we login with same details that we used to registered.
Now let's click on login button.
After click
As you can see that we redirected to welcome.php with details. You can see demo in above YouTube video.
Final code:
So that’s how you can create login and registration form using PHP and MySQL. If you have any question or suggestion you can write in the comment section.
Osm
ReplyDelete