BAB 4 IMPLEMENTASI DAN EVALUASI

Transkripsi

1 BAB 4 IMPLEMENTASI DAN EVALUASI 4.1 Spesifikasi Perangkat Keras Spesifikasi perangkat keras yang diperlukan dalam implementasi sistem basis data e-learning pada SMAK 4 Penabur Jakarta sebagai berikut : 1. Spesifikasi minimum a. Server Side 1. Processor : Intel Pentium IV CPU 2,4 GHz, 2. Memory RAM : 2GB, 3. Memory Harddisk : 80GB, 4. Graphic Card / VGA Card : 128MB / On Board Graphic, 5. Monitor : 15, 6. DVD Writer, 7. Keyboard, 8. Mouse, 9. Modem up to 56kbps, 10. Kabel LAN UTP. b. Client Side 1. Processor : Intel Pentium IV CPU 1,7 GHz, 2. Memory RAM : 512MB, 3. Memory Harddisk : 40GB, 4. Graphic Card / VGA Card : 128MB / On Board Graphic, 5. Monitor : 15, 198

2 Keyboard, 7. Mouse, 8. Modem up to 56kbps, 9. Kabel LAN UTP. 2. Spesifikasi yang disarankan a. Server Side 1. Processor : Intel Pentium Core 2 Duo CPU 2,8 GHz, 2. Memory RAM : 4GB, 3. Memory Harddisk : 320GB, 4. Graphic Card / VGA Card : 512MB / On Board Graphic, 5. Monitor : 17, 6. DVD Writer, 7. Keyboard, 8. Mouse, 9. Modem up to 56kbps, 10. Kabel LAN UTP. b. Client Side 1. Processor : Intel Pentium IV CPU 2,4 GHz, 2. Memory RAM : 1GB, 3. Memory Harddisk : 120GB, 4. Graphic Card / VGA Card : 512MB / On Board Graphic, 5. Monitor : 17, 6. Keyboard, 7. Mouse,

3 Modem up to 56kbps, 9. Kabel LAN UTP. 4.2 Spesifikasi Perangkat Lunak Spesifikasi perangkat lunak yang diperlukan dalam implementasi sistem e- learning pada SMAK 4 Penabur Jakarta adalah sebagai berikut : 1. Server Side a. Sistem Operasi : Windows XP, b. DBMS Server : MySQL, c. Adobe Dreamweaver CS5 d. PHP Server : XAMPP Server / Apache Web Server, e. Browser : Firefox ver / Google Chrome ver. 20, f. Text Editor : Adobe Dreamweaver CS5 untuk melakukan editing code. 2. Client Side a. Sistem Operasi : Windows XP / Windows 7, b. Browser : Firefox ver / Google Chrome ver Spesifikasi Jaringan Untuk menjalankan aplikasi e-learning ini secara online dibutuhkan koneksi internet untuk mendukung interaksi antara server side dengan client side yang ditampilkan pada jendela browser. Tetapi untuk menjalankan aplikasi ini secara offline menggunakan koneksi web server XAMPP.

4 Tampilan Layar 1. Tampilan Halaman Admin Gambar 4.1 Tampilan Layar Halaman Login

5 Gambar 4.2 Tampilan Layar Halaman Home 202

6 Gambar 4.3 Tampilana Layar Halaman Change Password 203

7 Gambar 4.4 Tampilan Layar Message 204

8 Gambar 4.5 Tampilan Layar Create Message 205

9 Gambar 4.6 Tampilan Layar Sent Message 206

10 Gambar 4.7 Tampilan Layar View Message 207

11 Gambar 4.8 Tampilan Layar Materials 208

12 Gambar 4.9 Tampilan Layar Add Course 209

13 Gambar 4.10 Tampilan Layar View Subject Materials 210

14 Gambar 4.11 Tampilan Layar Add Assigment 211

15 Gambar 4.12 Tampilan Layar Upload Assigment 212

16 Gambar 4.13 Tampilan Layar Upload Materials 213

17 Gambar 4.14 Tampilan Layar View Detail Materials 214

