BELAJAR PHP TINGKAT LANJUTAN –

MEMBUAT SISTEM INFORMASI LAUNDRY

Persiapan dan Penjelasan
Sebelum lebih jauh masuk ke proses pembuatan sistem informasi laundry, ada
baiknya saya jelaskan dulu tentang sistem infromasi laundry yang akan kita buat.

Yang harus kita lakukan untuk membuat sebuah sistem infromasi adalah kita
harus tau dulu alur aplikasi yang akan kita buat. Berikut adalah perancangan database
yang telah saya siapkan.

Silahkan perhatikan pada gambar berikut

Seperti yang bisa teman-teman lihat pada gambar perancangan database sistem
informasi laundry di atas. Gambar di atas merupakan gambaran perancangan
database yang akan kita buat untuk sistem informasi laundry ini. Ada 5 tabel yang kita
buruhkan, yaitu :

 admin : pada tabel ini kita akan menyimpan data username dan password
admin.
 Pakaian : pada tabel ini kita menyimpan data pakaian atau data cucian si
pelanggan, misalnya celana jeans 1, baju kemeja 2 dan lain-lain.
 Transaksi : pada tabel ini kita menyimpan data transaksi/invoice laundry,
seperti tanggal transaksi, pelanggan yang melakukan transaksi, harga, berat,
 tanggal cucian selesai dan bisa di ambil oleh pelanggan, serta status transaksi
tersebut.
 Pelanggan : pada tabel ini kita menyimpan data pelanggan, misalnya nama,
nomor hp dan alamat si pelanggan.
 Harga : pada tabel harga ini kita akan menyimpan pengaturan harga yang akan
diterapkan untuk harga per kilo laundry atau cucian.

Untuk relasinya juga bisa teman-teman lihat pada gambar di atas, sudah di tandai
dengan garis setiap relasi database atau tabel yang datanya berhubungan.

Selanjutnya, di sini saya menggunakan text editor sublime text editor. Teman-
teman bisa bebas memilih ingin menggunakan text editor apa, misal notepad++, atom,
dan lain-lain.

Membuat Project Aplikasi PHP Baru

Sekarang kita akan membuat sebuah folder baru dengan nama ‘laundry’ dalam
folder ‘htdocs’. Karena di sini xampp saya terinsall di direktori C. maka folder ‘laundry’
nya saya buat di C://xampp/htdocs/.

Sampai disini pembuatan folder project aplikasi PHP kita telah selesai. Kita
lanjutkan dulu ke persiapan yang lainnya seperti di bawah.

Persiapan Database

Setiap aplikasi ataupun sistem informasi yang akan dibangun, pastinya

membutuhkan sebuah database yang berguna untuk menampung data. Sebagai
contohnya, pada sistem informasi laundry yang akan kita buat ini, semua data yang
sudah dijelaskan pada sub judul sebelumnya, seperti data pelanggan, data admin, data
transaksi dan data lainnya akan kita simpan di dalam sebuah database.

Nah, untuk sistem manajemen basis data nya, kita akan menggunakan MySQLi.
Seperti yang telah dijelaskan sebelumnya, MySQLi adalah pengembangan dari MySQL.
Yang tentunya MySQLi telah memiliki banyak kelebihan dibandingkan MySQL seperti
yang pernah diuraikan di atas pada sub judul sebelumnya.
 Karena sistem informasi laundry yang kita buat membutuhkan database, maka
sekarang kita akan membuat sebuah database baru dengan nama ‘laundry’.

Caranya aktifkan dulu apache dan MySQL dengan menggunakan XAMPP.

Caranya dengan klik tombol start pada Apache dan MySQL. Lihat gambar berikut.

Mengaktifkan Apache & MySQL

Selanjutnya buka PHPMyAdmin dengan cara mengakses

“localhost/phpmyadmin” pada web browser.

