Materi Sistem Informasi Laundry
Materi Sistem Informasi Laundry
Materi Sistem Informasi Laundry
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.
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.
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
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’.
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.
Instalasi Bootstrap
Kemudian rename menjadi ‘assets’. Dan hapus file .zip bootstrap nya.
Oke selesai untuk tahap instalasi bootstrap. Kita masuk ke instalasi jquery.
Instalasi Jquery
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.
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
// 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.
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.
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>
</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>";
}
}
?>
</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.
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.
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();
// 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.
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/>
<a href="logout.php">LOGOUT</a>
</body>
</html>
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”.
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();
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();
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.
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.
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");
}
?>
<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>
</head>
<body style="background: #f0f0f0">
<!-- cek apakah sudah login -->
<?php
session_start();
if($_SESSION['status']!="login"){
header("location:../index.php?pesan=belum_login");
}
?>
<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 -->
Index.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>
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
Dan
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.
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
<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">
<br/>
</div>
</div>
</div>
</div>
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
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
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”.
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.
header("location:ganti_password.php?pesan=oke");
<?php
if(isset($_GET['pesan'])){
if($_GET['pesan'] == "oke"){
echo "<div class='alert alert-success'>Password telah
diganti!</div>";
}
}
?>
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.