Akhlaqul Wafi Athoillah

LAPORAN AKHIR
SISTEM INFORMASI PENYEWAAN BAJU DI NANA SALON

BERBASIS WEB
Oleh:
AKHLAQUL WAFI ATHOILLAH
NIM. 1931730073
DOSEN PEMBIMBING:
ABIDATUL IZZAH, S.Si., M.Kom
NIDN. 0728109001
PROGRAM STUDI D-III MANAJEMEN INFORMATIKA

PSDKU POLINEMA DI KOTA KEDIRI
POLITEKNIK NEGERI MALANG
JULI 2022
LAPORAN AKHIR

BERBASIS WEB
Laporan Akhir ini disusun untuk memenuhi syarat memperoleh gelar A.Md.
Program Studi D-III Manajemen Informatika
Politeknik Negeri Malang
Oleh:
AKHLAQUL WAFI ATHOILLAH
NIM. 1931730073
PROGRAM STUDI D-III MANAJEMEN INFORMATIKA

PSDKU POLINEMA DI KOTA KEDIRI
POLITEKNIK NEGERI MALANG
JULI 2022
i
HALAMAN PENGESAHAN

BERBASIS WEB
Disusun oleh :
AKHLAQUL WAFI ATHOILLAH NIM. 1931730036
Laporan Akhir ini telah diuji pada tanggal 19 Juli 2022
Disetujui Oleh:
1. Abidatul Izzah, S.Si., M.Kom. .................................................... (Pembimbing)
NIDN. 0728109001
2. Rinanza Zulmy Alhamri, S.Kom.,M.Kom. ................................. (Penguji 1)

NIDN. 0710049004
3. Berlian Rahmy Lidiawaty, S.ST.M.MT ...................................... (Penguji 2)

NIDN. 00101094003
Mengetahui, Menyetujui,
Koordinator Ketua Program Studi
PSDKU Polinema di Kota Kediri, D-III Manajemen Informatika
Dandung Novianto, S.T., M.T Fadelis Sukya, S.Kom., M.Cs.

NIP. 196411051990031003 NIP. 0730038201
ii
HALAMAN PERNYATAAN
Dengan ini saya menyatakan bahwa Laporan Akhir ini tidak terdapat karya
yang pernah diajukan untuk memperoleh gelar Ahli Madya atau Sarjana Terapan di
Perguruan Tinggi, dan sepanjang pengetahuan saya juga tidak terdapat karya atau
pendapat yang pernah ditulis atau diterbitkan oleh orang lain, kecuali yang secara
tertulis diacu dalam naskah ini dan disebutkan dalam daftar Pustaka.
Kediri, 19 juli 2022
Akhlaqul Wafi Athoillah

NIM. 1931730073
iii
ABSTRAK
Athoillah, Daniswara. “Sistem Informasi Penyewaan Baju Di Nana Salon
Berbasis Web”. Pembimbing: Abidatul Izzah, S.Si., M.Kom.
Laporan Akhir, Program Studi D-III Manajemen Informatika, Jurusan

Teknologi Informasi, PSDKU Politeknik Negeri Malang di Kota Kediri, 2022.
Sistem Informasi Penyewaan Baju Di Nana Salon Berbasis Website yang

digunakan untuk membantu pelanggan dalam mendapatkan informasi penyewaan
baju. Saat ini masih banyak pengelola salon disekitar kelurahan Bandar Lor yang
belum memiliki web. Oleh karena itu masih sulit untuk mendapatkan informasi dan
melakukan pemesanan baju tersebut. Ketika pelanggan nana salon ingin menyewa
baju, pelanggan harus datang ketempat nana salon untuk melihat produk yang akan
disewa dan cek ketersediaan produk apakah masih ada atau masih disewa oleh
orang lain. Sehingga pelanggan akan dirugikan saat datang ketempat, karena
pelanggan tidak mengetahui pasti apakah produk yang ingin disewa pelanggan
masih disewa oleh orang lain atau tidak.
Oleh karena itu, dibutuhkan aplikasi penyewaan baju berbasis website untuk
memudahkan pelanggan yang akan melakukan menyewa baju. Harapannya agar
memudahkan pelanggan dalam melihat produk, cek ketersediaan, cek ukuran tanpa
harus datang ketempat persewaan terlebih dahulu. Pemilik dapat mengorganisir
data transaksi dan mempermudah pelanggan dalam konfirmasi pembayaran,
memberikan informasi ketersediaan stok baju adat dan asesoris. Aplikasi ini
dirancang dan diimplementasikan menggunakan Bahasa pemrograman PHP,
Database MySQL serta Framework Laravel. Sistem ini juga telah diuji coba oleh
beberapa user dengan hasil yang baik. Mereka dapat mengoperasikan aplikasi
dengan mudah dan efisien.
Kata Kunci : Sistem Informasi, Penyewaan, Website, Nana Salon.
iv
ABSTRACT
Athoillah, Danishwara. "Web-Based Information System for Clothes Rental at
Nana Salon". Supervisor: Abidatul Izzah, S.Si., M.Kom.
Final Report, Informatics Management D-III Study Program, Department of

Information Technology, PSDKU State Polytechnic of Malang in Kediri City,
2022.
Information System for renting clothes at Nana Salon based on a website

that is used to assist customers in getting information on renting clothes. Currently,
there are still many salon managers around the Bandar Lor village who do not yet
have a web. Therefore, it is still difficult to get information and place an order for
these clothes. When a nana salon customer wants to rent clothes, the customer must
come to the nana salon to see the product to be rented and check whether the product
is still available or still being rented by someone else. So that the customer will be
harmed when he comes to the place, because the customer does not know for sure
whether the product that the customer wants to rent is still being rented by someone
else or not.
Therefore, a website-based clothing rental application is needed to make it
easier for customers who will rent clothes. The hope is to make it easier for
customers to see products, check availability, check sizes without having to come
to the rental place first. Owners can organize transaction data and make it easier for
customers to confirm payments, provide information on stock availability of
traditional clothes and accessories. This application is designed and implemented
using the PHP programming language, MySQL database and the Laravel
framework. This system has also been tested by several users with good results.
They can operate the application easily and efficiently.
Keywords : Information System, Rental, Website, Nana Salon.
v
KATA PENGANTAR
Puji Syukur kami panjatkan kehadirat Allah SWT atas segala rahmat dan
hidayah-Nya penulis dapat menyelesaikan laporan akhir dengan judul “Sistem
Informasi Penyewaan Baju Di Nana Salon”. Laporan akhir ini penulis susun sebagai
persyaratan untuk menelesaikan studi program Diploma III Program Studi
Manajemen Informatika, Jurusan Teknologi Informasi, Politeknik Negeri Malang.
Kami menyadari tanpa adanya dukungan dan kerja sama dari berbagai pihak,
kegiatan laporan akhir ini tidak akan dapat berjalan baik. Untuk itu, kami ingin
menyampaikan rasa terima kasih kepada:
1. Bapak Dandung Novianto,S.T.,M.T., selaku Koordinator PSDKU Polinema

Kediri
2. Bapak Fadelis Sukya, S.Kom.,M.Cs., selaku Ketua Program Studi
Manajemen Informatika
3. Ibu Abidatul Izzah, S.Si.,M.Kom., selaku dosen pembimbing Laporan Akhir
4. Bapak Rinanza Zulmy Alhamri, S.Kom.,M.Kom., selaku dosen penguji 1
5. Ibu Berlian Rahmy Lidiawaty, S.ST.M.MT, selaku dosen penguji 2
6. Dan seluruh pihak yang telah membantu dan mendukung lancarnya
pembuatan Laporan Akhir dari awal hingga akhir yang tidak dapat kami
sebutkan satu persatu.
Penulis menyadari bahwa dalam penyusunan laporan akhir ini, masih banyak
terdapat kekurangan dan kelemahan yang dimiliki penulis baik itu sistematika
penulisan maupun penggunaan Bahasa. Untuk itu penulis mengharapkan saran dan
kritik dari berbagai pihak yang bersifat membangun demi penyempurnaan laporan
ini. Semoga laporan ini berguna bagi pembaca secara umum dan penulis secara
khusus. Akhir kata, penulis ucapkan banyak terima kasih.
Kediri, 19 Juli 2022
Penulis
vi
DAFTAR ISI
HALAMAN PENGESAHAN ........................................................................................... ii

HALAMAN PERNYATAAN ......................................................................................... iii
ABSTRAK ........................................................................................................................iv
ABSTRACT....................................................................................................................... v
KATA PENGANTAR ......................................................................................................vi
DAFTAR ISI....................................................................................................................vii
DAFTAR GAMBAR ......................................................................................................... x
DAFTAR TABEL .......................................................................................................... xiii
BAB I PENDAHULUAN ................................................................................................. 1
1.1 Latar Belakang ................................................................................................... 1
1.2 Rumusan Masalah .............................................................................................. 2
1.3 Tujuan Penelitian ............................................................................................... 2
1.4 Batasan Masalah ................................................................................................. 2
1.5 Sistematika Penulisan ......................................................................................... 2
BAB II LANDASAN TEORI ........................................................................................... 4
2.1 Penelitian yang Relevan ..................................................................................... 4
2.2 Dasar Teori ......................................................................................................... 8
2.2.1 Sistem Informasi......................................................................................... 8
2.2.2 Website ....................................................................................................... 8
2.2.3 PHP ............................................................................................................ 9
2.2.4 HTML ...................................................................................................... 10
2.2.5 CSS .......................................................................................................... 11
2.2.6 JavaScript ................................................................................................. 12
2.2.7 MySQL..................................................................................................... 12
2.2.8 FrameWork .............................................................................................. 13
2.2.9 Laravel ..................................................................................................... 13
2.2.10 Use Case ................................................................................................... 14
2.2.11 Activity Diagram ...................................................................................... 15
BAB III ANALISIS DAN PERANCANGAN ................................................................ 17
3.1 Analisis Permasalahan ...................................................................................... 17
3.2 Analisis Pemecahan Masalah ........................................................................... 17
3.2.1 Metode Pengambilan Data........................................................................ 18
3.2.2 Metode Pengembangan Sistem ................................................................. 18
3.2.3 Analisis Kebutuhan Sistem ....................................................................... 19
3.3 Perancangan Sistem .......................................................................................... 21
vii
3.3.1 Use Case Diagram ................................................................................... 21
3.3.2 Activity Diagram ...................................................................................... 23
3.3.3 Sequence Diagram ................................................................................... 41
3.3.4 Relasi antar Tabel ..................................................................................... 51
3.3.5 Arsitektur Diagram................................................................................... 52
3.3.6 User Interface ........................................................................................... 52
3.4 Pengujian Sistem .............................................................................................. 68
BAB IV IMPLEMENTASI............................................................................................. 71
4.1 Implementasi Proses ......................................................................................... 71
4.1.1 Halaman Awal Website ............................................................................ 71
4.1.2 Halaman Register ..................................................................................... 72
4.1.3 Halaman Login ......................................................................................... 73
4.1.4 Halaman Dashboard Admin ..................................................................... 74
4.1.5 Halaman Data Produk Admin ................................................................... 76
4.1.6 Halaman Tambah Data Produk Pada Admin ............................................ 78
4.1.7 Halaman Ubah Data Produk Pada Admin................................................. 79
4.1.8 Halaman Tambah Data Attribute Produk Admin ...................................... 81
4.1.9 Halaman Data Kategori Produk Pada Admin ........................................... 82
4.1.10 Halaman Tambah Data Kategori Produk Pada Admin ............................. 83
4.1.11 Halaman Ubah Data Kategori Produk Pada Admin .................................. 84
4.1.12 Halaman Profil Alamat Pada Admin ........................................................ 86
4.1.13 Halaman Rekening Pada Admin ............................................................... 87
4.1.14 Halaman Transaksi Perlu di Cek Pada Admin .......................................... 88
4.1.15 Halaman Transaksi Daftar Pinjam Pada Admin ....................................... 89
4.1.16 Halaman Transaksi Denda Pada Admin ................................................... 91
4.1.17 Halaman Transaksi Daftar Kembali Pada Admin ..................................... 92
4.1.18 Halaman Transaksi Dibatalkan Pada Admin ............................................ 93
4.1.19 Halaman Produk Pada User ...................................................................... 95
4.1.20 Halaman Product Detail User ................................................................... 96
4.1.21 Halaman Keranjang Pada User ................................................................. 97
4.1.22 Halaman Checkout Pada User .................................................................. 99
4.1.23 Halaman Order Pada User ...................................................................... 101
4.2 Implementasi Data.......................................................................................... 104
4.2.1 Tabel Users ............................................................................................. 104
4.2.2 Tabel Produk .......................................................................................... 105
4.2.3 Tabel Kategori ........................................................................................ 106
4.2.4 Table Rekening ...................................................................................... 106
4.2.5 Tabel Keranjang ..................................................................................... 107
viii
4.2.6 Tabel Order ............................................................................................ 108
4.2.7 Tabel Detail Order .................................................................................. 108
4.2.8 Tabel Product Attribute .......................................................................... 109
4.2.9 Tabel Status Order .................................................................................. 110
4.2.10 Tabel Alamat Toko ................................................................................. 110
4.2.11 Tabel Kota .............................................................................................. 111
4.2.12 Tabel Provinsi ........................................................................................ 111
BAB V PENGUJIAN DAN PEMBAHASAN .............................................................. 113
5.1 Pengujian Proses ............................................................................................ 113
5.1.1 Pengujian Halaman Register................................................................... 113
5.1.2 Pengujian Halaman Login ...................................................................... 114
5.1.3 Pengujian Kelola Data Master Product ................................................... 115
5.1.4 Pengujian Profil Alamat Toko ................................................................ 118
5.1.5 Pengujian Data Profil Rekening ............................................................. 119
5.1.6 Pengujian Transaksi Penyewaan ............................................................. 121
5.1.7 Pengujian Konfirmasi Transaksi ............................................................. 126
5.1.8 Pengujian Halaman Dashboard............................................................... 128
5.1.9 Pengujian Kelola Cetak Laporan dan Nota ............................................. 129
5.2 Analisa Hasil Penelitian ................................................................................. 131
BAB VI KESIMPULAN DAN SARAN ....................................................................... 133
6.1 Kesimpulan .................................................................................................... 133
6.2 Saran .............................................................................................................. 133
DAFTAR PUSTAKA .................................................................................................... 134
ix
DAFTAR GAMBAR
Gambar 2.1 Logo PHP ....................................................................................................... 9

Gambar 2.2 Logo HTML ................................................................................................. 10
Gambar 2.3 Logo CSS ..................................................................................................... 11
Gambar 2.4 Logo JavaScript ............................................................................................ 12
Gambar 3.1 Use Case Diagram ........................................................................................ 21
Gambar 3.2 Activity Diagram Register Pelanggan........................................................... 23
Gambar 3.3 Activity Diagram Login Admin .................................................................... 24
Gambar 3.4 Activity Diagram Login Pelanggan .............................................................. 25
Gambar 3.5 Activity Diagram Tambah Data Baju ........................................................... 26
Gambar 3.6 Activity Diagram Ubah Data Baju ................................................................ 27
Gambar 3.7 Activity Diagram Hapus Data Baju .............................................................. 28
Gambar 3.8 Activity Diagram Tambah Data Kategori ..................................................... 29
Gambar 3.9 Activity Diagram Ubah Data Kategori ......................................................... 30
Gambar 3.10 Activity Diagram Hapus Data Kategori ...................................................... 31
Gambar 3.11 Activity Diagram Tambah Data Profil Rekening ........................................ 32
Gambar 3.12 Activity Diagram Ubah Data Profil Rekening ............................................ 33
Gambar 3.13 Activity Diagram Hapus Data Profil Rekening........................................... 34
Gambar 3.14 Activity Diagram Ubah Profil Alamat ........................................................ 35
Gambar 3.15 Activity Diagram Pemesanan ..................................................................... 36
Gambar 3.16 Activity Diagram Pembayaran.................................................................... 37
Gambar 3.17 Konfirmasi Pembayaran ............................................................................. 38
Gambar 3.18 Activity Diagram Denda ............................................................................. 39
Gambar 3.19 Activity Diagram Cetak Laporan ................................................................ 40
Gambar 3.20 Activity Diagram Cetak Nota ..................................................................... 41
Gambar 3.21 Sequence Diagram Register ........................................................................ 42
Gambar 3.22 Sequence Diagram Login ........................................................................... 43
Gambar 3.23 Sequence Diagram Tambah barang ............................................................ 43
Gambar 3.24 Sequence Diagram Edit barang................................................................... 44
Gambar 3.25 Sequence Diagram Hapus Barang .............................................................. 44
Gambar 3.26 Sequence Diagram Tambah Data Kategori ................................................. 45
Gambar 3.27 Sequence Diagram Ubah Data Kategori ..................................................... 45
Gambar 3.28 Sequence Diagram Hapus Data Kategori .................................................... 46
Gambar 3.29 Sequence Diagram Tambah Data Profil Rekening...................................... 46
Gambar 3.30 Sequence Diagram Ubah Data Profil Rekening .......................................... 47
Gambar 3.31 Sequence Diagram Hapus Data Profil Rekening ........................................ 47
Gambar 3.32 Sequence Diagram Ubah Data Profil Alamat ............................................. 48
Gambar 3.33 Sequence Diagram Pemesanan ................................................................... 48
Gambar 3.34 Sequence Diagram Konfirmasi Pembayaran .............................................. 49
Gambar 3.35 Sequence Diagram Denda........................................................................... 49
Gambar 3.36 Sequence Diagram Cetak Laporan.............................................................. 50
Gambar 3.37 Sequence Diagram Cetak Nota ................................................................... 51
Gambar 3.38 Relasi antar tabel ........................................................................................ 51
Gambar 3.39 Arsitektur Diagram ..................................................................................... 52
Gambar 3.40 User Interface Register ............................................................................... 53
Gambar 3.41 User Interface Login ................................................................................... 53
Gambar 3.42 User Interface Product ................................................................................ 54
Gambar 3.43 User Interface Detail Product ..................................................................... 55
Gambar 3.44 User Interface Keranjang ............................................................................ 56
Gambar 3.45 User Interface Checkout ............................................................................. 57
Gambar 3.46 User Interface Order ................................................................................... 57
x
Gambar 3.47 User Interface Pembayaran ......................................................................... 58
Gambar 3.48 User Interface Dashboard ........................................................................... 59
Gambar 3.49 User Interface Pelanggan ............................................................................ 59
Gambar 3.50 User Interface Data Baju ............................................................................ 60
Gambar 3.51 User Interface Tambah Product .................................................................. 60
Gambar 3.52 User Interface Ubah Product ...................................................................... 61
Gambar 3.53 User Interface Data Kategori ...................................................................... 61
Gambar 3.54 User Interface Tambah Data Kategori ........................................................ 62
Gambar 3.55 User Interface Ubah Data Kategori ............................................................. 62
Gambar 3.56 User Interface Data Profil Rekening ........................................................... 63
Gambar 3.57 User Interface Tambah Data Profil Rekening ............................................. 63
Gambar 3.58 User Interface Ubah Data Profil Rekening ................................................. 64
Gambar 3.59 User Interface Profil Alamat ....................................................................... 64
Gambar 3.60 User Interface Ubah Profil Alamat ............................................................. 65
Gambar 3.61 User Interface Data Transaksi..................................................................... 65
Gambar 3.62 User Interface Konfirmasi Pembayaran ...................................................... 66
Gambar 3.63 User Interface Konfirmasi Daftar Pinjam ................................................... 66
Gambar 3.64 User Interface Product Dikembalikan ......................................................... 67
Gambar 3.65 User Interface Konfirmasi Denda ............................................................... 67
Gambar 3.66 User Interface Data Transaksi Daftar Kembali ........................................... 68
Gambar 4.1 Halman Awal Website .................................................................................. 71
Gambar 4.2 Halaman Register ......................................................................................... 73
Gambar 4.3 Halaman Login ............................................................................................. 74
Gambar 4.4 Halaman Dashboard Admin ......................................................................... 75
Gambar 4.5 Halaman Data Produk ................................................................................... 77
Gambar 4.6 Halaman Tambah Data Produk ..................................................................... 78
Gambar 4.7 Halaman Ubah Data Produk ......................................................................... 80
Gambar 4.8 Halaman Tambah Data Produk Attribute...................................................... 81
Gambar 4.9 Halaman Data Kategori Produk .................................................................... 83
Gambar 4.10 Halaman Tambah Data Kategori Produk .................................................... 84
Gambar 4.11 Halaman Ubah Data Kategori Produk ........................................................ 85
Gambar 4.12 Halaman Alamat ......................................................................................... 86
Gambar 4.13 Halaman Data Rekening ............................................................................. 87
Gambar 4.14 Halaman Transaksi Perlu Dicek ................................................................ 88
Gambar 4.15 Halaman Transaksi Daftar Pinjam .............................................................. 90
Gambar 4.16 Halaman Transaksi Denda .......................................................................... 91
Gambar 4.17 Halaman Transaksi Daftar Kembali ............................................................ 92
Gambar 4.18 Halaman Transaksi Dibatalkan ................................................................... 94
Gambar 4.19 Halaman Produk Pada User ........................................................................ 95
Gambar 4.20 Halaman Produk Detail .............................................................................. 96
Gambar 4.21 Halaman Keranjang .................................................................................... 98
Gambar 4.22 Halaman Checkout ................................................................................... 100
Gambar 4.23 Halaman Order ......................................................................................... 102
Gambar 4.24 Struktur Tabel Users ................................................................................. 105
Gambar 4.25 Struktur Tabel Produk .............................................................................. 106
Gambar 4.26 Struktur Tabel Kategori ............................................................................ 106
Gambar 4.27 Struktur Tabel Rekening ........................................................................... 107
Gambar 4.28 Struktur Tabel Keranjang ......................................................................... 107
Gambar 4.29 Struktur Tabel Order ................................................................................. 108
Gambar 4.30 Struktur Detail Order ................................................................................ 109
Gambar 4.31 Struktur Tabel Producut Attribute ............................................................ 110
Gambar 4.32 Struktur Tabel Status Order ...................................................................... 110
Gambar 4.33 Struktur Tabel Alamat Toko ..................................................................... 111
xi
Gambar 4.34 Struktur Tabel Kota .................................................................................. 111
Gambar 4.35 Struktur Tabel Provinsi ............................................................................. 112
Gambar 5.1 Pengujian Halaman Register Gagal ............................................................ 113
Gambar 5.2 Pengujian Register Berhasil ........................................................................ 114
Gambar 5.3 Pengujian Halaman Login Gagal ................................................................ 114
Gambar 5.4 Pengujian Halaman Login Berhasil ............................................................ 114
Gambar 5.5 Pengujian Kelola Lihat Data Product ......................................................... 115
Gambar 5.6 Pengujian Tambah Product ......................................................................... 116
Gambar 5.7 Pengujian Ubah Product ............................................................................. 116
Gambar 5.8 Pengujian Hapus Product............................................................................ 117
Gambar 5.9 Pengujian Kelola Attribute Tambah Size Product ...................................... 117
Gambar 5.10 Pengujian Lihat Profil Alamat Toko ......................................................... 118
Gambar 5.11 Pengujian Ubah Alamat Toko................................................................... 119
Gambar 5.12 Pengujian Lihat Data Profil Rekening ...................................................... 119
Gambar 5.13 Pengujian Tambah Data Profil Rekening .................................................. 120
Gambar 5.14 Pengujian Ubah Data Profil Rekening ...................................................... 120
Gambar 5.15 Pengujian Hapus Data Profil Rekening .................................................... 121
Gambar 5.16 Pengujian Lihat Product ........................................................................... 122
Gambar 5.17 Pengujian Masukan Keranjang ................................................................. 123
Gambar 5.18 Pengujian Checkout Sewa Product ........................................................... 124
Gambar 5.19 Pengujian Transaksi Pembayaran Sewa .................................................... 125
Gambar 5.20 Pengujian Batalkan Sewa Order ............................................................... 125
Gambar 5.21 Pengujian Konfirmasi Pembayaran........................................................... 126
Gambar 5.22 Konfirmasi Tolak Transaksi Pembayaran ................................................. 127
Gambar 5.23 Pengujian Konfirmasi Transaksi Masukan Daftar Pinjam ........................ 127
Gambar 5.24 Pengujian Konfirmasi Transaksi Barang Telah Kembali .......................... 128
Gambar 5.25 Pengujian Konfirmasi Denda .................................................................... 128
Gambar 5.26 Pengujian Halaman Dashboard ................................................................. 129
Gambar 5.27 Kelola Cetak Laporan Transaksi Pertanggal ............................................. 130
Gambar 5.28 Kelola Cetak Nota Pelanggan ................................................................... 130
xii
DAFTAR TABEL
Tabel 2.1 Perbandingan Studi Literatur .............................................................................. 6

