97
4.2.5.2 Perancangan Input
Perancangan input meliputi desain dari dokumen-dokumen. Inputan yang digunakan untuk menangkap data dan semua kode-kode yang digunakan.
Dokumen input ini sangat penting digunakan untuk menghasilkan output yang benar.
1 Racangan input form login pelanggan
Login pelanggan
Email Password
Login Daftar
Belum daftar?
Gambar 4.17 Rancangan input form login pelanggan
Keterangan : 1. Mengisi Email dan Password apabila sudah daftar kemudian klik login
2. Klik tombol daftar bagi yang belum daftar
98
2 Rancangan input form pendaftaran peminjam mobil
Nama Lengkap Alamat Lengkap
Telepon Email
Password :
: :
: :
Pendaftaran
Daftar
Gambar 4.18 Rancangan input form pendaftaran peminjam mobil
Keterangan : 1. Mengisi data peminjam untuk pendaftaran
2.
Klik tombol “Daftar” untuk menyimpan data
99
3 Rancangan input pilih mobil
No Gambar
Merek mobil Kursi
harga-hari Pilih
1 images.jpg
xxx x
Rp. 2
images.jpg xxx
x Rp.
3 images.jpg
xxx x
Rp. 4
images.jpg xxx
x Rp.
5 images.jpg
xxx x
Rp. 6
images.jpg xxx
x Rp.
Gambar 4.19 Rancangan input pilih mobil
Keterangan : 1. Klik tombol yang ada dikolom pilih untuk memilih mobil yang akan
disewa.
100
4 Rancangan input daftar pilihan mobil
No Gambar
Merek mobil harga-hari
Hapus
1 images.jpg
xxx Rp.
2 images.jpg
xxx Rp.
3 images.jpg
xxx Rp.
Gambar 4.20 Rancangan input daftar pilihan mobil
Keterangan : 1. Klik tombol
“Tambah” untuk menambah mobil dengan jenis yang berbeda 2. Kliki
tombol “Selanjutnya” unutk proses selanjutnya
Selanjutnya Tambah
101
5 Rancangan input form peminjaman
Tgl pergi : Tgl Kembali :
Jam Pergi : Alamat pejemputan :
Pesan
Form peminjaman
Gambar 4.21 Rancangan input form peminjaman
Keterangan : 1. Isi
“ Tgl Pergi” untuk memilih tanggal peminjaman mobil 2.
Isi “Tgl Kembali” untuk memilih tanggal pengembalian mobil 3. Klik combo box
“Jam pergi” untuk memilih jam keberangkatan 4. Isi alamat lengkap penjemputan
5. Klik tombol “pesan” untuk memproses seluruh peminjaman mobil
102
6 Rancangan input form konfirmasi
No Pinjam : Nama Bank :
No Rekening : Nama Pemilik :
Jumlah Bayar :
Kirim
Konfirmasi
Gambar 4.22 Rancangan input form konfirmasi
Keterangan : 1. Klik combo box
“ no pinjam” untuk memilih no pinjam pembayaran 2. Isi data konfirmasi pembayaran
3. Klik tombol “kirim” untuk dikirim ke pihak admin
103
7 Rancangan Detail Peminjaman
No Pinjam : xx Awal Pemakaian : xx
Akhir Pemakaian : xx Jam Pemakaian : xx
Alamat Jemput : xx
Nama bank : xx No rekening : xx
Atas nama : xx jumlah pembayaran : xx
Status pinjam :
Konfirmasi
Merek mobil Jenis mobil
Tempat duduk Harga
Lama pinjam Sub Total
xx xx
xx xx
xx xx
Total Rp
Data peminjam
Nama peminjam : xx Alamat : xx
No Telepon : xx Email : xx
Detail Peminjaman
Gambar 4.23 Rancangan update status peminjaman
Keterangan : 1. Klik combo box
“status pinjam” untuk merubah status peminjam mobil
104
8 Rancangan detail pengembalian
No Pinjam : xx Awal Pemakaian : xx
Akhir Pemakaian : xx Jam Pemakaian : xx
Jam Kembali : xx
Jumlah denda : xx Keterangan : xx
Status pinjam :
Denda
Merek mobil Jenis mobil
Tempat duduk Harga
Lama pinjam Sub Total
xx xx
xx xx
xx xx
Total Rp
Data pengembalian
Nama peminjam : xx Alamat : xx
No Telepon : xx Email : xx
Detail pengembalian
Gambar 4.24 Rancangan update status pengembalian
Keterangan: 1.
Klik combo box “status pinjam” untuk merubah status peminjam mobil
105
9 Rancangan form input tambah user
Tambah user
Username : Password :
Nama lengkap : Email :
Simpan Batal
Gambar 4.25 Rancangan form input tambah user
Keterangan : 1. Isi data user yang akan mengelola web
2. Klik tombol “simpan” untuk menyimpan pada database
3. Klik tombol “batal” untuk membatalkan penyimpanan user
10 Rancangan form input tambah modul
Tambah modul
Nama Modul Link
Publish Aktif
Status Urutan
Simpan Batal
Y N
Y N
Gambar 4.26 Rancangan form input tambah modul
106
Keterangan : 1. Input data modul
2. Pilih radio button “publish” Y = ya dan T = tidak ditampilkan
3. Pilih radio button “Aktif” Y = ya dan T = tidak diaktifkan
4. Klik combo box “status” hak akses admin
5. Klik tombol “simpan” untuk menyimpan pada database
6. Klik tombol “batal” untuk membatalkan penyimpanan modul
11 Rancangan form profil
Profil
Ganti Foto : Choose File
Update
Gambar 4.27 Rancangan form profil
107
Keterangan : 1.
Klik tombol” choose file”untuk ganti gambar pada menu profil 2. Klik tombol
“update” untuk update isi profil
12 Rancangan input tambah promosi
Judul Kategori
Isi promosi
Gambar
Tambah Promosi
Simpan Batal
Choose File
Gambar 4.28
Rancangan input tambah promosi Keterangan :
1. Isi form data tambah promosi 2. Klik combo box isi promosi berdasarkan kategori promosi
3. Klik tombol “simpan” untuk menyimpan data pada database
4. Klik tombol “batal” untuk membatalkan penyimpanan promosi
108
13 Rancangan input tambah album
Judul Album Gambar
Tambah Album
Choose File Simpan
Batal
Gambar 4.29 Rancangan input tambah album
Keterangan : 1. Isi data album foto berdasarkan jenis mobil
2. Klik tombol “choose file” untuk input gambar
3. Klik tombol “simpan” untuk menyimpan data pada database
4. Klik tombol “batal” untuk membatalkan penyimpanan album
109
14 Rancangan input tambah galeri foto mobil
Simpan Batal
Judul Foto Album
Keterangan Gambar
Tambah galeri Foto
Choose File
Gambar 4.30 Rancangan input tambah galeri foto mobil
Keterangan : 1. Isi data foto berdasarkan album
2. Klik combo box “album” untuk pilih album foto berdasarkan jenis mobil
3. Klik tombol “choose file” untuk input gambar
4. Klik tombol “simpan” untuk menyimpan data pada database
5. Klik tombol “batal” untuk membatalkan penyimpanan galeri
110
4.2.5.3 Perancangan Output
Perancangan Output ini berdasarkan kebutuhan informasi yang diperlukan oleh para peminjam didalam web. Rancangan output ini dapat dilihat pada gambar
berikut ini : 1 Rancangan output data penjadwalan mobil
1 xxx
xxx xxx
2 xxx
xxx xxx
3 xxx
xxx xxx
No Merek mobil Tgl-pinjam
Tgl-kembali
Gambar 4.31
Rancangan output data penjadwalan mobil 2 Rancangan output transaksi peminjaman
No Transaksi
Nama Peminjam
Tgl transaksi
Jam Status
xx xx
xx xx
xx xx
xx xx
xx xx
xx xx
xx xx
xx
Gambar 4.32 Rancangan output transaksi peminjaman
111
3 Rancangan output surat jalan
Id surat Jalan
Id Pengemudi
No Pinjam xx
xx xx
xx xx
xx xx
xx xx
Gambar 4.33 Rancangan output surat jalan
4 Rancangan output pengembalian
No Pinjam Nama
Peminjam Tgl
Kembali Jam
kembali Status
xx xx
xx xx
xx xx
xx xx
xx xx
xx xx
xx xx
xx
Gambar 4.34 Rancangan output pengembalian
112
4.2.6 Perancangan Arsitektur Jaringan
Perangkat lunak Sistem Informasi Pelayanan Rental Mobil pada Bhaladika Berbasis Web ini merupakan sebuah aplikasi yang menggunakan bahasa
pemrograman PHP yaitu satu bahasa server-side yang di desain khusus untuk aplikasi web dan didukung dengan menggunakan database MySQL yang
berfungsi sebagai penyimpanan data yang dihubungkan ke localhost dalam windows sehingga dapat koneksi browser ke dalam internet.
Aplikasi ini juga dibuat untuk memudahkan calon peminjam mobil atau pelanggan dalam melakukan transaksi peminjaman mobil secara online melalui
media jaringan internet. Perangkat lunak ini akan digunakan oleh dua kategori pengguna, yaitu admin sebagai pengolahan data isi kontents dan peminjam
user, dari kedua pengguna tersebut memiliki perbedaan hak dan tugas masing –
masing. Adapun perangkat lunak tersebut dapat digambarkan secara global dan dilihat pada Gambar 4.40. di bawah ini :
113
PC Staf pelayanan
Peminjam pelanggan Server
Modem
PC Sekretaris PC Pemilik
PC Staf operasional Modem
ADMIN
Internet
User
Gambar 4.35 Gambaran Umum Cara Kerja Perangkat Lunak
114
BAB V IMPLEMENTASI DAN PENGUJIAN SISTEM
5.1 Implementasi
Implementasi Sistem Informasi Pelayanan Rental Mobil Berbasis Web pada Bhaladika Jakarta Timur dilakukan dengan menggunakan bahasa
pemograman PHP. Adapun tujuan implementasi adalah untuk mengetahui apakah perangkat lunak yang dibangun dapat berjalan dan memiliki kualitas yang baik
serta memungkinkan dilakukannya pengembangan sistem lebih lanjut.
5.1.1 Batasan Implementasi
Dalam mengimplementasikan perangkat lunak sistem informasi pelayanan rental mobil berbasis website terdapat beberapa hal yang menjadi batasan
implementasi, yaitu:
1. Proses peminjaman mobil 2. Proses konfirmasi pembayaran
3. Proses surat jalan 4. Proses pengembalian mobil
Kategori