BAB III PERANCANGAN DAN IMPLEMENTASI

Bab ini membahas mengenai pembuatan aplikasi pemesanan bis PO Teratai

Bintang. Adapun tahap-tahap yang dilakukan dalam pembuatan aplikasi pemesanan bis di
PO Teratai Bintang adalah identifikasi kebutuhan, perancangan, pengkodean, pengisian
konten, Implementasi dan Uji Coba.
Secara umum metode pada pembuatan aplikasi pemesanan kue MomeCake dapat dilihat
pada gambar 3.1.

Gambar 3.1. Bagan umum metode pembuatan aplikasi.

3.1 Identifikasi Kebutuhan

Spesifikasi hardware dan software yang digunakan dalam pembuatan aplikasi
pemesanan kue berbasis website antara lain.
Spesifikasi hardware yang digunakan antara lain :
1. Laptop ASUS X550D
2. Processor AMD A8-5550M APU
3. Memori 6144 MB RAM
4. VGA AMD Radeon HD 8550G
5. Harddisk 500 MB
Spesifikasi software yang digunakan antara lain:
1. Windows 10 Home (64-bit)
2. XAMPP Web Server v3.2.2
3. Sublime Text 3
4. Google Chrome

3.2 Perancangan
 Perancangan merupakan hasil transformasi dan analisa yang kemudian dijadikan sebagai
alat untuk menggambarkan dan membuat sketsa dari aplikasi yang dibangun. Hal penting
yang menjadi perhatian dalam suatu perancangan adalah rancangan yang dibuat dapat
dijadikan sebagai media agar pengguna aplikasi dapat dengan mudah berinteraksi dengan
aplikasi yang dibuat.
Perancangan yang dilakukan dalam pembuatan aplikasi penyewaan bis terbagi menjadi
beberapa tahap yaitu perancangan struktur navigasi, perancangan interface, perancangan
database dan perancangan flowchart.

3.2.1 Perancangan Struktur Navigasi

Struktur Navigasi merupakan gambaran proses perpindahan antar halaman dalam suatu
aplikasi. Dalam aplikasi pemesanan bis Teratai Bintang, pembuatan rancangan struktur navigasi
dibuat berdasarkan role pengguna yang terdiri dari user yang terdapat pada gambar 3.2, serta
admin terdapat pada gambar 3.3.

Gambar 3.2. Struktur Navigasi User

 Gambar 3.3. Struktur Navigasi Admin

3.2.2 Perancangan Interface

Pada pembuatan aplikasi pemesanan bis PO Teratai Bintang diperlukan sebuah rancangan
interface yang bertujuan untuk mempermudah proses pembuatan aplikasi yang dapat digunakan
dengan mudah oleh pengguna. Dalam perancangan interface ini terbagi menjadi 2 interface yaitu
Perancangan Interface User dan Perancangan Interface Admin.

3.2.2.1 Perancangan Interface User

Dalam perancangan interface user terdapat 3 halaman diantaranya adalah halaman utama,
pemesanan dan kontak. Interface pengguna aplikasi ini dapat dilihat dari gambar berikut.
Pada Gambar 3.4
Gambar 3.4. Tampilan Perancangan Halaman Utama

Gambar 3.5. Tampilan Perancangan Halaman Utama

 Gambar 3.6. Tampilan Perancangan Halaman Utama

Gambar 3.7 merupakan perancangan halaman pemesanan, terdapat 8 buah field yaitu
Nama Costumer, Alamat, No. Telepon, No. KTP, Kategori, Jumlah Bis, Tanggal Pinjam dan
Tanggal Kembali.

Gambar 3.7. Tampilan Perancangan Halaman Pemesanan

 Gambar 3.8 merupakan tampilan halaman kontak, dalam halaman tersebut terdapat
informasi tentang PO Teratai Bintang seperti alamat, nomor telepon dan email. Selain itu
terdapat pula form untuk user mengisi kritik dan saran

Gambar 3.8. Tampilan Perancangan Halaman Kontak

Gambar 3.9 merupakan tampilan halaman login, dimana admin yang bisa masuk untuk
melihat data yang ada di halaman admin.
 Gambar 3.9. Tampilan Halaman Login
3.2.2.2 Perancangan Interface Admin

Dalam perancangan ini terdapat dua halaman yaitu admin dan pesan yang dilakukan oleh
user. Interface admin dapat dilihat pada gambar berikut ini.
Gambar 3.10 merupakan halaman admin, dimana di halaman ini admin bisa melihat data
pemesanan yang telah di isi user.

Gambar 3.10. Tampilan Halaman Admin