Tabel 2.2 Simbol Use Case .............................................................................................. 14
Tabel 2.3 Simbol Activity Diagram ................................................................................. 15
Tabel 3.1 Deskripsi Aktor ................................................................................................ 22
Tabel 3.2 Deskripsi Use Case Diagram ............................................................................ 22
Tabel 3.3 Pengujian Sistem .............................................................................................. 68
Tabel 5.1 Pengujian Black Box ...................................................................................... 131
xiii
BAB I
PENDAHULUAN
1.1 Latar Belakang

Nana salon adalah salah satu usaha yang bergerak di bidang jasa penyewaan
yang terletak di Jl.KH Wachid Hasyim Gg. IX No.59, Bandar Kidul, Kec.
Mojoroto, Kediri, Jawa Timur. Nana salon menawarkan jasa penyewaan berbagai
macam produk-produk seperti baju adat, asesoris, baju pengantin, rias pengantin
dengan berbagai macam model. Nana salon menyewakan peralatan tersebut untuk
keperluan berbagai acara pernikahan, 17 agustus dan hari kartini.
Ketika pelanggan nana salon ingin menyewa baju, pelanggan harus datang
ketempat nana salon untuk melihat produk yang akan disewa dan cek ketersediaan
produk apakah masih ada atau masih disewa oleh orang lain, sehingga kurang
efektif dalam melakukan cek ketersediaan, cek ukuran produk. Pelanggan akan
dirugikan saat datang ketempat, karena pelanggan tidak mengetahui pasti apakah
produk yang ingin disewa pelanggan masih disewa oleh orang lain atau tidak.
Penyewaan di nana salon masih menggunakan rekap data secara manual, sehingga
kurang efektif dalam mengetahui hasil rekap transaksi pada persewaan tersebut. Hal
ini dapat menyebabkan terjadinya kesalahan disaat pengembalian baju yang telah
dipinjam atau barang yang dipinjam tidak sesuai dengan yang dikembalikan dan
sulitnya mengetahui siapa saja yang belum mengembalikan. Ditambah minimnya
informasi persewaan yang merupakan penghambat proses memperoleh informasi
di era teknologi dan informasi yang semakin berkembang saat ini.
Dengan adanya permasalahan tersebut maka penulis mengusulkan
pembuatan Sistem Informasi Persewaan Baju Di Nana Salon Berbasis Web,
diharapkan dengan dibangunya aplikasi ini dapat memudahkan pelanggan dalam
melihat produk, cek ketersediaan, cek ukuran tanpa harus datang ketempat
persewaan terlebih dahulu. Pemilik dapat mengorganisir data rekap transaksi dan
mempermudah pelanggan dalam konfirmasi pembayaran, memberikan informasi
ketersediaan stok baju adat dan asesoris.
1
2
1.2 Rumusan Masalah

Berdasarkan latar belakang masalah di atas, maka dapat dirumuskan
beberapa masalah. Yaitu:
1. Bagaimana cara merancang sistem informasi peminjaman baju nana salon
berbasis web.
2. Bagaimana cara membangun sistem informasi peminjaman baju nana salon
berbasis web.
1.3 Tujuan Penelitian

Berdasarkan dari permasalahan dari rumusan masalah diatas telah diperoleh
tujuan dari dari penelitian ini. Yaitu :
1. Merancang sistem informasi peminjaman baju nana salon berbasis web.
2. Membangun sistem informasi peminjaman baju nana salon berbasis web.
1.4 Batasan Masalah

Dalam penelitian ini memiliki beberapa batasan masalah untuk membangun
dan mengembangkan sistem informasi peminjaman baju nana salon. Batasan
masalah tersebut adalah sebagai berikut.
1. Peminjaman baju dan rias pengantin nana salon berbasis web ini hanya
menyewakan baju adat, pernikahan umum dari daerah Jawa Timur dan
melayani pemesanan di Kota Kediri.
1.5 Sistematika Penulisan

Laporan tugas akhir ini terdiri atas enam bab yang disusun dalam
sistematika sebagai berikut :
BAB I PENDAHULUAN
Menjelaskan tentang latar belakang pembuatan aplikasi, rumusan masalah,
tujuan, batasan masalah serta sitematika penulisan.
BAB II LANDASAN TEORI
Menjelaskan teori-teori yang berkaitan dengan aplikasi ini yang nantinya
digunakan untuk menyelesaikan laporan tugas akhir ini.
BAB III ANALISIS DAN PERANCANGAN
Menjelaskan pembahasan tentang bagaimana perencanaan Sistem
Informasi Penyewaan Baju Di Nana Salon Berbasis Web dimana pada
3
perencanaan tersebut mencakup desain dari sistem serta desain interface yang
dijelaskan dengan rinci.
BAB IV IMPLEMENTASI
Menjelaskan proses pembuatan aplikasi ini dengan perencanaan sistem
aplikasi yang telah direncanakan sebelumnya sehingga akan menghasilkan suatu
sistem informasi penyewaan baju di nana salon berbasis web.
BAB V PENGUJIAN DAN PEMBAHASAN
Menjelaskan dan membahas tentang pengujian fungsional pada aplikasi
penyewaan baju di nana salon ini dimana pada bab ini akan mencakup berhasil
atau tidaknya sistem yang dijalankan oleh pelanggan dan admin.
BAB VI KESIMPULAN
Menjelaskan dan membahas mengenai kesimpulan dan saran dari aplikasi
penyewaan baju di nana salon berbasis web yang mencakup hasil keseluruhan dari
sistem aplikasi yang telah dibuat.
BAB II
LANDASAN TEORI
2.1 Penelitian yang Relevan

Penulis mengacu pada penelitian terdahulu yang relevan dengan penelitian
yang diambil dari jurnal yang sesuai dengan topik penelitian untuk menunjang
penerapan metode-metode yang sudah baku. Beberapa penilaian yang relevan
dengan penelitian ini adalah:
Tahun 2018, telah dilakukan Penelitian oleh Ahmedika Azkiya, Ade Saputra
& Sofia Sari dengan judul “Aplikasi Penyewaan Perlengkapan Pernikahan Pada
Qinoy Salon Berbasis Web”. Penelitian ini bertujuan menangani proses penyewaan,
penanganan pemesanan dan manajemen barang. Diharapkan dapat mengatasi
permasalahan dimana calon pengantin harus datang ke tempata penyewaan namun
pemilik sedang ada panggilan merias dan rekap proses pencarian data yang
membutuhkan waktu lama untuk mengetahui perlengkapan apa yang masih
tersedia. Penelitian tersebut telah berhasil merancang dan membangun sistem
persewaan alat-alat pesta agar dapat dapat membantu calon pengantin menentukan
kebutuhan dan mendapatkan informasi mengenai hal-hal yang dibutuhkan dalam
melaksanakan acara resepsi pernikahan. Calon pengantin tidak perlu harus datang
ke tempat untuk melihat dan memilih perlengkapan untuk melangsungkan acara
resepsi pernikahan, dan teraturnya sistem penyewaan barang – barang yang
dipinjam. (Azkiya, Saputra & Sari, 2018).
Tahun 2019, telah dilakukan penelitian oleh Phedra Nicolas & Mustaqiem
dengan judul “Sistem Informasi E-Marketplace Penyewaan dan Penjualan
Perlengkapan Kostum Ceremonial Di Koat Sampit Berbasis Web”. Dengan tujuan
menangani proses dimana menyediakan informasi tentang penyewaan dan
membantu penyedia dalam penjualan. Dengan tujuan tersebut diharapkan dapat
mengatasi permasalahan mulai dari calon penyewa memperoleh informasi melalui
mulut kemulut dimana tempat menyewakan dan menjual kostum ceremonial dan
pemilik kebanyakan menyediakan informasi hanya sebatas sepanduk yang disertai
informasi terbastas. Penelitian tersebut telah berhasil merancang dan membangun
sistem informasi e-marketplace penyewaan dan penjualan kostum ini menyajikan
tempat bertemunya penjual dan pembeli, di dalam e-marketplace berinteraksi pula
4
5
berbagai perusahaan-perusahaan di dunia tanpa dibatasi oleh teritori ruang

(geografis) maupun waktu. Beragam produk dan jasa dalam berbagai bentuknya
dicoba ditawarkan oleh perusahaan-perusahaan yang telah “go internet” ini dalam
berbagai domain industri, sehingga menghasilkan suatu nilai dan volume
perdagangan yang tidak kalah besar dari pasar konvensional. (Nocilas dan
Mustaqiem, 2018).
Tahun yang sama, yaitu tahun 2019, Made Suci Ariantini & Yuri Prima
Fittryani dengan judul “Sistem Informasi Reservasi Pakaian Adat Bali Berbasis
Web”. Tujuan penelitian ini adalah untuk menangani proses penyewaan dan
penanganan barang pada bali klasik wedding organizer. Diharapkan dapat
mengatasi permasalahan dimana pelanggan yang berasal luar Denpasar, harus
datang langsung untuk memesan pakaian yang diinginkan dan terjadinya kekeliruan
staf pegawai maupun owner pada saat mencatat atau memasang label pada pakaian
yang telah di pesan seperti kesalahan pencatatan tanggal penggunaan pakaian dan
kesalahan pemasangan label tanggal pengunaan pada pakaian yang telah dipesan.
Penelitian tersebut telah berhasil merancang dan membangun sistem informasi
reservasi pakaian adat bali yang memberikan fitur palanggan dalam melakukan
reservasi pakaian dengan fitur registrasi, menu pilihan pakaian yang akan disewa
dan dapat menentukan tanggal penyewaan dan tanggal kembali. (Ariyanti dan
Fittryani, 2018).
Tahun 2020, telah dilakukan penelitian oleh Muhamad Zul Andriansyah
dengan judul "Sistem Informasi Penyewaan Baju Pada Suryani Salon Berbasis
Web", tujuan penelitian tersebut adalah mempermudah pelanggan dalam sewa baju
tanpa ke lokasi penyewaan terlebih dahulu. Permasalahan yang terjadi adalah
sistem sewa yang masih manual dimana pembeli mengunjungi penyewa terlebih
dahulu, masih menggunakan sistem konvensional dalam melakukan media promosi
menggunakan baliho untuk memasang iklan sehingga kurang dikenal banyak orang
yang memerlukan jasa. Penelitian ini telah berhasil merancang dan membangun
sistem informasi penyewaan baju yang dapat menambah wawasan tentang cara
mudah untuk menyewa baju agar dapat dikembangkan dan dipromosikan kepada
masyarakat luas. (Andriansyah, 2020). Berikut adalah tabel perbandingan studi
literatur yang ditunjukan pada Tabel 2.1.
6
Tabel 2.1 Perbandingan Studi Literatur
No Judul Tujuan Fitur Hasil

1 Aplikasi Merancang dan Admin: Menghasilkan
Penyewaan membangun 1. Mengelola data aplikasi
Perlengkapan aplikasi pesanan penyewaan
Pernikahan Pada penyewaan 2. Mengelola data perlengkapan
Qinoy Salon perlengkapan barang pernikahan
Berbasis Web pernikahan berbasis web
(Azkiya, Saputra berbasis web yang User: berhasil
& Sari, 2018) digunakan untuk 1. Memesan alat dirancang agar
menangani proses pernikahan dapat membantu
penyewaan, 2. Melihat data calon pengantin
penanganan alat pernikahan menentukan
pemesanan dan kebutahan dan
manajemen barang informasi dalam
melaksanakan
acara resepsi
pernikahan.
2 Sistem Informasi Merancang dan Admin: Menghasilkan
E-Marketplace membangun 1. Pengelolaan data sistem informasi
Penyewaan dan sistem informasi konfirmasi e-marketplace
Penjualan e-marketplace pembayaran penyewaan dan
Perlengkapan penyewaan dan 2. Pengelolaan data penjualan
Kostum penjualan rekening perlengkapan
Ceremonial Di perlengkapan 3. laporan data kostum
Koat Sampit kostum pelapak ceremonial
Berbasis Web ceremonial 4. laporan data berbasis web
(Nocilas dan berbasis web, pelanggan untuk
Mustaqiem, menangani proses 5. laporan data menyajikan
2018) dimana penyewaan tempat
menyediakan Pelapak: bertemunya
informasi tentang 1. Informasi penjual dan
penyewaan dan penyewaan
pembeli, di
membantu 2. Informasi
penyedia dalam penjualan
dalam e-
penjualan User: marketplace.
1. Melihat kostum
2. Menyewa
kostum
3. Melihat riwayat
sewa
4. Melihat riwayat
beli
3 Sistem Informasi Merancang Admin: Menghasilkan
Reservasi aplikasi reservasi 1. Mengelola data aplikasi
Pakaian Adat pakaian adat bali barang reservasi
Bali Berbasis berbasis web 2. Mengelola data pakaian adat
Web (Ariyanti untuk menangani pesanan bali berbasis
dan Fittryani, proses penyewaan 3. Laporan data web untuk
2018) dan penanganan penyewaan mengetahui
barang pada bali informasi
User: tentang
7
klasik wedding 1. Melihat data penyewaan

organizer barang tanpa harus
2. Reservasi datang ke
pakaian adat tampat bali
3. Pembayaran klasik wedding
sewa pakaian organizer.
adat
No Judul Tujuan Fitur Hasil

Penyewaan Baju membangun 1. Mengelola data aplikasi
Pada Suryani aplikasi sistem barang penyewaan baju
Salon Berbasis penyewaan baju 2. Mengelola data pada suryani
Web untuk pesanan berbasis web
(Andriansyah, mempermudah 3. Konfirmasi berhasil
2020). pelanggan dalam pembayran dirancang untuk
sewa baju tanpa ke 4. Laporan mengetahui
lokasi penyewaan persewaan informasi
terlebih dahulu. tentang
User: penyewaan
1. Melihat data baju.
produk
2. Melakukan sewa
produk
3. Melakukan
pembayaran
4. Melihat riwayat
sewa
Persewaan Baju membangun 1. Mengelola baju sistem informasi
di Nana Salon Sistem Informasi produk persewaan baju
Berbasis Web Persewaan Baju di 2. Mengelola di nana salon
(Athoillah A.W, Nana Salon pesanan berbasis web
2020) Berbasis Web 3. Malakukan yang diperlukan
untuk denda untuk
memudahkan 4. Mengelola data memfasilitasi
pelanggan dalam laporan sewa pelanggan saat
melakukan melakukan cek
pencarian sewa User: ketersediaan
baju pernikahan 1. Melihat produk, cek
dan melakukan ketersediaan ukuran dalam
cek ketersediaan stok baju Toko Persewaan
tanpa harus datang 2. Mencari produk Nana Salon
ke persewaan baju
langsung. 3. Melakukan
sewa produk
4. Melakukan
pembayaran
5. cek denda
Pada Tabel 2.1 Bagian baris ke 5 merupakan penelitian yang akan dilakukan
oleh penulis. Penelitian ini berjudu “Sistem Informasi Persewaan Di Nana Salon
8
Berbasis web” yang memiliki perbedaan dengan penelitian terdahulu, antara lain :
1. Mengimplementasikan Framwork Laravel
2. Terdapat fitur pengelolaan upload gambar produk
3. Terdapat fitur konfirmasi pembayaran
4. Terdapat fitur pengelolaan laporan sewa
5. Terdapat fitur cek denda
2.2 Dasar Teori

Penelitian dilaksanakan berdasarkan landasan teori berkaitan dengan
“Sistem Informasi Peminjaman Baju Nana Salon Berbasis Web” yang akan
diuraikan sebagai berikut.
2.2.1 Sistem Informasi

Pengertian sistem informasi adalah kumpulan data yang telah diolah
menjadi sebuah bentuk yang berarti bagi penerimanya dan bermanfaat dalam
pengambilan keputusan saat ini atau mendatang (Al Fatta, 2007).
Sistem informasi merupakan serangkaian komponen berupa manusia,
prosedur, data, dan teknologi (seperti komputer) yang digunakan untuk melakukan
sebuah proses untuk menghasilkan informasi yang bernilai untuk pengambilan
keputusan. Sistem informasi melekat dan merupakan infrastruktur penunjang
keberhasilan bagi setiap organisasi (dalam mencapai tujuannya). Sebagai contoh,
dalam organisasi bisnis, laporan omzet penjualan dibuat sebagai bahan evaluasi dan
dasar pengambilan keputusan untuk melakukan perbaikan bagi pihak
internal.(Soeherman, Bonnie; Pinontoan, 2008)
Pengertian sistem informasi di atas, maka dapat ditarik kesimpulan bahwa
sistem informasi adalah kumpulan dari prosedur kegiatan yang memproses data
sedemikian rupa sehingga dapat menghasilkan informasi yang bermanfat agar dapat
digunakan untuk mengambil suatu keputusan yang tepat.
2.2.2 Website
Website adalah salah satu aplikasi yang berisikan dokumen-dokumen
multimedia (teks, gambar, animasi, video) didalamnya yang menggunakan protokol
HTTP (Hypertext Transfer Protocol) dan untuk mengaksesnya menggunakan
perangkat lunak yang disebut browser (Arif, 2012).
9
Ditinjau aspek content atau isi, web dapat dibagi menjadi 2 jenis, yaitu web
statis dan web dinamis. Web Statis adalah web yang isinya atau content tidak
berubah-ubah. Maksudnya adalah isi dari dokumen web tersebut taidak dapat
diubah secara cepat dan mudah. Ini karena teknologi yang digunakan untuk
membuat dokumen web ini tidak memungkinkan dilakukan perubahan isi atau data.
Teknologi yang digunakan untuk web statis adalah jenis Client Side Scripting
seperti HTML, Cascading Style Sheet (CSS). Contoh situs web statis diantaranya
adalah web profil perusahaan yang lebih dominan menggunakan animasi flash atau
HTML, web kumpulan produk animasi.
Web Dinamis adalah jenis web yang content atau isinya dapat berubah-ubah
setiap saat. Untuk membuat web dinamis diperlukan beberapa komponen yaitu
Client Side Scripting (HTML, Javascript, Cascading Style Sheet), Server Side
Scripting seperti PHP, program basis data seperti MySQL untuk menyimpan data-
datanya. Contoh situs web dinamis diantaranya adalah situs web berita, situs web e-
Commerce dan situs web e-Banking.
2.2.3 PHP
PHP merupakan bahasa pemrograman script server-side yang didesain
untuk pengembangan web. PHP juga digunakan sebagai bahasa pemrograman
umum. PHP di kembangkan pada tahun 1995 oleh Rasmus Lerdorf, dan sekarang
dikelola oleh The PHP Group. Situs resmi PHP beralamat di http://www.php.net.
Fungsi lain PHP adalah untuk mengkoneksikan halaman website dengan basis data
yang digunakan. Gambar 2.1 merupakan gambar logo PHP.
Gambar 2.1 Logo PHP

