Login and Register using PDO in PHP

Submitted by nurhodelta_17 on Thursday, April 12, 2018 - 21:36.

Getting Started

I've used Bootstrap 4 and Font Awesome 5 in this tutorial and are included in the downloadables but if you want, you can download them yourself using the links below. For Bootstrap For Font-awesome

Creating our Database

Next, we create the database that we are going to filter in this tutorial. I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database. You should be able to create a database named dbase.

Creating our Connection

Next, we create our connection to our database using the PDO extension. Create a new file, name it as conn.php and paste the codes below.

<?php
 
$host = 'localhost';
$db   = 'dbase';
$user = 'root';
$pass = '';
$charset = 'utf8mb4';
 
$dsn = "mysql:host=$host;dbname=$db;charset=$charset";
$options = [
    PDO::ATTR_ERRMODE            => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];
$pdo = new PDO($dsn, $user, $pass, $options);
 
?>

Creating our Login Form

Next, we are going to create our login form. Create a new file, name it as index.php and paste the codes below.

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Login and Register using PDO in PHP</title>
	<link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
	<script src="font-awesome/fontawesome-all.min.js"></script>
</head>
<body>
<div class="container">
	<h1 class="text-center" style="margin-top:30px;">Login and Register using PDO</h1>
	<hr>
	<div class="row justify-content-md-center">
		<div class="col-md-5">
			<?php
				if(isset($_SESSION['error'])){
					echo "
						<div class='alert alert-danger text-center'>
							<i class='fas fa-exclamation-triangle'></i> ".$_SESSION['error']."
						</div>
					";
 
					//unset error
					unset($_SESSION['error']);
				}
 
				if(isset($_SESSION['success'])){
					echo "
						<div class='alert alert-success text-center'>
							<i class='fas fa-check-circle'></i> ".$_SESSION['success']."
						</div>
					";
 
					//unset success
					unset($_SESSION['success']);
				}
			?>
			<div class="card">
				<div class="card-body">
				    <h5 class="card-title text-center">Sign in your account</h5>
				    <hr>
				    <form method="POST" action="login.php">
				    	<div class="form-group row">
						  	<label for="email" class="col-3 col-form-label">Email</label>
						  	<div class="col-9">
						    	<input class="form-control" type="email" id="email" name="email" value="<?php echo (isset($_SESSION['email'])) ? $_SESSION['email'] : ''; unset($_SESSION['email']) ?>" placeholder="input email" required>
						  	</div>
						</div>
						<div class="form-group row">
						  	<label for="password" class="col-3 col-form-label">Password</label>
						  	<div class="col-9">
						    	<input class="form-control" type="password" id="password" name="password" value="<?php echo (isset($_SESSION['password'])) ? $_SESSION['password'] : ''; unset($_SESSION['password']) ?>" placeholder="input password" required>
						  	</div>
						</div>
				    <hr>
				    <div>
				    	<button type="submit" class="btn btn-primary" name="login"><i class="fas fa-sign-in-alt"></i> Login</button>
				    	<a href="register_form.php">Register a new account</a>
				    </div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Creating our Login Script

Next, we create the script that verifies our users. Create a new file, name it as index.php and paste the codes below.

<?php
	//start PHP session
	session_start();
 
	//check if login form is submitted
	if(isset($_POST['login'])){
		//assign variables to post values
		$email = $_POST['email'];
		$password = $_POST['password'];
 
		//include our database connection
		include 'conn.php';
 
		//get the user with email
		$stmt = $pdo->prepare('SELECT * FROM users WHERE email = :email');
 
		try{
			$stmt->execute(['email' => $email]);
 
			//check if email exist
			if($stmt->rowCount() > 0){
				//get the row
				$user = $stmt->fetch();
 
				//validate inputted password with $user password
				if(password_verify($password, $user['password'])){
					//action after a successful login
					//for now just message a successful login
					$_SESSION['success'] = 'User verification successful';
				}
				else{
					//return the values to the user
					$_SESSION['email'] = $email;
					$_SESSION['password'] = $password;
 
					$_SESSION['error'] = 'Incorrect password';
				}
 
			}
			else{
				//return the values to the user
				$_SESSION['email'] = $email;
				$_SESSION['password'] = $password;
 
				$_SESSION['error'] = 'No account associated with the email';
			}
 
		}
		catch(PDOException $e){
			$_SESSION['error'] = $e->getMessage();
		}
 
	}
	else{
		$_SESSION['error'] = 'Fill up login form first';
	}
 
	header('location: index.php');
?>

Creating our Register Form

