Today in this tutorial we are going to learn about how to simple login page using PHP and MySQL. we assume you have installed local server, have access to root user and can create database using MySql admin.
Step 1: Create a `users` table in MySQL database
CREATE TABLE `users` ( `id` int(10) NOT NULL AUTO_INCREMENT, `username` varchar(50) NOT NULL, `password` varchar(50) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1;
First create a database. we have created db named ‘tutorial'(you can name it anything) and run above query to create `users` table and add some data manually to the table for login or simply run following query.
INSERT INTO `users` (`id`, `username`, `password`) VALUES (1, ‘admin’, ‘admin’);
Step 2: Create a Login page (index.php)
After creating a database and a users table let’s create a login page consisting a form with username and password. And make sure you keep method type to `POST`.
<?php
if(isset($_GET['msg'])){
echo "<script>alert('Oops that did not match, please try again')</script>";
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP MySQL Login System</title>
<link href="https://fonts.googleapis.com/css?family=Solway&display=swap" rel="stylesheet">
<style type="text/css">
body{
font-family: 'Solway', serif;
}
h3{
color: #4CAF50;
}
.main{
margin: 180px 500px;
width: 250px;
padding: 30px;
min-height: 100px;
background-color: rgb(238,238,238);
text-align: center;
border-radius: 2px;
box-shadow: 0.5px 1px 7px 0.5px;
}
.form{
line-height: 2.5em;
letter-spacing: 0.03em
}
.form input{
height: 20px;
border-left: 0px;
border-right: 0px;
border-top: 0px;
}
.button {
padding:3px;
height: 25px;
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="main">
<h3>Login form</h3>
<form action="login.php" method="POST" class="form">
<label>Username</label>
<input type="text" class="text" name="username">
<label>Password</label>
<input type="password" class="text" name="password">
<button class="button">Login</button>
</form>
</div>
</body>
</html>
Step 3: Verify Login info (login.php)
When our login form is submitted we need to verify if user exists or not in the database. For that we create a new file named `login.php`. If the users exist then we redirect it to destination otherwise we need to ask for correct credentials. we set different data into session before redirecting to destination. Know more about why we use session.
<?php
$DB_SERVER="localhost";
$DB_USERNAME="root";
$DB_PASSWORD="";
$DB_DATABASE"tutorial";
$connection = mysqli_connect($DB_SERVER,$DB_USERNAME,$DB_PASSWORD,$DB_DATABASE);
if(!$connection){
echo "Error: Unable to connect to mysql";
echo "Debugging error:"/mysqli_connect_error().php_EOL;
exit;
}
if (isset($_POST['username']) and isset($_POST['password'])){
$username = $_POST['username'];
$password = $_POST['password'];
$query = “SELECT * FROM `users` WHERE username=’$username’ and password=’$password'”;
$result = mysqli_query($connection, $query) or die(mysqli_error($connection));
$count = mysqli_num_rows($result);
if ($count > 0){ session_start();
$_SESSION[‘username’] = $username;
header(“location: home.php”);
}
else{
header(“location: index.php?msg=Invalid Login Credentials”);
}
}
?>
Step 4: Create a destination page (home.php)
After login we redirect user to `home.php`.
<?php session_start(); ?><html>
<head>
<title>Welcome </title>
</head>
<body>
<h1>Welcome <?php echo $_SESSION['username']; ?></h1>
<h2><a href = "logout.php">Sign Out</a></h2>
</body>
</html>
Step 5: Destroy session to logout(logout.php)
In order to log out user we should destroy the session using the function `session_destroy()`.
<?php
session_start();
session_destroy();
header('Location: index.php');
?>
(Visited 1,069 times, 1 visits today)