Build PHP 7 MySQLi Login Registration System Script in Browser Using HTML5 & Javascript

Categorized as PHP

Screenshot 

#Database Create a database in phpmyadmin and run the code in SQL. Done Change config in server/classess/db.php file

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";
CREATE TABLE `user_table` (
  `id` int(11) NOT NULL,
  `username` varchar(30) NOT NULL,
  `email` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
  `image` longblob NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
ALTER TABLE `user_table`
  ADD PRIMARY KEY (`id`);
ALTER TABLE `user_table`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;

index.html

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <title>PHP Login Registration Using MySQL</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <script src="../js/validation.js"></script>
  <link rel="stylesheet" href="style.css">
</head>


<body>
  <div class="header">
    Welcome To Login & Registration
  </div>
  <div class="container">
    <div class="Reg">
      <div class="top">
        <p style="text-align:left"> Registration</p>
      </div>
      <form class="form-horizontal" name="registrationForm" action="../server/user_registration.php" method="POST">
        <fieldset>
          <div class="form-group">
            <label class="col-md-4 control-label" for="username">User Name</label>
            <div class="col-md-5">
              <input id="username" name="username" type="text" placeholder="Your Username" class="form-control input-md">

            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label" for="email">e-Mail</label>
            <div class="col-md-5">
              <input id="email" name="email" type="text" placeholder="Your eMail" class="form-control input-md">

            </div>
          </div>

          <div class="form-group">
            <label class="col-md-4 control-label" for="password">Password</label>
            <div class="col-md-5">
              <input id="password" name="password" type="password" placeholder="Your Password" class="form-control input-md">

            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label" for="photo">Photo</label>
            <div class="col-md-4">
              <input id="photo" name="photo" class="input-file" type="file">
            </div>
          </div>
          <div class="form-group">
            <div class="col-md-4">
              <button class="btn btn-block btn=default" type="button" value="Register" id="singlebutton" name="btnSubmit" onclick="return validate()">Registration</button>
            </div>
          </div>

        </fieldset>
      </form>
    </div>
    <div class="login">
      <div class="top">
        Login
      </div>
      <form class="form-horizontal" name="loginForm" action="../server/logincheck.php" method="POST">
        <fieldset>
          <div class="form-group">
            <label class="col-md-4 control-label" for="username">User Name</label>
            <div class="col-md-5">
              <input id="username" name="username" type="text" placeholder="Your Username" class="form-control input-md">

            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label" for="password">Password</label>
            <div class="col-md-5">
              <input id="password" name="password" type="password" placeholder="Your Password" class="form-control input-md">

            </div>
          </div>
          <div class="form-group">
            <div class="col-md-4">
              <button class="btn btn-block btn-default" type="submit" value="Login" name="btnSubmit">Login</button>
            </div>
          </div>

        </fieldset>
      </form>
    </div>
  </div>


</body>

</html>

login.html

<!DOCTYPE <!DOCTYPE html>
<html>

<head>
  <title>Welcome</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>


<body>
  <div class="header">
    Welcome To Login & Registration
  </div>

    <div class="login">
      <div class="top">
        Login
      </div>
      <form class="form-horizontal" name="loginForm" action="../server/logincheck.php" method="POST">
        <fieldset>
          <div class="form-group">
            <label class="col-md-4 control-label" for="username">User Name</label>
            <div class="col-md-5">
              <input id="username" name="username" type="text" placeholder="Your Username" class="form-control input-md">

            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label" for="password">Password</label>
            <div class="col-md-5">
              <input id="password" name="password" type="password" placeholder="Your Password" class="form-control input-md">

            </div>
          </div>
          <div class="form-group">
            <div class="col-md-4">
              <button type="submit" value="Login" name="btnSubmit">Button</button>
            </div>
          </div>

        </fieldset>
      </form>
    </div>


</body>

</html>

style.css

.container {
  display: grid;
  grid-template-columns: 700px 500px;

}
.header{
  font-size: 40px;
  text-align: center;
  color: teal;
}
.top{
  font-size: 30px;
  text-align: center;
  color: teal;
}
.col-md-5 {
    max-width: 100% !important;
}
.col-md-4 {
    max-width: 100% !important;
}

welcome.html

<!DOCTYPE <!DOCTYPE html>
<html>
<head>
    <title>Welcome</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="../js/validation.js"></script>
</head>


<body>

<!--
Login
<form name="loginForm" action="../server/user_entry.php" method="POST" >
    Username:<br>
    <input type="text" name="name"><br>
    Password:<br>
    <input type="password" name="password" placeholder="eg:p123678"><br>
    <input type="button" value="Login" name="submit" onclick="return validate()">
</form>
-->

Registration
<form name="registrationForm" action="../server/user_registration.php" method="POST" >
    Name:<br>
    <input type="text" name="username"><br>
    E-mail:<br>
    <input type="email" name="email"><br>
    Password:<br>
    <input type="password" name="password" placeholder="eg:p123678"><br>
    <input type="button" value="Register" name="btnSubmit" onclick="return validate()">
</form>

<form class="form-horizontal" name="registrationForm" action="../server/user_registration.php" method="POST">
<fieldset>
<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username</label>
  <div class="col-md-5">
  <input id="username" name="username" type="text" placeholder="Your Username" class="form-control input-md">

  </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label" for="email">e-Mail</label>
  <div class="col-md-5">
  <input id="email" name="email" type="text" placeholder="Your eMail" class="form-control input-md">

  </div>
</div>

<div class="form-group">
  <label class="col-md-4 control-label" for="password">Password</label>
  <div class="col-md-5">
    <input id="password" name="password" type="password" placeholder="Your Password" class="form-control input-md">

  </div>
</div>
<input type="button" value="Register" name="btnSubmit" onclick="return validate()">
</fieldset>
</form>

</body>
</html>

validation.js

function validate() {
      if( document.registrationForm.username.value == "" ) {
         alert( "Please provide your name!" );
         document.registrationForm.username.focus() ;
         return false;
      }

      if( document.registrationForm.email.value == "" ) {
         alert( "Please provide your email!" );
         document.registrationForm.email.focus() ;
         return false;
      }

      var password=document.registrationForm.password.value;
      if(password.length<6 || password.length>20){
         alert("Password must be between 6 to 20 character");
         document.registrationForm.email.focus();
         return false;
      }
      document.registrationForm.submit();
      return( true );
   
}
<?php
#connection establish
include 'classes/usercheck.php';

$usernameInfo=$_POST['username'];
$passwordInfo=$_POST['password'];

$user=new User;
$user->insertUser($usernameInfo,$passwordInfo);
<?php
#connection establish
include 'classes/user.php';

$usernameInfo=$_POST['username'];
$emailInfo=$_POST['email'];
$passwordInfo=$_POST['password'];

$user=new User;
$user->insertUser($usernameInfo,$emailInfo,$passwordInfo);
/*
if(isset($_POST['submit']))
{
 	$nameInfo=$_POST['name'];
 	$emailInfo=$_POST['email'];
 	$passwordInfo=$_POST['password'];
 	$query="INSERT INTO user_table(name,email,password) VALUES('$nameInfo','$emailInfo','$passwordInfo')";
 	$run=mysqli_query($connectionResource,$query);
 	if($run)
 	{
 		echo "Inserted Successfully";
 	}
 	else {
    echo "Error: " . $query . "<br>" . mysqli_error($con);
}
 
}
mysqli_close($connectionResource);
*/
?>

by : https://github.com/AveyBD/php-login-registration-using-php-mysql

Categorized as PHP