Complete user registration system using PHP and MySQL database

February 05, 2019

We are creating a registration and login page with help of the PHP programming languageand MySQL database.

Step-1. Create a Database table go to PHPMyAdmin the create database name then click SQL Tab and paste the code.

Step-2. Create a databasefile.php file.

Step-3. After Create, the database name and database create a test.php page then paste this code.

Step-4. Create a test.php page then we go to create an HTML page then create a registration form.

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Softwarequery- Register Form</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body style="background-color: #999999;">
 
 <div class="limiter">
  <div class="container-login100">
   <div class="login100-more" style="background-image: url('images/bg-01.jpg');"></div>

<div class="wrap-login100 p-l-50 p-r-50 p-t-72 p-b-50">
    <form  action = "register.php" class="login100-form validate-form" method="POST"   <?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
               <?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
                Complete Code of Register.php>
     <span class="login100-form-title p-b-59">
      Register
     </span>

<div class="wrap-input100 validate-input" data-validate = "Valid email is required: ex@abc.xyz">
      <span class="label-input100">Email</span>
      <input class="input100" type="text" name="email" placeholder="Email addess...">
      <span class="focus-input100"></span>
     </div>

<div class="wrap-input100 validate-input" data-validate="Username is required">
      <span class="label-input100">Username</span>
      <input class="input100" type="text" name="username" placeholder="Username...">
      <span class="focus-input100"></span>
     </div>

<div class="wrap-input100 validate-input" data-validate = "Password is required">
      <span class="label-input100">Password</span>
      <input class="input100" type="password" name="password" placeholder="*************">
      <span class="focus-input100"></span>
     </div>

<div class="flex-m w-full p-b-33">
      <div class="contact100-form-checkbox">
       <input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
       <label class="label-checkbox100" for="ckb1">
        <span class="txt1">
         I agree to the
         <a href="#" class="txt2 hov1">
          Terms of User
         </a>
        </span>
       </label>
      </div>
                        </div>

Style.Css

[FONT ]*/

@font-face {
  font-family: Poppins-Regular;
  src: url('../fonts/poppins/Poppins-Regular.ttf');
}

@font-face {
  font-family: Poppins-Medium;
  src: url('../fonts/poppins/Poppins-Medium.ttf');
}

@font-face {
  font-family: Poppins-Bold;
  src: url('../fonts/poppins/Poppins-Bold.ttf');
}

@font-face {
  font-family: Poppins-SemiBold;
  src: url('../fonts/poppins/Poppins-SemiBold.ttf');
}

[ RESTYLE TAG ]*/

* {
 margin: 0px;
 padding: 0px;
 box-sizing: border-box;
}

body, html {
 height: 100%;
 font-family: Poppins-Regular, sans-serif;
}

/*---------------------------------------------*/
a {
 font-family: Poppins-Regular;
 font-size: 14px;
 line-height: 1.7;
 color: #666666;
 margin: 0px;
 transition: all 0.4s;
 -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  -moz-transition: all 0.4s;
}

a:focus {
 outline: none !important;
}

a:hover {
 text-decoration: none;
}

/*---------------------------------------------*/
h1,h2,h3,h4,h5,h6 {
 margin: 0px;
}

p {
 font-family: Poppins-Regular;
 font-size: 14px;
 line-height: 1.7;
 color: #666666;
 margin: 0px;
}

ul, li {
 margin: 0px;
 list-style-type: none;
}

/*---------------------------------------------*/
input {
 outline: none;

Login Form

Step-5. After creating the register page we are going to create a login page. First, create a login.php page then paste a PHP code.

Step-6. Create a logout.php page then paste this PHP code.

<?php
session_start();
session_destroy();
header('Location: login.php');

?>
Step-7. Create a login.html form

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Softwarequery-Login Form </title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/main.css">

</head>
<body style="background-color: #999999;">
 
 <div class="limiter">
  <div class="container-login100">
   <div class="login100-more" style="background-image: url('images/bg-01.jpg');"></div>

<div class="wrap-login100 p-l-50 p-r-50 p-t-72 p-b-50">
    <form action = "login.php"  class="login100-form validate-form" method="POST"   <?php if(isset($smsg)){ ?><div class="alert alert-success" role="alert"> <?php echo $smsg; ?> </div><?php } ?>
               <?php if(isset($fmsg)){ ?><div class="alert alert-danger" role="alert"> <?php echo $fmsg; ?> </div><?php } ?>
                Complete Code of Register.php>
     <span class="login100-form-title p-b-59">
      Register
     </span>

<a href="register.php" class="dis-block txt3 hov1 p-r-30 p-t-10 p-b-10 p-l-30">
       register
       <i class="fa fa-long-arrow-right m-l-5"></i>
      </a>
     </div>
    </form>
   </div>
  </div>
 </div>
 <script src="js/main.js"></script>
</body>
</html>

We are creating a registration and login page with help of the PHP programming languageand MySQL database.

Comments