Login Logout using PHP and Mysql with Bootstrap 4

Login Logout using PHP and Mysql with Bootstrap 4

Hi! Good Day, This is my first blog so i hope you'll enjoy it.

Please do support my blog, It is much appreciated. Cheers!

First we will be needing the following.

• Web Hosting - Apache & MySQL support (I am using XAMPP to be able to run on localhost)
• Bootstrap 4 & jQuery
• Text Editor like Notepad++, VS Code, etc. or any text editor you preferred and comfortable. (I am using Sublime Text 3)

Open and run XAMPP.

Make sure you are running Apache & MySQL on.


Create a new database. Name it as you like. I am going with 'ks_login_logout'.

CREATE DATABASE `ks_login_logout`;

view raw create-ks-login-logout.sql hosted with ❤ by GitHub

Create a 'users' table under the 'ks_login_logout' database.

	CREATE TABLE `users` (
	`user_id` int(11) AUTO_INCREMENT PRIMARY KEY,
	`username` varchar(16) NOT NULL,
	`pwd` varchar(16) NOT NULL,
	`fname` varchar(255) NOT NULL,
	`lname` varchar(255) NOT NULL
	);

view raw create-ks-login-logout-users.sql hosted with ❤ by GitHub

We are going to use the following fields: 'user_id','username','pwd','fname','lname'


Next is preparing the work space.

Go to your work space directory and create a folder 'assets' where i can put bootstrap and other resources.
This is just the way i organize my codes but not necessary.

I am using Bootstrap 4 as a front end template. You can download the source file here -> DOWNLOAD BOOTSTRAP 4 or you can just link it from online to your project using BootstrapCDN

	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

view raw bs-cdn.html hosted with ❤ by GitHub

	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

view raw bscdn2.html hosted with ❤ by GitHub

Open an extract the Bootstrap 4 Source files inside the 'assets' folder

Create a  new folder in main directory and name it 'ks-login-logout'. This is where the main code goes.

In this section we will create the following php files .

• 'config.php' - This is the config file containing the mysql credentials when connecting in a database.

	<?php
	/**
	* Created by K-SOLUTIONS.
	* User: kevin
	* Date: 13/05/2018
	* Time: 5:25 PM
	*/
	//Session
	session_start();
	//DB Handler
	$host = 'localhost';
	$user = 'root';
	$pass = '';
	$database = 'ks_login_logout';
	$conn = mysqli_connect($host,$user,$pass,$database);
	if (!$conn){
	die("DB Handler Connection Failed: " . mysqli_connect_error());
	}

view raw config.php hosted with ❤ by GitHub
• 'index.php' - This is the default page that will load when accessing your project and can serve as a login page.

	<?php
	//REQUIRE CONFIG FOR DB HANDLING
	require 'config.php';
	//CHECK FIRST IF THE REQUESTER IS CURRENTLY LOGGED
	if (isset($_SESSION['log_user_id'])){
	header('Location: home.php');
	}
	$message = '<small>Sign in to continue</small>';
	if (isset($_POST['btn-login'])){
	$username = mysqli_real_escape_string($conn,$_POST['username']);
	$pwd = mysqli_real_escape_string($conn,$_POST['pwd']);
	if (empty($username)){
	$message = ' <div class="alert alert-danger">
	<small>Please enter username.</small>
	</div>';
	}elseif(empty($pwd)){
	$message = ' <div class="alert alert-danger">
	<small>Please enter password.</small>
	</div>';
	}else{
	$sql = "SELECT * FROM users WHERE username='$username'";
	$result = mysqli_query($conn,$sql);
	$message = ' <div class="alert alert-danger">
	<small>User not found!.</small>
	</div>';
	while ($row = mysqli_fetch_assoc($result)){
	if ($row['username'] == $username){
	if ($row['pwd'] == $pwd){
	//SET SESSION AND REDIRECT TO HOMEPAGE
	$_SESSION['log_user_id'] = $row['user_id'];
	header('Location: home.php');
	}else{
	$message = ' <div class="alert alert-danger">
	<small>Incorrect Password!.</small>
	</div>';
	}
	}
	}
	}
	}
	?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" href="../assets/images/favicon.ico">
	<title>Login Logout | K-SOLUTIONS</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
	<!-- Font Awesome CSS -->
	<link rel="stylesheet" href="../assets/plugins/font-awesome/css/fontawesome-all.min.css">
	</head>
	<body>
	<main>
	<div class="container mt-3 pt-0 pt-sm-3 pt-md-5">
	<div class="row">
	<div class="col-lg-4 col-md-6 col-sm-8 col-11 mx-auto">
	<div class="card border-primary mb-3">
	<div class="card-body">
	<div class="text-center mb-3">
	<img src="../assets/images/ksolutionsph-logo.png" class="h-50 w-50">
	<h6>K-SOLUTIONS PH</h6>
	<?php
	echo $message;
	?>
	</div>
	<form method="post">
	<div class="form-group">
	<label for="username">Username:</label>
	<input type="text" class="form-control" name="username" placeholder="Username" value="<?php echo (isset($username)?$username:'');?>">
	</div>
	<div class="form-group">
	<label for="pwd">Password:</label>
	<input type="password" class="form-control" name="pwd" placeholder="Password" value="<?php echo (isset($pwd)?$pwd:'');?>">
	</div>
	<button type="submit" class="btn btn-primary" name="btn-login"><i class="fas fa-sign-in-alt"></i> Login</button>
	</form>
	</div>
	</div>
	</div>
	</div>
	</div>
	</main>
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="../assets/plugins/jQuery/jquery-3.3.1.min.js"></script>
	<script src="../assets/bootstrap/js/bootstrap.bundle.min.js"></script>
	</body>
	</html>

