30
BAB III ANALISIS DAN PERANCANGAN
3.1 Analisis Masalah Perkembangan aplikasi berbasis web mendorong kemajuan di bidang penjualan atau toko online (e-commerce). Namun banyak dari penyedia penyedia aplikasi toko online yang ada sebagian besar dibuat menggunakan bahasa pemrograman yang membutuhkan banyak link dan halaman untuk setiap transaksi atau prosesnya. Dengan banyaknya link halaman tersebut maka untuk melakukan sebuah aksi terhadap link akan memakan waktu yang cukup lama untuk menunggu aplikasi tersebut memuat sebuah halaman baru. 3.1.1 Analisis Waktu Muat Toko cduniverse.com Misalkan http://www.cduniverse.com/ adalah toko online yang menjual berbagai cd musik luar negeri.
30
31
Gambar 3.1 Aplikasi Toko cduniverse.com Dari contoh aplikasi toko online di atas penulis mencoba untuk mencari tahu berapa lama waktu muat yang dibutuhkan untuk membuka halaman dari aplikasi tersebut dan berikut hasil penelitian tersebut : 6. Langkah pertama yang dilakukan oleh penulis yaitu menghitung terlebih dahulu berapa bandwidth yang dipakai, dan hasilnya dapat dilihat pada gambar di bawah ini.
32
Gambar 3.2 bandwidth yang digunakan 7. Langkah kedua yaitu dengan mempersiapkan aplikasi yang akan digunakan untuk menghitung berapa lama waktu yang dibutuhkan untuk membuka sebuah halaman aplikasi toko online tersebut. Disini penulis menggunakan plugin yang telah disediakan oleh salah satu web browser yaitu mozila firefox, plugin yang disediakan oleh mozila bernama firebug. Untuk dapat menggunakan
firebug,
plugin
tersebut
dapat
di
unduh
di
http://getfirebug.com/downloads. 8. Menghitung waktu muat dari aplikasi toko online yang dituju, seperti gambar di bawah ini.
33
Gambar 3.3 Halaman utama toko cduniverse.com Dari hasil perhitungan terhadap aplikasi toko online tersebut diperoleh hasil untuk perhitungan berapa waktu yang dibutuhkan untuk membuka halaman aplikasi tersebut dan berapa banyak aplikasi tersebut akan berpindah halaman jika penulis ingin membeli satu buah produk, dalam hal ini penulis mencoba untuk memesan sebuah produk dengan nama produk Cd Brian Cultbertson seharga $ 11.16 Untuk mengetahui berapa banyak halaman yang diperlukan untuk memesan sebuah produk pada aplikasi toko online cduniverse.com akan penulis jelaskan melalui beberapa gambar di bawah ini:
34
Gambar 3.4 Memilih produk yang diinginkan
Gambar 3.5 Memasukan banyak barang ke dalam keranjang belanja
35
Gambar 3.6 Permintaan Login Pelanggan
Gambar 3.7 Pendaftaran Pelanggan Baru
36
Gambar 3.8 Penjumlahan Harga Barang Yang Dibeli Dengan Harga Pengiriman
Gambar 3.9 Pemilihan Shipping Method Dan Payment Method
37
Gambar 3.10 Tanda Bukti Pembelian Barang Maka penulis mendapatkan hasil dari pengamatan tersebut yaitu untuk memesan sebuah produk dari aplikasi toko cduniverse.com pengguna paling tidak harus berpindah halaman sebanyak 6 kali. Berikut tabel penjelasan perhitungan waktu muat : Tabel 3.1 Tabel Perhitungan Waktu Muat cduniverse.com Total waktu muat (dihitung secara sequence disetiap perpindahan halaman) Skenario perpindahan halaman Waktu muatan (detik) Halaman utama toko indo.co.id 6,71 detik Memasukan banyak barang ke dalam keranjang 9,09 detik belanja
Tebel 3.1 Tabel Perhitungan Waktu Muat cduniverse.com (Lanjutan)
38
Skenario perpindahan halaman
Waktu muatan (detik)
Permintaan Login Pelanggan Permintaan Pendaftaran Pelanggan Baru Penjumlahan Harga Barang Yang Dibeli Dengan Harga Pengiriman,Dan Pemilihan Shipping Method Dan Payment Method Menampilkan Tanda Bukti Pembelian Barang.
15,97 detik 3,83 detik 13,05 detik
Total
10,67 detik
59,32 detik Dari hasil perhitungan diatas bahwa untuk membeli sebuah produk dari toko
cduniverse.com penulis memerlukan 6 kali pindah halaman dan memerlukan waktu selama 59,32 detik. Pengujian ini penulis menggunakan bandwidth 246,90 Kbps.
3.1.2 Analisis Waktu Muat Disctarra.com Penulis
juga
menganalisa
sebuah
aplikasi
toko
online
lain
yaitu
http://www.disctarra.com disctarra.com adalah sebuah aplikasi toko online yang menyediakan produk cd musik. Disctarra.com dibangun menggunakan asp.net hal ini dapat terlihat dari url yang digunakan jika kita mengakses halaman web tersebut. Analisa yang penulis lakukan terhadap aplikasi toko online ini serupa dengan analisa yang penulis lakukan sebelumnya, yaitu dengan menghitung lama waktu muat dan banyak halaman untuk sebuah proses pembelian sebagai bahan acuan perbandingan pemanfaatan engine dari suatu aplikasi toko online.
39
Gambar 3.11 Halaman Utama Disctarra.com
Gambar 3.12 Membeli sebuah produk
40
Gambar 3.13 Memasukan Banyaknya barang
Gambar 3.14 Informasi Pelanggan Diharuskan Login Terlebih Dahulu
41
Gambar 3.15 Halaman Pendaftaran Untuk Pelanggan Baru
Gambar 3.16 Halaman Login Untuk Pelanggan Terdaftar
42
Gambar 3.17 Halaman Utama Palanggan
Gambar 3.18 Keranjang Belanja Pelanggan
43
Gambar 3.19 Tanda bukti pemesanan barang Dari hasil screenshoot di atas penulis bisa menyimpulkan bahwa untuk dapat membeli sebuah produk membutuhkan total waktu 105,86 detik atau selama 1 menit 45,86 detik dan berpindah halaman sebanyak 8 kali. Berikut adalah tabel penjelasan perhitungan waktu muat: Tabel 3.2 Tabel Perhitungan Waktu Muat disctarra.com Skenario Perpindahan Halaman (Pada saat pembelian produk) Membuka Halaman Utama Membeli sebuah barang Memasukan banyaknya barang Halaman Pendaftaran Pelanggan Baru
Waktu (detik) 4,71 detik 3,95 detik 6,87 detik 6,85 detik
muatan
44
Tabel 3.2 Tabel Perhitungan Waktu Muat disctarra.com (Lanjutan) Halaman Login Pelanggan Terdaftar
21,76 detik
Halaman Utama Pelanggan
32,94 detik
Keranjang Belanja Pelanggan
5,87 detik
Tanda bukti pemesanan barang
22.91 detik
Total
105,86 detik
3.2 Pemecahan Masalah Melihat dari masalah tersebut penulis mencoba memberikan salah satu solusi alternatif pemecahan masalah yaitu dengan membuat sebuah aplikasi berbasis web yang dapat menyediakan kebutuhan pengguna dalam melakukan pembelian, seperti transaksi, pencarian, pemilihan dan pembayaran produk, dalam satu halaman sehingga meminalkan waktu yang dibutuhkan untuk membuka halaman terkait layaknya
aplikasi
desktop
yaitu
dengan
menggunakan
OpenLaszlo
(http://openlaszlo.org) Openlaszlo adalah salah satu platform dari RIA (Rich Internet Aplication) yang digunakan untuk lebih memperkaya aplikasi toko
online yang
berbasis web namun mempunyai fungsionalitas seperti aplikasi berbasis desktop. Aplikasi toko online yang dibangun menggunakan openlaszlo membutuhkan waktu buka halaman yang lebih efisien,selain itu untuk memesan sebuah produk kita tidak perlu berpindah ke halaman lain karena pada saat kita memasukan sebuah produk yang diinginkan maka produk tersebut akan langsung dimasukan kedalam keranjang belanja
45
3.2.1 Elemen – Elemen Yang Dibutuhkan Elemen elemen yang dibutuhkan dalam pengembangan aplikasi ini yaitu dengan menggunakan sistem operasi Linux Ubuntu 9.10 yang di dalamnya terdapat elemen – elemen yang mendukung berjalannya aplikasi toko online ini berikut adalah gambaran atau susunan elemen-elemen tersebut
Gambar 3.20 Susunan elemen aplikasi
Penjelasan gambar 3.20 dapat dilihat sebagai berikut 13. Sistem Operasi Linux Ubuntu 9.10 Digunakan sebagai sistem operasi yang didalam nya akan berjalan server tomcat dan aplikasi toko online yang di bangun menggunakan openlaszlo, php, dan dikoneksikan dengan basis data mysql.
46
14. Library Penggunaan library untuk menyempurnakan kekurangan dari sistem operasi, penggunaan library pada ubuntu bertujuan untuk mendukung paket paket utama dibutuhkan. 15. Java Servlet Penggunaan Java servlet, lalu java6.jdk lalu java6.jre bertujuan agar web server tomcat yang nanti nya akan digunakan dapat dijalankan pada sistem operasi ubuntu 9.10. 16. Tomcat Tomcat adalah salah satu web server yang digunakan untuk menjalankan aplikasi yang dibangun dengan menggunakan java. 17. Openlaszlo Openlaszlo sebagai engine yang digunakan untuk menjalankan flash pada web browser. 18. PHP PHP digunakan untuk membuat halaman belakang yang dikhususkan bagi admin aplikasi, juga digunakan untuk mengkoneksikan antara openlaszlo dengan basis data MySql.
47
19. Basis Data MySQL Basis Data MySql digunakan sebagai media penyimpanan data data diri pelanggan yang terdapat didalam server local yang nanti nya akan diolah menjadi informasi yang dibutuhkan baik bagi admin aplikasi. 20. Basis Data Online Basis data online digunakan sebagai media penyimpanan jenis jenis produk yang terdapat dalam server openlaszlo. Semua jenis produk yang ditampilkan diambil menggunakan link yang mengarah ke server openlaszlo. 21. Adobe Flash CS 3 Adalah editor animasi yang digunakan untuk membuat tampilan latar antar muka aplikasi toko online agar menjadi lebih hidup dan interaktif. 22. Aplikasi Toko Online Lapisan ini terdapat aplikasi toko online yang berbasis website namun mempunyai fungsi seperti aplikasi yang berbasis desktop. 3.3 Perancangan Aplikasi Dari hasil analisa penulis membuat aplikasi toko online yang lebih kaya dengan fitur dan lebih interaktif dengan menggunakan openlaszlo sebagai engine
48
utama, PHP, Tomcat web server, basis data MySQL, XML,dan Adobe FlashCS3, Penulis akan membuat permodelan deployment diagram, diagram use case diagram aktifitas dan diagram sequence agar aplikasi ini dapat dipahami dengan mudah. 8.3.1 Deployment Diagram Deployment diagram digunakan untuk menunjukkan susunan fisik dari sebuah sistem dan menunjukan konfigurasi dari setiap proses dan komponen perangkat lunak yang digunakan, dibawah ini adalah gambar deployment diagram yang digunakan dalam penelitian ini.
49
Gambar 3.21 Deployment Diagram Aplikasi Openlaszlo Pada komputer pelanggan terdapat web browser yang digunakan untuk mengakses web server dari komputer pelanggan melalui tcp/ip. Pada web server, terdapat dua antar muka yaitu antar muka frontend dan backend. Lalu untuk media penyimpanan data terdapat dua basis data yang digunakan yaitu basis data online yang digunakan untuk menyimpanan data produk cd, dan juga basis data lokal yang digunakan untuk menyimpan data pembayaran data diri pelanggan dan juga data admin.
3.3.2 Diagram use case Use Case adalah layanan (services) atau fungsi-fungsi yang disediakan oleh sistem untuk pengguna-penggunanya (Henderi et al, 2008). Atau dengan kata lain use case adalah suatu pola atau gambaran yang menunjukan kelakukan atau kebiasaan sistem atas kebutuhan pengguna. Berikut ini adalah gambar diagram use case yang akan digunakan pada aplikasi ini.
50
7. Gambar 3.22 Diagram Use Case Aplikasi Toko Online Penjelasan diagram use case aplikasi memperkaya toko online dengan openlaszlo dapat dilihat sebagai berikut: 9
Nama Use Case
: Masuk Aplikasi
Aktor
: Admin
Deskripsi
: Pada form masuk aplikasi, untuk dapat menggunakan
aplikasi admin diharuskan mengisikan username dan password. 10 Nama Use Case Aktor
: Memilih produk : Pengguna
51
Deskripsi
: `Pengguna yang telah masuk kedalam aplikasi dapat
melakukan proses pemilihan produk, pencarian produk yang diinginkan ,dan penghapusan suatu produk yang akan telah dipilih. 11 Nama Use Case
: Mengelola data
Aktor
: Admin
Deskripsi
: Admin dapat melakukan proses menambah merubah
menghapus suatu data yang ada. 12 Nama Use Case
: Merubah data diri
Aktor
: Pengguna
Deskripsi
: Pengguna juga dapat merubah data diri yang
dimasukan untuk informasi pemesanan. 13 Nama Use Case
: Memasukan dan merubah metode pembayaran
Aktor
: Pengguna
Deskripsi
: Pengguna dapat memasukan dan merubah metode
pembayaran untuk pembayaran produk yang dibeli. 14 Nama Use Case
: Memilih jasa pengiriman barang
Aktor
: Pengguna
Deskripsi
: Pengguna dapat memilih jasa pengiriman barang yang
telah tersedia.
52
3.3.3 Diagram Aktifitas Diagram Aktifitas adalah digram yang menggambarkan sebuah skema aktifitas yang terjadi di dalam penggunaan aplikasi tersebut. 3.3.3.1 Diagram Aktifitas Memilih Produk Pada diagram aktifitas memilih produk pengguna dapat melakukan kegiata pilih dan hapus produk yang sebenarnya kedua aktifitas tersebut terjadi pada satu halaman, Di bawah ini terdapat gambar aktifitas memilih produk.
Gambar 3.23 Diagram Aktifitas memilih Produk
53
Sistem akan menampilkan halaman utama,dan pada saat pengguna memilih memasukan sebuah produk kedalam wish list maka sistem dengan otomatis akan memperbaharui informasi mengenai produk yang telah dipilih dan menampilkan total harga dari produk produk yang telah dipilihnya dan apabila pengguna memilih sebuah produk untuk dimasukan kedalam shopping cart dengan memilih tombol cart maka secara otomatis sistem akan memeperbaharui informasi mengenai produk yang telah dipilih didalam shopping cart juga total harga produk yang telah dipilih juga memperbaharui total harga pembelian tersebut kedalam menu check out. Jika pengguna menghapus salah satu produk dalam maka secara otomatis total harga produk akan kembali diperbaharui untuk kemudian ditampikan manjadi informasi yang telah di olah oleh sistem begitu pula apabila pengguna menghapus produk pada shopping cart maka sistem akan memperbaharui informasi total harga pada shopping cart dan menu check out 3.3.3.2 Diagram Aktifitas Merubah Data Diri Pengguna Pada diagram aktifitas merubah data diri pengguna ini akan dijelaskan segala kegiatan pengguna pada menu shipping address. Dibawah ini adalah gambar diagram aktifitas merubah data diri pengguna.
54
Gambar 3.24 Diagram aktifitas merubah data diri pengguna pada menu shipping address Sistem menampilkan halaman utama aplikasi setelah itu pengguna memilih menu shipping address untuk kemudian pengguna dapat memasukan data diri yang diperlukan. Atau pengguna juga dapat melakukan perubahan data diri yang telah dimasukan tadi. 3.3.3.3 Diagram Aktifitas Merubah Data Payment Method ( Pembayaran ) Pada diagram aktifitas merubah data payment method ( pembayaran ) penulis akan menjelaskan alur dari proses pengguna melakukan aktifitas perubahan data pada menu payment method.
55
Gambar 3.25 Diagram Aktifitas merubah data Payment Method Gambar diatas menjelaskan bahwa setelah sistem menampilkan halaman utama pada aplikasi dan kemudian pengguna memilih menu payment method, maka sistem akan menampilkan sebuah form bagi pengguna untuk dapat memasukan data transaksi pembayaran dan juga perubahan dari data yang dimasukan tersebut jika ada kesalahan setelah pengguna melakukan aktifitas tersebut maka secara otomatis sistem akan memperbaharui data data pengguna. 3.3.3.4 Diagram aktifitas shipping method ( pengiriman barang ) Pada diagram aktifitas shipping method (cara pengiriman barang) akan dijelaskan bagaimana pengguna berinteraksi dengan sistem dalam hal ini melakukan perubahan data pada menu shipping method
56
Gambar 3.26 Diagram aktifitas memilih metode pengiriman barang pada menu shipping method Pada gambar diatas sistem menampilkan halaman utama aplikasi pengguna memilih menu shipping method. Lalu sistem akan menampilkan beberapa pilihan yang dapat dipilih oleh pengguna untuk memilih jasa pengiriman barang yang sesuai dengan kehendak pengguna. 3.3.3.5 Diagram Aktifitas Kelola Aplikasi Diagram Aktifitas kelola aplikasi ini ditujukan untuk administrator atau pengelola dari aplikasi ini untuk memanajemen seluruh elemen dari aplikasi ini seperti basis data pemabayaran ,basis data pengguna, menambah atau menghapus suatu jenis produk. Berikut adalah gambar diagram aktifitas kelola aplikasi.
57
Gambar 3.27 Diagram Aktifitas Kelola Aplikasi Pada saat melakukan login jika admin memasukan username dan password dengan benar maka sistem akan menamplikan halaman utama administrator yang digunakan untuk mengelola aplikasi, maka admin dapat melakukan CRUD(create, read, update, delete)yaitu menambah membaca memperbaharui ataupun menghapus data data yang ada pada basis data.
3.3.4 Diagram Sequence Diagram Sequence adalah diagram yang menggambarkan interaksi antara pengguna dan system. Dari use case yang sudah dijelaskan diatas maka penulis dapat pula menggambarkan diagram sequence yang sesuai melalui seperti berikut ini.
58
3.3.4.1 Diagram Sequence memilih Produk Diagram sequence memilih produk dan hapus produk menggambarkan skenario bagaimana interaksi antara pengguna dan sistem untuk memilih suatu produk dan menghapus suatu produk yang terjadi pada satu halaman tanpa perlu berpindah kehalaman lain.
Gambar 3.28 Diagram Sequence Memilih Produk Langkah pertama jika pengguna memilih suatu produk dimasukan kedalam shopping cart maka sistem akan kembali memperbaharui informasi harga barang dan total harga barang seluruhnya yang terdapat dalam shopping cart, selain itu sistem juga memberikan informasi yang sama di menu check out berapa jumlah dan harga produk yang harus dibayarkan oleh pengguna. Langkah kedua jika pengguna memilih suatu produk untuk dimasukan kedalam wish list maka sistem akan memperbaharui informasi jumlah produk dan total harga yang dipilih oleh pengguna pada menu wish list.
59
3.3.4.2 Diagram Sequence Merubah Data Diri Pengguna Diagram sequence merubah data diri pengguna menggambarkan bagaimana pengguna berinteraksi dengan sistem dalam hal ini untuk dapat merubah data diri pengguna itu sendiri.
Gambar 3.29 Diagram Sequence merubah data diri pengguna pada shipping address Pada gambar diatas hal yang dilakukan pengguna pertama kali adalah membuka halaman utama aplikasi, setelah sistem menampilkan halaman utama lalu pengguna membuka halaman shipping address dan kemudian dapat melakukan perubahan data, baik itu menambah data baru merubah data yang telah dimasukan atau bahkan menghapus data setelah itu maka sistem akan memperbaharui data data pengguna tersebut.
60
3.3.4.3 Diagram Sequence merubah data pembayaran Diagram sequence merubah data pembayaran, menggambarkan bagaimana pengguna berinteraksi dengan sistem untuk dapat merubah data pembayaran pada menu payment method.
Gambar 3.30 Diagram Sequence merubah data pembayaran Setelah pengguna mengakses halaman utama aplikasi lalu sistem menampilkannya, langkah selanjutnya pengguna memilih menu payment method dan kemudian pengguna dapat melakukan perubahanan data pembayaran, baik itu memasukan data baru atau pun merubah data yang telah dimasukan sebelumnya. Dan kemudian sistem secara otomatis memperbaharui data. 3.3.4.4 Diagram Sequence Memilih Jenis Pengiriman Barang Diagram sequence memilih jenis pengiriman barang, menggambarkan bagaimana pengguna berinteraksi dengan sistem untuk dapat memilih data pengiriman barang pada menu shipping method.
61
Gambar 3.31 Diagram sequence merubah data pengiriman barang Setelah
pengguna
membuka
halaman
utama
aplikasi
lalu
sistem
menampilkannya, langkah selanjutnya pengguna memilih menu shipping method dan kemudian sistem menampilkan beberapa pilihan jasa pengiriman barang, dan pengguna dapat memilih salah satu diantaranya.
3.3.4.5 Diagram Sequence Masuk Aplikasi Admin Diagram sequence masuk aplikasi menggambarkan skenario yang dilakukan antara pengguna dan sistem pada saat pengguna ingin masuk kedalam aplikasi.
62
Gambar 3.32 Diagram Seequence Masuk aplikasi admin . Langkah pertama admin memilih menu login lalu sistem akan menampilkan halaman login yang berisi halaman untuk memasukan username dan password, untuk masuk kedalam aplikasi admin harus mengisikan username dan password jika data password yang dimasukan valid maka sistem akan menapilkan halaman kelola aplikasi, dan admin dapat menggunakan melakukan pengelolaan data jika salah maka sistem akan menampilkan kembali form login.
3.3.4.5 Diagram Sequence Kelola Aplikasi Diagram sequence mengelola aplikasi menggambarkan skenario yang dilakukan antara admin dan sistem pada saat admin ingin mengelola seluruh isi data pengguna dalam aplikasi ini .
63
Gambar 3.33 Diagram Sequence Kelola Aplikasi Pada diagram sequence kelola aplikasi admin dapat mengelola semua isi data pengguna yang tersimpan dalam basis data. Pada gambar diatas jika admin melakukan perubahan pada form data user maka sistem dengan otomatis akan memperbaharui isi basis data pada data user. Demikian pula jika admin melakukan perubahan pada form data payment maka sistem juga akan memeprbaharui isi basis data pada data payment method.
3.4 Perancangan Basis Data Pada perancangan basis data penulis akan menjelaskan beberapa tabel yang digunakan dalam aplikasi ini. Pada aplikasi ini terdapat 3 tabel yang digunakan yaitu tabel user, tabel cash dan tabel produk. 2 basis data terdapat pada basis data lokal dan satu terdapat pada basis data online
64
3.4.1 Perancangan diagram ERD Entity Relationship Diagram adalah model data yang menggunakan beberapa notasi untuk menggambarkan data sebagai pengganti istilah entitas dan relasi nya. Gambar berikut menggambarkan ERD yang digunakan dalam aplikasi ini.
Gambar 3.34 Perancangan Diagram Entitas Basis Data Lokal
Gambar 3.35 Perancangan Diagram Entitas Basis Data Online Pada gambar diatas terdapat 3 buah tabel yaitu tabel user dan tabel cash yang terdapat pada jaringan lokal dan 1 buah tabel produk pada basis data online pada openlaszlo. Deskripsi gambar diatas dapat dijelaskan seperti berikut, satu pengguna
65
dapat membeli banyak barang dan setiap barang yang dibeli mempunyai 1 transaksi pembayaran. 3.5 Perancangan Antar Muka Pada bagian ini penulis akan menggambarkan rancangan antar muka dimana rancangan antar muka ini dibuat agar pengguna dapat dengan mudah mengerti cara menggunakan aplikasi ini atau dengan kata lain rancangan antar muka ini dibuat user friendly bagi pengguna. 3.5.1 Desain Antar Muka Halaman Utama Berikut adalah gambar tampilan awal antar muka dari aplikasi toko online. Rancangan halaman awal antar muka dibuat menggunakan Openlaszlo sehingga lebih interaktif. Halaman utama terdiri dari logo, isi produk , shopping cart, wish list, dan menu check out.
Gambar 3.36 Rancangan Antar Muka Halaman Utama 3.5.2 Desain Antar Muka Shopping Cart Pengguna yang telah melakukan login maka ia akan dapat memilih produk dari aplikasi toko online, jika pengguna memilih tombol cart dibawah gambar salah
66
satu produk berarti pengguna ingin membeli produk tersebut, informasi produk yang dipilih akan otomatis masuk kedalam halaman shopping cart (keranjang belanja). Berikut adalah gambar rancangan menu shopping cart.
Gambar 3.37 Rancangan Antar Muka Menu Shopping Cart
3.5.3 Rancangan Antar Muka Menu Wish List Jika pengguna memilih tombol list dibawah gambar salah satu produk berarti pengguna ingin menginginkan produk tersebut untuk dibeli namun pengguna belum pasti membeli produk tersebut, dan informasi produk yang dipilih akan otomatis masuk kedalam menu wish list berikut adalah gambar rancangan antar muka daftar keinginan.
67
Gambar 3.38 Rancangan Antar Muka Menu Wish List 3.5.4 Rancangan Antar Muka Menu Check out Halaman check out adalah halaman yang akan ditemui pengguna ketika pengguna yang telah selesai memilih dan membeli produk maka pengguna di harapkan mengisi data data diri pembeli cara pengiriman barang dan cara pembayaran serta pelunasan barang.
Gambar 3.39 Rancangan Antar Muka Menu Check Out 3.5.5 Rancangan Antar Muka Halaman Kelola Aplikasi
68
Pada rancangan antar muka halaman kelola aplikasi ini digunakan admin sebagai sarana untuk mengelola atau memanajemen setiap data data yang tersimpan didalam basis data. Pada rancangan antar muka halaman kelola aplikasi terdapat beberapa menu yang tersedia bagi admin diantaranya yaitu menu Address,dan menu Payment 3.5.5.1 Rancangan Antar Muka Backend Menu Address Rancangan ini adalah halaman dimana admin dapat merubah data data pengguna seperti fullname, address, city. state dan zip
Gambar 3.40 Rancangan Antar Muka Kelola Aplikasi Menu Data User Pada antar muka kelola aplikasi menu data user, admin dapat melakukan penambahan, melakukan perubahan tentang informasi data pengguna atau melakukan penghapusan terhadap suatu data pengguna. 3.5.5.2 Rancangan Antar Muka Backend Menu Payment Rancangan ini adalah halaman dimana admin dapat melihat merubah serta menghapus data pembayaran barang dari basis data.
69
Gambar 3.41 Rancangan Antar Muka Kelola Aplikasi Menu Payment Method (Cara Pembayaran) Pada antar muka kelola aplikasi menu Payment method, admin dapat melakukan penambahan, perubahan juga melakukan penghapusan terhadap informasi suatu data dari pengguna. Dalam hal ini data cara pembayaran (payment method)
