Membuat Session pada Bootsrap Form Login

Pembuatan form login sangat diperlukan apabila kita mensyaratkan bagi user yang diberikan otorisasi untuk dapat masuk kesuatu halaman tertentu.

Dalam tutorial kali ini, kita akan membuat form login dengan mengimplementasikan session. Session ini digunakan untuk menyimpan suatu informasi antar proses request, baik dalam bentuk POST maupun GET.

Dalam contoh kasus ini, kita akan membuat sistem login seperti yang ditunjukkan oleh Gambar.1 dibawah ini :

Gambar.1

Seperti yang terlihat pada Gambar.1, user harus memasukkan username dan password. Pembuatan form login menggunakan Bootstrap.

Jika username dan password sesuai dengan data yang berada di database, maka user tersebut berhak masuk ke halaman berikutnya seperti yang ditunjukkan oleh Gambar.2 dibawah ini :

Gambar.2

Pada Gambar.2 akan ditampilkan nama user "Welcome ilmudetil" dan juga menampilkan icon profile dari ilmudetil.

Langkah-langkah

1. Buatlah database yang diberiname dtc

Pada database dtc terdapat 4 field (idm username, password, image). Field image ini untuk menyimpan gambar dari masing-masing user.

CREATE TABLE IF NOT EXISTS `login` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) NOT NULL,
  `password` varchar(255) NOT NULL,
  `image` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

INSERT INTO `login` (`id`, `username`, `password`, `image`) VALUES
(1, 'ilmudetil', 'ilmudetil', 'ilmudetil.png'),
(2, 'android', 'android', 'android.png');

2. Membuat file connection.php

File ini bertujuan untuk membangun komunikasi dengan database.Dalam contoh ini kita menggunakan database MySQL.

<?php
$connection = mysqli_connect("localhost","root","","dtc");
?>

3. Membuat file index.php

<?php
include('login.php'); 
if(isset($_SESSION['login_user']))
{
	header("location: profile.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Login</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/form-elements.css">
<link rel="stylesheet" href="assets/css/style.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.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
 <!-- Top content -->
        <div class="top-content">
        	<div class="inner-bg">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-6 col-sm-offset-3 form-box">
                        	<div class="form-top">
                        		<div class="form-top-left">
                        			<h3>Login to our site</h3>
                            		<p>Enter your username and password to log on:</p>
                        		</div>
                        		<div class="form-top-right">
                        			<i class="fa fa-key"></i>
                        		</div>
                            </div>
                            <div class="form-bottom">
			                    <form role="form" action="" method="post" class="login-form">
			                    	<div class="form-group">
			                    		<label class="sr-only" for="form-username">Username</label>
			                        	<input type="text" name="username" placeholder="Username..." class="form-username form-control" id="form-username">
			                        </div>
			                        <div class="form-group">
			                        	<label class="sr-only" for="form-password">Password</label>
			                        	<input type="password" name="password" placeholder="Password..." class="form-password form-control" id="form-password">
			                        </div>
			                        <button type="submit" name="submit" class="btn">Sign in!</button>
									<?php echo $error; ?>
			                    </form>
		                    </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Javascript -->
        <script src="assets/js/jquery-1.11.1.min.js"></script>
        <script src="assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.backstretch.min.js"></script>
        <script src="assets/js/scripts.js"></script>
        
        <!--[if lt IE 10]>
            <script src="assets/js/placeholder.js"></script>
        <![endif]-->
</body>
</html>

4. Membuat file login.php

<?php
include "connection.php";
session_start(); 
$error=''; 
if (isset($_POST['submit'])) 
{
	if (empty($_POST['username']) || empty($_POST['password'])) 
	{
		$error = "Username or Password is invalid";
	}
	else
	{

		$username=$_POST['username'];
		$password=$_POST['password'];
		// Untuk melindungi MySQL injection 
		$username = stripslashes($username);
		$password = stripslashes($password);
		$username = mysqli_real_escape_string($connection,$username);
		$password = mysqli_real_escape_string($connection,$password);

		$query = mysqli_query($connection,"select * from login where password='$password' AND username='$username'");
		$rows = mysqli_num_rows($query);
		if ($rows == 1)
		{
			$_SESSION['login_user']=$username; 
			header("location: profile.php"); 
		} 
		else
		{
			$error = "Username or Password is invalid";
		}
		mysqli_close($connection); 
	}

5. Membuat file session.php

<?php
include "connection.php";

session_start();// Starting Session
// Menyimpan Session
$user_check=$_SESSION['login_user'];

$ses_sql=mysqli_query("select username from login where username='$user_check'", $connection);
$row = mysql_fetch_assoc($ses_sql);
$login_session =$row['username'];

if(!isset($login_session)){
mysqli_close($connection); 
header('Location: index.php'); 
}
?>

6. Membuat file profile.php

<?php
include('session.php');
?>
<!DOCTYPE html>
<html>
<head>
<title>Your Home Page</title>

		<meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Admin DashBoard</title>

        <!-- CSS -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
        <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
		
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">

                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>

            </button>
            <a class="navbar-brand" href="#">
			   <?php
                echo "<img style='height: 30px; margin-top: -5px;' src='assets/img/icon/$login_session.png' class='img-circle'>";
				?>
				<div class="pull-left">
				<p style="margin: -25px 40px 10px;">Welcome <i><?php echo $login_session; ?></i></p>
				</div>
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
				<li></i></li>
                <li><a href="logout.php">Logout</a></li>
            </ul>
        </div>
    </div>
</nav>
</body>
</html>

7. Membuat file logout.php

<?php
session_start();
if(session_destroy()) 
{
header("Location: index.php"); 
}
?>

DOWNLOAD