PHP – MySQL Sign in
This demonstration is to let you how to create a login page with MySQL Database. Before entering the code portion, You would need special privileges to create or to delete a MySQL database. So assuming you have access to the root user, you can create any database using MySQL MySQL admin binary.
- The PHP file is having information about MySQL Database configuration.
index.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<?php session_start(); ?> <?php include('dbcon.php'); ?> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="form-wrapper"> <form action="#" method="post"> <h3>Login here</h3> <div class="form-item"> <input type="text" name="user" required="required" placeholder="Username" autofocus required></input> </div> <div class="form-item"> <input type="password" name="pass" required="required" placeholder="Password" required></input> </div> <div class="button-panel"> <input type="submit" class="button" title="Log In" name="login" value="Login"></input> </div> </form> <?php if (isset($_POST['login'])) { $username = mysqli_real_escape_string($con, $_POST['user']); $password = mysqli_real_escape_string($con, $_POST['pass']); $query = mysqli_query($con, "SELECT * FROM users WHERE password='$password' and username='$username'"); $row = mysqli_fetch_array($query); $num_row = mysqli_num_rows($query); if ($num_row > 0) { $_SESSION['user_id']=$row['user_id']; header('location:home.php'); } else { echo 'Invalid Username and Password Combination'; } } ?> <div class="reminder"> <p>Not a member? <a href="#">Please Sign up now</a></p> <p><a href="#">Forgot password?</a></p> </div> </div> </body> </html> |
home.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php include('dbcon.php'); include('session.php'); $result=mysqli_query($con, "select * from users where user_id='$session_id'")or die('Error In Session'); $row=mysqli_fetch_array($result); ?> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="form-wrapper"> <center><h3>Welcome: <?php echo $row['name']; ?> </h3></center> <div class="reminder"> <p><a href="logout.php">Log out</a></p> </div> </div> </body> </html> |
dbcon.php
1 2 3 4 5 6 7 |
<?php $con = mysqli_connect("localhost","root","","login2"); if (mysqli_connect_errno()) { echo "Failed to connect to MySQL: " . mysqli_connect_error(); } ?> |
logout.php
1 2 3 4 5 |
<?php session_start(); session_destroy(); header('location:index.php'); ?> |
session.php
1 2 3 4 5 |
<?php session_start(); session_destroy(); header('location:index.php'); ?> |
style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
body { color: #fff; font: 87.5%/1.5em 'Open Sans', sans-serif; background:url(img/bg.jpg)no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} .form-wrapper { width:300px; height:370px; position: absolute; top: 50%; left: 48%; border-radius: 5px; box-shadow: 0px 1px 0px rgba(0,0,0,0.6),inset 0px 1px 0px rgba(255,255,255,0.04); margin: -184px 0px 0px -155px; background: rgba(0,0,0,0.27); padding: 15px 25px; } .form-item { width:100%; } h3{ font-size: 25px; font-weight: 640; margin-bottom: 10px; color: #e7e7e7; padding:6px; font-family:'sans-serif','helvetica'; } .form-item input{ border: none; background:transparent; color: #fff; margin-top:11px; font-family: 'Open Sans', sans-serif; font-size: 1.2em; height: 49px; padding: 0 16px; width: 100%; padding-left: 55px; } input[type='password']{ background: transparent url("img/pass.jpg") no-repeat; background-position: 10px 50%; } input[type='text']{ background: transparent url("img/user.jpg") no-repeat; background-position: 10px 50%; } .form-item input:focus { outline: none; border:1.4px solid #cfecf0; } .button-panel { width: 100%; margin-bottom: 20px; padding-top: 10px; } .button-panel .button { background: #00b6df; border: none; color: #fff; cursor: pointer; height: 50px; transition: background 0.6s linear; width: 100%; margin-top:10px; font-family: 'helvetica','Open Sans', sans-serif; font-size: 1.2em; text-align: center; text-transform: uppercase; } .button:hover { background: #6eb7cb; } .form-item input, .button-panel .button { border-radius: 2px } .reminder { text-align: center; } .reminder a { transition: color 0.3s; color: #fff; text-decoration: none; } .reminder a:hover { color: #cab6bf; } |