Login System in PHP/MySQL using mysqli

Submitted by jaredgwapo on Wednesday, March 2, 2016 - 15:54.
Language
PHP
In this tutorial, I am going to teach you how to make a login in using PHP/MySQL using mysqli. Just follow the instructions below.

Instructions

First, we will create our css code and name it as style.css
  1. body {
  2.   color: #fff;
  3.   font: 87.5%/1.5em 'Open Sans', sans-serif;
  4.         background:url(img/bg.jpg)no-repeat center center fixed;
  5.   -webkit-background-size: cover;
  6.   -moz-background-size: cover;
  7.   -o-background-size: cover;
  8.   background-size: cover;}
  9.  
  10.  
  11.  
  12. .form-wrapper {
  13. width:300px;
  14. height:370px;
  15.   position: absolute;
  16.   top: 50%;
  17.   left: 48%;
  18.   margin: -184px 0px 0px -155px;
  19.   background: rgba(0,0,0,0.27);
  20.   padding: 15px 25px;
  21.   border-radius: 5px;
  22.   box-shadow: 0px 1px 0px rgba(0,0,0,0.6),inset 0px 1px 0px rgba(255,255,255,0.04);
  23. }
  24.  
  25. .form-item {
  26. width:100%;
  27. }
  28.  
  29.  
  30. h3{
  31.   font-size: 25px;
  32.   font-weight: 640;
  33.   margin-bottom: 10px;
  34.   color: #e7e7e7;
  35.   padding:6px;
  36.   font-family:'sans-serif','helvetica';
  37. }
  38.  
  39.  
  40.  
  41. .form-item input{
  42.   border: none;
  43.   background:transparent;
  44.   color: #fff;
  45.   margin-top:11px;
  46.   font-family: 'Open Sans', sans-serif;
  47.   font-size: 1.2em;
  48.   height: 49px;
  49.   padding: 0 16px;
  50.   width: 100%;
  51.   padding-left: 55px;
  52.  
  53. }
  54. input[type='password']{
  55.         background: transparent url("img/pass.jpg") no-repeat;
  56.         background-position: 10px 50%;
  57. }
  58. input[type='text']{
  59.         background: transparent url("img/user.jpg") no-repeat;
  60.         background-position: 10px 50%;
  61.  
  62. }
  63.  
  64. .form-item input:focus {
  65.   outline: none;
  66.   border:1.4px solid #cfecf0;
  67. }
  68.  
  69. .button-panel {
  70.   margin-bottom: 20px;
  71.   padding-top: 10px;
  72.   width: 100%;
  73. }
  74.  
  75. .button-panel .button {
  76.   background: #00b6df;
  77.   border: none;
  78.   color: #fff;
  79.   cursor: pointer;
  80.   height: 50px;
  81.   font-family: 'helvetica','Open Sans', sans-serif;
  82.   font-size: 1.2em;
  83.   text-align: center;
  84.   text-transform: uppercase;
  85.   transition: background 0.6s linear;
  86.   width: 100%;
  87.   margin-top:10px;
  88. }
  89.  
  90. .button:hover {
  91.   background: #6eb7cb;
  92. }
  93.  
  94. .form-item input, .button-panel .button {
  95.   border-radius: 2px
  96. }
  97.  
  98. .reminder {
  99.   text-align: center;
  100. }
  101.  
  102. .reminder a {
  103.   color: #fff;
  104.   text-decoration: none;
  105.   transition: color 0.3s;
  106. }
  107.  
  108. .reminder a:hover {
  109.   color: #cab6bf;
  110. }
Then, we will be creating our database connection. Copy the code below and name it as dbcon.php
  1. <?php
  2. $con = mysqli_connect("localhost","root","","login");
  3.  
  4. // Check connection
  6.   {
  7.   echo "Failed to connect to MySQL: " . mysqli_connect_error();
  8.   }
  9. ?>
Next, creating our html code. Copy the code below and name it as index.php
  1. <?php session_start(); ?>
  2. <?php include('dbcon.php'); ?>
  5. <link rel="stylesheet" type="text/css" href="style.css">
  6. </head>
  8. <div class="form-wrapper">
  9.  
  10.   <form action="#" method="post">
  11.     <h3>Login here</h3>
  12.        
  13.     <div class="form-item">
  14.                 <input type="text" name="user" required="required" placeholder="Username" autofocus required></input>
  15.     </div>
  16.    
  17.     <div class="form-item">
  18.                 <input type="password" name="pass" required="required" placeholder="Password" required></input>
  19.     </div>
  20.    
  21.     <div class="button-panel">
  22.                 <input type="submit" class="button" title="Log In" name="login" value="Login"></input>
  23.     </div>
  24.   </form>
  25.   <?php include('login.php'); ?>
  26.   <div class="reminder">
  27.     <p>Not a member? <a href="#">Sign up now</a></p>
  28.     <p><a href="#">Forgot password?</a></p>
  29.   </div>
  30.  
  31. </div>
  32.  
  33. </body>
  34. </html>
After creating our index.php page, we will now create our php script and name it as login.php. Don't forget to include it in our index.php.
  1. <?php
  2.         if (isset($_POST['login']))
  3.                 {
  4.                         $username = mysqli_real_escape_string($con, $_POST['user']);
  5.                         $password = mysqli_real_escape_string($con, $_POST['pass']);
  6.                        
  7.                         $query          = mysqli_query($con, "SELECT * FROM users WHERE  password='$password' and username='$username'");
  8.                         $row            = mysqli_fetch_array($query);
  9.                         $num_row        = mysqli_num_rows($query);
  10.                        
  11.                         if ($num_row > 0)
  12.                                 {                      
  13.                                         $_SESSION['user_id']=$row['user_id'];
  14.                                         header('location:home.php');
  15.                                        
  16.                                 }
  17.                         else
  18.                                 {
  19.                                         echo 'Invalid Username and Password Combination';
  20.                                 }
  21.                 }
  22.   ?>
After the login.php, We will create our home.php page.
  1. <?php
  2. include('dbcon.php');
  3. include('session.php');
  4.  
  5. $result=mysqli_query($con, "select * from users where user_id='$session_id'")or die('Error In Session');
  6. $row=mysqli_fetch_array($result);
  7.  
  8. ?>
  9.  
  12. <link rel="stylesheet" type="text/css" href="style.css">
  13. </head>
  15. <div class="form-wrapper">
  16.     <center><h3>Welcome: <?php echo $row['name']; ?> </h3></center>
  17.          <div class="reminder">
  18.     <p><a href="logout.php">Log out</a></p>
  19.   </div>
  20. </div>
  21.  
  22. </body>
  23. </html>
Lastly, Our logout.php page.
  1. <?php
  4. header('location:index.php');
  5. ?>
Finally, you have created a login system in PHP and MySQL using mysqli. For more information, questions or suggestions just comment below or email me at [email protected]

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags
login system
login
login mysqli

Comments

Submitted by Ravi Prakash Shukla (not verified) on Mon, 09/23/2019 - 23:21

Could you please add forgot password script too.

Add new comment

About text formats