Desain Fisik dan Integrasi Aplikasi
5.3. Desain Antar Muka Aplikasi
Desain antar muka merupakan gambaran bagaimana tampilan dari aplikasi yang akan dirancang. Fase desain fisik dan integrasi merupakan suatu pengembangan dari fase desain logis ang dimana pada desain logis kita hana mengidentifikasi apa saja entitas utama yang terdapat pada aplikasi atau sistem yang akan dibuat. Tetapi dalam fase desain fisik ini kita akan mengidentifikasi lebih dalam sehingga hampir mendekati realisasi pada sistem aplikasi website tersebut.
Desain awal untuk aplikasi website ini dibuat di perangkat lunak Microsoft Visio 2013, setelah desain fisik ini dirancang maka langkah selanjutnya maju kelangkah implementasi, didalam implementasi pembuatan aplikasi website tersebut menggunakan aplikasi Wordpress.
5.3.1. Desain Antar Muka untuk Home
Pada aplikasi website ini, home merupakan halaman utama yang berisikan tampilan yang terdiri dari nama perusahaan, informasi buku terupdate, buku best selling serta terdapat tools pencarian buku.
s
Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
Gambar Animasi <>
< New Book >
Best Selling Search Book ? Exclusive book mont
Find Produck All Categories All Authors
DPJ BOOK STORE
Cara Pemesanan
Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.2. Desain Antar Muka untuk Home 5.3.2. Desain Antar Muka Daftar Buku
Rancangan selanjutnya yaitu terdapat form buku yang didalamnya terdapat pilihan-pilihan buku yang akan dibeli oleh konsumen.
s Home Books Booking List Check JNE How To Order My Account About
Buku
Daftar Buku
Buku Buku Buku
Buku Buku Buku Buku
Contact
Gambar 5.3. Desain Antar Muka untuk Formbooks 5.3.3. Desain Antar Muka untuk Booking Buku
s Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
Booking Buku
Product Name Unit Price Stock Status
View To Chart
Post Terbaru
-Artike -DLL Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.4. Desain Antar Muka untuk Booking Buku
Pada Gambar diatas merupakan desain untuk Booking buku, form ini merupakan form khusus booking buku, setelah member berminat untuk membeli buku tersebut tetapi membelinya ke esokan hari atau untuk beberapa minggu dan bulan, maka di form inilah member menandai buku yang akan dibeli untuk keesokan hari atau untuk beberapa minggu kedepan.
5.3.4. Desain Antar Muka untuk Pemesanan Buku Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
Checkout Billing Shipping First Name Last Name Alamat Lengkap Kota/Kabupaten Kecamatan Kelurahan Province Postcode/Zip Country Indonesia Email Address Phone Your Order Product Total Cash on Delivery Bank Bank First Name Last Name Alamat Lengkap Kota/Kabupaten Kecamatan Kelurahan Province Postcode/Zip Country Indonesia Order Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.5. Desain Antar Muka Untuk Checkout
Disinilah member mengisi identitas untuk pembelian buku dan pengiriman buku kepada orang yg dituju, apabila buku itu akan dihadiahkanatau dikirim kepada orang lain disana terdapat input shipping, maka disanalah member mengisi kepada siapa buku itu tertuju.
5.3.5. Desain Antar Muka Rincian Pemesanan Buku
s Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
Checkout
Product Total
Customer Detail
Billing Shipping
Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.6. Desain Antar Muka Untuk Rincian Bahwa Checkout Telah Berhasil
Gambar diatas merupakan hasil dari rincian checkout telah berhasil, dan member harus segera membayar pembayaran sesuai rincian checkout yang telah tampil dilaar member.
5.3.6. Desain Antar Muka Check JNE Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
Cek Resi JNE
Cek
Cek Resi Post Terbaru
-Artike -DLL Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.7. Desain Antar Muka untuk Check JNE
Setelah dilakukan proses pembayaran, maka dari itu pihak perusahaan akan mengirimkan barang atau buku tersebuk kepihak jasa pengiriman JNE. Setelah pengiriman dilakukan, maka pihak pembeli atau member harus memeriksa keadaan barang yang sedang terkirim tersebut. Tetapi sebelum di haruskan mengecek pengecekan lewat JNE, pembeli atau member sudah mendapat konfirmasi status buku telah terkirim atau belum ke pihak jasa pengiriman JNE lewat sms dari penerbit buku tersebut.
5.3.7. Desain Antar Muka Cara Pemesanan
s Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
Cara Pemesanan
Bagaimanakah Cara Pemesanan Buku?
……… ………
………..
Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.8. Desain Antar Muka untuk Cara pemesanan
Dibagian ini merupakan perancangan dari form How To Order, di form ini pengunjung atau member bisa melihat bagaimana cara pemesanan buku di website bookstore DPJ.
5.3.8. Desain Antar Muka My Account
Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
My Account
Login Login
Username or email address Password*
Login email address Password*
Register Lost Your Password*?
Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.9. Desain Antar Muka My Account
Di dalam perancangan Form My Account khusus untuk pengunjung yang blom menjadi member dan login member ataupun admin.
5.3.9. Desain Antar Muka About
Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
Tentang kami
……….
Statistik Perusahaan
Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.10. Desain Antar Muka About
Perancangan form ini merupakan isi dari informasi profil perusahaan yang bergerak dibidang penerbitan.
5.3.10. Desain Antar Muka contact
Home Buku Daftar List Akun Saya Cek Resi JNE Tentang kami Kontak kami
Kontak Kami
……….
Home Books Booking List Check JNE How To Order My Account About Contact
Gambar 5.11. Desain Antar Muka contact Perancangan form ini merupakan isi dari informasi kontak perusahaan.
5.3.11. Desain Antar Muka Report Penjualan
Date Number of items sold Number of orders Coupon amount Refund amount Shipping amount Gross Sales amount Net Sales amount
Gambar 5.12. Desain Antar Muka Report Penjualan
Pada Gambar 5.12. diatas merupakan perancangan report khusus penjualan akan dilaporkan kepada kepala bagian pemasara PT Dunia Pustaka Jaya.
Bab 6
Prototype
6.1. Fase Konstruksi dan Pengujian (Construction Testing)