Tuesday, May 24 2016

PHP Login and Registration System with PDO

In this article we have explained about PHP Login and Registration System with PDO script. PDO connection is always secure and flexible support for all databases. PDO has an ease of code implementation. We were implement a sample PHP login and sign up system with PDO.

php-login-and-signup-system-with-pdo

MYSQL Table:

CREATE TABLE IF NOT EXISTS `users` (
  `user_id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `status` tinyint(2) NOT NULL DEFAULT '0' COMMENT '1-active,0-deactive',
  PRIMARY KEY (`user_id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

Login Form – Index.php:

<form id="login-form" method="post" onsubmit="return validateForm(this);" class="form-horizontal">
				<div class="panel panel-default">
					<div class="panel-heading">
						<p class="text-center">
							<a href="javascript:void(0);" class="btn btn-primary" id="login-form-link">Login</a>
							<a href="register.php" id="register-form-link" class="btn btn-warning">Register</a>
						</p>
					</div>
					<div class="panel-body">
						<?php if($error!="") { ?>
							<div class="alert alert-danger">
								<i class="glyphicon glyphicon-warning-sign"></i> &nbsp; <?php echo $error; ?>
							</div>
						<?php } ?>
						<div class="form-group" style="padding: 10px;">
							<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username" value="<?php if(isset($_COOKIE['username'])){ echo $_COOKIE['username']; } ?>">
							<span id="username_error"></span>
						</div>
						<div class="form-group" style="padding: 10px;">
							<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password" value="<?php if(isset($_COOKIE['password'])){ echo $_COOKIE['password']; } ?>">
							<span id="password_error"></span>
						</div>
						<div class="form-group text-center" style="padding: 10px;">
							<input type="checkbox" tabindex="3" value="on" name="remember" id="remember"  <?php if(isset($_COOKIE['password'])){ echo "checked='checked'"; } ?>>
							<label for="remember"> Remember Me</label>
						</div>
						<div class="form-group text-center">
							<button type="submit" name="login-submit" id="login-submit" tabindex="4" class="btn btn-primary">Log In</button>
						</div>
					</div>
				</div>
				</form>

See the Output of login form.

PHP-login-form-with-PDO

Javascript Validation – Login Form:

We have implemented javascript validation for Login Form

<script>
		function validateForm(form) {
			var error = false;
			var error_field = "";
			var username = form.username.value;
			var password = form.password.value;
			if (username == "") {
				error = true;
				error_field = "username";
				$("#"+error_field+"_error").html('<p class="error">Please enter Username</p>');
			}
			if (password == "") {
				error = true;
				error_field = "password";
				$("#"+error_field+"_error").html('<p class="error">Please enter Password</p>');
			}
			if (error) {
				$("#"+error_field).focus();
				return false;
			} else {
				return true;
			}
		}
	</script>

Form submission in Server side – index.php:

if(isset($_REQUEST['login-submit'])){
	extract($_REQUEST); // to get the input values

	// If inputs are valid
	if($username AND $password) {
		if($userobj->login($username,$password)){
			if (isset($remember) && $remember == 'on') {
			/* Set Cookie from here for one hour */
			setcookie("username", $username, time()+(60*60*1));
			setcookie("password", $password, time()+(60*60*1));  /* expire in 1 hour */
			setcookie("remember", $remember, time()+(60*60*1));  /* expire in 1 hour */
		  } else {
			setcookie("username", $username, time()-1);
			setcookie("password", $password, time()-1);
			setcookie("remember", $remember, time()-1);
		  }
		  $userobj->redirect("dashboard.php");
		} else {
			$error =	$userobj->set_error('wrong_username_and_password');
		}
	}
}

Signup Form – register.php:

<form id="register-form" action="" method="post" role="form" class="form-horizontal" onsubmit="return validateForm(this);">
				<div class="panel panel-default">
					<div class="panel-heading">
						<p class="text-center">
							<a href="index.php" class="btn btn-primary" id="login-form-link">Login</a>
							<a href="javascript:void(0);" id="register-form-link" class="btn btn-warning">Register</a>
						</p>
					</div>
					<div class="panel-body">
						<?php if(isset($success)){ 	?>
								<div class="alert alert-success">
								  <i class="glyphicon glyphicon-warning-sign"></i> &nbsp; <?php echo $success; ?>
								</div>
						<?php } ?>
						<?php if(isset($error)){ 
							foreach($error as $error){
							?>
								<div class="alert alert-danger">
								  <i class="glyphicon glyphicon-warning-sign"></i> &nbsp; <?php echo $error; ?>
								</div>
							<?php
							}
						} ?>
						<div class="row">
							<div class="col-lg-12">
								<div class="form-group" style="padding: 10px;">
									<input type="text" name="username" id="username" tabindex="1" class="form-control" placeholder="Username">
									<span id="username_error"></span>
								</div>
								<div class="form-group" style="padding: 10px;">
									<input type="password" name="password" id="password" tabindex="2" class="form-control" placeholder="Password">
									<span id="password_error"></span>
								</div>
								<div class="form-group" style="padding: 10px;">
									<input type="password" name="confirm_password" id="confirm-password" tabindex="2" class="form-control" placeholder="Confirm Password">
									<span id="confirm_password_error"></span>
								</div>
								<div class="form-group text-center">
									<button type="submit" name="register-submit" id="register-submit" tabindex="4" class="btn btn-primary">Register</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>

See the HTML 5 output of signup form be like this

PHP-signup-form-with-PDO

Javascript Validation – Signup Form:

<script>
		function validateForm(form) {
			var error = false;
			var error_field = "";
			var username = form.username.value;
			var password = form.password.value;
			var cpassword = form.confirm_password.value;
			if (username == "") {
				error = true;
				error_field = "username";
				$("#"+error_field+"_error").html('<p class="error">Please enter Username</p>');
			}
			if (password == "") {
				error = true;
				error_field = "password";
				$("#"+error_field+"_error").html('<p class="error">Please enter Password</p>');
			}
			if (cpassword == "") {
				error = true;
				error_field = "confirm_password";
				$("#"+error_field+"_error").html('<p class="error">Please enter Confirm Password</p>');
			} else {
				if (password != cpassword) {
					error = true;
					error_field = "confirm_password";
					$("#"+error_field+"_error").html('<p class="error">Password and Confirm password sholud be same</p>');
				}
			}
			if (error) {
				$("#"+error_field).focus();
				return false;
			} else {
				return true;
			}
		}
	</script>

Form submission in Server side – register.php:

if(isset($_REQUEST['register-submit'])){
	extract($_REQUEST); // to get the input values

	if($username && $password) {
		if($userobj->addUser($username,$confirm_password)){
			$success = "Your account is created successfully!";
		}
	}
}

We have created user.php for accessing database based on user inputs. user.php file contains collections of functions to build query to access users table. Please get the file from github and link is in below.

Source codes Available on Github: Click here to download Script

Share Your Thoughts

phpexpertise

I’m Blogger and Programming Blog, Tutorials, PHP, MySQL, jQuery, Laravel, Wordpress and Codeigniter