Hasil dan Pembahasan T1 672007094 Full text

8 Gambar 6 Rancangan Antar Muka Aplikasi Gambar 6 menunjukkan ada 5 bagian dari antar muka aplikasi adalah 1 Form login, 2 Judul aplikasi, 3 Fitur pencarian sekolah, 4 Peta, 5 kontrol pada peta .

4. Hasil dan Pembahasan

Halaman menu utama merupakan halaman yang berfungsi sebagai welcome home saat user membuka aplikasi. Pada halaman awal aplikasi merupakan User Interface dengan menggunakan teknologi Vaadin yang berisikan tema, komponen profile , komponen login untuk admin, fitur pencarian informasi sekolah, hasil pencarian sekolah, peta kota Semarang menggunakan Google Maps sebagai Add- on . User Interface dengan menggunakan Vaadin berupa server-side dan client- side yang ditampilkan pada browser . Home view dapat dilihat pada Gambar 7 dan menampilkan Google Maps pada map layout dapat dilihat pada Kode Program 1. Gambar 7 User Interface menggunakan Vaadin Komponen – komponen Vaadin yang terdapat pada aplikasi terdiri dari Built-in Components dan Add-on Component . 1 Built-in Components pada halaman awal berisi Label Peta Semarang, DataField , Accordion Pencarian Sekolah, Accordion Tingkatan Sekolah, Accordion Akreditasi, Accordion Kecamatan , Button Login, Button Profil , Form 9 Profil Kota Semarang, CheckBox A, CheckBox B, CheckBox C, CheckBox -, ListBox Hasil Pencarian, TabPanel Kelulusan, TabPanel Fasilitas, TabPanel Prestasi. Pada halaman admin berisi Label Admin , Button Logout , Button Add , Button Save , Button Edit, Button Delete , Button View on Map, Tabel Informasi Sekolah, ComboBox Tingkatan Sekolah, Form Detail Data Sekolah, TabPanel Data Fasilitas, TabPanel Data Kecamatan, ListBox Daftar Sekolah. 2 Add-on Component berisi Google Maps V3 yang telah disediakan Vaadin yang berisi peta Google Maps beserta marker dan shape . Kode Program 1 Menampilkan Google Maps ke Home View Pada Kode Program 1 menunjukan bahwa pada kode baris 1 sampai 6 membangun sebuah map layout dengan memanggil Google Maps dari class MyGoogleMap dengan titik tengah peta 110.394745, -7.016394 dengan level zoom 12. Kode baris 7 sampai 10 bahwa dilakukan penambahan komponen pada peta yaitu zoom dan scale . Kode Program 2 Konfigurasi Vaadin dalam Sistem Kode Program 2 adalah potongan isi web.xml dimana mappingservletVaadin diakses melalui URL pattern kode baris 17 . Karakter „bintang‟ pada URL pattern mengabaikan sisa potongan URL dari lokasi karakter tersebut. Core-app pada kode baris 2 diatas merupakan nama servlet ApplicationServlet . Class tersebut adalah class turunan servlet yang disediakan oleh Vaadin . Class ini membutuhkan dua paramater yaitu application dan widgetset . Pada kode baris 5 sampai 8, parameter application membutuhkan value string yang berisi nama class utama aplikasi yang menurunkan class Application , sedangkan kode baris 9 1 private void buildMapLayout { 2 viewMapLayout.removeAllComponents; 3 googleMap = new MyGoogleMapcoreApplication, new Point2D.Double 4 110.394745, -7.016394, 12; 5 googleMap.setWidth100; 6 googleMap.setHeight100; 7 googleMap.addControl 8 org.vaadin.hezamu.googlemapwidget.GoogleMap.MapControl.LargeMapControl; 9 googleMap.addControl 10 org.vaadin.hezamu.googlemapwidget.GoogleMap.MapControl.ScaleControl; 1 servlet 2 servlet-namecore-appservlet-name 3 servlet-classcom.vaadin.terminal.gwt.server.ApplicationServlet 4 servlet-class 5 init-param 6 param-nameapplicationparam-name 7 param-valuecom.core.app.CoreApplicationparam-value 8 init-param 9 init-param 10 param-namewidgetsetparam-name 11 param-valuecom.core.app.widgetset.Sips_appWidgetset 12 param-value 13 init-param 14 servlet 15 servlet-mapping 16 servlet-namecore-appservlet-name 17 url-patternurl-pattern 18 servlet-mapping 10 sampai 13 merupakan parameter widgetset berisi value string yang berisi nama filexml yang dihasilkan oleh Vaadin . Pada pencarian data informasi sekolah terdapat kategori dalam pencarian sekolah. Pencarian data informasi sekolah meliputi pencarian data sekolah berdasarkan nama sekolah dari hasil input -an user berupa nama sekolah, tingkatan sekolah, akreditasi sekolah, dan kecamatan. Pada pencarian berdasarkan Tingkatan Sekolah, Vaadin menyediakan menu pilihan untuk mencari informasi menyeluruh untuk tingkatan TK- PlayGroup , SD, SMP, SMA-SMK dengan peta yang ditampilkan dari Google Maps . Pada pilihan ini user dapat memilih daftar sekolah berdasarkan tingkatan sekolah dan aplikasi akan menampilkan daftar sekolah sesuai tingkatan sekolah yang dipilih oleh user . Contoh pencarian data informasi sekolah berdasarkan Tingkatan Sekolah dapat dilihat pada Gambar 8. Gambar 8 Pencarian Data Sekolah berdasarkan Tingkatan Sekolah Admin masuk ke Halaman Admin dengan memilih Button Login kemudian akan muncul form login dimana admin harus mengisi username dan password. Jika valid maka sistem akan menampilkan Halaman admin , jika username dan password yang dimasukan salah maka sistem akan menampilkan pesan login failed kemudian sistem kembali ke form login . Form login admin dapat dilihat pada Gambar 9. Gambar 9 Form Login Admin Kode Program 3 Contoh Penggunakan Komponen Spring pada Login 1 public void buttonClickClickEvent event { 2 UserAccount userAccount; 3 try { 4 userAccount = userService.loginusernameField.getValue.toString, 5 passwordField.getValue.toString; 6 if userAccount = null { 7 coreApplication.setUseruserAccount; 8 coreApplication.showAdminView; 9 coreApplication.getMainWindow.removeWindowloginPopupWindow;}} 10 catch Exception e { 11 e.printStackTrace; 12 LoginView.this.getApplication.getMainWindow.showNotificationLogin 13 Failed, e.getMessageNotification.TYPE_ERROR_MESSAGE;}}}; 11 Pada Kode Program 3 menunjukan contoh penggunakan komponen Spring pada Login yaitu komponen Service . Komponen Service berfungsi sebagai tempat menampung semua bisnis proses pada sistem. Pada contoh Kode Program 3 user service memiliki sebuah method yang dapat digunakan untuk melakukan otentikasi pengguna. Kode Program 4 Implementasi Hibernate untuk delete, save, update Kode Program 4 menunjukkan bahwa implementasi Hibernate dalam fungsi database yaitu fungsi delete pada kode baris 1 sampai 3, fungsi save pada kode baris 22 sampai 24, fungsi update pada kode baris 7 sampai 9. Fungsi pada database tersebut menggunakan teknologi Hibernate untuk memanipulasi database yang ditangani oleh Service dan DAO. Kode baris 1 sampai 9 merupakan fungsi dimana aplikasi melakukan perintah kedalam database tanpa menggunakan perintah SQL . Setelah admin melakukan login dan memasukan username dan password dengan benar maka sistem akan menampilkan menu halaman admin. Pada halaman ini terdapat beberapa menu seperti Data Sekolah, Data Kecamatan, dan Data Fasilitas. Data Sekolah terdapat pilihan ComboBox yang berisi keterangan tingkatan sekolah dan halaman data sekolah akan disajikan tiap tingkatan sekolah tersebut. Pada Button add untuk menambah data sekolah, button edit untuk mengubah data informasi sekolah, dan button delete untuk menghapus data informasi sekolah. Form add menampilkan halaman untuk data informasi umum sekolah, kelulusan, fasilitas dan prestasi. Halaman admin dapat dilihat pada Gambar 10. Gambar 10 Halaman Admin 1 public void deleteE persistentObject throws DataAccessException { 2 getHibernateTemplate.deletepersistentObject; 3 } 4 public PK saveE entity throws DataAccessException { 5 return PK getHibernateTemplate.saveentity; 6 } 7 public void updateE transientObject throws DataAccessException { 8 getHibernateTemplate.updatetransientObject; 9 } 12 Data Dinas PPO yang semula tidak terorganisir dalam penyimpanan data dan masih banyak dalam bentuk tercetak, maka sistem dengan menggunakan teknologi Vaadin menjadikan data Dinas PPO menjadi terorganisir dan menjadikan data informasi sekolah dalam satu database . Hal ini dapat dilihat pada Gambar 11 dimana seluruh data informasi sekolah tiap sekolah seperti Informasi umum sekolah, kelulusan, fasilitas akan disimpan di database. Gambar 11 Database sekolah Pengujian Sistem Pengujian sistem dilakukan dengan menggunakan Black Box Testing . Black Box merupakan pendekatan yang digunakan sebagai pelengkap untuk menemukan kesalahan [4]. Hasil dari pengujian Black Box dapat dilihat pada Tabel 1. Tabel 1 Black Box Testing pada Sistem Point Pengujian Validasi Output Sistem Status Uji Proses login - Username benar password benar Masuk halaman admin Valid Proses logout - Pilih button logout Keluar halaman admin Valid Proses mengatur informasi sekolah - Menambah data sekolah Berhasil menambah data informasi sekolah Valid - Mengubah salah satu informasi sekolah Berhasil mengubah data informasi sekolah Valid - Menghapus data sekolah Berhasil menghapus data informasi sekolah Valid Proses melihat informasi - Pilih Accordion Pencarian Berhasil menampilkan sekolah pilihan pencarian Valid sekolah - Pilih Marker Berhasil menampilkan shape Valid - Pilih Button Profile Berhasil menampilkan profil web Valid - Pilih CheckBox Berhasil menampilkan peta Valid - Pilih ListBox Hasil Pencarian Berhasil menampilkan keterangan informasi sekolah Valid - Pilih TabPanel Berhasil menampilkan data kelulusanfasilitasprestasi Valid Hasil pengujian Black Box Tabel 2 menunjukkan bahwa proses login , proses logout , proses mengatur data informasi sekolah, proses melihat data informasi sekolah sudah sesuai dengan yang dirancang dan sistem berjalan dengan valid . 13 Pengujian pengguna bertujuan untuk mengukur efektifitas aplikasi yang dibuat dengan 259 orang sebagai sampel. Pernyataan untuk pengujian pengguna sebagai berikut: 1 Aplikasi dapat digunakan dengan mudah, 2 Aplikasi dapat membantu dalam pencarian sekolah, 3 Informasi yang ditampilkan pada aplikasi sudah jelas, 4 Peta lokasi yang ditampilkan pada aplikasi ini sudah jelas, 5 Fitur yang terdapat pada aplikasi ini bermanfaat pada pencarian sekolah, 6 Aplikasi memberikan semua informasi yang dibutuhkan tentang sekolah. Penyusunan dan perhitungan pengujian menggunakan Rumus Skala Likert yang merupakan cara sistematis untuk memberi skor pada indeks [4]. Pada skala Likert tersebut diberi nilai 5 sampai 1 yaitu: Sangat Setuju SS, Setuju S, Ragu – ragu R, Tidak Setuju TS, dan Sangat Tidak Setuju STS. Hasil dari kuesioner yang dilakukan dengan Rumus Skala Likert dapat dilihat pada Tabel 2. Tabel 2 Hasil Penilaian Keseluruhan Pernyataan Jumlah RespondenKategori Jawaban Total Rata- rata SS S R TS STS 1 52 148 59 - - 1029 3,97 2 61 146 52 - - 1045 4,04 3 39 163 57 - - 1018 3,93 4 40 132 82 5 - 984 3,79 5 44 171 44 - - 1036 4 6 53 131 75 - - 1014 3,91 Total dan Rata - rata Keseluruhan 5097 3,94 Pada Tabel 2 dapat dilihat bahwa hasil penilaian keseluruhan memperoleh nilai rata – rata 3,94 dari hasil penilaian skala Likert . Berdasarkan hasil pengujian pernyataan nomor 1 dan 2 bahwa aplikasi dapat digunakan dengan mudah dan dapat membantu dalam pencarian sekolah. Pada pernyataan nomor 3, 4, 5 bahwa aplikasi menampilkan informasi dan peta dengan jelas dengan fitur yang terdapat di aplikasi bermanfaat dalam pencarian informasi sekolah. Pada pernyataan nomor 6 bahwa aplikasi memberikan semua informasi yang dibutuhkan tentang sekolah.

5. Simpulan