Creating a Sign Up and Log In Page
Creating a Sign Up and Log In Page
Outline: Creating a Sign Up and Log In Page
In this tutorial, we’ll be running our PHP scripts and MySQL database server on a local web server called XAMPP.
Creating Our Database and Table
Open your phpMyAdmin i.e. http://localhost/phpmyadmin and create a new database named logindb.
The following 5 columns should be created 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)
- Press Go to save.
- Click More and Add Index each for user_id, user_name, date.
Creating Our Database Connection
Launch your chosen text editor, such as Sublime Text 3, Notepad ++, or another. Create a new connection.php file and place it in the xampp/htdocs/login folder. Into this PHP file, copy and paste the following codes, then save.
<?php
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "logindb";
if(!$con = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname))
{
die("failed to connect!");
}
Creating Our Interfaces
The codes for the pages in our sign-up and login web applications are contained in the PHP File scripts shown below. Using the recommended filenames for each, save the files under the folder xampp/htdocs/login.
Create index.php
Create and save a new PHP file with the name index.php, then copy and paste the scripts below:
<?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>
Creating login.php
Create and save another PHP file called login.php, and then copy and 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>
Creating signup.php
Make a new PHP file called signup.php and copy and 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>
Creating functions.php
Copy and paste the following scripts into a new PHP file called functions.php that you create and save.
<?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;
}
Creating logout.php
Create and save a new PHP file called logout.php, then copy and paste the scripts below:
<?php
session_start();
if(isset($_SESSION['user_id']))
{
unset($_SESSION['user_id']);
}
header("Location: login.php");
die;
