Bootstrap 4 Login Page – PHP/MySQL

Here i have created a login page where user can enter their email address and password. When user submit the form, inputs will be verified against the credentials stored in the database, if the email and password match, the user is authorized and granted. Otherwise it will display error message.

You would need database connection to connect to MySQL database.

I have already posted a post about creating a database class for PHP/MySQL. I would suggest you to go through the previous post PHP/MySQL Database Class before following this.

login.php

Let’s create a file named “login.php” and place the following code. This file contains php scripts and HTML code for the login page. Here i have fetched the user from the database according to the entered username and compared the password hash in the database with the entered password’s hash (I have used md5 password hashing method). If both hashes are exactly same, register user id in the session and redirect to the index.php page.

<?php
require('class.database.php');

if(isset($_POST['submit'])){
	if(isset($_POST['username'])){
		if(isset($_POST['password'])){
			$username = $database->escape($_POST['username']);
			$password = $database->escape($_POST['password']);

			$sql = "SELECT * FROM users WHERE username='$username'";
			$results = $database->select($sql);
			if(is_array($results) && count($results)>0){
				$password_hash = $results[0]['password'];
				if($password_hash==md5($password)){
					// Username & password correct
					session_start();
					$_SESSION['user_id'] = $results[0]['id'];
					header('location:index.php');
				}
				else $ermsg = "Password incorrect !";
			}
			else $ermsg = "User not found !";
		}
		else $ermsg = "Password required !";
	}
	else $ermsg = "Username required !";
}
?>
<!DOCTYPE html> 
<html lang="en"> 
<head> <!-- Required meta tags --> 
  <meta charset="utf-8"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> 
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <!--Fontawesome CDN-->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <title>Login</title> 
</head> 
<body> 


<div class="container">
		<?php 
		if(isset($ermsg) && !empty($ermsg)) {
			echo '<div class="alert alert-danger" role="alert">'.$ermsg.'</div>';
		}
		?>
	<div class="d-flex justify-content-center h-100">
		<div class="card">
			<div class="card-header">
				<h3>Login</h3>
			</div>
			<div class="card-body">
				<form method="post">
					<div class="input-group form-group">
						<div class="input-group-prepend">
							<span class="input-group-text"><i class="fas fa-user"></i></span>
						</div>
						<input type="text" name="username" class="form-control" placeholder="username">
						
					</div>
					<div class="input-group form-group">
						<div class="input-group-prepend">
							<span class="input-group-text"><i class="fas fa-key"></i></span>
						</div>
						<input type="password" name="password" class="form-control" placeholder="password">
					</div>
					<div class="form-group">
						<input type="submit" name="submit" value="Login" class="btn float-right login_btn">
					</div>
				</form>
			</div>
		</div>
	</div>
</div>


  <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> 
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> 
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 
</body> 
</html>

 

After successful login, it will display a simple index.php page with the logout button for logout when needed.

index.php

<?php 
session_start();
// if the user is not logged in, then redirect to the login page
if(!isset($_SESSION["user_id"])){
    header("location:login.php");
    exit();
}
?>
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Simple Bootstrap4  - Login PHP/MySQL</title>
  </head>
  <body>
    <h1>Login Successful !</h1>
    <h2>
    <a href="logout.php">
    <button class="btn btn-warning">Logout</button>
    </a>
    </h2>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

 

logout.php

This uses for clear the login session we created and destroy all other sesions by destroying the session and redirect back to the login page.

<?php 
session_start();
// Unset all session variables
$_SESSION = array();
// Destroy the session.
session_destroy();
// Redirect to the login page
header("location:login.php");
exit();
?>

Download the complete source code sample database from my Github: https://github.com/lahirutm/Bootstrap-4-Login-Page—PHP-MySQL

NodeMCU ESP8266

NodeMCU is a low-cost open source IoT platform. It initially included firmware which runs on the ESP8266 Wi-Fi SoC from Espressif Systems, and hardware which was based on the ESP-12 module. Later, support for the ESP32 32-bit MCU was added.

NodeMCU Development board is featured with wifi capability, analog pin, digital pins and serial communication protocols.

NodeMCU with Arduino IDE

We can develop applications on NodeMCU using Arduino development environment. This makes easy for Arduino developers than learning new language and IDE for NodeMCU.

When we write and compile code using Arduino IDE, ESP8266 tool chain in background creates binary firmware file of the code. And when we upload it to the NodeMCU, it will flash whole NodeMCU firmware with newly generated binary firmware code.

 

Arduino Nano

The Arduino Nano is one of the smallest and yet most exciting breadboard-friendly boards available on the market today. It’s become exceptionally popular with beginner programmers thanks to its excellent functionality and the sheer variation of potential applications. Based on the ATmega328P, this tool is fantastic for those who wish to improve their programming skills and create some interesting and unusual projects. While the item does not come with a DC power pack, it benefits from a mini-USB cable for power, and that means you can use it with any PC or laptop device.

PHP/MySQL Database Class

This is a simple and easy database class to use in a PHP/MySQL application. I have used Object Oriented Programing (OOP) methods to made this very useful in OOP applications.

class.database.php

<?php
// database class
class database {
    protected static $connection;
    
    var $hostname="localhost";
    var $username="root";
    var $password="";
    var $database="test_database";

    public function __construct() {
        
    }

