Creating a Sign Up and Log In Page
Getting Started. 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
Creating Our 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!");
}
Creating Our Interfaces
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
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>
Creating 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>
Creating 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>
Creating functions.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;
}
Creating 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;
Download Now
The tutorial is OK in general. So many details could be added: a few about security – encrypted password for example, protected connection, … But as a started point it is good
I’m gone tօ inform my littⅼe brother, that һe shoսld аlso isit
thіs web site on regular basis to taҝе updated fгom hottest gossip.