Creating a Log In/Sign Up page from Scratch using php

HTML

Sign-up form

<div id="signup-form">
                            <form name="f1" method="post" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="return validate_signup()" >
                                <table>
                                    <br><br>
                                    <tr><td><input type="text" name="name" id="name" placeholder="Name"></td></tr><br>
                                    <tr><td><input type="email" id="mail" name="mail" placeholder="E-mail"><br></td></tr>
                                    <tr><td><input type="text" id="username" name="username" placeholder="Username"><br></td></tr>
                                    <tr><td><input type="password" id="password" name="password" placeholder="Password"><br></td></tr>
                                    <tr><td><input type="password" id="conpass" name="conpass" placeholder="Confirm Password"><br></td></tr>
                                    <tr><td><input type="text" id="age" name="age" placeholder="Age"><br></td></tr>
                                    <tr><td><input type="radio" id="gender" name="gender" value="male">Male &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" id="gender" name="gender" value="female">Female<br></td></tr>
                                    <tr><td><input type="text" id="country" name="country" placeholder="Country"><br></td></tr>
                                    <tr><td><input type="image" src="Images/SignUp.png"  name="signupButton" value="signupButton" ></td></tr>
                                </table>
                            </form>

                        </div>

Log-in form

<div id="signin-form">
                        <form name="f2" method="post" action="<?php $_SERVER['PHP_SELF']?>" onSubmit="return validateLogIn()">
                            <table>
                                <tr><td><input type="text" id="uname2" name="uname2" placeholder="Username"></td></tr>
                                <tr><td><input type="password" id="password2" name="password2" placeholder="Password"></td></tr>
                                <tr><td><input type="image" role="button" src="Images/login.png" name="loginButton" value="loginButton"></td></tr>
                            </table>
                        </form>

                      </div>

JAVASCRIPT VALIDATION

<script>
function validate_signup(){

var userName=document.f1.name.value;
var uemail=document.f1.mail.value;
var uid=document.f1.username.value;
var upassword=document.f1.password.value;
var uconpass=document.f1.conpass.value;
var uage=document.f1.age.value;
var ugender=document.f1.gender.value;
var ucountry=document.f1.country.value;


if(uid==null || userName==null || uemail==null || upassword==null || uconpass==null || userName=="" || uid=="" || uemail=="" || upassword=="" || uconpass=="" || uage==null|| uage=="" || ugender=="" || ugender==null || ucountry=="" || ucountry==null)
{
alert ("All Fields should be filled!");
return false;
}else if(!/^[a-zA-Z" "]*$/g.test(userName)){
alert("Name should not contain numbers or special characters!");
return false;
}else if(upassword!=uconpass){
alert("Confirm Password should be equal to the Password!");
return false;
}else if(upassword.length<8 || upassword.length>32){
alert("Password should be minimum 8 characters and maximum 32 characters!");
return false;
}else if(isNaN(uage)){
alert("Age should be digits!");
return false;
}else if(uage<=0){
alert("Age is not valid!");
return false;
}else if(!/^[a-zA-Z" "]*$/g.test(ucountry)){
alert("Country should not contain numbers or special characters!");
return false;
}
}

</script>

Since HTTP is a stateless protocol, server needs to identify each user specifically and track the previous activities of the user. For this purpose we need to use sessions.

<?php
  if(empty($_SESSION)){
session_start(); 
  }

?>

To start a session we need to include the above code on the very top of the web page coding.

PHP script

To establish the database connection

<?php

$host = "localhost";
$username = "root";
$password = "";
$dbname = "forum_db";

// Create connection
$conn = mysqli_connect("$host", "$username", "$password") or die(mysqli_error($conn));
mysqli_select_db($conn,$dbname) or die(mysqli_error($conn));

Sign-up form

if(isset($_POST['signupButton']) && $_POST['signupButton']=="signupButton") //checking if the Signup Button is pressed
{ // Fetching variables of the form
$name = stripslashes($_POST['name']);
$email = stripslashes($_POST['mail']);
$uname = stripslashes($_POST['username']);
$pwd = md5($_POST['password']);
$age = stripslashes($_POST['age']);
$gender= stripslashes($_POST['gender']);
$country= stripslashes($_POST['country']);
$userlevel=0;

// To check if there is an account from the same email
$sql_check="select * from users where user_email='$email'";
$result_check=mysqli_query($conn,$sql_check) or die (mysqli_error($conn));

if (mysqli_num_rows($result_check)>0)
{
echo "<script>alert(\"An account from this email already exists\")</script>";
}
else
{
$sql_check="select * from users where user_name='$uname'";
$result_check=mysqli_query($conn,$sql_check) or die (mysqli_error($conn));
$row_check=mysqli_num_rows($result_check);

if($row_check==0){
$sql="insert into users(name, user_name,user_email,user_pass,user_age,user_gender,user_country,user_level) values ('$name', '$uname','$email', '$pwd','$age','$gender','$country','$userlevel')";
$result = mysqli_query($conn,$sql) or die (mysqli_error($conn));
echo "<script>alert(\"Successfully Added\")</script>";
}else{
echo "<script>alert(\"User Name exists!\")</script>";
}
}
}

Log-in form

if(isset($_POST['loginButton']) && $_POST['loginButton']=="loginButton")
{ 
$uname2 = stripslashes($_POST['uname2']);
$pwd2 = md5($_POST['password2']);

$sql2="select * from users where user_name='$uname2' and user_pass='$pwd2'";
$result2 = mysqli_query($conn,$sql2) or die (mysqli_error($conn));
if(mysqli_num_rows($result2) > 0) {
echo"<script>alert(\"You are a validated user.\")</script>";
$_SESSION['login_user']=$uname2; // Initializing Session. The username will be assigned to the session variable to identify the user uniquely.

echo '<script>window.location.href ="index.php";</script>';// To direct to the home page
}
else
echo"<script>alert(\"Sorry, your credentials are not valid, Please try again.\")</script>";

}


?>

To log out

HTML

echo "<a href=\"logout.php\" name=\"logout\" style=\"font-size:14px\">&nbsp;&nbsp;Log Out</a>";

PHP script

<?php
session_start();
unset($_SESSION['username']);
session_destroy();

header("Location: index.php");
exit;

?>