Online Course

DF01 - Tutorial Membuat Halaman Login dan Homepage Admin

Tutorial Membuat Halaman Login dan Homepage Admin

Tutorial ini menjelaskan cara membuat halaman login admin web dan cara membuat halaman homepage admin.

Bagian 1 : Menyiapkan Material File yang dibutuhkan

Silahkan download material file yang tersedia, yang sudah disiapkan untuk mempercepat pembuatan. Material file berisi folder dengan nama sisfomik1 dan terdapat beberapa folder didalamnya.

DOWNLOAD MATERIAL FILE

Bagian 2 : Membuat database dengan nama penjualan_hp pada phpmyadmin

Buat beberapa tabel seperti tertera dibawah ini

Buat tb_admin dengan struktur seperti ini

tb-admin

Buat tb_identitas dengan struktur seperti ini

tb-identitas

silahkan diisi data /diinsertkan 1 data ke tabel-tabel tersebut.

Bagian 3 : Buat file koneksi.php

Buat file baru beri nama koneksi.php simpan di folder RELASI, isi dari file koneksi.php seperti ini

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

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

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

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

$hostname="http://localhost/penjualan_hp";
?>

simpan file koneksi.php

Bagian 4 : Buat file index.php sebagai halaman login admin

File index merupakan file yang mewakili suatu folder, jadi jika folder tersebut dibuka pada browser maka file index inilah yang pertama kali akan muncul. File index.php berisi form login admin, untuk masuk dapat menggunakan email dan password.

Buat file baru beri nama index.php simpan di folder ADMINWEB dengan isi file seperti ini

<?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);
 $kode = strtolower(mysqli_real_escape_string($conect, $_POST['kode']));


  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>";
    }
    elseif($_SESSION['kode_session'] != $kode){
    $er_kode="<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>Kode Salah !</strong> <br> Ulangi Kode Dengan Benar</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('Selamat Datang di Halaman 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" type="text/css" media="all">
        <!-- Custom styles template ini-->
        <link href="<?php echo $hostname;?>/assets/css/style_admin.css" rel="stylesheet" type="text/css" media="all">
        <!-- Custom Fonts Awesome-->
        <link href="<?php echo $hostname;?>/assets/fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
        <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>

    </head>
    <body class="bodylogin">
    <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>Login Admin</h1>
                        <p><?php echo $iweb['nama_website'];?></p>
                   <hr>
                   <!-- start form login -->
                   <form action="" method="post" class="formlogin">
                   <div class="form-group"><!--start form-group-->
                        <label>Email</label>
                        <div class="input-group"><span class="input-group-addon"><i class="fa fa-user-circle-o fa-fw"></i></span>
                        <input type="text" name="email_admin" placeholder="Email" 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">
                        <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;?>
                   <div class="form-group text-center"><!--start form-group-->

                        <img id="kd" alt="kode" src="<?php echo 'kode.php';?>" class="img-thumbnail">
                        <button class="btn btn-default coba">Refresh</button>
                        <div class="clearfix"></div>
                        <br>
                        <input id="kode" type="text" name="kode" placeholder="Masukan Kode diatas" class="form-control text-center" value="<?php echo $_POST['kode'];?>" maxlength="6">
                        </div><!--/form-group-->
                   <?php echo $er_kode;?>

                   <button class="btn btn-primary 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 -->

<script>
//button refresh
  $(document).on('click', '.coba', function(event){
   $("#kd").refresh();
   });
</script>
    </body>
</html>

Lalu buat file kode.php simpan di folder ADMINWEB dengan isi script seperti ini

<?php
session_start();
header("Content-type: image/png");

$captcha_image = imagecreatefrompng("../assets/images/icon/cap2.png");
$captcha_font = imageloadfont("../assets/fonts/font.gdf");
$captcha_text = substr(md5(uniqid('')),0,4);

$_SESSION['kode_session'] = $captcha_text;

$captcha_color = imagecolorallocate($captcha_image,0,0,0);
imagestring($captcha_image,$captcha_font,20,0,$captcha_text,$captcha_color);
imagepng($captcha_image);
imagedestroy($captcha_image);
?>

Sebelum anda mencoba file index.php di browser, silahkan buat dulu file style_admin.css sebagai file css external yang berguna untuk mempercantik tampilan halaman web.

Buat file style_admin.css simpan di folder CSS, isi dari file style_admin.css seperti ini

/*start form login*/

.bodylogin{
    background : #FFF;
    background: url("../images/icon/bg.jpg") no-repeat;
    background-size: cover;
    margin-top:0;
}
.login{
      width:350px;
      min-height:350px;
      border:#fff solid 1px;
      background:rgba(0,0,0,0.5);
      padding:20px;
      margin:20px auto;
      box-shadow: 0 2px 7px rgba(0, 0, 0, 0.1);
}
.login i{
    color:#000;
}
.login h1{
        font-size:28px;
        color:#fff;
        text-align:center;
}
.login p{
    text-align:center;
    color:#fff;
}
.formlogin{
    color:#fff;
}
@media(max-width:450px) {
    .login{
      width:300px;
    }
}
/*end form login*/

/*Template admin*/

body {
    margin-top: 150px;
    background-color: #fff;
}

#wrapper {
    padding-left:0;
}

#page-wrapper {
    width: 100%;
    padding: 0;
    background-color: #fff;
}

/* Side Navigation */

@media(min-width:768px) {
    body {
        margin-top: 50px;
    }
    #wrapper {
        padding-left: 225px;
    }

    #page-wrapper {
        padding: 10px;
    }

    .side-nav {
        position: fixed;
        top: 51px;
        left: 225px;
        bottom:0px;
        width: 225px;
        margin-left: -225px;
        border: none;
        border-radius: 0;
        overflow-y: auto;
        background: #eeeeee;
        background: url("../images/icon/bg.jpg") no-repeat;

    }

    .side-nav>li>a {
        width: 225px;
    }

    .side-nav li a:hover,
    .side-nav li a:focus {
        outline: none;
        background-color: #f8f8f8 !important;

    }
}

.side-nav>li>ul {
    padding: 0;
}

.side-nav>li>ul>li>a {
    display: block;
    padding: 10px 15px 10px 38px;
    text-decoration: none;
    color: #999;
}

.side-nav>li>ul>li>a:hover {
    color: #222;
}
/* Top Navigation */

.top-nav {
    padding: 0 15px;
}

.top-nav>li {
    display: inline-block;
    float: left;
}

.top-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 20px;
    color: #fff;
}

.top-nav>li>a:hover,
.top-nav>li>a:focus,
.top-nav>.open>a,
.top-nav>.open>a:hover,
.top-nav>.open>a:focus {
    color: #fff;
    background-color: #000;
}

.top-nav>.open>.dropdown-menu {
    float: left;
    position: absolute;
    margin-top: 0;
    border: 1px solid rgba(0,0,0,.15);
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #fff;
}

ul.message-dropdown {
    padding: 0;
    max-height: 250px;
    overflow-x: hidden;
    overflow-y: auto;
}

li.message-preview {
    width: 275px;
    border-bottom: 1px solid rgba(0,0,0,.15);
}

li.message-preview>a {
    padding-top: 15px;
    padding-bottom: 15px;
}

li.message-footer {
    margin: 5px 0;
}

ul.alert-dropdown {
    width: 200px;
}
.navbar-inverse {
    background-color: #4FD9CF;
    border-color: #32A199;
}
.navbar-inverse .navbar-brand {
    color:#fff;
    background: #289c05;
    min-width:225px;
}
.navbar-inverse .navbar-nav li a:hover{
    color:#000;
    font-size:14px;
    font-weight:bold;
}
.navbar-inverse .navbar-nav li ul li a{
    color:#000;
    font-size:14px;
    min-width:225px;
    border-bottom:#BBB solid 1px;
    }
.table thead th{
    background: #4FD9CF;
}

/*Template admin*/

Oke, Sekarang coba jalankan pada localhost anda, hasil yang seharusnya muncul adalah seperti ini

login-admin

Masukan username dengan email dan password serta kode captcha yang tertera untuk dapat masuk ke halaman admin. Namun karena halaman admin anda belum dibuat maka tampilannya akan kosong.

Bagian 5 : Membuat halaman home admin

Halaman home akan muncul setelah anda berhasil login, halaman home berisi ucapan selamat datang dan beberapa menu.

Buat file baru beri nama home.php simpan di folder ADMINWEB, isi dari file home.php seperti ini

<?php
//pemanggilan file metatag
include "setting_metatag.php";
//pemanggilan file navbar
include "setting_navbar.php";
?>

        <div id="page-wrapper">

            <div class="container-fluid">

                <div class="row">
                   <div class="col-lg-12">

                   <!--konten pilihan start-->
                   <div class="jumbotron">
                        <div class="container">
                        <h1 class="display-3">SELAMAT DATANG </h1>
                        <p class="lead">Selamat bekerja ! Gunakan sistem ini untuk kepentingan penjualan dan pemasaran produk. Tingkatkan Omzet dengan perbanyak posting, share medsos dan advertising</p>
                        <p>Tim Support</p>
                        </div>
                   </div>
                   </div>
                </div>

            </div>
            <!-- /.container-fluid -->

        </div>
        <!-- /#page-wrapper -->

    </div>
    <!-- /#wrapper -->



<?php
//pemanggilan file setting footer
include "setting_footer.php";

?>

Buat file baru beri nama setting_metatag.php simpan di folder ADMINWEB, isi dari file setting_metatag seperti ini

<?php
//session dimulai
session_start();
//abaikan error pada browser
error_reporting(0);
//panggil file koneksi untuk mengkoneksinkan dengan database
include "../assets/relasi/koneksi.php";
//panggil file security untuk mengecek session admin
include "security.php";
?>

<!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">

        <link href="<?php echo $hostname;?>/assets/css/datepicker.min.css" rel="stylesheet">

        <script src="<?php echo $hostname;?>/assets/js/jquery.min.js"></script>
        <script src="<?php echo $hostname;?>/assets/js/bootstrap.js"></script>
        <script src="<?php echo $hostname;?>/assets/js/bootstrap-datepicker.min.js"></script>

</head>

<body>
<div id="wrapper">

  Buat file baru beri nama setting_navbar.php simpan di folder ADMINWEB, isi dari file setting_navbar seperti ini

<!-- Bagian Navbar / menu bagian atas dan samping-->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#"><span class="fa fa-diamond"></span> SISTEM ADMIN</a>
    </div>
    <ul class="nav navbar-right top-nav">
            <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="label label-danger">42</span> <i class="fa fa-envelope"></i> <b class="caret"></b></a>
                    <ul class="dropdown-menu message-dropdown">
                        <li class="message-preview">
                            <a href="#">
                                <div class="media">
                                    <div class="media-body">
                                        <h5 class="media-heading"><strong>John Smith</strong>
                                        </h5>
                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="message-preview">
                            <a href="#">
                                <div class="media">
                                    <div class="media-body">
                                        <h5 class="media-heading"><strong>John Smith</strong>
                                        </h5>
                                        <p class="small text-muted"><i class="fa fa-clock-o"></i> Yesterday at 4:32 PM</p>
                                        <p>Lorem ipsum dolor sit amet, consectetur...</p>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="divider"></li>
                        <li class="message-footer">
                            <a href="#">Read All New Messages</a>
                        </li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bell"></i> <b class="caret"></b></a>
                    <ul class="dropdown-menu alert-dropdown">
                        <li>
                            <a href="#">Alert Name <span class="label label-default">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-primary">Alert Badge</span></a>
                        </li>
                        <li>
                            <a href="#">Alert Name <span class="label label-success">Alert Badge</span></a>
                        </li>
                        <li class="divider"></li>
                        <li>
                            <a href="#">View All</a>
                        </li>
                    </ul>
                </li>
            <li class="dropdown">
                <a aria-expanded="false" href="#" class="dropdown-toggle" data-toggle="dropdown"><?php echo $admin['nama_admin'];?><span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="logout.php">Logout</a></li>

                </ul>
            </li>
        </ul>
    <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav side-nav">
            <li><a href="home.php">Home</a></li>
            <li><a href="member.php">Data Member</a></li>

            <li class="dropdown">
                <a aria-expanded="false" href="#" class="dropdown-toggle" data-toggle="dropdown">Data Produk <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="produk.php">Daftar Produk</a></li>
                    <li><a href="brand.php">Brand / Merk</a></li>
                    <li><a href="supplier.php">Suplier</a></li>
                    <li><a href="kategori.php">Kategori Produk</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" href="#" class="dropdown-toggle" data-toggle="dropdown">Data Kurir <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="ongkir.php">Daftar Harga Ongkir</a></li>
                    <li><a href="kurir.php">Daftar Kurir</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" href="#" class="dropdown-toggle" data-toggle="dropdown">Pengaturan <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="infobis.php">Informasi Bisnis</a></li>
                    <li><a href="identitas.php">Informasi SEO Website</a></li>
                    <li><a href="slider.php">Foto Slider</a></li>
                    <li><a href="admin.php">Akun Admin</a></li>
                </ul>
            </li>

        </ul>
    </div>
</nav>
<!-- Bagian Navbar / menu bagian atas dan samping-->

Buat file baru beri nama setting_footer.php simpan di folder ADMINWEB, isi dari file setting_footer seperti ini

<script>
$(document).ready(function () {
    $('#datePicker')
        .datepicker({
            format: 'yyyy-mm-dd'
        })
    });
</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>

Buat file baru beri nama security.php simpan di folder ADMINWEB, isi dari file security.php seperti ini

<?php
//jika session tidak sesuai dengan data_admin  maka akan diarahkan ke halaman logout.php atau keluar dari sistem
if(!isset($_SESSION['data_admin'])){
        header('location:logout.php');
}
else{
//jika session sesuai maka session akan digunakan untuk memanggil data dari tb_admin
$akun=$_SESSION['data_admin'];
$admin=mysqli_fetch_array(mysqli_query($conect, "SELECT * FROM tb_admin where email_admin='$akun'"));
$iweb=mysqli_fetch_array(mysqli_query($conect, "SELECT * FROM tb_identitas where id_identitas='1'"));
}
//$admin merupakan variabel dari query pemanggilan tb_admin
//$iweb merupakan variabel dari query pemanggilan tb_identitas
?>

Simpan dan coba anda jalankan, maka tampilannya akan seperti ini setelah anda berhasil login

home

Selanjutnya untuk dapat keluar dari halaman home anda harus log out, dengan klik link log out yang berada pada pojok, klik bagian nama anda maka akan muncul menu dropdown logout.

Bagian 6 : Buat file logout.php

Buat file baru beri nama logout.php simpan di folder ADMINWEB, isi dari file logout.php seperti ini

<?php
session_start();
error_reporting(0);
session_destroy();
header('location:index.php');
?>

Coba nada jalankan dengan klik tombol logout, maka halaman akan menuju file index / login admin lagi.

 

Thanks

Develindo Web | Tutorial Pemrograman Website