BAB IV HASIL DAN PEMBAHASAN
4.1 Implementasi Sistem
Implementasi sistem merupakan bagian dimana sistem akan diimplementasikan dengan berpedoman pada semua perancangan yang telah dibuat sebelumnya sehingga nanti sistem akan siap untuk dipakai pada fungsi semestinya dan dapat diuji dari sisi pengguna sistemnya nanti. Pada sistem “sistem manajemen dan Monitoring Toko Muslimah Online” ini dibuat dengan menggunakan framework laravel. Akan dijelaskan dan dijabarkan bentuk impelementasi dari sistem ini sebagai berikut :
1. Halaman Login
Halaman login adalah halaman yang pertama kali diakses oleh pengguna. Baik pemilik ataupun administrator. Pengguna sistem harus terlebih dulu memasukan username dan
password untuk dapat mengakses sistem seutuhnya sesuai dengan hak aksesnya
masing-masing. Wujud implementasi dari halaman login adalah sebagai berikut.
Gambar 4.1 Halaman Login
2. Halaman Dashboard
Halaman ini adalah halaman yang pertama kali tertampil setelah pengguna sistem melakukan login pada sistem. Dalam halaman ini, disuguhkan 3 data grafik rekapan yaitu grafik penjualan, grafik pembelian, dan grafik barang terlaris juga 1 peta yaitu peta letak
domisili pelanggan. Grafik yang ditampilkan adalah hasil rekapan pada 1 tahun terakhir sehingga pengguna sistem dapat memantau langsung perkembangan toko online tersebut hanya dari halaman dashboard ini. Wujud implementasi dari halaman dashboard adalah sebagai berikut.
Gambar 4.2 Halaman Tampilan 1 Dashboard
Gambar 4.4 Halaman Tampilan 3 Dashboard
3. Halaman Grafik Penjualan
Halaman ini merupakan bagian dari halaman rekapan yang dimana pada halaman ini, grafik penjualan dapat diatur tampilan datanya sesuai kebutuhan pengguna sistem. Tampilan data grafik bisa ditampilkan menurut 3 kategori, yaitu menurut bulan dan tahunnya, menurut tahunnya saja, ataupun menurut tanggal antar hari. Wujud dari implementasi halaman grafik penjualan adalah sebagai berikut.
Gambar 4.5 Halaman Tampilan 1 Grafik Penjualan
Pada bagian dibawah grafik terdapat box tabel pembacaan grafik yang datanya sama seperti pada yang ditampilkan dalam grafik. Wujud dari implementasi tabelnya adalah sebagai berikut.
Pada bagian atas grafik, terdapat tombol filter yang berfungsi mengatur tampilan data grafik yang ingin ditampilkan. Wujud dari implementasi tombol filter tersebut adalah sebagai berikut.
Gambar 4.7 Halaman Tampilan 3 Grafik Penjualan
4. Halaman Grafik Pembelian
Halaman ini masih sama terletak pada bagian rekapan yang dimana halaman ini, grafik pembelian juga dapat diatur tampilan datanya sesuai kebutuhan pengguna sistem. Tampilan data grafik bisa ditampilkan menurut 3 kategori, yaitu menurut bulan dan tahunnya, menurut tahunnya saja, ataupun menurut tanggal antar hari. Wujud dari implementasi halaman grafik pembelian adalah sebagai berikut.
Gambar 4.8 Halaman Tampilan 1 Grafik Pembelian
Pada bagian dibawah grafik terdapat box Tabel pembacaan grafik yang datanya sama seperti pada yang ditampilkan dalam grafik. Wujud dari implementasi tabelnya adalah sebagai berikut.
Pada bagian atas grafik, terdapat tombol filter yang berfungsi mengatur tampilan data grafik yang ingin ditampilkan. Wujud dari implementasi tombol filter tersebut adalah sebagai berikut.
Gambar 4.10 Halaman Tampilan 3 Grafik Pembelian
5. Halaman Grafik Barang Terlaris
Halaman ini juga terletak pada bagian menu rekapan. Halaman ini menunjukan grafik dengan data 5 teratas barang terlaris yang terjual dan pada halaman ini, tampilan data grafiknya pun dapat diatur seperti pada halaman grafik sebelumnya. Data disajikan dengan 2 tampilan yaitu grafik dan tabel. Tabel digunakan agar pembacaan data lebih mudah dan grafik untuk pemantauan perkembangannya. Wujud dari implementasi halaman grafik barang terlaris adalah sebagai berikut.
Gambar 4.11 Halaman Tampilan 1 Grafik Barang Terlaris
Pada bagian dibawah grafik terdapat box Tabel pembacaan grafik yang datanya sama seperti pada yang ditampilkan dalam grafik. Wujud dari implementasi tabelnya adalah sebagai berikut.
Pada bagian atas grafik, terdapat tombol filter yang berfungsi mengatur tampilan data grafik yang ingin ditampilkan. Wujud dari implementasi tombol filter tersebut adalah sebagai berikut.
Gambar 4.13 Halaman Tampilan 3 Grafik Barang Terlaris
6. Halaman Peta Domisili Pelanggan
Pada halaman ini, pengguna disuguhkan dengan peta Indonesia dan di dalamnya terdapat data - data jumlah pelanggan toko online tersebut pada setiap provinsinya. Dalam halaman ini tidak ada pengaturan halaman karena data yang tersajikan sudah cukup jelas untuk terbaca dan terpahami. Peta Indonesia nantinya terdapat fitur zoom in dan zoom out. Wujud dari implementasi halaman peta domisili pelanggan adalah sebagai berikut.
Gambar 4.14 Halaman Domisili Pelanggan
7. Halaman Stok Barang
Halaman stok barang akan menampilkan semua data barang yang tersedia dalam toko
online tersebut. Pada halaman ini, pengguna dapat mengelola halaman dengan mengedit dan
melihat detail setiap barang yang ada. Wujud dari implementasi halaman stok barang ini adalah sebagai berikut.
Terdapat tombol lihat detail yang berguna untuk melihat detail warna, ukuran, jumlah, jenis, dan gambar dari setiap masing-masing data barang yang ada. Dapat juga ditaruh kode barang untuk pembeda pada setiap barangnya pada bagian nama barang. Wujud dari implementasi lihat detail stok barang adalah sebagai berikut.
Gambar 4.16 Fitur Lihat Detail Barang
Adapun fitur edit yang memungkinkan pengguna sistem dapat mengedit setiap data barangnya dari nama samapai menganti foto barang tersebut. Wujud dari implementasi edit stok barang adalah sebagai berikut.
Gambar 4.17 Fitur Edit Barang
Fitur filter dalam stok barang memungkinkan pengguna sistem melakukan filter data dengan pilihan menurut jenis barangnya, sehingga data yang akan ditampilkan hanya sesuai dengan jenis barang yang akan dipilih oleh pengguna sistem. Wujud dari implementasi fitur
filter ini adalah sebagai berikut.
8. Halaman Transaksi Penjualan
Halaman transaksi penjualan ini memperlihatkan data setiap transaksi penjualan keluar yang dilakukan oleh pelanggan kepada toko online tersebut. Adapun bentuk pengelolaannya terdapat edit, hapus, lihat barang, lihat rincian biaya setiap transaksi, filter, dan tambah data. Pada kolom tabel terdapat menu nomor, nama pembeli, tanggal pembayarannya, total harga setiap transaksi, daftar barang apa saja yang dibeli, rincian biaya setiap detail barangnya, dan aksi yang dapat dilakukan. Pada kolom tanggal pembayaran, dapat juga diletakan keterangan bagaimana bentuk pembayaran yang dilakukan oleh pembeli, baik transfer melalui bank,
e-payment, ataupun transfer melewati teller bank. Wujud dari implementasi halaman transaksi
penjualan adalah sebagai berikut.
Gambar 4.19 Halaman Utama Transaksi Penjualan
Pengguna sistem dapat menambahkan data dari tombol tambah yang terletak diatas halaman. Pengguna dapat menambahkan data barang dengan banyak rician sekaligus. Wujud dari implementasi tombol tambah adalah sebagai berikut.
Gambar 4.20 Halaman Tambah Transaksi Penjualan
Terdapat tombol lihat barang yang bertujuan untuk melihat barang apa saja yang dibeli oleh pelanggan pada toko tersebut. sistem akan menampilkan tabel kembali dengan data setiap barang yang dibeli oleh pelanggan tersebut, dan terdapat tombol lihat detail dan hapus pada tabel, juga tambah data diatas tabel. Wujud dari implementasi tombol lihat barang adalah sebagai berikut.
Terdapat tombol lihat rincian yang bertujuan untuk melihat setiap rincian harga barang yang dibeli, sampai pada detail barangnya dan terdapat juga jumlah total harga belanjanya. Wujud dari implementasi tombol lihat barang adalah sebagai berikut.
Gambar 4.22 Fitur Rincian Biaya Transaksi Penjualan
Fitur edit pada halaman ini bertujuan agar pengguna dapat mengedit data transaksi yang tertampil pada setiap kolom tabel. Wujud dari implementasi tombol fitur edit adalah sebagai berikut.
Fitur hapus pada halaman ini bertujuan agar pengguna dapat menghapus setiap baris kolom pada tabel transaksi penjualan tersebut. Sebelum menghapus, sistem akan memunculkan notifikasi terlebih dahulu sehingga pengguna sistem yakin jika ingin menghapus salah satu kolom tabel tersebut. Wujud dari implementasi tombol hapus adalah sebagai berikut.
Gambar 4.24 Fitur Hapus Transaksi Penjualan
Dalam tabel list barang setelah memilih tombol pilih barang pada penjelasan sebelumnya, terdapat tombol lihat detail yang bertujuan memperlihatkan detail warna ukuran dan jumlah pada setiap barang yang dibeli pelanggan. Pengguna sistem juga dapat menambahkan lagi detail pada bagian lihat detail tersebut. Wujud dari implementasi tombol lihat detail adalah sebagai berikut.
Gambar 4.25 Fitur Lihat Detail Barang Transaksi Penjualan
Gambar 4.26 Fitur Tambah Detail Barang Transaksi Penjualan
Pengguna juga dapat mengedit setiap baris detail barangnya. Yang dapat diedit hanyalah jumlah barangnya saja setiap masing-masing detailnya. Wujud dari implementasi tombol edit detail adalah sebagai berikut.
Gambar 4.27 Fitur Edit Detail Barang Transaksi Penjualan
Dalam tabel list barang, terdapat juga tombol hapus yang bertujuan agar pengguna dapat menghapus setiap baris kolom pada tabel list barang tersebut. Sebelum menghapus, sistem akan memunculkan notifikasi terlebih dahulu sehingga pengguna sistem yakin jika ingin menghapus salah satu kolom tabel tersebut. Wujud dari implementasi tombol hapus adalah sebagai berikut.cccc
Dalam tabel list barang, terdapat juga tombol tambah barang yang ditujukan jika ada barang yang terlupa dimaskukan pada list barang tersebut. Wujud dari implementasi tombol lihat tambah barang pada list barang adalah sebagai berikut.
Gambar 4.29 Halaman Tambah List Barang Transaksi Penjualan
9. Halaman Transaksi Pembelian
Halaman transaksi pembelian ini memperlihatkan data setiap transaksi pembelian yang dilakukan toko online tersebut guna memenuhi stok barang yang nantinya akan dijual. Adapun bentuk pengelolaannya terdapat edit, hapus, lihat barang, lihat rincian biaya setiap transaksi, filter, dan tambah data. Wujud dari implementasi halaman transaksi pembelian adalah sebagai berikut.
Gambar 4.30 Halaman Utama Transaksi Pembelian
Pengguna sistem dapat menambahkan data dari tombol tambah yang terletak diatas halaman. Pengguna dapat menambahkan data barang dengan banyak rician sekaligus. Pembeda setiap barang yaitu kode barang dapat ditaruh dalam satu tempat yaitu pada bagian penulisan nama barang. Terdapat 2 form tambah data pada pembelian yaitu tambah barang baru dan tambah restock barang. Wujud dari implementasi tombol tambah adalah sebagai berikut.
Gambar 4.31 Halaman Tambah Barang Baru Transaksi Pembelian
Gambar 4.32 Halaman Tambah Restock Transaksi Pembelian
Terdapat tombol lihat barang yang bertujuan untuk melihat barang apa saja yang dibeli oleh toko online tersebut. sistem akan menampilkan tabel kembali dengan data setiap barang yang dibeli oleh toko online tersebut pada setiap transaksinya, dan terdapat tombol lihat detail dan hapus pada tabel, juga tambah data diatas tabel. Wujud dari implementasi tombol lihat barang adalah sebagai berikut.
Gambar 4.33 Halaman List Barang Pembelian
Terdapat tombol lihat rincian yang bertujuan untuk melihat setiap rincian harga barang yang dibeli, sampai pada detail barangnya dan terdapat juga jumlah total harga pembeliannya. Wujud dari implementasi tombol lihat barang adalah sebagai berikut.
Gambar 4.34 Fitur Lihat Rincian Transaksi Pembelian
Fitur edit pada halaman ini bertujuan agar pengguna dapat mengedit data transaksi pembelian yang tertampil pada setiap kolom tabel. Wujud dari implementasi tombol fitur edit adalah sebagai berikut.
Gambar 4.35 Fitur Edit Utama Transaksi Pembelian
Fitur hapus pada halaman ini bertujuan agar pengguna dapat menghapus setiap baris kolom pada tabel transaksi pembelian tersebut. Sebelum menghapus, sistem akan memunculkan notifikasi terlebih dahulu sehingga pengguna sistem yakin jika ingin menghapus salah satu kolom tabel tersebut. Wujud dari implementasi tombol hapus adalah sebagai berikut.
Gambar 4.36 Fitur Hapus Utama Transaksi Pembelian
Dalam tabel list barang setelah memilih tombol pilih barang pada penjelasan sebelumnya, terdapat tombol lihat detail yang bertujuan memberlihatkan detail warna ukuran dan jumlah pada setiap barang yang dibeli oleh toko online tersebut. Pengguna sistem juga dapat menambahkan lagi detail pada bagian lihat detail tersebut. Wujud dari implementasi tombol lihat detail adalah sebagai berikut.
Gambar 4.37 Fitur Lihat Detail Transaksi Pembelian
Gambar 4.38 Fitur Tambah Detail Transaksi Pembelian
Pengguna juga dapat mengedit setiap baris detail barangnya. Edit hanya bisa digunakan pada jumlah barangnya saja setiap masing-masing detailnya. Wujud dari implementasi tombol edit detail adalah sebagai berikut.
Gambar 4.39 Fitur Edit Detail Transaksi Pembelian
Dalam tabel list barang, terdapat tombol edit yang memungkinkan pengguna dapat mengedit setiap baris kolom yang ada pada tabel untuk disesuaikan kembali. Wujud dari implementasi tombol edit adalah sebagai berikut.
Dalam tabel list barang, terdapat juga tombol hapus yang bertujuan agar pengguna dapat menghapus setiap baris kolom pada tabel list barang tersebut. Sebelum menghapus, sistem akan memunculkan notifikasi terlebih dahulu sehingga pengguna sistem yakin jika ingin menghapus salah satu kolom tabel tersebut. Wujud dari implementasi tombol hapus adalah sebagai berikut.
Gambar 4.41 Fitur Hapus Barang Transaksi Pembelian
Dalam tabel list barang, terdapat juga tombol tambah barang yang ditujukan jika ada barang yang terlupa dimaskukan pada list barang tersebut. Terdapat 2 form tambah data pada pembelian yaitu tambah barang baru dan tambah restock barang. Wujud dari implementasi tombol lihat tambah barang pada list barang adalah sebagai berikut.
Gambar 4.42 Halaman Tambah List Barang Transaksi Pembelian
10. Halaman Transaksi Pemesanan
Halaman pemesanan ini menampilkan data pesanan barang oleh pelanggan yang ingin dibuatkan oleh toko online tersebut. Bentuk pengelolaan pada halaman ini adalah pengguna dapat mengedit, hapus, dan menambah data transaksi. Wujud dari implementasi halaman transaksi pemesanan adalah sebagai berikut.
Gambar 4.43 Halaman Utama Transaksi Pemesanan
Pengguna sistem dapat menambahkan data dari tombol tambah yang terletak diatas halaman. Wujud dari implementasi tombol tambah adalah sebagai berikut.
Gambar 4.44 Halaman Tambah Barang Transaksi Pemesanan
Fitur edit pada halaman ini bertujuan agar pengguna dapat mengedit data transaksi pemesanan yang tertampil pada setiap kolom tabel. Wujud dari implementasi tombol fitur edit adalah sebagai berikut.
Gambar 4.45 Fitur Edit Transaksi Pemesanan
Terdapat tombol lihat detail pada tabel yang bertujuan untuk melihat detail setiap barang yang ingin dipesan pelanggan. Terdapat juga form menambahkan detail lagi
didalamnya jika ingin ditambahkan ulang data detailnya. Wujud dari implementasi tombol lihat detail adalah sebagai berikut.
Gambar 4.46 Fitur Lihat Detail Transaksi Pembelian
Pengguna juga dapat mengedit setiap baris detail barangnya. Yang dapat diedit hanyalah jumlah barangnya saja setiap masing-masing detailnya. Wujud dari implementasi tombol edit detail adalah sebagai berikut.
Gambar 4.48 Fitur Edit Detail Transaksi Pembelian
11. Halaman Daftar Pelanggan
Halaman daftar pelanggan merupakan halaman yang menyajikan data diri pelanggan mulai dari nama, alamat, juga nomor telepon. Pada halaman ini terdapat fitur tambah data, edit dan hapus yang bisa digunakan oleh pengguna sistem nantinya. Wujud dari implementasi halaman daftar pelanggan adalah sebagai berikut.
Gambar 4.49 Halaman Utama Daftar Pelanggan
Terdapat fitur tambah data yang memungkinkan pengguna sistem menambah pelanggan baru ke dalam sistem dengan memilih tombol tambah. Wujud dari implementasi tombol tambah adalah sebagai berikut.
Gambar 4.50 Halaman Tambah Daftar Pelanggan
Fitur edit data memungkinkan pengguna mengedit data pelanggan pada setiap baris kolomnya. Wujud dari implementasi tombol edit adalah sebagai berikut.
Gambar 4.51 Fitur Edit Daftar Pelanggan
Fitur hapus data memungkinkan pengguna sistem menghapus baris setiap kolomnya dalam tabel data pelanggan jika ingin data pelanggan tersebut terhapus. Wujud dari implementasi tombol hapus adalah sebagai berikut.
12. Halaman Daftar Pengguna
Halaman daftar pengguna ini hanya muncul ketika yang mengakses sistem berstatus pemilik saja. Administrator tidak bisa mengakses halaman ini. Dalam halaman ini ditampilkan daftar pengguna sistem dengan statusnya pada tabel. Pemilik juga dapat mengelola halaman ini dengan menggunakan beberapa fitur yaitu edit, hapus, tambah, dan
reset password. Wujud dari implementasi halaman daftar pengguna adalah sebagai berikut.
Gambar 4.53 Halaman Utama Daftar Pengguna
Terdapat fitur tambah data yang memungkinkan pemilik menambah pengguna baru ke dalam sistem dengan memilih tombol tambah. Wujud dari implementasi tombol tambah adalah sebagai berikut.
Gambar 4.54 Halaman Tambah Pengguna
Fitur edit data memungkinkan pemilik mengedit data pengguna pada setiap baris kolomnya. Wujud dari implementasi tombol edit adalah sebagai berikut.
Gambar 4.55 fitur Edit Pengguna
Fitur hapus data memungkinkan pemilik sistem menghapus baris setiap kolomnya dalam tabel data pepengguna jika ingin data pengguna tersebut terhapus. Wujud dari implementasi tombol hapus adalah sebagai berikut.
Gambar 4.56 Fitur Hapus Pengguna
Terdapat tombol reset yang berfungsi untuk mereset password setiap akun pengguna yang ada, agar kembali ke default awal password sebelum diganti. Wujud dari implementasi tombol reset password adalah sebagai berikut.