How to make Login page in php and mysql with help of wampserver

Hello Guys In This Post We will Learn about How to make Login page in php and mysql with help of wampserver , do you want to make Login page in php and mysql with help of wampserver 2.5.

How to make Login page in php and mysql with help of wampserver 

To do this process you have wamp server and notepad++ with PHP Version 5.5.12

To do this process, we will be using some steps like creating a database, creating connections and commanding, So let's start.

First Step : Create Database and Table

We will create a database and after that will create a table in phpmyAdmin

CREATE TABLE IF NOT EXISTS `user` (
  `Id` int(11) NOT NULL AUTO_INCREMENT,
  `name_` varchar(100) DEFAULT NULL,
  `email` varchar(100) DEFAULT NULL,
  `pass` varchar(100) DEFAULT NULL,
  PRIMARY KEY (`Id`)
)

Second Step : Create Design of Login page (index.php)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/login_page.css"/>
<div id="login-box">
 
  
   <div class="left" id="reg">
    <h1>Sign up</h1>
    <form method="post">
    <input type="text" required="required" name="username" placeholder="Username" />
    <input type="text" name="email" placeholder="E-mail" />
    <input type="password" name="password" placeholder="Password" />
    <input type="password" name="password2" placeholder="Retype password" />
    
    <input type="submit" name="signup" value="Sign me up" />
</form>
  </div>
    <div class="left" id="login">
    <h1>Login</h1>
      <form method="post">
    <input type="text" name="username" placeholder="Username" />
    <input type="password" name="password" placeholder="Password" />

    
    <input type="submit" name="login" value="Log In" />
</form>
  </div>
  
  <div class="right">
    <span class="loginwith"><a href="https://www.skillneverend.com">SkillNeverEnd.com</a></span>
    

       <button id="show" class="social-signin twitter">Log in</button>
              <button id="register" class="social-signin twitter">Register</button>
  </div>
  <div class="or">OR</div>
</div>
 <span> design and Developed by <a target="_blank" href="https://www.skillneverend.com">SkillNeverEnd.com</a></span>
<script>
$(document).ready(function(){
 $("#login").hide();
 $("#register").hide();
  $("#show").click(function(){
    $("#reg").hide();
     $("#login").show();
      $("#register").show();
       $("#show").hide();
  });
  
    $("#register").click(function(){
    $("#reg").show();
     $("#login").hide();
      $("#register").hide();
       $("#show").show();
  });
  });
  


</script>

login_page.css Code

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500);
*:focus {
  outline: none;
}

body {
  margin: 0;
  padding: 0;
  background: #DDD;
  font-size: 16px;
  color: #222;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

#login-box {
  position: relative;
  margin: 5% auto;
  width: 600px;
  height: 400px;
  background: #FFF;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.left {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  padding: 40px;
  width: 300px;
  height: 400px;
}

h1 {
  margin: 0 0 20px 0;
  font-weight: 300;
  font-size: 28px;
}

input[type="text"],
input[type="password"] {
  display: block;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 4px;
  width: 220px;
  height: 32px;
  border: none;
  border-bottom: 1px solid #AAA;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  font-size: 15px;
  transition: 0.2s ease;
}

input[type="text"]:focus,
input[type="password"]:focus {
  border-bottom: 2px solid #16a085;
  color: #16a085;
  transition: 0.2s ease;
}

input[type="submit"] {
  margin-top: 28px;
  width: 120px;
  height: 32px;
  background: #16a085;
  border: none;
  border-radius: 2px;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  transition: 0.1s ease;
  cursor: pointer;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
  opacity: 0.8;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: 0.1s ease;
}

input[type="submit"]:active {
  opacity: 1;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: 0.1s ease;
}

.or {
  position: absolute;
  top: 180px;
  left: 280px;
  width: 40px;
  height: 40px;
  background: #DDD;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  line-height: 40px;
  text-align: center;
}

.right {
  position: absolute;
  top: 0;
  right: 0;
  box-sizing: border-box;
  padding: 40px;
  width: 300px;
  height: 400px;
  background: url('https://goo.gl/YbktSj');
  background-size: cover;
  background-position: center;
  border-radius: 0 2px 2px 0;
}

.right .loginwith {
  display: block;
  margin-bottom: 40px;
  font-size: 28px;
  color: #000;
  text-align: center;
}

button.social-signin {
  margin-bottom: 20px;
  width: 220px;
  height: 36px;
  border: none;
  border-radius: 2px;
  color: #FFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  transition: 0.2s ease;
  cursor: pointer;
}

button.social-signin:hover,
button.social-signin:focus {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  transition: 0.2s ease;
}

button.social-signin:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  transition: 0.2s ease;
}

button.social-signin.facebook {
  background: #32508E;
}

button.social-signin.twitter {
  background: #55ACEE;
}

button.social-signin.google {
  background: #DD4B39;
}

Third Step : Create Connection and Connect Database (config.php)

<?php

 $con=mysqli_connect("localhost","username","","database_name");

?>

Fourth Step : When Click on Login Button to Login

 if(isset($_POST['login']))
{
    include"config.php";
    $result=mysqli_query($con,"select * from user where name_='".$_POST['username']."' and pass='".$_POST['password']."'");
    $row=mysqli_num_rows($result);
    if($row==1)
    {
        header("Location:home.html");
        
    }
    
    else{
        echo"Wrong";
    }         
    
}

Final Step : Result 

When User click on Login Button if user put write value Then User Redirect on Home.html Page and got message Success, else redirect on same page got message Wrong.

also read login page in php 5.3