Dalam website dinamis dan interaktif, bahasa pemrograman PHP digunakan
sebagai media untuk mempersingkat tatanan bahasa pemrograman HTML dan CSS.
10
Dengan menggunakan bahasa pemrograman HTML dan CSS, maka dibutuhkan

baris kode yang sangat panjang. Sedangkan dengan menggunakan bahasa
pemrograman PHP, baris kode yang dibutuhkan dapat dipersingkat hingga menjadi
beberapa baris saja (Muhardin, 2003).
Dalam penulisan PHP menggunakan syntax <?php .. ?> dan seluruh scipt
yang digunakan ditempatkan dalam syntax tersebut . Dalam penulisan PHP
menggunakan dua cara yaitu internal dan eksternal. Pada cara penulisan secara
internal syntax PHP ditempatkan di antara syntax <head> dan <body> sedangkan
untuk penulisan secara eksternal syntax PHP ditempatkan pada berkas khusus
kemudian dipanggil menggunakan tautan pada halaman website.
2.2.4 HTML
HTML ( Hypertext Markup Language ) adalah bahasa pemrograman dasar
yang digunakan untuk membangun suatu halaman web. HTML adalah
bahasa markup yang umum digunakan oleh para developer web. Karena
kemudahan dalam menggunakannya, HTML menjadi bahasa pemrograman web
yang populer di kalangan para developer(Ariona, 2013)
Gambar 2.2 Logo HTML

HTML mempunyai fungsi di antaranya dapat menentukan format suatu teks,
membuat list, membuat link ke dokumen lain, menyisipkan gambar, serta dapat
menampilkan informasi dalam bentuk tabel. Selain itu, HTML juga berfungsi untuk
mengatur tampilan dari halaman web dan isinya, menambahkan objek seperti
gambar, video, suara, dan lain-lain.
Bahasa Pemrograman HTML merupakan bahasa pemrograman dasar yang
wajib dikuasai oleh para web programmer untuk dapat mendesain web sesuai
dengan keinginan pemesan website. Pada dasarnya syntax HTML terdiri dari
11
beberapa syntax dasar yaitu : <html>, <head>, <title>, <body>. Syntax <body>
berfungsi untuk meletakan konten yang dimuat oleh halaman web mulai dari link,
heading, gambar, dan lain-lain, untuk meletakan tautan ke dokumen CSS, PHP, dan
JavaScript adalah di syntax <head>. Sedangkan syntax <title> berfungsi sebagai
tempat diberikannya judul suatu halaman website.
2.2.5 CSS
CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan
dokumen. Adanya CSS memungkinkan kita untuk menampilkan halaman yang
sama dengan format yang berbeda. Pada umumnya CSS dipakai untuk memformat
tampilan halaman web yang dibuat dengan Bahasa HTML dan XHTML (Ariona,
2013).
Gambar 2.3 Logo CSS

Terdapat dua cara penulisan CSS yaitu inline style sheet dan embedded style
sheet. Perbedaan dari kedua cara tersebut adalah peletakan syntax CSS yang
digunakan, pada cara inline style sheet, CSS didefinisikan langsung pada tag HTML
yang bersangkutan. Cara penulisannya cukup dengan menambahkan
atribut style dalam tag HTML. Sedangkan pada cara embedded style sheet CSS
didefinisikan terlebih dahulu dalam syntax <style> </style> di atas syntax <body>.
Pada pendefinisian ini disebutkan atribut-atribut CSS yang akan digunakan untuk
tag-tag HTML, yang selanjutnya dapat digunakan oleh tag HTML yang
bersangkutan.
CSS memiliki 2 sifat dalam penerapannya pada halaman website yaitu
internal dan eksternal. Pada sifat eksternal CSS dituliskan pada dokumen tersendiri
yang kemudian dipanggil dengan tautan pada halaman HTML yang akan diatur
desainnya. Sedangkan untuk penulisan secara internal, syntax-syntax CSS cukup
12
dituliskan pada halaman HTML yang digunakan kemudian dipanggil menggunkana

id style sesuai pada tag HTML yang akan ditambahkan style CSS.
2.2.6 JavaScript
JavaScript adalah bahasa pemrograman web yang bersifat Client Side
Programming Language yaitu tipe bahasa pemrograman yang pemrosesannya
dilakukan oleh client. Aplikasi client yang dimaksudkan adalah merujuk pada web
browser seperti Opera, Google Chrome dan Mozilla Firefox. Bahasa pemrograman
Client Side berbeda dengan bahasa pemrograman Server Side seperti PHP.
Gambar 2.4 Logo JavaScript

Dengan adanya JavaScript, maka teknik penulisan HTML dapat dilakukan
dengan dua cara, yaitu dengan membuat program JavaScript untuk menghasilkan
dokumen HTML atau dengan membuat dokumen HTML seperti biasa, apabila
terdapat program JavaScript, maka web designer dapat menambahkan program
JavaScript tersebut sebagai sisipan saja. dengan demikan JavaScript dapat membuat
halaman website yang digunakan akan semakin interaktif dan dinamis (Khanedy,
2007).
Program dalam JavaScript berbentuk script, yang akan dijalankan oleh
interpreter kemudian ditanamkan ke dalam web browser. Dengan demikian web
browser dapat memasukan program JavaScript. Program JavaScript dimasukan ke
dalam dokumen HTML dengan ditandai dengan tag yang diawali dengan <Script
…> dan diakhiri dengan </script> sama seperti tag pada html (<>…</>).
2.2.7 MySQL
MySQL adalah sebuah sistem manajemen database relasi (relational
database management system) yang bersifat “terbuka” (open source). Terbuka
Maksudnya adalah MySQL boleh di download oleh siapa saja, baik versi kode
13
program aslinya (source code program) maupun versi binernya (executable

program) dan bisa digunakan secara (relatif) gratis baik untuk dimodifikasi sesuai
dengan kebutuhan seseorang maupun sebagai suatu program aplikasi computer
(Arbie, 2004).
Secara umum perintah SQL dibagi menjadi tiga bagian yaitu :
1. DDL (Data Definition Language)
Perintah DDL sendiri terdiri dari CREATE, ALTER, DROP yang
digunakan untuk membangun objek – objek dalam database seperti table.
2. DML (Data Manipulation Language)
Perintah – perintah dalam DML terdiri atas SELECT, INSERT, UPDATE
dan DELETE yang digunakan untuk memanipulasi data.
3. DCL (Data Control Language)
Perintah DCL terdiri dari GRANT dan REVOKE. DCL merupakan control
keamanan terhadap database dan tabelnya, yaitu mengatur hak akses dan
cara mencabut hak akses, agar table – table tertentu hanya bisa diakses oleh
orang – orang yang dikehendaki.
2.2.8 FrameWork
Pengertian framework menurut Naista adalah suatu struktur konseptual dasar yang
digunakan untuk memecahkan atau menangani suatu masalah yang kompleks. Singkatnya,
framework adalah wadah atau kerangka kerja dari sebuah website yang akan dibangun.
Dengan menggunakan kerangka tersebut waktu yang digunakan dalam membuat website
lebih singkat dan memudahkan dalam melakukan perbaikan (Mediana, Delia; Nurhidayat,
2018).
2.2.9 Laravel
Salah satu framework yang banyak digunakan oleh programmer adalah
framework laravel. Laravel adalah framework berbasis PHP yang sifatnya open
source, dan menggunakan konsep model – view – controller. Laravel berada di
bawah lisensi MIT License dengan menggunakan Github sebagai tempat berbagi
code menjalankannya.
Dalam penggunaanya laravel memiliki beberapa kekurangan salah satunya
yaitu ukuran file yang cukup besar. Di dalam laravel terdapat file yang sifatnya
default seperti vendor. File tersebut tidak boleh dihapus sembarangan sehingga
14
ukuran website yang dibuta berukuran cukup besar. Selain itu, dibutuhkan koneksi
internet untuk instalasi dan mengunduh library laravel, dan PHP minimal versi 5.4
untuk menjalankannya (Mediana, Delia; Nurhidayat, 2018).
2.2.10 Use Case

Use Case digunakan untuk mengetahui fungsi apa saja yang ada di dalam
sebuah sistem dan siapa saja yang berhak menggunakan fungsi-fungsi itu (Sukamto,
R. A; Shalahudin, 2014).
Simbol use case dan keteranggannya dapat dilihat pada Tabel 2.2.
Tabel 2.2 Simbol Use Case

No Simbol Deskripsi
1 Use Case Fungsionalitas yang disediakan sistem sebagai unit-

unit yang saling bertukar pesan antar unit atau aktor;
nama use case biasanya dinyatakan dengan menggunakan kata
kerja di awal frase nama use case.
2 Aktor / Actor Orang, proses, atau sistem lain yang berinteraksi

dengan sistem informasi yang akan dibuat, jadi
walaupun simbol dari aktor adalah gambar orang,
tapi aktor belum tentu merupakan orang; biasanya
dinyatakan menggunakan kata benda di awal frase
nama aktor.
No Simbol Deskripsi
3 Asosiasi / Association Komunikasi antara aktor dan use case yang

berpartisipasi pada use case atau use case memiliki
interaksi dengan aktor.
4 Ekstensi / Extend Relasi use case tambahan ke sebuah use case dimana
use case yang ditambahkan dapat berdiri sendiri
walau tanpa use case tambahan itu; mirip dengan
prinsip inheritance pada pemrograman berorientasi
objek; biasanya use case tambahan memiliki nama
depan yang sama dengan use case yang
ditambahkan.
5 Generalisasi / Hubungan generalisasi dan spesialisasi (umum-

Generalization khusus) antara dua buah use case dimana fungsi
yang satu adalah fungsi yang lebih umum dari
lainnya.
15
6 Menggunakan / Include / Relasi use case tambahan ke sebuah use case dimana
Uses use case yang ditambahkan memerlukan use case ini
untuk menjalankan fungsinya atau sebagai syarat
dijalankan use case ini. Include berarti use case yang
ditambahkan akan selalu dipanggil saat use case
tambahan dijalankan.
2.2.11 Activity Diagram

Diagram aktivitas atau activity diagram menggambarkan workflow (aliran kerja)
atau aktivitas dari sebuah sistem atau proses atau menu yang ada pada perangkat lunak.
Diagram aktivitas menggambarkan aktivitas sistem bukan apa yang dilakukan aktor, jadi
aktivitas yang dapat dilakukan oleh sistem (Sukamto, R. A; Shalahudin, 2014).
Simbol Activity Diagram dan keteranggannya dapat dilihat pada Tabel 2.3
Tabel 2.3 Simbol Activity Diagram

No Simbol Deskripsi
1 Status awal Status awal aktivitas sistem, sebuah diagram
aktivitas memiliki sebuah status awal.
2 Aktivitas Aktivitas yang dilakukan sistem, aktivitas

biasanya diawali dengan kata kerja.
aktivitas
No Simbol Deskripsi
3 Percabangan / Decision Asosiasi percabangan dimana jika ada ada

pilihan aktivitas lebih dari satu.
4 Penggabungan / Join Asosiasi penggabungan dimana lebih dari

satuaktivitas digabungkan menjadi satu.
5 Status akhir Status akhir yang dilakukan sistem, sebuah

diagram aktivitas memiliki sebuah status akhir.
16
6 Swimlane Memisahkan organisasi bisnis yang

bertanggungjawab terhadap aktivitas yang terjadi.
nama swimlane
BAB III
ANALISIS DAN PERANCANGAN
3.1 Analisis Permasalahan

Analisis permaslahan bertujuan untuk mengetahui kebutuhan sistem baru
yang akan dibangun. Analisis sistem juga perlu mempelajari apa dan bagaimana
operasi sistem yang ada sebelum mencoba untuk menganalisa permasalahan,
kelemahan dan kebutuhan pemakai sistem untuk dapat memberikan rekomendasi
penyelesaian permasalahan tersebut.
Dalam penelitian ini, penyewaan baju adat dan pernikahan di nana salon
masih mengalami beberapa masalah, Ketika pelanggan nana salon ingin sewa baju,
pelanggan harus datang ketempat nana salon untuk melihat produk yang akan
disewa dan cek ketersediaan produk apakah masih ada atau masih disewa oleh
orang lain, sehingga kurang efektif dalam melakukan cek ketersediaan, cek ukuran
produk. Pelanggan akan dirugikan saat datang ketempat, karena pelanggan tidak
mengetahui pasti apakah produk yang ingin disewa pelanggan masih disewa oleh
orang lain atau tidak. Penyewaan di nana salon masih menggunakan rekap data
secara manual, sehingga kurang efektif dalam mengetahui hasil rekap transaksi
pada persewaan tersebut. Hal ini dapat menyebabkan terjadinya kesalahan disaat
pengembalian baju yang telah dipinjam atau barang yang dipinjam tidak sesuai
dengan yang dikembalikan dan sulitnya mengetahui siapa saja yang belum
mengembalikan.
3.2 Analisis Pemecahan Masalah

Berdasarkan uraian permasalahan yang telah disampaikan diatas maka
penulis mengusulkan pembuatan Sistem Informasi Peminjaman Baju Dan Rias
Pengantin Nana Salon Berbasis Website. Dengan adanya Sistem Informasi
Peminjaman Baju Dan Rias Pengantin Nana Salon Berbasis Website, diharapkan
memudahkan pelanggan dalam melihat produk dimana saja aslakan ada internet
tanpa harus datang ketempat persewaan terlebih dahulu. Pemilik dapat
mengorganisir data rekap transaksi di laporan, dapat melihat status siapa saja yang
belum mengembalikan baju dan dapat melakukan denda saat pelanggan
mengembalikan baju ditempat persewaan. Mempermudah konfirmasi pembayaran
17
18
pelanggan, ketika pelanggan melakukan sewa dan telah melakukan pembayaran

admin akan mengkonfirmasi pembayaran dari pelanggan tersebut.
3.2.1 Metode Pengambilan Data

Dalam melakukan penelitian untuk mendapatkan data dan informasi, maka
metode yang digunakan dalam proses pengumpulan data sebagai berikut:
1. Wawancara
Metode pengumpulan data dengan cara mendatangi secara langsung ke nana
salon Bandar Lor, menanyakan mengenai proses saat pelanggan akan sewa baju
oleh pemilik salon yang mempunyai wewenang untuk memberikan informasi.
Sehingga informasi yang didapat lebih lengkap, benar dan akurat. Pada saat di
lokasi, saya menanyakan ke pemilik prihal proses pelanggan akan sewa baju.
Pelanggan datang ketempat salon dengan memilih baju dan ukurannya, menetapkan
tanggal sewa dan tanggal kembali setelah itu membayarnya dengan uang tunai dan
mendapatkan kwitansi untuk bukti. Sedangkan pelanggan yang sudah lama atau
sudah kenal, membayarnya menggunakan transfer dan bukti transfer dikirimkan via
whatsapp pemilik.
2. Observasi
Metode ini dilakukan dengan cara mengamati langsung objek yang
berhubungan dengan masalah yang diambil di saat berada di nana salon Bandar Lor.
Pengumpulan data yang dilakukan di sistem informasi penyewaan baju yaitu sistem
pesan atau menyewa baju yang berjalan saat ini dengan cara pelanggan datang
ketempat salon memilih baju, assessoris dan ukuranya, menetapkan tanggal mulai
dan tanggal Kembali lalu membayarnya dengan uang tunai dan mendapatkan
kwitansi sebagai bukti saat mengembalikan baju tersebut.
3.2.2 Metode Pengembangan Sistem

Beberapa metode yang dipakai dalam pengumpulan dan pendukung
penelitian ini yaitu melakukan observasi langsung dan kepustakaan. Penelitian ini
menggunakan teknik pengembangan waterfall, yang terbagi atas beberapa tahap
yaitu tahap awal dari tahap analisa yaitu tahap untuk pengumpulan data yang
dilakukan melalui observasi pada Nana Salon, Tahap dua dan tiga yaitu tahap
perencanaan dan mendesain sistem website yang akan dibangun. Tahap keempat
19
menuliskan kode program supaya sistem dapat beroperasi dan melakukan

pengujian. Tahap kelima yaitu pemeliharaan sistem. Pada penelitian ini, tahapan
penelitian yang dilakukan hanya sampai tahapan perancangan mendesain sistem
website.
3.2.3 Analisis Kebutuhan Sistem

Suatu sistem dapat dirancang dan dibangun dengan mengetahui terlebih
dahulu kebutuhan apa saja yang diperlukan untuk membangun sistem itu sendiri.
Analisis kebutuhan sistem berisi analisa tentang masalah yang ada saat penelitian,
dengan mengetahui kebutuhan yang perlu diperbaiki dapat menjadikan sebagai
acuan pembangunan suatu sistem, dimana sistem dapat ditanamkan fitur-fitur yang
bisa memecahkan permasalahan yang ada. Berikut kebutuhan sistem yang telah
peneliti analisa untuk membangun Sistem Informasi Peminjaman Baju Nana Salon
Berbasis Web yaitu :
a. Kebutuhan Fungsional
Kebutuhan Fungsional adalah kebutuhan yang berisi proses-proses apa saja
yang nantinya dilakukan oleh sistem. Berikut adalah kebutuhan fungsional Sistem
Informasi Peminjaman Baju Dan Rias Pengantin Nana Salon Berbasis Web.
1. Admin
Admin aplikasi dapat melakukan berbagai tugas diantaranya sebagai
berikut:
a) Admin dapat melakukan login.
b) Admin dapat mengelola baju.
c) Admin dapat mengelola pesanan.
d) Admin dapat malakukan denda.
e) Admin dapat mengelola transaksi.
f) Admin dapat mengelola diskon produk
2. Pelanggan
a) Pelanggan dapat melihat ketersediaan stock baju.
b) Pelanggan dapat mencari barang (baju).
c) Pelanggan dapat menyewa baju.
20
d) Pelanggan dapat menempatkan jaminan (ktp) saat proses menyewa

baju.
e) Rumus perhitungan denda A x B x C, A = denda, B = jumlah baju yang
dipinjam, C = telat per hari. Contoh: A = 10.000, B = 2 dan C = 3 hari
maka 10.000 x 2 x 3 hari = 60.000, denda yang didapatkan sejumlah
60.000 ribu.
f) Denda = A x B x C………………………………………………..
= 10.000 x 2 x 3 hari………………………………………………
= 60.000…………………………………………………...............
A = Denda
B = Jumlah baju yang dipinjam
C = jumlah hari yang terlambat
b. Kebutuhan Non-Fungsional
Kebutuhan Non-Fungsional adalah kebutuhan yang menitikberatkan pada
properti prilaku yang dimiliki oleh sistem. Berikut adalah kebutuhan non-
fungsional Sistem Informasi Peminjaman Baju Dan Rias Pengantin Nana Salon
Berbasis Web.
1. Kebutuhan Perangkat Keras (Hardware)
Spesifikasi perangkat keras komputer yang digunakan dalam pembuatan
progam ini adalah:
a) Personal computer dengan processor Intel Core i3.
b) Memory RAM minimum 4GB.
c) Monitor min 14” resolution 1200x800.
d) Hardisk 500GB sebagai media penyimpan.
e) Smartphone.
2. Kebutuhan Perangkat Lunak (Software)
Hardware tidak dapat menyelesaikan masalah tanpa adanya software.
Software merupakan komponen di dalam sistem data berupa progam atau
instruksi untuk mengontrol suatu sistem. Perangkat lunak yang diperlukan untuk
menjalankan dan membangun aplikasi adalah
a) Microsoft Visual Studio Code.
21
b) Xampp.
c) Operating Sistem Windows 10 64 bit.
d) Mozilla Firefox/UC Browser/Chrome.
3.3 Perancangan Sistem

Perancangan sistem dilakukan untuk mengidentifikasi use case diagram,
activity diagram, relasi antar tabel dalam sistem, arsitektur sistem dan desain
antarmuka.
3.3.1 Use Case Diagram

Perancangan Use Case Diagram adalah proses dimana suatu diagram
menunjukkan hubungan antara actors dan use case digunakan untuk analisis dan
desain suatu sistem. Berikut adalah use case diagram Sistem Informasi Peminjaman
Baju Dan Rias Pengantin Nana Salon Berbasis Web ditunjukkan pada gambar 3.1.
Konfirmasi
Pembayaran pembayaran
Sewa baju
Kelola denda
Mengedit data
Melihat barang Menambah barang barang
Menambah Mengedit data

Mengelola pesanan
rekening rekening
Menghapus barang
Mencari barang
Menghapus
rekening Menambah
Mengelola barang kategori
Cetak laporan
Mengedit data Mengelola
profil alamat Profil Rekening
Mengedit data
Mengelola kategori
Kategori
Mengelola
Profil Alamat Menghapus
kategori
Login
Register
Pelanggan Admin
Gambar 3.1 Use Case Diagram
Berdasarkan use case yang ditunjukan Gambar 3.1 dapat disimpulkan

bahwa terdapat 2 aktor pada sistem informasi ini. Kedua actor tersebut adalah
admin, pelanggan, setiap aktor pada sistem informasi peminjaman baju ini memiliki
fungsionalitas berbeda-beda. Berikut deskripsi actor dan deskripsi use case sebagai
berikut.
1. Deskripsi Aktor
Terdapat dua actor yang terlibat dalam sistem informasi peminjaman baju
ini, yaitu admin, pelanggan. Berikut merupakan penjelasan mengenai
deskripsi aktor yang dapat dilihat pada Tabel 3.1
22
Tabel 3.1 Deskripsi Aktor
No. Aktors Deskripsi

1. Admin Orang yang dapat mengelola data baju dan mengelola
pembayaran.
2. Pelanggan Orang yang dapat melakukan peminjaman (sewa).
2. Deskripsi Use Case

Terdapat delapan use case yang terlibat dalam sistem informasi peminjaman
baju ini, yaitu mengelola barang yang akan dipecah kedalam create, update,
delete, mengelola pesanan yang dimana dipecah kedalam sewa baju atau
pesanan, pembayaran, konfimasi pembayaran dan laporan. Berikut merupakan
penjelasan mengenai deskripsi use case yang dapat dilihat pada tabel 3.2.
Tabel 3.2 Deskripsi Use Case Diagram
No. Use Case Keterangan

1. Login Proses akses masuk sistem
2. Menambah barang Proses menambahkan barang yang dilakukan oleh
admin.
3. Mengedit data Proses mengedit barang yang dilakukan oleh admin.
barang
4. Mengahapus barang Proses menghapus barang yang dilakukan oleh admin.
5. Menambah kategori Proses menambahkan kategori yang dilakukan oleh
admin.
6. Mengedit data Proses mengedit kategori yang dilakukan oleh admin.
kategori
7. Menghapus kategori Proses menghapus barang yang dilakukan oleh admin.
8. Menambahkan profil Proses menambahkan profil rekening yang dilakukan
rekening oleh admin.
9. Mengedit data profil Proses mengedit profil rekening yang dilakukan oleh
rekening admin.
10. Menghapus profil Proses menghapus profil rekening yang dilakukan oleh
rekening admin.
11. Mengedit data profil Proses mengedit profil alamat yang dilakukan oleh
alamat admin.
12. Cetak laporan Proses mencetak laporan transaksi ataupun cetak nota
pelanggan yang dilakukan oleh admin.
13. Pemesanan Proses pemesanan sewa baju yang dilakukan oleh
pelanggan.
14. Pembayaran Proses pembayaran sewa baju setelah checkout.
15. Konfirmasi Proses konfirmasi pembayaran yang dilakukan oleh
Pembayaran admin.
23
16. Kelola denda Proses denda saat pelanggan mengembalikan baju dan
admin akan mengecek apakah pelanggan mendapatkan
denda atau tidak
3.3.2 Activity Diagram

Diagram activity digunakan untuk menunjukkan bagaimana aktivitas yang
terjadi saat user menjalankan sistem informasi. Berikut adalah activity diagram
yang ada pada “Sistem Informasi Peminjaman Baju Nana Salon Berbasis Web”.
a. Activity Diagram Register Pelanggan

Pada activity diagram ini pelanggan dapat melakukan register. Berikut
adalah activity diagram register yang ditunjukan gambar 3.2.
Register
Pelanggan Sistem Database
Input nama,
email ,alamat,
jaminan ktp, Memproses Data masuk
nomer hp,
password
Login Memproses Ambil data user
Menu
Gambar 3.2 Activity Diagram Register Pelanggan
Berdasarkan diagram activity pada gambar 3.2 diketahui alur register

pelanggan. Ketika pelanggan register sistem akan menampilkan form register,
nama, email, alamat, nomer hp, jaminan berupa foto ktp dan password. Ketika
sudah diisi klik tombol register dan akan menampilkan halaman login.
24
b. Activity Diagram Login Admin

Pada activity diagram ini admin dapat melakukan login. Berikut adalah
activity diagram login yang ditunjukan pada gambar 3.3.
Login Admin
Admin Sistem Database
Masukan
username dan Meminta Validasi
password
Salah
Menu Login Valid Benar
Gambar 3.3 Activity Diagram Login Admin
Berdasarkan diagram activity pada gambar 3.3 diketahui alur login

pengguna admin. Ketika admin mengakses sistem, sistem akan menampilkan
halaman login. Kemudian admin dapat melakukan login dengan memasukan email
dan password. Jika benar, maka akan menuju halaman dashboard, namun jika salah
maka pengguna akan diarahkan Kembali ke halaman login.
c. Activity Diagram Login Pelanggan

Pada activity diagram ini pelanggan dapat melakukan register dan login
pada sistem. Berikut adalah activity diagram login pelanggan yang ditunjukan pada
gambar 3.4.
25
Login Pelanggan
User Sistem Database
Register
Masukan data
email, username,
alamat, no telp,
jaminan dan
password
Login Memproses validasi
salah
Menu Login Valid benar
Gambar 3.4 Activity Diagram Login Pelanggan
Berdasarkan diagram activity pada gambar 3.4 diketahui alur login

pelanggan. Ketika pelanggan mengakses sistem, sistem akan menampilkan
halaman login. Kemudian pelanggan dapat melakukan register terlebih dahulu
dengan memasukan email, username, alamat, no telp, password. Jika benar, maka
akan menuju halaman dashboard, namun jika salah maka pengguna akan diarahkan
Kembali ke halaman login.
d. Activity Diagram Tambah Data Baju

Pada activity diagram ini admin dapat melakukan tambah barang pada
sistem. Berikut adalah activity diagram tambah data baju yang ditunjukan pada
gambar 3.5.
26
Tambah data baju
Admin Sistem
Login
salah validasi benar
menampilkan
dashboard admin
pada sidebar pilih menampilkan list

data baju baju
pilih button
tambah
isikan data baju

dan deskripsi
Menampilkan data
Simpan data
list baju
Gambar 3.5 Activity Diagram Tambah Data Baju
Berdasarkan activity diagram pada gambar 3.5 diketahui alur tambah barang
oleh admin. Ketika admin berhasil melakukan login, sistem akan menampilkan
halaman dashboard. Kemudian admin masuk ke halaman data baju, pada halaman
tersebut admin bisa melakukan tambah data baju.
e. Activity Diagram Ubah Data Baju

Pada activity diagram ini admin dapat melakukan edit barang pada sistem.
Berikut adalah activity diagram ubah data baju yang ditunjukan pada gambar 3.6.
27
Ubah data baju
Admin Sistem
Login
menampilkan
dashboard admin

data baju baju
pilih tombol iccon
ubah pada kolom
aksi
ubah data baju
dan deskripsi yang
akan diubah
Menampilkan list
Simpan data
data kategori
Gambar 3.6 Activity Diagram Ubah Data Baju
Berdasarkan activity diagram pada gambar 3.6 diketahui alur tambah barang
tersebut admin bisa melakukan edit data baju.
f. Activity Diagram Hapus Data Baju

Pada activity diagram ini admin dapat melakukan hapus barang pada sistem.
Berikut adalah activity diagram hapus data baju yang ditunjukan pada gambar 3.7.
28
Hapus data baju
Admin Sistem
Login
menampilkan
dashboard admin

data baju data baju
tidak
pilih icon hapus
pada kolom aksi
ya
Menampilkan list
data baju
Gambar 3.7 Activity Diagram Hapus Data Baju
Berdasarkan activity diagram pada gambar 3.7 diketahui alur hapus barang
tersebut admin bisa melakukan hapus data baju.
g. Activity Diagram Tambah Data Kategori

Pada activity diagram ini admin dapat melakukan menambahkan data
kategori pada sistem. Berikut adalah activity diagram tambah data kategori yang
ditunjukan pada gambar 3.8.
29
Tambah data kategori
Admin Sistem
Login
menampilkan
dashboard admin

kategori data kategori
pilih tombol
tambah
isikan data nama

kategori
Menampilkan list
Simpan data
data kategori
Gambar 3.8 Activity Diagram Tambah Data Kategori
Berdasarkan activity diagram pada gambar 3.8 diketahui alur tambah data
kategori oleh admin. Ketika admin berhasil melakukan login, sistem akan
menampilkan halaman dashboard. Kemudian admin masuk ke halaman data
kategori, pada halaman tersebut admin bisa melakukan tambah data kategori.
h. Activity Diagram Ubah Data Kategori

Pada activity diagram ini admin dapat melakukan mengubah data kategori
pada sistem. Berikut adalah activity diagram ubah data kategori yang ditunjukan
pada gambar 3.9.
30
Ubah data kategori
Admin Sistem
Login
menampilkan
dashboard admin

pilih tombol iccon
ubah pada kolom
aksi
ubah nama
kategori
Menampilkan list
Simpan data
data kategori
Gambar 3.9 Activity Diagram Ubah Data Kategori
Berdasarkan activity diagram pada gambar 3.9 diketahui alur ubah data
kategori, pada halaman tersebut admin bisa melakukan ubah data kategori.
i. Activity Diagram Hapus Data Kategori

Pada activity diagram ini admin dapat melakukan hapus data kategori pada
sistem. Berikut adalah activity diagram hapus data kategori yang ditunjukan pada
gambar 3.10.
31
Hapus data kategori
Admin Sistem
Login
menampilkan
dashboard admin

tidak
pilih icon sampah
pada kolom aksi
ya
Menampilkan list
data kategori
Gambar 3.10 Activity Diagram Hapus Data Kategori
Berdasarkan activity diagram pada gambar 3.10 diketahui alur hapus data
kategori, pada halaman tersebut admin bisa melakukan hapus data kategori.
j. Activity Diagram Tambah Data Profil Rekening

Pada activity diagram ini admin dapat melakukan tambah data profil
rekening pada sistem. Berikut adalah activity diagram tambah data profil rekening
yang ditunjukan pada gambar 3.11.
32
Tambah data rekening
Admin Sistem
Login
menampilkan
dashboard admin
pada sidebar pilih menampilkan data

rekening rekening
pilih button
tambah
isikan data
rekening no rek,
nama bank, atas
nama
Menampilkan data
Simpan data
rekening
Gambar 3.11 Activity Diagram Tambah Data Profil Rekening
Berdasarkan activity diagram pada gambar 3.11 diketahui alur tambah data
profil rekening oleh admin. Ketika admin berhasil melakukan login, sistem akan
rekening, pada halaman tersebut admin bisa melakukan tambah data profil
rekening.
k. Activity Diagram Ubah Data Profil Rekening

Pada activity diagram ini admin dapat melakukan ubah data profil rekening
pada sistem. Berikut adalah activity diagram ubah data profil rekening yang
33
Ubah data rekening
Admin Sistem
Login
menampilkan
dashboard admin

rekening rekening
pilih tombol icon

ubah
isikan data
rekening yang
akan diubah
Menampilkan data
Simpan data
list baju
Gambar 3.12 Activity Diagram Ubah Data Profil Rekening
rekening, pada halaman tersebut admin bisa melakukan ubah data profil rekening.
l. Activity Diagram Hapus Data Profil Rekening

Pada activity diagram ini admin dapat melakukan hapus data profil rekening
pada sistem. Berikut adalah activity diagram hapus data profil rekening yang
34
Hapus data rekening
Admin Sistem
Login
menampilkan
dashboard admin

rekening rekening
pilih icon hapus, tidak
hapus data
rekening
ya
Menampilkan data
list baju
Gambar 3.13 Activity Diagram Hapus Data Profil Rekening
Berdasarkan activity diagram pada gambar 3.13 diketahui alur hapus data
rekening, pada halaman tersebut admin bisa melakukan hapus data profil rekening.
m. Activity Diagram Ubah Data Profil Alamat

Pada activity diagram ini admin dapat melakukan ubah data profil alamat
toko pada sistem. Berikut adalah activity diagram ubah data profil alamat toko yang
35
Ubah data profil alamat
Admin Sistem
Login
menampilkan
dashboard admin
pada sidebar pilih

pengaturan tekan menampilkan data
alamat profil alamat
klik link ubah
ubah alamat
Menampilkan list
Simpan data
data kategori
Gambar 3.14 Activity Diagram Ubah Profil Alamat
profil alamat toko oleh admin. Ketika admin berhasil melakukan login, sistem akan
menampilkan halaman dashboard. Kemudian admin masuk ke halaman data alamat,
pada halaman tersebut admin bisa melakukan ubah data profil alamat.
n. Activity Diagram Pemesanan

Pada activity diagram ini pelanggan dapat melakukan pemesanan pada
sistem. Berikut adalah activity diagram pemesanan yang ditunjukan pada Gambar
3.15.
36
Pemesanan baju
Pelanggan Sistem Admin
Login
tidak validasi
berhasil
Menampilkan
Pilih baju
detail baju
isi form detail

Menampilkan
baju sperti tgl
halaman
sewa, durasi,
keranjang
ukuran
Menampilkan
Pilih tombol detail pesanan
checkout dan jaminan
dari pelanggan
Menampilkan
halaman
Pilih tombol
terimakasiah
sewa sekarang
dan tombol
menuju order
pada halaman Menampilkan

order pilih halaman
tombol upload bukti
pembayaran bayar
Konfirmasi
upload bukti
Pesanan dan
pembayaran
pembayaran
mendapatkan
status telah
terbayar
Gambar 3.15 Activity Diagram Pemesanan
Berdasarkan activity diagram pada gambar 3.15 diketahui alur pemesan oleh
pelanggan. Ketika pelanggan berhasil melakukan login, sistem akan menampilkan
37
halaman home. Kemudian pelanggan masuk ke halaman product, pada halaman

tersebut pelanggan bisa melakukan pemesanan dengan melakukan pilih baju, akan
menuju ke halaman detail product dan mengisi form detail product, setelah
melakukan pengisian form sewa akan menuju ke halaman keranjang selanjutnya
menuju kehalaman checkout dan sewa sekarang, maka akan dialihkan kehalaman
order dan melakukan pembayaran dengan upload bukti pembayaran dan menunggu
admin mengkonfirmasi pembayaran tersebut.
o. Activity Diagram Pembayaran

Pada activity diagram ini pelanggan dapat melakukan pembayaran pada
sistem. Berikut adalah activity diagram pembayaran yang ditunjukan pada Gambar
3.16.
Pembayaran
Pelanggan Sistem Admin
Isi bukti Konfirmasi

Ya Memproses
pembayaran Pembayaran
tolak
mendapatkan
status telah terima
terbayar
Gambar 3.16 Activity Diagram Pembayaran
Berdasarkan activity diagram pada gambar 3.16 diketahui alur pembayaran

oleh pelanggan. Setelah melakukan checkout sewa akan menuju halaman order dan
melakukan pembayaran dengan cara upload bukti pembayaran, setelah berhasil
melakukan pembayaran admin akan melakukan konfirmasi pembayaran dan
pelanggan mendapatkan status telah terbayar.
38
p. Activity Diagram Konfirmasi Pembayaran

Pada activity diagram ini admin dapat melakukan konfirmasi pembayaran
pada sistem. Berikut adalah activity diagram konfirmasi pembayaran yang
ditunjukan pada Gambar 3.17.
Kelola Transaksi Sewa
Admin Sistem pelanggan
Login
Tidak Validasi
Ya
Pilih transaksi
pada sidebar Menampilkan
tekan perlu halaman admin
dicek
pelanggan
Konfirmasi cek
upload bukti
pembayaran
pembayaran
Tolak
terima
Konfirmasi
Menampilkan saat pelanggan
masukan daftar
kehalaman kembalikan
pinjam, pada
daftar pinjam baju
hal perlu dicek
Konfirmasi
product
kembali, pada
hal daftar
pinjam
Menampilkan
tidak kehalaman
daftar kembali
cetak nota
menerima nota
palanggan
denda menuju
halaman denda
pelanggan
membayar
cek denda pada
denda saat
tabel daftar Memproses
mengembalika
pinjam
n baju
ditempat
Konfirmasi menuju
pembayaran kehalaman
denda daftar kembali
cetak nota
menerima nota
palanggan
Gambar 3.17 Konfirmasi Pembayaran
Berdasarkan activity diagram pada gambar 3.17 diketahui alur konfirmasi

pembayaran oleh admin. Setelah pelanggan melakukan pembayaran, admin dapat
39
melakukan konfirmasi pembayaran atupun menolak pembayaran tersebut dan jika

admin mengkonfirmasi pembayaran tersebut maka akan kehalaman yang sama
untuk mengkonfirmasi transaksi masukan barang kedaftar pinjam. Setelah
pelanggan akan mengambalikan produk yang disewa ditempat toko, admin dapat
mengkonfirmasi produk dikembalikan dan jika pelanggan mendapatkan denda
maka pelanggan harus membayarnya dan admin mengkonfirmasi pembayaran
denda tersebut setelah mengkonfirmasi pembayaran denda akan kehalaman daftar
Kembali dan admin dapat mencetak nota untuk pelanggan tersebut.
q. Activity Diagram Denda

Pada activity diagram ini admin dapat melakukan denda pada pelanggan.
Berikut adalah activity diagram denda yang ditunjukan pada Gambar 3.18.
Kelola Denda
Admin Sistem pelanggan
Login
Tidak Validasi Ya
Pilih transaksi Menampilkan

pada sidebar halaman admin
Konfirmasi baju
telah dipinjam pelanggan
saat pelanggan Memproses mengembalika
berstatus telah n baju
terbayar
cek denda pada

tabel daftar
pinjam
Memproses
ketika
mendapatkan
denda, akan
langsung
muncul denda pelanggan
berapa rupiah membayar
denda saat
mengembalika
n baju
ditempat
Gambar 3.18 Activity Diagram Denda
Berdasarkan activity diagram pada gambar 3.18 diketahui alur denda yang
dilakukan oleh admin. Ketika admin berhasil melakukan login, sistem akan
40
menampilkan halaman dashboard. Kemudian admin masuk ke halaman daftar

pinjam, pada halaman tersebut admin melakukan konfirmasi untuk mendapatkan
tanggal Kembali dan melakukan perhitungan denda perhari, akan menampilkan
halaman denda dan jika tidak mendapatkan denda akan langsung ke transaksi
pesanan selesai.
k. Activity Diagram Cetak Laporan

Pada activity diagram ini admin dapat mencetak laporan pada sistem.
Berikut adalah activity diagram cetak laporan yang ditunjukan pada Gambar 3.19.
Cetak Laporan
Admin Sistem
Login
menampilkan
dashboard admin
pada sidebar pilih

menampilkan list
transaksi dan klik
daftar kembali baju
daftar kembali
pilih tanggal untuk Mendownload file

memfilter laporan pdf laporan
Menampilkan file
download
Gambar 3.19 Activity Diagram Cetak Laporan
Berdasarkan activity diagram pada gambar 3.19 diketahui alur cetak laporan
halaman dashboard. Kemudian admin masuk ke halaman daftar kembali pada
sidebar transaksi, pada halaman tersebut admin bisa mencetak laporan pertanggal
memfilter laporan dengan cetak pertanggal.
41
l. Activity Digram Cetak Nota

Pada activity diagram ini admin dapat mencetak nota pelanggan pada
sistem. Berikut adalah activity diagram cetak nota pelanggan yang ditunjukan pada
Gambar 3.20.
Cetak Nota
Admin Sistem
Login
menampilkan
dashboard admin
pada sidebar pilih

menampilkan list
transaksi dan klik
daftar kembali baju
daftar kembali
Mendownload file
pilih action button
nota tiap
nota
pelanggan
Menampilkan file
download
Gambar 3.20 Activity Diagram Cetak Nota
Berdasarkan activity diagram pada gambar 3.20 diketahui alur cetak laporan
halaman dashboard. Kemudian admin masuk ke halaman daftar kembali pada
sidebar transaksi, pada halaman tersebut admin bisa mencetak nota pelanggan
dengan pilih action button nota pada pelanggan lalu file nota akan terdownload.
3.3.3 Sequence Diagram

Sequence diagram digunakan untuk menggambarkan pola alur aktor dengan
sistem secara detail menurut waktu. Berikut adalah sequence diagram yang ada
42
pada “Sistem Informasi Penyewaan Baju Di Nana Salon Berbasis Web”.
a. Sequence Diagram Register

Pada sequence diagram ini aktor dapat melakukan register. Berikut adalah
sequence diagram register yang ditunjukan pada Gambar 3.21.
Sequence Diagram Register
Halaman
Login Sistem Database
register
pelanggan
membuka halaman
menampilkan halaman register
input nama,email,alamat,jaminan, pass

Proses
Data masuk
Sesudah register tampil halaman login
Menampilkan halaman login
Gambar 3.21 Sequence Diagram Register
b. Sequence Diagram Login

Pada sequence diagram ini semua aktor dapat melakukan login. Berikut
adalah sequence diagram login yang ditunjukan pada Gambar 3.22.
43
Sequence Diagram Login
Halaman
Dashboard Sistem Database
login
semua aktor
membuka halaman
menampilkan halaman login
input email dan password Proses

Cek pengguna
Tampil dashboard Validasi pengguna
Menampilkan halaman dashboard
Gambar 3.22 Sequence Diagram Login
c. Sequence Diagram Tambah barang

Pada sequence diagram ini admin dapat melakukan tambah barang. Berikut
adalah sequence diagram tambah barang yang ditunjukan pada Gambar 3.23.
Sequence Diagram Tambah barang
Halaman
data baju
admin
membuka halaman
menampilkan halaman dashboard
klik menu data baju akses data baju

ambil data baju
Tampil data baju mengembalikan data
Menampilkan halaman data baju
klik tombol tambah data
menampilkan form tambah data
input data baju baru proses

simpan data
Tampil data baju baru

Menampilkan data baju baru
Gambar 3.23 Sequence Diagram Tambah barang
d. Sequence Diagram Ubah Barang

Pada sequence diagram ini admin dapat melakukan edit barang. Berikut
adalah sequence diagram edit barang yang ditunjukan pada Gambar 3.24.
44
Sequence Diagram Edit barang
Halaman
data baju
admin
membuka halaman

ambil data baju
klik tombol edit data
menampilkan form edit data
input data edit baju baru proses

simpan data

Menampilkan data baju baru
Gambar 3.24 Sequence Diagram Edit barang
e. Sequence Diagram Hapus Barang

