How to make PHP Registration and Login Form

Here we will show you how to create a Login and Registration Form as follows. If a person registers in your Registration Form, it will be saved in your MySQL Database. Below are the steps to create it. Below is a video on how to create this. These web pages are created entirely using HTML, PHP and CSS.


Registration and Login Form Features

  • 1. Complete Beautiful Page 
    2. Save in MySQL database
    3. We can Login Main Page with Name And Register Data
    4. Success and Error Message
    5. We can Work This Online or Offline
    6. Speed Load
    7. Page Speed 98%

Step 1 - Ready Local Server

You first need to download a local server to run PHP Code. You can use xampp server or wampserver for that. If you do not have xampp server you can download it here. Download and install it.

Step 2 - Start Local Server

You open the Local Server. Then click on the Start Button in front of the two names Apache and MySQL. If a green box appears around the two names Apache and MySQL after clicking, it indicates that you have executed it correctly.

# Before Click


# After Click

Step 3 - Code Paste

Go XAMPP server instralation folder and go "htdocs" folder and delete all files and folder in it.
Then Create New File below we show for you.and paste below codes.

1. Create file "database.php" and paste below code

<?php

// Database configuration
$hostname = "localhost"; 
$username = "root"; 
$password = ""; 
$dbname   = "test_database_1";
 
// Create database connection 
$connection = new mysqli($hostname, $username, $password, $dbname); 
 
// Check connection 
if ($connection->connect_error) { 
    die("Connection failed: " . $connection->connect_error); 
}

?>

2. Create file "home.php" and paste below code

<?php if (isset($_GET['id'])) { 
   $id = $_GET['id'];
}?>
<?php
    include("database.php");

    $query = "SELECT * FROM users WHERE id='$id'";
    $query_run = mysqli_query($connection, $query);
?>
<?php
    if(mysqli_num_rows($query_run) > 0){
    while ($row = mysqli_fetch_assoc($query_run)) {
?>

<h1>Hi, <?php echo $row['fname']; ?></h1>

<?php } } ?>

3. Create file "index.php" and paste below code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register Page</title>
    <h1>Register Here</h1>
</head>
<body>
    <div class="main-box">
                <!---------Success and error message-------->
<div class="msg">
<?php if (isset($_GET['error'])) { ?>
    <p class="error"><?php echo $_GET['error']; ?><i class="fas fa-times"></i></p>
<?php } ?>
<?php if (isset($_GET['success'])) { ?>
    <p class="success"><?php echo $_GET['success'];?><i class="fas fa-times"></i></p>
<?php } ?>
</div>
<!---------End of Success and error message-------->
        <form action="register_process.php" method="POST">
            <div class="form-group">
                <label for="exampleInputEmail1">First Name</label>
                <input type="text" class="form-control" name="fname" aria-describedby="emailHelp" placeholder="Enter First Name" required>
                <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <hr>
            <div class="form-group">
                <label for="exampleInputEmail1">Last Name</label>
                <input type="text" class="form-control" name="lname" aria-describedby="emailHelp" placeholder="Enter Last Name" required>
                <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <hr>
            <div class="form-group">
                <label for="exampleInputEmail1">Full Name</label>
                <input type="text" class="form-control" name="full_name" aria-describedby="emailHelp" placeholder="Enter Full Name" required>
                <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <hr>
            <div class="form-group">
                <label for="exampleInputEmail1">Email:</label>
                <input type="email" class="form-control" name="email" aria-describedby="emailHelp" placeholder="Enter Email" required>
                <!--<small id="emailHelp" class="form-text text-muted"><?php echo $_GET['error_dis_email']; ?><i class="fas fa-times"></i></small>-->
                </div>
            <hr>
            <div class="form-group">
                <label for="exampleInputEmail1">Username:</label>
                <input type="text" class="form-control" name="uname" aria-describedby="emailHelp" placeholder="Enter Username" required>
                <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <hr>
            <div class="form-group">
                <label for="exampleInputEmail1">Password:</label>
                <input type="Password" class="form-control" name="pass" aria-describedby="emailHelp" placeholder="Enter Password" required>
                <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <hr>
            <div class="form-group">
                <label for="exampleInputEmail1">Confirm Password:</label>
                <input type="Password" class="form-control" name="cpass" aria-describedby="emailHelp" placeholder="Enter Confirm Password" required>
                <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <hr>
            <div class="btn">
                <button class="save-btn" type="submit" name="register">Register</button>
            </div>
        </form>
    </div>
