Skip to main content

Login System in PHP/MySQL using mysqli

Language


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
  5. {
  6. echo "Failed to connect to MySQL: " . mysqli_connect_error();
  7. }
  8. ?>

Next, creating our html code. Copy the code below and name it as index.php

  1. <?php session_start(); ?>
  2. <?php include('dbcon.php'); ?>
  3. <link rel="stylesheet" type="text/css" href="style.css">
  4. </head>
  5. <div class="form-wrapper">
  6.  
  7. <form action="#" method="post">
  8. <h3>Login here</h3>
  9.  
  10. <div class="form-item">
  11. <input type="text" name="user" required="required" placeholder="Username" autofocus required></input>
  12. </div>
  13.  
  14. <div class="form-item">
  15. <input type="password" name="pass" required="required" placeholder="Password" required></input>
  16. </div>
  17.  
  18. <div class="button-panel">
  19. <input type="submit" class="button" title="Log In" name="login" value="Login"></input>
  20. </div>
  21. </form>
  22. <?php include('login.php'); ?>
  23. <div class="reminder">
  24. <p>Not a member? <a href="#">Sign up now</a></p>
  25. <p><a href="#">Forgot password?</a></p>
  26. </div>
  27.  
  28. </div>
  29.  
  30. </body>
  31. </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.  
  10. <link rel="stylesheet" type="text/css" href="style.css">
  11. </head>
  12. <div class="form-wrapper">
  13. <center><h3>Welcome: <?php echo $row['name']; ?> </h3></center>
  14. <div class="reminder">
  15. <p><a href="logout.php">Log out</a></p>
  16. </div>
  17. </div>
  18.  
  19. </body>
  20. </html>

Lastly, Our logout.php page.

  1. <?php
  2. header('location:index.php');
  3. ?>

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.

Comments

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

Could you please add forgot password script too.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.