Kemudian klik pada menu database, dan buat sebuah database baru dengan
nama “laundry”.
Database akan dibuat setelah anda klik pada tombol ‘create’.

Sampai di sini kita telah selesai membuat database dengan nama “laundry”.
Instalasi Bootstrap
Setelah membuat database laundry, kita tinggalkan sebentar masalah
database, kita masuk ke tahap instalasi library CSS. Untuk pembuatan antarmuka atau
user interface sistem informasi laundry yang akan kita buat ini, kita akan
menggunakan bootstrap.

Pasti teman-teman telah familiar dengan nama yang namanya bootstrap. Di

www.malasngoding.com sendiri telah ada pembahasan khusus tentang tutorial
bootstrap yang telah lengkap dari part 1 sampai ke sekian, yang di mulai dari
perkenalan bootstrap sampai membuat menu, membuat tabel dan lain-lainnya dengan
mudah menggunakan bootstrap. Teman-teman bisa membacanya di
www.malasngoding.com/category/bootstrap.

Instalasi Bootstrap

Bootstrap bisa langsung di download dari situs resminya, dengan cara

mengakses alamat https://getbootstrap.com/docs/3.3/getting-started/.

Atau teman-teman bisa menggunakan bootstrap yang telah saya sertakan

dalam paket ebook ini yang berada dalam folder ‘library’.
 Saya anggap teman-teman telah memiliki bootstrap nya, sekarang copy dan
paste kan bootstrap yang telah teman-teman download ke folder project kita. Yaitu ke
folder ‘laundry’ yang telah kita buat pada C://xampp/htdocs/.

Extrak file bootstrap tersebut ke dalam folder ‘laundry’.

Kemudian rename menjadi ‘assets’. Dan hapus file .zip bootstrap nya.
Oke selesai untuk tahap instalasi bootstrap. Kita masuk ke instalasi jquery.

Instalasi Jquery

Bootstrap membutuhkan jquery untuk dapat berjalan dengan baik, karena

bootstrap juga menggunakan jquery sebagai library javascript nya.

Oleh karena itu, sekarang kita akan mulai melakukan instalasi jquery. Caranya
cukup mudah, silahkan teman-teman download langsung pada situs resmi jquery,
yaitu di https://jquery.com/. Atau teman-teman bisa menggunakan jquery yang sudah
saya sertakan pada paket ebook ini.

Copy dan paste kan file jquery.js nya ke dalam folder js yang berada dalam
folder assets. Perhatikan gambar berikut.

Oke, selesai. Jika teman-teman mengikuti panduan instalasi bootstrap dan

jquery ini dengan benar, maka instalasi nya telah selesai. Cukup mudah bukan.

Koneksi Database
Setelah selesai melakukan instalasi bootstap dan lain-lain. Untuk tahap paling
awalnya juga kita harus membuat koneksi database. Agar project PHP kita ini bisa
terhubung dengan database ‘laundry’ yang telah kita buat sebelumnya.
 Caranya sangat mudah. Buat sebuah file baru dengan nama koneksi.php pada
folder laundry.

koneksi.php

<?php

// nama host, Username, password dan nama database

$koneksi = mysqli_connect("localhost","root","","laundry");

// Periksa Koneksi
if (mysqli_connect_errno()){
echo "Koneksi database gagal : " . mysqli_connect_error();
}

?>

Oke, koneksi database selesai kita buat. Kita lanjutkan dengan membuat login untuk
admin.
Membuat Login Admin
Pada halaman utama aplikasi atau sistem informasi laundry yang akan kita
buat ini kita akan membuat halaman login untuk admin. Jadi pada saat sistem
informasi laundry yang kita buat ini di akses, maka yang pertama muncul adalah
halaman login admin. Jika admin telah berhasil login, baru kemudian admin dapat
mengakses fitur yang lainnya.