view raw index.php hosted with ❤ by GitHub
• 'home.php' - Page where the authenticated user goes after success login.

	<?php
	//REQUIRE CONFIG FOR DB HANDLING
	require 'config.php';
	//CHECK FIRST IF THE REQUESTER IS CURRENTLY LOGGED
	if (!isset($_SESSION['log_user_id'])){
	header('Location: ./');
	}else{
	//GET USER DETAILS
	$sql = "SELECT * FROM users WHERE user_id='{$_SESSION['log_user_id']}'";
	$result = mysqli_query($conn,$sql);
	while ($row = mysqli_fetch_assoc($result)){
	$first_name = $row['fname'];
	$last_name = $row['lname'];
	}
	}
	?>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="icon" href="../assets/images/favicon.ico">
	<title>Login Logout | K-SOLUTIONS</title>
	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
	<!-- Font Awesome CSS -->
	<link rel="stylesheet" href="../assets/plugins/font-awesome/css/fontawesome-all.min.css">
	<style>
	body{
	margin-bottom: 3rem;
	}
	.main-footer {
	border-top: 1px solid #b7b7b7;
	position: fixed;
	bottom: 0;
	width: 100%;
	line-height: 30px;
	background-color: #f8f9fa!important;
	}
	</style>
	</head>
	<body>
	<header>
	<nav class="navbar navbar-expand-md bg-dark navbar-dark">
	<a class="navbar-brand" href="#">
	<img src="../assets/images/ksolutionsph-logo.png" alt="Logo" style="width:40px;">
	<span class="d-none d-sm-inline">K-SOLUTIONS PH</span>
	<h6 class="d-inline d-sm-none ">K-SOLUTIONS</h6>
	</a>
	<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
	<span class="navbar-toggler-icon"></span>
	</button>
	<div class="collapse navbar-collapse " id="collapsibleNavbar">
	<ul class="navbar-nav ml-auto">
	<li class="nav-item dropdown">
	<a class="nav-link dropdown-toggle " href="#" id="navbardrop" data-toggle="dropdown">
	<i class="fas fa-user"></i> User
	</a>
	<div class="dropdown-menu dropdown-menu-right">
	<a class="dropdown-item" href="https://paypal.me/kayeR20" target="_blank"><i class="fas fa-money-bill-alt"></i> Donate</a>
	<div class="dropdown-divider"></div>
	<a class="dropdown-item" href="logout.php"><i class="fas fa-sign-out-alt"></i> Logout</span></a>
	</div>
	</li>
	</ul>
	</div>
	</nav>
	</header>
	<main>
	<div class="container my-3">
	<div class="card border-primary mb-3">
	<div class="card-header bg-primary text-white">
	<strong class="card-title">WELCOME <?php echo strtoupper($first_name." ".$last_name); ?>!</strong>
	</div>
	<div class="card-body">
	<p class="card-text"><i class="fas fa-info-circle"></i> You successfully logged into the system, Thank you.</p>
	</div>
	</div>
	</div>
	</main>
	<footer class="main-footer navbar-dark">
	<div class="container-fluid ">
	<small class="clearfix">
	<span class="font-weight-light float-left">
	ksolutionsph@gmail.com | <a href="http://ksolutionsph.ga" target="_blank">ksolutionsph.ga</a>
	</span>
	&nbsp;
	<span class="font-weight-light float-left float-sm-right">
	K-SOLUTIONS © <?php echo date('Y');?>
	</span>
	</small>
	</div>
	</footer>
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script src="../assets/plugins/jQuery/jquery-3.3.1.min.js"></script>
	<script src="../assets/bootstrap/js/bootstrap.bundle.min.js"></script>
	</body>
	</html>

view raw home.php hosted with ❤ by GitHub
• 'logout.php' - Page where the authenticated user triggers to logout and going in the index page after.

	<?php
	/**
	* Created by K-SOLUTIONS.
	* User: kevin
	* Date: 13/05/2018
	* Time: 6:05 PM
	*/
	require 'config.php';
	//END SESSION AND REDIRECT TO INDEX
	session_destroy();
	header('Location: ./');

view raw logout.php hosted with ❤ by GitHub

SOURCE CODE

1. Download the source code & place it on your host.
2. Create a database 'ks_login_logout'.
3. Import the sql file located at the source code's folder.
4. Test it on your host.

Enjoy !

Download the source here - DOWNLOAD

php, mysql, bootstrap4, php login logout

Share & Support. Thank you !

-ksolutionsph

Share: