Tutorial Web E-commerce

PART 2 : TUTORIAL MEMBUAT HALAMAN HOMEPAGE ADMIN

Halaman admin merupakan halaman yang hanya di khsusukan untuk user Develindo yang memiliki hak akses admin. Halaman admin akan muncul setelah anda memasukan username dan password pada halaman login admin, maka akan menuju ke halaman hompage admin.

Tutorial ini akan menjelaskan bagaimana membuat halaman admin dengan script PHP dan Framework template Bootstrap. Diharapkan anda dalam mempraktekan tutorial ini, bersamaan dengan menonton video yang sudah saya sediakan sehingga anda mudah memahaminya.

Tutorial ini akan dibagi menjadi beberapa bagian meliputi bagian membuat halaman homepage admin, membuat beberapa tampilan dan memodifikasi tampilan.

Bagian Pertama : Membuat Halaman Homepage Admin

Ikuti panduan membuat halaman admin ini, sebagai berikut:

Langkah 1 : Buat file security.php

File security.php ini berisi file untuk mengecek apakah session admin telah sesuai atau tidak, jika sesuai maka akan memanggil data di tb_admin sesuai username yang digunakan jika tidak maka akan kembali ke halaman login. Perhatikan setiap baris dari script ini yah.

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

Buat file security.php dan simpan di Folder Tutorial Ecommerce > adminweb >

Selanjutnya....

Langkah 2 : Buat file home.php

home.php ini akan menampilkan halaman homepage tersebut, Buka notepad++ anda dan ketikkan script dibawah ini dan simpan dengan nama home.php, simpan di folder adminweb

home.php

 

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

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
<div id="wrapper">

<!-- 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-laptop"></span> Ruang Admin</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
            <li class="message-preview"><a href="#"><i class="fa fa-info-circle"></i> <span class="label label-default">12</span></a></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</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
                <a aria-expanded="false" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<!-- Bagian Navbar / menu bagian atas dan samping-->

        <div id="page-wrapper">

            <div class="container-fluid">

                <!-- Page Heading -->
                <div class="row">
                    <div class="col-lg-12">
                        <h1>
                            <i class="fa fa-home fa-fw"></i> Dashboard Statistic
                        </h1>
                        <ol class="breadcrumb">
                            <li class="active">
                                <i class="fa fa-dashboard"></i> Dashboard
                            </li>
                            <li>Home</li>
                        </ol>
                    </div>
                </div>
                <!-- /.row -->
                
                <div class="row">
                   <div class="col-lg-12">
                   <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>
                   <h4 class="alert-heading">Alert dismissable</h4>
                   <p>Selamat datang di control panel admin. Tingkatkan share, traffic, posting dan order dengan berbagi melalui media sosial</p>
                   </div>
                   
                   <div class="alert alert-success" role="alert">
                   <strong>Alert !</strong> You successfully read this important alert message.
                   </div>
                   
                   </div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-id-card fa-5x"></i>
                                    </div>
                                    <div class="col-lg-9 text-right">
                                        <div class="huge">1233</div>
                                        <div>Anggoa</div>
                                    </div>
                                </div>
                            </div>
                            <a href="member.php">
                                <div class="panel-footer">
                                    <span class="pull-left">Lihat Semua</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-folder-open fa-5x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">3423</div>
                                        <div>Daftar Produk !</div>
                                    </div>
                                </div>
                            </div>
                            <a href="produk.php">
                                <div class="panel-footer">
                                    <span class="pull-left">Lihat Semua Produk</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-cart-plus fa-5x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">5343</div>
                                        <div>Transaksi Baru !</div>
                                    </div>
                                </div>
                            </div>
                            <a href="transaksi.php">
                                <div class="panel-footer">
                                    <span class="pull-left">Lihat Semua Transaksi</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="panel panel-info">
                            <div class="panel-heading">
                                <div class="row">
                                    <div class="col-xs-3">
                                        <i class="fa fa-support fa-5x"></i>
                                    </div>
                                    <div class="col-xs-9 text-right">
                                        <div class="huge">4522</div>
                                        <div>Konfirmasi Baru!</div>
                                    </div>
                                </div>
                            </div>
                            <a href="konfirmasi">
                                <div class="panel-footer">
                                    <span class="pull-left">Lihat Semua KOnfirmasi</span>
                                    <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                                    <div class="clearfix"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- /.row -->
                
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">Contoh Tabel General Responsive</h3>
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                <table class="table">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                                </table>

                                </div>

                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="panel panel-primary">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-pie-chart fa-fw"></i> Contoh Tabel Border Responsive</h3>
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                                </table>

                                </div>
                                <div class="text-right">
                                    <a href="log.php">Data Log User <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="panel panel-warning">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-laptop fa-fw"></i> Contoh Tabel Condensed Responsive</h3>
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                <table class="table table-condensed">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                                </table>

                                </div>
                                <div class="text-right">
                                    <a href="log.php">Data Log User <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <h3 class="panel-title"><i class="fa fa-pie-chart fa-fw"></i> Contoh Tabel Striped Responsive</h3>
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                <table class="table table-striped">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Username</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td>@mdo</td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td>@fat</td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td>@twitter</td>
                                </tr>
                                </tbody>
                                </table>

                                </div>
                                <div class="text-right">
                                    <a href="log.php">Data Log User <i class="fa fa-arrow-circle-right"></i></a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- /.row -->

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

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

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

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

Setelah anda membuat file home.php, selanjutnya Buka file style_admin.css pada folder Tutorial Ecommerce > assets > css

Buka file tersebut dan tambahkan script style berikut ini. (perhatikan instruksi ! tambahkan script yah jangan mengganti)

/*Template admin*/

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

#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-color: #222;
    }

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

    .side-nav li a:hover,
    .side-nav li a:focus {
        outline: none;
        background-color: #000 !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: #fff;
}

/*Template admin*/

Setelah anda memnambahkan script diatas, anda dapat mencoba membuka hasil pada browser. Pasti sudah tau kan caranya, jika belum anda dapat mengetikan localhost/Tutorial Ecommerce/adminweb pada Url Browser anda.

Maka yang pertama tampil adalah halaman login admin, silahkan anda login dengan memasukan username dan password sesuai yang anda inputkan di tb_admin. Jika login berhasil maka akan menuju ke halaman seperti ini.

Halaman homepage admin

homepage admin 

Ini adalah halaman yang tadi kita buat yaitu file home.php yang merupakan halaman homepage admin. Selanjutnya saya akan bahas untuk setiap bagian pada script diatas.

Selanjutnya untuk mempermudah anda dalam mempelajari setiap bagian, ikuti langkah berikutnya yah,

Membagi script menjadi beberapa file supaya mudah untuk dimodifikasi dan mengingatnya.

File Pertama adalah file Meta tag

Dimana bagian metatag ini, keseluruhan halaman nantinya akan sama maka kita dapat memotong bagian file home.php ini untuk dijadikan file tersendiri. Tujuannya untuk menyingkat script sehingga jika mengedit tidak harus mengedit semua file hanya mengedit satu file ini saja.

Buat file setting_metatag.php

Buka kembali file home.php yang sudah anda buat dan Blok bagian dibawah ini dan CUT (Ctrl+X) script dimulai dari bagian tag

<?php

... sampai

<body>

<div id="wrapper">

Dan paste pada file baru yang anda beri nama setting_metatag.php, simpan di folder adminweb

Jadi isi file setting_metatag.php 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">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

<div id="wrapper">

Nah sekarang file home.php sudah berubah yah, PERHATIKAN lagi, pada bagian yang hilang tadi, panggil file setting_metatag.php, dengan script seperti ini

<?php

include "setting_metatag.php";

?>

Jadi intinya sama saja seperti script diatas,tetapi banyak keuntungan ketika kita membaginya seperti ini. Okeh, lanjut yah.

File kedua adalah bagian Navbar

Buat satu file lagi, beri nama setting_navbar.php simpan di folder adminweb. Dimana isi dari script ini adalah bagian dari file home.php yang dimulai dari tag

<nav>

... sampai

</nav>

Jika bingung bisa sambil, lihat videonya yah di youtube..

Isi file setting_navbar.php adalah 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-laptop"></span> Ruang Admin</a>
    </div>
    <ul class="nav navbar-nav navbar-right">
            <li class="message-preview"><a href="#"><i class="fa fa-info-circle"></i> <span class="label label-default">12</span></a></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</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
                <a aria-expanded="false" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
            <li class="dropdown">
                <a aria-expanded="false" href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu" role="menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                </ul>
            </li>
        </ul>
    </div>
</nav>
<!-- Bagian Navbar / menu bagian atas dan samping-->

Pada bagian yang di hilang tadi , sama seperti diatas panggil file setting_navbar.php

<?php

include "setting_navbar.php";

?>

File Ketiga adalah bagian Footer,

Buat file setting_footer.php

Blok dan Cut bagian file home.php yang paling bawah seperti berikut

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

Paste pada file baru dan simpan dengan nama setting_footer.php simpan di folder adminweb

Setelah dibuat file , maka jangan lupa tambahkan script untuk memanggil file seperti ini

<?php

include "setting_footer.php";

?>

Bagian yang tersisa di file home.php adalah bagian konten yang hanya akan tampil di file home.php yah, jadi cukup membagi menjadi 3 bagian saja.

Dan semua bagian disimpan di folder adminweb.

Selanjutnya buat file logout.php

File logout ini untuk keluar dari sistem dan akan menuju ke halaman login lagi.

Logout.php

<?php

session_start();

error_reporting(0);

session_destroy();

header('location:index.php');

?>

Pada file logout ini berisi script untuk menghilangkan session yang digunakan, sehingga jika session tidak sesuai maka akan menuju kehalaman login lagi yaitu index.php

Nah sekarang sudah selesai untuk membuat halaman admin ya yah, dan struktur file pada folder adminweb seperti ini

develindo.com

Terdapat 7 file yang sudah kita buat di folder adminweb

Bagian Kedua : Membuat Beberapa Tampilan / Style Halaman admin

Sekarang saya akan menjelaskan bagaimana cara membuat halaman admin menjadi beberapa style atau gaya sehingga anda dapat memilih ingin menggunakan tampilan yang seperti apa.

Perhatikan baik baik ya, silahkan dilihat kembali videonya supaya anda lebih jelas dalam mempraktekannya.

Tampilan Halaman admin yang pertama

Tampilan halaman admin yang pertama adalah seperti yang telah anda buat diatas yah, tampilannya seperti ini. Memiliki letak mene menu di sebelah kiri dengan konten disebelah kanan.

homepage admin

Tampilan style halaman admin kedua

Tampilan yang kedua memiliki perbedaan letak menu menu yang berada diatas dan konten yang full page.

homepage admin

Gambar : Tampilan style halaman admin kedua

Bagian yang perlu dirubah adalah sebagai berikut:

Pertama, Buka kembali file style_admin.css, dan hapus script yang baru anda tambahkan tadi, lihat ke atas lagi yah, nah hapus script tersebut dan save,

Kedua, buka file setting_navbar.php dan dibagian

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">

Hapus script “navbar-fixed-top” sehingga menjadi seperti ini

<nav class="navbar navbar-inverse" role="navigation">

Setelah itu save dan refresh kembali halaman home. Maka akan berubah tampilannya seperti diatas yah.

Tampilan style halaman admin yang ketiga

Tampilan yang ketiga memiliki perbedaan pada konten web yang tidak full page, atau memiliki margin diantara kanan dan kirinya. Tidak jauh beda dengan style kedua yah.

homepage admin

Jadi pada bagian konten, terdapat jarak antara tepi dengan bagian konten, sdangkan tampilan yang kedua tadi full page.

Perhatikan baik baik yah,

Buka kembali halaman home.php dan cari script seperti ini

<div class="container-fluid">

Jika sudah anda temukan ganti menjadi seperti ini

<div class="container">

Nah sekarang anda dapat merefresh browser untuk melihat hasilnya,

Oke, Kita sekarang sudah memiliki 3 tampilan halaman admin, mudah kan kawan...

 

Bagian Ketiga : Memodifikasi Tampilan Halaman Admin

Memodifikasi tampilan admin meliputi bagaimana cara untuk merubah warna, text, background, ukuran font, dll. Jika anda memiliki keahlian dalam style CSS maka hal ini tidak lagi sulit yah.

Pertama, Merubah warna bagian Navbar

Buka halamn homepage, arahkan cursor anda pada bagian navbar dan klik kanan, pilih inspect element (saya menggunakan browser mozilla). Seperti ini

develindo.com

Lihat video di youtube yah biar anda lebih mudah memahami.

Klik inspec element maka akan muncul menu editor pada browser anda seperti ini

develindo.com

Sebaiknya anda melihat video untuk memahaminya,

Menu editor pada browser dapat memudahkan anda dalam menentukan bagian mana yang akan diedit. Contohnya kita akan merubah warna,

Oke, sebelumnya seudah dijelaskan bahwa di dalam file bootstrap sudah memiliki style atau script sendiri secara keseluruhan, namun kita masih dapat memodifikasinya dengan menduplicat suatu elemen tersebut.

Cari elemen seperti ini

halaman admin

Nah sekarang anda sudah mendapat elemen Nav dimana pada menu editor sebelah kiri merupakan file home.php dalam format HTML, sedangkan bagian sebelah kanan adalah stylesheet atau css dari file home tersebut.

Perhatikan, ketika kita klik elemen nav maka disebelah kanan menunjukan style

.navbar-inverse ..... terdapat pada bootstrap.css : 4591

Artinya style tersebut sudah terdapat pada file boostrap.css baris ke 4591, kita tidak perlu merubah pada file core bootstrap tersebut, namun kita bisa menduplikat elemen tersebut dan memasukan ke style_admin.css yang sudah kita buat.

Pilih warna pada bagian navbar-inverse untuk merubah bagian warnanya

develindo.com

Seperti pada gambar, setelah anda merubah warna, Blok element tersebut dan copy paste di file style_admin.css yang anda buat. Tambahkan di bagian bawah yah..

develindo.com

Copy paste di style_admin.css

Maka pada file style_admin.css menjadi bertambah seperti ini

.navbar-inverse {

    background-color: #BF2525;

    border-color: #080808;

}

 

Selanjutnya save dan refresh, maka warna pada bagian navbar telah berubah, anda dapat merubah warna sesuai keinginan dengan menggunakan code warna HTML dalam format hexadecimal.

 

PART 1 : TUTORIAL MEMBUAT HALAMAN LOGIN ADMIN

PART 2 : TUTORIAL MEMBUAT HALAMAN HOMEPAGE ADMIN

Demikian Tutorial part 2 tentang membuat halaman homepage admin, semoga bermanfaat.

Terimakasih  

Develindo Web | Tutorial Pemrograman Website