Table of Contents
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.
Creating a 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.
You should be able to create a database named dbase.
Creating a Connection
Next, we create our connection to our database using the PDO extension.
Please 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 a Login Form
Next, we are going to create our login form.
Please 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 a Login Script
Next, we create a 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 a Register Form
Next, we create a registration form so that a new user can be added to our lists of users.
Please 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 a Register Script
Lastly, we create a script that registers our user.
Please 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!