18 Gambar 4.15 Tampilan Layar View Class 215

19 Gambar 4.16 Tampilan Layar Add Class 216

20 Gambar 4.17 Tampilan Layar Update Class 217

21 Gambar 4.18 Tampilan Layar View Student 218

22 Gambar 4.19 Tampilan Layar Add Student 219

23 Gambar 4.20 Tampilan Layar Update Student 220

24 Gambar 4.21 Tampilan Layar Detail Student 221

25 Gambar 4.22 Tampilan Layar View Teacher 222

26 Gambar 4.23 Tampilan Layar Add Teacher 223

27 Gambar 4.24 Tampilan Layar Detail Teacher 224

28 Gambar 4.25 Tampilan Layar Update Teacher 225

29 Gambar 4.26 Tampilan Layar View Schedule 226

30 Gambar 4.27 Tampilan Layar Detail Schedule 227

31 Gambar 4.28 Tampilan Layar Add Schedule 228

32 Gambar 4.29 Tampilan Layar View Teaching Schedule 229

33 Gambar 4.30 Tampilan Layar Detail Teaching Class Schedule 230

34 Gambar 4.31 Tampilan Layar Detail Teaching Teacher Schedule 231

35 Gambar 4.32 Tampilan Layar Add Teaching Schedule 232

36 Gambar 4.33 Tampilan Layar View Announcement 233

37 Gambar 4.34 Tampilan Layar Add Announcement 234

38 Gambar 4.35 Tampilan Layar Update Announcement 235

39 236 Gambar 4.36 Tampilan Layar Detail Announcement 2. Tampilan Halaman Siswa

40 Gambar 4.37 Tampilan Layar Login 237

41 Gambar 4.38 Tampilan Layar Home 238

42 Gambar 4.39 Tampilan Layar Profil 239

43 Gambar 4.40 Tampilan Layar Detail Announcements 240

44 Gambar 4.41 Tampilan Layar Change Password 241

46 Gambar 4.43 Tampilan Layar Create Message 243

47 Gambar 4.44 Tampilan Layar Detail Message 244

48 Gambar 4.45 Tampilan Layar Sent Item 245

49 Gambar 4.46 Tampilan Layar Detail Sent 246

50 Gambar 4.47 Tampilan Layar Material Class 247

51 Gambar 4.48 Tampilan Layar Materials 248

52 Gambar 4.49 Tampilan Layar Assigments 249

53 Gambar 4.50 Tampilan Layar Upload Answer 250

54 Gambar 4.51 Tampilan Layar Forum 251

55 Gambar 4.52 Tampilan Layar Create Topic 252

56 Gambar 4.53 Tampilan Layar Topic Forum 253

57 Gambar 4.54 Tampilan Layar Class Schedule 254

58 Gambar 4.55 Tampilan Layar Exam Schedule 255

59 Gambar 4.56 Tampilan Layar Score 256

60 257 Gambar 4.57 Tampilan Layar Detail Score 3. Tampilan Halaman untuk Guru

61 Gambar 4.58 Tampilan Layar Login 258

62 Gambar 4.59 Tampilan Layar Home 259

63 Gambar 4.60 Tampilan Layar Profile 260

64 Gambar 4.61 Tampilan Layar Detail Announcement 261

65 Gambar 4.62 Tampilan Layar Change Password 262

67 Gambar 4.64 Tampilan Layar Detail Message 264

68 Gambar 4.65 Tampilan Layar Sent Message 265

69 Gambar 4.66 Tampilan Detail Sent Message 266

70 Gambar 4.67 Tampilan Create Message 267

71 Gambar 4.68 Tampilan Detail Course 268

72 Gambar 4.69 Tampilan Additional Materials 269

73 Gambar 4.70 Tampilan Add Additional Material 270

74 Gambar 4.71 Tampilan Upload Material 271

75 Gambar 4.72 Tampilan Detail Assignment 272

76 Gambar 4.73 Tampilan Additional Assignment 273

77 Gambar 4.74 Tampilan Add Additional Assignment 274