Next, we create a register form so that new user can be added to our lists of users. Create a new file, name it as register_form.php and paste the codes below.

<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Login and Register using PDO in PHP</title>
	<link rel="stylesheet" type="text/css" href="bootstrap4/css/bootstrap.min.css">
	<script src="font-awesome/fontawesome-all.min.js"></script>
</head>
<body>
<div class="container">
	<h1 class="text-center" style="margin-top:30px;">Login and Register using PDO</h1>
	<hr>
	<div class="row justify-content-md-center">
		<div class="col-md-5">
			<?php
				if(isset($_SESSION['error'])){
					echo "
						<div class='alert alert-danger text-center'>
							<i class='fas fa-exclamation-triangle'></i> ".$_SESSION['error']."
						</div>
					";
 
					//unset error
					unset($_SESSION['error']);
				}
 
				if(isset($_SESSION['success'])){
					echo "
						<div class='alert alert-success text-center'>
							<i class='fas fa-check-circle'></i> ".$_SESSION['success']."
						</div>
					";
 
					//unset success
					unset($_SESSION['success']);
				}
			?>
			<div class="card">
				<div class="card-body">
				    <h5 class="card-title text-center">Register a new account</h5>
				    <hr>
				    <form method="POST" action="register.php">
				    	<div class="form-group row">
						  	<label for="email" class="col-3 col-form-label">Email</label>
						  	<div class="col-9">
						    	<input class="form-control" type="email" id="email" name="email" value="<?php echo (isset($_SESSION['email'])) ? $_SESSION['email'] : ''; unset($_SESSION['email']) ?>" placeholder="input email" required>
						  	</div>
						</div>
						<div class="form-group row">
						  	<label for="password" class="col-3 col-form-label">Password</label>
						  	<div class="col-9">
						    	<input class="form-control" type="password" id="password" name="password" value="<?php echo (isset($_SESSION['password'])) ? $_SESSION['password'] : ''; unset($_SESSION['password']) ?>" placeholder="input password" required>
						  	</div>
						</div>
						<div class="form-group row">
						  	<label for="confirm" class="col-3 col-form-label">Confirm</label>
						  	<div class="col-9">
						    	<input class="form-control" type="password" id="confirm" name="confirm" value="<?php echo (isset($_SESSION['confirm'])) ? $_SESSION['confirm'] : ''; unset($_SESSION['confirm']) ?>" placeholder="re-type password">
						  	</div>
						</div>
				    <hr>
				    <div>
				    	<button type="submit" class="btn btn-success" name="register"><i class="far fa-user"></i> Signup</button>
				    	<a href="index.php">Back to login</a>
				    </div>
					</form>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

Creating our Register Script

Lastly, we create the script that registers our user. Create a new file, name it as register.php and paste the codes below.

<?php
	//start PHP session
	session_start();
 
	//check if register form is submitted
	if(isset($_POST['register'])){
		//assign variables to post values
		$email = $_POST['email'];
		$password = $_POST['password'];
		$confirm = $_POST['confirm'];
 
		//check if password matches confirm password
		if($password != $confirm){
			//return the values to the user
			$_SESSION['email'] = $email;
			$_SESSION['password'] = $password;
			$_SESSION['confirm'] = $confirm;
 
			//display error
			$_SESSION['error'] = 'Passwords did not match';
		}
		else{
			//include our database connection
			include 'conn.php';
 
			//check if the email is already taken
			$stmt = $pdo->prepare('SELECT * FROM users WHERE email = :email');
			$stmt->execute(['email' => $email]);
 
			if($stmt->rowCount() > 0){
				//return the values to the user
				$_SESSION['email'] = $email;
				$_SESSION['password'] = $password;
				$_SESSION['confirm'] = $confirm;
 
				//display error
				$_SESSION['error'] = 'Email already taken';
			}
			else{
				//encrypt password using password_hash()
				$password = password_hash($password, PASSWORD_DEFAULT);
 
				//insert new user to our database
				$stmt = $pdo->prepare('INSERT INTO users (email, password) VALUES (:email, :password)');
 
				try{
					$stmt->execute(['email' => $email, 'password' => $password]);
 
					$_SESSION['success'] = 'User verified. You can <a href="index.php">login</a> now';
				}
				catch(PDOException $e){
					$_SESSION['error'] = $e->getMessage();
				}
 
			}
 
		}
 
	}
	else{
		$_SESSION['error'] = 'Fill up registration form first';
	}
 
	header('location: register_form.php');
?>

That ends this tutorial. Happy Coding :)

Add new comment

1674 views