Here in this tutorial, we will learn how to create a Simple Login form using PHP and Mysql. Users have to enter their details in the input fields. When users submit this form, the information of the user will be checked from the database. This tutorial is in addition to my previous post on Creating a simple registration form using PHP and Mysql.
If their information is matched from the database, then they will be redirected to the welcome page. Here you have to follow 8 steps.
- Creating a login form
- Giving style effects to form
- Creating a table in the database
- Connecting to the database
- Checking the credential provided by the user
- Creating login session.
- Creating a welcome page.
- Creating logout page.
1. Creating a login form
The code given below is simple HTML code to generate a login form. This form includes username and password fields and a Login button. Save code below as login.php.
<?php
include("logincheck.php"); ?>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>7topics - Login Demo</title>
</head>
<body>
<div id="formbox">
<?php if(isset($msg) & !empty($msg)){ echo $msg; } ?>
<h1>Login Here</h1>
<form action="logincheck.php" method="POST">
<p>
<label>User Name : </label>
<input id="username" type="text" name="username" placeholder="username" />
</p>
<p>
<label>Password : </label>
<input id="password" type="password" name="password" placeholder="password" />
</p>
<input id="register" type="submit" name="submit" value="Login" />
</form>
<p>Copyright © 2014 7topics.com</p>
</div>
</body>
</html>2. Giving style effects to form
CSS code for this HTML form to give it some stylish effect. Save this as style.css.
h1 {
font-family:'Open Sans',sans-serif !important;
}
#formbox{
width: 500px;
margin: 0 auto;
text-align: center;
padding: 10px;
color: #fff;
background : #556b2f;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#register{
border:2px solid #008b8b;
width: 100px;
height:30px;
color:#ffffff;
padding-left: 8px;
padding-right: 8px;
background : #006400;
border-radius: 10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#register:hover{
border:2px solid #088c8c;
color:#ffffff;
background : #006580;
}3. Creating a table in the database
After creating the database, Create a table named members. Members table consists of id, username, email, password. Here id is PRIMARY KEY and auto-incremented. username field is used to store username. The email field is used to store the email address of the user. The password field is used to store the password of the user. To create the table, import the code given below in SQL.
CREATE TABLE IF NOT EXISTS `members` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(100) NOT NULL,
`email` varchar(200) NOT NULL,
`password` varchar(100) NOT NULL,
PRIMARY KEY (`id`),
UNIQUE KEY `username` (`username`) );4. Connecting to the database
<?php
$connection = mysqli_connect('localhost', 'username', 'password');
if (!$connection){
die("Database Connection Failed" . mysqli_error($connection));
}
$select_db = mysqli_select_db($connection,'database');
if (!$select_db){
die("Database Selection Failed" . mysqli_error($connection));
}
?>5. Checking the credential provided by the user.
Now we will make a file logincheck.php to match data given by the user with the database.
<?php
include("config.php");
session_start();
if($_SERVER["REQUEST_METHOD"] == "POST") {
// username and password sent from form
$username=$_POST['username'];
$password=$_POST['password'];
$selectsql="SELECT id FROM members WHERE username='$username' and password='$password'";
$result=mysqli_query($connection,$selectsql);
$row=mysqli_fetch_array($result);
$active=$row['active'];
$count=mysqli_num_rows($result);
// If result matched $username and $password, table row must be 1 row
if($count==1) {
$_SESSION['login_user']=$username;
header("location: index.php");
} else {
$error="Your username or Password is incorrect";
echo $error."<br>";
echo "<a href='login.php'>Go back</a>";
}
}
?>6. Creating login session.
The code given below is used to create a login session to record user value. Save code given below as session.php.
<?php
include('config.php');
session_start();
if(isset($_SESSION['login_user'])){
$user_check=$_SESSION['login_user'];
$ses_sql=mysqli_query($connection,"select username from members where username='$user_check' ");
$row=mysqli_fetch_array($ses_sql,MYSQLI_ASSOC);
$loggedin_session=$row['username'];
}
if(!isset($loggedin_session)) {
header("Location: login.php");
}
?>7. Creating a welcome page.
The code given below is used to post data submitted by the user in the database. Create a file named index.php and copy the code below in it.
<?php include('session.php'); ?>
<!DOCTYPE html>
<html>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<title>7topics - Login Demo</title>
</head>
<body>
<h1>Welcome <?php echo $loggedin_session; ?></h1>
<p> You are now logged in. you can logout by clicking on signout link given below.
<h2><a href="logout.php">Sign Out</a></h2>
</body>
</html>8. Creating a logout page.
Now we need to make a logout page that will close the login session and send the user back to the login page. Save code given below as logout.php.
<?php
session_start();
if(session_destroy()) {
header("Location: login.php");
}
?>
No Responses