Perancangan Antar Muka Aplikasi

3.4 Perancangan Antar Muka Aplikasi

3.4.1 Lembar Kerja Tampilan a. Form LOGIN Header Judul Web Menu Utama Search Button Username Password Login Gambar 3.3 LKT Login  Tombol Login yang berada pada kiri bawah tampilan digunakan operator untuk bisa masuk dalam pengolahan data aplikasi dengan catatan harus mengisikan username dan password dengan valid. Terdapat error handling apabila useroperator salah memasukkan karakter pada kolom username dan password  Dalam sistem web yang dirancang, form login hanya ditujukan bagi operator untuk mengolah data dalam siklus transaksi. Operator dapat melakukan aktivitas pengolahan data seperti insert, update, delete barang yang dijual kemudian memvalidasi pengiriman.  Pelanggan hanya dapat melihat barang yang akan dibeli. Pelanggan tidak dapat melakukan login, karena pelanggan tidak diperbolehkan untuk mengolah data barang dalam siklus transaksi. b. Menu Utama Header Judul Web Menu Utama Search Button Kategori Barang Gambar Produk yang Dijual View Details Gambar Produk yang Dijual View Details Gambar Produk yang Dijual View Details Sub Menu Gambar 3. 4 LKT menu utama  Pada tampilan bagian atas kiri terdapat deretan pilihan menu bar yang bisa digunakan pengunjung untuk membeli barang dan memvalidasi pembayaran.  Pada bagian kanan menu bar tampilan terdapat keterangan operator yang login untuk menggunakan aplikasi web ini dalam mengolah data.  Pada bagian kanan tampilan terdapat combo box search yang berfungsi untuk mencari barang yang ingin dilihat detailnya. Pelanggan dapat menggunakan fitur ini dan kemudian mengaksesnya dengan syarat setiap karakter yang dimasukkan sesuai dengan produk barang yang dijual. Apabila tidak sesuai, maka sistem tidak akan menampilkan hasil pencarian. Header Judul Web Menu Utama Search Button Kategori Barang Gambar Produk yang Dijual Deskripsi Judul Barang Harga Category Button “Buy” Gambar 3. 5 LKT view details  Pada gambar 3.5 merupakan tampilan dimana pengunjung dapat melihat detail produk secara spesifik mengenai kelengkapan informasi dari produk yang dijual.  Tampilan ini menyediakan deskripsi dari produk yang dijual dan tombol pembelian untuk memasukkan barang yang dijual ke dalam keranjang belanja. c. Company Profile Header Judul Web Menu Utama Search Button Kontak Info Perusahaan Secara Terperinci Sub Menu Gambar 3. 6 LKT Company Profile  Tampilan ini menyediakan informasi mengenai alamat, email, dan nomor telepon perusahaan sacara terperinci. Pengunjung hanya dapat melihat informasi ini dan tidak dapat melakukan aktivitas lain. d. Kolom Masukan Header Judul Web Menu Utama Search Button Button Submit Nama Subject Email Isi Pesan Kontak Info Perusahaan Akses Halaman Akun Jejaring Sosial Perusahaan Gambar 3. 7 LKT Kolom Masukan  Pada menu halaman ini pengunjung dapat mengisikan pesan baik itu saran maupun keluhan kepada perusahaan dengan mengisikan identitas pada kolom teks area yang disediakan.  Untuk melakukan pengiriman pesan, pengunjung harus mengisi data secara lengkap. Sistem akan membaca data yang tidak terisi dan tidak akan memproses pengiriman pesan sampai semua data telah dimasukkan.  Kolom Kontak Info Perusahaan merupakan label yang hanya berisi data perusahaan untuk dapat dilihat oleh pengunjung  Kolom Jejaring Sosial merupakan menu yang dapat mengkases akun jejaring sosial yang dimiliki perusahaan. Dalam sistem yang dirancang pengunjung hanya dapat mengakses akun google+ perusahaan yang sudah terintegrasi, dan akan langsung disambungkan dalam halaman tersebut. e. Transaksi  Terdapat menu keranjang belanja yang akan diakses oleh pelanggan dalam memvalidasi pembelian barang. Apabila keranjang belanja belum diakses, maka pelanggan hanya akan memasukkan barang ke dalam daftar pembelian, namun tidak membeli barang tersebut.  Apabila pelanggan benar-benar ingin membeli barang yang telah dipilih, maka pelanggan harus menekan tombol “check out”. Tombol ini merupakan tombol bukti validasi supaya setelahnya pelanggan dapat memasukkan identitasnya mengenai alamat yang menjadi tujuan bahwa barang akan dikirim.  Sebelum menekan tombol “check out”, pelanggan dapat menetukan jumlah kuantitas barang yang akan dibeli. Pelanggan juga bisa membatalkan pembelian produk yang sebelumnya sudah dipilih. Kemudian pelanggan akan memilih ulang pada tampilan utama apabila masih belum sesuai.  Tombol “empty cart” yang pada lembar kerja tampilan adalah tombol batal berfungsi untuk mengosongkan keranjang belanja. Dengan kata lain pelanggan membatalkan semua pemilihan barang yang ingin dibeli, dan dapat memilih barang ulang di menu utama bila ingin benar- benar melakukan pembelian. Header Judul Web Menu Utama Search Button Nama Barang Harga Kuantitas Total Batal Beli Gambar 3. 8 LKT Keranjang Belanja  Setelah menekan tombol “check out” beli pada tampilan di atas, maka pelanggan akan ditempatkan atau diarahkan pada tampilan berikutnya dimana pelanggan harus memasukkan identitas secara lengkap. Dalam tampilan ini pelanggan diberi kesempatan untuk melakukan pembayaran. Apabila pembayaran belum dikirim, maka barang tidak akan dikirim ke alamat pelanggan. Pembayaran yang dilakukan adalah “pay on delivery”. Setelah selesai memasukkan semua identitas secara lengkap, pelanggan wajib menekan tombol “submit” sebagai pengesahan bahwa pelanggan benar-benar membeli barang yang telah dipilihnya.  Setiap menu TextBox dan TextArea yang disediakan harus diisi dengan benar seperti contoh yang sudah disediakan dan pengisian data-data tersebut tidak boleh ada yang kosong.  Apabila terdapat TextBox yang belum diisi atau terdapat kesalahan pengisian identitas maka sistem akan meresponnya dengan memberikan error provider pada setiap menu yang terjadi kesalahan. Contohnya adalah penulisan email yang harus menggunakan simbol “”. Billing Information Nama Depan Tutup Kirim Nama Belakang Alamat Email Kontak Pesan Pengingat Gambar 3. 9 LKT billing infomation f. Pengolahan Data Penjualan  Pengolahan data barang-barang yang dijual dilakukan oleh operator atau penyedia barang. Pengolahan data yang dapat diakses dan dirubah oleh operator adalah mengenai pengolahan data barang, pengolahan data pengiriman barang, dan pengolahan kategori barang dengan mengakses ComboBox yang ada.  Secara garis besar pengolahan barang dilakukan operator untuk menambah dan menghapus barang yang dijual. Pengolahan pengiriman barang untuk merubah status pengiriman terhadap pembeli yang sudah melakukan pembayaran. Sedangkan untuk pengolahan kategori barang untuk menambah dan menghapus kategori barang yang diperlukan untuk keseuaian tampilan penjualan. Header Judul Web Text Area Add Product Tabel Item Product All Products Products Orders Main Menu Logout Category Kuantitas Filter Gambar | Nama Product | Deskripsi | Harga | Cateogry |Tombol Aksi Tambah dan Hapus Gambar 3.10 LKT Pengolahan Data Produk  Pengolahan data Pemesanan terdapat pada menu orders. Pada menu ini operator dapat melihat data pengunjung dimana operator dapat melakukan proses validasi pengiriman barang bagi pengunjungpembeli yang telah melakukan pembayaran terhadap barang yang dibelinya.  Terdapat 3 menu utama yakni unpaid orders, delivered orders, dan paid orders. Masing- masing menu tersebut berisi tabel data pengunjung yang memuat nama, tanggal akses, dan produk yang dibeli. Apabila tombol produk yang dibeli pada label view details diakses maka operator dapat melihat data pembeli secara lengkap.  Pada 3 menu utama mengenai pengolahan data pengunjung yakni unpaid orders, delivered orders, dan paid orders berisi tabel yang memuat rincian data yang sama.  Berturut-turut proses yang dilakukan oleh operator untuk memvalidasi data pengunjung berada pada menu paling kiri. Header Judul Web Text Area Add Product Tabel Item Pemesanan All Products Products Orders Main Menu Logout Category Kuantitas Filter Data Paid | Customer | Item Unpaid Orders Delivered Orders Paid Orders Gambar 3.11 LKT Pengolahan Data Pengunjung  Operator juga dapat mengolah kategori barang yang akan dijual apabila akan menambahkan atau menghapus kategori barang berdasarkan alasan tertentu. Header Judul Web Text Area Category Name Tabel Data Kategori All Products Products Orders Main Menu Logout Category Kuantitas Submit Name Action Tambah | Hapus Gambar 3.12 LKT Pengolahan Kategori Produk 3.4.2 Jaringan Semantik Dengan dirancangnya jaringan semantik pada sistem perancangan web aplikasi ini maka secara singkat dapat dijelaskan proses alur pemakaian sistem yang terjadi oleh kedua user yakni operatorpenjual dan pengunjungcustomer. Secara garis besar sistem aplikasi web ini memiliki 6 menu utama yang dapat diakses oleh operator dan customer. Namun secara khusus hanya operator yang dapat melakukan aktivitas login. Penjelasan Jaringan Semantik : 1  customer bisa masuk ke tampilan web Ahome , Bshop, Cabout us, Dcontact, Ecart kemudian setelah memilih barang maka customer bisa memesan dengan mengisi data lengkap ke pemesanan. 2  Operator secara khusus dapat mengakses Flogin, karena login yang diberikan hanya ditujukan kepada operator yang berkepentingan dalam melakukan pengolahan data penjualan baik transaksi maupun barang. A C D E B F A : Home B : Shop C : About Us D : Contact E : Cart F : Login 1 : Customer 2 : Pemesanan 3 : Admin 1 2 3 Gambar 3. 13 Jaringan Semantik

3.5 Perancangan Proses Bisnis