aleeza/ August 15, 2019/ BOOTSTRAP, HTML & CSS, MYSQL, PHP, PHPMYADMIN/ 0 comments

DEMO: http://aleezadev.com/Login-signup/

Sign In Form
Sign Up Form

In this tutorial you will learn how to build a login system with PHP and MySQL.

WHAT WE’LL COVER:

  1. File Structure
  2. Creating HTML page
  3. Creating Database and Table inside PHPMyAdmin
  4. Connecting HTML page with PHPMyAdmin

File Structure:

We’ll use this folders & files structure inside our “Login-signup” folder for our Login & Signup page.

CSS folder is for your css files.

Images folder is for images.

Include Folder is for your database connections.

Creating HTML Page

In this part we will create the Sign in and Sign Up Page. We will put it in a file named as index.php. Below is the html/php code for index.php.

index.php

<!-- ! press tab -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Home</title>
</head>

<body>
  <div class="container">
 <div class="login-html">
   <!--This is for the nav tab sign in and sign up -->
   <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab">Sign In</label>
   <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
   <div class="login-form">
     <form class="sign-in-htm" action="" method="post">
       <div class="group">
         <label for="user" class="label">Username</label>
         <input id="username" name="username" type="text" class="input" autocomplete="off" placeholder="Enter Username"required>
       </div>
       <div class="group">
         <label for="pass" class="label">Password</label>
         <input id="password" name="password" type="password" class="input" data-type="password"  placeholder="Enter Password"autocomplete="off" required>
       </div>
<br>
       <div class="group">
         <input type="submit" class="button" style="color:white;" name="sign_in"  value="Sign In">
       </div>
       <!-- <div class="group">
         <div class="foot-lnk" style="color:white;">
           <a href="#forgot">Forgot Password?</a>
         </div>
       </div> -->
       <div class="hr"></div>
       <?php include("signin_user.php"); ?>

     </form>
     <form class="sign-up-htm" action="" method="POST">
       <div class="group">
         <label for="user" class="label">Username</label>
         <input id="username" name="user_name" type="text" class="input" required>
       </div>
       <div class="group">
         <label for="pass" class="label">Password</label>
         <input id="password" name="user_password" type="password" class="input" data-type="password" required>
       </div>
       <div class="group">
         <label for="pass" class="label">Confirm Password</label>
         <input id="pass" type="password" name="cpassword"class="input" data-type="password" required>
       </div>
       <div class="group">
         <input type="submit" class="button" style="color:white;" name="sign_up"value="Sign Up">
       </div>
       <div class="foot-lnk" style="color:white;">
         <label for="tab-1">Already Member?</a>
       </div>
       <?php include("signup_user.php"); ?>
     </form>
   </div>
 </div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</html>

Now we have to design the html page. Create a file that named as style.css inside the css folder. Below is the code for style.css , this will be the stylesheet for the whole project.

style.css

