4.3. Implementasi Halaman
4.3.1. Halaman Utama
Halaman ini merupakan halaman utama yaitu halaman pertama yang ditampilkan ketika pengguna membuka website. Dalam halaman utama ini ditampilkan delapan daftar lelang terbaru dan juga delapan daftar lelang dengan penawaran terbanyak.
Gambar 4.1. Implementasi Halaman Utama
4.3.2. Halaman Registrasi
Halamin ini merupakan halaman yang digunakan untuk pendaftaran anggota. Halaman ini terbagi menjadi dua bagian yaitu bagian input data dan input file gambar untuk gamb ar profile. Pengguna harus memasukkan data yang dibutuhkan kemudian menekan tombol ‘Create account’ untuk mendaftar. Pengguna akan dibawa ke halaman input gambar yang digunakan untuk gambar profile. Halaman registrasi ditunjukkan pada Gambar 4.2. dan halaman input gambar ditunjukkan pada Gambar 4.3.
Gambar 4.2. Implementasi Halaman Registrasi
4.3.3. Halaman Profile
Pada halaman profile ditampilkan data diri dari member dan juga daftar lelang yang pernah dibuat oleh member. Terdapat menu edit untuk yang dapat digunakan oleh member untuk mengubah data profilnya. Halaman profil ditunjukkan dalam Gambar 4.4.
Gambar 4.4. Implementasi Halaman Profil
4.3.4. Halaman Edit Profile
Halaman ini berfungsi untuk mengubah data profil member. Member dapat mengubah profilnya dengan memasukkan data baru kemudian menekan tombol ‘Save change’. Halaman edit profil ditunjukkan pada Gambar 4.5.
Gambar 4.5. Implementasi Halaman Edit Profil
4.3.5. Halaman Buat Lelang
Halaman ini merupakan halaman yang digunakan member untuk membuat lelang. Halaman ini juga terbagi menjadi dua bagian yaitu halaman input data dan halaman input file gambar. Member harus memasukkan data yang dibutuhkan kemudian menekan tombol ‘Create Auction’. Halaman buat lelang ditunjukkan pada Gambar 4.6. dan halaman input gambar ditunjukkan pada gambar 4.7.
Gambar 4.6. Implementasi Halaman Buat Lelang
4.3.6. Halaman Lelang
Di halaman ini berisi detail barang yang dilelang sekaligus menjadi halaman lelang. Di halaman ini member yang merupakan pemilik barang memiliki menu edit yang dapat digunakan untuk mengganti informasi barang yang dilelang. Pada halaman ini member lain juga dapat membuat penawaran selama watu yang telah ditentukan. Halaman lelang ditunjukkan pada Gambar 4.8.
4.3.7. Halaman Edit Lelang
Halaman ini berfungsi untuk mengubah data barang yang dilelang. Member dapat mengubah data dengan memasukkan data baru kemudian menekan tombol ‘Update’. Halaman edit lelang ditunjukkan pada Gambar 4.9.
Gambar 4.9. Impelementasi Halaman Edit Lelang
4.3.8. Halaman Daftar Lelang
Halaman ini dapat dibuka dari menu kategori yang terdapat di bagian kiri tampilan. Pengguna memilih salah satu kategori kemudian akan ditampilkan daftar lelang sesuai kategori tersebut. Di halaman ini pengguna dapat melakukan pencarian lelang dengan memasukkan kata
kunci yang ingin dicari pada textfield yang berada di atas daftar lelang. Halaman daftar lelang ditunjukkan pada gambar 4.10.
57
BAB V
HASIL DAN PEMBAHASAN
Pada bab ini akan dipaparkan mengenai hasil dan analisa dari hasil percobaan yang telah dilakukan.
5.1. Uji Fungsional
Uji fungsional dilakukan untuk mengetahui apakah web dapat berjalan dengan baik sesuai dengan yang diharapkan. Pengujian dilakukan dengan memberikan berbagai macam masukkan pada setiap case. Dari situ akan dilihat apakah sistem dapat memberikan output sesuai yang diharapkan atau tidak.
5.1.1. Login Skenario
Pengujian skenario login dilakukan dengan dua macam masukan. Masukan pertama berisi informasi login yang salah dan masukkan kedua berisi informasi login yang benar. Dari kedua masukan tersebut akan dilihat apakah luaran yang dihasilkan sesuai dengan yang diharapkan atau tidak.
Hasil Pengujian
Tabel 5.1. Hasil Pengujian Case Login
Keterangan Masukan Hasil yang diharap Hasil yang didapat
Input data yang benar User: ecx_q@yahoo. com Password: password Sistem akan memasukkan pengguna ke dalam sistem kemudian kembali ke halaman awal. Pengguna berhasil masuk ke dalam sisitem dan kembali ke halaman awal. Input data yang salah User: asdf Password: asdf Menampilkan pesan kesalahan kemudian kembali ke halaman awal. Muncul pesan kesalahan kemudian kembali ke halaman awal. 5.1.2. Buat Lelang Skenario
Pengujian skenario buat lelang dilakukan dengan dua macam masukan. Masukan pertama berisi informasi barang yang valid dan masukkan kedua berisi informasi barang yang tidak valid. Dari kedua masukan tersebut akan dilihat apakah luaran yang dihasilkan sesuai dengan yang diharapkan atau tidak.
Hasil Pengujian
Tabel 5.2. Hasil Pengujian Case Buat lelang
Keterangan Masukan Hasil yang diharap Hasil yang didapat
Informasi barang valid Name: raket tenis Category: sport Detail:
raket tenis baru, murah Price: 300000 Start date: 2013-08-21 00:00:00 End date: 2013-08-31 00:00:00 Sistem akan menyimpan masukan item da berpindah ke halaman input file gambar. Sistem berhasil menyimpan item kemudian berpindah ke halaman input file gambar.
Keterangan Masukan Hasil yang diharapkan
Hasil yang didapat
Input file gambar
File gambar Gambar tersimpan dan berpindah ke halaman barang yang telah dibuat.
Halaman berpindah ke halaman barang yang telah dibuat.
Informasi barang tidak valid Name: Category: antique Detail: Price: 0 Start date: End date: Sistem akan menampilkan pesan kesalahan. Muncul pesan kesalahan “required”.
5.1.3. Buat Penawaran Skenario
Pengujian skenario buat penawaran dilakukan dengan dua macam masukan. Masukan pertama bernilai lebih kecil dari harga barang. Masukkan yang kedua bernilai lebih tinggi dari harga barang. Dari semua masukan tersebut akan dilihat apakah luaran yang dihasilkan sesuai dengan yang diharapkan atau tidak.
Hasil pengujian
Tabel 5.3. Hasil Pengujian Case Buat Penawaran Keterangan Masukan Hasil yang
diharapkan
Hasil yang didapat
Penawaran lebih kecil dari harga /
Bid: 1000 Sistem akan
menampilkan pesan kesalahan. Muncul pesan kesalahan penawaran terlalu kecil. Penawaran lebih tinggi dari
harga /
penawaran terakhir.
Bid:300000 Sistem akan menampilkan
penawaran baru dan mengupdate tampilan di semua pengguna. Muncul penawaran baru di semua pengguna.
5.1.4. Edit Profile Skenario
Pengujian skenario edit profile dilakukan dengan memasukkan informasi profile yang baru. Dari masukan tersebut akan dilihat apakah luaran yang dihasilkan sesuai dengan yang diharapkan atau tidak.
Hasil pengujian
Tabel 5.4. Hasil Pengujian Case Edit Profile
Keterangan Masukan Hasil yang diharapkan
Hasil yang didapat
Input data baru User: [email protected] First name: Benediktus Last name: Prabowo Address: Nglinggi Hometown: Klaten Sistem akan menyimpan data baru kemudian berpindah ke tampilan profil yang sudah diedit. Tampilan berpindah ke halaman profil dengan data baru.
Province: Jawa Tengah Phone number: 081514160412 Birth date: 1992-07-09 Sex: Male 5.1.5. Logout Skenario
Pengujian skenario logout dilakukan dengan menekan pilihan logout. Dari skenaro tersebut akan dilihat apakah sistem dapat mengeluarkan pengguna dari sistem.
Hasil pengujian
Tabel 5.5. Hasil Pengujian Case Logout
Keterangan Masukan Hasil yang diharapkan
Hasil yang didapat
Menekan link logout
Link logout Sistem akan mngeluarkan pengguna dari dalam sistem kemudian kembali ke halaman awal. Pengguna berhasil keluar dari dalam sisitem dan kembali ke halaman awal.
5.1.6. Cari Barang Skenario
Pengujian skenario cari barang dilakukan dengan cara memilih kategori barang kemudian memasukkan kata kunci barang yang dicari. Dari masukkan tersebut akan dilihat apakah daftar barang yang ditampilkan sesuai dengan kata kunci yang dicari.
Hasil pengujian
Tabel 5.6. Hasil Pengujian Case Cari Barang
Keterangan Masukan Hasil yang diharapkan
Hasil yang didapat
Masukan keyword Keyword: raket Sistem akan menampilkan semua barang yang mengandung kata ‘raket’. Menampilkan semua barang dengan keyword raket.
5.1.7. Register Skenario
Pengujian skenario register dilakukan dengan dua macam masukan. Masukan pertama berisi informasi data diri yang salah dan masukkan kedua berisi informasi data diri yang benar. Dari kedua masukan tersebut akan dilihat apakah luaran yang dihasilkan sesuai dengan yang diharapkan atau tidak.
Hasil Pengujian
Tabel 5.7. Hasil Pengujian Case Register
Keterangan Masukan Hasil yang diharapkan Hasil yang didapat Input data yang benar Emal: ekiprabowo@gmail. com Password: password Retype password: password First name: Beediktus Last name: Prabowo Address: Klaten Hometown: Sistem akan menyimpan data user baru kemudian berpindah ke halaman input file gambar.
Berpindah ke halaman input file gambar.
Klaten Province: Jawa tengah Phone number: 085725630179 Birth date: 1992-07-07 Sex: Male Input data yang salah Emal: Password: Retype password: First name: Last name: Address: Hometown: Province: Menampilkan pesan kesalahan. Muncul pesan kesalahan.
Phone number:
Birth date:
Sex:
Dari tabel pengujian di atas dapat dilihat bahwa sistem dapat berjalan dengan baik di semua case. Sistem dapat memberikan tanggapan sesuai dengan masukan pengguna dengan benar. Dari semua case pengujian fungsional ini sistem dapat memberikan luaran sesuai dengan yang diharapkan.
5.2. Uji Non-Fungsional 5.2.1. Performa Sistem Skenario
Pengujian dilakukan pada server yang memiliki spesifikasi prosesor Intel core i5 2.54 GHz dan ram 4 GB sedangkan komputer client masing – masing memiliki spesifikasi prosesor Intel core i3 3.3 GHz dan ram 2 GB. Pengujian dilakukan dengan jumlah client yang berbeda, pada pengujian pertama dilakukan dengan 20 (dua puluh) client dan 30 (tiga puluh) client pada pengujian kedua. Untuk setiap pengujian dilakukan 2 (dua) kali percobaan dengan jeda waktu setiap penawaran 1 detik. Setiap pengujian dilakukan dengan penawaran sebanyak sepuluh kali. Dari pengujian akan dihitung rata – rata waktu update yang didapatkan dari setiap pengujian.
Berikut ini merupakan variabel dan harapan hasil yang digunakan sebagai acuan dalam pengujian non-fungsional ini:
- Variabel yang diubah : Jumlah pengguna - Variabel yang diukur : Waktu update - Hasil yang diharapkan :
1. Data penawaran terbaru berubah di setiap user.
2. Waktu update yang diterima user kurang dari 1 detik dari waktu input.
Pengambilan data waktu update dilakukan dengan melihat waktu yang tertera pada halaman website. Waktu pengguna memasukkan penawaran akan dicatat, begitu juga setiap kali terjadi perubahan data, waktu akan dicatat ketika terjadi perubahan tersebut. Dari waktu update yang didapat akan diketahui berapa selisih waktu antara input penawaran dengan update yang diterima dari setiap pengguna.
Berikut ini merupakan tabel hasil pengujian yang menampilkan waktu input penawaran dan waktu pengguna mendapat update:
Tabel 5.8. Hasil Pengujian 20 Pengguna PC 1 – 10 (Percobaan 1)
Tabel 5.9. Hasil Pengujian 20 Pengguna PC 11 - 20 (Percobaan 1)
Tabel 5.11. Hasil Pengujian 20 Pengguna PC 11 – 20 (Percobaan 2)
Tabel 5.12. Hasil Pengujian 30 Pengguna PC 1 – 10 (Percobaan 1)
Tabel 5.14. Hasil Pengujian 30 Pengguna PC 21 – 30 (Percobaan 1)
Tabel 5.15. Hasil Pengujian 30 Pengguna PC 1 – 10 (Percobaan 2)
Tabel 5.17. Hasil Pengujian 30 Pengguna PC 21 – 30 (Percobaan 2)
Tabel 5.8. sampai 5.17. merupakan tabel pengujian yang berisi data waktu input dan waktu pengguna mendapatkan update, data waktu yang disimpan dalam tabel tersebut memiliki format jam:menit:detik. Kolom “waktu input” menyimpan data waktu ketika pengguna (PC 1) memasukkan penawaran, kemudian kolom “waktu mendapatkan update” merupakan kolom yang menyimpan waktu dimana pengguna menerima update penawaran. Kolom “waktu mendapat update” terbagi menjadi beberapa sub-kolom yang berjumlah sesuai dengan jumlah pengguna aktif yang ditandai dengan label “PC 1” sampai dengan “PC n”, setiap kolom pengguna menyimpan waktu update ketika pengguna tersebut menerima update.
Tabel pengujian di atas menunjukkan waktu input dan waktu mendapat update dari masing – masing pengguna. Dari tabel di atas terlihat aplikasi dapat bekerja dengan baik pada setiap pengujian baik pada pengujian dengan 20 pengguna maupun 30 pengguna.
Untuk mengetahui waktu yang dibutuhkan dalam mengupdate penawaran maka akan dihitung rata – rata waktu update setiap penawaran. Berikut ini merupakan tabel selisih waktu dan rata – rata waktu update setiap penawaran dari pengujian dengan prosesor i5:
Tabel 5.18. Selisih Waktu Update 20 Pengguna PC 1 – 10 (Percobaan 1)
Tabel 5.20. Selisih Waktu Update 20 Pengguna PC 1 – 10 (Percobaan 2)
Tabel 5.22. Selisih Waktu Update 30 Pengguna PC 1 – 10 (Percobaan 1)
Tabel 5.24. Selisih Waktu Update 30 Pengguna PC 21 – 30 (Percobaan 1)
Tabel 5.26. Selisih Waktu Update 30 Pengguna PC 11 – 20 (Percobaan 2)
Tabel 5.27. Selisih Waktu Update 30 Pengguna PC 21 – 30 (Percobaan 2)
Tabel 5.18. hingga tabel 5.27. merupakan tabel yang berisi selisih waktu input penawaran dengan waktu update yang didapatkan oleh masing – masing pengguna dan juga rata – rata waktu update. Selisih waktu didapatkan dengan cara mengurangi waktu update dengan waktu input.
Sebagai contoh kita ambil data dari tabel 5.18. pada penawaran pertama terdapat data sebagai berikut:
Data tersebut berasal dari selisih waktu update dengan waktu input penawaran pertama pada tabel 5.8.
Tabel 5.28. Performa Aplikasi Web Lelang Jeda
waktu penawaran
Jml pengguna
Rata – rata waktu update
Jumlah yang berhasil diupdate 1 detik 20 (0.31 + 0.49) / 2 = 0.4 detik 20 (100%) 1 detik 30 (0.47 + 0.76) / 2 = 0.615 detik 30 (100%)
Tabel 5.28. menunjukkan performa aplikasi web yang telah diuji. Dari tabel di atas dapat dilihat rata – rata waktu update dan jumlah pengguna yang berhasil mendapat update. Dari hasil pengujian di atas dapat disimpulkan bahwa aplikasi web yang dibangun dapat berjalan dengan baik. Server dapat memberikan update dengan rata – rata waktu paling lama 0.615 detik dan dapat memberikan update dengan sempurna hingga 30 pengguna.
Tabel 5.29. Hasil Pengujian Non-Fungsional No Porsesor Selisih waktu Jumlah pengguna Hasil yang diharapkan
Hasil yang didapat
1 Intel core i5 2.53GHz 1 20 data penawaran terbaru muncul di setiap pengguna dengan waktu
update kurang dari 1 detik
- semua pengguna mendapat update - rata – rata waktu update 0.4 detik 2 Intel core i5 2.53GHz 1 30 data penawaran terbaru muncul di setiap pengguna dengan waktu
update kurang dari 5 detik
- semua pengguna mendapat update - rata – rata waktu update 0.615 detik
Tabel 5.29. merupakan tabel hasil pengujian non-fungsional yang telah dilakukan. Kolom prosesor menunjukkan prosesor yang digunakan untuk server pada pengujian, kolom selisih waktu menyimpan selisih waktu penawaran dalam detik, kolom jumlah pengguna menunjukkan jumlah pengguna aktif saat pengujian.
Dari pengujian yang telah dilakukan didapatkan kemampuan yang didapatkan setelah pengujian adalah server mampu menangani input penawaran dengan jeda waktu setiap penawaran 1 detik dan dapat menangani 30 pengguna pada prosesor Intel core i5. Untuk jeda waktu yang lebih kecil dan jumlah pengguna yang lebih banyak belum dapat diuji karena berbagai keterbatasan.
5.2.2. Fairness dan Transparency Skenario
Pengujian fairness dan transparency dilakukan dengan melakukan penawaran pada barang tertentu. Penawaran akan dilakukan oleh 2 pengguna dimana masing masing pengguna melakukan 10 penawaran. Dari skenario tersebut akan dilihat apakah setiap penawaran ditampilkan dan setelah lelang berakhir akan dilihat apakah pemenang lelang sesuai dengan yang seharusnya.
Hasil Pengujian
Gambar 5.1. merupakan hasil capture screen yang memperlihatkan data penawaran 1 sampai 10 dari pengujian yang ditampilkan dalam halaman lelang.
Gambar 5.2. Daftar Penawaran 11 Sampai 20
Gambar 5.2. merupakan hasil capture screen yang memperlihatkan data penawaran 11 sampai 20 dari pengujian yang ditampilkan dalam halaman lelang.
Gambar 5.3. Daftar Penawaran Barang Dengan id_item itm10000000020 Gambar 5.3. merupakan hasil capture screen dari data yang terdapat dalam database. Gambar tersebut memperlihatkan semu data penawaran 1 sampai 20 dengan id_item ‘itm10000000020’.
Dari gambar 5.1. sampai gambar 5.3. dapat dilihat halaman web dapat
menampilkan semua penawaran yang dilakukan oleh kedua pengguna (terlihat pada gambar 5.1. dan gambar 5.2.), sesuai dengan data yang terdapat dalam database (gambar 5.3.) yang berarti web telah memenuhi unsur transparency dan pemenang lelang yang ditampilkan sesuai dengan pemenang lelang yang seharusnya, hal tersebut telah memenuhi unsur fairness.
84
BAB VI
PENUTUP
Pada bab ini akan disajikan kesimpulan dan saran dari hasil analisis implementasi permasalahan pada bab sebelumnya. Berdasarkan kesimpulan yang diperoleh, kemudian akan dikemukakan saran-saran yang diharapkan dapat bermanfaat.
6.1. Kesimpulan
Dari penelitian yang dilakukan, dapat disimpulkan bahwa:
1. Penelitian ini berhasil membangun sebuah aplikasi Web lelang barang
interaktif dengan menggunakan komponen ICEfaces ajax push. Aplikasi telah diuji pada server dengan spesifikasi prosesor Interl core I5 2.54 GHz dengan ram 4 GB dan menggunakan client dengan spesifikasi prosesor Intel core i3 dengan ram 2 GB. Aplikasi berhasil menampilkan data secara real-time dengan rata – rata waktu update 0.4 detik pada 20 client dan 0.615 detik pada 30 client. Aplikasi dapat menangani inputan dengan jeda waktu 1 detik dan dapat memberikan
update penawaran pada 30 pengguna.
2. Masalah transparancy dan fairness telah berhasil ditangani dengan cara menampilkan seluruh data penawaran barang pada halaman lelang barang.
6.2. Saran
Saran untuk pengembangan sistem yang akan datang yaitu:
1. Perancangan sistem selanjutnya dapat menggunakan mekanisme lain selain long-polling.
2. Perancangan sistem dapat menggunakan komponen lain selain ICEfaces.
3. Penelitian dapat dilakukan dengan melakukan perbandingan antara komponen – komponen yang berbeda.
86
DAFTAR PUSTAKA
_________. Kamus Besar Bahasa Indonesia (KBBI). From http://kbbi.web.id/lelang, 8 November 2012.
Burns, Ed, Chris Schalk & Neil Griffin (2010). JavaServer Faces 2.0: The Complete Reference. Indianapolis:McGraw-Hill Education.
Easley, David, & Jon Kleinberg (2010). Networks, Crowds, and Markets: Reasoning about Highly Connected World. England : Cambridge University Press.
Fyten, Ken (2012). Getting Started with ICEfaces 3. Dari http://www.icesoft.org/wiki/display/ICE/Getting+Started+with+ICEfaces +3, 22 Juli 2013.
Jamsa, Kris, Konrad King & Andy Anderson (2002). HTML & Web Design Tips & Techniques. New York : McGraw-Hill/Osborne.
Kopetz, Hermann (2011). Real-Time System:Design Principles for Distributed Emberdded Applications. New York : Springer Science+Business Media.
Lengstorf, Jason, & Phil Leggetter (2013). Realtime Web Apps: With HTML5 WebSocket, PHP, and jQuery. New York : Springer Science+Business Media.
Musciano, Chuck, & Bill Kennedy (1998). HTML:The Definitive Guide, 3rd Edition. California : O’Reilly Media, Inc.
Nasser, Feras (2012). Ajax Push – Overview. Dari http://www.icesoft.org/wiki/display/ICE/Ajax+Push+-+Overview, 11 Juni 2013.
88
LAMPIRAN