In this tutorial, we will be using XAMPP as our local web server to run our PHP scripts and MySQL database server.
Creating Our Database and Table
Open your phpMyAdmin i.e. http://localhost/phpmyadmin and create a new database named logindb.
Create a Table named users with 5 columns to input: id, user_id, user_name, password, date
- id, user_id are indicated as BIGINT under Type
- user_name, password are indicated as VARCHAR under Type
- date is indicated as TIMESTAMP under Type
- corresponding to id – NULL index, PRIMARY, tick AI (autoincrement)
- Ciick Go to save
- Click More and Add Index each for user_id, user_name, date
Creatw The Database Connection
Open a text editor software like Sublime Text 3, Notepad ++ or a preferred one. Create a new PHP file named connection.php and save inside the folder xampp/htdocs/login. Copy/paste these codes in this php file, then save.
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "logindb";
if(!$con = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname))
{
die("failed to connect!");
}Create The User Interface
The PHP File scripts below are the codes for the pages in our signup and login web application. Save the files inside the folder xampp/htdocs/login using the suggested filenames for each.
Create Index.php file
Create and save another PHP file named index.php and copy/paste the following scripts:
<?php
session_start();
include("connection.php");
include("functions.php");
$user_data = check_login($con);
?>
<!DOCTYPE html>
<html>
<head>
<title>Ron Website</title>
</head>
<body>
<a href="logout.php">Logout</a>
<h1>This is the index page</h1>
<br>
Hello, <?php echo $user_data['user_name']; ?>
</body>
</html>Create Login.php
Create and save another PHP file named index.php and copy/paste the following scripts:
<?php
session_start();
include("connection.php");
include("functions.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
//something was posted
$user_name = $_POST['user_name'];
$password = $_POST['password'];
if(!empty($user_name) && !empty($password) && !is_numeric($user_name))
{
//read from database
$query = "select * from users where user_name = '$user_name' limit 1";
$result = mysqli_query($con, $query);
if($result)
{
if($result && mysqli_num_rows($result) > 0)
{
$user_data = mysqli_fetch_assoc($result);
if($user_data['password'] === $password)
{
$_SESSION['user_id'] = $user_data['user_id'];
header("Location: index.php");
die;
}
}
}
echo "wrong username or password!";
}else
{
echo "wrong username or password!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
</head>
<body>
<style type="text/css">
#text{
height: 25px;
border-radius: 5px;
padding: 4px;
border: solid thin #aaa;
width: 100%;
}
#button{
padding: 10px;
width: 100px;
color: white;
background-color: Lightblue;
border: none;
}
#box{
background-color: grey;
margin: auto;
width: 300px;
padding: 20px;
}
</style>
<div id="box">
<form method="post">
<div style="font-size: 20px;margin: 10px;color: white;">Login</div>
<input id="text" type="text" name="user_name"><br><br>
<input id="text" type="password" name="password"><br><br>
<input id="button" type="submit" value="Login"><br><br>
<a href="signup.php">Click to Signup</a><br><br>
</form>
</div>
</body>
</html>Create SignUp.php
Create and save another PHP file named signup.php and copy/paste the following scripts:
<?php
session_start();
include("connection.php");
include("functions.php");
if($_SERVER['REQUEST_METHOD'] == "POST")
{
//something was posted
$user_name = $_POST['user_name'];
$password = $_POST['password'];
if(!empty($user_name) && !empty($password) && !is_numeric($user_name))
{
//save to database
$user_id = random_num(20);
$query = "insert into users (user_id,user_name,password) values ('$user_id','$user_name','$password')";
mysqli_query($con, $query);
header("Location: login.php");
die;
}else
{
echo "Please enter some valid information!";
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Signup</title>
</head>
<body>
<style type="text/css">
#text{
height: 25px;
border-radius: 5px;
padding: 4px;
border: solid thin #aaa;
width: 100%;
}
#button{
padding: 10px;
width: 100px;
color: white;
background-color: Lightblue;
border: none;
}
#box{
background-color: grey;
margin: auto;
width: 300px;
padding: 20px;
}
</style>
<div id="box">
<form method="post">
<div style="font-size: 20px;margin: 10px;color: white;">Signup</div>
<input id="text" type="text" name="user_name"><br><br>
<input id="text" type="password" name="password"><br><br>
<input id="button" type="submit" value="Signup"><br><br>
<a href="login.php">Click to Login</a><br><br>
</form>
</div>
</body>
</html>Create function.php
Create and save another PHP file named functions.php and copy/paste the following scripts:
<?php
function check_login($con)
{
if(isset($_SESSION['user_id']))
{
$id = $_SESSION['user_id'];
$query = "select * from users where user_id = '$id' limit 1";
$result = mysqli_query($con,$query);
if($result && mysqli_num_rows($result) > 0)
{
$user_data = mysqli_fetch_assoc($result);
return $user_data;
}
}
//redirect to login
header("Location: login.php");
die;
}
function random_num($length)
{
$text = "";
if($length < 5)
{
$length = 5;
}
$len = rand(4,$length);
for ($i=0; $i < $len; $i++) {
# code...
$text .= rand(0,9);
}
return $text;
}Create Logout.php
Create and save another PHP file named logout.php and copy/paste the following scripts:
<?php
session_start();
if(isset($_SESSION['user_id']))
{
unset($_SESSION['user_id']);
}
header("Location: login.php");
die;
