TUTORIAL MEMBUAT FORM LOGIN DENGAN PHP DAN BOOTSTRAP

PART 1 - TUTORIAL MEMBUAT FORM LOGIN DENGAN PHP DAN BOOTSTRAP

Tutorial membuat form login dengan php dan bootstrap menjelaskan bagaimana Develindo cara untuk membuat form login dengan menggunakan template bootstrap yang dimodifikasi sendiri, beserta validasi menggunakan PHP.

Sebelum memulai tutorial ini silahkan anda download sebuah komponen yang sudah saya siapkan yang berisi komponen bootstrap versi 3.3.7. Download file yang sudah saya siapkan dan ekstrak file tersebut dan simpan pada folder C://Xampp/Htdoc/ pada laptop anda.

DOWNLOAD MATERIAL FILE

Komponen yang sudah saya siapkan berisi beberapa folder dan beberapa file yang wajib ada untuk memulai tutorial part 1 ini, dan akan digunakan untuk tutorial seterusnya hingga selesai.

Susunan Folder tersebut seperti ini :

Pada folder css, fonts dan js sudah terdapat file bawaan yang sudah saya siapkan berisi file dari bootstrap.

Langkah 1 : Buat Database di phpmyadmin dengan nama Tutorial_Ecommerce

Buat database baru dengan nama Tutorial_Ecommerce

Jika anda belum dapat membuat database lihat video ini....Tutorial Membuat Database di phpmyadmin

Buat Tabel dengan nama tb_admin pada database yang telah dibuat.

Struktur Tabel pada tb_admin seperti dibawah ini

Klik insert pada menu tab diatas dan isikan 1 data admin seperti berikut

Perhatikan pada field pass_admin pada bagian Function pilih MD5 seperti pada gambar, berfungsi untuk mengenkripsi password. Setelah itu tekan tombol GO.

Buat Tabel dengan nama tb_identitas

Tb_identitas ini untuk konfigurasi nama website, deskripsi, keyword, author dan footer web yang dapat dimodifikasi secara dinamis dari halaman admin nantinya.

Struktur tb_identitas seperti dibawah ini

Setelah membuat Tabel, silahkan klik insert pada isikan Tabel tersebut, misalnya :

Klik GO untuk menyimpan data yang telah anda inputkan, data dapat disesuaikan dengan keinginan anda masing masing.

Langkah 2 : Buat file Koneksi

File koneksi untuk menghubungkan / mengkoneksikan server localhost dengan script php.

Buka notepad++ anda dan ketikkan Script berikut dan simpan pada Folder Relasi yang terdapat di Folder Tutorial Ecommerce > assets > relasi

<?php
//set time zone location sesuai negara, jadikan Asia Jakarta
date_default_timezone_set('Asia/Jakarta');

//**************************start koneksi ***************************//

//set koneksi ke server sesuai host, user, password dan database
$server="localhost";
$user="root";
$pass="";
$database="tutorial_ecommerce";

//koneksikan ke server
$conect=mysqli_connect($server,$user,$pass,$database) or die('Error Connection Network');

// **************************end koneksi *********************************//

//*********************pengaturan lainnya*****************************//

//buat parameter untuk mempercepat penulisan url misal https://www.develindo.com atau http://localhost/folderwebanda

$hostname="http://localhost/Tutorial Ecommerce";

?>

Langkah 3 : Buat file index.php

Buka notepad++ anda dan ketikkan script dibawah ini, simpan pada Folder adminweb dengan nama index.php.

<?php
//abaikan error yang muncul pada browser
error_reporting(0);
//sesi dimulai
session_start();
//panggil koneksi.php untuk menghubungkan ke database
include "../assets/relasi/koneksi.php";

//jika sesi sudah admin (sudah pernah login)  maka akan  di direct ke halaman home.php
if(isset($_SESSION["data_admin"]))
{
 header("location:home.php");
}

// function input terdapat di file koneksi.php

 $user = mysqli_real_escape_string($conect, $_POST['email_admin']);
 $pass = mysqli_real_escape_string($conect, $_POST['password_admin']);
 $pass_md5= md5($pass);

  if(isset($_POST['login'])){
    if($user == ""){
    $er_email="<div class='alert alert-warning alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span></button>
    <strong>Username Kosong !</strong> <br> Username wajib diisi</div>";
    }
    elseif($pass == ""){
    $er_pass="<div class='alert alert-warning alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span></button>
    <strong>Password Kosong !</strong> <br> Password Wajib diisi</div>";
    }
    else{
    //cek apakah username terdaftar atau tidak di tb_admin
    $sql_cek=mysqli_query($conect, "SELECT * FROM tb_admin where email_admin='$user' and pass_admin='$pass_md5'");
    $cek_admin=mysqli_num_rows($sql_cek);
    if($cek_admin == "0"){
        //jika username dan password tidak terdaftar di tb_admin
    $er_email="<div class='alert alert-danger alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span>
    </button><strong>Login Gagal !</strong> <br>Username dan Password tidak valid</div>";
    }
    else{
        //jika username dan password terdaftar di tb_admin maka akan menuju halaman home.php
    $_SESSION['data_admin']=$user;
    echo "<script>alert('Welcome Admin !');document.location='home.php'</script>";

     }
   }
 }

$iweb=mysqli_fetch_array(mysqli_query($conect, "select * from tb_identitas where id_identitas='1'"));

?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="<?php echo $iweb['katakunci'];?>">
        <meta name="description" content="<?php echo $iweb['deskripsi'];?>" />
        <meta name="author" content="<?php echo $iweb['pembuat'];?>">
        <title><?php echo $iweb['nama_website'];?></title>
        <link rel="Shortcut Icon" href="<?php echo $hostname;?>/assets/images/logo/<?php echo $iweb['logo'];?>" type="image/x-icon" />
        <!-- Bootstrap core CSS -->
        <link href="<?php echo $hostname;?>/assets/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles template ini-->
        <link href="<?php echo $hostname;?>/assets/css/style_admin.css" rel="stylesheet">
        <!-- Custom Fonts Awesome-->
        <link href="<?php echo $hostname;?>/assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <div class="container"> <!-- start container -->
         <div class="row"><!-- start row -->
              <div class="col-lg-12"><!-- start col lg 12-->
                   <div class="login"><!-- start class login -->
                        <h1><i class="fa fa-key fa-fw"></i> LOGIN ADMIN</h1>
                   <hr>

                   <!-- start form login -->
                   <form action="" method="post">
                   <div class="form-group"><!--start form-group-->
                        <label>Username</label>
                        <div class="input-group input-group-sm"><span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                        <input type="text" name="email_admin" placeholder="Username" class="form-control" maxlength="40" value="<?php echo $_POST['email_admin'];?>" autofocus>
                        </div>
                   </div><!--/form-group-->

                   <?php echo $er_email;?>

                   <div class="form-group"><!--start form-group-->
                        <label>Password</label>
                        <div class="input-group  input-group-sm">
                        <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span><input id="pass1" type="password" name="password_admin" placeholder="Password" class="form-control" value="<?php echo $_POST['Password_admin'];?>" maxlength="15">
                        </div>
                        </div><!--/form-group-->
                   <?php echo $er_pass;?>

                   <hr>
                   <button class="btn btn-primary btn-sm btn-block" type="submit" name="login">Log In</button>
                   </form>
                   <!-- end form login -->
		</div><!-- end class login -->
	</div><!-- end col lg 12 -->
 </div><!-- end row -->
</div><!-- end container -->

        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="<?php echo $hostname;?>/assets/js/jquery.min.js"></script>
        <script src="<?php echo $hostname;?>/assets/js/bootstrap.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="<?php echo $hostname;?>/assets/js/ie10-viewport-bug-workaround.js"></script>
    </body>
</html>

Script diatas sudah beserta penjelasan setiap barisnya, jika anda bingung silahkan ditanyakan.

Setelah anda simpan, coba jalankan pada browser anda

http://localhost/Tutorial Ecommerce

Sebelumnya anda harus menyakan Xampp yah ...

Hasilnya seperti ini.

Form login yang tampil masih belum sesuai, Kita perlu memodifikasi tampilan dengan menambahkan link CSS external atau internal untuk mempercantik tampilan tersebut.

Buka notepad++ anda , ketikkan script berikut dan simpan dengan nama style_admin.css dan simpan pada folder css yang terdapat di
C://Xampp/Htdoc/Tutorial Ecommerce/assets/css

/*code template css*/


/*start form login*/

.login{
      width:350px;
      min-height:350px;
      border:#CCC solid 1px;
      background:#f9f9f9;
      padding:20px;
      margin:20px auto;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
}
.login h1{
        font-size:28px;
        color:#000;
        text-align:center;
}


/*end form login*/

Simpan file dan refresh kembali browser anda maka tampilan akan berubah seperti ini

