Rubik - © Copyright BKNinja. All Rights Reserved.

Sunday, May 28
››User Login and Registration with Forgot Password using PHP and Mysql
MysqlPhp

User Login and Registration with Forgot Password using PHP and Mysql

Developer Guidance
April 29, 2020
0
1904

In this tutorial we create the user registration and login process using PHP
and the backend we use MYSQL.

User Login and Registration with Forgot Password tutorial as below


The first thing we’ll need to do is set up our database . In this tutorial we have the following six pages we need named as:

  • register.php
  • index.php(login.php)
  • logincheck.php
  • dashboard.php
  • forgotpassword.php
  • resetpassword.php

Create a database called test. In the  test database, add a table called user. The users table will take the following six fields:

  • id
  • firstname
  • lastname
  • email
  • password
  • token
CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `firstname` varchar(255) NOT NULL,
  `lastname` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `token` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Now we create register.php. Where we form by which user can fill the details. The form have the following fields :

  • Firstname
  • Lastname
  • Email
  • Password
  • Register Button
Login and Registration

Register.php

	if (isset($_POST["register"])) {
        $connection = new mysqli("localhost", "root", "", "test");

		$firstname = $connection->real_escape_string($_POST["firstname"]);  		
		$lastname = $connection->real_escape_string($_POST["lastname"]);  				
		$email = $connection->real_escape_string($_POST["email"]);  
		$password = sha1($connection->real_escape_string($_POST["password"])); 
			
		$data = $connection->query("INSERT INTO user (firstname, lastname, email, password) VALUES ('$firstname', '$lastname', '$email', '$password')");

    	if ($data === false)
        	echo "Connection error!";
    	else
    	   echo "Your have been signed up - please now Log In";
	}	             
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Registration Using PHP and Mysql</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->	
	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--===============================================================================================-->

<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

	<link rel="stylesheet" type="text/css" href="http://developerguidance.com/contacts/css/main.css">
<!--===============================================================================================-->
</head>
<body>
	
	<div class="limiter">
		<div class="container-login100" style="background-color: #FFF;">
			<div class="wrap-login100">
				<form action="register.php" method="post" class="login100-form validate-form">
					<span class="login100-form-logo">
						DG
					</span>

					<span class="login100-form-title p-b-34 p-t-27">
						Registration 
					</span>

					<div class="wrap-input100 validate-input" data-validate = "Enter First Name">
						<input class="input100" type="text" name="firstname" placeholder="First Name">
						<span class="focus-input100" data-placeholder="&#xf207;"></span>
					</div>
					<div class="wrap-input100 validate-input" data-validate = "Enter Last Name">
						<input class="input100" type="text" name="lastname" placeholder="Last Name">
						<span class="focus-input100" data-placeholder="&#xf207;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate = "Enter Email">
						<input class="input100" type="email" name="email" placeholder="Email" autocomplete="off">
						<span class="focus-input100" data-placeholder="&#xf15a;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="Enter password">
						<input class="input100" type="password" name="password" placeholder="Password" autocomplete="off">
						<span class="focus-input100" data-placeholder="&#xf191;"></span>
					</div>

					<div class="contact100-form-checkbox">
						<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
						<label class="label-checkbox100" for="ckb1">
							Remember me
						</label>
					</div>
					<div class="container-login100-form-btn">
						<input type="submit" name="register" value="Register" class="login100-form-btn">
						</button>
					</div>

					<div class="text-center p-t-90">
						<a class="txt1" href="#">
							Forgot Password?
						</a>
					</div>
				</form>
			</div>
		</div>
	</div>
	
</body>
</html>

for login we use index.php.
The form have the following fields :

  • email
  • password

index.php

login form
session_start();

if (isset($_SESSION["email"]) && isset($_SESSION["loggedIn"])){
	header("Location: dashboard.php");
	exit();
}

if (isset($_POST['login'])){
	$connection= new mysqli("localhost", "root","", "test");

	$email = $connection->real_escape_string($_POST["email"]);
	$password = sha1($connection->real_escape_string($_POST["password"]));
	$data= $connection->query("SELECT firstname FROM user WHERE email='$email' AND password='$password'");
	
	if ($data->num_rows > 0){
		$_SESSION["email"] = $email;
		$_SESSION["loggedIn"] = 1;

		
		header('Location: dashboard.php');
		exit();
	}else{
		echo "incorrect";
	}


}
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Login Using PHP and Mysql</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->	
	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--===============================================================================================-->

<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

	<link rel="stylesheet" type="text/css" href="http://developerguidance.com/contacts/css/main.css">
