Membuat Form Login Dengan Bootstrap Dan PHP

Share this article with your friends

Form login,merupakan salah satu bagian penting dalam sebuah web,yang berfungsi untuk mengakses akun yang sudah terdaftar sebelumnya.

Dalam tutorial ini,di bahas mulai dari pembuatan database dengan menggunakan PHPMyAdmin,membuat sintaks koneksi ke database, mengecek kecocokan form dengan data yang ada pada database,dan membuat desain form login tersebut.

Sebelum mengikitu langkah langkah di bawah ini,di sini saya asumsikan bahawa anda telah memiliki software yang biasa di gunakan menjalankan web server seperi XAMPP dan teks editor seperti Notepad++/Sublime serta anda sudah paham dan dapat menjalankan XAMPP ataupun PHPMyadmin.

Jika anda belum mempunyai XAMPP ataupun teks editor seperti Notepad++,bisa mendownload terlebih dahulu .

Download XAMPP

Download Notepad++

Langkah-langkah membuat form login :

1.Buat databasenya terlebih dahulu di MySQL /PHPMyadmin

Kemudian buat tabelnya untuk menyimpan email dan password nantinya dengan sintaks :

CREATE TABLE user2 (`email` varchar(50) CHARACTER SET utf8 DEFAULT NULL , `password` varchar(50) CHARACTER SET utf8 DEFAULT NULL);

2.Kemudian coba masukkan email dengan password ke dalam database tersebut

insert into user2 value ('zulkifli@gmail.com','12345');

kemudian cek apakan sudah tersimpan ke dalam database dengan nama tabel user2

3.Setelah membuat database,selanjutnya kita akan mengkoneksikan database yang tadi dibuat dengan menggunakan fungsi PHP.Salin dan simpan script di bawah dengan nama koneksidb.php

<?php
function koneksi_db(){

    $host = "localhost";
     $database = "contohlogin";//sesuaikan nama db kamu
     $user = "root";//sesuaikan usernya, kalau di cpanel usernya ganti juga, biasanya nama user akun cpanel
     $password="";// sesuaikan password kamu, kalau di cpanel ganti juga, biasanya password akun cpanel

     $link = mysql_connect($host,$user,$password);//koneksi ke db
     mysql_select_db($database,$link);//pilih nama db
     if(!$link)
     echo "Error : ".mysql_error();
     return $link;
       }
?>

4.Selanjutnya mendesain tampilan formlogin tersebut dengan menggunakan Bootstrap 3.Salin dan simpan kode di bawah ini dengan nama contohlogin.php

<?php
include("koneksidb.php");
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contoh Login</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap-theme.min.css"></script
</head>

<body>
<hr>
<br>
<div class="container">

        <center><h2>Masukkan Email & Password Anda</h2></center
        <div class="row">
          <div class="col-md-4">
          <form name="login" method="post" action="proseslogin.php">
          <div class="form-group">
           <label for="inputEmail">Email</label>
           <input type="Email" class="form-control" id="inputEmail" placeholder="Email" name="email">
             </div>
<div class="form-group">
     <label for="inputPassword">Password</label>
     <input type="password" class="form-control" id="inputPassword" placeholder="Password" Name="password">

   <button type="submit" class="btn btn-primary">Login</button>
   </form>
    </div>
    </div>
    </div>
   </div>
    </body>
    </html>

Tampilannya seperti gambar di bawah :

5.Kemudian kita buat file /script yang nantinya akan memproses /mengecek kecocokan isi form dengan data yang ada pada database

<?php
session_start();
include("koneksidb.php");
$link=koneksi_db();
$email = $_POST['email'];
$password = $_POST['password'];
$cek = mysql_query("SELECT * FROM user2 WHERE email ='$email' AND password ='$password'");
if(mysql_num_rows($cek)==1){//jika berhasil akan bernilai 1

header("location:home2.php"); //jika berhasil akan diarahkan ke home2
}
else
{
header("location:proseslogin.php");
}
?>

6.langkah selanjutnya adalah membuat tampilan halaman yang menyatakan bahwa proses login telah berhasil.Salin dan simpan dengan nama home2.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Contoh Login</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/bootstrap-theme.min.css"></script
</head>
<body>
<div class="row">
       <div class="col-md-4">
       </div>
             <div class="col-md-4">
                         <center> <h2>BERHASIL LOGIN</h2>

</div>
<center>
</div>
</body>
</html>

Berikut tampilan jika berhasil login

Sekin postingan saya tentang bagaiman cara membuat dan mendesain form login menggunakan Bootstrap 3 dan PHP ,semoga bermanfaat….

Membuat Form Login Dengan Bootstrap Dan PHP

0 Response to "Membuat Form Login Dengan Bootstrap Dan PHP"