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.
<!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
//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.
<!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
//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 :)