body{
  background: #8E0E00;  /* fallback for old blogin-htmlsers */
background: -webkit-linear-gradient(to right, #1F1C18, #8E0E00);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #1F1C18, #8E0E00); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
font-family: 'Raleway', sans-serif;

}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
.container{

  width:100%;
  margin:auto;
  margin-top: 30px;
  max-width:525px;
  min-height:570px;
  position:relative;
  background:url(slideimage.jpg) no-repeat center;
  box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
input:focus,
select:focus,
textarea:focus,
button:focus {
    outline: none;
}
.login-html{
  width:100%;
  height:100%;
  position:absolute;
  padding:90px 70px 50px 70px;
  background:black;
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
  top:0;
  left:0;
  right:0;
  bottom:0;
  position:absolute;
  -webkit-transform:rotateY(180deg);
          transform:rotateY(180deg);
  -webkit-backface-visibility:hidden;
          backface-visibility:hidden;
  transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
  display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
  text-transform:uppercase;
}
.login-html .tab{
  font-size:22px;
  margin-right:15px;
  padding-bottom:5px;
  margin:0 15px 10px 0;
  display:inline-block;
  border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
  color:#fff;
  border-color:#8e0e00;
}
.login-form{
  min-height:345px;
  position:relative;
  -webkit-perspective:1000px;
          perspective:1000px;
  -webkit-transform-style:preserve-3d;
          transform-style:preserve-3d;
}
.login-form .group{
  margin-bottom:15px;
}

.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
  width:100%;
  color:black;
  display:block;
}
.login-form .group .input,
.login-form .group .button{
  border:none;
  padding:15px 20px;
  border-radius:20px;
  background:white;
}
.login-form .group input[data-type="password"]{
  text-security:circle;
  -webkit-text-security:circle;
}
.login-form .group .label{
  color:#aaa;
  font-size:12px;
}
.login-form .group .button{
  background:#8e0e00;
}
.login-form .group label .icon{
  width:15px;
  height:15px;
  border-radius:2px;
  position:relative;
  display:inline-block;
  background:grey;
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
  content:'';
  width:10px;
  height:2px;
  background:#fff;
  position:absolute;
  transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
  left:3px;
  width:5px;
  bottom:6px;
  -webkit-transform:scale(0) rotate(0);
          transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
  top:6px;
  right:0;
  -webkit-transform:scale(0) rotate(0);
          transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
  color:white;
}
.login-form .group .check:checked + label .icon{
  background:#8e0e00;
}
.login-form .group .check:checked + label .icon:before{
  -webkit-transform:scale(1) rotate(45deg);
          transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
  -webkit-transform:scale(1) rotate(-45deg);
          transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
  -webkit-transform:rotate(0);
          transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
  -webkit-transform:rotate(0);
          transform:rotate(0);
}
.hr{
  height:2px;
  margin:60px 0 50px 0;
  background:rgba(255,255,255,.2);
}
.foot-lnk{
  text-align:center;
}

Creating a Database and User Table using PHPMyAdmin

Now we are going to add a database in our Localhost or in PHPMyAdmin.

Create a database users and table named users.

After creating the database and table we can now start creating the connection.php file. This file will connect your database into your php file.

Create a file named as connection.php inside the include folder. Paste the code below.

connection.php

<?php
$con=mysqli_connect("localhost","root","","users") or die ("Connection was not established");
 ?>

After creating the connection file, table and database we will now start creating the code that will make our sign in and sign up buttons work inside our index.php file

Below is the code for signin_user.php . This is for our sign in authentication. Create a file named as signin_user.php and paste the code below.

signin_user.php

<?php
session_start();
include("include/connection.php");

  if(isset($_POST['sign_in'])){
    $username= htmlentities(mysqli_real_escape_string($con,$_POST['username']));
    $pass= htmlentities(mysqli_real_escape_string($con,$_POST['password']));

    $select_user="select * from users where user_name='$username' AND user_password='$pass'";
    $query = mysqli_query($con, $select_user);
    $check_user=mysqli_num_rows($query);

    if($check_user==1){
      $_SESSION['user_name']=$username;

      $user= $_SESSION['user_name'];
      $get_user ="select * from users where user_name='$user'";
      $run_user= mysqli_query($con, $get_user);
      $row= mysqli_fetch_array($run_user);

      $user_name=$row['user_name'];

      echo"window.open('home.php?user_name=$user_name','_self')";
    }
    else{
      echo"

      
Check your email and password.
"; // use this code to refresh the site automatically after 2 sec. $url1=$_SERVER['REQUEST_URI']; header("Refresh: 2; URL=$url1"); } } ?>

After creating the sign in authentication code. Below is the code for signup_user.php . This is for creating new users.

Create a file named as signup_user.php and paste the code below.

signup_user.php

<?php
include("include/connection.php");
  if (isset($_POST['sign_up'])){
      $name= htmlentities(mysqli_real_escape_string($con,$_POST['user_name']));
      $pass= htmlentities(mysqli_real_escape_string($con,$_POST['user_password']));
      $cpass= htmlentities(mysqli_real_escape_string($con,$_POST['cpassword']));



      if($name==''){
        
          echo"alert('We cannot verify your name')";
      }
   
      if($pass!=$cpass){
          echo"alert('Your password do not match! Please enter again')";
          exit();
      }
      $check_username="select * from users where user_name='$name'";
      $run_username=mysqli_query($con,$check_username);

      $check=mysqli_num_rows($run_username);

      if($check==1){
        echo"alert('Email already exist, Please try again!')";

        exit();
      }

    $insert="insert into users (user_name,user_password) values('$name','$pass')";
    $query=mysqli_query($con,$insert);

    if($query){
      echo"alert('Congratulations $name, your account has been created successfully')";

    }
    else{
      echo"alert('Registration Failed, Try Again!')";
    }

  }

 ?>

After creating both sign in and sign up code we will now proceed to creating our landing page or homepage. This is where the user will be redirected when he/she successfully logged in.

HOMEPAGE

Below is the code for home.php

home.php

<?php
session_start();
include("include/connection.php");

if(!isset($_SESSION['user_name'])){
  header("location: index.php");
}
else{

?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
  <title>Home</title>
</head>

<body>
  <?php
$user=$_SESSION['user_name'];
$get_user="select * from users where user_name='$user'";
$run_user=mysqli_query($con,$get_user);
$row=mysqli_fetch_array($run_user);

$user_name=$row['user_name'];


 ?>
 <nav class="navbar navbar-expand-sm bg-dark navbar-dark justify-content-between"  style="background-color: black">
   <h3 style="color:white;"> Welcome! <?php echo "$user_name" ?>
</h3>
  <form class="form-inline">
    <button class="btn btn-dark my-2 my-sm-0" type="submit"><a href="logout.php" class="btn btn-danger">Log Out</a></button>
  </form>
</nav>

  
</body>
https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.js
https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js

</html>
<?php } ?>

Last but not the least… We are going to create the code for the log out button inside the homepage.

logout.php

<?php
session_start();

session_destroy();
header("Location:index.php");


 ?>

Now we are done with our Log In & Sign Up Authentication using PHP and MySql . Now you can run your index.php through localhost.

*Click this link to get my code from github https://github.com/codewithaleeza/LogInSignUp

Thank you.!

Share this Post

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*