Gambar 3.11 merupakan halaman pesan, dimana pada halaman ini admin bisa melihat
kritik dan saran yang diberikan oleh user.
 Gambar 3.11. Tampilan Halaman Pesan
3.2.3 Perancangan Database
Aplikasi ini menggunakan DBMS MySQL dalam perancangan database. Database terdiri
dari 2 tabel, yaitu tabel kontak dan reservasi. Masing-masing tabel memiliki peran masing-
masing dalam merancang aplikasi pemesanan bis PO Teratai Bintang. Peran dari masing-
masing tabel tersebut antara lain sebagai berikut.
a. Tabel kontak. Tabel ini digunakan untuk menyimpan data kritik dan saran dari
form kontak. Tabel ini terdiri dari field id, firstname, lastname, phone,
message dan email. Struktur dari tabel kontak dapat dilihat pada tabel 3.1.
b. Tabel reservasi. Tabel ini digunakan untuk menyimpan data pemesanan bis
yang telah di pesan oleh user. Tabel ini terdiri dari field id, namacostumer,
alamat, nohp, noktp, kategori, jumlah, tglpinjam, tglkembali dan total.
Struktur dari tabel reservasi dapat dilihat pada tabel 3.2.

Masing-masing tabel memiliki struktur yang berbeda. Berikut ini merupakan struktur dari
masing-masing tabel.
 Tabel 3.1 Struktur Tabel Kontak

Nama Field Tipe Data Null Panjang Index

id int Not Null 5 Primary Key

firstname varchar Not Null 15 -

lastname varchar Not Null 15 -

phone varchar Not Null 15 -

message varchar Not Null 100 -

email varchar Not Null 25

Tabel 3.2 Struktur Tabel Reservasi

Nama Field Tipe Data Null Panjang Index

id int Not Null 5 Primary Key

namacostumer varchar Not Null 30 -

alamat varchar Not Null 100 -

nohp varchar Not Null 15 -

noktp varchar Not Null 17 -

kategori enum Not Null - -

jumlah enum Not Null - -

tglpinjam date Not Null - -

 tglkembali date Not Null - -

total int Not Null 25 -

Dalam mengelola database MySQL penulis menggunakan perangkat lunak dan grafis
interface yaitu phpMyAdmin. PhpMyAdmin adalah perangkat lunak yang ditulis dalam bahasa
pemrograman PHP. Berikut ini merupakan langkah-langkah dalam pembuatan database
menggunakan phpMyAdmin.

1. Langkah pertama yaitu membuka phpMyAdmin. Karena merupakan aplikasi berbasis web
maka untuk membuka phpMyAdmin harus membuka browser terlebih dahulu. Kemudian
phpMyAdmin bisa diakses dengan alamat URL http://localhost/phpmyadmin. Tampilan
phpMyAdmin dapat dilihat pada gambar 3.12.

Gambar 3.12. Tampilan phpMyAdmin

2. Untuk membuat database baru dilakukan dengan cara memilih menu database lalu
memasukkan nama database yang akan dibuat seperti yang ditampilkan pada gambar 3.13.
 Gambar 3.13. Tampilan Membuat Database Baru

3. Setelah berhasil membuat database selanjutnya membuat tabel dalam database tersebut.
Caranya adalah dengan memilih database terlebih dahulu pada navigasi sebelah kiri lalu
mengisi nama tabel dan mengisikan jumlah kolom yang akan digunakan pada tabel seperti
yang ditampilkan pada gambar 3.14.

Gambar 3.14. Tampilan Membuat Tabel Baru

4. Proses pembuatan field secara otomatis akan dilakukan setelah pembuatan database seperti
yang ditampilkan pada gambar 3.15.

Gambar 3.15. Tampilan Membuat Field

5. Setelah pembuatan tabel users, penulis membuat tabel lain yang dibutuhkan dalam
pembuatan aplikasi. Tabel-tabel yang dibuat dapat dilihat pada gambar 3.16.
 Gambar 3.16. Tampilan Tabel Database PO Teratai Bintang

3.3 Penulisan Kode Program

Dalam pembuatan aplikasi pemesanan bis PO Teratai Bintang ini penulis menggunakan
bahasa pemrogaman PHP native untuk bagian back-end dan menggunakan HTML, CSS,
Bootstrap untuk bagian front-end. Penulis menggunakan software Sublime Text 3 dalam
menuliskan kode program. Berikut ini potongan program penulisan kode program.
1. Penulis menggunakan bootstrap offline untuk membuat aplikasi. Untuk menggunakan
bootstrap secara offline dilakukan dengan menambahkan link berikut pada tag <head>
HTML.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

