Login System in PHP/MySQL using mysql New PHP Script


Login System in PHP/MySQL using mysql New PHP Script

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

 

View Code:
 
  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. .form-wrapper {
  10. width:300px;
  11. height:370px;
  12. position: absolute;
  13. top: 50%;
  14. left: 48%;
  15. margin: -184px 0px 0px -155px;
  16. background: rgba(0,0,0,0.27);
  17. padding: 15px 25px;
  18. border-radius: 5px;
  19. box-shadow: 0px 1px 0px rgba(0,0,0,0.6),inset 0px 1px 0px rgba(255,255,255,0.04);
  20. }
  21. .form-item {
  22. width:100%;
  23. }
  24. h3{
  25. font-size: 25px;
  26. font-weight: 640;
  27. margin-bottom: 10px;
  28. color: #e7e7e7;
  29. padding:6px;
  30. font-family:'sans-serif','helvetica';
  31. }
  32. .form-item input{
  33. border: none;
  34. background:transparent;
  35. color: #fff;
  36. margin-top:11px;
  37. font-family: 'Open Sans', sans-serif;
  38. font-size: 1.2em;
  39. height: 49px;
  40. padding: 0 16px;
  41. width: 100%;
  42. padding-left: 55px;
  43. }
  44. input[type='password']{
  45. background: transparent url("img/pass.jpg") no-repeat;
  46. background-position: 10px 50%;
  47. }
  48. input[type='text']{
  49. background: transparent url("img/user.jpg") no-repeat;
  50. background-position: 10px 50%;
  51. }
  52. .form-item input:focus {
  53. outline: none;
  54. border:1.4px solid #cfecf0;
  55. }
  56. .button-panel {
  57. margin-bottom: 20px;
  58. padding-top: 10px;
  59. width: 100%;
  60. }
  61. .button-panel .button {
  62. background: #00b6df;
  63. border: none;
  64. color: #fff;
  65. cursor: pointer;
  66. height: 50px;
  67. font-family: 'helvetica','Open Sans', sans-serif;
  68. font-size: 1.2em;
  69. text-align: center;
  70. text-transform: uppercase;
  71. transition: background 0.6s linear;
  72. width: 100%;
  73. margin-top:10px;
  74. }
  75. .button:hover {
  76. background: #6eb7cb;
  77. }
  78. .form-item input, .button-panel .button {
  79. border-radius: 2px
  80. }
  81. .reminder {
  82. text-align: center;
  83. }
  84. .reminder a {
  85. color: #fff;
  86. text-decoration: none;
  87. transition: color 0.3s;
  88. }
  89. .reminder a:hover {
  90. color: #cab6bf;
  91. }

 

Then, we will be creating our database connection. Copy the code below and name it as dbcon.php

 

Code:
 
  1. <?php
  2. $con = mysqli_connect("localhost","root","","login");
  3. // Check connection
  4. if (mysqli_connect_errno())
  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

 

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

<?php

 

Code:
 
  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. $query = mysqli_query($con, "SELECT * FROM users WHERE password='$password' and username='$username'");
  7. $row = mysqli_fetch_array($query);
  8. $num_row = mysqli_num_rows($query);
  9. if ($num_row > 0)
  10. {
  11. $_SESSION['user_id']=$row['user_id'];
  12. header('location:home.php');
  13. }
  14. else
  15. {
  16. echo 'Invalid Username and Password Combination';
  17. }
  18. }
  19. ?>

 

After the login.php, We will create our home.php page.

 

Code:
 
  1. <?php
  2. include('dbcon.php');
  3. include('session.php');
  4. $result=mysqli_query($con, "select * from users where user_id='$session_id'")or die('Error In Session');
  5. $row=mysqli_fetch_array($result);
  6. ?>
  7. <html>
  8. <head>
  9. <link rel="stylesheet" type="text/css" href="style.css">
  10. </head>
  11. <body>
  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. </body>
  19. </html>

 

Lastly, Our logout.php page.

 

Code:
 
  1. <?php
  2. session_start();
  3. session_destroy();
  4. header('location:index.php');
  5. ?>

 

Finally, you have created a login system in PHP and MySQL using mysql

 

 

Have any Question or Comment?

Leave a Reply

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

"