168
BAB 4
IMPLEMENTASI DAN EVALUASI
4.1 Spesifikasi SistemSpesifikasi komputer yang dibutuhkan untuk mendukung aplikasi ini dibagi menjadi 2 (dua), yaitu spesifikasi perangkat keras dan spesifikasi perangkat lunak.
4.1.1 Spesifikasi Perangkat Keras
Spesifikasi perangkat keras yang digunakan adalah PC atau notebook yang menjadi local server dengan spesifikasi :
a. Intel Core2Duo T4200 2.0 GHz 1M Cache.
b. 1 Gb RAM.
c. Space minimal 25Mb untuk pemasangan localhost dan aplikasi.
4.1.2 Spesifikasi Perangkat Lunak
Spesifikasi perangkat lunak yang digunakan meliputi Sistem Operasi Windows 7 Professional 64-Bit, XAMPP local web server, dan Internet browser.
169
4.2 Panduan Pengoperasian
Aplikasi Try On terpasang pada sebuah website sehingga pengguna harus menjalankannya melalui web browser. Pengguna dapat menggunakan web browser yang telah tersedia seperti Mozilla Firefox, Goggle Chrome, Internet Explorer, Opera, Safari, dan lain sebagainya. Demi kelancaran pemakaian aplikasi dan fitur-fitur pada website, sebaiknya pengguna menggunakan web browser versi terbaru. Hal ini dikarenakan aplikasi dan website yang dibuat ini menggunakan teknologi terbaru seperti HTML5, CSS3, dan jQuery.
Setelah membuka web browser, pengguna dapat memasukkan alamat URL untuk menuju website. Dikarenakan website ini belum memiliki domain dan hosting, maka website masih berjalan offline menggunakan localhost. Setelah local server dinyalakan melalui aplikasi XAMPP, masukkan URL localhost/glassify/home pada web browser.
Untuk menjalankan aplikasi Try On, pilih salah satu produk pada halaman katalog atau melalui halaman pencarian. Setelah halaman detail produk terbuka, klik pada tombol Try On untuk membuka pop up aplikasi Try On.
4.3 Penjelasan Antarmuka Aplikasi
Aplikasi Try On beserta website memiliki beberapa antarmuka seperti website pada umumnya. Antarmuka dibagi ke dalam 2 (dua) bagian yaitu antarmuka online store, dan antarmuka menu admin. Antarmuka online store dapat diakses oleh
170 siapapun sedangkan antarmuka menu admin hanya bisa diakses oleh pihak tertentu yang memiliki akses yaitu admin. Berikut adalah pemaparan antarmuka dari halaman aplikasi dan website dengan gambar dan penjelasannya.
171 Halaman ini merupakan landing page dari website atau yang biasa disebut dengan Home. Halaman ini berisikan judul website, menu navigasi, slideshow produk, dan daftar produk-produk unggulan.
Gambar 4.2 Halaman katalog produk
Halaman ini menampilkan produk-produk yang dijual di toko online ini. Untuk melihat detail dari produk, pengunjung dapat meng-klik salah satu gambar produk. Pengunjung dapat melakukan pencarian untuk produk yang diinginkan, serta melakukan pengurutan produk berdasarkan beberapa faktor seperti kategori, gender, merk, jenis frame, dan harga.
172
Gambar 4.3 Halaman pencarian produk tidak ditemukan
Halaman ini menampilkan hasil pencarian apabila tidak ditemukan. Sistem akan memberitahukan bahwa kata kunci pada pencarian tidak ada yang cocok dengan nama produk.
173
Gambar 4.4 Halaman Product Detail
Halaman ini menampilkan seluruh informasi dari satu produk. Informasi produk berisi gambar-gambar, deskripsi, merk, harga, dan dimensi kacamata. Pengunjung dapat memilih untuk memasukkan produk ke cart atau menjalankan aplikasi Try On.
174
Gambar 4.5 Halaman Fill Prescription
Halaman ini muncul setelah pengunjung menekan tombol add to cart. Halaman ini hanya muncul pada produk-produk tertentu yang memang dirancang untuk pengguna yang memiliki resep dari dokter. Pengunjung dapat mengisi data-data yang disediakan berdasarkan resep yang dimilikinya.
175
Gambar 4.6 Halaman My Cart
Halaman ini menampilkan keranjang belanja dari pengunjung. Halaman ini berisi tabel produk yang telah dimasukkan ke dalam cart sebelumnya. Untuk produk yang memiliki prescription, terdapat informasi tambahan berdasarkan data yang diperoleh dari halaman fill prescription. Pengunjung dapat mengatur kuantitas dari produk, dan juga menghapus produk yang sudah ada di dalam cart. Pengunjung yang telah selesai berbelanja dan ingin melakukan pembayaran, dapat menekan tombol checkout.
176
Gambar 4.7 Halaman Checkout Customer
Halaman ini gunanya sama dengan gambar sebelumnya, hanya saja halaman ini khusus bagi pengunjung yang sudah melakukan login atau telah menjadi pelanggan terdaftar. Pengunjung hanya diminta memastikan bahwa informasi yang terdapat pada halaman ini adalah benar dan kemudian melanjutkan proses pembelian dengan menekan tombol To Payout.
177
Gambar 4.8 Halaman Finish Order
Halaman ini akan memberitahukan pembeli bahwa transaksi telah selesai dilaksanakan. Pembeli dapat mengetahui nomor transaksi, total barang, total belanjaan, dan dapat mencetak printout yang telah disediakan oleh website sebagai bukti transaksi.
178
Gambar 4.9 Halaman Printout
179
Gambar 4.10 Halaman About
Halaman ini menjelaskan mengenai identitas website dan tujuan dari website tersebut. Dalam penyusunan skripsi ini, halaman tersebut masih berisi tulisan dummy.
180
Gambar 4.11 Halaman Contact
Halaman contact berisikan informasi mengenai alamat dari toko online. Alamat yang disediakan berupa alamat fisik dan alamat dunia maya (email). Pada halaman ini pengunjung dapat mengirimkan pesan kepada admin.
181
Gambar 4.12 Pesan error saat mengirim pesan di halaman Contact
Gambar di atas menunjukkan keadaan sistem memberitahukan adanya error pada saat akan mengirim pesan. Error dapat terjadi apabila ada kotak input yang belum terisi dan adanya kesalahan masukan.
182
Gambar 4.13 Halaman Login
Halaman Login adalah akses untuk memasuki sesi login baik itu pengunjung ataupun admin. Pengunjung atau admin diminta untuk memasukan email dan password sebagai verifikasi login. Pada halaman ini pengunjung juga bisa melakukan sign up apabila belum menjadi pengunjung terdaftar. Pengunjung yang ingin melakukan sign up diminta untuk memasukan email, password, dan confirm password.
183
Gambar 4.14 Pesan error pada saat melakukan login
Gambar di atas menjelaskan keadaan saat sistem memberitahukan adanya kesalahan pada masukan. Kesalahan dapat terjadi apabila informasi yang dimasukkan tidak sesuai dengan apa yang ada pada database sehingga sistem akan memberitahukan bahwa pengunjung belum terdaftar atau email atau password yang dimasukan salah.
184
Gambar 4.15 Halaman Sign Up pelanggan.
Halaman ini adalah halaman yang sama dengan halaman Login, tetapi menu login dan sign up dipisahkan dengan sistem tabs. Hal ini dapat menghemat tempat dan tidak memusingkan pengunjung. Input yang diminta adalah email, password, dan confirm password.
185
Gambar 4.16 Pesan error pada saat sign up.
Gambar di atas menjelaskan keadaan saat sistem memberitahukan adanya kesalahan pada masukan. Kesalahan dapat terjadi apabila ada kesalahan pada masukan dan nilai dari password tidak sama dengan nilai confirm password.
186 Halaman ini menampilkan informasi mengenai pengunjung. Hanya pengunjung yang telah melakukan login yang dapat mengakses halaman ini. Pada halaman ini terdapat 3 (tiga) tombol yaitu edit profile, my transaction, dan logout. Edit profile mengarahkan pengunjung untuk melakukan perubahan terhadap informasi pengunjung. My transaction mengarahkan pengunjung ke halaman yang berisikan informasi transaksi dan status pengiriman terdahulu. Logout berguna untuk mengakhiri sesi login dari pengunjung.
Gambar 4.18 Halaman Edit Profile
Halaman ini bertujuan untuk melakukan perubahan terhadap informasi pengunjung. Informasi yang tersedia yaitu nama depan, nama belakang, tanggal lahir, jenis kelamin, nomor ponsel, nomor telepon, alamat, kode pos, dan kota.
187 Setelah selesai melakukan perubahan, klik tombol update untuk meminta sistem mengubah informasi pengunjung.
Gambar 4.19 Pesan error pada saat mengubah profil pengunjung
Gambar di atas menjelaskan keadaan dimana sistem memberitahukan adanya kesalahan pada saat pengunjung melakukan perubahan profil. Kesalahan dapat terjadi apabila ada kotak input yang kosong dan adanya kesalahan masukan.
188
Gambar 4.20 Halaman My Transaction
Halaman ini menampilkan tabel yang berisi informasi transaksi-transaksi yang pernah dilakukan oleh pengunjung sebelumnya. Informasi yang ditampilkan berupa transaction ID, tanggal transaksi, status transaksi dan status pengiriman.
189
Gambar 4.21 Halaman Utama Try On
Halaman ini menampilkan bagian depan dari aplikasi Try On. Tampilan aplikasi berbentuk pop up yang muncul pada browser. Pengguna dapat memilih 3 (tiga) mode yang sudah disediakan yaitu Webcam, Upload, dan Our Models.
190
Gambar 4.22 Halaman Try On webcam mode
Halaman ini menampilkan layar webcam menggunakan javascript yang digunakan untuk mengambil foto pengguna. Setelah mendapat foto yang sesuai, pengguna dapat melanjutkan proses simulasi dengan menekan tombol Upload.
191
Gambar 4.23 Halaman hasil Try On webcam mode
Halaman ini menampilkan hasil dari simulasi Try On menggunakan webcam mode. Gambar yang telah diambil sebelumnya menggunakan webcam akan ditampilkan sebagai hasil. Pengguna dapat kembali mengambil foto, memilih mode lainnya, atau keluar dari aplikasi.
192
Gambar 4.24 Halaman Try On real-time webcam mode
Halaman ini menampilkan layar webcam menggunakan javascript yang digunakan diintegrasikan oleh kacamata. Kacamata tersebut akan mengikuti muka pengguna pada layar webcam. Tidak perlu melakukan capture dan upload pada halaman ini karena simulasi berjalan secara real-time.
193
Gambar 4.25 Halaman Try On upload mode
Halaman ini plugin drag and drop untuk mengunggah foto. Jika browser tidak mendukung fitur tersebut, pengguna juga dapat mengunggah foto dengan cara manual yaitu menekan tombol Choose File.
194
Gambar 4.26 Halaman hasil Try On upload mode
Halaman ini menampilkan hasil dari simulasi Try On menggunakan upload mode. Gambar yang telah diunggah sebelumnya ditampilkan beserta kacamata sebagai gambar hasil. Pengguna dapat kembali mengunggah foto, memilih mode lainnya, atau keluar dari aplikasi.
195
Gambar 4.27 Halaman Try On our model
Halaman ini menampilkan beberapa foto yang telah disediakan untuk disimulasikan. Foto-foto tersebut dipilih bedasarkan struktur dan bentuk wajah seseorang. Foto yang pertama menunjukan bentuk wajah oval. Foto yang berada di sebelah kanannya menunjukan bentuk wajah bulat. Foto ketiga yang berada pada kiri bawah menunjukan bentuk wajah persegi. Foto yang terakhir menunjukan bentuk wajah segitiga. Gambar yang dipilih akan diproses dan hasilnya akan ditampilkan pada halaman hasil.
196
Gambar 4.28 Halaman Try On our model
Halaman ini menampilkan hasil dari simulasi Try On menggunakan our models mode. Gambar yang telah dipilih sebelumnya ditampilkan beserta kacamata sebagai gambar hasil. Pengguna dapat kembali memilih foto lainnya, memilih mode lainnya, atau keluar dari aplikasi.
197
Gambar 4.29 Halaman utama Admin Menu.
Halaman ini adalah halaman utama dari Admin Menu. Halaman ini dapat diakses setelah admin melakukan login. Halaman ini menampilkan informasi umum dari toko online termasuk jumlah produk, jumlah pengunjung terdaftar, jumlah order, total penjualan dan tabel yang berisi daftar transaksi terbaru. Pada setiap halaman Admin menu terdapat menu navigasi yang terdiri dari menu-menu aktivitas dari admin.
198
Gambar 4.30 Halaman Add Product
Halaman ini akan menampilkan form pengisian informasi produk baru yang akan dimasukan ke dalam database. Informasi yang diminta terbagi menjadi 3(tiga) bagian yaitu detail produk, gambar sebanyak 5(lima) buah, dan dimensi produk.
199
Gambar 4.31 Pesan error pada halaman Add Product
Gambar di atas adalah keadaan pada saat tampilnya pesan error ketika admin melakukan kesalahan dalam memasukan informasi dari produk baru. Kesalahan
200 dapat terjadi apabila ada kotak input yang masih kosong atau kesalahan dari data yang di input.
Gambar 4.32 Pesan sukses setelah memasukan produk baru.
Pesan sukses akan muncul ketika admin berhasil memasukan produk baru. Produk baru tersebut dapat terlihat pada products list.
201
Gambar 4.33 Halaman View Product.
Halaman ini menampilkan produk-produk yang terdapat pada database. Pada halaman ini admin dapat melakukan pencarian produk tertentu, memasukan produk baru, melihat detil produk, dan menghapus produk yang ada.
202
Gambar 4.34 Halaman Edit Product.
Halaman ini menampilkan formulir yang berisi data dari suatu produk. Admin dapat melakukan perubahan data dan mengganti gambar yang sudah ada. Setelah selesai, admin diminta untuk menekan tombol Update.
203
Gambar 4.35 Pesan error pada halaman Edit Product.
Pesan error akan muncul apabila terjadi kesalahan pada saat admin melakukan perubahan data produk. Kesalahan dapat terjadi apabila ada kotak input yang masih kosong atau kesalahan pada input.
204
Gambar 4.36 Pesan sukses setelah melakukan perubahan produk.
Pesan sukses akan muncul ketika admin berhasil melakukan perubahan terhadap detil produk.
205
Gambar 4.37 Search Product.
Gambar di atas menjelaskan aktivitas pencarian pada halaman view product. Admin memasukan nilai yang berupa nama produk ke dalam kotak pencarian dan setelah itu menekan tombol enter untuk memulai pencarian.
206
Gambar 4.38 Search show no result.
Gambar di atas adalah keadaan ketika pencarian tidak menemukan hasil yang sesuai. Sistem tidak akan menampilkan tabel hasil pencarian dan memberitahukan admin bahwa hasil pencarian tidak ada.
207
Gambar 4.39 Pesan sukses saat menghapus produk.
Pesan sukses akan muncul setelah admin menekan tombol delete pada kanan tabel. Tombol delete berfungsi untuk menghapus seluruh data mengenai sebuah produk.
208
Gambar 4.40 Pesan error saat melakukan add category.
Pesan error akan muncul ketika terdapat kesalahan pada input kategori baru. Kesalahan dapat terjadi apabila ada kotak input yang kosong atau terdapat kesalahan pada input data.
209
Gambar 4.41 Pesan sukses setelah melakukan add category.
Ketika kategori berhasil dibuat, pesan sukses akan muncul dan kategori yang baru tersebut akan segera masuk ke category list.
210 Halaman ini menampilkan daftar kategori dari produk-produk yang ada pada toko online. Admin dapat memasukan kategori baru, melakukan pencarian terhadap kategori tertentu, dan menghapus kategori.
Gambar 4.43 Alert pop up pada saat menghapus kategori.
Pada saat admin menekan tombol delete pada salah satu kategori, maka pop up akan muncul untuk meyakinkan admin dalam menghapus kategori.
211
Gambar 4.44 Pesan sukses setelah melakukan delete category.
Ketika kategori berhasil dihapus, pesan sukses akan muncul dan kategori yang telah dihapus tidak akan tampil dalam category list.
212
Gambar 4.45 Tahap pertama saat membuat transaksi baru.
Halaman ini adalah langkah pertama ketika admin ingin membuat transaksi baru. Tahap pertama adalah memasukan data pembeli. Setelah selesai, admin diminta untuk menekan tombol Next Step.
213
Gambar 4.46 Pesan error pada tahap pertama pembuatan transaksi baru.
Pesan kesalahan akan tampil pada formulir data pelanggan ketika admin melakukan kesalahan dalam melakukan input data. Kesalahan dapat terjadi apabila ada kotak input yang masih kosong dan terjadi kesalahan pada input data.
214
Gambar 4.47 Tampilan setelah tahap satu selesai.
Gambar di atas menunjukkan tampilan setelah tahap pertama berhasil. Data pelanggan akan di tampilkan tetapi belum ada produk yang dipilih. Sistem memberitahukan kepada admin bahwa cart masih kosong. Untuk memasukkan produk yang ingin dibeli, tekan tombol Add Item.
215
Gambar 4.48 Tampilan pemilihan produk yang ingin dibeli.
Admin dapat memilih produk yang diinginkan untuk dimasukkan ke dalam cart. Tekan tombol Add to Cart untuk memasukkan produk ke dalam cart.
216
Gambar 4.49 Halaman Fill Prescription.
Ketika admin menambahkan produk ke dalam cart transaksi, halaman ini akan muncul dan meminta admin memasukkan informasi preskripsi dari kacamata. Hanya kacamata jenis kacamata preskripsi yang memiliki informasi seperti ini. Setelah admin mengisi formulirnya, admin diminta menekan tombol Add to Cart.
217
Gambar 4.50 Pesan sukses setelah menambahkan produk.
Ketika sebuah produk berhasil ditambahkan, pesan sukses akan muncul. Admin dapat memilih kembali produk yang ingin ditambahkan atau kembali ke cart untuk menyelesaikan proses transaksi.
218
Gambar 4.51 Tampilan transaksi setelah ditambahkan produk .
Saat kembali ke cart, produk baru telah ditambahkan ke dalam tabel produk. Admin dapat mengatur kuantitas dari produk, menghapus produk, atau menyelesaikan proses transaksi dengan menekan tombol Finish.
219
Gambar 4.52 Pesan transaksi berhasil dibuat.
Ketika pembuatan transaksi telah mencapai tahap akhir, sistem akan menampilkan pesan bahwa transaksi berhasil dibuat dan sistem akan memberitahukan nomor transaksi, total belanjaan, ongkos pengiriman, dan total harga keseluruhan. Admin dapat mencetak informasi transaksi ini atau menambahkan transaksi baru lainnya.
220
Gambar 4.53 Halaman View Orders.
Halaman ini menampilkan tabel berisi daftar transaksi yang pernah dilakukan baik oleh admin maupun oleh pengunjung. Pada halaman ini admin dapat menambahkan transaksi baru, mencari transaksi tertentu, dan melihat detil transaksi.
221
Gambar 4.54 Halaman Order Details.
Halaman ini berisikan informasi detil dari sebuah transaksi. Admin dapat melakukan perubahan status dari pembayaran transaksi apakah itu Failed, On-hold, atau Success. Admin juga dapet melakukan perubahan status pembayaran dari packed atau shipped. Setelah selesai melakukan perubahan, admin diminta untuk menekan tombol Update.
222
Gambar 4.55 Pesan sukses setelah melakukan perubahan status transaksi.
Ketika status transaksi berhasil diubah, sistem akan menampilkan pesan sukses dan status transaksi serta status pengiriman telah berubah.
223
Gambar 4.56 Halaman Add Customer.
Halaman ini menampilkan formulir untuk mendaftarkan pengunjung baru. Data yang diminta sama dengan halaman edit profile pada halaman pengunjung. Setelah selesai memasukkan data, admin diminta untuk menekan tombol Submit untuk menambahkan pelanggan baru.
224
Gambar 4.57 Pesan error pada saat menambahkan pelanggan.
Pesan error akan muncul saat terjadi kesalahan dalam penambahan pelanggan baru. Kesalahan dapat terjadi apabila ada kotak input yang kosong, atau kesalahan pada input.
225
Gambar 4.58 Pesan sukses setelah menambahkan pelanggan.
Ketika pelanggan baru berhasil dibuat, akan muncul pemberitahuan bahwa pelanggan telah sukses ditambahkan.
226
Gambar 4.59 Halaman View Customer.
Halaman ini menampilkan tabel berisi daftar pelanggan terdaftar di toko online. Pada halaman ini admin dapat menuju halaman penambahan pelanggan baru, pencarian pelanggan tertentu, melihat dan mengubah detil pelanggan, dan menghapus pelanggan terdafar.
227
Gambar 4.60 Halaman Edit Customer.
Halaman ini menampilkan informasi detil pelanggan, semua data ditampilkan dalam kotak input yang berarti admin dapat melakukan perubahan terhadap data-data tersebut. Setelah selesai melakukan perubahan, admin diminta untuk menekan tombol Submit.
228
Gambar 4.61 Pesan error ketika melakukan perubahan data pelanggan.
Pesan kesalahan akan muncul ketika terjadi kesalahan pada saat mengubah data pelanggan. Kesalahan dapat terjadi apabila terdapat kotak input yang kosong atau kesalahan pada input.
229
Gambar 4.62 Pesan sukses setelah melakukan perubahan data pelanggan.
Pada saat admin berhasil merubah informasi pelanggan, akan muncul pesan sukses.
230
Gambar 4.63 Halaman hasil pencarian pelanggan.
Tabel hasil pencarian akan muncul ketika admin melakukan pencarian pelanggan dengan kata kunci tertentu.
231 Pesan sukses ini akan muncul ketika admin menghapus pelanggan. Pelanggan yang sudah dihapus akan hilang dari customer list.
Gambar 4.65 Halaman View Confirmation.
Halaman ini berisi daftar konfirmasi yang masuk. Konfirmasi adalah verifikasi yang dilakukan pelanggan setelah pelanggan melakukan pembayaran atas transaksi yang telah dilakukan.
232
Gambar 4.66 Pop up Comparing Confirmation
Pop up ini tampil ketika admin menekan tombol Check pada halaman view Confirmation. Pop up berisi perbandingan ID transaksi dan total harga antara konfirmasi yang masuk dengan transaksi yang ada. Perbandingan ini berfungsi untuk mengetahui apakah konfirmasi yang masuk itu valid atau tidak.
233
Gambar 4.67 Pesan sukses ketika menambahkan bank baru.
Pesan sukses ini akan muncul ketika admin berhasil menambahkan data bank baru. Bank yang baru dibuat akan muncul dalam tabel.
234
Gambar 4.68 Pesan error saat menambahkan bank.
Pesan kesalahan akan muncul saat ada kesalahan pada input data bank. Kesalahan terjadi apabila terdapat kotak input yang masih kosong atau kesalahan input.
235
Gambar 4.69 Halaman View Payment
Halaman ini berisikan info metode pembayaran. Pada aplikasi versi ini, metode pembayaran masih melalui bank saja. Admin dapat menambahkan bank baru, atau menghapus bank yang sudah ada.
236
Gambar 4.70 Pesan sukses ketika admin menghapus bank.
Pesan sukses ini akan muncul ketika admin menghapus bank. Bank yang sudah dihapus akan hilang dari payment list.
237
Gambar 4.71 Halaman Shipping Fee.
Halaman ini menampilkan tabel daftar kota tujuan beserta biaya pengirimannya. Admin dapat menambahkan kota baru, mencari kota tertentu, atau menghapus kota yang sudah ada.
238
Gambar 4.72 Pesan sukses setelah menambahkan kota.
Pesan sukses ini akan muncul setelah admin berhasil menambahkan kota tujuan baru. Kota tujuan baru akan muncul pada daftar kota tujuan.
239
Gambar 4.73 Pesan error ketika menambahkan kota tujuan.
Pesan error akan tampil ketika terjadi kesalahan pada input data kota tujuan. Kesalahan terjadi apabila terdapat kotak input yang kosong atau kesalahan pada input.
240
Gambar 4.74 Tampilan hasil pencarian kota tidak ditemukan.
Halaman ini akan muncul ketika kata kunci pencarian yang dimasukkan tidak ditemukan oleh sistem.
241
Gambar 4.75 Pesan sukses ketika admin menghapus kota tujuan.
Pesan sukses ini akan muncul ketika admin menghapus kota tujuan. Kota tujuan yang sudah dihapus akan hilang dari shipping list.
242
Gambar 4.76 Halaman Message.
Halaman ini menampilkan daftar pesan yang masuk. Pada halaman ini admin dapat juga menulis pesan. Selain itu admin juga dapat menghapus pesan yang ada.
243
Gambar 4.77 Pesan sukses setelah admin mengirim pesan.
Pesan sukses ini akan muncul ketika admin berhasil mengirim pesan dari halaman view message.
244
Gambar 4.78 Pesan sukses ketika admin menghapus pesan.
Pesan sukses ini akan muncul ketika admin menghapus pesan. Pesan yang sudah dihapus akan hilang dari message list.
4.4 Evaluasi Sistem
Evaluasi dilakukan untuk mengetahui sejauh mana performa dan kemampuan dari aplikasi yang dibuat. Evaluasi memudahkan pengembangan dan pembaruan aplikasi pada masa yang akan datang. Evaluasi yang digunakan meliputi evaluasi berdasarkan performance, dan berdasarkan prinsip delapan aturan emas.
245
4.4.1 Evaluasi Berdasarkan Performance
Evaluasi berdasarkan performance adalah evaluasi sebuah aplikasi berdasarkan penulisan performa aplikasi. Penulisan kode yang efektif, efisien, tidak memakan banyak memori, dan tidak menghabiskan banyak bandwidth (bagi aplikasi website) dapat membuat aplikasi bekerja lebih cepat juga menghindari crash yang tidak diinginkan. Evaluasi performance pada skripsi ini menggunakan add-on application buatan Yahoo! Bernama YSlow. Skripsi ini dievaluasi dengan menggunakan YSlow karena aplikasi yang dibuat adalah web-based sehingga dibutuhkan tester khusus untuk website. Berikut adalah screenshot yang diperoleh pada saat evaluasi.
246
Gambar 4.80 Statistik hasil evaluasi performance menggunakan YSlow.
Gambar 4.81 Evaluasi komponen dan total ukuran website mengunakan YSlow.
YSlow mengevaluasi performa sebuah website berdasarkan 23 (dua puluh tiga) poin penilaian yang telah ditentukan oleh pihak Yahoo!. Poin-poin tersebut adalah:
247 1. Make fewer HTTP requests : Jumlah permintaan untuk membuka website
harus dikurangi supaya halaman website lebih cepat dibuka.
2. Use a Content Delivery Network (CDN) : Hal ini berhubungan dengan letak geografis pengguna dengan server. Semakin dekat pengguna, semakin cepat untuk membuka website. Oleh karena itu, diperlukan penggunaan dari CDN ini.
3. Avoid empty src or href : Hindari kekosongan pada segala sesuatu yang berkaitan dengan anchor link dan pengambilan image. Hal ini akan berdampak pada sever yang akan membuat objek yang tidak akan pernah terlihat. Dampaka terburuknya adalah merusak server dengan mengirimkan unexpected traffic dalam jumlah besar.
4. Add expires headers : Dengan menggunakan expires headers, komponen seperti scripts, stylesheets, image, dan flash menjadi cacheable, yang mana dapat menghindari permintaan HTTP yang tidak diperlukan pada halaman website.
5. Compress components with gzip : Kompresi mengurangi waktu respon dengan mengurangi ukuran respon HTTP. Dengan menggunakan gzip, kompresi dapat dilakukan dengan ukuran kompresi mencapai lebih dari 70%.
6. Put CSS at top : Meletakan tag stylesheet pada elemen head membantu halaman tampil lebih cepat.
248 7. Put Javascript at bottom : Javascript menghentikan unduh paralel. Jika javascript diletakkan pada bagian atas halaman, maka pada saat javascript diunduh, browser tidak akan memulai unduhan lainnya sehingga halaman website tidak akan terbuka sampai javascript selesai diunduh.
8. Avoid CSS expressions : CSS expressions mengalami evaluasi berulang kali pada beberapa keadaan. Evaluasi berulang ini akan menurunkan pengalaman pengguna.
9. Make Javacript and CSS external : penggunaan javascript dan CSS dalam jumlah yang besar tentu harus dipisahkan dari halaman web. Apabila semua script itu terdapat pada halaman yang sama maka proses membuka halaman akan memakan waktu yang lama.
10.Reduce DNS lookups : DNS memakan waktu sekitar 20 sampai 120 ms untuk mencari IP address bagi sebuah hostname. Browser tidak bisa mengunduh apapun dari host sampai proses lookup selesai.
11.Minify Javascript and CSS : Minifikasi berarti mengecilkan ukuran file CSS dan javascript. Pengecilan ini dapat mengurangi waktu yang diperlukan untuk membuka halaman website. Pengurangan ukuran file dapat dilakukan dengan cara menghilangkan white space pada code dan menghilangkan komen.
12.Avoid URL redirects : URL redirects memberitahukan browser untuk pergi ke lokasi lainnya. Memasukan redirect antara pengguna dan
249 dokumen HTML akhir akan menghambat seluruh halaman karena tidak ada komponen dari halaman tersebut yang bisa dibuka sampai dokumen HTML tiba.
13.Remove duplicate Javascript and CSS : Hilangkan scripts yang serupa karena suatu redundansi akan menambah lama waktu yang diperlukan untuk membuka halaman website.
14.Configure entity tags : Entity tags yang bersifat unik berfungsi sebagai penanda apakah komponen yang ada pada cache browser cocok dengan yang ada pada server asal.
15.Make AJAX cacheable : Buat segala halaman yang mengandung fungsi AJAX menjadi cacheable. Hal ini adalah cara terbaik untuk optimisasi penggunaan AJAX.
16.Use GET for AJAX requests : menggunakan GET lebih baik daripada menggunakan POST karena GET mengirim headers dan data bersamaan.
17.Reduce the number of DOM elements : Kurangi jumlah elemen DOM pada halaman untuk meningkatkan performa website.
18.Avoid HTTP 404 error : Hindari terjadinya error 404 pada website. Hal ini dapat dilakukan dengan secara berkala memeriksa tautan yang sudah kadaluarsa dan hilang.
250 19.Reduce cookie size : Hindari penyimpanan cookie (otentikasi, personalisasi, dan tujuan lain) secara berlebihan. Ukuran cookie dapat berpengaruh bagi waktu respon
20.Use cookie-free domains : Gunakan cookie-free domains untuk menghindari network traffic yang tidak diperlukan.
21.Avoid AlphaImageLoader filter : Hindari AlphaImageLoader filter karena mengkonsumsi banyak memori dengan menyarin render blok dan membekukan browser pada saat mengunduh gambar.
22.Don not scale images in HTML : Hindari perubahan ukuran gambar pada halaman. Jangan menggunakan gambar dengan resolusi besar untuk menampilkan gambar yang kecil seperti favicon dan icon. Hal ini akan membuat browser megunduh gambar dengan ukuran yang besar padahal yang nantinya akan ditampilkan hanya berukuran kecil.
23.Make favicon small and cacheable : Buat favicon (icon yang memberi identitas halaman pada tab browser) dengan ukuran kecil dan cacheable sehingga dapat meningkatkan performa dan menghindari permintaan yang berulang-ulang.
Dari hasil evaluasi menggunakan YSlow, website mendapatkan nilai performance rata-rata 92 (sembilan puluh dua) dan grade A. Dengan demikian, website yang dibuat memiliki performance yang sangat baik.
251
4.4.2 Evaluasi Berdasarkan Delapan Aturan Emas
Evaluasi berdasarkan delapan aturan emas adalah suatu penilaian akan sebuah aplikasi berdasarkan hubungan antara pengguna dan sistem. Prinsip-prinsip dalam aturan emas ini berguna untuk memberikan kenyamanan dan kelancaran pengguna dalam menggunakan aplikasi. Berikut adalah evaluasi terhadap aplikasi dalam skripsi ini berdasarkan delapan aturan emas.
a. Berusaha untuk konsisten
Gambar 4.81 Konsisten.
Baik store maupun admin menu memiliki desain yang berbeda tetapi masing-masing konsisten pada bagiannya. Pada bagian store dan admin menu, penempatan header, navigation menu, footer, warna background tidak ada yang berubah di tiap halamannya. Penggunaan font semuanya disamakan dan ukuran teks mulai dari h1, h2, h3, h4,
252
h5, h6, dan teks pragraf sudah ditentukan ukurannya masing-masing.
Pemberian warna untuk anchor link juga sudah ditentukan dan disesuaikan.
b. Mengenali kebutuhan pengguna yang universal
Gambar 4.82 Penjelasan istilah-istilah khusus bagi pengguna.
Dalam memenuhi kebutuhan pengguna yang beragam (universal), pada website ini memberikan penjelasan-penjelasan bagi fitur-fitur yang dianggap asing dan perlu dijelaskan. Ambil contoh pada halaman fill prescription seperti screenshot di atas. Terdapat beberapa tombol yang akan memunculkan pop up berisi penjelasan mengenai apa itu prescription
253 dan apa saja parameternya. Juga terdapat penjelasan mengenai jenis lensa, warna lensa, dan ketebalan lensa
c. Berikan umpan balik yang informatif
Gambar 4.83 Umpan balik yang informatif.
Dalam website ini terdapat pemberian umpan balik ketika pengguna melakukan sebuah aktivitas penting. Contohnya seperti pada saat pengunjung website mengirimkan pesan pada halaman contact. Contoh lainnya adalah pada saat admin menghapus, mengubah, dan menambahkan produk baru pada website.
254
d. Desain dialog untuk menghasilkan penutup
Gambar 4.84 Dialog untuk menghasilkan penutup.
Penutupan dari berbagai langkah yang telah dilakukan oleh pengguna dalam serangkaian aksi diperlukan untuk memberitahukan bahwa pengguna telah menyelesaikan suatu rangkaian aksi. Dialog penutup diaplikasikan ketika pengunjung website melakukan rangkaian aksi pembelian online. Pembelian ditutup dengan sebuah halaman pemberitahuan yang memberikan informasi dari transaksi yang telah dilakukan.
255
e. Berikan penanganan error sederhana
Gambar 4.85 Penanganan error sederhana.
Setiap formulir pengisian apapun pada website ini menyertakan pesan kesalahan. Pesan kesalahan ini berguna untuk memberitahu pengguna bahwa input yang dimasukkan tidak valid.
256
f. Memungkinkan aksi kembali yang mudah
Gambar 4.86 Aksi kembali yang mudah.
Menu navigasi dapat membantu pengguna untuk kembali ke halaman sebelumnya jika pengguna tersebut tersesat. Selain itu terdapat juga tombol back pada halaman-halaman tertentu seperti halaman add product, add customer, dan add order.
257
g. Mendukung internal locus control
Gambar 4.87 Internal locus control.
Sebuah aplikasi yang baik harus menempatkan pengguna sebagai pengendali sistem. Dalam website ini, sistem memberikan hak penuh kepada pengguna untuk menjalankan website dan aplikasi. Semua pilihan aksi diserahkan sepenuhnya kepada pengguna. Pengguna akan menjadi inisiator suatu aksi daripada menjadi responden.Hal ini terlihat ketika pengunjung ingin melakukan simulasi. Pengunjung tidak akan dipaksakan untuk menjadi registered member jika ingin melakukan simulasi.
258
h. Mengurangi ingatan jangka pendek
Gambar 4.88 Ingatan jangka pendek.
Mengurangi ingatan jangka pendek berarti tidak membebani pengguna dengan tampilan yang berantakan, berdesakan, dan penuh dengan informasi-informasi. Kesederhanaan tampilan diperlukan untuk membuat pengunjung merasa nyaman dalam menjalankan aplikasi. Tampilan pada website dan aplikasi dibuat sesederhana dan serapih mungkin dengan hanya menampilkan informasi yang diperlukan saja serta memberikan ruang kosong untuk menjaga performa mata pengguna tetap baik saat memakai website dan aplikasi.
Hasil evaluasi menunjukan bahwa website yang dirancang sudah sesuai dengan prinsip delapan aturan emas dan memenuhi persyaratan setiap poinnya.