<!--===============================================================================================-->
</head>
<body>
	
	<div class="limiter">
		<div class="container-login100" style="background-color: #FFF;">
			<div class="wrap-login100">
				<form class="login100-form validate-form" action="index.php" method="POST">
					<span class="login100-form-logo">
						DG
					</span>

					<span class="login100-form-title p-b-34 p-t-27">
						Log in
					</span>

					<div class="wrap-input100 validate-input" data-validate = "Enter username">
						<input class="input100" type="email" name="email" placeholder="Email">
						<span class="focus-input100" data-placeholder="&#xf207;"></span>
					</div>

					<div class="wrap-input100 validate-input" data-validate="Enter password">
						<input class="input100" type="password" name="password" placeholder="Password">
						<span class="focus-input100" data-placeholder="&#xf191;"></span>
					</div>

					<div class="contact100-form-checkbox">
						<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
						<label class="label-checkbox100" for="ckb1">
							Remember me
						</label>
					</div>

					<div class="container-login100-form-btn">
						<input class="login100-form-btn" type="submit" name="login" value="Log In">
					</div>

					<div class="text-center p-t-90">
						<a class="txt1" href="#">
							Forgot Password?
						</a>
					</div>
				</form>
			</div>
		</div>
	</div>
	


</body>
</html>

To check the login process we create loginCheck.php. In this it store the session of the user if user come again or reload the page it leads to dashboard .php

loginCheck.php

session_start();

if (!isset($_SESSION["email"]) || !isset($_SESSION["loggedIn"])){
	header("location: index.php");
	exit();
}

dashboard.php

require "loginCheck.php"

<!DOCTYPE html>
<html>
<head>
	<title>Dashobaord</title>
</head>
<body>
	Welcome <?php echo $_SESSION["email"];?>
</body>
</html>

Now we proceed the tutorial how we can get my password if i forgot.
When user forgot the password,User get a link by which a auto generated password is created as shown below

forget password

forgotpassword.php

	if (isset($_POST["forgotpass"])){
		$connection= new mysqli("localhost", "root","", "test");
		$email = $connection->real_escape_string($_POST["email"]);

		$data = $connection->query("SELECT id FROM user WHERE email='$email'");

		if ($data->num_rows > 0){
			$str= "0123456789qwertyyuiokkgffasdasdsvcvd";
			$str = str_shuffle($str);
			$str = substr($str, 0, 9);
			$url = "http://domain.com/resetpassword.php?token=$str&email=$email";

			mail($email, "Reset Password", "To Reset the Password, Please Visit: $url", "From: [email protected]\r\n");

			$connection->query("UPDATE user SET token='$str' WHERE email='$email'");

		}else{

		}
	}

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Forgot Password Using PHP and Mysql</title>
<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->	
	<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!--===============================================================================================-->

<!--===============================================================================================-->
	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

	<link rel="stylesheet" type="text/css" href="http://developerguidance.com/contacts/css/main.css">
<!--===============================================================================================-->
</head>
<body>
	
	<div class="limiter">
		<div class="container-login100" style="background-color: #FFF;">
			<div class="wrap-login100">
				<form action="forgotpassword.php" method="post" class="login100-form validate-form">
					<span class="login100-form-logo">
						DG
					</span>

					<span class="login100-form-title p-b-34 p-t-27">
						Forget Password 
					</span>

					<div class="wrap-input100 validate-input" data-validate = "Enter Email">
						<input class="input100" type="text" name="email" placeholder="Email" autocomplete="off">
						<span class="focus-input100" data-placeholder="&#xf15a;"></span>
					</div>

					<div class="container-login100-form-btn">
						<input type="submit" name="forgotpass" value="Request Password" class="login100-form-btn">
						</button>
					</div>

				</form>
			</div>
		</div>
	</div>
	

	
</body>
</html>

For Reset Password We have to create a page called resetpassword.php

resetpassword.php

if (isset($_GET["email"]) && isset($_GET["token"])) {
$connection= new mysqli("localhost", "root","", "test");
    $email = $connection->real_escape_string($_GET["email"]);
    $token = $connection->real_escape_string($_GET["token"]);
    $data = $connection->query("SELECT id FROM user WHERE email='$email' AND token='$token'");
 if($data->num_rows >0){
             echo "please check your link";
             $str="0123456789qwertyuioplkjhgfdsa";
             $str = str_shuffle($str);
             $str = substr($str, 0, 15); <?php
 $password = sha1($str);
             $connection->query("UPDATE user SET password='$password', token='' WHERE email='$email'");
             echo "Your New Password is $str";
         }else{ 
 header('Location: index.php');
             exit();
         } 
 }else{
     header("Location: index.php");
     exit();
 }

Conclusion: We provide you full source code above for User Login and Registration with Forgot Password

Tagsforgotpassword using php and mysqlLogin with phpRegistration using php
Previous Article

Custom Popover Using Jquery

Next Article

Animated Bootstrap image slider using HTML and JavaScript

Leave a reply

More News

Editor Picks

© Copyright BKNINJA. All rights reserved.