Sign Up and Login Using PHP and Mysqli
In this tutorial you will learn about following topics:
or any other language then first create front end design. In this tutorial I have designed three web pages. Sign up and login php code. Here you will also see sign up and login with sessions using php. First we look into the Sign up and login pages design using html and bulma CSS framework.
a) register.php
<html>
<head>
<title>Sign Up </title>
<link href="<?php echo $base_url; ?>/style/bulma-0.7.4/css/bulma.min.css" rel="stylesheet" type="text/css"></link>
<link href="<?php echo $base_url; ?>/style/bulma-0.7.4/css/bulma.css" rel="stylesheet" type="text/css"></link>
<script src="<?php echo $base_url; ?>/scripts/jquery-3.3.1.js"></script>
<script src="<?php echo $base_url; ?>/scripts/jquery.min.js"></script>
</head>
<body bgcolor="lightblue">
<section class="hero is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<div class="box">
<form action="" method="post">
<h1 class="title">
Create Account</h1>
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<div class="control">
<label class="label">First Name</label>
<input class="input is-info is-large" id="txtfname" name="txtfname" type="text" value="" />
</div>
</div>
<div class="field">
<div class="control">
<label class="label">Last Name</label>
<input class="input is-info is-large" id="txtlname" name="txtlname" type="text" value="" />
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<div class="control">
<label class="label">Email</label>
<input class="input is-info is-large" id="txtemail" name="txtemail" type="text" value="" />
</div>
</div>
<div class="field">
<div class="control">
<label class="label">Phone Number</label>
<input class="input is-info is-large" id="txtphone" name="txtphone" type="text" value="" />
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<div class="control">
<label class="label">Password</label>
<input class="input is-info is-large" id="txtpassword" name="txtpassword" type="password" value="" />
</div>
</div>
<div class="field">
<div class="control">
<label class="label">Confirm Password</label>
<input class="input is-info is-large" id="txtpassword_new" name="txtpassword_new" type="password" value="" />
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-body">
<div class="field">
<div class="control">
</div>
</div>
<div class="field">
<div class="control">
<input class="button is-info is-large is-fullwidth" id="btnsubmit" name="btnsubmit" type="submit" value="Sign Up" />
<br />
<a href="https://www.blogger.com/%3C?php%20echo%20$base_url;?%3E/index.php" style="font-weight: bold; padding-left: 35%;">Back to login</a>
</div>
</div>
<div class="field">
<div class="control">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
b) index.php
<html>
<head>
<title>Login</title>
<link href="<?php echo $base_url; ?>/style/bulma-0.7.4/css/bulma.min.css" rel="stylesheet" type="text/css"></link>
<link href="<?php echo $base_url; ?>/style/bulma-0.7.4/css/bulma.css" rel="stylesheet" type="text/css"></link>
<link href="<?php echo $base_url; ?>/style/bulma-0.7.4/index.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
</head>
<body>
<section class="hero is-success is-fullheight">
<div class="hero-body">
<div class="container has-text-centered">
<div class="column is-5 is-offset-3">
<form action="index.php" method="post">
<strong style="color: black; font-size: 150%;"><i class="fa fa-user"></i>Login</strong>
<div class="box" style="margin-top: 5px;">
<div class="field">
<div class="control">
<div class="control has-icons-left">
<input class="input is-info is-large" name="txtemail" placeholder="Enter Email" type="email" value="<?php echo $email;?>" />
<span class="icon is-small is-left">
<i class="fa fa-envelope"></i>
</span>
</div>
</div>
</div>
<div class="field">
<div class="control">
<div class="control has-icons-left">
<input class="input is-info is-large" name="txtpassword" placeholder="Enter Password" type="password" value="<?php echo $password;?>" />
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
</div>
</div>
<div class="field">
<div class="control">
<button class="button is-info is-fullwidth is-large" name="btnlogin" type="submit">Login</button>
</div>
</div>
<div style="font-weight: bold;">
<a href="https://www.blogger.com/blogger.g?tab=vj&blogID=7214118015389132414#">Forget Password?</a>
<a href="https://www.blogger.com/%3C?php%20echo%20$base_url;%20?%3E/register.php">Register</a>
</div>
</div>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
c) home.php
<html>
<head>
<title>Home Page</title>
<link href="<?php echo $base_url; ?>/style/bulma-0.7.4/css/bulma.min.css" rel="stylesheet" type="text/css"></link>
<link href="<?php echo $base_url; ?>/style/bulma-0.7.4/css/bulma.css" rel="stylesheet" type="text/css"></link>
<link href="<?php echo $base_url; ?>/style/bulma-0.7.4/index.css" rel="stylesheet" type="text/css"></link>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"></link>
</head>
<body>
<div class="container">
<div class="box notification is-primary">
<strong>Username: </strong><br /><br />
<a href="https://www.blogger.com/%3C?php%20echo%20$base_url;%20?%3E/home.php?logout=%271%27">Logout</a>
</div>
</div>
</body>
</html>
In this above code you can see above a PHP script for sessions check and session logout code. You cannot open this page untill
you have not a php session of username which we are creating from mysqli select query at the time of signup or login page .
With these three web pages which contains html and css design,One more file is action-register.php which contains server side programming using php.
<!--php
include('config.php');
session_start();
class add_new_user{
public function login_user($email,$passcode)
{
//Connect to server and select database.
$conn = mysqli_connect("localhost", "root", "","test");
if ($conn--->connect_error)
{
echo "no connection";
die("Connection failed: " . $conn->connect_error);
}
$query="select * from signup where email='$email' and password='$passcode' limit 1";
$res=mysqli_query($conn,$query);
return $res;
}
public function register($fname,$lname,$email,$phone,$password1)
{
//Connect to server and select database.
$conn = mysqli_connect("localhost", "root", "","test");
if ($conn->connect_error)
{
echo "no connection";
die("Connection failed: " . $conn->connect_error);
}
$sql="INSERT INTO `signup`( `firstname`, `lastname`, `email`, `phone`, `password`) VALUES ('$fname','$lname','$email','$phone','$password1')";
$result=mysqli_query($conn,$sql) or die (mysqli_error($conn));
if($result)
{
return true;
} else {
return false;
}
}
//email validation
public function test_input($data)
{
$data=trim($data);
$data=stripslashes($data);
$data=htmlspecialchars($data);
return $data;
}
//sql injection protection
public function sanitize($var){
global $host; // Host name
global $username; // Mysql username
global $password; // Mysql password
$connection = mysqli_connect("$host", "$username", "$password");
if ($connection->connect_error)
{
echo "no connection";
die("Connection failed: " . $connection->connect_error);
}
$return = mysqli_real_escape_string($connection, $var);
return $return;
}
}
?>
<input name="txtfname" type="text" value="<?php echo $fname;?>" />
Add this below code in action-register.php file.
$object=new add_new_user();
$fname='';
$lname='';
$email='';
$phone='';
$password='';
$errors=array();
$output='';
Next write code for sign up button. Add this code below above code.
if(isset($_POST['btnsubmit']))
{
$fname=$object->sanitize($_POST['txtfname']);
$lname=$object->sanitize($_POST['txtlname']);
$email=$object->sanitize($_POST['txtemail']);
$phone=$object->sanitize($_POST['txtphone']);
$password=$object->sanitize($_POST['txtpassword']);
$password_new=$object->sanitize($_POST['txtpassword_new']);
//validation check
if (empty($fname)) { array_push($errors, "First Name is required"); }
if (empty($lname)) { array_push($errors, "Last Name is required"); }
if (empty($phone)) { array_push($errors, "Phone# is required"); }
if (empty($email)) { array_push($errors, "Email is required"); }
if (empty($password)) { array_push($errors, "Password is required"); }
if ($password != $password_new)
{
array_push($errors, "The two passwords do not match");
}
//email validation
if($email !=='')
{
$email=$object->test_input($_POST["txtemail"]);
if(!filter_var($email, FILTER_VALIDATE_EMAIL))
{
array_push($errors, "*Email is Invalid");
}
}
if(count($errors)==0)
{
$password1=md5($password_new);
$res=$object->register($fname,$lname,$email,$phone,$password1);
if($res)
{
$_SESSION['username'] = $fname;
header('location:'.$base_url.'/home.php');
$output="Successfully Saved";
}
else {
$output="Failed to save";
}
}
}
Next step is to write code for login using the function login_user. Add this code below above code in action-register.php file
if(isset($_POST['btnlogin']))
{
$email=$object->sanitize($_POST['txtemail']);
$password=$object->sanitize($_POST['txtpassword']);
if(empty($email)){array_push($errors,"Email is required");}
if(empty($password)){array_push($errors,"Password is required");}
if(count($errors)==0)
{
$password_hash=md5($password);
$results=$object->login_user($email,$password_hash);
if(mysqli_num_rows($results) == 1)
{
$row=mysqli_fetch_array($results);
$name=$row['firstname'];
$_SESSION['username'] = $name;
header('location:'.$base_url.'/home.php');
}
else {
$output="<b>Incorrect Email or Password </b>";
}
}
}
1- Sign Up page front-end and back-end using php.
2- Login web page front-end and back-end using php.
3- Home page which you will see after login.
4- Implementation of new style sheet framework Bulma.
5- Oop structure Using php. How to use classes and function in php?
6- How to use sessions in php?
2- Login web page front-end and back-end using php.
3- Home page which you will see after login.
4- Implementation of new style sheet framework Bulma.
5- Oop structure Using php. How to use classes and function in php?
6- How to use sessions in php?
Sign up and Login in PHP Overview
First step in web development is to create your front-end design of web pages. Whenever you want to write back-end code using phpor any other language then first create front end design. In this tutorial I have designed three web pages. Sign up and login php code. Here you will also see sign up and login with sessions using php. First we look into the Sign up and login pages design using html and bulma CSS framework.
a) register.php
b) index.php
c) home.php
With these three web pages which contains html and css design,One more file is action-register.php which contains server side programming using php.
action-register.php
This file is for back-end coding using php language. In this file I have included a "config.php" file which contains base_url and connection to mysqli database variables initialization content. In the next line a class is started with the name of "add_new_user".Here you will see how to add form validations in php? We will add php form validations in sign up and login pages using PHP. We will also write code for email validation using php within sign up page.
Functions and classes in PHP
In this class create public functions for sign up and login using php. I have created four public functions, First function is "login_user" which is used for login. Login_user function containes two parameters one for email and other for password, these two parameters are used in mysqli database select query where clause. Second function is "register" and it containes five parameters($fname,$lname,$email,$phone,$password1).Third function "test_input" is used for email validation using PHP at the time of sign up button click. Fourth and last function "sanitize" is for protection of input data against sql injection in php. You will see in this function one parameter for input field passed to the mysqli_real_escape_string . Now whenever we initialize a variable with a input filed we use sanitize function instead of writing mysqli_real_escape_string. After you will create functions within the class close the class bracket.
How to display text in textboxes using php?
Next create an object of class add_new_user, below this line declare variables that we will use for our input fields
,to display error messages and for display success or failure message. Input field variables are used in value property
of each textbox to repopulate data after button click event, for example
Add this below code in action-register.php file.
First of all assign input fields to variables. Then check form validation if text boxes empty then display validation error message before saving data into mysqli database. We will also check here if two passwords text matched or not matched. If text of two passwords field not matched then display an error message. Next check if email text box is not empty then check the entered email is valid or not. if not valid then it will display an email validation error before saving data into database.
Now if count errors is equal to zero then call the function register from the class add_new_user and pass it variables. Here we will create a hash password of confirm password text box and this new hashed password will be passed into register function. If function executed then we will create a session variable and redirect to home.php otherwise display a message of failure.
Next step is to write code for login using the function login_user. Add this code below above code in action-register.php file
In above code of login button click event, assign two variables email and password. Then check both are empty are filled, if empty then display validation error message on button click of login before implementation of login_user function.
Now if count errors is equal to zero then convert password input filed text into hash code as we have saved hash password into database. After this call the login_user function from the above class and pass it variables as functions parameters.
Now if number of rows equal to 1 then fetch resualt of mysqli select query used in login_user function and initialize a variable "$name=$row['firstname']". Then pass this variable to a session variable and redirect to home.php
registration and login in php with mysqli database complete tutorial Download Source Code
No comments:
Post a Comment