Pada sequence diagram ini admin dapat melakukan hapus barang. Berikut
adalah sequence diagram hapus barang yang ditunjukan pada Gambar 3.25.
Sequence Diagram Hapus barang
Halaman
data baju
admin
membuka halaman

ambil data baju
klik tombol hapus data

proses
hapus data

Menampilkan data baju terbaru
Gambar 3.25 Sequence Diagram Hapus Barang
f. Sequence Diagram Tambah Data Kategori

Pada sequence diagram ini admin dapat melakukan tambah data kategori.
Berikut adalah sequence diagram tambah data kategori yang ditunjukan pada
gambar 3.26.
45
Sequence Diagram Tambah Data Kategori
Halaman
Kategori
admin
membuka halaman
klik menu katregori

pada sidebar akses data kategori
ambil data kategori
Tampil data kategori mengembalikan data
Menampilkan halaman data kategori
input data kategori baru proses

simpan data
Tampil data kategori

Menampilkan data kategori baru
Gambar 3.26 Sequence Diagram Tambah Data Kategori
g. Sequence Diagram Ubah Data Kategori

Pada sequence diagram ini admin dapat melakukan ubah data kategori.
Berikut adalah sequence diagram ubah data kategori yang ditunjukan pada gambar
3.27.
Sequence Diagram Ubah Data Kategori
Halaman
kategori
admin
membuka halaman
klik menu data kategori

ambil data kategori
klik tombol icon ubah pada kolom aksi
menampilkan form ubah data
input data ubah kategori proses

simpan data

Menampilkan data kategori baru
Gambar 3.27 Sequence Diagram Ubah Data Kategori
h. Sequence Diagram Hapus Data Kategori

Pada sequence diagram ini admin dapat melakukan hapus data kategori.
Berikut adalah sequence diagram hapus data kategori yang ditunjukan pada gambar
3.28.
46
Sequence Diagram Hapus Data Kategori
Halaman
kategori
admin
membuka halaman
klik menu kategori

ambil data kategori
klik tombol icon sampah pada kolom aksi

proses
hapus data

Menampilkan data kategori
Gambar 3.28 Sequence Diagram Hapus Data Kategori
i. Sequence Diagram Tambah Data Profil Rekening

Pada sequence diagram ini admin dapat melakukan tambah data profil
rekening. Berikut adalah sequence diagram tamba data profil rekening yang
Sequence Diagram Tambah Data Rekening
Halaman
Rekening
admin
membuka halaman
klik menu rekening

pada sidebar akses data rekening
ambil data rekening
Tampil data rekening mengembalikan data
Menampilkan halaman data rekening
input data rekening baru proses

simpan data
Tampil data rekening

Menampilkan data rekening baru
Gambar 3.29 Sequence Diagram Tambah Data Profil Rekening
j. Sequence Diagram Ubah Data Profil Rekening

Pada sequence diagram ini admin dapat melakukan ubah data profil
rekening. Berikut adalah sequence diagram ubah data profil rekening yang
47
Sequence Diagram Ubah Data Rekening
Halaman
rekening
admin
membuka halaman
klik menu data rekening

ambil data rekening
klik tombol icon ubah pada kolom aksi
input data ubah rekening proses

simpan data

Menampilkan data rekening baru
Gambar 3.30 Sequence Diagram Ubah Data Profil Rekening
k. Sequence Diagram Hapus Data Profil Rekening

Pada sequence diagram ini admin dapat melakukan hapus data profil
rekening. Berikut adalah sequence diagram hapus data profil rekening yang
Sequence Diagram Hapus Data Rekening
Halaman
rekening
admin
membuka halaman
klik menu rekening

ambil data rekening
klik tombol icon sampah pada kolom aksi

proses
hapus data

Menampilkan data rekening
Gambar 3.31 Sequence Diagram Hapus Data Profil Rekening
l. Sequence Diagram Ubah Data Profil Alamat

Pada sequence diagram ini admin dapat melakukan ubah data profil alamat.
Berikut adalah sequence diagram ubah data profil alamat yang ditunjukan pada
gambar 3.32.
48
Sequence Diagram Ubah Profil Alamat
Halaman
alamat
admin
membuka halaman
klik menu pengaturan tekan

alamat pada sidebar akses data alamat
ambil data alamat
Tampil data alamat mengembalikan data
Menampilkan halaman data alamat
klik tombol link ubah
input data ubah alamat proses

simpan data
Tampil data alamat

Menampilkan data alamat baru
Gambar 3.32 Sequence Diagram Ubah Data Profil Alamat
m. Sequence Diagram Pemesanan

Pada sequence diagram ini pelanggan dapat melakukan pemesanan. Berikut
adalah sequence diagram pemesanan yang ditunjukan pada Gambar 3.33.
Sequence Diagram Pemesanan
Halaman
Home product keranjang checkout order sistem Database
detail baju
admin pelanggan
membuka halaman
menampilkan halaman home
klik menu product

akses product ambil product
Tampil data product mengembalikan data
Menampilkan halaman product
pilih product input form detail

product sewa akan menuju halaman Data order masuk ke database
keranjang dan cek apakah akan menampilkan detail sewa menampilkan halaman order
sudah benar dan jaminan dari pelanggan untuk upload bukti pembayan
Data status berganti
Perlu dicek oleh admin
menunggu konfirmasi dari admin
Mengkonfirmasi
pembayaran Refrash page order
ambil status order
Mendapatkan status telah terbayar mengembalikan data
Gambar 3.33 Sequence Diagram Pemesanan
n. Sequence Diagram Konfirmasi Pembayaran

Pada sequence diagram ini admin dapat melakukan konfirmasi pembayaran,
masukan produk dipinjam, produk dikembalikan, denda. Berikut adalah sequence
diagram konfirmasi pembayaran yang ditunjukan pada gambar 3.34.
49
Sequence Diagram Transaksi Sewa
Daftar Daftar
Dashboard Perlu dicek Denda sistem Database
Pinjam kembali
pelanggan admin
Membuka halaman
dashboard
Uploa bukti
pembayaran Menampilkan halaman
dashboard
Pilih sidebar transaksi

Akses halaman perlu dicek
Tekan perlu dicek Akses data perlu dicek
Mengembalikan
Tampil halaman perlu dicek
data
Menampilkan halaman perlu dicek
Konfirmasi pembayaran Data konfirmasi masuk kedatabase

Mengembalikan
data
Menampilkan halaman perlu dicek

Tampil halaman perlu dicek
Data konfirmasi masuk ke database

Konfirmasi masukan daftar pinjam
Mengembalikan
data
Menampilkan halaman daftar pinjam
Tampil halaman daftar pinjam
Mengembalikan Konfirmasi product telah dikembalikan

Jika tidak mendapatkan denda
Baju ditoko Maka akan langsung menuju Akses daftar kembali
Kehalaman daftar kembali
Menampilkan halaman daftar kembali
Cetak nota dari pelanggan tersebut Akses nota pelanggan
Berikan nota
Menampilkan file download nota pelanggan berupa pdf
Ke pelanggan
Jika mendapatkan denda
Maka akan menuju kehalaman Akses denda
Konfirmasi product telah dikembalikan denda
Menyampaikan
Denda yang harus Menampilkan halaman denda, maka akan menyampaikan berapa denda yang harus dibayar
dibayar
Membayar denda Konfirmasi denda telah terbayar Maka akan menuju

Akses daftar kembali
Kehalaman daftar kembali
Cetak nota pelanggan

Akses nota pelanggan
Berikan nota Menampilkan file download nota pelanggan berupa pdf

Ke pelanggan
Gambar 3.34 Sequence Diagram Konfirmasi Pembayaran
o. Sequence Diagram Denda

Pada sequence diagram ini admin dapat melakukan denda. Berikut adalah
sequence diagram denda yang ditunjukan pada gambar 3.35.
Sequence Diagram Denda
Daftar
Dashboard Denda Sistem Database
pinjam
admin
membuka halaman
klik menu daftar pinjam akses data daftar pinjam

ambil data daftar pinjam
Tampil data daftar pinjam mengembalikan data
Menampilkan halaman daftar pinjam
konfirmasi daftar pinjam baju

ambil daftar pinjam dan hitung jika ada denda
Proses
Menampilkan denda jika mendapatkan dan jika tidak trx selesai
Gambar 3.35 Sequence Diagram Denda

h. Sequence Diagram Cetak Laporan
Pada sequence diagram ini admin dapat melakukan cetak laporan per
50
tanggal untuk memfilter laporan. Berikut adalah sequence diagram cetak laporan
pertanggal yang ditunjukan pada gambar 3.36.
Sequence Diagram Cetak Laporan
Daftar
kembali
admin
membuka halaman
klik menu sidebar daftar kembali Akses data daftar kembai

Ambil data daftar kembali
Mengembalikan data
Tampil data daftar kembali
Pilih tanggal untuk filter laporan

Mendownload laporan
Proses
Menampilkan file download cetak laporan
Gambar 3.36 Sequence Diagram Cetak Laporan
i. Sequence Diagram Cetak Nota

Pada sequence diagram ini admin dapat melakukan cetak nota pelanggan.
Berikut adalah sequence diagram cetak nota pelanggan yang ditunjukan pada
gambar 3.37.
51
Sequence Diagram Cetak Nota
Daftar
kembali
admin
membuka halaman
klik menu sidebar daftar kembali Akses data daftar kembai

Ambil data daftar kembali
Mengembalikan data
Tampil data daftar kembali
Pilih action button nota pada pelanggan

Mendownload file nota
Proses
Menampilkan file download cetak nota
Gambar 3.37 Sequence Diagram Cetak Nota
3.3.4 Relasi antar Tabel

Dalam suatu aplikasi, relasi antar table atau merupakan struktur yang
mendasari suatu sistem basis data serta digunakan untuk mengilustrasikan konsep
model data yang terjadi pada sistem yang sedang dibuat. Dalam aplikasi ini terdapat
12 tabel yang dimana tabel product berelasi dengan kategori, tabel keranjang
berelasi dengan product dan users, tabel order berelasi dengan status order dan
users, tabel detail order berelasi dengan tabel order, product, product attribute, tabel
product attribute berelasi dengan tabel product, pada tabel alamat toko berelasi
dengan tabel kota dan tabel kota berelasi dengan tabel provinsi.
order
id bigint(20) <pk>
invoice varchar(255)
users_id bigint(20) <fk1> status_order
rekening
subtotal int(11) id bigint(20) <pk>
id bigint(20) <pk> pesan varchar(255) nama varchar(255)
nama_bank varchar(255) status_order_id bigint(20) <fk2>
atas_nama varchar(255) status_denda int(20)
no_rekening varchar(255) metode_pembayaran varchar(255) kota
bukti_pembayaran varchar(255)
id bigint(20) <fk1>
provinsi_id bigint(20)
kota_id bigint(20)
title varchar(255)
detail_order
product_attribute
id bigint(20) <pk>
id bigint(20) <pk> order_id bigint(20) <fk1> alamat_toko
product_id bigint(20) <fk> product product_id bigint(20) <fk3>
sku varchar(255) id bigint(20)
id bigint(20) <pk> product_attribute_id bigint(20) <fk2> kota_id bigint(20)
size varchar(255) ketegori_id bigint(20) <fk> durasi int(20)
harga int(20) detail varchar(255)
nama varchar(30) tgl_mulai date
stok int(20) gambar varchar(255) tgl_selesai date
harga int(20) tgl_kembali date
stok int(20) qty int(20)
provinsi
denda int(20)
id bigint(20) <pk>
provinsi_id bigint(20)
users title varchar(255)
keranjang
id bigint(20) <pk>
id bigint(20) <pk> nama varchar(30)
kategori product_id bigint(20) <fk1> email varchar(30)
id bigint(20) <pk> users_id bigint(20) <fk2> role varchar(255)
nama varchar(30) nama varchar(30) alamat varchar(255)
jenis varchar(25) jumlah_pesan int(20) nomor_hp varchar(255)
total_harga int(20) jaminan varchar(255)
tgl_sewa date
Gambar 3.38 Relasi antar tabel

52
3.3.5 Arsitektur Diagram

Arsitektur diagram merupakan struktur sebuah sistem dalam bentuk
gambar, yang menerangkan konsep, prinsip, anasir dan komponen, termasuk cara
kerja maupun petunjuk penggunaanya. Dalam aplikasi Sistem Informasi Persewaan
Baju Di Nana Salon Berbasis Web terdapat 2 user yaitu bagian admin merupakan
pengguna yang mengelola baju, pemesanan dan pembayaran. Pada bagian database
memiliki peran sebagai media untuk menyimpan data yang ditambahkan oleh
admin. Pada bagian pelanggan merupakan pengguna yang dapat sewa baju dan
melakukan pembayaran . Arsitektur sistem dapat dilihat pada Gambar 3.39
Arsitektur Diagram.
Pelanggan
Request URL
Sewa baju
Menampilkan
website
Request
Kelola baju Request
Menampilkan
Respon data
Kelola pesanan
Web Data Base

Admin Internet
Gambar 3.39 Arsitektur Diagram
3.3.6 User Interface

UI (User Interface) adalah bagian visual dari website, aplikasi, software,
atau hardware yang menentukan bagaimana seorang pengguna berinteraksi dengan
produk tersebut. Berikut user interface Sistem Informasi Persewaan Baju Di Nana
Salon Berbasis Web.
Pada gambar 3.40 merupakan tampilan halaman register dengan
menginputkan nama, alamat, nomor hp, email, password, jaminan, setelah
melakukan register akan menuju halaman login.
53
Gambar 3.40 User Interface Register
Pada gambar 3.41 merupakan halaman login, admin ataupun pelanggan

setelah melakukan register langsung redirect menuju halaman login yang dimana
harus melakukan pengisian email dan password.
Gambar 3.41 User Interface Login
Pada gambar 3.42 merupakan halaman beranda dari pelanggan, setelah

melakukan login akan langsung menuju halaman product untuk memilih baju yang
akan disewa oleh pelanggan.
54
Gambar 3.42 User Interface Product
Pada gambar 3.43 tampilan detail dari product, setelah memilih baju dari
halaman product akan muncul halaman detail product dan dapat langsung disewa
dengan pengisian form.
55
Gambar 3.43 User Interface Detail Product
Pada gambar 3.44 merupakan tampilan keranjang yang dimana pelanggan

setelah melakukan pengisian form detail product akan menuju kehalaman
keranjang.
56
Gambar 3.44 User Interface Keranjang
Pada gambar 3.45 merupakan tampilan checkout setelah memasukan

product ke keranjang dan dirasa sudah benar maka tekan tombol checkout.
57
Gambar 3.45 User Interface Checkout
Pada gambar 3.46 menampilkan halaman order setelah melakukan proses

checkout maka akan dialihkan ke halaman order.
Gambar 3.46 User Interface Order

58
Pada gambar 3.47 menampilkan halaman pembayaran yang dilakukan oleh

pelanggan yang menampilkan nomer rekening, atas nama, nama bank dan transfer
sesuai total sewa pelanggan tersebut.
Gambar 3.47 User Interface Pembayaran
Pada gambar 3.48 tampilan dashboard yang dimana admin setelah

melakukan login dan akan menuju ke halaman dashboard menampilkan pelanggan,
pendapatan, jumlah transaksi dan menampilkan grafik produk terlaris.
59
Gambar 3.48 User Interface Dashboard
Pada gambar 3.49 merupakan tampilan halaman pelanggan yang dimana

admin dapat melihat nama pelanggan, alamat, nomor hp dan jaminan.
Gambar 3.49 User Interface Pelanggan
Pada gambar 3.50 tampilan data baju dimana admin setelah melakukan login
dapat melihat data baju dengan pilih data master dan tekan product pada sidebar.
60
Gambar 3.50 User Interface Data Baju
Pada gambar 3.51 tampilan tambah data baju dimana admin setelah
melakukan login dapat menambahkan data baju dengan tekan tombol tambah.
Gambar 3.51 User Interface Tambah Product
Pada gambar 3.52 tampilan ubah data baju dimana admin setelah melakukan
login dapat mengubah data baju yang salah saat menambahkanya dengan cara tekan
tombol icon ubah pada kolom aksi.
61
Gambar 3.52 User Interface Ubah Product
Pada gambar 3.53 merupakan tampilan halaman kategori yang dimana

terdapat nama kategori yang berrelasi dengan product.
Gambar 3.53 User Interface Data Kategori
Pada gambar 3.54 tampilan tambah data kategori dimana admin setelah
melakukan login dapat menambahkan data kategori dengan tekan tombol tambah.
62
Gambar 3.54 User Interface Tambah Data Kategori
Pada gambar 3.55 tampilan ubah data kategori dimana admin setelah
melakukan login dapat mengubah data kategori yang salah saat menambahkanya
dengan cara tekan tombol icon ubah pada kolom aksi.
Gambar 3.55 User Interface Ubah Data Kategori
Pada gambar 3.56 merupakan tampilan halaman rekening yang dimana

terdapat nama bank, atas nama rekening tersebut dan nomer rekening.
63
Gambar 3.56 User Interface Data Profil Rekening
Pada gambar 3.57 tampilan tambah data profil rekening dimana admin
setelah melakukan login dapat menambahkan data profil rekening dengan tekan
tombol tambah.
Gambar 3.57 User Interface Tambah Data Profil Rekening
Pada gambar 3.58 tampilan ubah data profil rekening dimana admin setelah
melakukan login dapat mengubah data profil rekening yang salah saat
menambahkanya dengan cara tekan tombol icon ubah pada kolom aksi.
64
Gambar 3.58 User Interface Ubah Data Profil Rekening
Pada gambar 3.59 merupakan tampilan halaman profil alamat yang dimana
terdapat alamat toko sekarang.
Gambar 3.59 User Interface Profil Alamat
Pada gambar 3.60 merupakan tampilan ubah profil alamat dimana admin
setelah melakukan login dapat mengubah profil alamat yang salah dengan cara
tekan link ubah alamat.
65
Gambar 3.60 User Interface Ubah Profil Alamat
Pada gambar 3.61 merupakan tampilan data transaksi yang sedang berjalan
dan menampilkan no invoice, subtotal, pemesan, status pesanan, aksi.
Gambar 3.61 User Interface Data Transaksi

66
Pada gambar 3.62 merupakan tampilan konfirmasi pembayaran yang

dilakukan oleh admin dan admin dapat menolak pembayaran tersebut karena bukti
pembayaran tidak sesuai.
Gambar 3.62 User Interface Konfirmasi Pembayaran
Pada gambar 3.63 merupakan tampilan konfirmasi masukan product ke

daftar pinjam, setelah admin mengkonfirmasi pembayaran pada halaman perlu
dicek admin dapat mengkonfirmasi transaksi ke product daftar pinjam.
Gambar 3.63 User Interface Konfirmasi Daftar Pinjam

67
Pada gambar 3.64 merupakan tampilan konfirmasi product dikembalikan

yang dimana pelanggan datang ketempat toko untuk mengembalikan product yang
disewa dan admin mengkonfirmasi product yang dikembalikan.
Gambar 3.64 User Interface Product Dikembalikan
Pada gambar 3.65 merupakan tampilan konfirmasi denda saat admin

mengkonfirmasi product dikembalikan dan pelanggan tersebut terkena biaya denda
maka admin akan mengkonfirmasi denda dan denda berapa yang harus dibayar.
Gambar 3.65 User Interface Konfirmasi Denda

68
Pada gambar 3.66 merupakan tampilan daftar Kembali yang dimana admin
dapat melihat data transaksi yang telah dikembalikan, admin juga dapat mencetak
laporan transaksi pertanggal dan mencetak nota untuk pelanggan dan memberikan
kepelanggan saat mengembalikan product ketempat toko.
Gambar 3.66 User Interface Data Transaksi Daftar Kembali
3.4 Pengujian Sistem

Pada tahapan ini akan dilakukan pengujian sistem untuk memeriksa apakah
suatu perangkat lunak yang dihasilkan sudah dapat dijalankan dengan scenario
pengujian.
Tabel 3.3 Pengujian Sistem
No Objek Pengujian Skenario Pengujian Hasil yang diharapkan

1 Register Menampilkan form Aplikasi memproses
pendaftaran nama, alamat, pelanggan melakukan
no hp, email,password dan daftar ke halaman
jaminan, tekan tombol website.
daftar
2 Login admin/pelanggan Menampilkan form login Aplikasi memproses
dengan isi input text email, admin/customer
password dan login yang melakukan Login ke
akan meredirect ke halaman website
halaman website dengan
69
level user admin ataupun

pelanggan
3 Tambah product Pilih data baju pada Aplikasi memproses
sidebar, tambah data baju saat admin melakukan
isi form data baju dengan tambah data baju
gambar dan deskripsi,
simpan data
4 Mengubah product Login admin pilih data baju Aplikasi atau sistem
pada sidebar, pilih aksi edit memproses saat admin
dan isi form yang akan melakukan edit data
diedit, simpan data baju
5 Menghapus product Login admin pilih data baju Aplikasi memproses
pada sidebar, pilih aksi saat admin melakukan
hapus lalu muncul pop up hapus data
validasi ya atau tidak untuk
mengahapus data
6 Tambah ketegori Pilih data kategori pada Aplikasi memproses
sidebar, tekan tambah pada saat admin melakukan
data baju isi form data baju tambah data kategori
dan simpan data
7 Mengubah kategori Pilih data kategori pada Aplikasi memproses
sidebar, tekan icon ubah saat admin melakukan
pada kolom aksi, ubah data ubah data kategori
dan simpan
8 Menghapus kategori Pilih data kategori pada Aplikasi memproses
sidebar, tekan icon sampah saat admin melakukan
pada kolom aksi, hapus hapus data kategori
data dan muncul pop up
konfirmasi ya atau tidak
9 Tambah profil rekening Pilih profil rekening pada Aplikasi memproses
sidebar, tekan tambah pada saat admin melakukan
data rekening isi form data tambah data profil
rekening dan simpan data rekening
10 Ubah profil rekening Pilih profil rekening pada Aplikasi memproses
sidebar, tekan icon ubah saat admin melakukan
pada kolom aksi, ubah data ubah data profil
dan simpan rekening
11 Hapus profil rekening Pilih profil rekening pada Aplikasi memproses
sidebar, tekan icon sampah saat admin melakukan
pada kolom aksi, hapus hapus data profil
data dan muncul pop up rekening
konfirmasi ya atau tidak
12 Ubah profil alamat Pilih profil alamat pada Aplikasi memproses
sidebar, tekan icon link saat admin melakukan
ubah, ubah profil alamat ubah data profil alamat
dan simpan
13 Sewa pesanan Menampilkan proses Aplikasi memproses
pelanggan pelanggan melakukan sewa sewa pesanan dari
dari pengisian detail pelanggan
product, masuk ke
keranjang menuju ke
halaman checkout dan
70
melakukan pembayaran
pada halaman order
No Objek Pengujian Skenario Pengujian Hasil yang diharapkan
14 Konfirmasi pembayaran Setelah pelanggan Aplikasi dapat

