Perancangan (Desain)

3.3 Tahapan Penelitian

3.3.2 Perancangan (Desain)

31 pengecekan..data..secara manual agar untuk menghindari kesalahan dalam pengolahan datanya, sehingga mempengaruhi proses pembuatan laporan.

32 Penjelasan use case diagram sebagai berikut.

Table 3.1 Penjelasan use case diagram

Aktor Deskripsi

Admin

Admin memiliki akses untuk mengelola seluruh penyewaan meliputi update alat camping, mengenai stok alat dan dapat mengelola data transaksi penyewaan dan mencetak laporan penyewaan.

Customer

Customer dapat melihat informasi mengenai UMKM camp outdoor dan dapat melihat stok alat yang tersedia, customer dapat memesan alat melalui web tersebut.

3.3.2.2 Activity Diagram

ActivitynDiagram,nmenggambarkan proses dari sistem kontrol.nDiagram iniidigunakaniuntukimelihatibagaimanaisistem bekerja saat dieksekusi.

1. ActivitynDiagramnaktornuser

Gambar 3.3 Activity Diagram User

33 Activity Diagram aktor user menggambarkan hubungan aktivitas mulai dari proses user mengecek alat penyewaan yang tersedia dan mengisi form pemesanan, mengisi data diri user, memilih alat yang akan disewa.

2.

Activity Diagram Aktor Admin

Pada tahap ini penulis melakukan wawancara bersama pemilik UMKM Camp outdoor untuk mendapatkan informasi yang berkaitan dengan sistem informasi yang di inginkan dan apa saja yang dibutuhkan oleh penulis. Guna untuk mendapatkan informasi yang akurat.

Gambar 3.4 Activity Diagram admin

34 3.3.2.3 Flowchart

Flowchartnadalahndeskripsingrafisndarinlangkah-langkahmprogram dan aliran proses. Ini dapat membantunanalis dan pengembang memecahnmasalah menjadinbagian-bagiannyangnlebihnkecil. Penulis membuat dua Flowchat yang berbeda yang pertama proses sitem manual dan yang ke dua adalah proses sistem yang terkomputerisasi atau yang di usulkan.

1. Flowchart Sistem Manual Yang Sedang Berjalan

Dari hasil penelitian disimpulkan bahwa sistem kegiatan di UMKM camp outdoor, yang sedang berjalan dapat digambarkan dengan Flowchart sebagai berikut:

Gambar 3.5 Flowchart Sistem Manual

Flowchart diatas menggambarkan seluruh proses dokumen yang berjalan hingga proses laporan, dimana Ketika customer akan menyewa harus mengisi form penyewaan jika tidak ada KTP customer tidak dapat menyelesaikan oenyewaan mereka akan pulang untuk mengambil KTP, jika ada akan ke proses bayar yang akan di sewa.

.

35 2. Flowchart Sistem Yang Yang Diusulkan

Dalamnmenjalankannsebuahnusahaipenyewaaniselainimemperhatikanikondisi lingkunganiyangijauhidiijangkauiolehipenyewaidanifaktaiyangiterjadiidilapangan, banyaknkonsumennsulitnmendapatkanninformasinyangilengkapitentangiperalatan outdoor,ikarenaisistemiyangidijalankanimasihnsecaranmanual, dibawah ini adalah gambar dari sistemi yang diusulkan dapat di lihat dibawah ini:

Gambar 3.6 Flowchart sistem yang diusulkan

Flowchart diatas menggambarkan dokumen atau data inputan dimana pada saat customer menginputkan form pemesanan dan mengupload KTP sebagai jaminan penyewaan selanjutnya dokumen dan data tersebut akan terkirim ke halaman admin yang akan di validasi pemesanannya dan pada saat barang dikembalikan selanjutnya akan di validasi pengembaliannya dan transaksi penyewaan akan masuk pada halaman laporan yang selanjutnya akan di cetak laporannya.

.

36 3.3.2.4 Desain Perancangan Prototype

Perancangan prototype merupakan...bagian…paling…penting….dalam perancangan sistem. Berikut merupakan perancangan prototype yang dibuat menggunakan mockuplus classic sebagai gambaran dalam pembuatan sistem.

1. Tampilan Halaman Login Customer

Halaman Login customer muncul pada saat customer mengakses dan akan muncul form masuk yaitu berupa Username dan password. Login untuk masuk ke halaman utama