Pada sub judul membuat login admin ini tidak lagi dijelaskan secara detail
tentang cara membuat login. Karena sudah dijelaskan pada sub judul sebelumnya.
Pada sub judul ini hanya akan dijelaskan tahap-tahap membuat login untuk admin
sesuai dengan kebutuhan kita di sistem informasi laundry yang akan kita buat ini.

Membuat Tabel Admin

Data admin sistem informasi laundry ini akan kita simpan pada tabel ‘admin’
dalam database ‘laundry’.

Oleh sebab itu kita akan membuat sebuah tabel dengan nama ‘admin’. Caranya
silahkan pilih database laundry, kemudian pada form create table, tulis nama table
yang ingin di buat, tulis admin. Kemudian klik go.

Dengan kolum id, username, dan password. Id ber tipe data int, sedangkan
username password bertipe data varchar dengan nilai 255. Dan jangan lupa centang
pada auto-increment seperti pada gambar di bawah.
Dan klik save.

Sampai di sini kita telah selesai membuat tabel admin. Selanjutnya kita akan
menginput data admin sebagai contoh. Sekaligus untuk membuat akun admin yang
akan digunakan untuk login pada pebahasan selanjutnya.

Klik pada menu insert, kemudian isikan usernamenya dengan ‘admin’. Dan
passwordnya ‘admin123’. Jangan lupa untuk memilih fungsi md5 pada kolum
function.

Karena kita akan membuat login yang menggunakan enkripsi md5. Untuk
penjelasan cara membuat login dengan php dan mysqli menggunakan md5 juga telah
di bahas pada www.malasngoding.com dan pada sub judul sebelumya dalam ebook
ini.
Klik go, dan selesai.

Data admin pun selesai kita input dan password yang tadinya kita input dengan
‘admin123’ pun berhasil di generate secara otomatis menjadi enkripsi md5.

Membuat Halaman Login

Seperti yang telah dijelaskan sebelumnya, halaman login yang akan kita buat ini
akan muncul pada saat pertama kali sistem informasi laundry ini di akses atau di
jalankan.

Oleh karena itu kita akan membuat halaman login nya pada file index.php. karena file
index.php adalah file php yang pertama kali di jalankan di dalam suatu folder.

Langsung saja buat sebuah file baru dengan nama index.php pada folder laundry.
Dan ketik atau copas syntax berikut.

Index.php

<!DOCTYPE html>
<html>
<head>
<title>Sistem Informasi Laundry Malas Ngoding -
www.malasngoding.com</title>

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>

</head>
<body style="background: #f0f0f0">
<br/>
<br/>
<br/>
<br/>

<center>
<h2>SISTEM INFORMASI LAUNDRY <br/> www.malasngoding.com</h2>
</center>

<br/>
<br/>
<br/>
<br/>

<div class="container">
<div class="col-md-4 col-md-offset-4">
 <?php
if(isset($_GET['pesan'])){
if($_GET['pesan'] == "gagal"){
echo "<div class='alert alert-danger'>Login
gagal! username dan password salah!</div>";
}else if($_GET['pesan'] == "logout"){
echo "<div class='alert alert-info'>Anda telah
berhasil logout</div>";
}else if($_GET['pesan'] == "belum_login"){
echo "<div class='alert alert-danger'>Anda
harus login untuk mengakses halaman admin</div>";
}
}
?>

<form action="login.php" method="post">

<div class="panel">
<br/>
<div class="panel-body">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-
control" name="username">
</div>
<div class="form-group">
<label>Password</label>
<input type="password" class="form-
control" name="password">
</div>

<input type="submit" class="btn btn-

primary" value="Log In">
</div>
<br/>
</div>
</form>

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

Saya rasa sudah banyak coding yang teman-teman tau kegunaan nya dari
coding di atas. Karena sudah berulang-ulang kali di jelaskan pada sub judul
sebelumnya.

Saya jelaskan sedikit di sini, perhatikan pada

<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">

