ribbon iwa

Login Form Bootstrap Mirip Google Menggunakan PHP MySQL

Kali ini kami akan share login form bootsrap mirip google menggunakan PHP MySQL. Form login ini dibuat menggunakan bootsrap 3. Form login mirip google ini akan kami hubungkan menggunakan database.



Ada beberapa yang kalian persiapkan sebelum memulainya, di mempersiapkan database yang akan digunakan, buat database dengan nama onan kemudian masukkan struktur database dibawah ini.

 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


CREATE TABLE `admin` (
  `id_admin` int(11) NOT NULL,
  `username` varchar(30) COLLATE utf8_unicode_ci NOT NULL,
  `password` varchar(200) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


INSERT INTO `admin` (`id_admin`, `username`, `password`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3');


ALTER TABLE `admin`
  ADD PRIMARY KEY (`id_admin`);


ALTER TABLE `admin`
  MODIFY `id_admin` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;
COMMIT;
 

Berikutnya buat file dengan nama config.php fungsinya adalah untuk koneksi dengan database.

 <?php

define('DB_HOST', 'localhost');
define('DB_USER','root');
define('DB_PASS' ,'');
define('DB_NAME', 'onan');
$con = mysqli_connect(DB_HOST,DB_USER,DB_PASS,DB_NAME);

// Check connection

if (mysqli_connect_errno())
{
 echo "Failed to connect to MySQL: " . mysqli_connect_error();
}
?> 

Selanjutnya buat file dengan nama index.php file ini merupakan form login yang dibuat menggunakan boostrap .

 <?php session_start();
error_reporting(0);
include("config.php");
if(isset($_POST['submit'])) {
  $_SESSION['submit']='';
}
if(isset($_POST['submit']))
{

    $username=$_POST['username'];
    $password=md5($_POST['password']);
    $ret=mysqli_query($con,"SELECT * FROM admin WHERE username='$username' and password='$password'");
    $num=mysqli_fetch_array($ret);
    if($num>0)
    {
$extra="dashbord.php";//
$_SESSION['alogin']=$_POST['username'];
$_SESSION['id']=$num['id'];
$host=$_SERVER['HTTP_HOST'];
$uri=rtrim(dirname($_SERVER['PHP_SELF']),'/\\');
header("location:http://$host$uri/$extra");
exit();
}
}

?>

<!DOCTYPE HTML>
<html>
<head>
<title>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>

<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"></p>
            <form class="form-signin" action="" method="POST">
             <input class="form-control" id="inputEmail" name="username" type="text" placeholder="Email" autofocus>
                <input class="form-control" type="password" id="inputPassword" name="password" placeholder="Password">
                <br>
                <button class="btn btn-lg btn-primary btn-block btn-signin" type="submit"  name="submit">Sign in</button>
            </form>
            
        </div>
</div>

</body>
</html> 

Terakhir buat file dengan nama dashbord.php file ini berfungsi sebgaai form yang akan dituju ketika admin berhasil melakukan login kedalam sistem.

 <?php session_start();
include('config.php');
if(strlen($_SESSION['alogin'])==0)
{ 
  header('location:index.php');
}

?>
<!DOCTYPE html>
<html>
<head>
 <title>Welcome</title>
 <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 <script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
 <nav class="navbar navbar-default navbar-static-top">
  <div class="container-fluid">
   <div class="navbar-header">
    <a class="navbar-brand" href="#">TutorialsWB</a>
   </div>
  </div>
 </nav>
 <div class="container">
  <div class="row">
     <p>Welcome !!!</p>
  <p><a href="index.php">Logout</a></p>
    </div>
  </div>
</body>
</html> 

Sekian share singkat di atas, silahkan download filenya langsung dibawah ini, untuk langsung mencoba dan memodifikasi sesuai dengan yang anda perlukan.


Silahkan tinggalkan komentar dibawah jika tutorial yang kami share di atas belum lengkap, kalian juga bisa request post apa saja yang ingin kami bahas dalam website ini.


SUBSCRIBE TO OUR NEWSLETTER

close