Login pages are the easiest to create and most essential unit of any website. The best way to build a login system is by using XAMPP and a few text files. As discussed in earlier articles, XAMPP is a software bundle that provides a suitable environment for implementing web solutions and verifying it. The verification is done before deploying the website over the live web. XAMPP package contains PHP, which plays the most vital role in the development of a login system. The software requirements prior to initiating the creation of the login page for a website are discussed below:
Pre-requisites for creating a login page
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.
Adequate knowledge about HTML, PHP, and query construction.
A software for text editing and modification such as Brackets, Notepad, Dreamweaver, etc. Here we will be using Brackets.
Essential files for the login page
Before moving towards the steps followed for creating a login system, we need to create some mandatory files which will be used in the future during the process of development of a login page. The process of creating each file will also be discussed in this article.
html -It is mandatory to create this file because it is used for the "Graphic User Interface" view of the page and empty field validation.
css - It is important to include this file because it is required to make the page look tempting to users and lure the audience by attractive formatting of the login page.
php -This file has a vital role as it contains the connection code for database connectivity of the page.
php -The role of this file is validation. It is used to crosscheck the form data with the database, which is submitted by the user.
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 icon and click on the “Start” button corresponding to Apache and MySQL modules.
STEP 2- Now open any web browser on your system and visit the given address- http:// localhost or http://127.0.0.1. If the server is running successfully, continue to the next step.
STEP 3- Relaunch the XAMPP Control Panel and click on “Admin” corresponding to the MySQL module. It redirects you to localhost/phpmyadmin/. Now, create the database for the validation form of the login page.
STEP 4- To create a new database, click “Create” after entering the name in Database name as required. Here we named it as “login page”.
STEP 5- Now, click the SQL tab button. Paste the query given below and click “Go.” The table is created successfully.
STEP 6- Keep putting your Webpage files into the destination folder. The folder can be located following the sequence – c:/xampp/htdocs.
STEP 7- Launch Brackets (an open source text editor) and create the login.php file. Copy-paste the code lines mentioned below into login.php file.
<?php
session_start();
if(!isset($_SESSION["sess_user"])){
header("location:login.php");
} else {
?>
<!doctype html>
<html>
<head>
<title>Welcome</title>
<style>
body{
margin-top: 110px;
margin-bottom: 110px;
margin-right: 160px;
margin-left: 90px;
background-color: lightcyan;
color: palevioletred;
font-family: verdana;
font-size: 100%
}
h2 {
color: darkred;
font-family: indigo;
font-size: 100%;
}
h1 {
color: darkred;
font-family: indigo;
font-size: 100%;
}
</style>
</head>
<body>
<center><h1>CREATE REGISTRATION AND LOGIN FORM USING PHP IN XAMPP</h1></center>
<h2>Welcome, <?=$_SESSION['sess_user'];?>! <a href="logout.php">Logout</a></h2>
<p>
WE DID IT. SUCCESSFULLY CREATED REGISTRATION AND LOGIN FORM USING PHP IN XAMPP
</p>
</body>
</html>
<?php
}
?>
STEP 8- Now, create another file titled Register.php and copy-paste the code mentioned below into the data and register your name and password with unused usernames.
<!doctype html>
<html>
<head>
<title>Register</title>
<style>
body{
margin-top: 110px;
margin-bottom: 110px;
margin-right: 160px;
margin-left: 90px;
background-color: lightcyan;
color: palevioletred;
font-family: verdana;
font-size: 100%
}
h1 {
color: darkred;
font-family: indigo;
font-size: 100%;
}
h2 {
color: darkred;
font-family: indigo;
font-size: 100%;
}</style>
</head>
<body>
<center><h1>CREATE REGISTRATION AND LOGIN FORM USING PHP IN XAMPP</h1></center>
<p><a href="register.php">Register</a> | <a href="login.php">Login</a></p>
<center><h2>Registration Form</h2></center>
<form action="" method="POST">
<legend>
<fieldset>
Username: <input type="text" name="user"><br />
Password: <input type="password" name="pass"><br />
<input type="submit" value="Register" name="submit" />
</fieldset>
</legend>
</form>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['user']) && !empty($_POST['pass'])) {
$user=$_POST['user'];
$pass=$_POST['pass'];
$con=mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('user_registration') or die("cannot select DB");
$query=mysql_query("SELECT * FROM login WHERE username='".$user."'");
$numrows=mysql_num_rows($query);
if($numrows==0)
{
$sql="INSERT INTO login(username,password) VALUES('$user','$pass')";
$result=mysql_query($sql);
if($result){
echo "Account Successfully Created";
} else {
echo "Failure!";
}
} else {
echo "That username already exists! Please try again with another.";
}
} else {
echo "All fields are required!";
}
}
?>
</body>
</html>
STEP 9- The third file to be created is Logout.php. The code to be used in this file is mentioned below.
STEP 10- The last file to be created is the Member.php file. The file should contain the following code.
<?php
session_start();
if(!isset($_SESSION["sess_user"])){
header("location:login.php");
} else {
?>
<!doctype html>
<html>
<head>
<title>Welcome</title>
<style>
body{
margin-top: 110px;
margin-bottom: 110px;
margin-right: 160px;
margin-left: 90px;
background-color: lightcyan;
color: palevioletred;
font-family: verdana;
font-size: 100%
}
h2 {
color: darkred;
font-family: indigo;
font-size: 100%;
}
h1 {
color: darkred;
font-family: indigo;
font-size: 100%;
}
</style>
</head>
<body>
<center><h1>CREATE REGISTRATION AND LOGIN FORM USING PHP IN XAMPP</h1></center>
<h2>Welcome, <?=$_SESSION['sess_user'];?>! <a href="logout.php">Logout</a></h2>
<p>
WE DID IT. SUCCESSFULLY CREATED REGISTRATION AND LOGIN FORM USING PHP IN XAMPP
</p>
</body>
</html>
<?php
}
?>
STEP 11- The last step is to check the database to verify whether the data has stored or not.