How to Create Login Page Using XAMPP: Best Explained 007EH

How to Create Login Page Using XAMPP

How to Create Login Page Using XAMPP – create a Login pages is 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.

How to Create Login Page Using XAMPP:

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.

How to Create Login Page Using XAMPP html file

It is mandatory to create this file because it is used for the “Graphic User Interface” view of the page and empty field validation.

How to Create Login Page Using XAMPP css file

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.

How to Create Login Page Using XAMPP php file

This file has a vital role as it contains the connection code for database connectivity of the page. 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- How to Create Login Page Using XAMPP

Firstly, launch the XAMPP Control Panel by clicking the icon and click on the “Start” button corresponding to Apache and MySQL modules.

How to Create Login Page Using XAMPP

STEP 2- How to Create Login Page Using XAMPP

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- How to Create Login Page Using XAMPP

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- How to Create Login Page Using XAMPP

To create a new database, click “Create” after entering the name in Database name as required. Here we named it as “login page”.

How to Create Login Page Using XAMPP

STEP 5- How to Create Login Page Using XAMPP

Now, click the SQL tab button. Paste the query given below and click “Go.” The table is created successfully.

How to Create Login Page Using XAMPP

STEP 6- How to Create Login Page Using XAMPP

Keep putting your Webpage files into the destination folder. The folder can be located following the sequence – c:/xampp/htdocs.

STEP 7- How to Create Login Page Using XAMPP

Launch Brackets (an open source text editor) and create the login.php file. Copy-paste the code lines mentioned below into login.php file.

  1. <?php     
  2. session_start();    
  3. if(!isset($_SESSION[“sess_user”])){    
  4.     header(“location:login.php”);    
  5. } else {    
  6. ?>    
  7. <!doctype html>    
  8. <html>    
  9. <head>    
  10. <title>Welcome</title>    
  11.     <style>     
  12.         body{    
  13.                 
  14.     margin-top: 110px;    
  15.     margin-bottom: 110px;    
  16.     margin-right: 160px;    
  17.     margin-left: 90px;    
  18.     background-color: lightcyan;    
  19.     color: palevioletred;    
  20.     font-family: verdana;    
  21.     font-size: 100%    
  22.         
  23.         }    
  24.             h2 {    
  25.     color: darkred;    
  26.     font-family: indigo;    
  27.     font-size: 100%;    
  28. }    
  29.         h1 {    
  30.     color: darkred;    
  31.     font-family: indigo;    
  32.     font-size: 100%;    
  33. }    
  34.                 
  35.             
  36.     </style>    
  37. </head>    
  38. <body>    
  39.     <center><h1>CREATE REGISTRATION AND LOGIN FORM USING PHP IN XAMPP</h1></center>    
  40.         
  41. <h2>Welcome, <?=$_SESSION[‘sess_user’];?><a href=”logout.php”>Logout</a></h2>    
  42. <p>    
  43. WE DID IT. SUCCESSFULLY CREATED REGISTRATION AND LOGIN FORM USING PHP IN XAMPP    
  44. </p>    
  45. </body>    
  46. </html>    
  47. <?php    
  48. }    
  49. ?>    
How to Create Login Page Using XAMPP

