BAB III METODOLOGI PENELITIAN
3.5. Perancangan UML (Unified Modeling Language)
3.5.4. Rancangan Database
Rancangan Class diagram pada sistem yang akan di bangun meliputi Class apa apa apa. Class diagram dapat dilihat pada Gambar 3.15 dibawah ini :
Gambar 3.15. Rancangan Database Sistem
3.5.5. Perancangan Wireframe
Wireframe adalah tahapan awal dalam merancang User Interface halaman website dan aplikasi android. Penulis menggunakan Wireframe low fidelity yang akan menjadi acuan dalam pembuatan desain User Interface. Figma dipilih sebagai tools untuk membuat desain User Interface pada penelitian ini. Rancangan Wireframe dapat dilihat pada gambar di bawah ini.
Gambar 3.16. Wireframe Admin Login
Pada gambar 3.16, terdapat halaman login pada website untuk pengguna Admin. Data NIP dan password dibutuhkan agar login dapat berjalan.
Gambar 3.17. Wireframe Admin Dashboard
Pada gambar 3.17, dashboard admin menampilkan rekap dari banyaknya data diantaranya user, produk, transaksi, pendapatan dan kredit.
Gambar 3.18. Wireframe Data Akun pada user Admin
Pada gambar 3.18, menampilkan semua data akun. Data yang ditampilkan dari akun adalah buyer id, pembayar id, nomor telepon dan kategori akun.
Gambar 3.19. Wireframe Tambah Data Akun pada user Admin
Pada gambar 3.19, adalah wireframe tambah akun. Data yang perlu diisi adalah role, id pembeli, nama pembeli, id pembayar, nama pembayar dan nomor telepon.
Gambar 3.20. Wireframe Edit Data Akun pada user Admin
Pada gambar 3.20, adalah wireframe edit akun. Data yang perlu diisi adalah role, id pembeli, nama pembeli, id pembayar, nama pembayar dan nomor telepon.
Gambar 3.21. Wireframe Data Produk pada user Admin
Pada gambar 3.21, menampilkan semua data produk. Data yang ditampilkan dari produk adalah nama produk, satuan, stok dan harga.
Gambar 3.22. Wireframe Tambah Data Produk pada user Admin Pada gambar 3.22, adalah wireframe tambah produk. Data yang perlu diisi adalah nama produk, satuan, stok dan harga.
Gambar 3.23. Wireframe Edit Data Produk pada user Admin
Pada gambar 3.23, adalah wireframe edit produk. Data yang perlu diisi adalah nama produk, satuan, stok dan harga.
Gambar 3.24. Wireframe Data Transaksi pada user Admin
Pada gambar 3.24, menampilkan semua data transaksi. Data yang ditampilkan dari transaksi adalah tanggal, pembeli dan total beli.
Gambar 3.25. Wireframe Data Tagihan pada user Admin
Pada gambar 3.25, menampilkan semua data tagihan. Data yang ditampilkan dari tagihan adalah pembeli, pembayar, tagihan dan status.
Gambar 3.26. Wireframe Konfirmasi Tagihan pada user Admin
Pada gambar 3.26, menampilkan semua data tagihan. Data yang ditampilkan adalah nama pembeli, id pembeli, nama pembayar, id pembayar, tanggal, produk, jumlah, harga, total dan total tagihan.
Gambar 3.27. Wireframe Data Laporan pada user Admin
Pada gambar 3.27, menampilkan semua data laporan. Data yang ditampilkan dari laporan adalah bulan, tahun, produk, satuan, stok, terjual, pendapatan, kredit, total pendapatan dan total kredit.
Gambar 3.28. Wireframe Edit Profile pada user Admin
Pada gambar 3.28, menampilkan edit profile. Data yang perlu diisi adalah id admin, nama admin dan nomor telepon.
Gambar 3.29. Wireframe Ubah Password pada user Admin
Pada gambar 3.29, menampilkan ubah password. Data yang perlu diisi adalah password lama dan password baru.
Gambar 3.30. Wireframe Login pada Kasir dan Pembayar
Pada gambar 3.30, adalah desain antarmuka login Kasir dan Pembayar pada aplikasi android. Data yang perlu diisi adalah user ID dan password.
Gambar 3.31. Wireframe Transaksi Penjualan pada user Kasir
Pada gambar 3.31, menampilkan langkah awal untuk melakukan transaksi penjualan. Kasir diminta untuk mengisi data id pembeli, di sebelah kanan field input terdapat button untuk scan barcode id card pembeli, lalu di bagian bawah terdapat button untuk melanjutkan pembelian.
Gambar 3.32. Wireframe scan id pembeli pada user Kasir
Pada gambar 3.32, menampilkan scan id pembeli. Kasir dapat mengarahkan kamera ke barcode yang ada pada card id pembeli.
Gambar 3.33. Wireframe Memilih Barang Jual pada user Kasir
Pada gambar 3.33, menampilkan field input produk. Data yang perlu diisi adalah mencari nama produk, memasukkan jumlah barang yang dibeli, lalu di bawahnya terdapat button tambah produk, jika pembeli ingin membeli lebih dari
satu barang. Lalu di bagian bawah ada dua button yang dapat dipilih kasir untuk menentukan pembayaran dilakukan secara tunai atau hutang.
Gambar 3.34. Wireframe Histori Transaksi pada user Kasir dan Pembayar Pada gambar 3.34, menampilkan histori transaksi pada user kasir dan pembayar. Data yang ditampilkan berupa transaksi dari semua Pembeli jika untuk kasir dan dari Pembeli yang terhubung dengan masing-massing Guru dan Wali Siswa bagi Pembayar. Di bagian atas terdapat filter untuk menampilkan histori berdasarkan Hari ini, Minggu ini atau Bulan ini.
Gambar 3.35. Wireframe Detail Transaksi pada user Kasir dan Pembayar Pada gambar 3.35, menampilkan detail transaksi pada user kasir dan pembayar. Data yang ditampilkan berupa tanggal, jam, nama pembeli, id pembeli, data barang dibeli dan total beli.
Gambar 3.36. Wireframe Histori Kredit pada user Kasir dan Pembayar Pada gambar 3.36, menampilkan histori kredit pada user kasir dan pembayar.
Data yang ditampilkan berupa transaksi dari semua Pembeli jika untuk kasir dan dari Pembeli yang terhubung dengan masing-masing Guru dan Wali Siswa bagi
Pembayar. Di bagian atas terdapat filter untuk menampilkan histori berdasarkan Hari ini, Minggu ini atau Bulan ini.
Gambar 3.37. Wireframe Detail Kredit pada user Kasir dan Pembayar Pada gambar 3.37, menampilkan detail kredit pada user kasir dan pembayar.
Data yang ditampilkan berupa tanggal, jam, nama pembeli, id pembeli, data barang dibeli dan total beli.
Gambar 3.38. Wireframe Profile pada user Kasir dan Pembayar
Pada gambar 3.38, menampilkan profile pada user kasir dan pembayar. Data yang ditampilkan antara lain foto profil, nama, status, id, pembeli, no hp dan role.
Lalu dibawahnya terdapat button edit profile dan password dan di bawahnya lagi terdapat button Logout.
Gambar 3.39. Wireframe Edit Profile pada user Kasir dan Pembayar Pada gambar 3.39, menampilkan ubah profile pada user kasir dan pembayar.
Data yang perlu diisi adalah unggah foto, nomor hp, password lama dan password baru.
3.6. Pengkodean (Coding)
Pada tahap ini penulis sudah mulai mengimplementasikan rancangan- rancangan yang sudah dibuat, yang mana pada tahap pengkodean atau coding ini menggunakan bahasa pemrograman Java untuk Aplikasi Android dengan menggunakan Android Studio, dan menggunakan Framework Laravel menggunakan bahasa pemrograman PHP untuk membangun Website, REST API juga dibangun sehingga sistem berbasis mobile Android dan Website dapat terintegrasi.
Berikut adalah jadwal pengkodean yang penulis rencanakan menggunakan metode Extreme Programming dapat dilihat pada tabel dibawah ini :
Tabel 3.7. Jadwal Pengkodean Menggunakan Metode Extreme Programming Daftar Tugas PJ Tanggal
Mulai
Target Hari
Tanggal Selesai
Hari
Kerja Proses
Pengkodean (Coding) 44 0 0%
Website : Login, Ubah
Password FE1 12/09/23 2 0%
Website : Dashboard FE1 14/09/23 2 0%
Website : Profile FE1 16/09/23 2 0%
Website : Akun Pengguna FE1 18/09/23 3 0%
Website : Produk Jual FE1 21/09/23 3 0%
Website : Unduh Kartu ID FE1 24/09/23 2 0%
Website : Transaksi Tunai FE1 26/09/23 3 0%
Website : Transaksi Kredit FE1 29/09/23 3 0%
Website : Laporan Bulanan
& Unduh FE1 02/10/23 4 0%
Android : Login, Ubah
Password FE2 06/10/23 2 0%
Android : Dashboard FE2 08/10/23 2 0%
Android : Profile FE2 10/10/23 3 0%
Android : Transaksi Tunai FE2 13/10/23 3 0%
Android : Transaksi Kredit FE2 16/10/23 3 0%
Android : Scann Barcode
ID FE2 19/10/23 3 0%
Android : Pilih Produk dan
Jumlah FE2 22/10/23 4 0%
Website : Login, Ubah
Password BE1 12/09/23 2 0%
Website : Dashboard BE1 14/09/23 2 0%
Website : Profile BE1 16/09/23 2 0%
Website : Akun Pengguna BE1 18/09/23 3 0%
Website : Produk Jual BE1 21/09/23 3 0%
Website : Unduh Kartu ID BE1 24/09/23 2 0%
Website : Transaksi Tunai BE1 26/09/23 3 0%
Website : Transaksi Kredit BE1 29/09/23 3 0%
Website : Laporan Bulanan
& Unduh BE1 02/10/23 4 0%
Android : Login, Ubah
Password BE2 06/10/23 2 0%
Android : Dashboard BE2 08/10/23 2 0%
Android : Profile BE2 10/10/23 3 0%
Daftar Tugas PJ Tanggal Mulai
Target Hari
Tanggal Selesai
Hari
Kerja Proses Android : Transaksi Tunai BE2 13/10/23 3 0%
Android : Transaksi Kredit BE2 16/10/23 3 0%
Android : Scann Barcode
ID BE2 19/10/23 3 0%
Android : Pilih Produk dan
Jumlah BE2 22/10/23 4 0%
Adapun penjelasan untuk Penanggung Jawab dari setiap tugas dapat dilihat pada tabel dibawah ini :
Tabel 3.8. Penjelasan Penanggung Jawab
Nama Keteerangan Tugas
FE1 Front End Website Mengerjakan Semua Front End Website FE2 Front End Android Mengerjakan Semua Front End Android BE1 Back End Website Mengerjakan Semua Back End Website BE2 Back End Android Mengerjakan Semua Back End Android