Categories
PHP

PHP Login Form Menggunakan Bootsrap – Mirip Google

php login form

Setiap system pasti mempunyai form login dimana admin, bisa melakukan login dan masuk kedalam system, Pada kesempatan kali ini kami akan share PHP login form yang telah kami buat menggunakan Bootstrap, Form yang akan kami share ini sangat mirip dengan login form yang dimiliki oleh google.

Langsung saja mari kita masuk kedalam pembahasan inti.

1. 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;

2. Buat file dengan nama config.php file ini sebagai koneksi kedatabase.

<?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();
}
?>

3. Buat file dengan nama index.php file ini berfungsi sebagai form login dalam system ini.

<?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>

3. Terakhir, buat file dengan nama dashbord.php file ini berfungsi sebagai file yang akan dituju ketika pemilik system berhasil melakukan login.

<?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="#">jasawebsite</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>

Kalian bisa mendownload filenya langsung dengan menekan button download dibawah ini.

Sekian share kali ini, silahkan tinggalkan komentar dan mulai berdiskusi dengan kami.

Leave a Reply

Your email address will not be published. Required fields are marked *