</body>
</html>
<style>
    body{
        background-color: #0d6efd;
        margin:  80px 20px 60px 320px;
    }
    h1{
        color: white;
        margin-left: 175px;
    }
    
    .form-group label{
        font-size: 20px;
        font-weight: bold;
    }
    .form-group .form-control{
        width: 100%;
        background-color: white;
        height: 30px;
        border: 1px solid;
        border-radius: 5px;
    }
    .save-btn{
        margin-top: 20px;
        background-color: #ffffff;
        border: 2px solid #0d6efd;
        padding: 8px 14px 8px 14px;
        color: #0d6efd;
        font-weight: bold;
        border-radius: 6px;
    }
    .save-btn:hover{
        background-color: #0d6efd;
        color: #ffffff;
    }
    .main-box{
        padding: 20px 20px 20px 20px;
        background-color: white;
        border: 1px solid black;
        border-radius: 9px;
        width: 600px;
    }
    hr{
        margin-top: 2px;
    }
    .btn{
        margin-top: 10px;
    }
    img{
        width: 100px;
        border-radius: 8px;
        opacity: 100%;
        border: 1px solid black;
    }
    .error{
        opacity: 100%;
        font-size: 15px;
        width: 100%;
        text-align: center;
        border: 2px solid #f40b30;
        background-color: #f40b3283;
        color: white;
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 9px;
        margin-top: 10px;
    }
    .success{
        opacity: 100%;
        text-align: center;
        border: 2px solid #0dc143;
        background-color: #0dc14383;
        color: #ffffff;
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 9px;
        margin-top: 10px;
    }
    .img-box{
        margin-top: 10px;
        width: 100px;
        height: 100px;
        border:  1px solid black;
        border-radius: 9px;
    }
    @media only screen and (max-width: 1020px) {
        body{
        background-color: #0d6efd;
        margin:  150px 20px 60px 320px;
    }
    h1{
        font-size: 30px;
        color: white;
        margin-left: 15px;
    }
    .main-box{
        padding: 20px 20px 20px 20px;
        background-color: white;
        border: 1px solid black;
        border-radius: 9px;
        width: 400px;
    }
    .btn{
        margin-top: 10px;
    }
    }
</style>

4. Create file "login.php" and paste below code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Page</title>
    <h1>Login Here</h1>
</head>
<body>
    <div class="main-box">
                <!---------Success and error message-------->
<div class="msg">
<?php if (isset($_GET['error'])) { ?>
    <p class="error"><?php echo $_GET['error']; ?><i class="fas fa-times"></i></p>
<?php } ?>
<?php if (isset($_GET['success'])) { ?>
    <p class="success"><?php echo $_GET['success'];?> <i class="fas fa-times"></i></p>
<?php } ?>
</div>
<!---------End of Success and error message-------->
        <form action="login_process.php" method="POST">
            <div class="form-group">
                <label for="exampleInputEmail1">Username:</label>
                <input type="text" class="form-control" name="uname" aria-describedby="emailHelp" placeholder="Enter Username">
                <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <hr>
            <div class="form-group">
                <label for="exampleInputEmail1">Password:</label>
                <input type="Password" class="form-control" name="password" aria-describedby="emailHelp" placeholder="Enter Password">
                <!--<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
            </div>
            <div class="btn">
                <button class="save-btn" type="submit" name="login">Login</button>
            </div>
        </form>
    </div>
</body>
</html>
<style>
    body{
        background-color: #0d6efd;
        margin:  80px 20px 60px 320px;
    }
    .form-group label{
        font-size: 20px;
        font-weight: bold;
    }
    .form-group .form-control{
        width: 100%;
        background-color: white;
        height: 30px;
        border: 1px solid;
        border-radius: 5px;
    }
    .save-btn{
        margin-top: 20px;
        background-color: #ffffff;
        border: 2px solid #0d6efd;
        padding: 8px 14px 8px 14px;
        color: #0d6efd;
        font-weight: bold;
        border-radius: 6px;
    }
    .save-btn:hover{
        background-color: #0d6efd;
        color: #ffffff;
    }
    h1{
        color: white;
        margin-left: 175px;
    }
    .main-box{
        padding: 20px 20px 20px 20px;
        background-color: white;
        border: 1px solid black;
        border-radius: 9px;
        width: 600px;
    }
    hr{
        margin-top: 2px;
    }
    .btn{
        margin-top: 10px;
    }
    img{
        width: 100px;
        border-radius: 8px;
        opacity: 100%;
        border: 1px solid black;
    }
    .error{
        opacity: 100%;
        font-size: 15px;
        width: 100%;
        text-align: center;
        border: 2px solid #f40b30;
        background-color: #f40b30;
        color: white;
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 9px;
        margin-top: 10px;
    }
    .success{
        opacity: 100%;
        text-align: center;
        border: 2px solid #0dc143;
        background-color: #0dc143;
        color: white;
        font-weight: bold;
        padding-top: 5px;
        padding-bottom: 5px;
        border-radius: 9px;
        margin-top: 10px;
    }
    .img-box{
        margin-top: 10px;
        width: 100px;
        height: 100px;
        border:  1px solid black;
        border-radius: 9px;
    }
    @media only screen and (max-width: 1020px) {
        body{
        background-color: #0d6efd;
        margin:  150px 20px 60px 320px;
    }
    h1{
        font-size: 30px;
        color: white;
        margin-left: 15px;
    }
    .main-box{
        padding: 20px 20px 20px 20px;
        background-color: white;
        border: 1px solid black;
        border-radius: 9px;
        width: 400px;
    }
    .btn{
        margin-top: 10px;
    }
    }