<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/bootstrap.js"></script>
 Syntax di atas merupakan syntax yang kita buat untuk menghubungkan dengan
bootstrap.css, javascript.js, dan file jquery yang telah kita copy ke folder laundry ini
pada sub judul sebelumnya.

Selanjutnya pada bagian bawah, kita membuat form seperti pada tutorial membuat
login sebelumnya yang telah kita bahas juga.

Hanya di sini bedanya pasti teman-teman menemukan class dengan nama panel,
panel-body, form-group dan lain-lain. Itu adalah class dari library bootstrap yang telah
kita pelajari juga di www.malasngoding.com/category/bootstrap.

Sekarang coba kita lihat bagaimana hasilnya, silahkan akses project kita dengan cara
mengakses “localhost/laundry” pada browser.

Membuat Aksi Login Admin

Perhatikan pada tag form di atas tadi.

<form action="login.php" method="post">

Pada form login ini kita telah menentukan bahwa form ini akan di eksekusi atau
di proses pada file login.php. dengan menggunakan method post.

Kemudian buat sebuah file baru lagi dengan nama login.php dalam folder laundry.
login.php

<?php
// mengaktifkan session php
session_start();

// menghubungkan dengan koneksi

include 'koneksi.php';

// menangkap data yang dikirim dari form

$username = $_POST['username'];
$password = md5($_POST['password']);
// fungsi md5 di atas untuk enkripsi kedalam bentuk md5

// menyeleksi data admin dengan username dan password yang sesuai

