BAB 4 HASIL DAN BAHASAN
4.1
Implementasi
4.1.1 Kebutuhan Sistem
4.1.1.1
Kebutuhan Hardware Kebutuhan Hardware mininum yang diperlukan untuk menjalankan aplikasi
adalah:
1. Server, dengan spesifikasi minimum: •
Processor: Intel Pentium 4 (3Ghz) atau Intel Dual Core (3Ghz).
•
Harddrive: 80-100 GB.
•
Memory: 2 GB.
•
Graphic Card: Integrated Graphic Card (Onboard).
•
Koneksi internet yang terhubung dengan hosting services untuk website.
2. Client, dengan spesifikasi minimum (Komputer atau Laptop): •
Processor: Intel Pentium 4 (3Ghz) atau Intel Dual Core (3Ghz).
•
Harddrive: 80-100 GB.
•
Memory: 2 GB.
•
Graphic Card: Integrated Graphic Card (Onboard).
•
Koneksi internet untuk mengaskes website. Atau Gadget seperti iPhone, iPad, Android yang dilengkapi dengan akses internet dengan spesifikasi hardware yang bervariasi.
3. Hosting Services dengan fasilitas hardware yang lengkap dan mencukupi. Hosting services umumnya menyediakan tempat untuk penyimpanan data untuk banyak website, melakukan maintenance website, dan juga koneksi antara server pemilik website dan hosting services.
69
70
4.1.1.2 Kebutuhan Software Kebutuhan Software minimum yang diperlukan untuk menjalankan aplikasi adalah: 1. Server: •
Operating System: Linux Centos.
•
Database: MySQL dan PhpMyAdmin.
•
Software Core: Apache, PHP 5.4
2. Client: •
Operating System: Microsoft Windows XP, Linux, dan operating system untuk gadget yang sudah tersedia (Android, iOS, dll).
•
Browser: Internet Explorer, Mozilla Firefox, Google Chrome, dan browser lainnya.
3. Pengembangan aplikasi (Development): •
Programming Language: PHP 5.4.
•
Framework: Yii PHP Framework 1.1.14.
•
Database: MySQL Workbench 6.0 CE atau PhpMyAdmin.
•
Web Server: Apache Tomcat, XAMPP, atau IIS.
•
Software Development: Netbeans IDE 7.3.1 atau IDE lainnya yang dilengkapi dengan PHP.
•
Hosting Management: cPanel.
•
Browser: Internet Explorer, Mozilla Firefox, Google Chrome, dan browser lainnya. Browser dalam pengembangan aplikasi dibutuhkan untuk testing aplikasi dan juga untuk mengakses wesbsite sesudah dihost pada hosting services.
71
4.1.1.3 Kebutuhan Sumber Daya Manusia (SDM) Sumber Daya Manusia (SDM) yang dibutuhkan untuk menjalankan aplikasi ini adalah: 1.
Developer:
Berperan dalam pengembangan aplikasi lebih lanjut setelah diluncurkan ke publik. Developer bisa menambahkan dan mengurangi fitur yang ada pada aplikasi, berdasarkan feedback (umpan balik) yang didapatkan dari pengguna, dan mengatasi error yang bisa muncul pada aplikasi. Developer diharapkan memiliki pengetahuan dasar untuk HTML5, PHP 5.4, Yii Framework, dan MySQL.
2.
Admin:
Berperan dalam pengelolaan, penambahan, dan pengurangan data yang hanya bisa diakses oleh pengguna dengan status Admin. Admin juga mengelola database yang menyimpan data yang digunakan oleh aplikasi.
3.
Pengguna (User):
Pengguna dibutuhkan dalam sistem untuk implementasi aplikasi dan bisa menggunakan fitur-fitur yang sudah tersedia pada aplikasi. Pengguna hanya cukup menggunakan browser yang mereka miliki untuk mengakses aplikasi.
4.1.2 Contoh Hasil Bagian ini akan menjelaskan contoh pengoperasian aplikasi untuk Warga dan Admin. Contoh pengoperasian yang diilustrasikan dan dibahas bersifat umum, yang berarti tidak semua contoh pengoperasian dibahas disini. Pembahasan akan difokuskan pada pengoperasian yang lebih bersifat umum dan tidak spesifik.
72
4.1.2.1 Contoh Pengoperasian Aplikasi (untuk Pengguna/Warga) Halaman Home sebelum Login
Gambar 4.1 Halaman Home sebelum Login
Pada Gambar 4.1, halaman home sebelum login menampilkan menu (Home, Pengumuman, dan Login) beserta konten Pilihan Fitur, link Login/Logout, dan 3 Pengumuman Terbaru.
73
Halaman Login
Gambar 4.2 Halaman Login
Pada Gambar 4.2, halaman login menampilkan form dengan atribut Nama Lengkap dan Password. Form Nama Lengkap disertai dengan fitur Autocomplete, yang membantu pengguna dalam input Nama Lengkap tanpa harus menghafalkan atau menebak Nama Lengkap yang tersimpan dalam database. Tampilan Autocomplete yang dimaksud bisa dilihat pada Gambar 4.3
Halaman Login dengan Fitur Autocomplete
Gambar 4.3 Halaman Login dengan Fitur Autocomplete
Pada Gambar 4.3, input Nama Lengkap dibantu dengan fitur Autocomplete, yang membantu pengguna dalam input Nama Lengkap tanpa harus menghafalkan atau menebak Nama Lengkap yang tersimpan dalam database. Pengguna hanya cukup input sebagian nama mereka dan aplikasi akan melakukan suggestion berdasarkan input yang dilakukan.
74
Halaman Home setelah Login
Gambar 4.4 Halaman Home setelah Login
Pada Gambar 4.4, halaman home menampilkan elemen menu dan user interface yang hanya ditampilkan bilamana pengguna sudah login. Elemen yang dimaksud yaitu menu untuk Post, Pengaduan, Pesan, Pencarian Warga, Profil, dan Logout. Konten di halaman utama juga menampilkan link untuk Pencarian Warga, Pesan, Pengaduan, Post, dan Logout. Selain 3 Pengumuman Terbaru ditampilkan, 3 Pengaduan Terbaru juga ditampilkan di halaman utama setelah login.
75
Halaman Index Pengumuman
Gambar 4.5 Halaman Index Pengumuman
Pada Gambar 4.5, halaman index pengumuman menampilkan semua pengumuman yang disimpan dalam database, dengan pilihan untuk mengurutkan pengumuman berdasarkan No. Pengumuman, Kategori, Isi Pengumuman, dan Tanggal Dibuat.
76
Halaman Detail Pengumuman
Gambar 4.6 Halaman Detail Pengumuman
Pada Gambar 4.6, halaman detail pengumuman menampilkan detail dari pengumuman yang dipilih, semua komentar untuk pengumuman tersebut, pilihan untuk menambah komentar dan melihat semua komentar pengguna.
Halaman Tambah Komentar (Pengumuman, Post, dan Pengaduan)
Gambar 4.7 Halaman Tambah Komentar (Pengumuman, Post, dan Pengaduan)
77
Pada Gambar 4.7, halaman tambah komentar menampilkan form untuk menambah komentar untuk data yang dipilih. Bila pengguna tidak jadi menambah komentar, bisa memilih link untuk kembali ke halaman index data.
Halaman Index Komentar (Pengumuman, Post, dan Pengaduan)
Gambar 4.8 Halaman Index Komentar (Pengumuman, Post, dan Pengaduan)
Pada Gambar 4.8, halaman index komentar menampilkan semua komentar pengguna pada semua data yang ada. Pengguna bisa melihat detail dari setiap komentar, update komentar, dan hapus komentar.
Halaman Detail Komentar (Pengumuman, Post, dan Pengaduan)
Gambar 4.9 Halaman Detail Komentar (Pengumuman, Post, dan Pengaduan)
Pada Gambar 4.9, halaman detail komentar menampilkan detail dari komentar yang dipilih beserta pilihan untuk update komentar.
78
Halaman Update Komentar (Pengumuman, Post, dan Pengaduan)
Gambar 4.10 Halaman Update Komentar (Pengumuman, Post, dan Pengaduan)
Pada Gambar 4.10, halaman update komentar menampilkan form untuk update komentar data yang dipilih. Halaman juga menampilkan kotak peringatan bilamana komentar bukan milik pengguna. Bila pengguna tidak jadi update komentar, bisa memilik link untuk kembali ke halaman index komentar.
Halaman Index Post
Gambar 4.11 Halaman Index Post
Pada Gambar 4.11, halaman index post menampilkan semua post yang disimpan dalam database, dengan pilihan untuk menambah post, dan pilihan untuk mengurutkan post berdasarkan No. Post, Nama Penulis, Judul Post, Isi Post, dan Tanggal Dibuat.
79
Halaman Tambah Post
Gambar 4.12 Halaman Tambah Post
Pada Gambar 4.12, halaman tambah post menampilkan form untuk menambah post. Bila pengguna tidak jadi menambah post, bisa memilih link untuk kembali ke halaman index post.
80
Halaman Detail Post
Gambar 4.13 Halaman Detail Post
Pada Gambar 4.13, halaman detail post menampilkan detail dari post yang dipilih, pilihan untuk update post (bila milik pengguna), semua komentar untuk post tersebut, pilihan untuk menambah komentar, dan melihat semua komentar post pengguna.
Halaman Update Post
Gambar 4.14 Halaman Update Post
81
Pada Gambar 4.14, halaman update post menampilkan form untuk update post yang dipilih dan menampilkan kotak peringatan bilamana post bukan milik pengguna. Bila pengguna tidak jadi update post, bisa memilih link untuk kembali ke halaman index post.
Halaman Index Pengaduan
Gambar 4.15 Halaman Index Pengaduan
Pada Gambar 4.15, halaman index pengaduan menampilkan semua pengaduan yang disimpan dalam database, dengan pilihan untuk menambah pengaduan, dan mengurutkan pengaduan berdasarkan No. Laporan, Nama Pelapor, Kategori, Keterangan Laporan, Isi Laporan, dan Tanggal Dibuat.
82
Halaman Tambah Pengaduan
Gambar 4.16 Halaman Tambah Pengaduan
Pada Gambar 4.16, halaman tambah pengaduan menampilkan form untuk menambah pengaduan. Bila pengguna tidak jadi menambah pengaduan, bisa memilih link untuk kembali ke index pengaduan.
Halaman Detail Pengaduan
Gambar 4.17 Halaman Detail Pengaduan
83
Pada Gambar 4.17, halaman detail pengaduan menampilkan detail dari pengaduan yang dipilih, semua komentar untuk pengaduan tersebut, pilihan untuk update pengaduan (bila milik pengguna), menambah komentar, dan melihat semua komentar pengguna.
Halaman Update Pengaduan
Gambar 4.18 Halaman Update Pengaduan
Pada Gambar 4.18, halaman update pengaduan menampilkan form untuk update pengaduan yang dipilih dan menampilkan kotak peringatan bilamana pengaduan bukan milik pengguna. Bila pengguna tidak jadi update pengaduan, bisa memilih link untuk kembali ke halaman index pengaduan.
84
Halaman Pesan
Gambar 4.19 Halaman Pesan
Pada Gambar 4.19, halaman pesan menampilkan semua pesan masuk dan pesan keluar pengguna, serta link untuk menambah pesan. Pada bagian pesan masuk, pengguna mempunyai pilihan untuk melihat detail pesan dan menghapus pesan. Pada bagian pesan keluar, pengguna mempunyai pilihan untuk melihat detail pesan dan update pesan.
85
Halaman Tambah Pesan
Gambar 4.20 Halaman Tambah Pesan
Pada Gambar 4.20, halaman tambah pesan menampilkan form untuk penambahan pesan. Form untuk Tujuan juga dilengkapi dengan fitur Autocomplete yang sama dengan yang ada pada halaman Login, untuk mempermudah dalam proses penambahan pesan (tidak harus menghafalkan atau menebak nama pengguna yang tersimpan dalam database). Bila pengguna tidak jadi menambah pesan, bisa memilih link untuk kembali ke halaman pesan.
Halaman Detail Pesan
Gambar 4.21 Halaman Detail Pesan
Pada Gambar 4.21, halaman detail pesan menampilkan detail dari pesan yang dipilih. Pengguna mempunyai pilihan untuk update pesan (bila milik pengguna).
86
Halaman Update Pesan
Gambar 4.22 Halaman Update Pesan
Pada Gambar 4.22, halaman update pesan menampilkan form untuk update pesan yang dipilih dan kotak peringatan bilamana pesan bukan milik pengguna. Bila pengguna tidak jadi update pesan, bisa memilih link untuk kembali ke halaman pesan.
Halaman Pencarian Warga
Gambar 4.23 Halaman Pencarian Warga
87
Pada Gambar 4.23, halaman pencarian warga menampilkan tabel dan form (Advanced Search) untuk pencarian warga. Untuk pencarian warga, pengguna hanya cukup input tulisan yang mereka cari pada kotak dibawah header kolom atau menggunakan fitur Advanced Search yang menampilkan form di atas tabel untuk pencarian lebih rinci. Pengguna juga bisa melihat profil setiap warga dengan memilih tombol dalam tabel. Tampilan hasil pencarian warga bisa dilihat pada gambar 4.24.
Tampilan Hasil Pencarian Warga
Gambar 4.24 Tampilan Hasil Pencarian Warga
Gambar 4.24 menampilkan contoh hasil pencarian warga dengan cara input tulisan ke dalam kotak pencarian di dalam tabel.
88
Halaman Profil Warga
Gambar 4.25 Halaman Profil Warga
Pada Gambar 4.25, halaman profil warga menampilkan informasi atribut yang dimiliki oleh pengguna, beserta tampilan 5 Post Terbaru dam 5 Pengaduan Terbaru. Pengguna mempunyai pilihan untuk update profil (bila profil milik pengguna).
89
Halaman Update Profil
Gambar 4.26 Halaman Update Profil
Pada Gambar 4.26, halaman update profil menampilkan form untuk update profil. Pengguna yang ingin mengubah password harus mengisi form Password dan Konfirmasi Password, dan isi dari kedua form tersebut harus sama. Pengguna yang tidak ingin mengubah password-nya tidak perlu mengisi kedua form tersebut, cukup dikosongkan saja. Bila pengguna tidak jadi update profil, bisa memilih link untuk kembali ke halaman profil warga.
90
4.1.2.2 Contoh Pengoperasian Aplikasi (untuk Admin) Halaman Home untuk Admin
Gambar 4.27 Halaman Home untuk Admin
Pada Gambar 4.27, halaman home untuk Admin menampilkan menu yang sama dengan menu untuk Warga, dengan tambahan satu menu khusus untuk Admin yaitu menu Admin di sebelah menu profil. Menu ini hanya bisa diakses pengguna dengan status Admin dan tidak bisa diakses oleh Warga.
91
Halaman Utama Admin
Gambar 4.28 Halaman Utama Admin
Pada Gambar 4.28, halaman utama Admin menampilkan daftar warga yang hanya bisa diakses oleh Admin. Admin bisa melihat, update, dan hapus profil warga. Halaman ini juga menampilkan pilihan untuk menambah data warga, menambah pengumuman, dan melihat daftar data lainnya.
92
Halaman Penambahan Data (Warga, Pengumuman)
Gambar 4.29 Halaman Penambahan Data (Warga, Pengumuman)
Pada Gambar 4.29, halaman penambahan data yang dicontohkan adalah halaman tambah data warga. Halaman ini hanya bisa diakses oleh Admin dan tidak bisa diakses oleh Warga. Bila Admin tidak jadi menambah data warga, bisa memilih link untuk kembali ke halaman daftar warga.
Halaman Update Data (Warga, Pengumuman)
Gambar 4.30 Halaman Update Data (Warga, Pengumuman)
93
Pada Gambar 4.30, halaman update data yang dicontohkan adalah halaman update pengumuman. Halaman ini hanya bisa diakses oleh Admin dan tidak bisa diakses oleh Warga. Bila Admin tidak jadi update pengumuman, bisa memilih link untuk kembali ke daftar pengumuman.
4.2 Software Testing Software Testing akan dilakukan pada aplikasi untuk memastikan aplikasi berjalan lancar tanpa error yang serius. Metode yang digunakan dalam software testing adalah metode Black-Box Testing, yaitu adalah testing tanpa melihat proses internal yang dilakukan oleh aplikasi dan terfokus pada aspek fungsional aplikasi. Test Case akan terfokus pada proses-proses utama yang berjalan pada aplikasi, yang melibatkan input dari pengguna terhadap aplikasi dan hasil yang didapatkan berdasarkan input tersebut.
4.2.1 Software Testing Login/Logout •
Login dengan form Nama Lengkap dan Password kosong.
o
Hasil: Tampilan error message “Nama Lengkap dan Password harus
diisi” dan tidak dilakukan login, seperti ditampilkan pada Gambar 4.31.
Gambar 4.31 Tampilan Login dengan Form Kosong
o
Status: Sukses.
94
•
Login dengan salah satu form kosong
o
Hasil: Tampilan error message “Nama Lengkap dan Password harus
diisi” dan tidak dilakukan login, seperti ditampilkan pada Gambar 4.32.
Gambar 4.32 Tampilan Login dengan salah satu form kosong
o
Status: Sukses.
•
Login dengan Nama Lengkap atau Password salah
o
Hasil: Tampilan error message “Incorrect username or password”
dan tidak dilakukan login, seperti ditampilkan pada Gambar 4.33.
95
Gambar 4.33 Tampilan Login dengan Nama Lengkap atau Password salah
o
Status: Sukses, dengan error message yang hendaknya ditampilkan
dengan Bahasa Indonesia. Namun, error message tersebut bersifat built-in dan tidak cukup jelas bagaimana mengubah tampilan error message yang dimaksud. •
Login dengan Nama Lengkap dan Password benar
o
Hasil: Dillakukan proses login dan kembali ke halaman Home atau ke
halaman yang ingin diakses pada saat belum login. Tampilan halaman Home setelah login bisa dilihat pada Gambar 4.4. o
Status: Sukses.
•
Logout dengan memilih menu Logout atau link Logout pada
halaman Home o
Hasil: Dilakukan proses logout dan kembali ke halaman Home.
Tampilan halaman Home sesudah logout bisa dilihat pada Gambar 4.1. o
Status: Sukses.
96
4.2.2 Software Testing Penambahan atau Update Data •
Penambahan atau Update Data Warga dengan form required
kosong o
Hasil: Data tidak berhasil di tambah atau di-update dan muncul error
message yang mengindikasikan bahwa form harus diisi, seperti bisa dilihat pada Gambar 4.34. Gambar mencontohkan penambahan Data Warga, namun hasilnya sama juga pada saat proses update, karena menggunakan komponen form dan logika validasi yang sama.
Gambar 4.34 Penambahan atau Update Data Warga dengan form required kosong
o
Status: Sukses.
•
Penambahan atau Update Data Warga dengan NIK kurang dari
16 digit
97
o
Hasil: Data tidak berhasil ditambah atau di-update dan muncul error
message yang mengindikasikan bahwa NIK kurang dari 16 digit, seperti bisa dilihat pada Gambar 4.35.
Gambar 4.35 Penambahan atau Update Data Warga dengan NIK kurang dari 16 digit o
Status: Sukses.
•
Penambahan atau Update Data Warga dengan NIK bukan angka
o
Hasil: Data tidak berhasil ditambah atau di-update dan muncul error
message yang mengindikasikan bahwa NIK harus berupa angka, seperti bisa dilihat pada Gambar 4.36.
98
Gambar 4.36 Penambahan atau Update Data Warga dengan NIK bukan angka o
Status: Sukses.
•
Penambahan atau Update Data Warga dengan Password dan
Konfirmasi Password tidak sama o
Hasil: Data tidak berhasil ditambah atau di-update dan muncul error
message yang mengindikasikan bahwa Password dan Konfirmasi Password harus sama, seperti bisa dilihat pada Gambar 4.37.
Gambar 4.37 Penambahan atau Update Data Warga dengan Password dan Konfirmasi Password tidak sama
99
o
Status: Sukses. Pada saat penambahan atau update Data Warga,
Password dan Konfirmasi Password tidak harus diisi; namun bila harus diisi, isi kedua form tersebut harus sama. Bila tidak diisi pada saat penambahan atau update Data Warga, Password akan kosong atau tidak diubah (bila Password ada). Hal ini dilakukan agar proses update Data Warga tidak mengharuskan pengguna untuk input Password dan Konfirmasi Password bahkan pada saat pengguna tidak ingin mengubah Password-nya. Hal ini mungkin akan diubah kedepannya untuk mengurangi kesalahan dari pihak Admin, karena Password dibutuhkan untuk proses Login. •
Penambahan atau Update Data Warga dengan No. Telepon
bukan angka o
Hasil: Data tidak berhasil ditambah atau di-update dan muncul error
message yang mengindikasikan bahwa No. Telepon harus berupa angka, seperti bisa dilihat pada Gambar 4.38.
Gambar 4.38 Penambahan atau Update Data Warga dengan No. Telepon bukan angka
o
Status: Sukses. No. Telepon bukan merupakan form yang harus diisi
(required), namun bilamana harus diisi, isi form tersebut harus berupa angka.
100
Error message akan ditampilkan bila isi form tersebut berupa huruf atau mengandung huruf. •
Penambahan atau Update Data Warga dengan semua form benar
o
Hasil: Data berhasil ditambah atau di-update dan pengguna ditujukan
pada halaman profil warga yang sudah ditambahkan atau di-update, seperti bisa dilihat pada Gambar 4.39.
Gambar 4.39 Penambahan atau Update Data Warga dengan semua form benar
o
Status: Sukses.
•
Penambahan atau Update Pengumuman dengan semua form
required kosong o
Hasil: Data tidak berhasil ditambah atau di-update dan muncul error
message bahwa form harus diisi, seperti bisa dilihat pada Gambar 4.40.
101
Gambar 4.40 Penambahan atau Update Pengumuman dengan semua form required kosong
o
Status: Sukses.
•
Penambahan atau Update Pengumuman dengan semua form
benar o
Hasil: Data berhasil ditambah atau di-update dan pengguna ditujukan
pada halaman detail Pengumuman yang sudah ditambah atau di-update. o
Status: Sukses.
•
Penambahan atau Update Post dengan semua form required
kosong o
Hasil: Data tidak berhasil ditambah atau di-update dan muncul error
message yang mengindikasikan bahwa form harus diisi, seperti bisa dilihat pada Gambar 4.41.
102
Gambar 4.41 Penambahan atau Update Post dengan semua form required kosong
o
Status: Sukses.
•
Penambahan atau Update Post dengan semua form benar
o
Hasil: Data berhasil ditambah atau di-update dan pengguna ditujukan
pada halaman detail Post yang sudah ditambah atau di-update. o
Status: Sukses.
•
Penambahan atau Update Pengaduan dengan semua form
required kosong o
Hasil: Data tidak berhasil ditambah atau di-update dan muncul error
message yang mengindikasikan bahwa form harus diisi, seperti bisa dilihat pada Gambar 4.42.
103
Gambar 4.42 Penambahan atau Update Pengaduan dengan semua form required kosong
o
Status: Sukses.
•
Penambahan atau Update Pengaduan dengan semua form benar
o
Hasil: Data berhasil ditambah atau di-update dan pengguna ditujukan
pada halaman detail Pengaduan yang sudah ditambah atau di-update. o
Status: Sukses.
•
Penambahan atau Update Pesan dengan semua form required
kosong o
Hasil: Data tidak berhasil ditambah atau di-update dan muncul error
message yang mengindikasikan bahwa form harus diisi, seperti bisa dilihat pada Gambar 4.43.
104
Gambar 4.43 Penambahan atau Update Pesan dengen semua form required kosong
o
Status: Sukses.
•
Penambahan atau Update Pesan dengan semua form benar
o
Hasil: Data berhasil ditambah atau di-update dan pengguna ditujukan
pada halaman index Pesan yang juga menampilkan pesan yang sudah ditambah atau di-update. o
Status: Sukses.
4.2.3 Software Testing Penghapusan Data Setiap proses penghapusan data pada aplikasi menampilkan dialog konfirmasi. Konfirmasi dilakukan untuk memastikan apakah pengguna yakin ingin menghapus data yang sudah dipilih atau tidak. Hal ini dilakukan untuk mencegah kesalahan dan memungkinkan pembalikan aksi bilamana pengguna tidak jadi melakukan penghapusan data. Contoh dari dialog konfirmasi tersebut bisa dilihat pada Gambar 4.44. Bagian Software Testing ini akan membahas Test Case yang terfokus pada proses penghapusan data.
105
Gambar 4.44 Tampilan Dialog Konfirmasi Penghapusan Data
•
Penghapusan Data Warga
o
Hasil: Data berhasil dihapus dan pengguna ditujukan pada halaman
Daftar Warga yang hanya bisa diakses oleh Admin. o
Status: Sukses.
•
Penghapusan Pengumuman dengan Komentar
o
Hasil: Data tidak berhasil dihapus dan muncul error message berupa
dialog box yang mengindikasikan detail dari error yang terjadi, seperti bisa dilihat pada Gambar 4.45.
106
Gambar 4.45 Penghapusan Data Pengumuman dengan Komentar
o
Status: Gagal. Pada beberapa halaman Daftar Data yang hanya bisa
diakses oleh Admin (terutama data yang bisa dikomentari), terdapat tulisan peringatan bahwa data baru bisa dihapus apabila semua komentar untuk data tersebut dihapus. Peringatan ini bertujuan untuk memberitahu pengguna atas error ini, bilamana data yang ingin dihapus masih memiliki komentar yang dihubungkan dengan data tersebut. Error ini tidak bersifat fatal dan tidak terjadi kehilangan data yang tidak disengaja. Error message di dialog box tersebut muncul dari sistem database yang digunakan oleh aplikasi, sebagai perlindungan atas error yang dilakukan oleh aplikasi terhadap database. Error ini bisa dihindari apabila semua komentar untuk data tersebut sudah dihapus. Penjelasan ini berlaku untuk Data Pengumuman, Post, dan Pengaduan. •
Penghapusan Pengumuman tanpa Komentar
o
Hasil: Data berhasil dihapus dan pengguna ditujukan pada halaman
Daftar Pengumuman yang hanya bisa diakses oleh Admin.
107
o
Status: Sukses.
•
Penghapusan Post dengan Komentar
o
Hasil: Data tidak berhasil dihapus dan muncul error message berupa
dialog box yang mengindikasikan detail dari error yang terjadi, seperti pada Gambar 4.45, dengan perbedaan detail dari error message yang ditampilkan. o
Status: Gagal. Pada beberapa halaman Daftar Data yang hanya bisa
diakses oleh Admin (terutama data yang bisa dikomentari), terdapat tulisan peringatan bahwa data baru bisa dihapus apabila semua komentar untuk data tersebut dihapus. Peringatan ini bertujuan untuk memberitahu pengguna atas error ini, bilamana data yang ingin dihapus masih memiliki komentar yang dihubungkan dengan data tersebut. Error ini tidak bersifat fatal dan tidak terjadi kehilangan data yang tidak disengaja. Error message di dialog box tersebut muncul dari sistem database yang digunakan oleh aplikasi, sebagai perlindungan atas error yang dilakukan oleh aplikasi terhadap database. Error ini bisa dihindari apabila semua komentar untuk data tersebut sudah dihapus. Penjelasan ini berlaku untuk Data Pengumuman, Post, dan Pengaduan.
•
Penghapusan Post tanpa Komentar
o
Hasil: Data berhasil dihapus dan pengguna ditujukan pada halaman
Daftar Post yang hanya bisa diakses oleh Admin. o
Status: Sukses.
•
Penghapusan Pengaduan dengan Komentar
o
Hasil: Data tidak berhasil dihapus dan muncul error message berupa
dialog box yang mengindikasikan detail dari error yang terjadi, seperti pada Gambar 4.45, dengan perbedaan detail dari error message yang ditampilkan. o
Status: Gagal. Pada beberapa halaman Daftar Data yang hanya bisa
diakses oleh Admin (terutama data yang bisa dikomentari), terdapat tulisan peringatan bahwa data baru bisa dihapus apabila semua komentar untuk data tersebut dihapus. Peringatan ini bertujuan untuk memberitahu pengguna atas error ini, bilamana data yang ingin dihapus masih memiliki komentar yang
108
dihubungkan dengan data tersebut. Error ini tidak bersifat fatal dan tidak terjadi kehilangan data yang tidak disengaja. Error message di dialog box tersebut muncul dari sistem database yang digunakan oleh aplikasi, sebagai perlindungan atas error yang dilakukan oleh aplikasi terhadap database. Error ini bisa dihindari apabila semua komentar untuk data tersebut sudah dihapus. Penjelasan ini berlaku untuk Data Pengumuman, Post, dan Pengaduan. •
Penghapusan Pengaduan tanpa Komentar
o
Hasil: Data berhasil dihapus dan pengguna ditujukan pada halaman
Daftar Pengaduan yang hanya bisa diakses oleh Admin. o
Status: Sukses.
•
Penghapusan Pesan
o
Hasil: Data berhasil dihapus dan pengguna ditujukan pada halaman
Pesan, tampilan dialog konfirmasi untuk halaman Pesan bisa dilihat pada Gambar 4.44. o
Status: Sukses.
•
Penghapusan Komentar Pengumuman
o
Hasil: Data berhasil dihapus dan pengguna ditujukan pada halaman
index komentar pengumuman. o
Status: Sukses.
•
Penghapusan Komentar Post
o
Hasil: Data berhasil dihapus dan pengguna ditujukan pada halaman
index komentar post. o
Status: Sukses.
•
Penghapusan Komentar Pengaduan
o
Hasil: Data berhasil dihapus dan pengguna ditujukan pada halaman
index komentar pengaduan. o
Status: Sukses.
109
4.2.4 Software Testing Pencarian Data Warga •
Pencarian Data Warga dengan kotak pada tabel.
o
Hasil: Pencarian berhasil dan data yang dicari muncul pada tabel.
Tampilan hasil pencarian yang berhasil dengan menggunakan kotak pada tabel bisa dilihat pada Gambar 4.24. o
Status: Sukses.
•
Pencarian Data Warga dengan fitur Advanced Search
o
Hasil: Pencarian berhasil dan data yang dicari muncul pada tabel,
seperti bisa dilihat pada Gambar 4.46.
Gambar 4.46 Pencarian Data Warga dengan fitur Advanced Search
o
Status: Sukses
110
4.3 Evaluasi
4.3.1 Evaluasi Kinerja Aplikasi Bagian ini akan membahas hasil evaluasi atas kinerja aplikasi dengan menggunakan Performance Tools. Performance Tools yang digunakan adalah YSlow dan Page Speed. Hal yang di-evaluasi dengan kedua tools tersebut adalah performa aplikasi berdasarkan pemrograman aplikasi (kinerja internal) dan tidak melakukan evaluasi berdasarkan kecepatan akses internet. Evaluasi dilakukan dengan menggunakan extension Firebug untuk Mozilla Firefox, yang juga di-instalasi dengan YSlow dan Page Speed.
4.3.1.1 Evaluasi Kinerja Aplikasi dengan YSlow
Gambar 4.47 Evaluasi Kinerja Aplikasi dengan YSlow (Ruleset YSlow V2)
Pada Gambar 4.47, bisa dilihat hasil evaluasi kinerja aplikasi dengan menggunakan YSlow dengan Grade C, dengan nilai performa 78. Ruleset yang digunakan dalam evaluasi ini adalah YSlow (V2), yang umumnya digunakan untuk website yang lebih kompleks atau lebih besar. Berikut adalah detail dari penilaian yang paling kritis berdasarkan ruleset tersebut: •
Grade B: Make fewer HTTP requests.
•
Grade F: Use a Content Delivery Network (CDN).
•
Grade F: Add Expires headers.
111
•
Grade F: Compress components with gzip.
Gambar 4.48 Evaluasi Kinerja Aplikasi dengan YSlow (Ruleset Classic V1)
Pada Gambar 4.48, bisa dilihat hasil evaluasi kinerja aplikasi dengan menggunakan YSlow dengan menggunakan ruleset Classic (V1), yang juga umumnya digunakan untuk website yang lebih kompleks atau lebih besar, dengan Grade E dan nilai performa 57. Berikut adalah detail penilaian yang paling kritis berdasarkan ruleset tersebut: •
Grade B: Make fewer HTTP requests.
•
Grade F: Use a Content Delivery Network (CDN).
•
Grade F: Add Expires headers.
•
Grade F: Compress components with gzip.
112
Gambar 4.49 Evaluasi Kinerja Aplikasi dengan YSlow (Ruleset Small Site or Blog)
Pada Gambar 4.48, bisa dilihat hasil evaluasi kinerja aplikasi dengan menggunakan YSlow dengan menggunakan ruleset Small Site or Blog, yang lebih akurat untuk website yang lebih sederhana dan tidak terlalu kompleks, dengan Grade B dan nilai performa 89. Berikut dalah detail penilaian yang paling kritis berdasarkan ruleset tersebut: •
Grade B: Make fewer HTTP requests.
•
Grade F: Compress components with gzip.
Dari hasil evaluasi kinerja aplikasi menggunakan YSlow dengan 3 ruleset yang berbeda, dapat disimpulkan bahwa penilaian yang lebih akurat adalah penilaian dengan menggunakan ruleset Small Site or Blog, karena aplikasi bersifat sederhana dan tidak kompleks. Ruleset lain seperti YSlow (V2) dan Classic (V1) melakukan penilaian secara lebih kritis dan umumnya digunakan untuk mengevaluasi website yang lebih besar dan kompleks. Walaupun pada dasarnya aplikasi berjalan sangat cepat dengan performa yang sangat baik, evaluasi tersebut terfokus pada pemrograman atau kinerja internal dari aplikasi. Aplikasi dibantu kecepatan performanya dengan hosting services yang digunakan, yang meningkatkan performa dasar dan pada saat bersamaan meningkatkan efisiensi kinerja internal aplikasi.
113
4.3.1.2 Evaluasi Kinerja Aplikasi dengan Page Speed
Gambar 4.50 Evaluasi Kinerja Aplikasi dengan Page Speed
Pada Gambar 4.50, bisa dilihat hasil evaluasi kinerja aplikasi dengan menggunakan Page Speed, dengan nilai performa 48. Berikut adalah detail penilaian yang paling kritis dan yang hendaknya dilakukan untuk meningkatkan nilai performa: •
Leverage Browser Caching
•
Enable Compression
Berdasarkan penilaian dengan Page Speed performa aplikasi tidak terlalu bagus, ini karena Page Speed mempunyai ruleset yang lebih strict dibandingkan dengan YSlow. Page Speed umumnya digunakan untuk membantu dalam proses optimisasi website atau web application berdasarkan standar Google, yang juga membantu dalam pencarian lebih akurat dengan menggunakan Search Engine.
114
4.3.2 Evaluasi Kemudahan Penggunaan Evaluasi atas kemudahan penggunaan akan menggunakan 8 Golden Rules of User Interface Design, yaitu: 1. Berusaha untuk konsisten. •
Setiap halaman website menggunakan layout, warna, menu dan
keterangan yang bersifat konsisten agar penggunaan aplikasi mudah, sederhana, dan tidak membingungkan. Contoh yang paling sederhana adalah tampilan menu yang konsisten untuk semua pengguna yang belum login, sudah login, dan pengguna Admin; semua pengguna yang belum login hanya akan melihat menu Home, Pengumuman, dan Login; semua pengguna yang sudah login akan melihat menu yang lebih lengkap; semua pengguna Admin akan melihat menu khusus Admin. •
Untuk lebih jelasnya bisa melihat Gambar 4.1 – 4.30, pada bagian Contoh
Hasil.
2. Menyediakan kebutuhan universal. •
Kebutuhan universal yang diterapkan dalam aplikasi ini adalah
penggunaan shortcut. Hampir setiap halaman website terdapat link yang berperan sebagai shortcut untuk mempercepat dan mempermudah navigasi pengguna untuk meningkatkan usability dari aplikasi. Contoh paling dasar adalah pada halaman Home terdapat link untuk pilihan fitur utama, yang juga bisa diakses pada menu utama pada bagian atas setiap halaman website; link untuk login atau logout, yang juga bisa dilakukan dengan menu utama. Pada halaman selain Home,, terdapat link yang berperan sebagai shortcut untuk menu yang ada di samping kanan halaman, yang digunakan untuk mempermudah pengguna agar tidak selalu harus menggunakan menu atau tombol back pada browser untuk navigasi. Contoh bisa dilihat pada Gambar 4.51.
115
Gambar 4.51 Contoh Penggunaan Shortcut pada Aplikasi
3. Memberikan umpan balik yang informatif. •
Website memberikan umpan balik setiap kali pengguna navigasi menu
atau link yang ada pada setiap halaman. Umpan balik yang dimaksud adalah tampilan halaman yang konsisten dengan apa yang dipilih oleh pengguna; misalnya pengguna memilih menu Pesan, hendaknya yang ditampilkan adalah halaman Pesan; bila pengguna memilih menu Profil, yang hendaknya ditampilkan adalah halaman Profil. Contoh lain dari umpan balik pada website adalah tampilan data yang sudah ditambah atau di-update setelah pengguna menambah atau update data. Contoh yang lebih jelas bisa dilihat pada bagian Contoh Hasil, Gambar 4.1 – 4.30, dan contoh gambar-gambar pada bagian Software Testing (yang mengindikasikan error), Gambar 4.31 – Gambar 4.45
116
4. Merancang dialog yang memberikan penutupan (keadaan akhir). •
Pada website ini tidak ada dialog atau pesan yang mengindikasikan
bahwa suatu pekerjaan telah selesai; yang ada hanyalah umpan balik dari aksi tersebut tanpa tampilan dialog atau pesan.
5. Memberikan pencegahan kesalahan dan penanganan kesalahan yang sederhana. •
Beberapa halaman pada website memberikan informasi kepada pengguna
atas error yang bisa muncul bilamana pengguna melakukan hal tersebut dan atau memberi tahu bahwa pengguna tidak bisa melakukan suatu hal, tapi bila dilakukan akan menyebabkan error yang tidak jelas sebabnya, bilamana tidak diinformasikan sebelumnya. Ada 2 contoh yang bisa dilihat pada kasus ini, bisa dilihat pada Gambar 4.52 dan Gambar 4.53. •
Contoh lainnya adalah tampilan dialog setiap kali pengguna ingin
menghapus data, yang bisa mencegah kesalahan bilamana pengguna tidak yakin ingin menghapus data tersebut, bisa dilihat pada Gambar 4.44. •
Contoh yang lebih jelas adalah error message yang ditampilkan pada saat
penambahan, update, dan login. Setiap error message menjelaskan kesalahan yang dimaksud dan memberitahu pengguna apa yang harus dilakukan untuk menangani kesalahan tersebut. Misal, error message “NIK harus 16 digit” memberitahu pengguna untuk memasukkan 16 angka untuk NIK, atau “Harus angka” untuk input yang harusnya berupa angka seperti NIK atau No. Telepon. Contoh lebih jelasnya bisa dilihat pada bagian Software Testing, Gambar 4.31 – Gambar 4.45.
117
Gambar 4.52 Contoh Pencegahan Kesalahan Penghapusan Data
Gambar 4.53 Contoh Pencegahan Kesalahan Update Data •
Pada Gambar 4.52, pengguna diberitahu error yang akan muncul
bilamana pengguna menghapus data yang masih memiliki komentar yang dihubungkan dengan data tersebut. Pada saat pengguna melakukan hal tersebut, error akan terjadi dan dialog box ditampilkan pada layar yang mengindikasikan detail dari error tersebut. Tidak ada data yang hilang secara
118
disengaja maupun tidak disengaja atas error tersebut. Inti dari pesan tersebut adalah memberitahu pengguna sebelumnya bilamana pengguna melakukan kesalahan dan tidak bingung atau frustrasi pada saat dialog box ditampilkan pada layar. Contoh dari dialog box yang dimaksud bisa dilihat pada Gambar 4.45. •
Pada Gambar 4.53, pesan dalam kotak kuning menmberitahu
pengguna bahwa post tidak bisa di-update karena pengguna bukan penulis aslinya. Bilamana pengguna mencoba untuk update post tersebut, tidak akan terjadi apa-apa dan isi dari form akan reset ke nilai sebelumnya. Bila pesan tersebut tidak ditampilkan atau dibuat, akan membingungkan pengguna bila mereka coba untuk update post yang bukan miliknya, karena tidak terlalu jelas sebab kesalahan tersebut terjadi bila pesan tidak ditampilkan.
6. Memungkinkan pembalikan aksi yang mudah. •
Pada website banyak halaman yang menyediakan link untuk navigasi
balik ke halaman sebelumnya, bilamana pengguna tidak jadi melakukan sesuatu atau ingin langsung balik ke halaman utama dari kategori fitur. Misalnya, link untuk kembali ke halaman profil pada halaman update profil yang disediakan agar pengguna bisa langsung kembali ke halaman profil bila tidak jadi update profil. Contoh bisa dilihat pada Gambar 4.1 – 4.30 pada bagian Contoh Hasil dan beberapa gambar pada bagian ini. •
Tampilan dialog box pada saat pengguna ingin menghapus data juga
memungkinkan pembalikan aksi, terutama bila pengguna tidak jadi menghapus data tersebut. Contoh dialog box bisa dilihat pada Gambar 4.44.
7. Mendukung pusat kendali internal (internal locus of control). •
Navigasi dari aplikasi berjalan seperti seharusnya dan merespon langsung
interaksi dari pengguna terhadap menu atau link yang mereka pilih. Bila pengguna ingin menambah data, aplikasi menambah data tersebut ke dalam database; bila pengguna ingin update data, aplikasi update data yang dipilih
119
dan kemudian disimpan dalam database; bila pengguna ingin menghapus data, aplikasi menghapus data tersebut. Contoh bisa dilihat pada bagian Contoh Hasil, Gambar 4.1 – 4.30 dan bagian Software Testing, Gambar 4.31 – 4.45. Intinya adalah aplikasi sudah dibuat sedemikian rupa agar pengguna memegang kendali penuh atas sistem sesuai dengan kebutuhan mereka.
8. Mengurangi beban ingatan jangka pendek. •
Pengembangan aplikasi difokuskan atas kemudahan penggunaan dan
navigasi
yang
sederhana,
mudah
diingat,
konsisten,
dan
tidak
membingungkan pengguna. Pengguna dari tingkat keahlian pemula hingga power users bisa menggunakan website dengan mudah dengan penempatan menu yang rapih, mudah diingat, dan intuitif. Penempatan link yang berperan sebagai shortcut juga membantu dalam mengurangi beban ingatan jangka pendek pengguna, yang juga pada saat bersamaan mempermudah penggunaan aplikasi. Tambahan lainnya yang mungkin belum disebut adalah tampilan breadcrumb di hampir setiap halaman pada website yang juga memudahkan navigasi pengguna. Contoh breadcrumb bisa dilihat pada Gambar 4.54, terletak di atas header halaman.
Gambar 4.54 Contoh Breadcrumb
120
•
Contoh dari tampilan user interface bisa dilihat pada bagian Contoh
Hasil, Gambar 4.1 – 4.30.
4.3.3 Evaluasi Pengguna Evaluasi dilakukan dengan kuesioner yang contohnya bisa dilihat pada Lampiran 2. Evaluasi dilakukan pada 15 orang untuk menilai kemudahan akses, kualitas tampilan, kemudahan penggunaan, tingkat kepuasan keseluruhan, dan usulan pengembangan kedepannya.
Berikut adalah hasil kuesioner yang dilakukan terhadap 15 orang: • 15 dari 15 orang menilai baik atas Kemudahan Akses (100%). • 13 dari 15 orang menilai baik atas Kualitas Tampilan (86%). • 15 dari 15 orang menilai baik atas Kemudahan Penggunaan (100%). • 13 dari 15 orang menilai baik atas Tingkat Kepuasan Keseluruhan (86%). • 2 dari 15 orang menilai sedang atas Kualitas Tampilan (13%). • 2 dari 15 orang menilai sedang atas Tingkat Kepuasan Keseluruhan (13%).
Usulan pengembangan yang didapatkan dari kuesioner bisa diuraikan sebagai berikut: • Bagian pengaduan hendaknya ditampilkan pada saat sebelum login. • Pengumuman dari Ketua RT ditampilkan paling atas pada halaman Home. • Pemberian warna pada layout yang lebih bervariasi agar bisa menarik perhatian dan memudahkan pembacaan tulisan pada website. • Implementasi Chat Engine pada website agar lebih memudahkan komunikasi.
121
• Sistem pesan yang memungkinkan pembalasan pesan (reply message) secara langsung tanpa harus mengetik nama pengguna lagi untuk membalas pesan. • Pengiriman pesan juga bisa dilakukan pada halaman pencarian warga dengan tombol kirim pesan atau link pada kolom tabel. • Fitur post warga yang lebih bervariasi seperti penambahan gambar, musik atau audio clip. • Sistem email dalam website seperti pengiriman, penyimpanan, dan pengelolaan email. • Bisa menggunakan fitur penambahan komentar pengumuman, dan semua fitur pengaduan tanpa harus login. • Bisa customize interface website (skin). • Fitur Online Help dengan menggunakan Chatbox atau Yahoo Messenger. • Bisa pasang dan ganti profile picture dengan mudah. • Galeri media untuk setiap pengguna. Bisa berupa foto, musik, atau audio clip.
Berdasarkan evaluasi pengguna yang dilakukan, dapat disimpulkan bahwa pengguna cukup puas dengan kemudahan akses, kualitas tampilan dan kemudahan penggunaan aplikasi. Usulan pengembangan dari pengguna sangat bermanfaat untuk proses pengembangan lebih lanjut serta bisa mendapatkan gambaran apa yang dibutuhkan oleh pengguna untuk peningkatan kualitas aplikasi dan pemenuhan kebutuhan pengguna.
