RANCANG BANGUN APLIKASI TOKO BERBASIS ANDROID PADA KIOS ELZIO
PROYEK AKHIR
PROGRAM STUDI
DIII SISTEM INFORMASI
Oleh:
Syahrul Iman Syahroni 18390100022
FAKULTAS TEKNOLOGI DAN INFORMATIKA UNIVERSITAS DINAMIKA
2022
PROYEK AKHIR
Diajukan sebagai salah satu syarat untuk menyelesaikan Program Diploma
Oleh:
Nama : Syahrul Iman Syahroni
NIM : 18390100022
Program Studi : DIII Sistem Informasi
FAKULTAS TEKNOLOGI DAN INFORMATIKA UNIVERSITAS DINAMIKA
2022
iv
KATA PENGANTAR
Puji dan syukur kehadirat Subhanahu wa Ta’ala, karena atas limpahan dan Karunia-Nya yang diberikan sehingga penulis dapat menyelesaikan laporan Proyek Akhir yang berjudul “Rancang Bangun Aplikasi Toko Berbasis Android pada Kios Elzio”.
Laporan ini digunakan sebagai syarat kelulusan dalam menyelesaikan program Diploma III Sistem Informasi Universitas Dinamika. Penyelesaian laporan Proyek Akhir ini tidak terlepas dari bantuan berbagai pihak eksternal maupun internal yang telah memberikan banyak masukan, nasihat, kritik dan saran, maupun dukungan kepada Penulis. Oleh karena itu, Penulis menyampaikan rasa terima kasih kepada :
1. Orang tua yang selalu memotivasi, mendukung, mendoakan, dan memberikan semangat kepada Penulis untuk menyelesaikan Proyek Akhir ini.
2. Ibu Nunuk Wahyuningtyas, M.Kom selaku Ketua Program Studi DIII Sistem Informasi Universitas Dinamika dan Dosen Pembahas yang telah memberikan saran dan arahan, motivasi maupun dukungan dalam penyelesaian Proyek Akhir ini.
3. Ibu Titik Lusiani, M.Kom selaku Dosen Wali dan Dosen Pembimbing yang telah memberikan saran dan arahan dalam proses penyelesaian Proyek Akhir.
4. Ibu A.B. Tjandrarini, S.Si., M.Kom selaku Dosen Pembahas yang telah memberikan saran dan arahan dalam proses penyelesaian Proyek Akhir.
5. Destian Wahyu Budiarto, S.E selaku pemilik Kios Elzio yang telah memberikan waktu dan tempat bagi penulis selama proses penyelesaian Proyek Akhir.
6. Seluruh pihak dan teman-teman yang belum dapat penulis sebutkan yang selama ini memberikan bantuan dan dukungan kepada Penulis.
Penulis menyadari bahwa Proyek Akhir yang telah dilakukan masih banyak terdapat kekurangan, sehingga kritik yang bersifat membangun dan saran dari semua pihak sangatlah diharapkan untuk perbaikan laporan maupun aplikasi agar menjadi lebih baik di kemudian hari. Semoga laporan Proyek Akhir ini dapat diterima dengan baik dan bermanfaat bagi penulis maupun semua pihak. Semoga Allah Subhanahu wa Ta’ala membalas semua kebaikan yang telah diberikan untuk membantu penulis.
Surabaya, Februari 2022
Penulis
v
SURAT PERNYATAAN
PERSETUJUAN PUBLIKASI DAN KEASLIAN APLIKASI
vi DAFTAR ISI
KATA PENGANTAR ... iv
SURAT PERNYATAAN PERSETUJUAN PUBLIKASI DAN KEASLIAN APLIKASI... v
DAFTAR ISI ... vi
DAFTAR TABEL ... vii
DAFTAR GAMBAR ... viii
DAFTAR LAMPIRAN ... x
BAB I PENDAHULUAN ... 1
1.1 Tujuan Pembuatan Dokumen ... 1
1.2 Deskripsi Umum Perusahaan ... 1
1.3 Deskripsi Umum Sistem ... 2
1.3.1 Deskripsi Umum Aplikasi ... 2
1.3.2 Deskripsi Umum Kebutuhan Aplikasi ... 7
1.4 Deskripsi Dokumen (Ikhtisar)... 8
BAB II PERANGKAT YANG DIBUTUHKAN ... 9
2.1 Perangkat Lunak ... 9
2.2 Perangkat Keras ... 9
2.3 Kriteria Pengguna Aplikasi ... 9
2.4 Pengenalan dan Pelatihan ... 9
BAB IIIMENU DAN CARA PENGGUNAAN ... 10
3.1 Struktur Menu ... 10
3.2 Penggunaan Aplikasi ... 10
3.2.1 Cara Membuka Aplikasi ... 10
3.2.2Halaman Dashboard(Home) ... 12
3.2.3Cara Melakukan Transaksi Pemesanan ... 13
3.2.4Cara Memasukkan Data Pesanan ... 16
3.2.5Cara Melihat Pesanan Yang Sedang Berlangsung ... 17
3.2.6Cara Melihat Histori Pesanan... 18
3.2.7Halaman Profil User ... 19
3.2.8Keluar(LogOut)... 20
3.3Penggunaan Web Admin ... 21
3.3.1Cara Mengaktifkan XAMPP ... 21
3.3.2Cara Membuka Web Admin ... 22
3.3.3Cara Login Admin ... 22
3.3.4Halaman Dashboard Web Admin ... 23
3.3.5Cara Menambahkan Data Barang ... 23
3.3.6Cara Menambahkan Data Stok Barang ... 25
3.3.7Cara Menerima Pesanan Pelanggan ... 27
3.3.8Cara Menambahkan Data Kategori ... 28
3.3.9Cara Melihat Laporan Transaksi ... 30
3.3.10Cara Mencetak Laporan Transaksi ... 30
3.3.11Cara Melihat Laporan Data Barang ... 31
3.3.12Cara Melihat Laporan Data Stok Barang ... 33
3.3.13Cara Melihat Laporan Data Pengguna ... 34
3.3.14Keluar(LogOut) ... 35
LAMPIRAN ... 36
vii
DAFTAR TABEL
Tabel 1. 1 Tabel Master Admin ... 2
Tabel 1. 2 Tabel Master Pelanggan ... 2
Tabel 1. 3 Tabel Master Kategori ... 3
Tabel 1. 4 Tabel Master Barang ... 3
Tabel 1. 5 Tabel Master Stok Barang... 3
Tabel 1. 6 Tabel Master Transaksi ... 4
Tabel 1. 7 Tabel Master Detail Transaksi ... 4
Tabel 1. 8 Tabel Master Cart... 4
Tabel 1. 9 Tabel Master Cart... 5
Tabel 1. 10 Kebutuhan Aplikasi... 7
viii
DAFTAR GAMBAR
Gambar 1. 1 Kios Elzio ... 1
Gambar 1. 2 BPMN Proses Pendaftaran dan Login Akun Pelanggan ... 5
Gambar 1. 3 BPMN Proses Transaksi Pembelian ... 6
Gambar 1. 4 BPMN Proses Transaksi Pembayaran(COD) ... 6
Gambar 1. 5 BPMN Proses Menambahkan Data Produk ... 7
Gambar 3. 1 Halaman Awal Aplikasi ... 11
Gambar 3. 2 Halaman Login Akun Pelanggan ... 11
Gambar 3. 3 Tombol Daftar Akun Baru ... 12
Gambar 3. 4 Halaman Pendaftaran Akun ... 12
Gambar 3. 5 Halaman Dashboard Aplikasi... 13
Gambar 3. 6 Tombol Pesan Disini ... 13
Gambar 3. 7 Halaman Daftar Produk ... 14
Gambar 3. 8 Halaman Detail Produk ... 14
Gambar 3. 9 Tombol Tambah Jumlah Produk ... 15
Gambar 3. 10 Tombol Tambah Ke Keranjang ... 15
Gambar 3. 11 Halaman Pesanan/Keranjang... 15
Gambar 3. 12 Tombol Checkout ... 16
Gambar 3. 13 Halaman Detail Pesanan... 16
Gambar 3. 14 Halaman Informasi Pemesanan Berhasil... 17
Gambar 3. 15 Halaman Histori Pesanan ... 17
Gambar 3. 16 Halaman Detail Pesanan... 18
Gambar 3. 17 Tombol Batakan Pesanan ... 18
Gambar 3. 18 Halaman Histori Pesanan Selesai ... 19
Gambar 3. 19 Halaman Profil Pelanggan ... 19
Gambar 3. 20 Tombol LogOut pada Menu Dashboard... 20
Gambar 3. 21 Konfirmasi LogOut ... 20
Gambar 3. 22 Aplikasi XAMPP... 21
Gambar 3. 23 Tombol Start XAMPP ... 21
Gambar 3. 24 Tampilan XAMPP Aktif ... 21
Gambar 3. 25 Halaman Utama Web Admin ... 22
Gambar 3. 26 Tombol Login ... 22
Gambar 3. 27 Halaman Login Web Admin ... 22
Gambar 3. 28 Halaman Dashboard Web Admin ... 23
Gambar 3. 29 Tombol Tambah Data Produk ... 23
Gambar 3. 30 Halaman Master Data Barang ... 24
Gambar 3. 31 Tombol Tambah Data Barang ... 24
Gambar 3. 32 Halaman Form Tambah Data Barang... 25
Gambar 3. 33 Tombol Simpan ... 25
Gambar 3. 34 Tombol Tambah Data Stok Barang ... 25
Gambar 3. 35 Halaman Master Data Stok Barang ... 26
Gambar 3. 36 Tombol Tambah Data Stok Barang ... 26
Gambar 3. 37 Form Tambah Data Stok Barang ... 26
Gambar 3. 38 Tombol Simpan ... 26
Gambar 3. 39 Tombol Data Pesanan... 27
Gambar 3. 40 Halaman Master Data Pesanan ... 27
ix
Gambar 3. 41 Nomor Pesanan ... 27
Gambar 3. 42 Halaman Detail Order Pesanan ... 28
Gambar 3. 43 Tombol Dropdown ... 28
Gambar 3. 44 Tombol Simpan ... 28
Gambar 3. 45 Halaman Master Data Kategori ... 29
Gambar 3. 46 Tombol Tambah Data Kategori... 29
Gambar 3. 47 Tombol Simpan ... 30
Gambar 3. 48 Tombol Laporan Transaksi ... 30
Gambar 3. 49 Halaman Laporan Data Transaksi ... 30
Gambar 3. 50 Tombol Tanggal ... 31
Gambar 3. 51 Tombol Cetak ... 31
Gambar 3. 52 Tampilan Cetak Laporan ... 31
Gambar 3. 53 Tombol Print ... 31
Gambar 3. 54 Tombol Laporan Barang ... 32
Gambar 3. 55 Halaman Laporan Data Barang ... 32
Gambar 3. 56 Tombol Cetak ... 32
Gambar 3. 57 Tombol Laporan Stok Barang ... 33
Gambar 3. 58 Laporan Data Stok Barang ... 33
Gambar 3. 59 Tombol Cetak ... 34
Gambar 3. 60 Tombol Laporan Data Pengguna... 34
Gambar 3. 61 Halaman Laporan Data Pengguna ... 34
Gambar 3. 62 Tombol LogOut Admin ... 35
x
DAFTAR LAMPIRAN
Lampiran 1. Log Mingguan ... 36
Lampiran 2. Hasil Pengujian Sistem (Black Box) ... 38
Lampiran 3. Kartu Bimbingan ... 40
Lampiran 4. Surat Pernyataan Adopsi Aplikasi ... 41
1 BAB I PENDAHULUAN
1.1 Tujuan Pembuatan Dokumen
Dokumen user manual Aplikasi Toko Berbasis Android pada Kios Elzio ini dibuat dengan tujuan sebagai berikut:
a. Menggambarkan dan menjelaskan penggunaan aplikasi Toko pada Kios Elzio untuk admin, User Pelanggan.
b. Sebagai panduan instalasi, konfigurasi dan penggunaan aplikasi Toko pada Kios Elzio ini.
Pihak-pihak yang bersangkutan dan dapat menggunakan dokumen ini adalah:
a. Administrator Toko pada Kios Elzio
Administrator Toko pada Kios Elzio menggunakan dokumen ini sebagai panduan untuk mereka bagaimana cara menggunakan dan melakukan pemeliharaan untuk aplikasi Toko pada Kios Elzio.
b. User Pelanggan
User Pelanggan menggunakan dokumen ini sebagai panduan penggunaan aplikasi ini sebagaimana hak akses yang diberikan kepada user pelanggan.
1.2 Deskripsi Umum Perusahaan
Gambar 1. 1 Kios Elzio
Pada Gambar 1.1 Kios Elzio merupakan usaha toko yang bergerak di bidang penjualan kebutuhan pokok. Tujuan utama berdirinya Kios Elzio ini merupakan upaya untuk menambah penghasilan dan membantu masyarakat sekitar menjadi mudah untuk mencari kebutuhan pokok. Contoh kebutuhan pokok yang sering dicari oleh masyarakat meliputi Minyak Goreng, Telur, Gula.
1.3 Deskripsi Umum Sistem 1.3.1 Deskripsi Umum Aplikasi
Deskripsi umum aplikasi meliputi deskripsi umum Rancang Bangun Aplikasi Toko Berbasis Android pada Kios Elzio yang memiliki fungsi utama dalam membantu proses jual beli pada kios Elzio. Aplikasi ini memiki fitur pembelian yang dapat mempermudah pelanggan dalam melakukan transaksi pembelian dan dapat membantu pemilik kios untuk meningkatkan penjualan. Dengan adanya aplikasi ini, pemilik kios dapat membuat laporan dengan mudah.
A. Struktur Tabel
Struktur tabel Rancang Bagun Aplikasi Toko Berbasis Android pada Kios Elzio digambarkan sebagai berikut:
a. Tabel Master Admin Nama Tabel : Admin Primary Key : admin_id Foreign Key : -
Fungsi :
Tabel 1. 1 Tabel Master Admin
No Nama Kolom Tipe Data Panjang Keterangan
1. admin_id varchar 5 Primary Key
2. admin_nama varchar 30 -
3. admin_email varchar 50 -
4. admin_password varchar 30 -
6. admin_status varchar 1 -
b. Tabel Master Pelanggan Nama Tabel : Pelanggan Primary Key : pelanggan_id Foreign Key : -
Fungsi :
Tabel 1. 2 Tabel Master Pelanggan
No Nama Kolom Tipe Data Panjang Keterangan
1. Pelanggan_id Varchar 5 Primary Key
2. Pelanggan_password Varchar 20 -
3. Pelanggan_email Varchar 25 -
4. Pelanggan_alamat Varchar 50 -
5. Pelanggan_notelp Varchar 13 -
6. Pelanggan_status Varchar 1 -
3
c. Tabel Master Kategori Nama Tabel : Kategori Primary Key : kategori_id Foreign Key : -
Fungsi :
Tabel 1. 3 Tabel Master Kategori
No Nama Kolom Tipe Data Panjang Keterangan
1. Kategori_id Varchar 5 Primary Key
2. Kategori_key Varchar 75 -
3. Kategori_nama Varchar 30 -
4. Kategori_status Varchar 1 -
d. Tabel Master Barang Nama Tabel : Barang Primary Key : barang_id Foreign Key : kategori_id Fungsi :
Tabel 1. 4 Tabel Master Barang
No Nama Kolom Tipe Data Panjang Keterangan
1. Barang_id Varchar 10 Primary key
2. Kategori_id Varchar 5 Foreign key
3. Barang_key Varchar 30 -
3. Barang_nama Varchar 30 -
4. Barang_satuan Integer - -
5. Barang_deskripsi Varchar 75
6. Barang_beli Integer -
7. Barang_harga Integer - -
8. Barang_stok Varchar 10 -
9. Barang_status Varchar 1 -
10. Barang_gambar Varchar 75
e. Tabel Master Stok Barang Nama Tabel : Stokbarang Primary Key : stokbarang_id Foreign Key : barang_id, admin_id Fungsi :
Tabel 1. 5 Tabel Master Stok Barang
No Nama Kolom Tipe Data Panjang Keterangan
1. Barang_id Varchar 10 Primary Key, Foreign key
2. Stokbarang_jumlah Integer 10 -
3. Stokbarang_min Int 15 -
4. Stokbarang_max Int 15 -
5. Stokbarang_status Varchar 1 -
f. Tabel Master Transaksi Nama Tabel : Transaksi Primary Key : transaksi_id
Foreign Key : admin_id, pelanggan_id Fungsi :
Tabel 1. 6 Tabel Master Transaksi
No Nama Kolom Tipe Data Panjang Keterangan
1. Transaksi_id Varchar 15 Primary key
2. Pelanggan_id Varchar 5 Foreign key
3. Transaksi_tgl Date - -
4. Transaksi_jam Time - -
5. Transaksi_kode Varchar 50 -
6. Transaksi_jumlah Integer - -
7. Transaksi_total Integer - -
8. Transaksi_status Varchar 1 -
g. Tabel Master Detail Transaksi Nama Tabel : Detailtransaksi Primary Key : detailtransaksi_id Foreign Key : transaksi_id, barang_id Fungsi :
Tabel 1. 7 Tabel Master Detail Transaksi
No Nama Kolom Tipe Data Panjang Keterangan
1. Transaksi_id Varchar 15 Pimary Key,Foreign Key
2. Barang_id Varchar 10 Pimary Key,Foreign Key
3. Detailtransaksi_jumlah Integer - - 4. Detailtransaksi_harga Integer - - 5. Detailtransaksi_status Varchar 1 - h. Tabel Master Cart
Nama Tabel : Cart Primary Key : id
Foreign Key : pelanggan_id, barang_id Fungsi :
Tabel 1. 8 Tabel Master Cart
No Nama Kolom Tipe Data Panjang Keterangan
1. id int 11 Primary key
2. Pelanggan_id int 15 Foreign Key
3. Barang_id int 11 Foreign Key
4. qty int 11 -
5. subtotal int 11 -
6. total int 10 -
5
i. Tabel Master Pengiriman Nama Tabel : Pengiriman Primary Key : id_pengiriman Foreign Key : transaksi_id Fungsi : -
Tabel 1. 9 Tabel Master Cart
No Nama Kolom Tipe Data Panjang Keterangan
1. Id_pengiriman Varchar 15 Primary key
2. Transaksi_id Int 10 Foreign Key
3. Pengiriman_nama Varchar 50 -
4. Pengiriman_alamat Varchar 100 -
5. Pengiriman_notelp Int 14 -
6. Pengiriman_metode varchar 1 -
B. Business Process Model and Notation (BPMN)
Sebelum membuat aplikasi, hal yang harus dilakukan terlebih dahulu dengan cara membuat BPMN. Dengan membuat BPMN dapat membantu dalam pembuatan aplikasi sesuai dengan alur yang dirancang. BPMN juga dapat membantu lebih mudah membaca proses bisnis pada aplikasi yang dibuat
a. BPMN Login dan Pendaftaran Akun Pelanggan
Gambar 1. 2 BPMN Proses Pendaftaran dan Login Akun Pelanggan
BPMN User pelanggan saat membuka aplikasi yang mengharuskan pelanggan untuk melakukan login agar dapat melakukan proses transaksi. Juka pelanggan belum memiliki akun untuk masuk kedalam aplikasi maka pelanggan akan diarahkan untuk melakukan pendaftaran akun baru, dan setelah pelanggan melakukan pendaftran akun baru maka pelanggan dapat melakukan login akun dengan akun yang telah di daftarkan. Setelah login berhasil pelanggan akan diarahkan pada menu utama/Dashboard, Seperti pada Gambar 1.2.
b. BPMN Transaksi Pembelian
Gambar 1. 3 BPMN Proses Transaksi Pembelian
Pada Gambar 1.3 merupakan BPMN user pelanggan melakukan transaksi pembelian. Setelah pelanggan melakukan login, pelanggan akan masuk pada menu dashboard. Pelanggan dapat melakukan pembelian pada menu “Pesan Disini” maka akan ditampilkan menu produk, setelah pelanggan memilih produk yang akan dibeli, produk tersebut dimasukkan kedalam keranjang untuk dapat dilakukan proses checkout. Setelah pesanan dicheckout maka pesanan akan diproses oleh admin untuk dilakukan pengiriman.
c. BPMN Transaksi Pembayaran(COD)
Gambar 1. 4 BPMN Proses Transaksi Pembayaran(COD)
BPMN proses pembayaran setelah pesanan diambil/diantar oleh pemilik toko kepada pelanggan. Ketika menerima pesanan, pelanggan memberikan uang kepada pemilik toko sesuai dengan total pembelian. Seperti pada Gambar 1.4
7
d. BPMN Proses Menambahkan Data Produk
Gambar 1. 5 BPMN Proses Menambahkan Data Produk
BPMN Proses manajemen menambahkan data produk. admin Setelah login ke web admin, masuk ke halaman Product Master Data. Setelah itu admin menambahkan data produk dengan mengisi form yang telah disediakan, setelah semua data terisi dengan benar maka data tersebut dapat disimpan di database, Seperti pada Gambar 1.5
1.3.2 Deskripsi Umum Kebutuhan Aplikasi
Gambaran Umum kebutuhan aplikasi akan mengimplementasikan semua informasi teknis yang menjadi acuan pengembangan aplikasi seperti pada Tabel 1.10. Berikut ini adalah pengguna dan fungsionalnya:
Tabel 1. 10 Kebutuhan Aplikasi
PENGGUNA FUNGSIONAL
Admin/Pemilik Toko 1. Mengelola Data Master
2. Mengelola Pesanan 3. Mengelola Laporan
Pelanggan 1. Melakukan Pendaftaran Akun
2. Melakukan Pembelian Admin :
a. Mengelola Data Master, Admin dapat memasukkan dan mengubah data produk, data stok produk, dan data transaksi.
b. Mengelola Pesanan, Admin dapat melakukan proses pesanan pelanggan yang telah masuk pada menu pesanan.
c. Mengelola Laporan, Admin dapat mencetak beberapa laporan yang dihasilkan dari data master dan data transaksi. Contoh : Laporan Data Barang, Laporan Transaksi Pembelian dan Pembayaran, Laporan Data Pelanggan.
Pelanggan :
a. Melakukan Pendaftaran Akun, Pelanggan dapat melakukan pendaftaran akun baru untuk melakukan transaksi pada aplikasi.
b. Melakukan Pembelian, Pelanggan dapat melakukan transaksi pembelian setelah login dengan akun yang telah didaftarkan.
1.4 Deskripsi Dokumen (Ikhtisar)
Dokumen ini dibuat untuk memberikan panduan untuk menggunakan Aplikasi Toko Berbasis Android pada Kios Elzio. Dokumen ini berisikan informasi sebagai berikut:
BAB I
Berisi informasi umum yang merupakan bagian pendahuluan, yang meliputi tujuan pembuatan dokumen, deskripsi umum sistem serta deskripsi dokumen.
BAB II
Berisi perangkat yang dibutuhkan untuk penggunaan Aplikasi Toko meliputi perangkat lunak dan perangkat hardware
BAB III
Berisi user manual Aplikasi Toko baik user manual yang diperuntukkan untuk administrator dan user (pengguna)
9 BAB II
PERANGKAT YANG DIBUTUHKAN
2.1 Perangkat Lunak
Perangkat lunak yang digunakan dalam pengujian adalah:
a. Windows 10 sebagai Operating System.
b. XAMPP
c. Google Chrome sebagai Tools Penjelajah (Web Browser).
d. Android Studio sebagai Tools untuk menjalankan Aplikasi.
2.2 Perangkat Keras
Perangkat keras yang dilibatkan dalam pengujian aplikasi ini adalah:
a. Server dengan spesifikasi Intel Xeon Processor MP up to3.66 GHz (single- core) atau 3.50 GHz (dual-core) /667 MHz front-side bus; RAM 8Gb
b. Komputer dengan spesifikasi prosesor Intel(R) Core™ i5- 6500 CPU @ 3.20GHz 2.19 GHz RAM : 4GB
c. Mouse sebagai peralatan antarmuka d. Monitor sebagai peralatan antarmuka e. Keyboard sebagai peralatan antarmuka.
2.3 Kriteria Pengguna Aplikasi
Pengguna aplikasi yang akan menggunaan aplikasi ini terutama dari sisi Admin dan pelanggan adalah sebagai berikut:
a. Memiliki pemahaman tentang antar muka computer b. Memiliki pemahaman pengoperasian device mobile
c. Memiliki pemahaman proses bisnis jual beli pada aplikasi kios elzio d. Memiliki device mobile untuk menggunakan aplikasi
2.4 Pengenalan dan Pelatihan
SDM yang terlibat dalam penggunaan aplikasi ini terlebih dahulu dengan cara diberikan pengenalan dan pelatihan yang cukup untuk menggunakan Aplikasi Toko pada Kios Elzio ini. Penggunaan aplikasi toko pada Kios Elzio ini membutuhkan beberapa minggu untuk pengenalan maupun pelatihan kepada pengguna aplikasi, baik pada pemilik toko yang berperan sebagai administrator maupun Pelanggan.
10 BAB III
MENU DAN CARA PENGGUNAAN
3.1 Struktur Menu
Adapun struktur menu pada Aplikasi Toko Berbasis Android. Kios Elzio adalah sebagai berikut:
1. Menu Login 2. Menu Pendaftaran 3. Menu Dashboard
4. Menu Admin/Pemilik Toko a. Data Master Barang b. Data Master Stok Barang c. Data Master Pesanan d. Data Master Kategori e. Laporan Data Barang f. Laporan Data Transaksi g. Laporan Data Pengguna h. Laporan Data Stok 5. Menu Pelanggan
a. Pesan Disini
b. Pesanan (Keranjang) c. Histori Pesanan d. Profil
6. Keluar (LogOut) 3.2 Penggunaan Aplikasi
Bagian ini menjelaskan bagaimana cara penggunaan aplikasi Toko berbasis android pada kios elzio.
3.2.1 Cara Membuka Aplikasi
Untuk mengoperasikan aplikasi ini Langkah-langkah yang harus dilakukan yaitu:
1. Buka aplikasi Toko Kios Elzio ini pada Handphone
2. Setelahnya akan muncul tampilan awal aplikasi/SplashScreen, Seperti pada Gambar 3.1.
11
Gambar 3. 1 Halaman Awal Aplikasi
Gambar 3. 2 Halaman Login Akun Pelanggan
3. Sebelum masuk pada dashboard pelanggan wajib melakukan login, seperti Pada Gambar 3.2
4. Pelanggan dapat mendaftarkan akun dengan cara klik tombol daftar seperti pada Gambar 3.3
Gambar 3. 3 Tombol Daftar Akun Baru
Gambar 3. 4 Halaman Pendaftaran Akun
5. Pelanggan mengisi form pendaftaran dengan benar, data tersebut dapat disimpan dengan cara klik tombol simpan seperti pada Gambar 3.4
3.2.2 Halaman Dashboard(Home)
1. Pada halaman Dashboard terdapat beberapa fitur seperti Pesan Di sini, Pesanan, Histori Pesanan, Profile, dan Tombol Keluar(LogOut).
13
Gambar 3. 5 Halaman Dashboard Aplikasi 3.2.3 Cara Melakukan Transaksi Pemesanan
1. Pelanggan dapat melakukan proses pemesanan produk pada aplikasi, dengan cara klik tombol Pesan Disini pada halaman Dashboard seperti pada Gambar 3.6.
Gambar 3. 6 Tombol Pesan Disini
Gambar 3. 7 Halaman Daftar Produk
2. pelanggan dapat mencari produk yang akan dibeli seperti pada Gambar 3.7.
Setelah memilih produk yang akan dibeli, pelanggan dapat melihat detail produk seperti pada Gambar 3.8.
Gambar 3. 8 Halaman Detail Produk
15
3. Pelanggan dapat menambah jumlah pesanan dengan cara klik tombol tambah produk pada halaman detail produk. Seperti pada Gambar 3.9.
Gambar 3. 9 Tombol Tambah Jumlah Produk
4. Setelah menentukan jumlah produk yang ingin dibeli, pelanggan dapat memasukkan produk tersebut kedalam keranjang dengan cara klik tombol Tambah Ke Keranjang seperti pada Gambar 3.10.
Gambar 3. 10 Tombol Tambah Ke Keranjang
5. Ketika Pelanggan melakukan klik pada tombol Tambah Ke Keranjang maka akan otomatis masuk kedalam menu Pesanan/Keranjang seperti pada Gambar 3.11. Pada halaman keranjang terdapat informasi produk yang telah dipilih dan total harga keseluruhan.
Gambar 3. 11 Halaman Pesanan/Keranjang
6. Pada halaman keranjang pelanggan dapat memeriksa kembali pesanan yang telah dipilih, jika dirasa sudah sesuai maka pelanggan dapat melanjutkan dengan cara klik tombol checkout seperti pada Gambar 3.12 maka akan diarahkan langsung pada halaman Detail Pesanan untuk melengkapi data pesanan.
Gambar 3. 12 Tombol Checkout 3.2.4 Cara Memasukkan Data Pesanan
1. Pelanggan melengkapi data detail pesanan berupa nama, alamat, dan nomor telepon. pelanggan dapat menyelesaikan pesanan dengan cara klik tombol Buat Pesanan. Maka akan muncul halaman informasi pesanan berhasil.
Gambar 3. 13 Halaman Detail Pesanan
17
Gambar 3. 14 Halaman Informasi Pemesanan Berhasil 3.2.5 Cara Melihat Pesanan Yang Sedang Berlangsung
1. Pada halaman histori pesanan, pelanggan dapat melihat pesanan yang sedang berlangsung maupun pesanan yang telah selesai seperti pada Gambar 3.15
Gambar 3. 15 Halaman Histori Pesanan
2. Pelanggan dapat melihat detail pesanan yang sedang proses maupun sudah selesai dengan cara klik gambar produk pada list histori pesanan, maka pelanggan akan diarahkan pada halaman detail pesanan seperti pada Gambar 3.16.
Gambar 3. 16 Halaman Detail Pesanan
3. Pada halaman detail pesanan, pelanggan juga dapat membatalkan pesanan dengan cara menekan tombol “Batalkan” seperti pada Gambar 3.17.
Gambar 3. 17 Tombol Batakan Pesanan 3.2.6 Cara Melihat Histori Pesanan
1. Setelah pelanggan telah selesai melakukan transaksi, maka status histori pesanan pada list pesanan akan berubah menjadi “SELESAI” seperti pada gambar
19
Gambar 3. 18 Halaman Histori Pesanan Selesai 3.2.7 Halaman Profil User
1. Pada halaman profil, terdapat beberapa informasi akun pelanggan yang telah didaftarkan seperti pada Gambar 3.19.
Gambar 3. 19 Halaman Profil Pelanggan
3.2.8 Keluar(LogOut)
1. Pada halaman Keluar digunakan untuk keluar dari halaman utama aplikasi, dimana untuk keluar aplikasi terdapat 2(dua) cara, yang pertama klik tombol logout yang berada pada menu dashboard kemudian klik keluar.
Gambar 3. 20 Tombol LogOut pada Menu Dashboard
2. Setelah menekan tombol logout pelanggan akan menerima PopUp konfirmasi logout seperti pada Gambar 3.21.
Gambar 3. 21 Konfirmasi LogOut
21
3.3 Penggunaan Web Admin
Pada bagian ini akan dijelaskan mengenai tata cara penggunaan aplikasi kios elzio pada pelanggan. Dan akan dijelaskan setiap kapan data harus dimutakhirkan.
3.3.1 Cara Mengaktifkan XAMPP
Untuk memulai akses terhadap web admin pada Kios Elzio ini, Admin diharuskan untuk mengaktifkan Aplikasi XAMPP untuk dapat terhubung pada database:
1. Bukalah aplikasi XAMPP Contorol Panel pada PC/Laptop
2. Akan muncul tampilan halaman aplikasi xampp seperti pada Gambar 3.22
Gambar 3. 22 Aplikasi XAMPP
3. Aktifkan Apache dan MySQL pada aplikasi XAMPP untuk menghubungkan ke database dengan cara klik tombol Start seperti pada Gambar 3.23.
Gambar 3. 23 Tombol Start XAMPP
4. Setelah menekan tombol start maka tampilan pada Apache dan MySQL akan berubah, seperti Gambar 3.24.
Gambar 3. 24 Tampilan XAMPP Aktif
3.3.2 Cara Membuka Web Admin
Admin dapat melakukan proses pengolahan data master dan menyelesaikan proses pesanan yang sedang berlangsung pada Aplikasi Toko Kios Elzio ini : 1. Bukalah browser pada Laptop/PC lalu masukkan alamat http://localhost/elzio/
maka akan diarahkan ke halaman web admin.
2. Akan muncul tampilan halaman dashboard web admin seperti pada Gambar 3.25
Gambar 3. 25 Halaman Utama Web Admin 3.3.3 Cara Login Admin
1. Setelah masuk pada halaman dashboard, admin dapat melakukan login dengan cara klik tombol Login seperti pada Gambar 3.26
Gambar 3. 26 Tombol Login
2. Pada halaman login, admin memasukkan email dan password dengan benar maka akan diarahkan langsung pada halaman dashboard seperti pada Gambar 3.27.
Gambar 3. 27 Halaman Login Web Admin
23
3.3.4 Halaman Dashboard Web Admin
1. Setelah melakukan login akun, maka akan tampil halaman dashboard seperti pada Gambar 3.28.
Gambar 3. 28 Halaman Dashboard Web Admin 3.3.5 Cara Menambahkan Data Barang
1. Admin dapat menambahkan data barang dengan cara klik tombol dropdown Master seperti pada Gambar 3.29
Gambar 3. 29 Tombol Tambah Data Produk
2. Maka akan muncul halaman master data barang seperti pada Gambar 3.30 pada halaman data master barang terdapat informasi barang yang tersedia.
Gambar 3. 30 Halaman Master Data Barang
3. Untuk menambahkan data barang, admin dapat menekan tombol Tambah berwarna abu-abu seperti pada Gambar 3.31.
Gambar 3. 31 Tombol Tambah Data Barang
4. Maka akan muncul halaman tambah data barang seperti pada Gambar 3.32, pada halaman tambah data barang, admin mengisi form dengan benar.
25
Gambar 3. 32 Halaman Form Tambah Data Barang
5. Setelah form terisi semua dengan benar, admin dapat menyimpan data barang dengan cara klik tombol Simpan seperti pada Gambar 3.33
Gambar 3. 33 Tombol Simpan 3.3.6 Cara Menambahkan Data Stok Barang
1. Admin dapat menambahkan data stok barang dengan cara klik tombol dropdown Master seperti pada Gambar 3.34
Gambar 3. 34 Tombol Tambah Data Stok Barang
2. Maka akan muncul halaman master data stok barang seperti pada Gambar 3.34.
pada halaman data master data barang terdapat informasi stok barang yang tersedia.
Gambar 3. 35 Halaman Master Data Stok Barang
3. Untuk menambahkan data stok barang, admin dapat menekan tombol Tambah berwarna abu-abu seperti pada Gambar 3.37.
Gambar 3. 36 Tombol Tambah Data Stok Barang
4. Maka akan muncul halaman tambah data stok barang seperti pada Gambar 3.37, pada halaman tambah data stok barang, admin mengisi form dengan benar.
Gambar 3. 37 Form Tambah Data Stok Barang
5. Setelah form terisi semua dengan benar, admin dapat menyimpan data stok barang dengan cara klik tombol Simpan seperti pada Gambar 3.38
Gambar 3. 38 Tombol Simpan
27
3.3.7 Cara Menerima Pesanan Pelanggan
1. Admin dapat memproses pesanan pelanggan dengan cara klik tombol dropdown Master lalu pilih Data Pesanan seperti pada Gambar 3.39
Gambar 3. 39 Tombol Data Pesanan
2. Maka akan muncul halaman master data pesanan seperti pada Gambar 3.40. pada halaman data master pesanan terdapat informasi pesanan yang tersedia.
Gambar 3. 40 Halaman Master Data Pesanan
3. Admin dapat memproses pesanan yang sedan berlangsung dengan cara klik nomor pesanan seperti pada Gambar 3.41
Gambar 3. 41 Nomor Pesanan
4. Maka akan muncul detail order pesanan seperti pada Gambar 3.42
Gambar 3. 42 Halaman Detail Order Pesanan
5. Jika pesanan telah disiapkan, admin dapat mengubah status pesanan dengan cara klik dropdown seperti pada Gambar 3.43
Gambar 3. 43 Tombol Dropdown
6. Setelah status pesanan diubah, admin dapat menyimpan dengan cara klik tombol Simpan seperti pada Gambar 3.43
Gambar 3. 44 Tombol Simpan 3.3.8 Cara Menambahkan Data Kategori
1. Admin dapat menambahkan data kategori dengan cara klik tombol dropdown Master lalu pilih Kategori seperti pada Gambar 3.45
29
2. Maka akan muncul halaman master data kategori seperti pada Gambar 3.46. pada halaman data master kategori terdapat informasi pesanan yang tersedia.
Gambar 3. 45 Halaman Master Data Kategori
3. Untuk menambahkan data kategori, admin dapat menekan tombol Tambah berwarna abu-abu seperti pada Gambar 3.46.
Gambar 3. 46 Tombol Tambah Data Kategori
4. Maka akan muncul halaman tambah data kategori seperti pada Gambar 3.47, pada halaman tambah data kategori, admin mengisi form dengan benar.
5. Setelah form terisi semua dengan benar, admin dapat menyimpan data stok barang dengan cara klik tombol Simpan seperti pada Gambar 3.47
Gambar 3. 47 Tombol Simpan 3.3.9 Cara Melihat Laporan Transaksi
1. Admin dapat melihat laporan transaksi dengan cara klik tombol dropdown Laporan lalu pilih Laporan Transaksi seperti pada Gambar 3.48
Gambar 3. 48 Tombol Laporan Transaksi
2. Maka akan muncul halaman Laporan seperti pada Gambar 3.49. pada halaman Laporan Transaksi terdapat informasi pesanan yang tersedia.
Gambar 3. 49 Halaman Laporan Data Transaksi 3.3.10 Cara Mencetak Laporan Transaksi
1. Admin dapat mencetak laporan transaksi sesuai dengan tanggal yang ditentukan dengan cara klik tombol Tanggal seperti pada Gambar 3.50
31
Gambar 3. 50 Tombol Tanggal
2. Setelah tanggal ditentukan, admin dapat mencetak laporan dengan cara klik tombol cetak seperti pada Gambar 3.51
Gambar 3. 51 Tombol Cetak
3. Maka akan muncul halaman Cetak seperti pada Gambar 3.52
Gambar 3. 52 Tampilan Cetak Laporan
4. Setelah Tampilan cetak muncul, admin dapat mencetak dengan cara klik tombol Print seperti pada Gambar 3.53
Gambar 3. 53 Tombol Print 3.3.11 Cara Melihat Laporan Data Barang
1. Admin dapat melihat laporan data barang dengan cara klik tombol dropdown Laporan lalu pilih Laporan Barang seperti pada Gambar 3.54
Gambar 3. 54 Tombol Laporan Barang
2. Maka akan muncul halaman Laporan seperti pada Gambar 3.55. pada halaman Laporan Data Barang terdapat informasi barang yang tersimpan.
Gambar 3. 55 Halaman Laporan Data Barang
3. Admin dapat mencetak laporan dengan cara klik tombol cetak seperti pada Gambar 3.56
Gambar 3. 56 Tombol Cetak
33
3.3.12 Cara Melihat Laporan Data Stok Barang
1. Admin dapat melihat laporan data stok barang dengan cara klik tombol dropdown Laporan lalu pilih Laporan Stok Barang seperti pada Gambar 3.57
Gambar 3. 57 Tombol Laporan Stok Barang
2. Maka akan muncul halaman Laporan seperti pada Gambar 3.58. pada halaman Laporan Data Stok Barang terdapat informasi Stok Barang yang tersimpan.
Gambar 3. 58 Laporan Data Stok Barang
3. Admin dapat mencetak laporan dengan cara klik tombol cetak seperti pada Gambar 3.59
Gambar 3. 59 Tombol Cetak 3.3.13 Cara Melihat Laporan Data Pengguna
1. Admin dapat melihat laporan data pengguna dengan cara klik tombol dropdown Laporan lalu pilih Laporan pengguna seperti pada Gambar 3.60
Gambar 3. 60 Tombol Laporan Data Pengguna
2. Maka akan muncul halaman Laporan data pengguna seperti pada Gambar 3.61.
pada halaman Laporan Data Pengguna terdapat informasi Data Pengguna yang tersimpan.
Gambar 3. 61 Halaman Laporan Data Pengguna
35
3.3.14 Keluar(LogOut)
1. Untuk keluar dari halaman web admin dengan melakukan klik pada tombol LogOut pada bagian Dropdown Admin seperti pada Gambar 3.62
Gambar 3. 62 Tombol LogOut Admin