    public function connect() {    
        if(!isset(self::$connection)) {               
            self::$connection = new mysqli($this->hostname,$this->username,$this->password,$this->database);
        }

        // If connection was not successful, handle the error
        if(self::$connection === false) {
            // Handle error - notify administrator, log to a file, show an error screen, etc.
            return false;
        }

        self::$connection -> query("SET NAMES 'utf8'");

        return self::$connection;
    }


    public function query($query) {
        // Connect to the database
        $connection = $this -> connect();
        // Query the database
        $result = $connection -> query($query);

        return $result;
    }

    public function multi_query($query){
        // Connect to the database
        $connection = $this -> connect();

        // Query the database
        $result = $connection -> multi_query($query);

        return $result;
    }

    public function insert($query) {
        // Connect to the database
        $connection = $this -> connect();

        // Query the database
        $connection -> query($query);
        // Get inserted id
        $insertid = $connection -> insert_id;

        return $insertid;
    }

    public function select($query) {
        $rows = array();
        $result = $this -> query($query);
        if($result === false) {
            return false;
        }
        while ($row = $result -> fetch_assoc()) {
            $rows[] = $row;
        }
        return $rows;
    }

    public function num_rows($query) {
        $result = $this -> query($query);
    
        if($result === false) {
            $count = 0;
        }
        else $count = $result->num_rows;
        
        return $count;
    }

    /**
     * Fetch the last error from the database
     * 
     * @return string Database error message
     */
    public function error() {
        return self::$connection -> error;
    }

    /**
     * Quote and escape value for use in a database query
     *
     * @param string $value The value to be quoted and escaped
     * @return string The quoted and escaped string
     */
    public function escape($value) {
        $connection = $this -> connect();
        return $connection -> real_escape_string(trim($value));
    }
}

$database = new database();
?>

How to use this in a PHP application ?

You must include this in your php page where you need to get data from mysql database or write data to mysql database.

Let’s assume, we have system_users table in our test database. Now we want to get users from this table. So, here is my get_users.php file.

<?php
require('class.database.php'); 

$sql = "SELECT `user_name`, `user_email`, `user_password` FROM `system_users` WHERE 1";
$users = $database->select($sql);

echo json_encode($users);
?>

Download source code from my Github: https://github.com/lahirutm/PHP-MySQL-Database-Class

Install PHP 7.3 on Ubuntu 18.04 with Apache

Linux is a very popular environment for [PHP + Apache] server configuration. Ubuntu is a one of popular operating system in Linux family. In this post, i am going to describe the steps for installing PHP 7.3 with Apache2.

Before we start, ensure that your system packages are upto-date. Run the  below to commands to perform system package update and upgrade.

sudo apt update
sudo apt upgrade

This will update the package index and update the installed packages to the latest version.

PHP 7.3 is a not available on Ubuntu 18.04 default repositories. Add the ondrej/php which has PHP 7.3 package and other required PHP extensions.

sudo apt install software-properties-common
sudo add-apt-repository ppa:ondrej/php
sudo apt update

If you encounter the error, sudo: add-apt-repository: command not found, install the following package to fix it.

sudo apt install software-properties-common

Now, re-synchronize your system packages to the latest versions.

sudo apt update

Install PHP 7.3 for Apache

Execute the following command to install PHP 7.3

sudo apt install php7.3

After the installation has completed, confirm that PHP 7.3 has installed correctly.

php -v

Now, install some commonly used php-extensions with the following command.

sudo apt install php7.3-common php7.3-mysql php7.3-xml php7.3-xmlrpc php7.3-curl php7.3-gd php7.3-imagick php7.3-cli php7.3-dev php7.3-imap php7.3-mbstring php7.3-opcache php7.3-soap php7.3-zip php7.3-intl -y

Now you have successfuly installed PHP 7.3 on Ubuntu.

Install PHP 7.3 on Windows 7/8/10 with IIS

Internet Information Services (IIS) for Windows is a flexible, secure and manageable Web server for hosting anything on the Web. It is commonly made for windows server operating systems. But we can still use it in any versions of windows operating systems by enabling the feature.

To install IIS on Windows 8

  1. On the Start page, type Control Panel, and then click the Control Panel icon in the search results.
  2. In Control Panel, click Programs, and then click Turn Windows features on or off.
  3. In the Windows Features dialog box, click Internet Information Services.
  4. Pre-selected features that are installed by default, and then select CGI. This selection also installs FastCGI, which is recommended for PHP applications.
  5. Click OK.

To verify that IIS installed successfully, Type the following into a web browser: http://localhost
You will see the default IIS Welcome page.

 

Install PHP by using Web Platform Installer.

The preferred method to install PHP on Windows computer is to use Web Platform Installer (Web PI).

Open a browser to the following website: Microsoft Web Platform Installer.
Click Download It Now, and then click Run.

At the top of the Web Platform Installer window, click Products.

Click Frameworks, and then select the current latest version of PHP. (At this writing, the current latest version is PHP 7.3)

Click Install.

The Web Platform Installation page displays the version of PHP and its dependencies that will be installed.

Click I Accept. Web PI installs the PHP packages.

Click Finish.

Test the PHP installation

Open a text editor, for example Notepad, as Administrator.
In a new file, type the following text:

<?php phpinfo(); ?>

Save the file as C:\inetpub\wwwroot\phpinfo.php
Open a browser and enter the following URL: http://localhost/phpinfo.php

A nicely formatted webpage is displayed showing the current PHP settings.