How To Create User Login Page In PHP/MySQL Using PDO Query

On my previous tutorial, I make an article and it's called Registration Form In PHP/MySQL Using PDO Query. If you are looking for on How To Create User Login Page In PHP/MySQL Using PDO Query then you are at the right place. And this is the follow-up tutorial for Registration Form In PHP/MySQL Using PDO Query. Let's start with: List of Users: List of Users

Creating our Table

We are going to make our database. To create a database:
  1. Open the PHPMyAdmin.
  2. Create a database and name it as "registration_pdo".
  3. After creating a database name, then we are going to create our table. And name it as "user_registration".
Kindly copy the code below.
  1. --
  2. -- Table structure for table `user_registration`
  3. --
  4.  
  5. CREATE TABLE `user_registration` (
  6. `user_id` INT(11) NOT NULL,
  7. `first_name` VARCHAR(100) NOT NULL,
  8. `last_name` VARCHAR(100) NOT NULL,
  9. `user_name` VARCHAR(100) NOT NULL,
  10. `password` VARCHAR(100) NOT NULL
  11. ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
We are going to make our Log In Page.

Creating Log In Page

This source code that the user types their username and password to log in.
  1. <form method="post" action="log_in_query.php">
  2.  
  3. <table border="0" cellpadding="10" cellspacing="1" class="tblLogin">
  4. <tr class="tableheader">
  5. <td align="center" colspan="2">Login Page</td>
  6. </tr>
  7. <tr class="tablerow">
  8. <td align="right">Username</td>
  9. <td><input type="text" autofocus="autofocus" class="textbox_detail" name="user_name" required></td>
  10. </tr>
  11. <tr class="tablerow">
  12. <td align="right">Password</td>
  13. <td><input type="password" autofocus="autofocus" class="textbox_detail" name="password" required></td>
  14. </tr>
  15. <tr class="tableheader">
  16. <td align="center" colspan="2"><input type="submit" class="btn_submit" name="submit" value="Login"></td>
  17. </tr>
  18.  
  19. </form>
We are going to make our database connection.

Database Connection

This PHP Script is our database. Copy and paste this then save it as "connection.php".
  1. <?php $conn = new PDO('mysql:host=localhost; dbname=registration_pdo','root', ''); ?>
We are going to make our login script.

Log In Query

This step is to create our login script and save it as "log_in_query.php".
  1. <?php
  2. include('connection.php');
  3. $user_name = $_POST['user_name'];
  4. $password = $_POST['password'];
  5.  
  6. $query = $conn->query("Select * from user_registration where user_name = '$user_name' and password ='$password' ");
  7. $count = $query->rowcount();
  8. $row = $query->fetch();
  9.  
  10. if ($count > 0){
  11. $_SESSION['id'] = $row['user_id'];
  12. header('location:home.php');
  13. } else {
  14. ?>
  15. <script>
  16. alert("Incorrect Details. Check your User Name or Password.")
  17. window.location="index.php";
  18. </script>
  19. <?php
  20. }
  21. ?>
And, this code for the logout query then saves it as "log_out_query.php".
  1. <?php
  2. header('location:index.php');
  3. ?>
And, this source code for the home page kindly copy and save it as "home.php".
  1. <?php include ('connection.php'); ?>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html>
  6.  
  7. <head>
  8. <title>How To Create User Login Page In PHP/MySQL Using PDO Query</title>
  9. <link rel="stylesheet" type="text/css" href="styles.css" />
  10. </head>
  11.  
  12. <body>
  13.  
  14. <?php
  15. if (!isset($_SESSION['id'])){
  16. header('location:index.php');
  17. }
  18. $session_id = $_SESSION['id'];
  19. $session_query = $conn->query("select * from user_registration where user_id = '$session_id'");
  20. $user_row = $session_query->fetch();
  21. ?>
  22.  
  23. <table border="0" cellpadding="10" cellspacing="1" width="100%" class="tblLogin">
  24. <tr class="tableheader">
  25. <td align="center">Home</td>
  26. </tr>
  27. <tr class="tablerow">
  28. <td align="center">
  29. <p class="blink_text">Welcome User!!!</p>
  30. <?php echo $user_row['first_name']." ".$user_row['last_name']; ?>
  31. </td>
  32. </tr>
  33.  
  34. <tr class="tableheader">
  35. <td align="center">
  36. Click here to <a href="log_out_query.php"> Logout </a>
  37. </td>
  38. </tr>
  39. </table>
  40.  
  41. </body>
  42.  
  43. </html>
And, this is the style.
  1. body {
  2. width:500px;
  3. margin:auto;
  4. }
  5. h2 {
  6. color:red;
  7. font-family:cursive;
  8. text-align:center;
  9. }
  10. a {
  11. text-decoration:none;
  12. color:black;
  13. }
  14. a:hover {
  15. color:red;
  16. }
  17. .tableheader {
  18. background-color: aliceblue;
  19. color:blue;
  20. font-weight:bold;
  21. font-size:large;
  22. }
  23. .tablerow {
  24. background-color: whitesmoke;
  25. color:blue;
  26. font-weight:bold;
  27. font-size:18px;
  28. }
  29. #message {
  30. color: white;
  31. border: red 1px solid;
  32. background: red;
  33. padding:20px;
  34. font-size:18px;
  35. font-weight:bold;
  36. margin-top: 31px;
  37. border-radius:4px;
  38. width: 305px;
  39. }
  40. .tblLogin{
  41. margin : auto;
  42. border:blue 3px solid;
  43. }
  44. .textbox_detail {
  45. font-size:18px;
  46. text-indent:5px;
  47. background:azure;
  48. border:blue 1px solid;
  49. border-radius:4px;
  50. cursor:pointer;
  51. }
  52. .btn_submit {
  53. font-size:18px;
  54. width:100px;
  55. border:blue 1px solid;
  56. background:azure;
  57. color:blue;
  58. cursor:pointer;
  59. }
  60.  
  61. .blink_text {
  62. -webkit-animation-name: blinker;
  63. -webkit-animation-duration: 1s;
  64. -webkit-animation-timing-function: linear;
  65. -webkit-animation-iteration-count: infinite;
  66.  
  67. -moz-animation-name: blinker;
  68. -moz-animation-duration: 1s;
  69. -moz-animation-timing-function: linear;
  70. -moz-animation-iteration-count: infinite;
  71.  
  72. animation-name: blinker;
  73. animation-duration: 1s;
  74. animation-timing-function: linear;
  75. animation-iteration-count: infinite;
  76.  
  77. color:red;
  78. font-size:large;
  79. }
  80.  
  81. @-moz-keyframes blinker {
  82. 0% { opacity: 1.0; }
  83. 50% { opacity: 0.0; }
  84. 100% { opacity: 1.0; }
  85. }
  86.  
  87. @-webkit-keyframes blinker {
  88. 0% { opacity: 1.0; }
  89. 50% { opacity: 0.0; }
  90. 100% { opacity: 1.0; }
  91. }
  92.  
  93. @keyframes blinker {
  94. 0% { opacity: 1.0; }
  95. 50% { opacity: 0.0; }
  96. 100% { opacity: 1.0; }
  97. }
If the user types incorrect details in the login page. IncorrectAnd, this is our Home Page. Home Page You can use this source code to merge the previous tutorial that I made and it's called Registration Form In PHP/MySQL Using PDO Query. This is all the steps on How To Create User Login Page In PHP/MySQL Using PDO Query. So, this is it, or you can download the full source code below by clicking the "Download Code" button below. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment