Skip to main content

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;

?>


Comments

Post a Comment

Popular posts from this blog

Admin panel of a Q & A Forum

In a Q & A Forum, when a user posts a question, it should be sent to the administrator for approval in case it contains inappropriate content. After approval it should be removed from this pending approval page and other users should be able to see the question afterwards. To enable this, we should maintain an approval column in our database table of records and for each record approval should be set to false by default. In the Pending approvals page only the records with approval=false should be displayed. Below is  the MySQL  statement for retrieval, $sql="SELECT * FROM topics WHERE approval=false"; To know which post was approved we should embed the post_id to the URL. And the relevant post should be updated as approval=true. Below is the complete code. <?php $sql="SELECT * FROM topics WHERE approval=false"; $query=mysqli_query($conn,$sql); echo '<form name="approve" method="p...
Post a Comment
Read more

Getting Started with OAuth 2.0 using WSO2 Identity Server 5.3.0 and Playground2 Sample

This blog post provides step by step instructions for trying out OAuth 2.0 using WSO2 Identity Server . Here I use Identity Server 5.3.0 which is the latest released version by the time of this writing. The official documentation for this is available in https://docs.wso2.com/display/IS530/OAuth+2.0+with+WSO2+Playground , however for a beginner, it does not provide all the instructions such as creating a Service Provider with necessary configuration. However, by following the steps below, you can simply setup Identity Server and the playground2 sample webapp and test the entire OAuth 2.0 flow. Creating the Service Provider First step is to create a service provider in Identity Server. This is required because when a client application talks to Identity Server via OAuth 2.0, Identity Server has to identify the client and the incoming traffic. We set this configuration inside the service provider. Login to the Management Console of Identity Server and create a service provi...
1 comment
Read more

Interacting with an Ethereum Smart Contract using Meteor and Ethereum

This blog post contains steps on how to interact with a specific contract on the blockchain extending the application created in the previous blog post [1]. Step 1: Add  frozeman:template-var This is used since we use callback very often. This wrapper can be found at [2]. Give the following command in order to add it to our application. meteor add frozeman:template-var Step 2: Adding the balance to be viewed inside the template Alter your code as below. main.js main.html When you refresh the browser, you should get the below output without having to click the button. Step 3: Writing the Smart Contract in Solidity Solidity is the language that ethereum uses to write smart contracts. In order to write the smart contract for our application we will use the online Solidity compiler which can be found at [3]. Step 4: Deploying the Smart Contract Log in to the MetaMask and make sure you are on the testnet. Select 'Create' in the right side p...
Post a Comment
Read more