PHP Signup with OTP Email Verification System

source

Signup Code:

So, now I will create code for signup with some validation, create verification code and URL by using PHP functions.

File Structure:

img folder has an image for form (you can use any image).
css folder has style.css file for styling.
class folder has phpMailer class, Go and get from Github.
Js folder has a jQuery file, Go and get from Jquery.com

HTML Template Code:

Create an index.php file in the main/root folder and copy and paste the below code.

Use of this HTML template will need to jQuery for js code and CSS styling.

script code used to shuffling sign in and signup form.

<!DOCTYPE html>
<html lang="en">

 	<head>
 		<!-- Meta Tags -->
		<meta charset="UTF-8">
		<meta name="author" content="Kamran Mubarik">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- Site Title -->
 		<title>PHP Signup with OTP Email Verification System</title>
 		<!-- External Style Sheet -->
		<link rel="stylesheet" type="text/css" href="css/style.css" />

 	</head>
<body>
	<div class="wrapper" id="login-side">
		<div class="left-side">
			<h2>Login</h2>
			<hr>		
			<form action="" method="POST">
				<div class="form-group">
					<label>Email</label>
					<input type="email" name="email" placeholder="Email" autocomplete="off" required>
				</div>
				<div class="form-group">
					<label>Password</label>
					<input type="password" name="password" placeholder="Password" autocomplete="off" required>
				</div>
				<div class="form-group">
					<label></label>
					<input type="submit" name="login" value="Login">
				</div>
			</form>
		</div>
		<div class="container"></div>
		<div class="right-side" id="singup-text-side">
			<h2>Register</h2>
			<hr>
			<div class="right-side-text">
				<p>Don't have an account?</p>
				<p>Please click to signup button for register</p>
				<a href="javascript:void(0);" id="signup-button">Signup</a>
			</div>
		</div>
	</div>
	<!-- End of Login Wrapper -->
	
	<div class="wrapper display" id="signup-side">
		<div class="left-side signUp">
			<h2>Signup</h2>
			<hr>		
			<form action="" method="POST">				

				<input type="hidden" name="otp" value="<?php echo $otp; ?>">
				<input type="hidden" name="activation_code" value="<?php echo $activation_code; ?>">

				<div class="form-group">
					<label>Name</label>
					<input type="text" name="name" placeholder="Your Name" autocomplete="off" required>
				</div>
				<div class="form-group">
					<label>Email</label>
					<input type="email" name="email" placeholder="Email" autocomplete="off" required>
				</div>
				<div class="form-group">
					<label>Password</label>
					<input type="password" name="password" placeholder="Password" required>
				</div>
				<div class="form-group">
					<label></label>
					<input type="submit" name="register" value="Signup">
				</div>
			</form>
		</div>
		<div class="container"></div>
		<div class="right-side" id="login-text-side">
			<h2>Login</h2>
			<hr>
			<div class="right-side-text">
				<p>Already have an account?</p>
				<p>Please click to login button for login</p>
				<a href="javascript:void(0)" id="login-button">Login</a>
			</div>
		</div>
	</div>
</body>

<script type="text/javascript" src="js/jquery.min.3-4-1.js"></script>
<script>
	$(document).ready(function(){
		$('#signup-button').click(function(){
			$('#login-side').fadeOut().addClass('display');
			$('#signup-side').fadeIn().removeClass('display');			
		});
		$('#login-button').click(function(){
			$('#signup-side').fadeOut().addClass('display');
			$('#login-side').fadeIn().removeClass('display');	
		});
	});
</script>

</html>

CSS Styling Code:

Create a style.css file in the CSS folder and copy and paste the below code for HTML template styling.

