Google Ads

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

 

 


Related Post

Live Server Time Clock using PHP and Javascript PH... Live Server Time Clock using PHP and Javascript PHP Script Hello, friends. Today, I am sharing "Live Server Time Clock using PHP and Javascript". V...
Quizzio – PHP Quiz Website Script | Viral So... Quizzio - PHP Quiz Website Script | Viral Social QuizzesQuizzio - PHP Quiz Website Script | Viral Social QuizzesQuizzio is a PHP based application thr...
Vertical CSS3 Ecommerce Mega Menu PHP Script Downl... Vertical CSS3 Ecommerce Mega MenuVertical CSS3 Ecommerce Mega MenuThe CSS3 Ecommerce Mega Menu is a professional CSS2 & CSS3 Ecommerce Menu compatible...
Student Management System PHP Script Student Management System PHP Script Student management system is a sleek web database application that is very responsive and runs seamlessly on a...
Quick Media – Hospital/Clinic Management Sys... Quick Media - Hospital/Clinic Management SystemQuick Media - Hospital/Clinic Management SystemQuick Media – Hospital/Clinic Management System is pow...

Have any Question or Comment?

Leave a Reply

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

"