Login System in PHP/MySQL using mysqli

Submitted by jaredgwapo on Wednesday, March 2, 2016 - 15:54.

Language

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

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%;
  margin: -184px 0px 0px -155px;
  background: rgba(0,0,0,0.27);
  padding: 15px 25px;
  border-radius: 5px;
  box-shadow: 0px 1px 0px rgba(0,0,0,0.6),inset 0px 1px 0px rgba(255,255,255,0.04);
}
 
.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 {
  margin-bottom: 20px;
  padding-top: 10px;
  width: 100%;
}
 
.button-panel .button {
  background: #00b6df;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 50px;
  font-family: 'helvetica','Open Sans', sans-serif;
  font-size: 1.2em;
  text-align: center;
  text-transform: uppercase;
  transition: background 0.6s linear;
  width: 100%;
  margin-top:10px;
}
 
.button:hover {
  background: #6eb7cb;
}
 
.form-item input, .button-panel .button {
  border-radius: 2px
}
 
.reminder {
  text-align: center;
}
 
.reminder a {
  color: #fff;
  text-decoration: none;
  transition: color 0.3s;
}
 
.reminder a:hover {
  color: #cab6bf;
}

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

<?php
$con = mysqli_connect("localhost","root","","login");
 
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }
?>

Next, creating our html code. Copy the code below and name it as index.php

<?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 include('login.php'); ?>
  <div class="reminder">
    <p>Not a member? <a href="#">Sign up now</a></p>
    <p><a href="#">Forgot password?</a></p>
  </div>
 
</div>
 
</body>
</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
	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';
				}
		}
  ?>

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

<?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>

Lastly, Our logout.php page.

<?php
session_start();
session_destroy();
header('location:index.php');
?>

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

Please I need a help on the project topic HRMS on .vb13

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]

Forgot password

Could you please add forgot password script too.

Add new comment

Add new comment
4085 views