AdSense

Complete user registration system using PHP and MySQL database

In this tutorial, I walk you through the complete process of creating a user registration system where users can create an account by providing username, email and password, login and logout using PHP and MySQL. I will also show you how you can make some pages accessible only to logged-in users.Any other user not logged in will not be able to access the page.
    
The first of all create your database name in phpmyadmin.
    
Create a database called registration. In the registration database create a table called users. 
The users table will take following fileds.
    
 --  
 -- Table structure for table `users`  
 --  
 CREATE TABLE `users` (  
  `user_id` int(10) NOT NULL,  
  `name` varchar(50) NOT NULL,  
  `email` varchar(50) NOT NULL,  
  `password` varchar(50) NOT NULL,  
  `phone` varchar(50) NOT NULL  
 ) ENGINE=InnoDB DEFAULT CHARSET=latin1;  

 User Registration page
   
I have created two HTML view login and register form.Below HMTL code is for displaying the register form to the user. In this form, it has four inputs to allow the user to enter their full name, email password and phone number.I have created user Interface design register page.

 Create the register.php file in your working folder and paste the code in it.

  register.php 

 <?php  
 <!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"/>  
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"/>  
 <title>Sign Up</title>  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="signup-form">  
  <form action="" method="POST">  
   <h2>Sign Up</h2>  
      <p id="error"></p>  
       <div class="text-center">Login to your account <a href="login.php">Login here</a>.</div><br>  
           <div class="form-group">  
                <div class="input-group">  
                     <span class="input-group-addon"><i class="fa fa-user"></i></span>  
                     <input type="text" class="form-control" name="name" placeholder="Full Name *" value="<?php echo @$name; ?>">  
                </div>  
                <h5><?php echo @$nameblank; ?></h5>  
     </div>  
         <div class="form-group">  
           <div class="input-group">  
                <span class="input-group-addon"><i class="fa fa-paper-plane"></i></span>  
                <input type="text" class="form-control" name="email" placeholder="Email Address *" value="<?php echo @$email; ?>">  
           </div>  
           <h5><?php echo @$emailblank; ?></h5>  
           <h5><?php echo @$emailErr; ?></h5>  
           <h5><?php echo @$exists; ?></h5>  
     </div>  
           <div class="form-group">  
           <div class="input-group">  
                <span class="input-group-addon"><i class="fa fa-lock"></i></span>  
                <input type="password" class="form-control" name="password" placeholder="Password *">  
            </div>  
            <h5><?php echo @$passblank; ?></h5>  
            <h5><?php echo @$passErr; ?></h5>  
     </div>  
       <div class="form-group">  
           <div class="input-group">  
                <span class="input-group-addon"><i class="fa fa-phone"></i></span>  
                <input type="text" class="form-control" name="number" min="10" max="10" placeholder="Phone *" value="<?php echo @$number; ?>">  
           </div>  
           <h5><?php echo @$Noblank; ?></h5>  
           <h5><?php echo @$phoneErr; ?></h5>  
     </div>  
           <div class="form-group">  
        <input type="submit" class="btn btn-warning btn-block btn-lg" name="submit" style="border-radius:0px;" value="Sign Up">  
           </div>  
        </form>  
      </div>  
    </body>  
 </html>  

A few think to note here:

First is that our form's action attribute is set to register.php. this mean that when form submit button is clicked, all the data in the form will be submitted to the same page (register.php).

Now create the style.css file in our working folder and paste the css code in it.

 body {  
      color: #999;  
      background: #f5f5f5;  
      font-family: 'Roboto', sans-serif;  
 }  
 .form-control, .form-control:focus, .input-group-addon {  
      border-color: #e1e1e1;  
      border-radius: 0;  
 }  
 .signup-form {  
      width: 390px;  
      margin: 0 auto;  
      padding: 30px 0;  
 }  
 .signup-form h2 {  
      color: #636363;  
      margin: 0 0 15px;  
      text-align: center;  
 }  
 .signup-form .lead {  
      font-size: 14px;  
      margin-bottom: 30px;  
      text-align: center;  
 }  
 .signup-form form {  
      border-radius: 1px;  
      margin-bottom: 15px;  
      background: #fff;  
      border: 1px solid #f3f3f3;  
      box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);  
      padding: 30px;  
 }  
 .signup-form .form-group {  
      margin-bottom: 20px;  
 }  
 .signup-form label {  
      font-weight: normal;  
      font-size: 13px;  
 }  
 .signup-form .form-control {  
      min-height: 38px;  
      box-shadow: none !important;  
      border-width: 0 0 1px 0;  
 }  
 .signup-form .input-group-addon {  
      max-width: 42px;  
      text-align: center;  
      background: none;  
      border-width: 0 0 1px 0;  
      padding-left: 5px;  
 }  
 .signup-form .btn {  
      font-size: 16px;  
      border-radius: 0%;  
      background:#e46d47;  
      border-radius: 3px;  
      border: none;  
      min-width: 140px;  
      outline: none !important;  
 }  
 .signup-form .btn:hover, .signup-form .btn:focus {  
      background:#e46d47;  
 }  
 .signup-form a {  
      color:#e46d47;  
      text-decoration: none;  
 }  
 .signup-form a:hover {  
      text-decoration: underline;  
 }  
 .signup-form .fa {  
      font-size: 21px;  
 }  
 .signup-form .fa-paper-plane {  
      font-size: 17px;  
 }  
 .signup-form .fa-check {  
      color: #fff;  
      left: 9px;  
      top: 18px;  
      font-size: 7px;  
      position: absolute;  
 }  
 h5{  
      margin-left:30px;  
      margin-top:1px;  
      font-family: Cambria;  
      color: red;  
      font-size: 15px;  
 }  

