Paket Web Aplikasi

Membuat Halaman Login Sederhana Dengan PHP, MySQL dan Bootstrap 3



Kali ini saya akan memberikan tutorial untuk membuat halaman login dengan PHP, MySQL dan Bootstrap 3. Halaman login pada dasarnya banyak kita temui di internet contoh sosial media bahkan sebelum kita akan masuk ke akun email kita harus login terlebih dahulu, tujuanya agar hanya benar benar si pemilik akun tersebutlah yang ber hak membuka akunnya sendiri. Untuk membuat halaman login itu sendiri pertama tama kita buat databasenya dahulu untuk membuatnya silahkan copas code di bawah ini kemudian ke phpmyadmin.

  • Pertama membuat database login

-- phpMyAdmin SQL Dump
-- version 2.11.7
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Apr 08, 2015 at 02:48 AM
-- Server version: 5.0.51
-- PHP Version: 5.2.6

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `login`
--

-- --------------------------------------------------------

--
-- Table structure for table `admin`
--

CREATE TABLE IF NOT EXISTS `admin` (
  `user_id` int(11) NOT NULL auto_increment,
  `username` varchar(30) NOT NULL,
  `password` varchar(30) NOT NULL,
  `fullname` varchar(30) NOT NULL,
  PRIMARY KEY  (`user_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `admin`
--

INSERT INTO `admin` (`user_id`, `username`, `password`, `fullname`) VALUES
(1, 'hakko', 'd3d1cf96197c803f1b5331d3a236fc', 'hakko bio richard'),
(2, 'hakko', 'hakko123456', 'hakko bio richard'),
(3, 'admin', '21232f297a57a5a743894a0e4a801f', 'hakko');


  • Setelah membuat database maka langkah selanjutnya adalah membuat halaman form loginnya, silahkan copas kode di bawah ini kemudian simpan dalam folder (nama folder terserah anda) kemudian simpan dengan nama index.html

<!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.0">
    <meta name="description" content="Halaman Login Sederhana">
    <meta name="author" content="Hakko Bio Richard">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Login Sederhana dengan PHP, MySQL dan Bootstrap 3</title>

    <!-- Bootstrap core CSS -->
    <link href="dist/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="signin.css" rel="stylesheet">

  </head>

  <body>

    <div class="container">

      <form class="form-signin" role="form" method="post" action="proseslogin.php">
        <center><h2 class="form-signin-heading">» <span class="glyphicon glyphicon-lock"></span> Please sign in «</h2></center>
        <input type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
        <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
        <label class="checkbox">
          <input type="checkbox" value="remember-me"> Remember me
        </label>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </form>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
  </body>
</html>

  • Kemudian buat file koneksi untuk menghubungkan ke database MySQL, silahkan copas code berikut kemudian simpan dengan nama koneksi.php

<?php

mysql_connect("localhost","root","");
mysql_select_db("login");

?>

  • Bila sudah membuat file koneksi silahkan lanjut dengan membuat file proseslogin.php, copas kode di bawah ini

<?php
include ("conn.php");
date_default_timezone_set('Asia/Jakarta');

session_start();

$username = $_POST['username'];
$password = $_POST['password'];

$username = mysql_real_escape_string($username);
$password = mysql_real_escape_string($password);

if (empty($username) && empty($password)) {
 header('location:index.html?error1');
 break;
} else if (empty($username)) {
 header('location:index.html?error=2');
 break;
} else if (empty($password)) {
 header('location:index.html?error=3');
 break;
}

$q = mysql_query("select * from admin where username='$username' and password='$password'");
$row = mysql_fetch_array ($q);

if (mysql_num_rows($q) == 1) {
 $_SESSION['username'] = $username;
 $_SESSION['fullname'] = $row['fullname']; 

 header('location:login/index.php');
} else {
 header('location:index.html?error=4');
}
?>

  • setelah membuat file proseslogin.php,  maka selanjutnya kita membuat file index.php yang berada di folder admin, silahkan copas kode berikut kemudian simpan dengan nama index.php.

<?php 
session_start();
if (empty($_SESSION['username'])){
 header('location:../index.html'); 
} else {
 include "../conn.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.0">
    <meta name="description" content="Halaman Login Sederhana">
    <meta name="author" content="Hakko Bio Richard">
    <link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">

    <title>Login Sederhana dengan PHP, MySQL dan Bootstrap 3</title>

    <!-- Bootstrap core CSS -->
    <link href="../dist/css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="navbar-fixed-top.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy this line! -->
    <!--[if lt IE 9]><script src="../../docs-assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[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>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <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="#">Login Admin</a>
        </div>
        <div class="navbar-collapse collapse">
          <!--<ul class="nav navbar-nav">
            <li class="active"><a href="#">Admin</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>-->
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#" class="active"><span class="glyphicon glyphicon-user"></span> <?php
              echo $_SESSION['fullname'];
               ?></a></li>      
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
<?php
$timeout = 10; // Set timeout minutes
$logout_redirect_url = "../index.html"; // Set logout URL

$timeout = $timeout * 60; // Converts minutes to seconds
if (isset($_SESSION['start_time'])) {
    $elapsed_time = time() - $_SESSION['start_time'];
    if ($elapsed_time >= $timeout) {
        session_destroy();
        echo "<script>alert('Session Anda Telah Habis!'); window.location = '$logout_redirect_url'</script>";
    }
}
$_SESSION['start_time'] = time();
?>
    <div class="container">

      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Selamat, Anda Berhasil Login.!</h1>
        <p>Untuk tutorial yang lain silahkan kunjungi <a href="http://www.hakkoblogs.com">Hakko Blog's</a> , ikuti selalu update terbaru dari <a href="http://www.hakkoblogs.com">Hakko Blog's</a> dengan subscribe email anda.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="../logout.php" onclick="return confirm('Apakah anda akan keluar?');">Keluar »</a>
        </p>
      </div>

    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="../../dist/js/bootstrap.min.js"></script>
  </body>
</html>
<?php } ?>

  • Kemudian membuat file logout.php, yang berfungsi menghapus session kita agar akun lebih secure, untuk membuat file logout tersebut silahkan copas kode di bawah ini.


<?php
session_start();
session_destroy(); 

    echo "<script>alert('Anda telah berhasil keluar.'); window.location = 'index.html'</script>";
?>

Bagaimana.? cukup mudah bukan untuk membuat form login dengan PHP, MySQL dan Bootstrap 3. Untuk souce code lengkapnya bisa di lihat di sini DOWNLOAD , semoga tutorial yang saya berikan ini bisa bermanfaat bagi saya khususnya dan pembaca umumnya.

Happy Coding & Programming


Password : www.hakkoblogs.com
Previous
Next Post »

Komentar