Membuat login dengan php bootstrap

Question

Home
Tutorial Bootstrap
Login Form With Bootstrap PHP MYSQL

Selamat Malam sahabat suckittrees... happy and ceep coding... Kali ini admin akan share artile Membuat Login Dengan Bootstrap PHP MYSQl,, Langsung saja ya .. kita membuat Form login nya

Pertama Buat database dengan nama db_testlogin , dan paste kan di tab sql , code berikut ini :

 CREATE TABLE `user_login` (
  `id` int(20) NOT NULL,
  `email` varchar(20) NOT NULL,
  `password` varchar(20) NOT NULL,
  `full_name` varchar(20) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;INSERT INTO `user_login` (`id`, `email`, `password`, `full_name`) VALUES
(1, '', 'admin123', 'Admin 01');
ALTER TABLE `user_login`
  ADD PRIMARY KEY (`id`);
ALTER TABLE `user_login`
  MODIFY `id` int(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

Ke-dua buat file koneksi dengan nama db_con.php

<?php 
$hostname = "localhost";
$username = "root";
$password = "";
$database = "db_logintest";mysql_connect($hostname,$username,$password) or die ("connection failed");
mysql_select_db($database) or die ("error connect database");
?>

Ke-tiga kita buat Login.php , disini kita membutuhkan file css ya.. sudah saya include di file download ko , untuk script login.php, berikut codenya ;

<!DOCTYPE HTML>
<html>
<head>
<title>Bootstrap Login Suckittrees.Com</title><!-- bootstrap-3.3.7 -->
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!-- JQUERY -->
<script type="text/javascript" language="javascript" src="jquery/jquery.js"></script>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all"/>
<script type="text/javascript" language="javascript" src="style/style.js"></script>



</head>
<body>
<div class="container">
        <div class="card card-container">
            <img id="profile-img" class="profile-img-card" src="img/avatar_2x.png" />
            <p id="profile-name" class="profile-name-card">Suckittrees.Com</p>
            <form class="form-signin" action="" method="POST">
                <span id="reauth-email" class="reauth-email"></span>
                <input type="email" id="inputEmail" name="email" class="form-control" placeholder="Email address" required autofocus>
                <input type="password" id="inputPassword" name="password" class="form-control" placeholder="Password" required>
                <br>
                <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit"  name="login">Sign in</button>
            </form>
                    </div>
</div>
</body>
</html>
<?php
include "db_con.php";
IF(ISSET($_POST['login'])){
    $email = $_POST['email'];
    $password = $_POST['password'];
        $cek = mysql_num_rows(mysql_query("SELECT * FROM user_login WHERE email='$email' AND password='$password'"));
    $data = mysql_fetch_array(mysql_query("SELECT * FROM user_login WHERE email='$email' AND password='$password'"));
    IF($cek > 0)
    {
                session_start();
        $_SESSION['email'] = $data['email'];
        $_SESSION['name'] = $data['full_name'];
        echo "<script language=\"javascript\">alert(\"welcome \");document.location.href='index.php';</script>";
    }else{
        echo "<script language=\"javascript\">alert(\"Invalid username or password\");document.location.href='login.php';</script>";
    }
}
?>

Ke-empat kita buat file index.php

<?php 
session_start();
IF(ISSET($_SESSION['name'])){
?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Bootstrap Login</title>
<!-- bootstrap-3.3.7 -->
<link rel="stylesheet" href="bootstrap-3.3.7/css/bootstrap.min.css">
<script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
<!-- JQUERY -->
<script type="text/javascript" language="javascript" src="jquery/jquery.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-static-top" role="navigation">
    <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href="index.php">Home </a>
                <a class="navbar-brand" href="#">Navbar 2</a>
                <a class="navbar-brand" href="#">Navbar 3</a>
                <a class="navbar-brand" href="#">Navbar 4</a>
                <a class="navbar-brand pull-right" href="logout.php?destroy"> <span class="glyphicon glyphicon-off"></span> Logout </a>
                <a class="navbar-brand pull-right"><span class="glyphicon glyphicon-user"></span> <?=$_SESSION['name'];?> </a>
            </div>
    </div>



</div>
<div class="container">
<h2>Hallo </h2>
<br>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus, tortor sit amet rhoncus lobortis, 
leo libero suscipit justo, ac tincidunt ligula eros sit amet sem. <br>
Sed lobortis nisl sed diam porttitor, quis lacinia felis lacinia. In urna nulla, consectetur nec nisi vitae, 
laoreet pellentesque augue. Donec feugiat, velit eu imperdiet semper, 
ante sem suscipit nulla, congue suscipit ipsum tellus commodo ipsum. Sed pharetra orci a volutpat faucibus.
</p>
<br>
</div>
</body>
</html>
<?php 
}else{
    echo "<script language=\"javascript\">alert(\"Please login\");document.location.href='login.php';</script>";    
}
?>

Dan Terakhir buat file Logout.php

<?php 
IF(ISSET($_GET['destroy'])){
    session_start();
    session_destroy();
    header('Location:login.php');
}
?>

Download

Artikel Rekomendasi

Artikel Terkait
Admin Panel Bootstrap
Membuat Form Login Responsive Dengan Bootstrap
Pagination dan Pager di Bootstrap
Cara Membuat Pencarian di Modal Bootstrap
Tutorial Edit Data di Modal Bootstrap PHP MYSQLi
Merubah Warna Tooltip di Bootstrap
Membuat Halaman Web Pertama Dengan Bootstrap
Membuat Modal Bootstrap
Cara Menampilkan Bulan dan Tahun di Detepticker Bootstrap
Dasar Memulai untuk Belajar Bootstrap

Diskusi

kode php

Membuat login dengan php bootstrap

Artikel Rekomendasi

Diskusi

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social