Login System in PHP/MySQL using mysqli

Submitted by: 
Language: 
Visitors have accessed this post 19553 times.

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

I need the codes for the login Form document which four users will login and this codes needs to take each users to their forms. These users involves Employees, HR manger, Admin and suppliers.
This is ma e-mail : [email protected]

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.