Now the form looks beautiful.

Let's now paste the code in register.php file.

 <?php  
      session_start();  
      include('includes/connection.php');  
      if (isset($_POST['submit'])) {  
                $name = $con->escape_string($_POST['name']);  
                $email = $con->escape_string($_POST['email']);  
                $password = $con->escape_string($_POST['password']);  
                $phone = $con->escape_string($_POST['number']);  
                $select = "SELECT * FROM users WHERE email = '$email'";  
                $runquery = $con->query($select);  
                $result = mysqli_num_rows($runquery);  
                if (empty($name)) {  
                     $nameblank = "Please Enter your Name";  
                }else if (empty($email)) {  
                     $emailblank = "Please Enter your Email";  
                }else if(!filter_var($email,FILTER_VALIDATE_EMAIL)){  
                     $emailErr = "Invalid Email Address";  
                }else if($result==1){  
                     $exists = "Email is already Exists";  
                }else if(empty($password)){  
                     $passblank = "Please Enter your Password";  
                }else if(strlen($password) >= 6){  
                 $passErr = "Password should be Six digits";  
                }else if(empty($phone)){  
                     $Noblank = "Please Enter your phone Number";  
                }else if(preg_match("/^[1-9][0-9]{10}$/",$phone)==10){  
                     $phoneErr = "Mobile number is not Valid";  
                }else{  
                $sql = "INSERT INTO users(name,email,password,phone) VALUES('$name','$email','$password','$phone')";  
                $query = $con->query($sql);  
                if ($query){  
                     header("Location:profile.php");  
                }else{  
                $error = "You are not Registred..Please Try again";  
                   }  
             }  
      }  
  ?>  

PHP Login Registration with full validation using mysqli database

Sessions are used to track logged in users and so we include a session_start() at the top of the file. When a user is registered in the database, they are immediately logged in and redirected to the index.php page.
    
And that's it for registration. Let's look at user login.
  
User Login page

Create login.php page to paste the code in it.

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <meta charset="utf-8"/>  
 <title>Login Up</title>  
 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>  
 <meta name="viewport" content="width=device-width, initial-scale=1"/>  
 <link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet"/>  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>  
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>  
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>  
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  
 </head>  
 <body>  
 <div class="signup-form">  
 <form action="" method="post">  
           <h2>Login</h2>  
            <div class="text-center">Create An account <a href="signup.php">Sign Up</a>.</div><br/>  
                 <h5 style="margin-left:90px;"><?php echo @$msg; ?></h5>  
                 <div class="form-group">  
                       <div class="input-group">  
                          <span class="input-group-addon"><i class="fa fa-paper-plane"></i></span>  
                          <input type="text" class="form-control" name="number" placeholder="Email or Phone *" value="<?php echo @$phone; ?>" />  
                   </div>  
                     <h5 style="color:red;"><?php echo @$blank; ?></h5>  
                 </div>  
                <div class="form-group">  
                     <div class="input-group">  
                          <span class="input-group-addon"><i class="fa fa-lock"></i></span>  
                          <input type="password" class="form-control" name="password" placeholder="Enter Password *" />  
                     </div>  
                     <h5 style="color:red;"><?php echo @$blapass; ?></h5>  
                </div>  
            <div class="form-group">  
                <input type="submit" class="btn btn-warning btn-block btn-lg" name="login" value="LogIn" style="border-radius:0px;"/>  
                </div>  
           </form>  
       </div>  
  </body>  
 </html>  

Everything on this page is similar to the register.php page.

Now the paste the user login code on it.
 <?php  
 session_start();  
 error_reporting(0);  
 include("includes/connection.php");  
      if (isset($_POST['login'])) {  
           $phone = $con->escape_string($_POST['number']);  
           $password = $con->escape_string($_POST['password']);  
      if (empty($phone)) {  
           $blank = "Email or Phone Number is required";  
      }else if(empty($password)){  
           $blapass = "Password is required";  
      }else {  
           $sql = "SELECT * FROM users WHERE password='$password' AND (email='$phone' OR phone='$phone')";  
           $fire = $con->query($sql);  
      if ($fire) {  
           $_SESSION['user_id'] = $user_id;  
           $_SESSION['name']=$name;  
           header("Location:profile.php");  
      }else{  
                $msg = "You are not Logged In";  
           }  
      }  
 }  
 ?>  

Again this does is check if the user has filled the form correct , confirms that their credentials match  a record from the database and logs them in the event that it does. After logging in, the user is redirected them to the index.php record with a success message

You can always support by sharing on social media or recommending my blog to your friends and colleagues.    
If you have any suggestions / problems about this tutorial, please comment on the  form below.😊

Post a Comment

Previous Post Next Post