78 Gambar 4.75 Tampilan Upload Additional Asssignment 275

79 Gambar 4.76 Tampilan Answer Assignment 276

80 Gambar 4.77 Tampilan Forum 277

81 Gambar 4.78 Tampilan Create Topics 278

82 Gambar 4.79 Tampilan Detail Topics 279

83 280 Gambar 4.80 Tampilan Teaching Schedule Gambar 4.81 Tampilan Score

84 281 Gambar 4.82 Tampilan Add score 4.5 Uji Coba Uji coba sistem dilakukan sebelum sistem benar benar diaplikasikan atau di publikasikan. Hal ini dilakukan untuk mencegah kesalahan kesalahan sistem yang

85 282 terjadi pada saat dipublikasikan. Uji coba dilakukan dengan 2 metode yaitu dengan pengujian black-box dan pengujian dengan white-box Pengujian Black-Box Pengujian ini difokuskan pada fungsionalitas dari sistem yang meliputi kesalahan fungsi, interface, dan basis data. Tahap uji coba ini dilakukan dengan cara mengakses dan memasukan data kedalam sistem dengan karakter data yang bervariasi. Berikut ini adalah hasil uji coba black-box tersebut : No. Tujuan Aksi yang Hasil 1. Menguji kesesuaian data siswa yang tampil dilayar dengan data di dalam database. 2. Menguji kesesuaian data guru yang tampil dilayar dengan data di dalam database. dilakukan Mengecek kesamaan data siswa, message, dan forum pada database dengan yang ada pada tampilan layar. Mengecek kesamaan data guru, message, materi, penilaian, dan forum pada database dengan Data output dengan data dalam database sama. Data output dengan data dalam database sama.

86 Menguji kesesuaian data admin yang tampil dilayar dengan data di dalam database. 4. Menguji performa dan validasi. yang ada pada tampilan layar Mengecek kesamaan data admin,guru,siswa, message, materi, pengumuman, dan forum pada database dengan yang ada pada tampilan layar Memasukan data valid maupun data tidak valid secara berulang ulang, misalnya pada halaman login, add siswa, add,dan add guru. Data output dengan data dalam database sama. Fungsi validasi dapat mengenali input data valid maupun data tidak valid. Tabel 4.1 : Pengujian Black Box Berikut ini adalah salah satu contoh pengetesan data guru yang terdapat pada database dengan tampilan layarnya menggunakan black box testing :

87 Gambar 4.83 Black Box Testing-Database Guru 284

88 285 Gambar 4.84 Black Box Testing-Tampilan Layar Guru Pengujian White Box Pengujian white-box adalah tahapan pengujian paling akhir. Pengujian ini dilakukan dengan menggunakan struktur kontrol dari perancangan prosedural. Berikut ini adalah hasil dari pengujian white-box : No. Tujuan Aksi yang dilakukan Hasil 1. Menguji semua link dan Mengetes semua link Semua link dan modul agar sesuai dengan dan fungsi yang modul dalam fungsi operasinya. terdapat dalam aplikasi telah

89 286 aplikasi. sesuai dengan fungsi operasinya. 2. Menguji semua keputusan Menguji semua Fungsi true dan logika true dan false dalam fungsi logis yang false dalam aplikasi. terdapat dalam aplikasi berjalan aplikasi, misalnya dengan baik. status pada waktu login dan tidak login, status add materials, dan menguji data pada forum. 3. Menguji fungsi perulangan Menguji semua Fungsi dalam aplikasi agar sesuai tampilan urutan yang perulangan dengan batas pengulangan menggunakan dalam aplikasi yang telah ditentukan. perulangan, misalnya sesuai dengan list data guru, list data batas perulangan siswa,dan list materi. yang ditetapkan. telah 4. Menguji validasi data Menguji semua Fungsi validasi masukan sebelum data fungsi validasi pada berjalan dengan masuk ke database. aplikasi, misalnya baik dan validasi login, add menampilkan