2. Menuliskan tampilan front-end HTML. Potongan kode dibawah ini merupakan kode
program dalam pembuatan front-end. Setiap akan menuliskan kode program HTML,
harus disertai tanda <html> dan diakhiri dengan tanda </html>.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Teratai Bintang Transport</title>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"
rel="stylesheet" id="bootstrap-css">
<script
 src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-
awesome.min.css" rel="stylesheet">
</html>
3. Melakukan koneksi ke database dengan nama database penelitianilmah dengan
menuliskan kode program berikut.
<?php
$dbhost ='localhost';
$dbuser ='root';
$dbpass ='';
$dbname ='penelitianilmiah';

$mysql = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);

?>

4. Login. Potongan program di bawah ini merupakan kode program masuk untuk admin
<?php
if(isset($_POST['login'])){
session_start();
$username = filter_input(INPUT_POST,
'username',FILTER_SANITIZE_STRING);
$password = filter_input(INPUT_POST,
'password',FILTER_SANITIZE_STRING);
$_SESSION["username"]=$username;
if($username=="admin" && $password=="admin"){
header("Location:admin1.php");
}
elseif($username=="karyawan" && $password="karyawan"){
header("Location:admin1.php");
}else{
 echo "<script>window.alert('Username atau Password yang anda masukkan
salah!')</script>" ;
}
}
?>
5. Logout. Potongan program di bawah ini merupakan kode program untuk keluar dari
akun yang sedang berada pada session.
<?php
session_start();
session_unset("username");
header("Location:index.php");
?>

3.4 Implementasi dan Uji Coba

Untuk pengimplementasian aplikasi pemesanan kue MomeCake ini penulis menggunakan
laptop pribadi untuk melakukan uji coba. Aplikasi dijalankan pada server lokal menggunakan
XAMPP Web Server dengan aplikasi Mozilla Firefox sebagai tempat menjalankan aplikasi.
XAMPP Web Server dijalankan dengan menekan tombol start pada bagian Apache dan
MySQL. Tampilan konfigurasi XAMPP Web Server ditampilkan pada gambar 3.17.
 Gambar 3.17. Tampilan Konfigurasi XAMPP

Selanjutnya untuk menguji coba aplikasi dilakukan dengan menjalankan browser Google
Chrome. Masukkan url pada address bar dengan url http://localhost/pacee/index.php .
Selanjutnya akan masukkan ke halaman utama atau home aplikasi. Pada halaman utama terdapat
4 buah menu yaitu menu Home, Pemesanan, Kontak dan Masuk pada bagian Navbar. Tampilan
halaman utama atau home terbagi menjadi 4 gambar yaitu gambar 3.18 untuk header website,
gambar 3.19 untuk kategori dan list harga bis, gambar 3.20 untuk informasi tentang PO Teratai
Bintang dan 3.21 untuk foto-foto armada bis yang ada di PO Teratai Bintang.
Gambar 3.18. Tampilan Halaman Utama 1

Gambar 3.19. Tampilan Halaman Utama 2

 Gambar 3.20. Tampilan Halaman Utama 3

Gambar 3.21. Tampilan Halaman Utama 4

Dalam halaman utama terdapat 4 menu di bagian navbar yaitu menu Home, Pemesanan,
Kontak dan Masuk. Dalam menu Pemesanan berisi tentang form untuk user memesan bis
yang ada di PO Teratai Bintang. Menu pada Pemesanan terdapat pada gambar 3.22.
 Gambar 3.22. Tampilan Halaman Pemesanan

Kemudian pada halaman Kontak berisi tentang informasi alamat, email, nomor telepon
yang bisa dihubungi, selain itu terdapat form untuk mengisi kritik dan saran yang di isi oleh
user mengenai PO Teratai Bintang. Menu halaman Kontak terdapat pada gambar 3.23.
 Kemudian pada halaman Login hanya di khususkan untuk admin mengecek data yang di
isi oleh user. Menu halaman Login terdapat pada gambar 3.24.

Gambar 3.24. Tampilan Halaman Login

Dalam halaman admin, admin dapat mengecek ataupun menghapus data yang sudah di isi
oleh user. Tampilan halaman admin terdapat pada gambar 3.25.

Gambar 3.25. Tampilan Halaman Admin

 Dalam halaman pesan, admin dapat melihat kritik dan saran yang diberikan oleh user.
Tampilan halaman pesan terdapat pada gambar 3.26.

Gambar 3.26. Tampilan halaman pesan