*{
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	font-family: sans-serif;
	font-size: 14px;
}
body{
	width: 100vw;
	height: 100vh;
	background: linear-gradient(to top, #2E86C1, #2471A3);
}
.display{
	display: none;
}
input:focus{
	outline: 1px solid #3498DB;
}
.extra label.forgot{
	width: 48% !important;
	float: right;
}
.extra label.forgot a{
	text-align: right;
}
.extra label.rem{
	width: 44% !important;
	float: left;
}
.extra input{
	width: 8% !important;
	float: left;
}
.wrapper{
	width: 600px;
	height: 300px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.container{
	width: 100%;
	height: 100%;
	background-image: url(../img/background1.jpg);
	background-size: cover;
	background-color: #3498DB;
	background-blend-mode: multiply;
	z-index: -1;
	transform: scale(1);
	transition: all 0.3s ease-in-out;
}
.container h1{
	width: 100%;
	color: #fff;
	font-size: 30px;
	position: absolute;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.container a{
	text-align: center;
	color: #fff;
	font-size: 24px;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-decoration: none;
	text-transform: uppercase;
}
.otp{
	width: 50%;
	height: auto;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	box-sizing: border-box;
	z-index: 10;
}
.otp h2{
	font-size: 18px;
	font-weight: 300;
	color: #3498DB;
	padding: 0px 8px 8px 0px;
	margin-top: 15px;
	text-transform: uppercase;
	display: block;
	float: left;
}
.otp hr{
	height: 1px;
	background-color: #3498DB;
	margin-top: 32px;
	border: 0;
}
.left-side{
	width: 50%;
	height: 120%;
	background-color: #fff;
	position: absolute;
	top: 50%;
	left: 28%;
	transform: translate(-50%, -50%);
	padding: 20px;
	box-sizing: border-box;
	z-index: 10;
	transition: left 0.3s ease-in-out;
}
.left-side:hover{
	left: 50%;
} 
.left-side:hover ~ div{
	transform: scale(0);
}
.left-side.signUp{
	height: 140%;
}
.left-side h2{
	font-size: 18px;
	font-weight: 300;
	color: #3498DB;
	padding: 0px 8px 8px 0px;
	margin-top: 15px;
	text-transform: uppercase;
	display: block;
	float: left;
}
.left-side hr{
	height: 1px;
	background-color: #3498DB;
	margin-top: 32px;
	border: 0;
}
.left-side form{
	margin-top: 30px;
}
.form-group{
	padding: 8px;
	margin-top: 8px;
	display: block;
}
.form-group label{
	display: block;
	margin-bottom: 5px;
}
.form-group input{
	width: 100%;
	padding: 6px 8px;
	box-shadow: none;
	border: 1px solid #3498DB;
}
.form-group input[type="submit"]{
	width: 100%;
	padding: 6px 8px;
	box-shadow: none;
	color: #fff;
	background-color: #3498DB;
	cursor: pointer;
	text-transform: uppercase;
}
.form-group input[type="submit"]:hover{
	color: #3498DB;
	background-color: transparent;
	border: 1px solid #3498DB;
	transition: all 0.5s ease-in-out;
}
.right-side{
	width: 40%;
	height: 80%;
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translate(0, -50%);
	padding: 5px 20px;
	box-sizing: border-box;
	background-color: rgba(0,0,0,0.5);
	z-index: 5;
	transition: scale 1s ease-in-out; 
}
.right-side h2{
	font-size: 18px;
	font-weight: 300;
	color: #fff;
	padding: 8px 8px 8px 0px;
	margin-top: 15px;
	text-transform: uppercase;
	display: block;
	float: left;
}
.right-side hr{
	height: 1px;
	background-color: #fff;
	margin-top: 32px;
	border: 0;
}
.right-side-text{
	margin-top: 20px;
}
.right-side-text p{
	color: #fff;
	margin-bottom: 8px;
}
.right-side-text a{
	color: #fff;
	margin-top: 30px;
	padding-bottom: 3px;
	border-bottom: 1px solid #fff;
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	position: absolute;
	bottom: 20px;
}
.right-side-text a:hover{
	border-bottom: 1px solid transparent;
}

PHP Code for Signup Email Verification:

Include config.php file for database connection.
Must require phpMailer class to sending mail.
Must have SMTP detail for phpMailer script

There are two parts in this code if and else, in if condition will check whatever user exists in database already if yes then will check status is active or not if the status is active a message will appear already exit user. if the status is not active or empty user data will be updated and send an email for verification again.

In else condition, other validation will be check and send a verification mail.

<?php
include "config.php";

$otp_str = str_shuffle("0123456789");
$otp = substr($otp_str, 0, 5);

$act_str = rand(100000, 10000000);
$activation_code = str_shuffle("abcdefghijklmno".$act_str);

if (isset($_POST['register'])) {
	
	$otp = $_POST['otp'];
	$activation_code = $_POST['activation_code'];
	$name = mysqli_real_escape_string($conn, $_POST['name']);
	$email = mysqli_real_escape_string($conn, $_POST['email']);
	$password = mysqli_real_escape_string($conn, md5($_POST['password']));

	$selectDatabase = "SELECT * FROM user WHERE email = '".$email."'";
	$selectResult = mysqli_query($conn, $selectDatabase);
	if (mysqli_num_rows($selectResult) > 0) {
		
		$selectRow = mysqli_fetch_assoc($selectResult);

		echo $status = $selectRow['status'];

		if ($status == 'active') {
			
			echo "<script>alert('Email already registered')</script>";
		}
		else{

			$sqlUpdate = "UPDATE user SET name = '".$name."', password = '".$password."', otp = '".$otp."', activation_code = '".$activation_code."'";
			$updateResult = mysqli_query($conn, $sqlUpdate);

			if ($updateResult) {
				
				require 'class/class.phpmailer.php';
				$mail = new PHPMailer;
				$mail->IsSMTP();
				$mail->Host = 'smtp.sendgrid.net';
				$mail->Port = '587';
				$mail->SMTPAuth = true;
				$mail->Username = '';
				$mail->Password = '';
				$mail->SMTPSecure = 'TLS';
				$mail->From = '';
				$mail->FromName = 'Singup Confirmation';
				$mail->AddAddress($email);
				$mail->WordWrap = 50;
				$mail->IsHTML(true);
				$mail->Subject = 'Verification code for Verify Your Email Address';

				$message_body = '
				<p>For verify your email address, enter this verification code when prompted: <b>'.$otp.'</b>.</p>
				<p>Sincerely,</p>
				';
				$mail->Body = $message_body;

				if($mail->Send())
				{
					echo '<script>alert("Please Check Your Email for Verification Code")</script>';
					header('Refresh:1; url=email_verify.php?code='.$activation_code);
				}
				else
				{
					$message = $mail->ErrorInfo;
				}
			}

		}
	}
	else{

		require 'class/class.phpmailer.php';
		$mail = new PHPMailer;
		$mail->IsSMTP();
		$mail->Host = 'smtp.sendgrid.net';
		$mail->Port = '587';
		$mail->SMTPAuth = true;
		$mail->Username = '';
		$mail->Password = '';
		$mail->SMTPSecure = 'TLS';
		$mail->From = '';
		$mail->FromName = 'Singup Confirmation';
		$mail->AddAddress($email);
		$mail->WordWrap = 50;
		$mail->IsHTML(true);
		$mail->Subject = 'Verification code for Verify Your Email Address';

		$message_body = '
		<p>For verify your email address, enter this verification code when prompted: <b>'.$otp.'</b>.</p>
		<p>Sincerely,</p>
		';
		$mail->Body = $message_body;

		if($mail->Send())
		{
			$sqlInsert = "INSERT INTO user (name, email, password, otp, activation_code) VALUES ('".$name."', '".$email."', '".$password."', '".$otp."', '".$activation_code."')";
			$insertResult = mysqli_query($conn, $sqlInsert);

			if ($insertResult) {
				
				echo '<script>alert("Please Check Your Email for Verification Code")</script>';
				header('Refresh:1; url=email_verify.php?code='.$activation_code);
			}
			else{
				echo '<script>alert("Opss something wrong failed to insert data")</script>';
			}
		}
		else
		{
			$message = $mail->ErrorInfo;
		}
	}

}

?>

Facebook SDK

PHP Signup with OTP Email Verification System - Signup (Part 3)

Post a Comment

Pagination Using Page Scroll || Dynamic Data Processing || PHP and Ajax Tutorial

Single Post Page Template [Comment Box Part 15] - WordPress Theme Develo...

Cart Page [Part 1] [Frontend] || Create an Ecommerce Website using PHP ...

Contact Form

Facebook SDK

PHP Signup with OTP Email Verification System - Signup (Part 3)

You might like

Post a Comment

Contact Form