90 287 materials, dan add pesan kesalahan. siswa. Tabel 4.2 : Pengujian White Box Berikut ini adalah salah satu contoh pengetesan kode perulangan untuk list data guru dengan tampilan layarnya menggunakan white box testing : <?php if(count($teacher->result_array()) > 0) { foreach($teacher->result_array() as $row) {?> <tr> <td><?php echo $row['guruid']?></td> <td><?php echo $row['namaguru']?></td> <td><?php echo $row['namamatapelajaran']?></td> <td><?php echo anchor('home/selectteacher/'.$row['guruid'], 'View')?></td> <td><?php echo anchor('home/editteacher/'.$row['guruid'], 'Update')?></td> <td><?php echo anchor('home/delete_teacher/'.$row['guruid'], 'Delete','onclick="return konfirm();"')?></td> </tr> <?php } }else {echo "Data was not found.";}?>

91 288 Kode diatas akan menghasilkan tampilan berikut: Gambar 4.85 White Box Testing-List Data Guru 4.6 Pelatihan Para Pengguna Pelatihan ditutukan untuk para pengguna yang terlibat dalam sistem aplikasi ini yaitu admin (staf Tata Usaha), guru, dan siswa. Hal ini bertujuan agar sistem aplikai e-learning ini dapat berjalan maksimal, sehingga dapat menyelesaikan masalah yang terdapat pada SMAK 4 Penabur Jakarta.

92 Evaluasi Yslow Gambar 4.86 Evaluasi grade menggunakan Yslow

93 290 Berdasarkan gambar hasil test Yslow diatas maka didapat grade B, artinya aplikasi ini sudah baik, tetapi ada beberapa kesalahan yang tidak sesuai dengan aturan di Yslow, seperti configurasi entity tags, add expires headers, compress components with gzip, dan configure entity tags. Kesalahan tersebut lebih banyak disebabkan pada konfigurasi dengan template kode lain, bukan pada aplikasinya. Hal ini menyebabkan kecepatan loading kurang maksimal pada aplikasi. Gambar 4.87 Evaluasi statustik menggunakan Yslow Gambar diatas menunjukan perbandingan halaman website atau total load sebelum terjadi cache komponen web dengan setelah browser menyimpan komponen web didalam cache browser. Berdasarkan statistiknya didapat saat pertama kali web diakses memiliki HTTP Requests 9 dengan totalnya 571.8K dan statistik setelah akses berikutnya memiliki HTTP Request 9 tetapi totalnya menurun menjadi 4.2K.

94 291 Gambar 4.88 Evaluasi components menggunakan Yslow Gambar diatas menunjukan komponen komponen yang terdapat dalam aplikasi e-learning yang telah dibuat, komponen ini memiliki tipe antara lain doc, js, css, image (jpg), dan favicon (bmp). Evaluasi yang didapat menunjukan komponen dengan tipe favicon memiliki ukuran paling kecil yaitu 0.8K dengan response time 262ms, sedangkan komponen yang memiliki ukuran tertinggi yaitu tipe js sebesar 267.7K dengan response time 37ms. 4.8 Evaluasi PageSpeed Berikut ini adalah hasil dari evaluasi menggunakan pagespeed:

95 292 Gambar 4.89 Hasil Evaluasi Menggunakan Pagespeed Berdasarkan gambar hasil evaluasi diatas maka didapat kesimpulan bahwa aplikasi ini memiliki performa yang baik yaitu dengan memiliki nilai 88 dari total nilai Evaluasi Kuesioner Evaluasi terhadap aplikasi e-learning ini dilakukan dengan menyebarkan 40 kuesioner dengan perbandingan 30 siswa dan 10 guru pada tanggal 16 Januari Berikut ini adalah hasilnya :

96 293 Gambar 4.90 Persentase evaluasi tampilan e-learning Gambar 4.91 Persentase evaluasi kesesuaian fitur atau fungsi e-learning

97 294 Gambar 4.92 Persentase tingkat kesulitan aplikasi e-learning Gambar 4.93 Persentase penggunaan forum diskusi online dan message