melakukan pembayaran memproses konfirmasi
admin dapat pembayaran maupun
mengkonfirmasi menolak pembayaran
pembayaran dan juga
admin dapat menolak
pembayaran
15 Konfirmasi masuk ke Setelah mengkonfirmasi Aplikasi dapat
daftar pinjam pembayran admin dapat memproses konfirmasi
mengkonfirmasi data data transaksi masuk ke
transaksi tersebut daftar pinjam
dimasukan kedalam daftar
pinjam
16 Konfirmasi product Saat pelanggan Aplikasi dapat
dikembalikan mengembalikan product memproses konfirmasi
admin dapat product dikembalikan
mengkonfirmasi product
dikembalikan dan cek
apakah pelanggan dapat
denda atau tidak
17 Konfirmasi denda Saat pelanggan dikenakan Aplikasi dapat
denda admin dapat memproses konfirmasi
mengetahui denda denda pembayaran dari
pelanggan dan dapat pelanggan
mengkonfirmasi
pembayaran denda dari
pelanggan
18 Daftar product telah Menampilkan seluruh Aplikasi memproses
kembali transaksi yang telah menampilkan seluruh
dikembalikan dan admin transaksi yang telah
dapat mencetak laporan dikembalikan dan cetak
transaksi per tanggal dan laporan per-tgl dan
dapat juga mencetak nota cetak nota
untuk pelanggan
BAB IV
IMPLEMENTASI
4.1 Implementasi Proses

Pada bab sebelumnya telah dibuat perancangan dan desain aplikasi,
selanjutnya mengimplementasikan perancangan tersebut ke dalam aplikasi yang
dibangun. Berikut ini adalah tampilan implementasi dari perancangannya.
4.1.1 Halaman Awal Website

Halaman awal adalah tampilan awal website yang di akses oleh semua user
yang belum melakukan login. Berikut adalah halaman awal website sistem
informasi distribusi cabai di pasar induk pare di tunjukkan pada gambar 4.1.
Gambar 4.1 Halman Awal Website
Gambar di atas adalah halaman awal yang diakses oleh semua user sebelum
login. Kode program untuk menampilkan halaman di atas sebagai berikut:
public function index()
{
//menampilkan data produk dihalamam utama user dengan
limit 10 data
//untuk di carousel
$month = now()->format('m');
$data = array(
'produks' => DB::table('products')-
>selectRaw('products.*, COUNT(detail_order.id) as total_sold')
->join('detail_order',
71
72
'detail_order.product_id', '=', 'products.id')

->join('order', 'detail_order.order_id', '=',
'order.id')
->whereRaw(
'order.status_order_id = :order_satus AND
MONTH(order.created_at) = :month',
[
'order_status' => '7',
'month' => $month
]
)
->groupBy('products.id')
->orderByRaw('total_sold DESC')
->limit(10)
->get(),
);
return view('user.welcome',$data);
}
public function kontak()

{
return view('user.kontak');
}
4.1.2 Halaman Register

Halaman register adalah halaman yang digunakan oleh user untuk
mendaftar menjadi pengunjung. Pengunjung dapat melakukan register dengan
melakukan pengisian sesuai form pada halaman register. Berikut adalah halaman
register di tunjukkan pada gambar 4.2.
73
Gambar 4.2 Halaman Register
Gambar di atas adalah halaman register. Potongan kode program untuk

menampilkan halaman di atas sebagai berikut.
public function create()
{
return view('auth.register');
}
4.1.3 Halaman Login

Merupakan halaman yang di akses oleh semua user untuk masuk kedalam
website peminjaman baju atau dashboard admin. Berikut adalah tampilan halaman
login di tunjukkan pada gambar 4.3.
74
Gambar 4.3 Halaman Login
Gambar di atas merupakan halaman login. Berikut ini adalah potong kode
program dari halaman login.
public function create()
{
return view('auth.login');
}
4.1.4 Halaman Dashboard Admin

Merupakan halaman yang di akses oleh admin, admin dapat melihat
pendapatan perbulan dan dapat melihat data pelanggan. Berikut ini adalah tampilan
dashboard di tunjukan pada gambar 4.4.
75
Gambar 4.4 Halaman Dashboard Admin
Gambar di atas merupakan halaman dashboard. Berikut ini adalah potong