Anda dapat memodifikasi tampilan sesuai yang anda inginkan, misalnya anda ingin merubah background warna abu abu pada form menjadi merah, biru atau hijau.

Untuk merubah background lihat pada file style_admin.css

Hasil perubahannya seperti ini

Setelah anda mempercantik tampilan sekarang coba anda jalankan form tersebut apakah berfungsi untuk login atau tidak.

Validasi form yang diterapkan adalah

Jika kolom username kosong dan tekan tombol login maka muncul notifikasi

Muncul notifikasi Username Kosong ! username wajib diisi.

Jika Username diisi dan password kosong maka validasinya seperti ini

Muncul Notifikasi Password Kosong ! password wajib diisi

Jika Kombinasi Username dan password salah maka akan muncul validasi seperti ini

Muncul notifikasi login gagal ! usernam dan password tidak valid

Jika Kombinasi username dan password benar maka akan menuju halaman home admin

Muncul notifikasi Welcome Admin (saya menggunakan browser Mozilla) Jika klik OK maka akan di direct ke halaman yang dituju.

Klik OK maka muncul seperti ini

Halaman home.php memang belum kita buat yah... jadi memang belum ada, mak tampilannya seperti ini. Bukan error, tetapi karna file tidak ada.

Bagian ini akan dibahas di tutorial berikutnya. Data dari tb_identitas yang sudah dibuat akan tampil pada Title Tab Browser.

Jika anda klik kanan pada tampilan lalu klik view page source code

Maka muncul halaman yang berisi kode HTML web kita seperti ini

Baris yang diberi kotak merah adalah meta keyword, description, author dan title yang menampilkan data dari tb_identitas yang sudah anda inputkan

Pilihan Style Login Admin

Silahkan anda pilih tampilan login yang akan anda gunakan, disini terdapat beberapa pilihan style login, anda masih dapat memodifikasinya.

Pilihan Style 1

index.php

<?php
//abaikan error yang muncul pada browser
error_reporting(0);
//sesi dimulai
session_start();
//panggil koneksi.php untuk menghubungkan ke database
include "../assets/relasi/koneksi.php";

//jika sesi sudah admin (sudah pernah login)  maka akan  di direct ke halaman home.php
if(isset($_SESSION["data_admin"]))
{
 header("location:home.php");
}

// function input terdapat di file koneksi.php

 $user = mysqli_real_escape_string($conect, $_POST['email_admin']);
 $pass = mysqli_real_escape_string($conect, $_POST['password_admin']);
 $pass_md5= md5($pass);

  if(isset($_POST['login'])){
    if($user == ""){
    $er_email="<div class='alert alert-warning alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span></button>
    <strong>Username Kosong !</strong> <br> Username wajib diisi</div>";
    }
    elseif($pass == ""){
    $er_pass="<div class='alert alert-warning alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span></button>
    <strong>Password Kosong !</strong> <br> Password Wajib diisi</div>";
    }
    else{
    //cek apakah username terdaftar atau tidak di tb_admin
    $sql_cek=mysqli_query($conect, "SELECT * FROM tb_admin where email_admin='$user' and pass_admin='$pass_md5'");
    $cek_admin=mysqli_num_rows($sql_cek);
    if($cek_admin == "0"){
        //jika username dan password tidak terdaftar di tb_admin
    $er_email="<div class='alert alert-danger alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span>
    </button><strong>Login Gagal !</strong> <br>Username dan Password tidak valid</div>";
    }
    else{
        //jika username dan password terdaftar di tb_admin maka akan menuju halaman home.php
    $_SESSION['data_admin']=$user;
    echo "<script>alert('Welcome Admin !');document.location='home.php'</script>";

     }
   }
 }

$iweb=mysqli_fetch_array(mysqli_query($conect, "select * from tb_identitas where id_identitas='1'"));