98 295 Gambar 4.94 Persentase evaluasi dari fitur penyampaian informasi penting Gambar 4.95 Persentase Tingkat Kepuasan Keseluruhan Sistem 4.10 Evaluasi Delapan Aturan Emas Dalam Perancangan Antarmuka Berikut ini adalah hasil evaluasi menggunakan delapan aturan emas perancangan antarmuka (Eight Golden Rules of Interface Design) yang digunakan untuk merancang tampilan antarmuka pengguna :

99 Konsistensi Konsistensi pada aplikasi e-learning ini dapat ditemukan pada bagian header, footer, dan menu pada bagian halaman - halaman aplikasi. Konsistensi yang dimaksud adalah konsistensi ketika pengguna mengakses halaman lain, maka halaman berikutnya memiliki header, footer, dan bagian menu aplikasi yang sama atau konsisten dengan warna dan jenis huruf yang sama. Gambar 4.96 Evaluasi IMK Konsistensi-Home Admin

100 297 Gambar 4.97 Evaluasi IMK Konsistensi-View Class Admin 2. Penggunaan Shortcut Penggunaan shortcut pada dasarnya digunakan untuk meningkatkan frekuensi penggunaan atau kecepatan interaksi agar dapat mengurangi jumlah interaksi yang harus dilakukan oleh pengguna aplikasi. Pada aplikasi ini terdapat shortcut untuk menuju kehalaman lain pada halaman message.

101 298 Gambar 4.98 Evaluasi IMK Sortcut-View Message 3. Umpan Balik Yang Informatif Bentuk aturan berupa umpan balik yang informatif di aplikasi ini adalah dengan adanya fitur pemberian infomrasi mengenai kesalahan yang telah dilakukan pengguna, message untuk saling berkomunikasi diantara admin, siswa, dan guru. Selain itu juga ada fitur diskusi forum yang hanya bisa diakses oleh siswa dan guru.

102 Gambar 4.99 Evaluasi IMK Umpan Balik-View Message 299

103 300 Gambar Evaluasi IMK Umpan Balik-Add Student 4. Adanya Dialog Penutupan Pada aplikasi ini dialog penutupan terdapat pada saat pengisian formulir akan memunculkan suatu dialog bahwa data hasil masukan sudah masuk kedalam database, dan juga pada saat pengguna akan logout halaman akan berubah dari halaman sebelumnya.

104 301 Gambar Evaluasi IMK Dialog Penutupan-Change Password 5. Adanya Penanganan Kesalahan Dialog penutupan pada aplikasi ini berupa pemberitahuan kesalahan pada saat pengisian formulir. Pesan kesalahan ditampilkan agar pengguna mengetahui kesalahannya dan agar segera memperbaikinya. Selain itu, aplikasi ini memiliki pencegahan kesalahan yang dilakukan pengguna.

105 302 Gambar Evaluasi IMK Pencegahan Kesalahan-Upload Materials 6. Adanya Pembalikan Aksi Kesalahan yang terjadi dapat dikembalikan pada aksi sebelum kesalahan terjadi. Penggunaan tombol back dapat dengan mudah membatalkan suatu aksi yang salah.

106 303 Gambar Evaluasi IMK Pembalikan Aksi-Detail Schedule 7. Mendukung Pusat Kendali Internal Seorang pennguna harus merasa memiliki kuasa sepenuhnya atas aplikasi yang sedang digunakannya. Pada aplikasi ini pengguna diberikan kuasa penuh, misalnya pengguna dapat mengganti password yang dimilikinya dan juga dialog pesan konfirmasi aksi delete yang akan dilakukan pengguna.

107 304 Gambar Evaluasi IMK Kendali Internal-Delete Teacher 8. Mengurangi Beban Ingatan Jangka Pendek Pembuatan aplikasi diusahakan agar mudah untuk dimengerti oleh semua user, sehingga aplikasi itu dapat dimaksimalkan penggunaanya. Aplikasi ini dibuat dengan tampilan sangat sederhana, tingkat kedalaman yang rendah dan fungsi fungsi sederhana.

108 Gambar Evaluasi IMK Mengurangi Beban Ingatan-Home Teacher 305