Connect Bootstrap Login Form and Mysql with PDO

Lately I playing around with the bootstrap framework. I will share how to create simple login form with bootstrap and connect it with mysql using PDO. Bootstrap has an elegant look. combined with ajax and jquery , will make your application run faster.

Why we must use PDO to create connection with mysql ?

PDO – PHP Data Objects – is a database access layer providing a uniform method of access to multiple databases.

PDO stands for PHP Data Objects which is a database access layer in PHP version 5.xx. In addition to having fast performance, PDO also supports a wide range of RDBMS including MySQL, CUBRID, MS SQL Server, Firebird, IBM, Informix, MS SQL Server, Oracle, ODBC and DB2, Postegre SQL, SQLite, and 4D. Just a reminder, to use PDO to connect to the database, you need to be a little familiar with OOP.

Requirement :

Download AdminLTE Bootstrap template here

Lets begin tutorial

1. Create Login form as php file (login.php)

<?php
session_start();
?>
<!DOCTYPE html>
<html class="bg-black">
    <head>
        <meta charset="UTF-8">
        <title>Your title</title>
        <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
        <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="css/AdminLTE.css" rel="stylesheet" type="text/css" />
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
          <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="bg-black inverse">
        <div class="form-box" id="login-box">
            <div class="header">Login Form</div>
            <form action="validation.php" method="post">
                <div class="body bg-gray">
                    <div class="form-group">
                        <input type="text" name="username" required autofocus class="form-control" placeholder="Username"/>
                    </div>
                    <div class="form-group">
                        <input type="password" name="password" required class="form-control" placeholder="Password"/>
                    </div>
                </div>
                <div class="footer">
                    <button type="submit" class="btn bg-olive btn-block">Login</button>
                     <?php
							if(isset($_GET['error']))
							{
								echo ' <div class="box-body"> <div class="callout callout-warning">';
									if($_GET['error']==1)
									{
										echo "Please fill username or password.";
									}
                                                                        if($_GET['error']==2)
									{
										echo "The username and password you entered did not match our records. Please double-check and try again.";
									}

								echo '</div></div>';
							}

			 		  ?>
                </div>
            </form>
        </div>
        <script src="js/jquery.min.js"></script>
        <script src="js/bootstrap.min.js" type="text/javascript"></script>
</body>
</html>

<?php

session_start();

<!DOCTYPE html>

<head>

<title>Your title</title>

<!--[if lt IE 9]>

<![endif]-->

</head>

<div class="header">Login Form</div>

</div>

</div>

<button type="submit" class="btn bg-olive btn-block">Login</button>

<?php

if(isset($_GET['error']))

{

echo ' <div class="box-body"> <div class="callout callout-warning">';

if($_GET['error']==1)

{

echo "Please fill username or password.";

}

if($_GET['error']==2)

{

echo "The username and password you entered did not match our records. Please double-check and try again.";

}

echo '</div></div>';

}

</div>

</form>

</div>

</body>

</html>

2. Create PDO class (pdo_db.php).

<?php
class core_db extends PDO{
    private $engine;
    private $host;
    private $database;
    private $user;
    private $pass;

    private $result;    

    public function __construct()
        {
        $this->engine   = 'mysql';
        $this->host     = 'localhost';
        $this->database = 'yourdatabase';
        $this->user     = 'root';
        $this->pass     = '';

        $dns = $this->engine.':dbname='.$this->database.";host=".$this->host;
        parent::__construct( $dns, $this->user, $this->pass );
        }
}

<?php

class core_db extends PDO{

private $engine;

private $host;

private $database;

private $user;

private $pass;

private $result;

public function __construct()

{

$this->engine = 'mysql';

$this->host = 'localhost';

$this->database = 'yourdatabase';

$this->user = 'root';

$this->pass = '';

$dns = $this->engine.':dbname='.$this->database.";host=".$this->host;

parent::__construct( $dns, $this->user, $this->pass );

}

3. Create validation form (validation.php)

<?php
session_start();
$username = $_POST['username'];
$password = $_POST['password'];
if (empty($username) && empty($password)) {
	header('location:login.php?error=1');
	break;
}
require_once('pdo_db.php');
try {
$database= new core_db;
$hasil=$database->prepare('select a.id_user,a.nama_user,a.level from t_user a where a.nama_user="'.$username.'" and a.pass_user='.$password);
$database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$database->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);
$hasil->execute();
}
catch(Exception $e) {
    echo 'Exception -> ';
    var_dump($e->getMessage());
}
$jum=$hasil->rowCount();
if ($jum >=1)
{
	while($data = $hasil->fetch(PDO::FETCH_ASSOC))
    {
		$_SESSION['ses_nama_user'] = $data['nama_user'];
		$_SESSION['ses_id'] = $data['id_user'];
		$_SESSION['ses_level'] = $data['level'];
	}
	header('location:index.php');
}
else
{
	header('location:login.php?error=2');
}
?>

<?php

session_start();

$username = $_POST['username'];

$password = $_POST['password'];

if (empty($username) && empty($password)) {

header('location:login.php?error=1');

break;

}

require_once('pdo_db.php');

try {

$database= new core_db;

$hasil=$database->prepare('select a.id_user,a.nama_user,a.level from t_user a where a.nama_user="'.$username.'" and a.pass_user='.$password);

$database->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$database->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

$hasil->execute();

}

catch(Exception $e) {

echo 'Exception -> ';

var_dump($e->getMessage());

}

$jum=$hasil->rowCount();

if ($jum >=1)

{

while($data = $hasil->fetch(PDO::FETCH_ASSOC))

{

$_SESSION['ses_nama_user'] = $data['nama_user'];

$_SESSION['ses_id'] = $data['id_user'];

$_SESSION['ses_level'] = $data['level'];

}

header('location:index.php');

}

else

{

header('location:login.php?error=2');

}

Thus tutorials Connect Bootstrap Login Form and MySQL with PDO, please read my other bootstrap tutorial here

Connect Bootstrap Login Form and Mysql with PDO

Why we must use PDO to create connection with mysql ?

About Sigit Prasetya Nugroho

Comments

Leave a Reply Cancel reply

Why we must use PDO to create connection with mysql ?

About Sigit Prasetya Nugroho

Reader Interactions

Comments

Leave a Reply Cancel reply