BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Spesifikasi Sistem Baru dan Lama Menunjukkan Spesifikasi minimum yang harus dimiliki unuk dapat mengakses website ini. 4.1.1
Client
a. Software : Web Browser yang Support JavaScript, HTML 5 dan CSS3 b. Hardware − Memory : 1GB − Processor Speed : 2Ghz c. Minimum Connection Bandwith : 160 Kbps d. Screen Resolution : 1024 x 768px 4.1.2
Server
4.1.2.1 Web Server
a. Software : Linux OS, MySQL b. Hardware : − Memory : 2 GB 218
219
− Processor Speed : 2.66 Ghz c. Minimum Connection Bandwith : 1Mbps 4.1.2.2 Database Server
a. Software : Linux OS, MySQL b. Hardware : − Memory : 2 GB − Processor Speed : 2.66 Ghz c. Minimum Connection Bandwith : 100 Mbps (LAN) 4.1.2.3 Push Server
a. Software : Linux OS, Redis, NodeJS b. Hardware : − Memory : 2 GB − Processor Speed : 2.66 Ghz c. Minimum Connection Bandwith : 100 Mbps (LAN)
220
4.2 Prosedur 4.2.1
Prosedur Development 1. Download Tortoise SVN dari http://tortoisesvn.net/downloads.html. 2. Setelah selesai didownload, lakukan instalasi Tortoise SVN, berikut adalah screenshot langkah - langkah penginstallan Tortoise SVN: a. Tekan tombol next
Gambar 4.1 Install Totoise Step-1
221
b. Pilih Accept, lalu tekan tombol Next
Gambar 4.2 Install Tortoise step-2 c. Pilih Lokasi Instalasi, lalu tekan tombol Next
Gambar 4.3 Install Tortoise step-3
222
d. Tekan tombol Install
Gambar 4.4 Install Tortoise step-4 e. Tekan Tombol Finish , Selamat Tortoise SVN telah terinstall
Gambar 4.5 Install Tortoise step-5
223
3. Buat folder baru dengan nama “v2.gobann.loc” 4. Masuk ke folder yang baru dibuat itu lalu klik kanan, dan pilih “SVN Checkout...” 5. Masukkan alamat repository dan pilih Ok
Gambar 4.6 Tortoise SVN Checkout 6. Masukkan Username dan Password untuk verifikasi
224
7. Tortoise akan mendownload data - data yang ada di repository tersebut
Gambar 4.7 Hasil SVN Checkout 8. Download
XAMPP
yang
sesuai
dengan
OS
anda
di
http://www.apachefriends.org/en/xampp.html. 9. Lakukan installasi XAMPP dengan cara buka file yang telah didownload, lalu pilih tempat instalasi dan tekan tombol Install
Gambar 4.8 Install XAMPP
225
10. Setelah selesai melakukan instalasi xampp, buka XAMPP Control panel yang ada di Start. dan matikan service Apache nya 11. Buka folder instalasi XAMPP/apache/conf/extra/httpd-vhost.conf, lalu ikuti langkah berikut: a. Uncomment line “NameVirtualHost *:80” dengan cara menghilangkan tanda “#”. b. Copy 1 block config “
” lalu comment salah satunya untuk back-up. c. Pada block config “” yang digunakan ubah isi property dari “DocumentRoot” menjadi “v2.gobann.loc”.
Gambar 4.9 Setting http-host.conf
226
12. Buka C:\windows\system32\driver\etc\hosts dengan notepad, tambahkan port “127.0.0.1 v2.gobann.loc” tanpa tanda petik di baris terakhir. 13. Buka lagi folder instalasi XAMPP lalu buka /apache/conf/httpd.conf, lalu ubah isi dari block “” menjadi sebagai berikut: Options FollowSymLinks AllowOverride all 14. Aktifkan kembali service apache pada apache friend, Selamat proses development dapat dilakukan. 4.2.2
Prosedur Live 1. Menginstall PHP5 dan Apache2 untuk webserver yang dapat menjalankan script php dengan OS Linux a. Install Apache2 : Buka terminal dan masukkan sintaks “sudo apt-get install apache 2”
Gambar 4.10 Install Apache2
227
b. Install PHP5 : Buka terminal dan masukkan sintaks “sudo apt-get install php5”
Gambar 4.11 Install PHP5 c. Tuliskan sintaks berikut ke terminal untuk menginstall modul apache-php “sudo apt-get install libapache2-mod-php5”
Gambar 4.12 Install Modul Apache-PHP
228
d. Tuliskan sintaks berikut ke terminal untuk melakukan restart webserver apache setelah modul php diinstall “sudo /etc/init.d/apache2 restart”
Gambar 4.13 Restart Webserver Apache 2. Menginstall MySQL sebagai database server untuk menyimpan data transaksi yang terjadi dalam website Gobann a. Install MySQL : Buka terminal dan masukkan sintaks “sudo-apt-get install mysql-server”
Gambar 4.14 Install MySQL
229
b. Tuliskan sintaks "sudo apt-get install php5-mysql" ke terminal untuk menginstall modul php untuk mysql
Gambar 4.15 Install Modul PHP-MySQL 3. Menginstall Redis sebagai penyimpan session user agar lebih persistent dengan OS minimal Linux Red Hat enterprise Linux Server release 6.0 a. Buat lah file baru dengan nama dotdeb.org.list dan tambahkan dotdeb repository ke daftar tersebut dengan sintaks berikut :
230
− “sudo nano /etc/apt/source.list.d/dotdeb.org.list”
Gambar 4.16 Make dotdeb.org.list − # /etc/apt/sources.list.d/dotdeb.org.list deb http://packages.dotdeb.org squeeze all deb-src http://packages.dotdeb.org squeeze all
Gambar 4.17 Make dotdeb.org.list-adv -
Tekan CTRL + X, lalu tekan Y, tekan Enter
231
b. Diperlukan autentikasi repository tersebut menggunakan public key mereka dengan sintaks berikut : “wget -q -O - http://www.dotdeb.org/dotdeb.gpg | sudo apt-key add –“
Gambar 4.18 Make dotdeb.org.list-adv c. Update aptitude cache dan install redis − Sudo aptitude update
Gambar 4.19 Hasil SVN Checkout
232
− Sudo aptitude install redis-server
Gambar 4.20 Install redis-server 4. Menginstall node.js sebagai software yang membantu melakukan push notification, langkah berikut adalah cara menginstall dari source code a. Diperlukan compiler untuk mengcompile source code tersebut maka gunakan sintaks berikut untuk menginstall compiler: − sudo apt-get update
Gambar 4.21 Menginstall compiler – sudo apt-get update
233
− sudo apt-get install build-essential –y
Gambar 4.22 Menginstall compiler – sudo apt-get install build-essential-y b. Diperlukan git untuk menginstall dari repository dengan sintaks berikut : “sudo apt-get install git –y”
Gambar 4.23 Menginstall git
234
c. Dibutuhkan beberapa library untuk dapat berjalan maka gunakan sintaks "sudo apt-get install python libssl-dev -y" untuk menginstall modul tersebut
Gambar 4.24 Mengambil dan memasang library d. gunakan sintaks berikut untuk mengambil arsip tar dan mengekstrak arsip tersebut agar dapat diinstall. cd /usr/local/src sudo mkdir node cd node sudo wget http://nodejs.org/dist/v0.6.17/node-v0.6.17.tar.gz sudo tar -xzvf node-v0.6.17.tar.gz
235
Gambar 4.25 Mengambil dan mengekstrak arsip e. Setelah arsip diekstrak dan membentuk satu folder, masuk kedalam folder tersebut dan cek dengan script configure untuk mengetahui apakah dependency yang dibutuhkan sudah tersedia dengan sintaks berikut: cd node-v0.6.17 sudo ./configure
Gambar 4.26 Mengecek ketersediaan dependency
236
f. Kemudian gunakan sintaks “sudo make“ untuk mengcompile node.js
Gambar 4.27 Mengcompiler node.js g. Kemudian gunakan sintaks “sudo make install” untuk menginstall node.js
Gambar 4.28 Menginstall node.js
237
4.3 Tampilan Layar Gobann v2 4.3.1
User
4.3.1.1 Landing Page Pada halaman Landing ini ditambahkan featured Kangtao, featured in dan juga textbox untuk melakukan pencarian Kangtao ataupun Demand pada header. Lalu terjadi perubahan untuk melakukan Sign In dan Sign Up, bila terjadi kesalahan pada saat melakukan Sign In salah, pengguna akan di pindahkan ke halaman Sign In yang menampilkan info lebih banyak dari pada hanya sekedar popup saja seperti di website Gobann.com yang lama.
Gambar 4.29 Landing Page
238
4.3.1.2 SignUp Page Dihalaman ini pengguna hanya perlu memberikan 3 informasi saja untuk membuat ID dan setuju dengan Syarat dan Ketentuan yang berlaku di website Gobann.com. Selain itu user dapat juga mendaftar menggunakan akun Facebook maupun Twitter. Sedangkan pada website Gobann.com v1 register tidak memiliki halaman sendiri, hanya ada di landing page.
Gambar 4.30 SignUp Page
239
4.3.1.3 Finish SignUp Page Halaman ini berguna untuk memberi informasi kepada pengguna yang telah berhasil mendaftar di gobann.com untuk melakukan aktivasi terlebih dahulu. Sedangkan pada website Gobann.com v1 informasi berhasil mendaftar hanya berupa popup saja.
Gambar 4.31 Finish SignUp Page
240
4.3.1.4 SignIn Page Pengguna melakukan sign in ke gobann.com pada halaman ini, disediakan juga untuk melakukan sign in melalui akun Facebook dan Twitter. Sedangkan pada website Gobann.com v1 SignIn tidak memiliki halaman sendiri, hanya ada di landing page dan popup saat meng-order Kangtao jika belum Signin.
Gambar 4.32 SignIn Page
241
4.3.1.5 Edit Profile Page Di halaman ini pengguna dapat melakukan perubahan profilnya, connect/disconnect akun Gobann dengan akun Facebook/Twitter. Untuk berhasil menyimpan data, pengguna perlu mengisi kata yang ada dalam re-captcha dengan benar dan mengisi semua field yang diberi tanda bintang (*). Halaman ini juga merupakan halaman yang pertama kali dikunjungi setelah pengguna melakukan aktivasi akun di Gobann.com untuk membuat username. Di website Gobann.com v1 halaman ini tidak ad menu connect/disconnect akun Gobann dengan akun Facebook/Twitter dan captcha nya tidak menggunakan re-captcha dan tidak diberitahu field yang harus di isi pengguna.
Gambar 4.33 Edit Profile Page
242
4.3.1.6 Create Kangtao – Insert Title Page / Kangtao List Page Pada halaman daftar Kangtao ini, pengguna dapat melihat daftar Kangtao yang sudah dibuat oleh semua pengguna. Pada halaman ini juga pengguna yang sudah sign in dapat memfavoritkan Kangtao dan juga dapat pergi ke halaman pembuatan Kangtao baru dengan mengisi textbox judul Kangtao terlebih dahulu maupun tidak (langsung klik tombol POST). Secara fungsionalitas halaman ini sama dengan Gobann v1, hanya memperbaiki antar muka penggunanya saja agar lebih seragam dengan page lainnya dan lebih ramah pengguna dengan menggunakan tooltips pada pilihan menu Sort By nya.
Gambar 4.34 Create Kangtao – Insert Title Page / Kangtao List Page
243
4.3.1.7 Popup Report Post Popup report post ini dapat dipanggil dengan memencet “Report Post” yang ada pada setiap Kangtao / Demand di halaman Kangtao List / Demand List dan halaman Kangtao Detail / Demand Detail. Laporan yang dibuat oleh pengguna melalui report post akan disampaikan kepada admin Gobann.com. Pada website Gobann v1, report post sama-sama popup, namun tidak ada textarea untuk memasukkan alasan pelaporan, hanya ada pengkonfirmasian pelaporan.
Gambar 4.35 Popup Report Post
244
4.3.1.8 Create Kangtao – Full Form Page Halaman ini merupakan halaman dimana user melakukan pembuatan Kangtao baru, pengguna harus mengisi semua yang data yang diwajibkan untuk diisi (ada tanda bintang “*”) dan juga pengguna diwajibkan memberi gambar untuk Kangtao yang dibuat sekurang – kurangnya satu gambar. Secara fungsionalitas halaman ini sama dengan website Gobann v1, hanya memperbaiki antar muka penggunanya saja. Di Gobann v1, popover berupa gambar yang d picu oleh CSS, di Gobann v2 menggunakan css dan html saja tanpa menggunakan gambar, sehingga beban load pengguna lebih kecil.
Gambar 4.36 Create Kangtao – Full Form Page
245
4.3.1.9 Kangtao Detail Page Pada halaman ini pengguna dapat melihat detail dari sebuah Kangtao, daftar Kangtao yang dibuat oleh pengguna yang membuat Kangtao yang sedang dibuka dihalaman ini, dan daftar Kangtao yang memiliki kategori yang mirip dengan Kangtao ini.Secara fungsionalitas halaman ini sama dengan website Gobann v1, hanya perubahan antar muka pengguna agar menjadi lebih seragam dan ramah pengguna.
Gambar 4.37 Kangtao Detail Page
246
4.3.1.10
Order Kangtao – Saldo Page
Pada halaman ini diberikan rincian seberapa besar nominal yang akan dibayarkan untuk melakukan transaksi Kangtao. Juga pengguna dapat mengisi kotak pengisian voucher untuk mengurangi nominal yang akan dibayarkan. Sedangkan pada website Gobann v1, konfirmasi pengorderan Kangtao hanya berupa popup “Pembayaran kangtao ini telah kami tarik dari saldo Anda sekarang. Pilihan: Order atau Close” , tidak memberikan informasi apa-apa kepada pembeli, dan belum ada fitur penggunaan voucher di Gobann v1.
Gambar 4.38 Order Kangtao – Saldo Page
247
4.3.1.11
My Shopping Page
Pada halaman ini ditampilkan daftar transaksi peng-orderan Kangtao yang pernah dilakukan oleh pengguna, beserta dengan statusnya. Jika memencet salah satu dari daftar yang ada, pengguna akan dilarikan ke halaman detail transaksi yang bersangkutan. Halaman ini secara fungsionalitas sama dengan website Gobann v1, hanya navigasi dan antar muka penggunanya yang diperbaiki. Pada Gobann v1, halaman ini dapat diakses dari menu header Dashboard->Buyer sedangkan pada Gobann v2, halaman ini dapat diakses dari menu UserDashboard -> Activity (semua halaman yang berkaitan dengan aktifitas transaksi pengguna di dalamnya ada ManageSales dan MyShopping). Di Gobann v1 tidak ada Breadcrumb sebagai penunjuk halaman, di Gobann v2 sudah menggunakan breadcrumb.Di Gobann v2 juga , daftar transaksi yang berstatus “inProgress” di highlight agar lebih membantu pengguna.
Gambar 4.39 My Shopping Page
248
4.3.1.12
Manage Own Kangtao Page
Pada halaman ini ditampilkan daftar Kangtao yang pernah dibuat oleh pengguna, disini pengguna dapat Edit, Delete, Active/Deactivate Kangtaonya, melihat Jumlah berapa kali Kangtao tersebut telah di tawarkan(Jika dipencet akan muncul popup yang menampilkan list-list Demand yang pernah pengguna ajukan tawaran),melihat jumlah pesanan yang sedang aktif pada Kangtao tersebut ( Jika dipencet pengguna akan dilarikan ke halaman Manage Sales).Halaman ini secara fungsionalitas hampir sama dengan website Gobann v1, hanya ada penambahan breadcrum dan fitur untuk meliat berapa kali Kangtao ini telah ditawarkan, dan Order yang bisa di klik (dilarikan ke Manage Sales). Navigasinya juga di perbaiki, di Gobann v1 halaman ini diakses dari Seller->MyKangtao , di Gobann v2 diakses dari UserDashboard->MyPosting.
Gambar 4.40 Manage Own Kangtao Page
249
4.3.1.13
Popup Demand Offered
Pada popup ini ditampilkan daftar Demand-Demand yang pernah ditawarkan dengan Kangtao yang bersangkutan, waktu kapan Kangtao tersebut ditawarkan, dan pengguna yang memiliki Demand tersebut. Pengguna bisa melihat detil Demand dengan memencet title pada Demand tersebut atau melihat detil Profile pemilik Demand dengan mengklik username pemilik Demand. Popup ini tidak ada pada Gobann v1
Gambar 4.41 Popup Demand Offered
250
4.3.1.14
Manage Sales Page
Pada halaman ini ditampilkan daftar transaksi penjualan Kangtao yang dimiliki oleh pengguna, beserta dengan statusnya. Jika memencet salah satu dari daftar yang ada, pengguna akan dilarikan ke halaman detail transaksi yang bersangkutan. Halaman ini secara fungsionalitas sama dengan website Gobann v1, hanya navigasi dan antar muka penggunanya yang diperbaiki. Pada Gobann v1, halaman ini dapat diakses dari menu header Dashboard->Seller sedangkan pada Gobann v2, halaman ini dapat diakses dari menu UserDashboard -> Activity (semua halaman yang berkaitan dengan aktifitas transaksi pengguna di dalamnya ada ManageSales dan MyShopping). Di Gobann v1 tidak ada Breadcrumb sebagai penunjuk halaman, di Gobann v2 sudah menggunakan breadcrumb.Di Gobann v2 juga , daftar transaksi yang berstatus “inProgress” di highlight agar lebih membantu pengguna.
Gambar 4.42 Manage Sales Page
251
4.3.1.15
Edit Kangtao Page
Pada halaman ini , pengguna dapat meng-edit Kangtaonya sesuai dengan Kangtao yang dia pencet menu edit di MyKangtao. Halaman dan filenya sama dengan halaman Create Kangtao, bedanya field-field yang sudah disimpan sebelumnya sudah terisi secara otomatis di halaman ini. Field title tidak bisa diganti oleh pengguna. Perbedaan halaman ini dengan Gobann v1 sama dengan perbedaan di halaman Create Kangtao.
Gambar 4.43 Edit Kangtao Page
252
4.3.1.16
Popup Finished Edit Kangtao
Setelah User berhasil melakukan peng-editan Kangtao, user akan dikembalikan ke halaman MyKangtao, ditambah dengan popup untuk memberitahu pengguna bahwa dia telah berhasil melakukan peng-editan Kangtao. Popup pembertahuan ini tidak ada pada Gobann v1.
Gambar 4.44 Popup Finished Edit Kangtao Page
253
4.3.1.17
Favorite Kangtao Page
Pada halaman ini, dimunculkan daftar Kangtao-Kangtao yang difavoritkan oleh pengguna. Listingnya sama seperti halaman Kangtao List. Secara fungsionalitas halaman ini di Gobann v1 hampir sama, hanya tidak ada fungsi untuk report post dan antar mukanya diperbaiki di Gobann v2 agar lebih seragam dengan halaman lainnya.
Gambar 4.45 Favorite Kangtao Page
254
4.3.1.18
Create Demand – Insert Title Page / Demand List Page
Pada halaman daftar Demand ini, pengguna dapat melihat daftar Demand yang sudah dibuat oleh semua pengguna. Pada halaman ini juga pengguna yang sudah SignIn dapat pergi ke halaman hasil pencarian Kangtao sejenis (jika ditemukan Kangtao yang mirip dengan Demand yang ingin dibuat) atau langsung di lempar ke halaman pembuatan Demand baru (Jika tidak ditemukan Kangtao sejenis) dengan mengisi textbox judul Demand terlebih. Secara fungsionalitas halaman ini sama dengan Gobann v1, hanya diperbaiki antar muka penggunanya agar seragam dengan page lainnya.
Gambar 4.46 Create Demand – Insert Title Page / Demand List Page
255
4.3.1.19
Create Demand – Full Form Page
Halaman ini merupakan halaman dimana user melakukan pembuatan Demand baru, pengguna harus mengisi semua yang data yang diwajibkan untuk diisi (ada tanda bintang “*”) dan juga pengguna dapat memberi gambar untuk yang dibuat maksimal satu gambar. Secara fungsionalitas halaman ini sama dengan website Gobann v1, hanya memperbaiki antar muka penggunanya saja. Di Gobann v1, popover berupa gambar yang dipicu oleh CSS, di Gobann v2 menggunakan css dan html saja tanpa menggunakan gambar, sehingga beban load pengguna lebih kecil.
Gambar 4.47 Create Demand – Full Form Page
256
4.3.1.20
Demand Detail Page
Pada halaman ini pengguna dapat melihat detail dari sebuah Demand, daftar Demand yang dibuat oleh pengguna yang membuat Demand yang sedang dibuka dihalaman ini, dan daftar Demand yang memiliki kategori yang mirip dengan Kangtao ini. Halaman ini baru diimplementasikan di website Gobann v2, sebelumnya di Gobann v1 hanya ada halaman daftar Demand saja.
Gambar 4.48 Demand Detail Page
257
4.3.1.21
Popup Offer Kangtao
Ini adalah popup yang muncul jika pengguna menekan tombol offer pada halaman Demand Detail. Untuk melakukan offer, pengguna dapat memilih Kangtao yang telah dibuat ataupun membuat Kangtao baru yang akan digunakan untuk melakukan offer terhadap demand yang dibuka ini. Bila pengguna memilih untuk membuat Kangtao baru untuk melakukan offer, maka pengguna akan dilempar kehalaman pembuatan Kangtao. Gobann v1 juga menggunakan popup untuk melakukan offer, dan cara untuk melakukan offernya pun sama.
Gambar 4.49 Popup Offer Kangtao
258
4.3.1.22
Popup Finish Offer
Setelah pengguna berhasil melakukan offer, pengguna akan dilempar ke halaman Mykangtao dan diberi popup yang berisi informasi bahwa pengguna telah berhasil melakukan offer ke demand yang di offer. Di website Gobann v1, popup ini juga dimunculkan, namun berada di halaman daftar Demand.
Gambar 4.50 Popup Finish Offer Kangtao
259
4.3.1.23
Manage Own Demand Page
Di halaman ini pengguna dapat melihat daftar Demand yang telah dibuat oleh pengguna itu sendiri. Pengguna dapat melakukan perubahan status pada Demand miliknya, dan juga dapat pengguna dapat melakukan perubahan informasi terhadap Demand dengan menekan link edit di Demand yang ingin di edit. Dihalaman ini juga pengguna dapat melihat jumlah offer untuk masing – masing Demand dan dapat membuka popup Kangtao Offered. Gobann v1 juga memiliki halaman ini, namun tidak memiliki popup Kangtao Offered, semua Kangtao yang di offer ke masing – masing Demand ditampilkan di Demand masing – masing.
Gambar 4.51 Manage Own Demand Page
260
4.3.1.24
Popup Kangtao Offered
Dihalaman ini pengguna dapat melihat daftar Kangtao yang di offer ke Demand miliknya, dan dapat melakukan penolakan atau menerima tawaran Kangtao dengan cara melakukan order terhadap Kangtao tersebut. Di Gobann v1 popup ini digantikan dengan cara menampilkan Kangtao offer langsung dibawah masing – masing Demand, dan memiliki fitur yang sama, yaitu untuk melakukan penolakan maupun menerima penawaran Kangtao dengan cara melakukan order terhadap Kangtao tersebut.
Gambar 4.52 Popup Kangtao Offered
261
4.3.1.25
Edit Demand Page
Pada halaman ini, pengguna dapat meng-edit Demandnya sesuai dengan Demand yang dia pencet menu edit di MyDemand. Halaman dan filenya sama dengan halaman Create Demand, bedanya field – field yang sudah disimpan sebelumnya sudah terisi secara otomatis di halaman ini. Field title tidak bisa diganti oleh pengguna. Perbedaan halaman ini dengan Gobann v1 sama dengan perbedaan di halaman Create Demand.
Gambar 4.53 Edit Demand Page
262
4.3.1.26
Popup Finished Edit Demand Page
Pada halaman ini pengguna menerima pemberitahuan melalui popup bahwa pengguna telah berhasil mengubah informasi Demand yang baru saja di edit. Popup ini berada pada halaman MyDemand. Sedangkan pada Gobann v1, tidak ada pemberitahuan sama sekali mengenai berhasilnya pengubahan informasi pada Demand.
Gambar 4.54 Popup Finished Edit Demand Page
263
4.3.1.27
User Profile Page
Pada halaman ini pengguna dapat melihat profil, rating sebagai seller maupun rating sebagai buyer dari pengguna lain maupun profil pengguna itu sendiri. Selain melihat profil pengguna dapat melihat daftar Kangtao dan Demand yang dibuat oleh pengguna yang profilnya sedang dilihat ini. Halaman ini juga terdapat pada Gobann v1, namun tidak menampilkan informasi data diri pengguna yang sedang dibuka di halaman ini, juga tidak ditampilkan daftar Demand yang dimiliki.
Gambar 4.55 User Profile Page
264
4.3.1.28
Personal Message Page
Pada halaman ini ditampilkan daftar pesan pribadi dari pengguna lain, pesan ditampilkan dengan dikelompokan berdasarkan pengguna. Pada Gobann v1 halaman untuk menampilkan pesan pribadi dan pesan transaksi dijadikan 1 halaman.
Gambar 4.56 Personal Message Page
265
4.3.1.29
Detail Personal Message Page
Pada halaman ini pengguna dapat melihat pembicaraan yang sudah dilakukan dengan lawan bicara, dan dapat mengirim pesan biasa maupun pesan yang memiliki attachment. Untuk pengiriman pesan tidak ada batas maksimal karakter yang dapat dikirim, dan untuk batas minimal adalah 1 karakter. Pada Gobann v1, pengiriman pesan diberikan batas minimal 10 karakter dan batas maksimal 450 karakter.
Gambar 4.57 Detail Personal Message Page
266
4.3.1.30
Topup – Choose Amount Page
Pada halaman ini pengguna memilih berapa besar uang yang akan di topup ke saldonya. Sedangkan pada Gobann v1 halaman pemilihan besar saldo yang akan di topup dan pemilihan metode pembayaran dijadikan 1 halaman saja.
Gambar 4.58 Topup – Choose Amount Page
267
4.3.1.31
Topup – Choose Payment Method Page
Pada halaman ini pengguna memilih metode pembayaran untuk melakukan proses topup, dihalaman ini juga terdapat informasi apa yang harus dilakukan di setiap metode pembayarannya. Pada Gobann v1, halaman pemilihan metode pembayaran digabungkan dengan halaman pemilihan besar saldo yang akan di topup, juga tidak ada keterangan apa saja yang harus dilakukan dengan metode pembayaran yang dipilih.
Gambar 4.59 Topup – Choose Payment Method Page
268
4.3.1.32
Topup – Bank Transfer Confirmation Page
Di halaman ini pengguna diberi informasi berapa besar topup yang akan dilakukan, dan langkah – langkah yang harus dilakukan untuk melakukan topup melalui bank transfer. Jika pengguna setuju untuk melanjutkan proses topup dengan langkah – langkah yang harus dilakukan, maka pengguna dapat melanjutkan proses ini dengan menekan tombol “Confirm”. Sedangkan pada Gobann v1 pengguna tidak diberi halaman konfirmasi ini.
Gambar 4.60 Topup – Bank Transfer Confirmation Page
269
4.3.1.33
Topup – Bank Transfer Form Page
Dihalaman ini pengguna mengisi formulir dengan informasi transfer dari transfer yang dilakukan pengguna ke gobann.com. Sedangkan pada Gobann v1 pengguna melakukan pengisian form dengan popup.
Gambar 4.61 Topup – Bank Transfer Form Page
270
4.3.1.34
Topup – Bank Transfer Review Page
Dihalaman ini pengguna dapat melihat review dari pengisian formulir bank transfer. Sedangkan di Gobann v1 halaman ini dimunculkan dengan popup.
Gambar 4.62 Topup – Bank Transfer Review Page
271
4.3.1.35
Topup – Bank Transfer Finish Page
Pada halaman ini pengguna diberi informasi bahwa pengguna telah selesai melakukan proses topup melalui metode bank transfer. Pada Gobann v1 halaman ini ditampilkan dengan popup.
Gambar 4.63 Topup – Bank Transfer Finish Page
272
4.3.1.36
Topup – Faspay Permata Bank Confirmation Page
Di halaman ini pengguna diberi informasi berapa besar topup yang akan dilakukan, dan langkah – langkah yang harus dilakukan untuk melakukan topup melalui Faspay Permata Bank. Jika pengguna setuju untuk melanjutkan proses topup dengan langkah – langkah yang harus dilakukan, maka pengguna dapat melanjutkan proses ini dengan menekan tombol “Confirm”. Sedangkan pada Gobann v1 pengguna tidak diberi halaman konfirmasi ini.
Gambar 4.64 Topup – Faspay Permata Bank Confirmation Page
273
4.3.1.37
Topup – All Third Party Redirect Page
Halaman ini merupakan halaman untuk menginformasikan bahwa pengguna akan dilempar ke website pihak ketiga yang menjadi media pembayaran ke gobann.com. Pada Gobann v1 pengguna langsung dilempar ke website pihak ketiga tanpa pemberitahuan seperti halaman ini.
Gambar 4.65 Topup – All Third Party Redirect Page
274
4.3.1.38
Topup – Faspay Permata Bank Finish Page
Halaman ini menampilkan informasi kepada pengguna bahwa pengguna telah selesai melakukan pembayaran ke gobann.com melalui Faspay Permata Bank.
Gambar 4.66 Topup – Faspay Permata Bank Finish Page
275
4.3.1.39
Topup – Faspay Mandari Clickpay Confirmation Page
Di halaman ini pengguna diberi informasi berapa besar topup yang akan dilakukan, dan langkah – langkah yang harus dilakukan untuk melakukan topup melalui Faspay Mandiri Clickpay. Jika pengguna setuju untuk melanjutkan proses topup dengan langkah – langkah yang harus dilakukan, maka pengguna dapat melanjutkan proses ini dengan menekan tombol “Confirm”. Sedangkan pada Gobann v1 pengguna tidak diberi halaman konfirmasi ini.
Gambar 4.67 Topup – Faspay Mandiri Clickpay Confirmation Page
276
4.3.1.40
Topup – Faspay Mandiri Clickpay Finish Page
Halaman ini menampilkan informasi kepada pengguna bahwa pengguna telah selesai melakukan pembayaran ke gobann.com melalui Faspay Mandiri Clickpay.
Gambar 4.68 Topup – Faspay Mandiri Clickpay Finish Page
277
4.3.1.41
Topup – Faspay BRI MoCash Confirmation Page
Di halaman ini pengguna diberi informasi berapa besar topup yang akan dilakukan, dan langkah – langkah yang harus dilakukan untuk melakukan topup melalui Faspay BRI MoCash. Jika pengguna setuju untuk melanjutkan proses topup dengan langkah – langkah yang harus dilakukan, maka pengguna dapat melanjutkan proses ini dengan menekan tombol “Confirm”. Sedangkan pada Gobann v1 pengguna tidak diberi halaman konfirmasi ini.
Gambar 4.69 Topup – Faspay BRI MoCash Confirmation Page
278
4.3.1.42
Topup – Faspay BRI MoCash Finish Page
Halaman ini menampilkan informasi kepada pengguna bahwa pengguna telah selesai melakukan pembayaran ke gobann.com melalui Faspay BRI MoCash.
Gambar 4.70 Topup – Faspay BRI MoCash Finish Page
279
4.3.1.43
Topup – Faspay BRI EPay Confirmation Page
Di halaman ini pengguna diberi informasi berapa besar topup yang akan dilakukan, dan langkah – langkah yang harus dilakukan untuk melakukan topup melalui Faspay BRI Epay. Jika pengguna setuju untuk melanjutkan proses topup dengan langkah – langkah yang harus dilakukan, maka pengguna dapat melanjutkan proses ini dengan menekan tombol “Confirm”. Sedangkan pada Gobann v1 pengguna tidak diberi halaman konfirmasi ini.
Gambar 4.71 Topup – Faspay BRI Epay Confirmation Page
280
4.3.1.44
Topup – Faspay BRI EPay Finish Page
Halaman ini menampilkan informasi kepada pengguna bahwa pengguna telah selesai melakukan pembayaran ke gobann.com melalui Faspay BRI Epay.
Gambar 4.72 Topup – Faspay BRI Epay Finish Page
281
4.3.1.45
Topup – Faspay T-Cash Method Page / Insert Number Page
Pada halaman ini pengguna diberitahu prosedur untuk melakukan proses topup dengan melalui Faspay T-Cash, pengguna harus mengisi nomor telepon selular dengan provider Telkomsel terlebih dahulu untuk melanjutkan ke halaman konfirmasi.
Gambar 4.73 Topup – Faspay T-Cash Method Page
282
4.3.1.46
Topup – Faspay T-Cash Confirmation Page
Di halaman ini pengguna diberi informasi berapa besar topup yang akan dilakukan, dan langkah – langkah yang harus dilakukan untuk melakukan topup melalui Faspay TCash, dan juga nomor telepon seluler yang akan digunakan untuk melakukan pembayarannya. Jika pengguna setuju untuk melanjutkan proses topup dengan langkah – langkah yang harus dilakukan, maka pengguna dapat melanjutkan proses ini dengan menekan tombol “Confirm”. Sedangkan pada Gobann v1 pengguna tidak diberi halaman konfirmasi ini.
Gambar 4.74 Topup – Faspay T-Cash Confirmation Page
283
4.3.1.47
Topup – Faspay T-Cash Finish Page
Halaman ini menampilkan informasi kepada pengguna bahwa pengguna telah selesai melakukan pembayaran ke gobann.com melalui Faspay T-Cash.
Gambar 4.75 Topup – Faspay T-Cash Finish Page
284
4.3.1.48
Topup – Kaspay Confirmation Page
Di halaman ini pengguna diberi informasi berapa besar topup yang akan dilakukan, dan langkah – langkah yang harus dilakukan untuk melakukan topup melalui Kaspay. Jika pengguna setuju untuk melanjutkan proses topup dengan langkah – langkah yang harus dilakukan, maka pengguna dapat melanjutkan proses ini dengan menekan tombol “Confirm”. Sedangkan pada Gobann v1 pengguna tidak diberi halaman konfirmasi ini.
Gambar 4.76 Topup – Kaspay Confirmation Page
285
4.3.1.49
Topup – Kaspay Finish Page
Halaman ini menampilkan informasi kepada pengguna bahwa pengguna telah selesai melakukan pembayaran ke gobann.com melalui Faspay T-Cash.
Gambar 4.77 Topup – Kaspay Finish Page
286
4.3.1.50
Balance History Page
Pada halaman ini dimunculkan daftar pembukuan keuangan milik pengguna. Sedangkan pada Gobann v1 tidak memiliki halaman balance hisotry ini, perubahan keuangan milik pengguna dan proses yang terjadi digabungkan menjadi satu halaman banking di Gobann v1.
Gambar 4.78 Balance History Page
287
4.3.1.51
Withdraw – Term and Condition Page
Pada halaman ini diberikan syarat dan ketentuan yang berlaku dalam penarikan tunai, dan tombol navigasi untuk melanjutkan proses penarikan tunai. Di Gobann v1 tidak memiliki halaman Term and Condition untuk melakukan withdraw.
ERROR: ioerror OFFENDING COMMAND: image STACK: