Anda di halaman 1dari 6

Bab 7 Membuat Web Admin sebagai Kontrol Web Utama

60 menit
Membuat Web Admin sebagai Kontrol Web Utama
Video Tutorial https://youtu.be/LixNB-w5xa0

Membuat Web Admin


Copy dan paste template di file pendukung Bab 2 pilih folder template dan buka admin 2
ke appserv à www à produk
Lalu rename (edit nama filenya) menjadi adminku

Membackup file index asli


Kita masih membutuhkan file index.html asli dengan cara merubah namanya menjadi indexb.html

Membuat file index sebagai Login.


Pilih file pages di folder adminku yang baru saja Anda buat. Lalu pilih folder examples lalu copy file login.html
dan paste di folder adminku.
Rename login.html menjadi index.php dan coba cek di chrome ketik localhost/produk/adminku

Layout masih terpecah-pecah maka kita edit head index.php


hapus dan ganti

<head> .... </head>

menjadi
<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Log in</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.2 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FontAwesome 4.3.0 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons 2.0.0 -->
<link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link href="plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
</head>

Pelatihan Pembuatan Web Penjualan 1


Bab 7 Membuat Web Admin sebagai Kontrol Web Utama

Hapus Tombol dan Link tidak terpakai


Selanjutnya kita akan menfungsikan indek.php ini sebagai Form Login, Hapus tampilan dan tombol-tombol
yang tidak perlu, antara lain :

Hapus Cek Box

<div class="checkbox icheck">


<label>
<input type="checkbox"> Remember Me
</label>
</div>

Hapus Tombol Login dengan FB, G+, Link Forgot password dan resegister

<div class="social-auth-links text-center">


<p>- OR -</p>
<a href="#" class="btn btn-block btn-social btn-facebook btn-flat"><i class="fa fa-facebook"></i> Sign in using Facebook</a>
<a href="#" class="btn btn-block btn-social btn-google-plus btn-flat"><i class="fa fa-google-plus"></i> Sign in using Google+</a>
</div><!-- /.social-auth-links -->

<a href="#">I forgot my password</a><br>


<a href="register.html" class="text-center">Register a new membership</a>

Merubah nama dan placeholder Form


Ubah dan Tambahkan Font yang berwarna merah

<form action="index.php" method="post" name = 'ladmin'>


<div class="form-group has-feedback">
<input type="number" class="form-control" placeholder="Nomor HP Pemilik" name = 'hp'/>
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
</div>
<div class="form-group has-feedback">
<input type="password" class="form-control" placeholder="Password" name = 'password' />
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
</div><!-- /.col -->
<div class="col-xs-4">
<input type="submit" class="btn btn-primary btn-block btn-flat" name = 'ladmin' value = 'Login'>
</div><!-- /.col -->
</div>
</form>

Pelatihan Pembuatan Web Penjualan 2


Bab 7 Membuat Web Admin sebagai Kontrol Web Utama

Kemudian Kita buat penerima Postnya, tambahkan script berikut di awal halaman.

<?php
session_start();

if (isset($_POST['hp']))
{

$user_name = htmlentities((trim($_POST['hp'])));
$password = htmlentities(trim($_POST['password']));

if ( (strlen($user_name)) < 21 or (strlen($password)) < 21 ){

$user_name = stripslashes($user_name);
$user_name = strip_tags($user_name);
$user_name = preg_replace('/\W+/s','_', $user_name);
$user_name = preg_replace('/&(?!#?[a-z0-9]+;)/', '', $user_name);

$password = stripslashes($password);
$password = strip_tags($password);
$password = preg_replace('/\W+/s','_', $password);
$password = preg_replace('/&(?!#?[a-z0-9]+;)/', '', $password);

if ($user_name == '081391005464' and $password == '1234')


{
$_SESSION['user_name'] = $user_name;
echo "<script> document.location.href='menu.php'; </script>";

}
else
{
?><script language="javascript">
alert("Maaf, Password Anda salah!!");
document.location="index.php";
</script><?php
}

}
} else {
unset($_POST['hp']);
}

?>

Kemudian kita perlu membuat file menu.php sebagai halaman pertama setelah Admin Login.
Karena Kita hanya membutuhkan data-data maka kita ambil saja template dari tabel.

Buka pages à examples à tables à simple.html

Copy simple.html dan paste di produk


Rename menjadi menu.php

Pelatihan Pembuatan Web Penjualan 3


Bab 7 Membuat Web Admin sebagai Kontrol Web Utama

Seperti halnya index.php, Kita perlu mengganti script <head> nya


pada menu.php Hapus dan ganti <head> ... </head> dengan script di bawah ini

<head>
<meta charset="UTF-8">
<title>AdminLTE 2 | Simple Tables</title>
<meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
<!-- Bootstrap 3.3.2 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<!-- FontAwesome 4.3.0 -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Ionicons 2.0.0 -->
<link href="http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css" rel="stylesheet" type="text/css" />
<!-- Theme style -->
<link href="dist/css/AdminLTE.min.css" rel="stylesheet" type="text/css" />
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link href="dist/css/skins/_all-skins.min.css" rel="stylesheet" type="text/css" />
<!-- iCheck -->
<link href="plugins/iCheck/flat/blue.css" rel="stylesheet" type="text/css" />
<!-- Morris chart -->
<link href="plugins/morris/morris.css" rel="stylesheet" type="text/css" />
<!-- jvectormap -->
<link href="plugins/jvectormap/jquery-jvectormap-1.2.2.css" rel="stylesheet" type="text/css" />
<!-- Date Picker -->
<link href="plugins/datepicker/datepicker3.css" rel="stylesheet" type="text/css" />
<!-- Daterange picker -->
<link href="plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- bootstrap wysihtml5 - text editor -->
<link href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" rel="stylesheet" type="text/css" />
</head>

Pada menu.php ini, Kita akan menampilkan daftar pembeli.


Hal pertama yang Kita lakukan adalah menghapus tabel yang tidak kita gunakan.

Hapus Script Berikut :

<div class="row">
<div class="col-md-6">
<div class="box">
<div class="box-header">
<h3 class="box-title">Bordered Table</h3>
</div><!-- /.box-header -->
<div class="box-body">

.....
.....

<td>4.</td>
<td>Fix and squish bugs</td>
<td>
<div class="progress progress-xs progress-striped active">
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
</div>
</td>
<td><span class="badge bg-green">90%</span></td>
</tr>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->

Pelatihan Pembuatan Web Penjualan 4


Bab 7 Membuat Web Admin sebagai Kontrol Web Utama

Tambahkan Script untuk mengkoneksikan dengan database dan mengidentifikasi session sebagai berikut :

<?php
session_start();
if(isset($_SESSION['user_name']) )
{

if ( $_SESSION['user_name'] == '081391005464'){} else {

?><script language="javascript">
alert("Maaf, Anda tidak berhak mengakses halaman ini!!");
document.location="index.php";
</script>
<?php

}
} else {

?><script language="javascript">
alert("Maaf, Anda tidak berhak mengakses halaman ini!!");
document.location="index.php";
</script>
<?php
}
$host="localhost"; //replace with database hostname
$username="root"; //replace with database username
$password="abcdefghi"; //replace with database password
$db_name="penjualan"; //replace with database name

$con=mysql_connect("$host", "$username", "$password")or die("cannot connect");


mysql_select_db("$db_name")or die("cannot select DB");
?>

Kemudian untuk Tabel terkahir Kita Ambil data pembeli dari MySQL dengan script sebagai berikut :

<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Daftar Pembeli</h3>
<div class="box-tools">
<div class="input-group">
<input type="text" name="table_search" class="form-control input-sm pull-right" style="width: 150px;" placeholder="Search"/>
<div class="input-group-btn">
<button class="btn btn-sm btn-default"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div><!-- /.box-header -->
<div class="box-body table-responsive no-padding">
<table class="table table-hover">
<tr>
<th>No</th>
<th>Nama</th>
<th>HP</th>
<th>Password</th>
<th>Alamat</th>
</tr>

<?php
$queryp = "SELECT * from pembeli order by id DESC";
$hasilp = mysql_query($queryp);
$no = 1;
while ($datap = mysql_fetch_array($hasilp))

Pelatihan Pembuatan Web Penjualan 5


Bab 7 Membuat Web Admin sebagai Kontrol Web Utama

{
$namap = $datap['nama'];
$hpp = $datap['hp'];
$passwordp = $datap['password'];
$alamatp = $datap['alamat'];

?>
<tr>
<td><?php echo $no; ?></td>
<td><?php echo $namap; ?></td>
<td><?php echo $hpp; ?></td>
<td><?php echo $passwordp; ?></td>
<td><?php echo $alamatp; ?></td>
</tr>

<?php
$no++;
}
?>

</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div>
</div>

Kemudian cek hasilnya di chrome localhost/produk/adminku

Pelatihan Pembuatan Web Penjualan 6