Hi Guys, In this article we will be learning how to create login form in PHP using xampp as follows. The best way to build a login system is by using XAMPP and a few text files.
Pre-requisites for creating a login page
1. XAMPP : Localhost software such as XAMPP- It is a short form for the words "Cross-platform," "Apache" which is a web server, "MariaDB" which is a relational DBMS, "PHP" and "Perl" scripting languages.
2. Editor : To edit and modify your code download any editor like Notepad, VS Code Editor, Bracket, Notepad++, Sublime, etc.
The process to Create Login Page
The steps to follow for successful development of a login page for any website are given below.
STEP 1: Firstly, launch the XAMPP Control Panel by clicking the xampp icon and click on the "Start" button corresponding to Apache and MySQL modules as shown in below image.
STEP 2: Open your browser and run this url http://localhost/phpmyadmin and create a database named "php_login" by clicking on Database Tab as shown in below.
STEP 3: Click on your database name php_login and below that find "New" so when you click on it, It will open to Create a table in the database as shown below image:
OR you can create the table using below SQL Query
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`password` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
);
Now, We are ready to create login page in php mysql using xampp.
STEP 4: Create a login.php file for Login Form as follows:
<?php
session_start();
if(isset($_SESSION["loggedInUser"])){
header("Location: welcome.php");
exit();
}
?>
<?php
if(isset($_POST['loginBtn']))
{
$conn = mysqli_connect('localhost','root','','phptutorials');
if(!empty($_POST['email']) && !empty($_POST['password']))
{
$email = mysqli_real_escape_string($conn, $_POST['email']);
$password = mysqli_real_escape_string($conn, $_POST['password']);
$userCheck = mysqli_query($conn, "SELECT * FROM users WHERE email='$email' AND password='$password'");
if($userCheck)
{
if(mysqli_num_rows($userCheck) > 0)
{
$_SESSION['loggedInUser'] = true;
$_SESSION['show_message'] = 'Logged In Succcessfully';
header('Location: welcome.php');
}
else
{
$_SESSION['show_message'] = 'Invalid Email and Password';
}
}
else
{
$_SESSION['show_message'] = 'Something Went Wrong in Query';
}
}
else
{
$_SESSION['show_message'] = 'All fields are required';
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form</title>
<style>
html,body{
font-family: Arial, Helvetica, sans-serif;
}
.text-center{
text-align: center;
}
.login-card{
display: block;
margin: 30px auto 0px auto;
width: 30%;
border: 1px solid #ccc;
box-shadow: 3px 3px 9px 3px #ddd;
padding: 20px;
}
.input-box{
width: 95%;
margin-top: 10px;
margin-bottom: 20px;
}
.input-box input{
width: 100%;
display: block;
border: 1px solid #777;
border-radius: 4px;
padding: 8px 8px;
}
.submit-btn{
width: 100%;
padding: 10px;
background-color: blue;
color: #fff;
outline: 0;
border-radius: 6px;
margin-bottom: 10px;
cursor: pointer;
}
.alert{
background-color: skyblue;
padding: 14px 20px;
color: #fff;
}
</style>
</head>
<body>
<div>
<div class="login-card">
<?php
if(isset($_SESSION['show_message'])){
echo '<h4 class="alert">'.$_SESSION['show_message'].'</h4>';
unset($_SESSION['show_message']);
}
?>
<h2 class="text-center">Login Form</h2>
<hr>
<br/>
<form action="" method="POST">
<div class="input-box">
<label>Email Address</label>
<input type="email" name="email" />
</div>
<div class="input-box">
<label>Password</label>
<input type="password" name="password" />
</div>
<div>
<button name="loginBtn" class="submit-btn">Login Now</button>
</div>
<div class="text-center">
<br/>
<a href="register.php">Dont have account ? register now</a>
</div>
</form>
</div>
</div>
</body>
</html>
STEP 5: Create a file named welcome.php.
This welcom.php file is called after successful of user login.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Welcome</title>
<style>
.welcome-page{
text-align: center;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="welcome-page">
<h1>Welcome to Login System in php using xampp.</h1>
<a href="login.php">Click to Login</a>
<br/>
<br/>
<a href="logout.php">Click to LOGOUT</a>
</div>
</body>
</html>
STEP 6: Create a logout.php file to make the User log out.
<?php
session_start();
unset($_SESSION['loggedInUser']);
session_destroy();
header('Location: login.php');
exit();
?>
If you want to make a registration form in php mysql. Click this link for complete Login and Register Form in php mysql using xampp: https://www.fundaofwebit.com/post/login-and-registration-form-in-php-mysql-with-session
I hope, it helps you.
Thanks for reading.