kode program dari halaman dashboard.
{
//ambil data data untuk ditampilkan di card pada dashboard
$pendapatan = DB::table('order')
->select(DB::raw('SUM(subtotal) as
penghasilan'))
->where('status_order_id',7)
->first();
$transaksi = DB::table('order')
->select(DB::raw('COUNT(id) as
total_order'))
->first();
$pelanggan = DB::table('users')
76
->select(DB::raw('COUNT(id) as
total_user'))
->where('role','=','customer')
->first();
$order_terbaru = $order = DB::table('order')
-
>join('status_order','status_order.id','=','order.status_order_i
d')
-
>join('users','users.id','=','order.user_id')
-
>select('order.*','status_order.name','users.name as
nama_pemesan')
->limit(10)
->get();
$data = array(
'pendapatan' => $pendapatan,
'transaksi' => $transaksi,
'pelanggan' => $pelanggan,
'order_baru' => $order_terbaru
);
$subtotal = Order::select(DB::raw("CAST(SUM(subtotal) as
int) as subtotal"))
->GroupBy(DB::raw("Month(created_at)"))
->pluck('subtotal');
$bulan = Order::select(DB::raw("MONTHNAME(created_at) as
bulan"))
->GroupBy(DB::raw("MONTHNAME(created_at)"))
->pluck('bulan');
return view('admin/dashboard',$data, compact('subtotal',
'bulan'));
}
4.1.5 Halaman Data Produk Admin

Merupakan halaman yang di akses oleh admin, admin dapat melihat data
produk yang di tambahkan pada aplikasi. Data produk ini berisi kode produk, nama
produk, harga kategori, stok, gambar produk. Di halaman ini terdapat tombol
tambah untuk menambah data produk, ubah data produk, tambah data attribute size
77
dan hapus produk. Berikut ini adalah tampilan data produk pada admin yang
Gambar 4.5 Halaman Data Produk
Gambar diatas merupakan halaman data produk admin. Berikut ini adalah
potongan kode program dari halaman data produk admin.

{
$products = DB::table('products')
->join('categories', 'categories.id', '=',
'products.categories_id')
->select('products.*', 'categories.name as
nama_kategori')
->get();
$data = array(
'products' => $products
);
return view('admin.product.index',$data);
}
78
4.1.6 Halaman Tambah Data Produk Pada Admin

Halaman tambah data produk adalah halaman yang diakses oleh admin
untuk menambah data produk. Admin dapat melakukan tambah data jika
berkategori asesoris akan memunculkan form harga, stok dan jika memilih kategori
pakaian maka form harga dan stok akan hilang, di tunjukkan pada gambar 4.6.
Gambar 4.6 Halaman Tambah Data Produk
Gambar diatas merupakan halaman tambah data produk admin. Berikut ini
adalah potongan kode program dari halaman tambah data produk admin.
public function tambah()

{
$data = array(
'categories' => Categories::all(),
);
return view('admin.product.tambah',$data);
}
public function store(Request $request)
79
{
if($request->file('image')){
//simpan foto produk yang di upload ke direkteri
public/storage/imageproduct
$file = $request->file('image')-
>store('imageproduct','public');
Product::create([
'product_code' => $request->product_code,
'name' => $request->name,
'description' => $request->description,
'price' => $request->price,
'stok' => $request->stok,
'categories_id' => $request->categories_id,
'image' => $file
]);
return redirect()->route('admin.product')-
>with('status','Berhasil Menambah Produk Baru');
}
}
4.1.7 Halaman Ubah Data Produk Pada Admin

Merupakan halaman ubah data produk yang diakses oleh admin. Admin
dapat mengubah data produk nama produk, harga, deskripsi, gambar dan stok.
Berikut adalah halaman ubah data produk di tunjukan pada gambar 4.7.
80
Gambar 4.7 Halaman Ubah Data Produk
Gambar diatas merupakan halaman ubah data produk admin. Berikut ini
adalah potongan kode program dari halaman ubah data produk admin.
public function edit($id)

{
$data = array(
'product' => Product::findOrFail($id),
'categories' => Categories::all(),
);
return view('admin.product.edit',$data);
}
public function update($id,Request $request)
{
$prod = Product::findOrFail($id);
if( $request->file('image')){
Storage::delete('public/'.$prod->image);
$file = $request->file('image')-
>store('imageproduct','public');
$prod->image = $file;
}
$prod->product_code = $request->product_code;
81
$prod->name = $request->name;
$prod->description = $request->description;
$prod->price = $request->price;
$prod->categories_id = $request->categories_id;
$prod->stok = $request->stok;
$prod->diskon = $request->diskon;
$prod->save();
return redirect()->route('admin.product')-
>with('status','Berhasil Mengubah Kategori');
}
4.1.8 Halaman Tambah Data Attribute Produk Admin

Merupakan halaman tambah data attribute yang diakses oleh admin.
digunakan untuk menambah data ukuran produk dengan kategori baju, dapat juga
menghapus data attribute produk. Berikut adalah halaman tambah data attribute
produk di tunjukan pada gambar 4.8.
Gambar 4.8 Halaman Tambah Data Produk Attribute

82
Gambar diatas merupakan halaman tambah data attribute produk admin.

Berikut ini adalah potongan kode program dari halaman tambah data attribute
produk admin.
public function addAttributes(Request $request, $id)

{
$productDetails = Product::with('attributes')-
>where(['id'=>$id])->first();
//$productDetails =
json_decode(json_encode($productDetails));
if($request->isMethod('post')){
$data = $request->all();
ProductAttribute::create([
'product_id' => $request->product_id,
'sku' => $request->sku,
'size' => $request->size,
'harga' => $request->harga,
'stok' => $request->stok,
]);
}
$products = DB::table('product_attributes')
->get();
return view('admin.product.add_attributes')-
>with(compact('productDetails','products'));
}
4.1.9 Halaman Data Kategori Produk Pada Admin

Merupakan halaman yang di akses oleh admin. Admin dapat melihat data
kategori produk yang di tambahkan pada aplikasi. Data kategori produk ini berisi
nama kategori produk. Di halaman ini terdapat tombol tambah untuk menambah
data produk, ubah data kategori produk, tambah data kategori dan hapus kategori
produk. Berikut ini adalah tampilan data kategori produk pada admin yang
83
Gambar 4.9 Halaman Data Kategori Produk
Gambar diatas merupakan halaman data kategori produk admin. Berikut ini
adalah potongan kode program dari halaman data kategori produk admin.

{$data = array(
'categories' => Categories::all()
);
return view('admin.categories.index',$data);
}
4.1.10 Halaman Tambah Data Kategori Produk Pada Admin

Halaman tambah data kategori produk adalah halaman yang diakses oleh
admin untuk menambah data kategori produk. Admin dapat melakukan tambah data
dengan pengisian form nama kategori produk. Berikut adalah halaman tambah data
kategori produk di tunjukkan pada gambar 4.10.
84
Gambar 4.10 Halaman Tambah Data Kategori Produk
Gambar diatas merupakan halaman tambah data kategori produk admin.

Berikut ini adalah potongan kode program dari halaman tambah data kategori
produk admin.
public function tambah()

{
return view('admin.categories.tambah');
}
public function store(Request $request)

{
Categories::create([
'name' => $request->name
]);
return redirect()->route('admin.categories')-
>with('status','Berhasil Menambah Kategori');
}
4.1.11 Halaman Ubah Data Kategori Produk Pada Admin

Merupakan halaman ubah data kategori produk yang diakses oleh admin
untuk digunakan mengubah nama kategori produk. Berikut adalah halaman ubah
data kategori produk di tunjukan pada gambar 4.11.
85
Gambar 4.11 Halaman Ubah Data Kategori Produk
Gambar diatas merupakan halaman ubah data kategori produk admin.

Berikut ini adalah potongan kode program dari halaman ubah data kategori produk
admin.
public function update($id,Request $request)

{
$categorie = Categories::FindOrFail($id);
$categorie->name = $request->name;
$categorie->save();
return redirect()->route('admin.categories')-
>with('status','Berhasil Mengubah Kategori');
}
//function menampilkan form edit

public function edit($id)
{
$data = array(
'categorie' => $categorie =
Categories::FindOrFail($id)
);
return view('admin.categories.edit',$data);
}
86
4.1.12 Halaman Profil Alamat Pada Admin

Pada halaman alamat admin dapat mengisikan alamat toko atau mengubah
alamat toko tersebut. Berikut halaman alamat di tunjukan pada gambar 4.12.
Gambar 4.12 Halaman Alamat
Gambar diatas merupakan halaman alamat admin. Berikut ini adalah

potongan kode program dari halaman alamat admin.
public function aturalamat()

{
//cek apa alamat toko sudah di set atau belum
$cek = DB::table('alamat_toko')->count();
$data['cekalamat'] = $cek;
//jika belum di setting maka ambil data provinsi untuk di
tampilkan di form alamat
if($cek < 1){
$data['provinces'] = Province::all();
}else{
//jika sudah di setting maka tidak menampilkan form
tapi tampilkan data alamat toko
$data['alamat'] = DB::table('alamat_toko')
-
>join('cities','cities.city_id','=','alamat_toko.city_id')
-
>join('provinces','provinces.province_id','=','cities.province_i
d')
-
>select('alamat_toko.*','cities.title as kota','provinces.title
87
as prov')->first();
}
return view('admin.pengaturan.alamat',$data);
}
public function getCity($id)
{
//kfunction untuk mengambil data kota sesuia id parameter

$city = City::where('province_id',$id)->get();
//lalu return dengan format json
return response()->json($city);
}
4.1.13 Halaman Rekening Pada Admin

Pada halaman rekening admin dapat menambahkan nomer rekening, nama
bank dan atas nama rekening tersebut, juga dapat di ubah sesuai dengan rekening
pemilik toko. Berikut halaman rekening di tunjukan pada gambar 4.13.
Gambar 4.13 Halaman Data Rekening
Gambar diatas merupakan halaman rekening admin. Berikut ini adalah

potongan kode program dari halaman rekening admin.

{
$data = array(
88
'rekening' => Rekening::all()

); return view('admin.rekening.index',$data);}
4.1.14 Halaman Transaksi Perlu di Cek Pada Admin

Merupakan halaman transaksi perlu di cek yang diakses oleh admin,
digunakan untuk mengkonfirmasi apakah pembeli sudah melakukan pembayaran
dengan mengirimkan bukti pembayaran dan admin dapat mengkonfirmasi ataupun
menolak pembayaran tersebut. Berikut halaman transaksi perlu di cek pada admin
di tunjukan pada gambar 4.14.
Gambar 4.14 Halaman Transaksi Perlu Dicek
Gambar diatas merupakan halaman transaksi perlu di cek admin. Berikut ini
adalah potongan kode program dari halaman transaksi perlu di cek admin.
public function perludicek()

{
//ambil data order yang status nya 2 atau belum di cek /
sudah bayar
$order = DB::table('order')
-
d')
-
89
-
nama_pemesan')
->where('order.status_order_id','!=',1)
->get();
$data = array(
'orderbaru' => $order
);
return view('admin.transaksi.perludicek',$data);
}
4.1.15 Halaman Transaksi Daftar Pinjam Pada Admin

Pada halaman transaksi daftar pinjam yang diakses oleh admin digunakan
untuk saat pembeli mengembalikan baju yang dipinjam ditoko dan admin
melakukan konfirmasi kembali. Pada saat yang sama admin melakukan konfirmasi
kembali akan di set tanggal kembali dan ada perhitungan apakah pembeli
mendapatkan denda atau tidak jika tidak, halaman akan berpindah ke halaman
transaksi daftar kembali, admin juga dapat mendownload nota untuk pembeli.
Berikut halaman transaksi daftar pinjam pada admin di tunjukan pada gambar 4.15.
90
Gambar 4.15 Halaman Transaksi Daftar Pinjam
Gambar diatas merupakan halaman transaksi daftar pinjam admin. Berikut

ini adalah potongan kode program dari halaman transaksi daftar pinjam admin.
public function dipinjam()

{
//ambil data order yang status nya 2 atau belum di cek /
sudah bayar
-
d')
-
-
nama_pemesan')
->where('order.status_order_id',9)
->get();
$data = array(
);
return view('admin.transaksi.dipinjam',$data);
}
91
4.1.16 Halaman Transaksi Denda Pada Admin

Pada halaman transaksi denda yang diakses oleh admin, digunakan untuk
mengkonfirmasi pembayaran denda pada saat pembeli mengambalikan baju yang
dipinjam dan membayar denda di toko. Setelah admin mengkonfirmasi pembayaran
denda halaman akan berpindah ke transaksi daftar kembali, pada kolom denda
diberlakukan denda perhari dengan rumus perhitungan denda A x B x C, A = denda,
B = jumlah baju yang dipinjam, C = telat per hari. Contoh: A = 10.000, B = 2 dan
C = 3 hari maka 10.000 x 2 x 3 hari = 60.000, denda yang didapatkan sejumlah
60.000 ribu dan admin dapat mendownload nota dalam bentuk pdf untuk pembeli
tersebut. Berikut halaman transaksi denda pada admin di tunjukan pada gambar
4.16.
Gambar 4.16 Halaman Transaksi Denda
Gambar diatas merupakan halaman transaksi denda admin. Berikut ini

adalah potongan kode program dari halaman transaksi denda admin.
public function denda()

{
->join('detail_order','detail_order.order_id','=','order.id')-
d')->join('users','users.id','=','order.user_id')
->select('order.*','status_order.name','users.name as
nama_pemesan','detail_order.denda')
92
->get();
$data = array(
);
return view('admin.transaksi.denda',$data);
}
4.1.17 Halaman Transaksi Daftar Kembali Pada Admin

Pada halaman transaksi daftar kembali admin dapat melihat daftar kembali
yang sudah dikembalikan oleh pembeli, admin juga dapat mendownload file pdf
pada halaman transaksi daftar kembali dengan menentukan tanggal untuk memfilter
file yang didownload pada tanggal tersebut, pada kolom denda diberlakukan denda
perhari dengan rumus perhitungan denda A x B x C, A = denda, B = jumlah baju
yang dipinjam, C = telat per hari. Contoh: A = 10.000, B = 2 dan C = 3 hari maka
10.000 x 2 x 3 hari = 60.000, denda yang didapatkan sejumlah 60.000 ribu. Berikut
halaman transaksi daftar kembali di tunjukan pada gambar 4.17.
Gambar 4.17 Halaman Transaksi Daftar Kembali

93
Gambar diatas merupakan halaman transaksi daftar kembali admin. Berikut

ini adalah potongan kode program dari halaman transaksi daftar kembali admin.
public function selesai()

{
//ambil data order yang status nya 5 barang sudah diterima
pelangan
-
d')
-
-
>join('detail_order','detail_order.order_id','=','order.id')
-
nama_pemesan', 'detail_order.denda')
->get();
$data = array(
);
return view('admin.transaksi.selesai',$data);
}
4.1.18 Halaman Transaksi Dibatalkan Pada Admin

Pada halaman transaksi dibatalkan admin dapat melihat transaksi yang
dibatalkan oleh pembeli dan admin dapat melihat detail transaksi yang dibatalkan
tersebut. Berikut halaman transaksi dibatalkan di tunjukan pada gambar 4.18.
94
Gambar 4.18 Halaman Transaksi Dibatalkan
Gambar diatas merupakan halaman transaksi dibatalkan admin. Berikut ini

adalah potongan kode program dari halaman transaksi dibatalkan admin.
public function dibatalkan()

{
-
d')
-
-
nama_pemesan')
->get();
$data = array(
);
return view('admin.transaksi.dibatalkan',$data);
}
95
4.1.19 Halaman Produk Pada User

Merupakan halaman produk yang dapat dilihat oleh user setelah login
maupun tidak, pada halaman produk ini menampilkan seluruh product dan kategori
yang dimana hanya menampilkan 2 kategori yaitu produk baju dan produk
assesoris. Berikut halaman produk di tunjukan pada gambar 4.19.
Gambar 4.19 Halaman Produk Pada User
Gambar diatas merupakan halaman produk pada user. Berikut ini adalah
potongan kode program dari halaman produk pada user.

{
//menampilkan data produk yang dijoin dengan table
kategori
//kemudian dikasih paginasi 9 data per halaman nya
$kat = DB::table('categories')
-
>join('products','products.categories_id','=','categories.id')
->select(DB::raw('count(products.categories_id)
as jumlah, categories.*'))
->groupBy('categories.id')
->get();
$data = array(
'produks' => Product::paginate(9),
'categories' => $kat
);
96
return view('user.produk',$data);
}
4.1.20 Halaman Product Detail User

Pada halaman product detail yang diakses oleh user menampilkan product
detail berdasarkan kategori yaitu product baju dan product assesoris, jika product
detail berkategori baju makan di product detail akan menampilkan form ukuran baju
itu sendiri sedangkan product detail yang berkategori assesoris tidak menampilkan
form ukuran karena tidak diperlukan. Berikut halaman product detail di tunjukan
pada gambar 4.20.
Gambar 4.20 Halaman Produk Detail
Gambar diatas merupakan halaman produk detail pada user. Berikut ini
adalah potongan kode program dari halaman produk detail pada user.
public function detail($id)

{
$produkDetails = DB::table('product_attributes')
-
>join('products','products.id','=','product_attributes.product_i
d')
97
->select('products.name as
nama_produk','products.image','products.description as
deskripsi','product_attributes.*','products.price')
->get();
$detailOrder = DB::table('detail_order')
->select('detail_order.*')
->where('product_id','=',$id)
->whereNull('tgl_kembali')
->get();
//mengambil detail produk
$data = array(
'produk' => Product::findOrFail($id),
'product_attributes' => $produkDetails,
'detail_order' => $detailOrder
);
return view('user.produkdetail',$data,
['produkDetails'=>$produkDetails, 'detailOrder'=>$detailOrder]);
}
4.1.21 Halaman Keranjang Pada User

Merupakan halaman keranjang yang diakses oleh user dapat digunakan
untuk menyisipkan pembelian product lebih dari satu produk. Berikut halaman
keranjang di tunjukan pada gambar 4.21.
98
Gambar 4.21 Halaman Keranjang
Gambar diatas merupakan halaman keranjang pada user. Berikut ini adalah
potongan kode program dari halaman keranjang pada user.

{
$id_user = \Auth::user()->id;
$keranjangs = DB::table('keranjang')
-
>join('users','users.id','=','keranjang.user_id')
-
>join('products','products.id','=','keranjang.products_id')
-
>join('product_attributes','product_attributes.id', '=',
'keranjang.product_attributes_id')
nama_produk','products.image','users.name','keranjang.*','produc
99
ts.price','products.diskon', 'product_attributes.harga',
'product_attributes.size')
-
>where('keranjang.user_id','=',$id_user)
->get();
$data = [
'keranjangs' => $keranjangs,
];
return view('user.keranjang',$data);
}
4.1.22 Halaman Checkout Pada User

Seperti pembahasan diatas pada halaman checkout lanjutan setelah
melakukan pembelian yang diletakkan di keranjang lalu melakukan checkout pada
tombol di bawah keranjang, setelah tampil halaman checkout user hanya akan
melakukan pengisian form catatan untuk admin lalu melakukan order dan untuk hal
penunjang pembelian seperti nama, jaminan berupa ktp, alamat tidak diisikan
karena sudah melakukan memasukan data register sebelumnya. Berikut halaman
order di tunjukan pada gambar 4.22.
100
Gambar 4.22 Halaman Checkout
Gambar diatas merupakan halaman checkout pada user. Berikut ini adalah
potongan kode program dari halaman checkout pada user.

{
//ambil session user id
$id_user = \Auth::user()->id;
//ambil produk apa saja yang akan dibeli user dari table
keranjang
$keranjangs = DB::table('keranjang')
-
>join('users','users.id','=','keranjang.user_id')
-
>join('products','products.id','=','keranjang.products_id')
-
>join('product_attributes','product_attributes.id', '=',
101
'keranjang.product_attributes_id')
nama_produk','products.image','users.name','keranjang.*','produc
ts.price','products.diskon','product_attributes.harga','product_
attributes.size', 'users.alamat', 'users.jaminan',
'users.nomor_hp')
-
>where('keranjang.user_id','=',$id_user)
->get();
$alamat_toko = DB::table('alamat_toko')
-
>join('cities','cities.city_id','=','alamat_toko.city_id')
-
>join('provinces','provinces.province_id','=','cities.province_i
d')
->select('alamat_toko.*','cities.title as
kota','provinces.title as prov')
->first();
$users = DB::table('users')
->select('users.*')
->first();
$data = [
'invoice' => 'ALV'.Date('Ymdhi'),
'keranjangs' => $keranjangs,
'alamat_toko' => $alamat_toko,
'users' => $users
];
return view('user.checkout',$data);
}
4.1.23 Halaman Order Pada User

Pada halaman order user dapat melakukan pembayaran sesuai subtotal
pembelian dengan cara memasukan bukti pembayaran dan user dapat membatalkan
order yang sudah dibuat. Berikut halaman order di tunjukan pada gambar 4.23.
102
Gambar 4.23 Halaman Order
Gambar diatas merupakan halaman order pada user. Berikut ini adalah
potongan kode program dari halaman order pada user.

{
//menampilkan semua data pesanan
$user_id = \Auth::user()->id;
-
d')
->select('order.*','status_order.name')
103
->Where('order.status_order_id','!=',10)
->where('order.user_id',$user_id)->get();
$dicek = DB::table('order')
-
d')
$kembali = DB::table('order')
-
d')
-
>join('detail_order','detail_order.order_id','=','order.id')
-
>select('order.*','status_order.name','detail_order.denda')
$histori = DB::table('order')
-
d')
104
$data = array(
'order' => $order,
'dicek' => $dicek,
'histori'=> $histori,
'kembali' => $kembali,
);
return view('user.order.order',$data);
}
4.2 Implementasi Data

Implementasi ini dilakukan setelah dilakukannya perancangan database
pada bab sebelumnya. Berikut ini tampilan implementasi data pada aplikasi ini.
4.2.1 Tabel Users

Tabel users digunakan sebagai tempat untuk menyimpan data pengguna
untuk dapat login. Berikut ini contoh kode pembuatan tabel users.
CREATE TABLE ùsers` ( ìd` bigint(20) unsigned NOT NULL
AUTO_INCREMENT, `name` varchar(255) COLLATE utf8mb4_unicode_ci
NOT NULL, èmail` varchar(255) COLLATE utf8mb4_unicode_ci NOT
NULL, èmail_verified_at` timestamp NULL DEFAULT
NULL, `password` varchar(255) COLLATE utf8mb4_unicode_ci NOT
NULL, `role` varchar(30) COLLATE utf8mb4_unicode_ci NOT
NULL, àlamat` varchar(255) COLLATE utf8mb4_unicode_ci NOT
NULL, `jaminan` varchar(255) COLLATE utf8mb4_unicode_ci NOT
NULL, `nomor_hp` varchar(255) COLLATE utf8mb4_unicode_ci NOT
NULL, `remember_token` varchar(100) COLLATE utf8mb4_unicode_ci
DEFAULT NULL, `created_at` timestamp NULL DEFAULT
NULL, ùpdated_at` timestamp NULL DEFAULT NULL, PRIMARY KEY
105
(ìd`), UNIQUE KEY ùsers_email_unique` (èmail`) )

ENGINE=InnoDB AUTO_INCREMENT=15 DEFAULT CHARSET=utf8mb4
COLLATE=utf8mb4_unicode_ci
Struktur tabel users yang berhasil dibuat dapat dilihat pada gambar 4.24.
Tabel ini memiliki struktur seperti dibawah ini.
Gambar 4.24 Struktur Tabel Users
4.2.2 Tabel Produk

Tabel produk digunakan sebagai tempat untuk menyimpan data product.
Berikut ini contoh kode pembuatan tabel produk.
CREATE TABLE `products` ( ìd` bigint(20) unsigned NOT NULL
AUTO_INCREMENT, `product_code` varchar(20) COLLATE
utf8mb4_unicode_ci NOT NULL, `name` varchar(255) COLLATE
utf8mb4_unicode_ci NOT NULL, `description` text COLLATE
utf8mb4_unicode_ci NOT NULL, ìmage` text COLLATE
utf8mb4_unicode_ci NOT NULL, `price` int(11) NOT NULL, `diskon`
int(50) DEFAULT NULL, `categories_id` bigint(20) unsigned NOT
NULL, `created_at` timestamp NULL DEFAULT NULL, ùpdated_at`
timestamp NULL DEFAULT NULL, `stok` int(11) NOT NULL, PRIMARY
KEY (ìd`) ) ENGINE=InnoDB AUTO_INCREMENT=24 DEFAULT
CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
Struktur tabel produk yang berhasil dibuat dapat dilihat pada gambar 4.25.
Tabel ini memiliki struktur seperti dibawah ini
106
Gambar 4.25 Struktur Tabel Produk
4.2.3 Tabel Kategori

Tabel kategori digunakan sebagai tempat untuk menyimpan data kategori
product. Berikut ini contoh kode pembuatan tabel kategori.
CREATE TABLE `categories` ( ìd` bigint(20) unsigned NOT NULL
NOT NULL, `created_at` timestamp NULL DEFAULT NULL, ùpdated_at`
timestamp NULL DEFAULT NULL, PRIMARY KEY (ìd`) ) ENGINE=InnoDB
AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4
Struktur tabel kategori yang berhasil dibuat dapat dilihat pada gambar 4.26.
Gambar 4.26 Struktur Tabel Kategori
4.2.4 Table Rekening

Tabel rekening digunakan sebagai tempat untuk menyimpan data rekening
dari admin. Berikut ini contoh kode pembuatan tabel rekening.
CREATE TABLE `rekening` ( ìd` bigint(20) unsigned NOT NULL
AUTO_INCREMENT, `bank_name` varchar(255) COLLATE
utf8mb4_unicode_ci NOT NULL, àtas_nama` varchar(255) COLLATE
utf8mb4_unicode_ci NOT NULL, `no_rekening` varchar(255) COLLATE
utf8mb4_unicode_ci NOT NULL, `created_at` timestamp NULL DEFAULT
107
NULL, ùpdated_at` timestamp NULL DEFAULT NULL, PRIMARY KEY

(ìd`) ) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8mb4
Struktur tabel rekening yang berhasil dibuat dapat dilihat pada gambar 4.27.
Gambar 4.27 Struktur Tabel Rekening
4.2.5 Tabel Keranjang

Tabel keranjang digunakan sebagai tempat untuk menyimpan data
pembelian product. Berikut ini contoh kode pembuatan tabel keranjang.
CREATE TABLE `keranjang` ( ìd` bigint(20) unsigned NOT NULL
AUTO_INCREMENT, ùser_id` bigint(20) unsigned NOT
NULL, `products_id` bigint(20) unsigned NOT
NULL, `product_attributes_id` bigint(20) DEFAULT NULL, `durasi`
int(11) NOT NULL, `tgl_mulai` date NOT NULL, `tgl_selesai` date
NOT NULL, `qty` int(11) NOT NULL, `created_at` timestamp NULL
DEFAULT NULL, ùpdated_at` timestamp NULL DEFAULT NULL, PRIMARY
KEY (ìd`) ) ENGINE=InnoDB AUTO_INCREMENT=60 DEFAULT
Struktur tabel keranjang yang berhasil dibuat dapat dilihat pada gambar
4.28. Tabel ini memiliki struktur seperti dibawah ini.
Gambar 4.28 Struktur Tabel Keranjang

108
4.2.6 Tabel Order

Tabel order digunakan sebagai tempat untuk menyimpan data pembelian
product setelah melakukan checkout. Berikut ini contoh kode pembuatan tabel
order.
CREATE TABLE òrder_` ( ìd` bigint(20) unsigned NOT NULL
AUTO_INCREMENT, ìnvoice` varchar(255) COLLATE
utf8mb4_unicode_ci NOT NULL, ùser_id` bigint(20) unsigned NOT
NULL, `subtotal` int(11) NOT NULL, `pesan` varchar(255) COLLATE
utf8mb4_unicode_ci DEFAULT NULL, `status_order_id` bigint(20)
unsigned NOT NULL, `status_denda` int(11) NOT
NULL, `metode_pembayaran` varchar(255) COLLATE
utf8mb4_unicode_ci NOT NULL, `bukti_pembayaran` varchar(255)
COLLATE utf8mb4_unicode_ci DEFAULT NULL, `created_at` timestamp
NULL DEFAULT NULL, ùpdated_at` timestamp NULL DEFAULT
NULL, PRIMARY KEY (ìd`) ) ENGINE=InnoDB AUTO_INCREMENT=30
DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci
Struktur tabel order yang berhasil dibuat dapat dilihat pada gambar 4.29.
Gambar 4.29 Struktur Tabel Order
4.2.7 Tabel Detail Order

Tabel detail_order digunakan sebagai tempat untuk menyimpan data dari
keranjang atau detail dari pembelian. Berikut ini contoh kode pembuatan tabel
detail_order.
CREATE TABLE `detail_order` ( ìd` bigint(20) unsigned NOT NULL
AUTO_INCREMENT, òrder_id` bigint(20) unsigned NOT
NULL, `product_id` bigint(20) unsigned NOT
109
NULL, `product_attributes_id` bigint(20) DEFAULT NULL, `durasi`

int(11) NOT NULL, `tgl_mulai` date NOT NULL, `tgl_selesai` date
NOT NULL, `tgl_kembali` date DEFAULT NULL, `qty` int(11) NOT
NULL, `denda` int(50) DEFAULT NULL, `bukti_pembayaran`
varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT
Struktur tabel detail_order yang berhasil dibuat dapat dilihat pada gambar
4.30. Tabel ini memiliki struktur seperti dibawah ini
Gambar 4.30 Struktur Detail Order
4.2.8 Tabel Product Attribute

Tabel product attribute digunakan sebagai tempat untuk menyimpan data
ukuran product. Berikut ini contoh kode pembuatan tabel product_attribute.
CREATE TABLE `product_attributes` ( ìd` bigint(20) unsigned NOT
NULL AUTO_INCREMENT, `product_id` int(11) DEFAULT NULL, `sku`
varchar(50) COLLATE utf8mb4_unicode_ci DEFAULT NULL, `size`
varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL, `harga`
int(11) DEFAULT NULL, `stok` int(11) DEFAULT NULL, `created_at`
timestamp NULL DEFAULT NULL, ùpdated_at` timestamp NULL DEFAULT
Struktur tabel product attribute yang berhasil dibuat dapat dilihat pada
gambar 4.31. Tabel ini memiliki struktur seperti dibawah ini
110
Gambar 4.31 Struktur Tabel Producut Attribute
4.2.9 Tabel Status Order

Tabel status order digunakan sebagai tempat untuk menyimpan data status
yang dapat digunakan pada tabel order. Berikut ini contoh kode pembuatan tabel
status order.
CREATE TABLE `status_order` ( ìd` bigint(20) unsigned NOT NULL
NOT NULL, `created_at` timestamp NULL DEFAULT NULL, ùpdated_at`
Struktur tabel status order yang berhasil dibuat dapat dilihat pada gambar
Gambar 4.32 Struktur Tabel Status Order
4.2.10 Tabel Alamat Toko

Tabel alamat toko digunakan sebagai tempat untuk menyimpan data detail
alamat toko. Berikut ini contoh kode pembuatan tabel alamat toko.
CREATE TABLE àlamat_toko` ( ìd` bigint(20) unsigned NOT NULL
AUTO_INCREMENT, `city_id` int(11) NOT NULL, `detail`
varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `created_at`
111
NULL, PRIMARY KEY (ìd`) ) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT

Struktur tabel alamat toko yang berhasil dibuat dapat dilihat pada gambar
Gambar 4.33 Struktur Tabel Alamat Toko
4.2.11 Tabel Kota

Tabel kota digunakan sebagai tempat untuk menyimpan data kota yang
berrelasi provinsi . Berikut ini contoh kode pembuatan tabel alamat toko.
CREATE TABLE `cities` ( ìd` bigint(20) unsigned NOT NULL
AUTO_INCREMENT, `province_id` bigint(20) unsigned NOT
NULL, `city_id` bigint(20) unsigned NOT NULL, `title`
varchar(255) COLLATE utf8mb4_unicode_ci NOT NULL, `created_at`
Struktur tabel kota yang berhasil dibuat dapat dilihat pada gambar diatas
.Tabel ini memiliki struktur seperti dibawah ini.
Gambar 4.34 Struktur Tabel Kota
4.2.12 Tabel Provinsi

Tabel provinsi digunakan sebagai tempat untuk menyimpan data provinsi .
Berikut ini contoh kode pembuatan tabel provinsi.
CREATE TABLE `provinces` ( ìd` bigint(20) unsigned NOT NULL
112
AUTO_INCREMENT, `province_id` bigint(20) unsigned NOT

NULL, `title` varchar(255) COLLATE utf8mb4_unicode_ci NOT
Struktur tabel provinsi yang berhasil dibuat dapat dilihat pada gambar diatas
.Tabel ini memiliki struktur seperti dibawah ini.
Gambar 4.35 Struktur Tabel Provinsi

BAB V
PENGUJIAN DAN PEMBAHASAN
5.1 Pengujian Proses

Pengujian sistem ini menggunakan pengujian black box. Aplikasi
dinyatakan berhasil melewati pengujian apabila dalam percobaan-percobaan
berikut aplikasi tidak mengalami gagal/error. Aplikasi akan diuji dengan macam
kondisi masukan, kemudian keluaran yang dihasilkan sistem akan dibandingkan
dengan keluaran yang diharapkan. Berikut adalah hasil pengujian dari Sistem
Informasi penyewaan baju di nana salon berbasis web.
5.1.1 Pengujian Halaman Register

Pengujian ini dilakukan untuk menguji halaman register, Pada form ini
pengujian dilakukan dengan cara memasukkan nama, email, password, alamat, dan
jaminan ketika berhasil login maka user akan diarahkan ke halaman dashboard.
Hasil pengujian jika memasukkan email sudah pernah didaftarkan sebelumnya
ditunjukkan pada Gambar 5.1.
Gambar 5.1 Pengujian Halaman Register Gagal
Hasil pengujian jika berhasil register ditunjukkan pada Gambar 5.2.
113
114
Gambar 5.2 Pengujian Register Berhasil
5.1.2 Pengujian Halaman Login

Pengujian ini dilakukan untuk menguji halaman login, Pada form ini
pengujian dilakukan dengan cara memasukkan email, ketika berhasil login maka
user akan diarahkan ke halaman dashboard. Hasil pengujian jika memasukkan
email yang belum pernah didaftarkan dan password tidak sesuai ditunjukkan pada
Gambar 5.3.
Gambar 5.3 Pengujian Halaman Login Gagal
Hasil pengujian jika berhasil login ditunjukkan pada Gambar 5.4.
Gambar 5.4 Pengujian Halaman Login Berhasil

115
5.1.3 Pengujian Kelola Data Master Product

Pengujian ini dilakukan untuk menguji proses lihat, tambah, ubah, hapus
data product.
Kelola Lihat Data Product
Ketika admin melakukan login maka admin dapat melihat data product pada
sidebar data master dan tekan tombol product. Pengujian kelola lihat data produk
berhasil dilakukan maka sistem akan menampilkan seperti yang ditunjukan pada
gambar 5.5.
Gambar 5.5 Pengujian Kelola Lihat Data Product
Kelola Tambah Data Product

Setelah melakukan proses diatas maka admin dapat menambahkan data
product dengan cara tekan tombol tambah dan melakukan pengisian form dan
simpan product. Pengujian tambah produk berhasil dilakukan maka sistem akan
menampilkan notifikasi seperti yang ditunjukan pada gambar 5.6.
116
Gambar 5.6 Pengujian Tambah Product
Kelola Ubah Product

Setelah melakukan proses tambah data product dan admin melakukan
kesalahan saat pengisian form product, admin dapat merubah data yang salah
dengan cara pilih tombol icon ubah pada kolom aksi akan menampilkan form ubah
dan admin dapat mengubah sesuai yang diinginkan. Pengujian ubah produk berhasil
dilakukan maka sistem akan menampilkan notifikasi seperti yang ditunjukan pada
gambar 5.7.
Gambar 5.7 Pengujian Ubah Product
Kelola Hapus Product

Admin dapat melakukan hapus data product yang sudah tidak dapat
digunakan dengan cara pilih tombol sampah pada kolom aksi lalu muncul pilihan
ya atau tidak. Pengujian hapus produk berhasil dilakukan maka sistem akan
menampilkan seperti yang ditunjukan pada gambar 5.8.
117
Gambar 5.8 Pengujian Hapus Product
Kelola Tambah Attribute Size Product

Admin dapat melakukan tambah data attribute size dengan kategori pakaian,
dengan cara pilih tombol icon tambah pada kolom aksi akan menampilkan form
tambah attribute size, melakukan pengisian form dan simpan . Pengujian tambah
attribute size produk berhasil dilakukan maka sistem akan menampilkan seperti
Gambar 5.9 Pengujian Kelola Attribute Tambah Size Product

118
5.1.4 Pengujian Profil Alamat Toko

Pengujian ini dilakukan untuk menguji proses lihat, ubah data profil alamat
toko.
Lihat Profil Alamat Toko
Ketika admin sudah melakukan login, admin dapat melakukan lihat data
alamat toko dengan cara pilih pengaturan dan tekan alamat toko lalu akan menuju
ke halaman profil alamat toko. Pengujian lihat profil toko berhasil dilakukan maka
sistem akan menampilkan seperti yang ditunjukan pada gambar 5.10.
Gambar 5.10 Pengujian Lihat Profil Alamat Toko
Ubah Profil Alamat Toko

Setelah admin melakukan proses lihat profil toko, admin dapat mengubah
profil toko yang salah dengan cara pilih tombol link lalu ubah data kartu rekening
yang salah dan simpan data. Pengujian ubah profil toko berhasil dilakukan maka
sistem akan menampilkan notifikasi seperti yang ditunjukan pada gambar 5.11.
119
Gambar 5.11 Pengujian Ubah Alamat Toko
5.1.5 Pengujian Data Profil Rekening

Pengujian dilakukan untuk menguji proses lihat, tambah, ubah, hapus data
rekening.
Pengujian Lihat Data Profil Rekening
Ketika admin sudah melakukan login, admin dapat melakukan lihat data
kartu rekening dengan cara pilih sidebar rekening lalu akan menuju ke halaman
rekening. Pengujian lihat data kartu rekening berhasil dilakukan maka sistem akan
Gambar 5.12 Pengujian Lihat Data Profil Rekening
Pengujian Tambah Data Profil Rekening

Ketika admin sudah melakukan proses diatas admin dapat melakukan
tambahkan data kartu rekening, pilih tombol tambah lalu admin melakukan
120
pengisian form nama bank, atas nama, nomer rekening setelah itu pilih simpan.
Pengujian tambah data kartu rekening berhasil dilakukan maka sistem akan
menampilkan notifikasi seperti yang ditunjukan pada gambar 5.13.
Gambar 5.13 Pengujian Tambah Data Profil Rekening
Pengujian Ubah Data Profil Rekening

Setelah admin melakukan proses tambah data kartu rekening dan melakukan
kesalahan saat pengisian form tambah, admin dapat mengubah data yang salah
dengan cara pilih tombol icon ubah pada kolom aksi lalu ubah data kartu rekening
yang salah dan simpan data. Pengujian ubah data kartu rekening berhasil dilakukan
maka sistem akan menampilkan notifikasi seperti yang ditunjukan pada gambar
5.14.
Gambar 5.14 Pengujian Ubah Data Profil Rekening

121
Pengujian Hapus Data Profil Rekening

Admin dapat melakukan hapus data kartu rekening yang sudah tidak dapat
digunakan dengan cara pilih tombol sampah pada kolom aksi lalu muncul pilihan
ya atau tidak. Pengujian hapus data kartu rekening berhasil dilakukan maka sistem
akan menampilkan seperti yang ditunjukan pada gambar 5.15.
Gambar 5.15 Pengujian Hapus Data Profil Rekening
5.1.6 Pengujian Transaksi Penyewaan

Pengujian dilakukan untuk menguji proses sewa baju oleh pelanggan
dengan menampilkan lihat product, masukan keranjang, checkout, pembayaran,
batalkan order sewa.
Pengujian Lihat Product
Pada halaman product pelanggan dapat melihat product dengan login
terlebih dahulu ataupun tidak dan dapat memilih ukuran product, menentukan
tanggal sewa dan durasinya. Pengujian lihat product telah berhasil setelah
mengisikan form maka sistem menampilkan seperti yang ditunjukan pada gambar
5.16.
122
Gambar 5.16 Pengujian Lihat Product
Pengujian Masukan Keranjang

Setelah melakukan login pelanggan dan melakukan proses diatas maka akan
muncul notif pada tombol keranjang dan tekan tombolnya akan menuju halaman
keranjang, menampilkan keranjang pilihan product pelanggan seperti tanggal sewa,
gambar product dan total sewa product. Pengujian masukan keranjang telah berhasil
maka sistem akan menampilkan seperti yang ditunjukan pada gambar 5.17.
123
Gambar 5.17 Pengujian Masukan Keranjang
Pengujian Checkout Sewa Product

Setelah pelanggan melakukan proses diatas maka selanjutnya pilih tombol
checkout untuk melakukan proses berikutnya, menampilkan detail product sewa
pelanggan, total sewa, profil toko dan jaminan pelanggan saat melakukan register
sebelumnya. Pengujian checkout sewa product telah berhasil maka sistem akan
124
Gambar 5.18 Pengujian Checkout Sewa Product
Pengujian Transaksi Pembayaran Sewa

Setelah melakukan proses checkout maka akan menampilkan menu
trimakasih, tekan tombol menu pembayaran yang menuju kehalaman order pilih
tombol pembayaran dan akan menampilkan total pembayaran, nomor rekening dari
toko, atas nama rekening toko dan pelanggan dapat melakukan kirim bukti
pembayaran. Pengujian transaksi pembayaran sewa telah berhasil maka sistem
berganti status telah perlu dicek, menampilkan seperti yang ditunjukan pada gambar
5.19.
125
Gambar 5.19 Pengujian Transaksi Pembayaran Sewa
Pengujian Batalkan Sewa Order

Setelah pelanggan melakukan proses checkout dan menuju menu order,
pelanggan dapat membatalkan order sewa tersebut. Pengujian batalkan sewa order
telah berhasil maka sistem akan menampilkan notifikasi seperti yang ditunjukan
pada gambar 5.20.
Gambar 5.20 Pengujian Batalkan Sewa Order

126
5.1.7 Pengujian Konfirmasi Transaksi

Pengujian dilakukan untuk menguji proses konfirmasi pembayaran,
masukan barang daftar pinjam, barang telah kembali dan denda.
Konfirmasi Transaksi Pembayaran
Saat pelanggan mengirimkan bukti pembayaran maka admin dapat
malakukan konfirmasi pembayaran dengan cara pilih transaksi pada sidebar dan
tekan tombol perlu dicek akan menampilkan data transaksi yang berstatus perlu
dicek maka admin pilih tombol konfirmasi pada kolom aksi dan cek detail transaksi
berupa jaminan pelanggan dan bukti pembayaran lalu admin mengkonfirmasi
pembayaran yang dirasa sudah benar. Pengujian konfirmasi transaksi pembayaran
telah berhasil dilakukan maka sistem akan menampilkan notifikasi menerima
pembayaran atau tidak seperti yang ditunjukan pada gambar 5.21.
Gambar 5.21 Pengujian Konfirmasi Pembayaran
Konfirmasi Tolak Transaksi Pembayaran

Saat pelanggan mengirimkan bukti pembayaran maka admin dapat
malakukan konfirmasi pembayaran dengan cara pilih transaksi pada sidebar dan
tekan tombol perlu dicek akan menampilkan data transaksi yang berstatus perlu
dicek maka admin pilih tombol konfirmasi pada kolom aksi dan cek detail transaksi
berupa jaminan pelanggan dan bukti pembayaran lalu admin dapat mengkonfirmasi
tolak pembayaran yang dirasa tidak benar saat pelanggan mengirimkan bukti
pembayaran yang salah. Pengujian konfirmasi tolak transaksi pembayaran telah
berhasil dilakukan maka sistem akan menampilkan notifikasi menerima
pembayaran atau tidak seperti yang ditunjukan pada gambar 5.22.
127
Gambar 5.22 Konfirmasi Tolak Transaksi Pembayaran
Konfirmasi Transaksi Masukan Daftar Pinjam

Setelah admin melakukan konfirmasi pembayaran maka akan menuju
halaman yang sama yaitu halaman perlu dicek dan admin melakukan konfirmasi
lagi untuk memasukan data transaksi tersebut ke daftar transaksi dipinjam.
Pengujian konfirmasi masukan barang daftar pinjam telah berhasil dilakukan maka
sistem akan menampilkan ke halaman daftar pinjam setelah dikonfimasi seperti
Gambar 5.23 Pengujian Konfirmasi Transaksi Masukan Daftar Pinjam
Konfirmasi Transaksi Barang Telah Kembali

Ketika pelanggan akan mengembalikan product yang disewa ketempat toko
maka admin dapat mengkonfirmasi barang telah kembali dengan cara pilih transaksi
pada sidebar dan tekan tombol daftar pinjam maka sistem akan menampilkan daftar
pinjam yang belum dikembalikan dan admin dapat mengkonfirmasi product yang
dikembalikan, pada tombol product dikembalikan saat konfirmasi maka akan
langsung mengisi tanggal kembali secara otomatis dan jika pelanggan mendapatkan
128
denda maka akan menuju halaman denda dan jika tidak mendapatkan denda akan
menuju ke halaman daftar kembali. Pengujian konfirmasi barang telah kembali
telah berhasil dilakukan maka sistem akan menampilkan seperti yang ditunjukan
pada gambar 5.24.
Gambar 5.24 Pengujian Konfirmasi Transaksi Barang Telah Kembali
Konfirmasi Transaksi Denda

Setelah admin melakukan konfirmasi barang telah kembali jika pelanggan
mendapatkan denda maka akan menampilkan kehalaman denda dan admin dapat
mengkonfirmasi denda saat pelanggan membayar denda ditempat. Pengujian
konfirmasi transaksi denda telah berhasil dilakukan maka sistem akan menampilkan
notifikasi seperti yang ditunjukan pada gambar 5.25.
Gambar 5.25 Pengujian Konfirmasi Denda
5.1.8 Pengujian Halaman Dashboard

Setelah admin melakukan login maka halaman yang pertama kali diakses
adalah dashboard yang menampilkan pendapatan keseluruhan yang telah menyewa,
129
jumlah transaksi, jumlah pelanggan dan admin dapat melihat grafik produk terlaris
perbulan. Pengujian halaman dashboard yang diakses oleh admin berhasil
dilakukan maka sistem akan menampilkan seperti yang ditunjukan pada gambar
5.24.
Gambar 5.26 Pengujian Halaman Dashboard
5.1.9 Pengujian Kelola Cetak Laporan dan Nota

Pengujian mencetak data laporan pertanggal untuk memfilter dan nota
untuk pelanggan.
Kelola Cetak Laporan Transaksi Pertanggal
Admin juga dapat mencetak data laporan transaksi pertanggal untuk
memfilter laporan transaksi dengan cara pilih transaksi pada sidebar dan tekan
tombol daftar kembali maka akan menampilkan seluruh data transaksi yang telah
kembali, admin memilih tanggal mulai dan tanggal selesai untuk memfilter cetak
130
transaksi laporan lalu tekan tombol print dan akan mendownload file transaksi
laporan pertanggal. Pengujian cetak data laporan pertanggal berhasil dilakukan
maka sistem akan menampilkan seperti yang ditunjukan pada gambar 5.27.
Gambar 5.27 Kelola Cetak Laporan Transaksi Pertanggal
Kelola Cetak Nota Pelanggan

Admin dapat melakukan cetak data nota pelanggan saat pelanggan
mengembalikan product ditoko dan admin dapat memberikan cetak data nota
pelanggan tersebut, dengan cara pilih transaksi pada sidebar dan tekan tombol daftar
kembali maka akan menampilkan seluruh data transaksi yang telah kembali dan
tekan tombol nota pada kolom aksi lalu akan mendownload file nota pelanggan
tersebut. Pengujian cetak nota berhasil dilakukan maka sistem akan menampilkan
seperti yang ditunjukan pada gambar 5.28.
Gambar 5.28 Kelola Cetak Nota Pelanggan

131
5.2 Analisa Hasil Penelitian

Berikut merupakan hasil pengujian menggunakan metode black box
terhadap sistem, dapat dilihat bahwa secara umum sistem mampu menjalankan
setiap proses uji coba secara baik dan berhasil. Sistem Informasi Penyewaan Baju
Di Nana Salon ini harapannya pelanggan bisa mengetahui informasi product dan
melakukan proses sewa baju tanpa harus datang langsung kesalon. Berikut ini
adalah data deskripsi dah hasil pengujian sistem menggunakan metode black box
ditunujkan pada tabel 5.1
Tabel 5.1 Pengujian Black Box

No Deskripsi Prosedur Masukan Hasil Yang Hasil
Pengujian Diharapkan Pengujian
1 Register Pelanggan Klik register Dapat masuk ke Sesuai
melakukan register dashboard
dengan
memasukkan
nama,
email,alamat,
jaminan dan
password.
2 Login Melakukan login Klik login Dapat masuk ke Sesuai
dengan dashboard
memasukkan email
dan password.
No Deskripsi Prosedur Masukan Hasil Yang Hasil
Pengujian Diharapkan Pengujian
3 Mengelola Admin melakukan Klik lihat, Dapat Sesuai
Data Master proses tambah, ubah, menampilkan,
Product ubah, hapus dan tambah dan mengubah, dan
lihat data product hapus mengahapus
data product
4 Mengelola Admin melakukan Klik lihat Dapat Sesuai
Profil proses ubah dan dan ubah menampilkan
Alamat lihat data alamat alamat toko dan mengubah
toko data alamat
toko
5 Mengelola Admin melakukan Klik lihat, Dapat Sesuai
Profil proses tambah, ubah, menampilkan,
Rekening ubah, hapus dan tambah dan mengubah, dan
lihat data rekening hapus mengahapus
data rekening
6 Penyewaan Pelanggan Klik add to Dapat Sesuai
Baju Oleh melakukan chart, membuat,
User pengisian form checkout menampilkan,
product detail, dan upload membatalkan
masukan keranjang bukti dan upload
132
lalu checkout dan pembayaran bukti

melakukan pembayaran
pembayaran
dengan
mengupload bukti
pembayaran
7 Mengelola Admin melakukan Klik Dapat Sesuai
Transaksi proses konfirmasi konfirmasi mengkonfirmasi
pembayaran, pembayaran, pembayaran,
masukan barang masukan masukan barang
daftar pinjam, barang daftar pinjam,
barang telah daftar barang telah
kembali, denda pinjam, kembali, denda
barang telah
kembali,
denda
8 Dashboard Admin, melakukan Klik Dapat Sesuai
proses lihat dashboard menampilkan
ringkasan data halaman
dashboard
9 Cetak Data Admin melakukan Klik print Dapat mencetak Seusuai
cetak data laporan dan nota data laporan
transaksi dan cetak daftar kembali
nota pelanggan dan cetak data
pada halaman nota pelanggan
daftar kembali
BAB VI
KESIMPULAN DAN SARAN
6.1 Kesimpulan
Kesimpulan pada penulisan Laporan Akhir yang berjudul “Sistem Informasi
Penyewaan Baju Di Nana Salon Berbasis Website” dapat diambil kesimpulan
sebagai berikut.
1. Telah berhasil merancang dan membuat Sistem Informasi Penyewaan
Baju Di Nana Salon Berbasis Web.
2. Sistem Informasi Penyewaan Baju Di Nana Salon Berbasis Web dibuat
dengan Framework Laravel dan menggunakan MySQL untuk
databasenya.
6.2 Saran
Saran yang dapat penulis diberikan untuk pengembangan lebih lanjut dari
Sistem Informasi Penyewaan Baju Di Nana Salon Berbasis Web adalah sebagai
berikut.
1. Penulis berharap pada pengembangan sistem informasi penyewaan baju
di nana salon berbasis web selanjutnya dalam proses pembayaran
menerapkan pembayaran virtual seperti gopay ataupun lainnya agar
dapat memudahkan pelanggan dalam pembayaran.
2. Penulis berharap pada pengembangan sistem informasi penyewaan baju
di nana salon berbasis web selanjutnya dibangun fitur chatting personal
antara admin dan pelanggan.
133
DAFTAR PUSTAKA
Adani. (2020, 8 15). Apa itu MySQL: Pengertian, Fungsi, beserta Kelebihan.
Retrieved from sekawanmedia:
https://www.sekawanmedia.co.id/pengertian-mysql/
Adani. (2020, 12 16). Pengenalan Apa Itu Website Beserta Fungsi, Manfaat dan
Cara Membuatnya. Retrieved from Sekawan Media:
https://www.sekawanmedia.co.id/pengertian-website/
Adani M. R. (2021, 6 21). Mengenal Apa itu Use Case dan Teknik Pembuatannya.
Retrieved from Sekawan Media: https://www.sekawanmedia.co.id/use-
case-diagram/
Ahmedika Azkiya, A. S. (2018). APLIKASI PENYEWAAN PERLENGKAPAN
PERNIKAHAN . Volume 9, Nomor 1, Januari 2018, 29-34.
Aprilia. (2021, 5 18). Pengertian HTML, Fungsi dan Cara Kerjanya. Retrieved
from niagahoster: https://www.niagahoster.co.id/blog/html-
adalah/#Apa_itu_HTML
Effendi. (2021, 1 30). Apa itu Sequence Diagram? Mengenal Pengertian Sequence
Diagram. Retrieved from Nesabamedia:
https://www.nesabamedia.com/sequence-diagram/
Intermedia. (2020, 2 5). Apa itu Laravel? Fitur dan Kelebihan Laravel dibanding
Framework lainnya. Retrieved from jagoanhosting:
https://www.jagoanhosting.com/blog/framework-laravel/#kelebihan-
laravel-dibanding-framework-lainnya
Novitasari C. (2021, 10 20). Pelajarindo. Retrieved from Pengertian Activity
Diagram dan Simbol-Simbolnya: https://pelajarindo.com/pengertian-
activity-diagram-simbol/
Phedra Nicolas, M. (2019). SISTEM INFORMASI E-MARKETPLACE
PENYEWAAN DAN PENJUALAN PERLENGKAPAN KOSTUM
CEREMONIAL DI KOTA SAMPIT BERBASIS WEB. Vol.10 No.2,
November 2019.
Rojali, A., Sofyan, A., & Wibawa, E. (2014). Perancangan Sistem Informasi
Nyentrik Galery Wedding Organizer menggunakan Java dengan database
MySQL.
134
135
Wahyuni, T. (2021). RANCANG BANGUN SISTEM PENYEWAAN BAJU DAN

DEKORASI BERBASIS WEB PADA NITA WEDDING ORGANIZER.
Volume 16 Nomor 1 April 2021, 1-9.
Komputer, W. (2010). Panduan Belajar MySQL Database Server. MediaKita.
Ariantini, M. S. (2019). PERANCANGAN SISTEM INFORMASI RESERVASI
PAKAIAN ADAT BALI BERBASIS WEBSITE. Volume 05, Nomor 02
Oktober 2019, 187-195.

Akhlaqul Wafi Athoillah - 1931730073 - SISTEM INFORMASI PENYEWAAN BAJU DI NANA SALON BERBASIS WEB

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Akhlaqul Wafi Athoillah - 1931730073 - SISTEM INFORMASI PENYEWAAN BAJU DI NANA SALON BERBASIS WEB

Diunggah oleh

Hak Cipta:

Format Tersedia

LAPORAN AKHIR

SISTEM INFORMASI PENYEWAAN BAJU DI NANA SALON

PROGRAM STUDI D-III MANAJEMEN INFORMATIKA

SISTEM INFORMASI PENYEWAAN BAJU DI NANA SALON

PROGRAM STUDI D-III MANAJEMEN INFORMATIKA

SISTEM INFORMASI PENYEWAAN BAJU DI NANA SALON

Laporan Akhir ini telah diuji pada tanggal 19 Juli 2022

2. Rinanza Zulmy Alhamri, S.Kom.,M.Kom. ................................. (Penguji 1)

3. Berlian Rahmy Lidiawaty, S.ST.M.MT ...................................... (Penguji 2)

Dandung Novianto, S.T., M.T Fadelis Sukya, S.Kom., M.Cs.

Kediri, 19 juli 2022

Laporan Akhir, Program Studi D-III Manajemen Informatika, Jurusan

Sistem Informasi Penyewaan Baju Di Nana Salon Berbasis Website yang

Kata Kunci : Sistem Informasi, Penyewaan, Website, Nana Salon.

Final Report, Informatics Management D-III Study Program, Department of

Information System for renting clothes at Nana Salon based on a website

Keywords : Information System, Rental, Website, Nana Salon.

1. Bapak Dandung Novianto,S.T.,M.T., selaku Koordinator PSDKU Polinema

Kediri, 19 Juli 2022

HALAMAN PENGESAHAN ........................................................................................... ii

Gambar 2.1 Logo PHP ....................................................................................................... 9

Tabel 2.1 Perbandingan Studi Literatur .............................................................................. 6

1.1 Latar Belakang

1.2 Rumusan Masalah

1.3 Tujuan Penelitian

1.4 Batasan Masalah

1.5 Sistematika Penulisan

2.1 Penelitian yang Relevan

berbagai perusahaan-perusahaan di dunia tanpa dibatasi oleh teritori ruang

Tabel 2.1 Perbandingan Studi Literatur

No Judul Tujuan Fitur Hasil

klasik wedding 1. Melihat data penyewaan

4 Sistem Informasi Merancang dan Admin: Menghasilkan

2.2 Dasar Teori

2.2.1 Sistem Informasi

Gambar 2.1 Logo PHP

Dengan menggunakan bahasa pemrograman HTML dan CSS, maka dibutuhkan

Gambar 2.2 Logo HTML

Gambar 2.3 Logo CSS

dituliskan pada halaman HTML yang digunakan kemudian dipanggil menggunkana

Gambar 2.4 Logo JavaScript

program aslinya (source code program) maupun versi binernya (executable

2.2.10 Use Case

Tabel 2.2 Simbol Use Case

1 Use Case Fungsionalitas yang disediakan sistem sebagai unit-

2 Aktor / Actor Orang, proses, atau sistem lain yang berinteraksi

3 Asosiasi / Association Komunikasi antara aktor dan use case yang

5 Generalisasi / Hubungan generalisasi dan spesialisasi (umum-

2.2.11 Activity Diagram

Tabel 2.3 Simbol Activity Diagram

2 Aktivitas Aktivitas yang dilakukan sistem, aktivitas

3 Percabangan / Decision Asosiasi percabangan dimana jika ada ada

4 Penggabungan / Join Asosiasi penggabungan dimana lebih dari

5 Status akhir Status akhir yang dilakukan sistem, sebuah

6 Swimlane Memisahkan organisasi bisnis yang

3.1 Analisis Permasalahan

3.2 Analisis Pemecahan Masalah

pelanggan, ketika pelanggan melakukan sewa dan telah melakukan pembayaran

3.2.1 Metode Pengambilan Data

3.2.2 Metode Pengembangan Sistem

menuliskan kode program supaya sistem dapat beroperasi dan melakukan

3.2.3 Analisis Kebutuhan Sistem