?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="<?php echo $iweb['katakunci'];?>">
        <meta name="description" content="<?php echo $iweb['deskripsi'];?>" />
        <meta name="author" content="<?php echo $iweb['pembuat'];?>">
        <title><?php echo $iweb['nama_website'];?></title>
        <link rel="Shortcut Icon" href="<?php echo $hostname;?>/assets/images/logo/<?php echo $iweb['logo'];?>" type="image/x-icon" />
        <!-- Bootstrap core CSS -->
        <link href="<?php echo $hostname;?>/assets/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles template ini-->
        <link href="<?php echo $hostname;?>/assets/css/style_admin.css" rel="stylesheet">
        <!-- Custom Fonts Awesome-->
        <link href="<?php echo $hostname;?>/assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <div class="container"> <!-- start container -->
         <div class="row"><!-- start row -->
              <div class="col-lg-12"><!-- start col lg 12-->
                   <div class="login"><!-- start class login -->
                        <h1><i class="fa fa-key fa-fw"></i> LOGIN ADMIN</h1>
                   <hr>

                   <!-- start form login -->
                   <form action="" method="post">
                   <div class="form-group"><!--start form-group-->
                        <label>Username</label>
                        <div class="input-group input-group-sm"><span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                        <input type="text" name="email_admin" placeholder="Username" class="form-control" maxlength="40" value="<?php echo $_POST['email_admin'];?>" autofocus>
                        </div>
                   </div><!--/form-group-->

                   <?php echo $er_email;?>

                   <div class="form-group"><!--start form-group-->
                        <label>Password</label>
                        <div class="input-group  input-group-sm">
                        <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span><input id="pass1" type="password" name="password_admin" placeholder="Password" class="form-control" value="<?php echo $_POST['Password_admin'];?>" maxlength="15">
                        </div>
                        </div><!--/form-group-->
                   <?php echo $er_pass;?>

                   <hr>
                   <button class="btn btn-primary btn-sm btn-block" type="submit" name="login">Log In</button>
                   </form>
                   <!-- end form login -->
		</div><!-- end class login -->
	</div><!-- end col lg 12 -->
 </div><!-- end row -->
</div><!-- end container -->

        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="<?php echo $hostname;?>/assets/js/jquery.min.js"></script>
        <script src="<?php echo $hostname;?>/assets/js/bootstrap.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="<?php echo $hostname;?>/assets/js/ie10-viewport-bug-workaround.js"></script>
    </body>
</html>

style_admin.css

/*code template css*/


/*start form login*/

.login{
      width:350px;
      min-height:350px;
      border:#CCC solid 1px;
      background:#f9f9f9;
      padding:20px;
      margin:20px auto;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
}
.login h1{
        font-size:28px;
        color:#000;
        text-align:center;
}


/*end form login*/

Hasil dari style 1 seperti ini

Pilihan Style 2

index.php

<?php
//abaikan error yang muncul pada browser
error_reporting(0);
//sesi dimulai
session_start();
//panggil koneksi.php untuk menghubungkan ke database
include "../assets/relasi/koneksi.php";

//jika sesi sudah admin (sudah pernah login)  maka akan  di direct ke halaman home.php
if(isset($_SESSION["data_admin"]))
{
 header("location:home.php");
}

 $user = mysqli_real_escape_string($conect, $_POST['email_admin']);
 $pass = mysqli_real_escape_string($conect, $_POST['password_admin']);
 $pass_md5= md5($pass);

  if(isset($_POST['login'])){
    if($user == ""){
    $er_email="<div class='alert alert-warning alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span></button>
    <strong>Username Kosong !</strong> <br> Username wajib diisi</div>";
    }
    elseif($pass == ""){
    $er_pass="<div class='alert alert-warning alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span></button>
    <strong>Password Kosong !</strong> <br> Password Wajib diisi</div>";
    }
    else{
    //cek apakah username terdaftar atau tidak di tb_admin
    $sql_cek=mysqli_query($conect, "SELECT * FROM tb_admin where email_admin='$user' and pass_admin='$pass_md5'");
    $cek_admin=mysqli_num_rows($sql_cek);
    if($cek_admin == "0"){
        //jika username dan password tidak terdaftar di tb_admin
    $er_email="<div class='alert alert-danger alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span>
    </button><strong>Login Gagal !</strong> <br>Username dan Password tidak valid</div>";
    }
    else{
        //jika username dan password terdaftar di tb_admin maka akan menuju halaman home.php
    $_SESSION['data_admin']=$user;
    echo "<script>alert('Welcome Admin !');document.location='home.php'</script>";

     }
   }
 }

$iweb=mysqli_fetch_array(mysqli_query($conect, "select * from tb_identitas where id_identitas='1'"));