$data = mysqli_query($koneksi,"select * from admin where username='$username'
and password='$password'");

// menghitung jumlah data yang ditemukan

$cek = mysqli_num_rows($data);

// cek jika username dan password yang di input di temukan, buat session dan
alihkan halaman ke halaman admin(folder admin),
// jika tidak, alihkan kembali ke halaman depan sambil mengirim pesan gagal
if($cek > 0){
$_SESSION['username'] = $username;
$_SESSION['status'] = "login";
header("location:admin/index.php");
}else{
header("location:index.php?pesan=gagal");
}
?>

Perhatikan lagi, karena pada file login.php ini kita akan berhubungan dengan
database, maka kita haru menghubungkan dulu file ini dengan file koneksi.php.
caranya dengan meng-include file koneksi.php seperti pada syntax di atas.

// menghubungkan dengan koneksi

include 'koneksi.php';

Selanjutnya seperti pada penjelasan pada sub judul membuat login dengan php
dan mysqli yang telah dibahas sebelumnya.

Oh iya, pada pengecekan jika login berhasil, maka halaman akan kita alihkan ke file
index.php yang berada dalam folder admin.

header("location:admin/index.php");
 Karena kita akan membuat halaman admin sistem informasi laundry ini di
dalam folder admin. Jadi file-file php untuk admin semuanya kita buat dalam folder
admin. Agar source code sistem informasi laundry yang kita buat lebih bersih dan
teratur.

Buat sebuah folder baru dengan nama ‘admin’ dalam folder laundry.

Kemudian buat sebuah file baru lagi dengan nama ‘index.php’ di dalam folder admin.
Sehingga hasilnya seperti berikut.

Index.php

<!DOCTYPE html>
<html>
<head>
<title>Sistem Informasi Laundry Malas Ngoding -
WWW.MALASNGODING.COM</title>
</head>
<body>
<h2>Halaman Admin</h2>

<br/>

<!-- cek apakah sudah login -->

<?php
session_start();
if($_SESSION['status']!="login"){
header("location:../index.php?pesan=belum_login");
}
?>

<h4>Selamat datang, <?php echo $_SESSION['username']; ?>! anda telah

login.</h4>

<p>selamat datang di halaman admin. halaman admin masih kosong. yuk

buat halaman admin nya dulu biar kece.</p>
 <br/>
<br/>

<a href="logout.php">LOGOUT</a>

</body>
</html>

Sekarang coba jalankan pada browser. Akses dengan alamat “localhost/laundry”.

Pertama kita coba dulu dengan menginput username dan password yang salah.
Untuk mengecek apakah sudah berjalan dengan seharusya. Di sini saya mencoba
memasukkan username “admin” dan password “admin12345”.

Dan klik log in. maka akan muncul pesan notifikasi bahwa login gagal.
 Sekarang coba masukkan username dan password yang benar. Seperti
username dan password yang kita input ke table admin pada sub judul sebelumnya.
Yaitu username “admin” dan password “admin123”.

Kemudian klik log in.

Nah maka kita telah berhasil login. Tapi tampilan loginnya masih sederhana. Untuk
tampilan dashboard adminnya akan kita buat pada sub judul selanjutnya.

Membuat Logout Admin

Setelah sebelumnya kita belajar cara membuat login dengan php dan mysqli,
pada sub judul ini kita akan belajar cara membuat logout admin dengan php. Caranya
sangat mudah, bahkan pada sub judul sebelumnya kita telah belajar cara membuat
logoutnya juga pada sub judul tutorial membuat login dengan php dan mysqli.

Perhatikan pada halaman admin yang telah kita buat di atas, di sana terdapat
link LOGOUT yang telah kita buat, dan saat di klik halaman akan di alihkan ke file
logout.php.

<a href="logout.php">LOGOUT</a>

Oleh karena itu sekarang kita akan membuat file logout.php. untuk membuat
proses penghapusan semua session dan mengalihkan kembali admin ke halaman
login.

Buat file logout.php di dalam folder admin, berdampingan dengan file index.php.
seperti gambar di bawah.
logout.php

<?php
// mengaktifkan session
session_start();

// menghapus semua session yang ada

session_destroy();

// mengalihkan halaman kembali ke halaman login sambil mengirimkan pesan

logout melalui url
header("location:../index.php?pesan=logout");
?>

Jika kita ingin menggunakan fungsi session dalam sebuah file PHP, kita wajib
menggunakan session_start() pada bagian paling atas, agar session PHP di aktifkan
saat file php tersebut di jalankan.

// mengaktifkan session
session_start();

Kemudian kita menggunakan fungsi session_destroy() untuk menghapus

semua session yang ada, dan yang terakhir setelah session di hapus, kita alihkan
halaman kehalaman login.

header("location:../index.php?pesan=logout");
Oke selesai. Sekarang kita coba untuk klik link logout. Maka session akan di hapus
dan halaman akan di alihkan kembali ke halaman login.

Maka halaman akan dialihkan kembali ke halaman login.

Dan logout pun berhasil kita buat. Jika teman-teman masih bingung dengan
proses membuat login sistem informasi laundry ini, teman-teman bisa membaca
tutorial nya kembali pada pembahasan sebelumnya tentang membuat login dengan
php dan mysqli. Karena sudah di jelaskan secara detail, sampai penjelasan membuat
pesan notifikasi di atas.
Membuat Halaman Admin (Halaman Dinamis)
Setelah selesai membuat login dan logout, maka selanjutnya kita buat halaman
dashboard admin untuk admin sistem informasi laundry ini dengan menggunakan
bootstrap. Agar lebih keren.

Halaman dashboard yang sudah kita buat sebelumnya (index.php) masih

sangat sederhana dan belum terintegrasi dengan bootstrap. Sekarang kita akan
membuat halaman dashboard admin dengan menggunakan bootstrap.

Adapun komponen bootstrap yang kita gunakan di antaranya adalah navbar,

glyphicon, panel, alert dan masih ada beberapa lagi. Kembali saya ingatkan untuk
teman-teman yang ingin belajar memahami penggunaan bootstrap secara lebih detail,
teman-teman bisa membaca tutorialnya di malasngoding.com dengan url berikut :
https://www.malasngoding.com/category/bootstrap. atau teman-teman bisa juga
mempelajarinya melalui panduan dari situs resmi bootstrap sendiri. Yaitu di url :
https://getbootstrap.com/docs/3.3/components/.

Pada halaman dashboard admin ini, kita akan menerapkan halaman dinamis. Silahkan
teman-teman baca lagi tutorial pada sub judul sebelumnya tentang cara membuat
halaman web dinamis. Agar tidak bingung dalam mengikuti panduan ini. Seperti yang
sudah di jelaskan sebelumnya, pada pembuatan sistem informasi laundry ini kita tidak
lagi membahas secara mendetail kecuali hal-hal yang belum pernah di jelaskan pada
tutorial dasar pada sub judul sebelumnya yang telah di jelaskan secara detail.

Langsung saja kita mulai. Silahkan teman-teman buka file index.php pada folder
admin. Sekalian buat 2 buah file php lagi. Yaitu file header.php. dan footer.php.

Berikut ini adalah syntax halaman dashboard admin yang telah jadi.

<!DOCTYPE html>
<html>
<head>
<title>Sistem Informasi Laundry Malas Ngoding
WWW.MALASNGODING.COM</title>

<link rel="stylesheet"
href="../assets/css/bootstrap.css">
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript"
src="../assets/js/bootstrap.js"></script>
</head>
<body style="background: #f0f0f0">
<!-- cek apakah sudah login -->
<?php
session_start();
if($_SESSION['status']!="login"){
header("location:../index.php?pesan=belum_login");
}
?>

<!-- menu navigasi -->

<nav class="navbar navbar-inverse" style="border-radius: 0px">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<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="index.php">LAUNDRY
Malas Ngoding</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-

navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php"><i
class="glyphicon glyphicon-home"></i> Dashboard</a></li>
<li><a href="pelanggan.php"><i class="glyphicon
glyphicon-user"></i> Pelanggan</a></li>

<li><a href="transaksi.php"><i class="glyphicon

glyphicon-random"></i> Transaksi</a></li>
<li><a href="laporan.php"><i class="glyphicon
glyphicon-list-alt"></i> Laporan</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i
class="glyphicon glyphicon-wrench"></i> Pengaturan <span
class="caret"></span></a>
<ul class="dropdown-menu">

<li><a href="harga.php"><i
class="glyphicon glyphicon-usd"></i> Pengaturan Harga</a></li>
<li><a href="ganti_password.php"><i
class="glyphicon glyphicon-lock"></i> Ganti Password</a></li>
</ul>
</li>
<li><a href="logout.php"><i class="glyphicon
glyphicon-log-out"></i> Log Out</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Halo, <b><?php echo
$_SESSION['username']; ?></b> !</p></li>
 </ul>
</div>
</div>
</nav>
<!-- akhir menu navigasi -->

<div class="container">
<div class="alert alert-info text-center">
<h4 style="margin-bottom: 0px"><b>Selamat datang!</b> di
sistem informasi laundry malas ngoding.</h4>
</div>

<div class="panel">
<div class="panel-heading">
<h4>Dashboard</h4>
</div>
<div class="panel-body">
Sistem Informasi Laundry Malas Ngoding
</div>
</div>
</div>

</body>
</html>

Sekarang kita pecah menjadi 3 buah file. Bagian header dashboard kita simpan
dalam file header.php. bagian body kita simpan pada file index.php. dan bagian footer
kita simpan pada file footer.php. semua file yang akan kita buat tetap dalam folder
admin.

Dari syntax di atas, bagian menu navigasi akan kita simpan ke file header.php.
buat sebuah file header.php. dan tulis syntax berikut.

Header.php

<!DOCTYPE html>
<html>
<head>
<title>Sistem Informasi Laundry Malas Ngoding -
WWW.MALASNGODING.COM</title>

<link rel="stylesheet" type="text/css"

href="../assets/css/bootstrap.css">
<script type="text/javascript" src="../assets/js/jquery.js"></script>
<script type="text/javascript"
src="../assets/js/bootstrap.js"></script>

</head>
<body style="background: #f0f0f0">
<!-- cek apakah sudah login -->
<?php
session_start();
if($_SESSION['status']!="login"){
header("location:../index.php?pesan=belum_login");
}
?>

<!-- menu navigasi -->

<nav class="navbar navbar-inverse" style="border-radius: 0px">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-
expanded="false">
<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="index.php">LAUNDRY
Malas Ngoding</a>
</div>

<div class="collapse navbar-collapse" id="bs-example-

navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php"><i
class="glyphicon glyphicon-home"></i> Dashboard</a></li>
<li><a href="pelanggan.php"><i class="glyphicon
glyphicon-user"></i> Pelanggan</a></li>

<li><a href="transaksi.php"><i class="glyphicon

glyphicon-random"></i> Transaksi</a></li>
<li><a href="laporan.php"><i class="glyphicon
glyphicon-list-alt"></i> Laporan</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-
toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><i
class="glyphicon glyphicon-wrench"></i> Pengaturan <span
class="caret"></span></a>
<ul class="dropdown-menu">

<li><a href="harga.php"><i
class="glyphicon glyphicon-usd"></i> Pengaturan Harga</a></li>
<li><a href="ganti_password.php"><i
class="glyphicon glyphicon-lock"></i> Ganti Password</a></li>
</ul>
</li>
<li><a href="logout.php"><i class="glyphicon
glyphicon-log-out"></i> Log Out</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><p class="navbar-text">Halo, <b><?php echo
$_SESSION['username']; ?></b> !</p></li>
</ul>
 </div>
</div>
</nav>
<!-- akhir menu navigasi -->

Kemudian buka file index.php, dan tulis syntax berikut.

Index.php

<?php include 'header.php'; ?>

<div class="container">
<div class="alert alert-info text-center">
<h4 style="margin-bottom: 0px"><b>Selamat datang!</b> di sistem
informasi laundry malas ngoding.</h4>
</div>

<div class="panel">
<div class="panel-heading">
<h4>Dashboard</h4>
</div>
<div class="panel-body">
Sistem Informasi Laundry Malas Ngoding
</div>
</div>
</div>

<?php include 'footer.php'; ?>

Kemudian sisanya kita simpan pada file footer.php. jadi buat sebuah file baru dengan
nama footer.php

Footer.php

</body>
</html>
Akan saya jelaskan sedikit. Bagian header dan bagian footer kita include dengan
menggunakan function “ include ‘ ’ “ seperti pada file index.php, yaitu

<?php include 'header.php'; ?>

Dan

<?php include footer.php'; ?>

 Sampai di sini selesai lah halaman dashboard admin kita untuk sementara.
Sekarang coba refresh halaman admin kita.

Dan hasilnya akan seperti berikut.

Dan sub menunya juga.

Nah sudah jadi semuanya. Di sini saya juga telah membuat menu-menu
navigasi yang akan kita alihkan ke halaman-halaman yang kita butuhkan. Seperti
pelanggan, transaksi, laporan dan lain-lain.
Sampai di sini kita telah selesai membuat halaman dinamis pada halaman dashboard
admin.

Membuat Ganti Password Admin

Setelah segala persiapan halaman dashboard admin selesai, kita akan
melanjutkan dengan membuat ganti password untuk admin.

Perhatikan pada menu ganti password di atas.

<li><a href="ganti_password.php"><i class="glyphicon glyphicon-lock"></i>

Ganti Password</a></li>

Pada menu ganti password telah kita tetapkan link url tujuannya. Yaitu
mengarah ke file ganti_password.php. karena form untuk pergantian password admin
akan kita buat pada file ganti_password.php.

Buat sebuah file baru dalam folder admin, dengan nama ganti_password.php.

Ganti_password.php

<?php include 'header.php'; ?>

<div class="container">
<br/>
<br/>
<br/>
<div class="col-md-5 col-md-offset-3">

<?php
if(isset($_GET['pesan'])){
if($_GET['pesan'] == "oke"){
echo "<div class='alert alert-success'>Password telah
diganti!</div>";
}
}
?>

<div class="panel">
<div class="panel-heading">
<h4>Ganti Password</h4>
 </div>
<div class="panel-body">

<form method="post" action="ganti_password_aksi.php">

<div class="form-group">
<label>Masukkan Password Baru</label>
<input type="password" class="form-
control" name="password_baru" placeholder="Masukkan Password Baru Anda ..">
</div>

<br/>

<input type="submit" class="btn btn-primary"

value="Ganti Password">
</form>

</div>
</div>
</div>

</div>

<?php include 'footer.php'; ?>

Perhatikan pada tag <form> pada form ganti password di atas. Kita menetapkan
action form ganti password ini ke file ganti_password_aksi.php

Ganti_password_aksi.php

<form method="post" action="ganti_password_aksi.php">

Karena kita akan memproses data yang di kirim dari form ganti password ini di file
ganti_password_aksi.php.

Buat sebuah file baru lagi dalam folder admin dengan nama ganti_password_aksi.php.

Ganti_password_aksi.php

<?php

// menghubungkan dengan koneksi

include '../koneksi.php';

// menangkap data yang dikirim dari form

$password_baru = md5($_POST['password_baru']);
// fungsi md5 di atas untuk enkripsi kedalam bentuk md5

// mengupdate data password pada table admin

mysqli_query($koneksi,"update admin set password='$password_baru'");

header("location:ganti_password.php?pesan=oke");

?>

Saya rasa teman-teman sudah paham dengan syntax di atas. Karena pada sub judul
sebelumnya telah kita bahas berulang kali.

Sekarang coba kita jalankan pada browser. Klik pada menu ganti password. Dan
masukkan password baru. Di sini saya memasukkan dengan password “tes123”.

Akan di alihkan ke halaman ganti password (ganti_password.php).

Saya mencoba memasukkan password baru dengan “tes123”. Klik pada tombol ganti
password.

Maka data password baru yang kita inputpun di proses dengan pertama menangkap
data yang dikirim dari form ganti password kemudian di ubah ke enkripsi md5
menggunakan fungsi md5() di php.

// menangkap data yang dikirim dari form

$password_baru = md5($_POST['password_baru']);
Selanjutnya menjalankan query sql untuk mengupdate password pada table password
dengan password yang baru.

// mengupdate data password pada table admin

mysqli_query($koneksi,"update admin set password='$password_baru'");

Terakhir kita alihkan kembali halamannya ke ganti_password.php. sambil mengirimkan

pesan oke melalui url.

header("location:ganti_password.php?pesan=oke");

Sehingga bisa teman-teman lihat pada ganti_password.php. di sana kita telah

membuat pengecekan jika terdapat data pesan oke yang dikirim melalui url akan kita
tampilkan pesan notifikasi jika password telah berhasil di ganti.

<?php
if(isset($_GET['pesan'])){
if($_GET['pesan'] == "oke"){
echo "<div class='alert alert-success'>Password telah
diganti!</div>";
}
}
?>

Selesailah sudah tahap membuat ganti password untuk admin.

Oh ya, pada baris pertama, kita menghubungkan file php ini dengan file
koneksi.php dengan syntax berikut.

include '../koneksi.php';

Kita menggunakan “ .. “ (titik dua kali) karena file koneksi.php tidak berada di
dalam satu folder dengan file ganti_password_aksi.php. tetapi file koneksi.php berada
di luar folder admin. Jadi istilahnya tanda “ .. ” di gunakan sebagai kembali ke direktori
atau folder sebelumnya.