contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Login Form With Bootstrap PHP MYSQL

Posted in Tutorial Bootstrap Life at 21 Februari 2018 With 0 Comments

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

login form with bootstrap php mysql

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, 'admin@system.com', '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

Diskusi