Gambar 3.7 Halaman Login Customer 2. Tampilan Halaman Utama

Setelah customer berhasil login pada website akan muncul Halaman utama yang berisi informasi dan terdapat dua tombol untuk melihat barang, dan memesan barang/alat, terdapat juga tombol logout untuk customer keluar dari halaman.

37 Gambar 3.8 Tampilan utama customer

3. Tampilan Halaman Lihat Barang

Tampilan halaman lihat barang akan menampilkan artikel atau stok alat yang di sewakan dan stok yang masih tersedia, customer dapat melihat deskripsi alat, harga sewa untuk alat tersebut, dan terdapat tombol untuk mengakses kembali halaman beranda dan terdapat tombok untuk mengakses halaman pemesanan barang.

Gambar 3.9 Halaman lihat barang

4. Tampilan Halaman Pemesanan Barang

Tampilan halaman pemesanan barang akan menampilkan form untuk mengisi form at order yang berisi detail data diri customer dan detail penyewaan

38 terdapat syarat dan ketentuan penyewaan.

Gambar 3.10 Halaman pemesanan barang 5. Tampilan Halaman Login Admin

Tampilan halaman login digunakan untuk admin masuk ke halaman utama dengan memasukan Username dan password secara benar. Dan akan mengakses halaman utama admin.

Gambar 3.11 Halaman Login Admin 6. Tampilan halaman utama admin

Tampilan halaman utama admin akan muncul setelah pengguna melakukan login, terdapat beberapa menu di sidebar seperti, pengguna, paket, konsumen,

39 transaksi, pengeluaran, laporan pemasukan, dan laporan pengeluaran, terdapat juga tombol logout untuk pengguna keluar dari aplikasi.

Gambar 3.12 Halaman Utama Admin 7. Tampilan halaman admin area

Tampilan halaman admin area terdapat tabel yang berisi seluruh pengguna yang meng akses website ini seluruh data pengguna seperti admin dan penyewa disimpan pada tabel ini, admin dapat melakukan aksi tambah data, edit data dan hapus, dan terdapat form pencarian yang memudahkan pemilik dalam mencari data pengguna,

Gambar 3.13 Halaman admin area

40 8. Tampilan Halaman Data Alat

Tampilan halaman data alat yang berisi seluruh daftar alat yang di sewakan admin dapat menambahkan barang terbaru yang berisi form detail barang terkoneksi ke halaman stok barang di halaman customer, dan terdapat tombol edit, dan hapus, terdapat kolom pencarian barang jika admin ingin mencari barang yang dubah

Gambar 3.14 Halaman data alat 9. Tampilan Halaman Tambah Barang

Tampilan tambah barang ada pada halaman data alat jika ingin menambahkan alat terbaru dapat masuk ke halaman tambah barang dan terdapat form yang berisi detail data alat tersebut,

Gambar 3.15 Halaman Tambah Barang

41 10. Tampilan Halaman Laporan

Halaman laporan terdapat form untuk mencetak laporan data penyewaan, admin dapat memilih laporan dalam kurung waktu yang di tentukan, output yang di hasilkan adalah laporan pdf.

Gambar 3.16 Halaman laporan 11. Tampilan Halaman Transaksi Penyewaan

Tampilan halaman Transaksi terdapat dua pilihan yaitu daftar penyewaan dan daftar pemesanan di bawah ini adalah daftar penyewaan dimana semua data transaksi penyewaan yang suda selesai di simpan pada tabel ini, pemilik dapat melihat seluruh data transaksi penyewa pada halaman ini

Gambar 3.17 Halaman transaksi penyewaan

42 12. Tampilan Halaman Daftar Pemesanan

Pada halaman daftar pemesanan terdapat tabel yang berisi pemesanan alat dari penyewa, alat apa saja yang disewa, Ketika customer/penyewa memesan akan di tampilkan pada halaman ini, yang selanjutnya akan di validasi.

Gambar 3.18 Halaman daftar pemesanan 13. Tampilan Halaman Validasi

Halaman validasi terdapat pada halaman daftar pemesanan barang, Ketika ada pemesanan barang selanjutnya akan divalidasi pada halaman ini, pada halaman validasi terdapat 2 pilihan yaitu request pemesanan alat atau pengembalian barang,

Gambar 3.19 Halaman validasi

43