?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="<?php echo $iweb['katakunci'];?>">
        <meta name="description" content="<?php echo $iweb['deskripsi'];?>" />
        <meta name="author" content="<?php echo $iweb['pembuat'];?>">
        <title><?php echo $iweb['nama_website'];?></title>
        <link rel="Shortcut Icon" href="<?php echo $hostname;?>/assets/images/logo/<?php echo $iweb['logo'];?>" type="image/x-icon" />
        <!-- Bootstrap core CSS -->
        <link href="<?php echo $hostname;?>/assets/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles template ini-->
        <link href="<?php echo $hostname;?>/assets/css/style_admin.css" rel="stylesheet">
        <!-- Custom Fonts Awesome-->
        <link href="<?php echo $hostname;?>/assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <div class="container"> <!-- start container -->
         <div class="row"><!-- start row -->
              <div class="col-lg-12"><!-- start col lg 12-->
              <div class="login"><!-- start class login -->
              <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
              <div class="panel panel-default">
                   <!-- panel heading -->
                   <div class="panel-heading">
                   LOGIN ADMIN
                   </div>
                   <!-- /.panel heading -->

                   <!-- panel body -->
                   <div class="panel-body">

                   <!-- start form login -->
                   <form action="" method="post">
                   <div class="form-group"><!--start form-group-->
                        <label>Username</label>
                        <div class="input-group input-group-sm"><span class="input-group-addon"><i class="fa fa-user fa-fw"></i></span>
                        <input type="text" name="email_admin" placeholder="Username" class="form-control" maxlength="40" value="<?php echo $_POST['email_admin'];?>" autofocus>
                        </div>
                   </div><!--/form-group-->

                   <?php echo $er_email;?>

                   <div class="form-group"><!--start form-group-->
                        <label>Password</label>
                        <div class="input-group  input-group-sm">
                        <span class="input-group-addon"><i class="fa fa-lock fa-fw"></i></span><input id="pass1" type="password" name="password_admin" placeholder="Password" class="form-control" value="<?php echo $_POST['Password_admin'];?>" maxlength="15">
                        </div>
                        </div><!--/form-group-->
                   <?php echo $er_pass;?>

                   <hr>
                   <button class="btn btn-sm btn-primary btn-block" type="submit" name="login">Log In</button>
                   </form>
                   <!-- end form login -->
                   </div><!-- end panel body -->

                   <div class="panel-footer">
                   Login Khusus Administrator
                   </div>
              </div>  <!-- end panel-->
          </div> <!-- end class login-->
	</div><!-- end col lg 12 -->
 </div><!-- end row -->
</div><!-- end container -->

        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="<?php echo $hostname;?>/assets/js/jquery.min.js"></script>
        <script src="<?php echo $hostname;?>/assets/js/bootstrap.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="<?php echo $hostname;?>/assets/js/ie10-viewport-bug-workaround.js"></script>
    </body>
</html>

style_admin.css

/*code template css*/


/*start form login*/

.login{
      width:350px;
      min-height:100px;
      margin:20px auto;
}


/*end form login*/

Hasil dari style 2 seperti ini

Pilihan Style 3

index.php

<?php
//abaikan error yang muncul pada browser
error_reporting(0);
//sesi dimulai
session_start();
//panggil koneksi.php untuk menghubungkan ke database
include "../assets/relasi/koneksi.php";

//jika sesi sudah admin (sudah pernah login)  maka akan  di direct ke halaman home.php
if(isset($_SESSION["data_admin"]))
{
 header("location:home.php");
}

 $user = mysqli_real_escape_string($conect, $_POST['email_admin']);
 $pass = mysqli_real_escape_string($conect, $_POST['password_admin']);
 $pass_md5= md5($pass);

  if(isset($_POST['login'])){
    if($user == ""){
    $er_email="<div class='alert alert-warning alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span></button>
    <strong>Username Kosong !</strong> <br> Username wajib diisi</div>";
    }
    elseif($pass == ""){
    $er_pass="<div class='alert alert-warning alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span></button>
    <strong>Password Kosong !</strong> <br> Password Wajib diisi</div>";
    }
    else{
    //cek apakah username terdaftar atau tidak di tb_admin
    $sql_cek=mysqli_query($conect, "SELECT * FROM tb_admin where email_admin='$user' and pass_admin='$pass_md5'");
    $cek_admin=mysqli_num_rows($sql_cek);
    if($cek_admin == "0"){
        //jika username dan password tidak terdaftar di tb_admin
    $er_email="<div class='alert alert-danger alert-dismissible' role='alert'>
    <button type='button' class='close' data-dismiss='alert' aria-label='Close'>
    <span aria-hidden='true'>&times;</span>
    </button><strong>Login Gagal !</strong> <br>Username dan Password tidak valid</div>";
    }
    else{
        //jika username dan password terdaftar di tb_admin maka akan menuju halaman home.php
    $_SESSION['data_admin']=$user;
    echo "<script>alert('Welcome Admin !');document.location='home.php'</script>";

     }
   }
 }