</style>

5. Create file "login_process.php" and paste below code

<?php 
session_start(); 
include "database.php";

if (isset($_POST['uname']) && isset($_POST['password'])) {

function validate($data){
       $data = trim($data);
   $data = stripslashes($data);
   $data = htmlspecialchars($data);
   return $data;
}

$uname = validate($_POST['uname']);
$pass = validate($_POST['password']);

if (empty($uname)) {
header("Location: login.php?error=Username is required");
    exit();
}else if(empty($pass)){
        header("Location: login.php?error=Password is required");
    exit();
}else{
$sql = "SELECT * FROM users WHERE uname='$uname' AND pass='$pass'";

$result = mysqli_query($connection, $sql);

if (mysqli_num_rows($result) === 1) {
$row = mysqli_fetch_assoc($result);
            if ($row['uname'] === $uname && $row['pass'] === $pass) {
            $id = $row['id'];
            header("Location: home.php?id=$id");
        exit();
            }else{
header("Location: login.php?error=Incorect Username or password");
        exit();
}
}else{
header("Location: login.php?error=Incorect Username or password");
        exit();
}
}
}else{
header("Location: index.php");
exit();
}

6. Create file "register_process.php" and paste below code

<?php
include_once('database.php');
if(isset($_POST['register']))
{
    $fname   = $_POST['fname'];
    $lname   = $_POST['lname'];
    $full_name   = $_POST['full_name'];
    $uname   = $_POST['uname'];
    $email   = $_POST['email'];
    $pass = $_POST['pass'];
    $cpass  = $_POST['cpass'];

        $email_query = "SELECT * FROM users WHERE email='$email'";
        $email_query_run = mysqli_query($connection, $email_query);
        if (mysqli_num_rows($email_query_run) > 0) {
            header("Location: index.php?error=This Email Already Taken&$user_data");
            exit();
        }
        else {   
            $uname_query = "SELECT * FROM users WHERE uname='$uname'";
            $uname_query_run = mysqli_query($connection, $uname_query);
            if (mysqli_num_rows($uname_query_run) > 0) {
                header("Location: index.php?error=This Username Already Taken&$user_data");
                exit();
            }
        else {
            
        if ($pass != $cpass) {
            header("Location: index.php?error=Your Password Not Mached&$user_data");
            exit();
        }else{

      $query = "INSERT INTO users (fname,lname,full_name,email,uname,pass) VALUES ('$fname','$lname','$full_name','$email','$uname','$pass')";
      $query_run = mysqli_query($connection, $query);
            
            if($query_run)
            {
                // echo "Saved";
                header("Location: login.php?success=Your Registered Successfully Please Login&$user_data");
                exit();
            }
            else 
            {
                header("Location: index.php?error=You Are Not Registered&$user_data");
                exit();
            }
        }
    }
}
}
 ?>

Step 4 - Add Database

Go your browser and search "localhost/phpmyadmin" and Create New Database. "test_database_1"

And go to sql part and past this code and click go button.


-- phpMyAdmin SQL Dump
-- version 5.1.0
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: Aug 02, 2021 at 03:17 AM
-- Server version: 10.4.19-MariaDB
-- PHP Version: 7.3.28

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `test_database_1`
--

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
  `id` int(11) NOT NULL,
  `fname` varchar(120) NOT NULL,
  `lname` varchar(120) NOT NULL,
  `full_name` text NOT NULL,
  `email` text NOT NULL,
  `uname` text NOT NULL,
  `pass` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Indexes for dumped tables
--

--
-- Indexes for table `users`
--
ALTER TABLE `users`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;


Step 5 - Run Code

Go your Browser and search "localhost/index.php"
And You can Run It
 Enjoy.....

Download Files Here.