STEP 8- How to Create Login Page Using XAMPP

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.

  1. <!doctype html>    
  2. <html>    
  3. <head>    
  4. <title>Register</title>    
  5.     <style>     
  6.         body{    
  7.     margin-top: 110px;    
  8.     margin-bottom: 110px;    
  9.     margin-right: 160px;    
  10.     margin-left: 90px;    
  11.     background-color: lightcyan;    
  12.     color: palevioletred;    
  13.     font-family: verdana;    
  14.     font-size: 100%    
  15.         
  16.         }    
  17.             h1 {    
  18.     color: darkred;    
  19.     font-family: indigo;    
  20.     font-size: 100%;    
  21. }    
  22.          h2 {    
  23.     color: darkred;    
  24.     font-family: indigo;    
  25.     font-size: 100%;    
  26. }</style>    
  27. </head>    
  28. <body>    
  29.        
  30.     <center><h1>CREATE REGISTRATION AND LOGIN FORM USING PHP IN XAMPP</h1></center>    
  31.    <p><a href=”register.php”>Register</a> | <a href=”login.php”>Login</a></p>    
  32.     <center><h2>Registration Form</h2></center>    
  33. <form action=”” method=”POST”>    
  34.     <legend>    
  35.     <fieldset>    
  36.             
  37. Username: <input type=”text” name=”user”><br />    
  38. Password: <input type=”password” name=”pass”><br />     
  39. <input type=”submit” value=”Register” name=”submit” />    
  40.                 
  41.         </fieldset>    
  42.         </legend>    
  43. </form>    
  44. <?php    
  45. if(isset($_POST[“submit”])){    
  46. if(!empty($_POST[‘user’]) && !empty($_POST[‘pass’])) {    
  47.     $user=$_POST[‘user’];    
  48.     $pass=$_POST[‘pass’];    
  49.     $con=mysql_connect(‘localhost’,’root’,”) or die(mysql_error());    
  50.     mysql_select_db(‘user_registration’) or die(“cannot select DB”);    
  51.     
  52.     $query=mysql_query(“SELECT * FROM login WHERE username='”.$user.”‘”);    
  53.     $numrows=mysql_num_rows($query);    
  54.     if($numrows==0)    
  55.     {    
  56.     $sql=”INSERT INTO login(username,password) VALUES(‘$user’,’$pass’)”;    
  57.     
  58.     $result=mysql_query($sql);    
  59.         if($result){    
  60.     echo “Account Successfully Created”;    
  61.     } else {    
  62.     echo “Failure!”;    
  63.     }    
  64.     
  65.     } else {    
  66.     echo “That username already exists! Please try again with another.”;    
  67.     }    
  68.     
  69. } else {    
  70.     echo “All fields are required!”;    
  71. }    
  72. }    
  73. ?>    
  74. </body>    
  75. </html>  
Creating Login Page Using XAMPP

STEP 9- How to Create Login Page Using XAMPP

The third file to be created is Logout.php. The code to be used in this file is mentioned below.

Creating Login Page Using XAMPP

STEP 10- How to Create Login Page Using XAMPP

The last file to be created is the Member.php file. The file should contain the following code.

  1. <?php     
  2. session_start();    
  3. if(!isset($_SESSION[“sess_user”])){    
  4.     header(“location:login.php”);    
  5. } else {    
  6. ?>    
  7. <!doctype html>    
  8. <html>    
  9. <head>    
  10. <title>Welcome</title>    
  11.     <style>     
  12.         body{    
  13.                 
  14.     margin-top: 110px;    
  15.     margin-bottom: 110px;    
  16.     margin-right: 160px;    
  17.     margin-left: 90px;    
  18.     background-color: lightcyan;    
  19.     color: palevioletred;    
  20.     font-family: verdana;    
  21.     font-size: 100%    
  22.         
  23.         }    
  24.             h2 {    
  25.     color: darkred;    
  26.     font-family: indigo;    
  27.     font-size: 100%;    
  28. }    
  29.         h1 {    
  30.     color: darkred;    
  31.     font-family: indigo;    
  32.     font-size: 100%;    
  33. }    
  34.                 
  35.             
  36.     </style>    
  37. </head>    
  38. <body>    
  39.     <center><h1>CREATE REGISTRATION AND LOGIN FORM USING PHP IN XAMPP</h1></center>    
  40.         
  41. <h2>Welcome, <?=$_SESSION[‘sess_user’];?><a href=”logout.php”>Logout</a></h2>    
  42. <p>    
  43. WE DID IT. SUCCESSFULLY CREATED REGISTRATION AND LOGIN FORM USING PHP IN XAMPP    
  44. </p>    
  45. </body>    
  46. </html>    
  47. <?php    
  48. }    
  49. ?>  

STEP 11- How to Create Login Page Using XAMPP

The last step is to check the database to verify whether the data has stored or not.

How to Create Login Page Using XAMPP FAQ

How do I create a website using xampp?

However next time you need to add a new site you can follow these steps.

Create a folder on your computer for the files.
Edit your host file to add the site name.
Edit httpd-vhosts to add the VirtualHost.
Restart Apache using the XAMPP Control Panel.
Create a database for your site using PHPMyAdmin.

How can I login as administrator in PHP?

How to create admin login page using PHP?

Follow the steps to create an admin login page using PHP: …
Create Table: Create a table named “adminlogin”, inside “loginpage” database.
Create Table Structure: The table “adminlogin” should contain three fields.
The datatype for adminname and password is varchar.

How do I create a username and password in xampp?

You can do it in another way by following these steps:

In the browser, type: localhost/xampp/
On the left side bar menu, click Security.
Now you can set the password as you want.
Go to the xampp folder where you installed xampp.
Find and open the phpMyAdmin folder.
Find and open the config.

How do I create a login page?

Follow the steps to create a responsive Login form using CSS.

STEP 1 : Adding CSS.
Step 1 : Adding HTML.

Step 3 : Adding CSS. Add the required CSS to design the login page try to keep the design as simple as possible.
Step 4 : Adding HTML. Add an image inside a container and add inputs with matching labels for each field.

Related Articles

Responses