$iweb=mysqli_fetch_array(mysqli_query($conect, "select * from tb_identitas where id_identitas='1'"));

?>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="keywords" content="<?php echo $iweb['katakunci'];?>">
        <meta name="description" content="<?php echo $iweb['deskripsi'];?>" />
        <meta name="author" content="<?php echo $iweb['pembuat'];?>">
        <title><?php echo $iweb['nama_website'];?></title>
        <link rel="Shortcut Icon" href="<?php echo $hostname;?>/assets/images/logo/<?php echo $iweb['logo'];?>" type="image/x-icon" />
        <!-- Bootstrap core CSS -->
        <link href="<?php echo $hostname;?>/assets/css/bootstrap.css" rel="stylesheet">
        <!-- Custom styles template ini-->
        <link href="<?php echo $hostname;?>/assets/css/style_admin.css" rel="stylesheet">
        <!-- Custom Fonts Awesome-->
        <link href="<?php echo $hostname;?>/assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <div class="container"> <!-- start container -->
         <div class="row"><!-- start row -->
              <div class="col-lg-12"><!-- start col lg 12-->
              <div class="login"><!-- start class login -->
              <!-- panel . (Pelajari cara membuat panel di bootstrap yah)-->
              <div class="panel panel-primary">
                   <!-- panel heading -->
                   <div class="panel-heading">
                   <h1>LOGIN ADMIN </h1>
                   </div>
                   <!-- /.panel heading -->

                   <!-- panel body -->
                   <div class="panel-body">

                   <!-- start form login -->
                   <form action="" method="post">
                   <div class="form-group row"><!--start form-group-->
                        <label class="col-lg-3">Username</label>
                        <div class="col-lg-6">
                        <input type="text" name="email_admin" placeholder="Username" class="form-control" maxlength="40" value="<?php echo $_POST['email_admin'];?>" autofocus>
                        </div>
                   </div><!--/form-group-->

                   <?php echo $er_email;?>

                   <div class="form-group row"><!--start form-group-->
                        <label class="col-lg-3">Password</label>
                        <div class="col-lg-6">
                        <input id="pass1" type="password" name="password_admin" placeholder="Password" class="form-control" value="<?php echo $_POST['Password_admin'];?>" maxlength="15">
                        </div>
                        </div><!--/form-group-->
                   <?php echo $er_pass;?>

                   <hr>
                   <button class="btn btn-lg btn-primary" type="submit" name="login">Log In</button>
                   </form>
                   <!-- end form login -->
                   </div><!-- end panel body -->

                   <div class="panel-footer">
                   Login Khusus Administrator
                   </div>
              </div>  <!-- end panel-->
          </div> <!-- end class login-->
	</div><!-- end col lg 12 -->
 </div><!-- end row -->
</div><!-- end container -->

        <!-- Bootstrap core JavaScript
    ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="<?php echo $hostname;?>/assets/js/jquery.min.js"></script>
        <script src="<?php echo $hostname;?>/assets/js/bootstrap.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="<?php echo $hostname;?>/assets/js/ie10-viewport-bug-workaround.js"></script>
    </body>
</html>

style_admin.css

/*code template css*/


/*start form login*/

.login{
      width:450px;
      min-height:100px;
      margin:20px auto;
}


/*end form login*/

Hasil dari style 3 seperti ini

Silahkan anda pilih style login admin sebelum melanjutkan ke pemabahasan berikutnya, Terimakasih

DOWNLOAD MATERIAL FILE

*CATATAN

Penjelasan mengenai tutorial ini dapat anda lihat di video youtube yang sudah saya berikan.

PART 1 : TUTORIAL MEMBUAT HALAMAN LOGIN ADMIN

PART 2 : TUTORIAL MEMBUAT HALAMAN HOMEPAGE ADMIN

Tag:

Membuat tampilan form login admin dengan bootstrap

Membuat form sign in dengan bootstrap

Membuat login admin dengan php

Cara membuat login admin dengan HTML dan CSS

DEVELINDO WEB | TUTORIAL PEMROGRAMAN WEBSITE

By Ade Suryadi
On 26 Maret 2018

Ade Suryadi

Selalu Berusaha, Hasil Tuhan yang menentukan. Jangan menyerah dengan kegagalan. Lets do it !

BAHASA PEMOGRAMAN

Cari Blog Ini