1. Pendahuluan Pendidikan merupakan aspek penting dalam kehidupan manusia sehingga informasi terkait dengan pendidikan menjadi salah satu item yang dicari pihak yang membutuhkannya. Para pengguna jasa pendidikan tentunya memerlukan fasilitas dalam memperoleh informasi terkait dengan jasa tersebut. Teknologi internet menjadi salah satu cara yang memampukan pengguna jasa pendidikan untuk memperoleh beragam informasi. Kota Semarang yang terletak di Propinsi Jawa Tengah memiliki luas 37.366.838 Ha dengan jumlah 1815 sekolah yang tersebar di 16 kecamatan [1]. Mengingat kondisi luas kota Semarang dan jumlah sekolah tersebut, maka akan menghambat para pengguna mencari informasi terkait sekolah yang diinginkan dalam waktu yang relatif singkat. Para orang tua calon siswa maupun praktisi pendidikan lain memerlukan tambahan tenaga, waktu dan biaya untuk mencari informasi sekolah yang lebih detail karena informasi mengenai sekolah disediakan oleh masing – masing sekolah saja. Data sekolah tersedia di Dinas Pendidikan Pemuda dan Olahraga (Dinas PPO) tetapi tidak terorganisir dan penyimpanan data masih dalam bentuk tercetak. Informasi yang tersedia di web Dinas PPO masih sangat terbatas tentang sekolah. Berdasarkan latar belakang masalah yang ada yaitu bagaimana membuat sebuah perancangan sistem informasi sekolah di kota Semarang dengan menggunakan teknologi Vaadin. Penelitian ini bertujuan untuk merancang sebuah sistem informasi sekolah menggunakan Vaadin dengan memanfaatkan Google Maps di kota Semarang. Manfaat yang diharapkan dari penelitian ini yaitu data Dinas PPO menjadi terorganisir, memberikan informasi sekolah dengan lengkap dan memberikan kemudahan bagi orang tua siswa dalam pencarian sekolah. Sistem yang dibangun berbasis web dengan menggunakan teknologi Vaadin. Sistem yang dibuat bersifat dinamis dan memerlukan koneksi internet untuk menampilkan maps. Pengguna dalam sistem yaitu pihak Dinas PPO yang akan mengelola sebagai admin dan orang tua siswa yang dapat melihat informasi yang disajikan sistem. 2. Tinjauan Pustaka Penelitian yang berjudul “Sistem Informasi Area Pengatur Distribusi dan Penyaluran (APDP) Menggunakan Google App Engine dan Vaadin di PT. PLN (Persero) Wilayah Kalimantan Barat”. Aplikasi menggunakan Google App Engine dan Vaadin, datastore sebagai database. Hasil dari penelitian ini adalah menciptakan aplikasi web dengan memanfaatkan Google App Engine yang mampu mengatasi kebutuhan Unit APDP dan memudahkan proses laporan harian dengan tampilan yang responsif dan interaktif sebagaimana aplikasi desktop [2]. Penelitian lain yang berjudul “Sistem Informasi Geografis Sekolah di DKI Jakarta”. Hasil dari penelitian ini adalah memetakan penyebaran sekolah dengan informasi yang ditampilkan lokasi, nama sekolah, foto sekolah dan unsur tambahan seperti kantor pos, rumah sakit, museum dan GOR. Aplikasi menggunakan MapServer dan Quantum GIS sebagai mapping, PostgreSQL sebagai database dan Chameleon sebagai framework. Pada aplikasi tersedia menu melihat informasi tempat di sekitar sekolah dalam radius 4 KM dari sekolah yang 1
dipilih. Admin tidak dapat menambah dan mengubah kecamatan secara langsung dari aplikasi. Aplikasi belum terintegrasi dengan Google Maps[3]. Pada penelitian lain yang berjudul “Perancangan Sistem Informasi Pencarian Lembaga Pendidikan di Kota Salatiga Berbasis Web”. Penelitian menggunakan CodeIgniter sebagai framework, Google Maps sebagai mapping. Informasi yang ditampilkan berdasarkan nama, alamat, fasilitas, dan konsentrasi pendidikan. Sistem yang dibuat juga menampilkan rute dan jarak user dengan lokasi yang dipilih. Penambahan data dilakukan secara manual [4]. Perbedaan yang terdapat pada penelitian ini adalah pada teknologi yang digunakan. Pada penelitian yang akan dibuat aplikasi memanfaaatkan Google Maps sebagai mapping, postgreSQL sebagai database, dan framework menggunakan Vaadin yang terintegrasi dengan Spring dan Hibernate. Aplikasi terdiri dari 3 arsitektur dengan layer depan (front-end) menggunakan Vaadin, layer tengah (middle) menggunakan Spring, dan layer belakang (back-end) menggunakan Hibernate. Integrasi ini sebagai integrasi antara model, view, dan controller. Informasi yang ditampilkan lebih lengkap meliputi nama sekolah, jenjang sekolah, NSS, NPSN, prestasi sekolah, alamat sekolah, nomor telepon sekolah, status akreditasi sekolah, jumlah murid saat ini, jumlah lulusan selama 3 tahun terakhir, uang gedung, uang SPP, website tiap sekolah dan fasilitas yang dimiliki (gedung belajar mengajar, tempat ibadah, sarana olahraga) playgroup, TK, SD, SMP, SMA dan SMK. Pada penelitian ini tersedia data fasilitas dan data kecamatan apabila terjadi perubahan pada data tersebut. Google Maps adalah sebuah jasa peta digital gratis dan online yang disediakan oleh Google. Fasilitas Google Maps dihadirkan oleh Google sejak tahun 2005 dan terus dikembangkan hingga sekarang ini. Google Maps menampilkan peta dunia dan informasi pendukung berupa informasi jalan, lokasi layanan, bisnis, dan sebagainya. Layanan Google Maps dapat diakses melalui http://maps.google.com/. Google Maps lebih interaktif karena peta dapat digeser sesuai dengan keinginan pengguna, mengubah tingkat zoom, serta mengubah tampilan peta. Penyajian tampilan peta sebuah wilayah dibuat secara digital dan tampilan penunjuk lokasi bisa dibuat lebih menarik [5]. Vaadin adalah salah satu framework pada Java yang dapat digunakan untuk mempermudah membangun aplikasi web. Vaadin digunakan untuk menciptakan aplikasi RIA (Rich Internet Application) yang menyediakan komponen didalamnya (framework berbasis komponen). User Interface (UI) yang ada dalam Vaadin adalah Label, Panel, Link, TextField, RichTextArea, DataField, Button, OptionGroup, Select, Tabel, MenuBar, Form, Tree. Selain UI Vaadin juga menyediakan layout sebagai tema dalam perancangan aplikasi [6]. Seluruh komponen User Interface yang disediakan Vaadin telah mendukung teknologi AJAX dan mendukung konsep pemrograman event-driven. Spring adalah kerangka kerja open source platform Java yang menyediakan dukungan infrastruktur yang lengkap untuk mengembangkan aplikasi Java dengan sangat mudah dan sangat cepat [7]. Hibernate adalah sebuah framework untuk Object Relational Mapping (ORM). Hibernate merupakan layer yang menghubungkan antara aplikasi dengan basis data. Hibernate menyediakan koneksi ke basisdata dengan menghubungkan kelas dengan tabel – tabel. Melalui hibernate pemetaan dilakukan dari model data 2
objek di dalam Java dengan tipe data java ke dalam model data relational dengan tipe data SQL [8]. Kelebihan integrasi Vaadin dengan spring dan hibernate pada saat proses manipulasi terhadap database dikelola secara menyeluruh oleh framework Spring dan Hibernate yang mengatur kapan dilakukannya rollback atau commit transaksi pada database (data manipulation languageSQL, insert, update, delete). 3. Metode Penelitian Metode penelitian dapat diartikan sebagai cara kerja untuk dapat memahami suatu object penelitian [9]. Penelitian dilakukan melalui tahapan pada Gambar 1.
Gambar 1 Tahapan Penelitian[10]
Pada tahap pertama adalah identifikasi masalah, pada tahap ini dilakukan identifikasi terhadap permasalahan yang ada. Tahap kedua adalah studi literatur yang bertujuan untuk menyusun dasar teori yang akan digunakan dalam penelitian seperti artikel, jurnal, buku, dokumen, laporan penelitian, maupun informasi yang didapat dari internet. Tahap ketiga adalah analisis kebutuhan, dimana dengan adanya analisis dapat mengetahui kebutuhan data. Tahap keempat adalah perancangan sistem, pada tahap ini meliputi perancangan proses menggunakan UML, perancangan arsitektur, perancangan database dan perancangan antarmuka. Tahap selanjutnya dilakukan implementasi sistem, tahap dimana perancangan perangkat lunak direalisasikan sebagai serangkaian program atau perangkat lunak. Kemudian dilanjutkan ketahap pengujian sistem serta evaluasi pengujian sistem yaitu menguji sistem yang sudah 3
dibuat sesuai dengan yang diharapkan, jika belum sesuai maka dilakukan pengujian ulang. Tahap terakhir adalah penulisan laporan, yaitu menulis hasil dokumentasi dari pengujian sistem dari tahap awal hingga tahap akhir yang nantinya akan menjadi hasil penelitian. Pengembangan Sistem Pengembangan sistem ini menggunakan metode waterfall. Waterfall dipilih karena jika terdapat suatu kesalahan, pengembang tidak perlu mengulangi fase dari awal, tetapi hanya cukup mengulang satu tahapan sebelumnya dan jika masalah belum terselesaikan cukup kembali ke tahap berikutnya lagi. Tahap-tahap metode waterfall terlihat pada Gambar 2 [10].
Gambar 2 Metode Waterfall [11]
Gambar 1 merupakan tahapan umum dari model proses ini. Aktifitas yang dilakukan pada setiap tahap di model waterfall. Tahapan pertama adalah requirements definition dimana dilakukan pengumpulan kebutuhan sistem. Adapun sumber data atau kebutuhan yang digunakan adalah data primer dan data sekunder. Data primer adalah data yang diperoleh langsung dari sumber yang diamati dan dicatat untuk pertama kali. Pada penelitian ini didapatkan dari dokumen dan hasil wawancara dengan pihak Dinas PPO kota Semarang tentang kebutuhan aplikasi yang dibuat. Data sekunder adalah data yang diperoleh secara tidak langsung baik dari buku literatur, arsip – arsip dan dokumen – dokumen yang dimiliki oleh organisasi yang bersangkutan atau media lain mengenai informasi sekolah kota Semarang. Tahap kedua adalah system and software design. Pada proses ini terdiri dari penentuan desain kebutuhan hardware, sofware, komponen, modul, antar muka pengguna dan data untuk memenuhi kebutuhan yang diperlukan pada tahap requirements definition. Setelah tahap system and software design, tahap selanjutnya adalah implementation and unit testing dimana proses perancangan perangkat lunak direalisasikan sebagai serangkaian program atau perangkat lunak. Kemudian dilanjutkan ke tahap integration and system testing dimana unit 4
program atau program individual diintegrasikan dan diuji sebagai sistem yang lengkap untuk menjamin bahwa persyaratan sistem telah dipenuhi. Tahap terakhir adalah operation and maintenance dimana sistem diimplementasikan, dipakai dan dipelihara. Pemeliharaan sistem mencakup koreksi dari berbagai error yang tidak ditemukan pada tahap – tahap terdahulu, perbaikan atas implementasikan unit sistem dan pengembangan pelayanan sistem, sementara persyaratan – persyaratan baru ditambahkan. Permodelan dan perancangan program pada sistem ini menggunakan UML (Unified Modeling Language) yang terdiri dari Use Case, Activity, Sequence, dan Class Diagram. Use Case Diagram menggambarkan suatu rangkaian kegiatan yang dijalankan oleh aplikasi dan menggambarkan hubungan antara masingmasing aktor dengan setiap proses yang digambarkan melalui setiap use case. Use Case diagram ini menjelaskan dan menerangkan requirement yang diinginkan/dikehendaki user (orang tua siswa), serta berguna dalam menentukan struktur organisasi dan model dari sebuah sistem yang akan dikembangkan. Use case diagram pada sistem ini dapat dilihat pada Gambar 3. <
>
orang tua siswa/i
melihat peta sekolah
melihat detail inf ormasi sekolah
<<extend>> <> <<extend>>
admin Dinas PPO
mengatur inf ormasi sekolah menghapus inf ormasi sekolah <<extend>>
<> <<extend>>
mengubah inf ormasi sekolah
menambah inf ormasi sekolah melihat daf tar sekolah
Gambar 3 Use Case Orang Tua Siswa dan Admin
Pada use case yang ditunjukan pada Gambar 3 diatas menunjukkan model bagi orang tua siswa dan admin. Admin yang dimaksud adalah pihak Dinas PPO. Orang tua siswa dapat mengakses halaman web SIG sebagai user untuk melihat peta sekolah dan melihat detail informasi sekolah secara garis besar informasi yang ditampilkan tentang pencarian data sekolah. Menu yang dapat diakses orang tua siswa adalah menu pencarian, tingkatan sekolah, akreditasi, dan kecamatan untuk pencarian lokasi dan data sekolah yang diinginkan. Menambah data dan mengubah data tidak bisa dilakukan oleh user karena sistem ini hanya memberikan akses login dan hak akses hanya pada admin. Hal ini admin dapat mengakses ke halaman admin untuk menambah data, mengubah data, menghapus data informasi sekolah. Activity diagram merupakan penggambaran alur aktivitas dalam sistem yang sedang dirancang, bagaimana aktivitas dimulai, decision yang mungkin terjadi 5
dan bagaimana aktivitas berakhir. Pada sistem ini akan terdapat dua activity diagram yaitu untuk user (orang tua siswa) dan untuk admin (pihak Dinas PPO). Sequence Diagram berfungsi untuk mendeskripsikan interaksi antara setiap komponen baik di dalam maupun disekitar sistem dalam bentuk pesan yang digambarkan terhadap waktu. Sequence Diagram juga mendeskripsikan alur yang dilakukan sebagai respon dari sebuah input untuk menghasilkan suatu output tertentu. Class Diagram berfungsi untuk mendeskripsikan struktur serta relasi antar kelas yang terdapat pada sistem aplikasi. Class Diagram pada perancangan sistem dapat dilihat pada Gambar 4.
Gambar 4 Class Diagram
6
Pada Gambar 4 terdapat 7 class yang digunakan untuk merancang struktur program dari aplikasi yang dibangun. Masing – masing class memiliki fungsi dan attribute yang berbeda dan saling berhubungan. Pada semua class memiliki getter dan setter. Class UserAccount tersebut diatur oleh admin dengan memasukan username dan password untuk mengatur semua isi dalam aplikasi. Arsitektur Aplikasi sebagai proses sistem menggunakan Vaadin. Arsitektur aplikasi dapat dilihat pada Gambar 5 dibawah ini.
Gambar 5 Arsitektur Sistem Aplikasi
Pada Gambar 5 menunjukkan arsitektur sistem yang dibangun. Bagian berwarna hijau adalah bagian dari sistem yang dirancang pada penelitian ini. Aplikasi yang dirancang adalah aplikasi berbasis Java web yang berinteraksi dengan pengguna melalui browser. Sistem memiliki beberapa komponen sistem yang saling berinteraksi satu sama lain. Vaadin menggunakan Service dan DAO yang disediakan oleh Spring untuk melakukan transaction management dalam membantu proses bisnis pada sistem. Persistence untuk menghubungkan sistem ke database dan keterlibatan Hibernate dalam sistem ini membantu proses manipulasi pada database mulai dari membuat schema database hingga proses pembentukan query melalui Java Database Connectivity (JDBC). Menampilkan peta pada aplikasi digunakan add-on component yang disediakan oleh Vaadin yaitu Google Maps Add-on. Komponen tersebut dapat menampilkan peta Google Maps pada browser client menggunakan Google Maps API dengan bantuan koneksi internet. Perancangan desain antar muka diperlukan sebagai dasar untuk membuat tampilan aplikasi yang akan dibuat. Rancangan dapat dilihat pada Gambar 6.
7
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 Addon. User Interface dengan menggunakan Vaadin berupa server-side dan clientside 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 8
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 1 2 3 4 5 6 7 8 9 10
private void buildMapLayout() { viewMapLayout.removeAllComponents(); googleMap = new MyGoogleMap(coreApplication, new Point2D.Double( 110.394745, -7.016394), 12); googleMap.setWidth("100%"); googleMap.setHeight("100%"); googleMap.addControl org.vaadin.hezamu.googlemapwidget.GoogleMap.MapControl.LargeMapControl); googleMap.addControl org.vaadin.hezamu.googlemapwidget.GoogleMap.MapControl.ScaleControl);
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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
<servlet> <servlet-name>core-app <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet <param-name>application <param-value>com.core.app.CoreApplication <param-name>widgetset <param-value>com.core.app.widgetset.Sips_appWidgetset <servlet-mapping> <servlet-name>core-app /*
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 9
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 2 3 4 5 6 7 8 9 10 11 12 13
public void buttonClick(ClickEvent event) { UserAccount userAccount; try { userAccount = userService.login(usernameField.getValue().toString(), passwordField.getValue().toString()); if (userAccount != null) { coreApplication.setUser(userAccount); coreApplication.showAdminView(); coreApplication.getMainWindow().removeWindow(loginPopupWindow);}} catch (Exception e) { e.printStackTrace(); LoginView.this.getApplication().getMainWindow().showNotification("Login Failed", e.getMessage()Notification.TYPE_ERROR_MESSAGE);}}};
10
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 1 2 3 4 5 6 7 8 9
public void delete(E persistentObject) throws DataAccessException { getHibernateTemplate().delete(persistentObject); } public PK save(E entity) throws DataAccessException { return (PK) getHibernateTemplate().save(entity); } public void update(E transientObject) throws DataAccessException { getHibernateTemplate().update(transientObject); }
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
11
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 Proses login Proses logout Proses mengatur informasi sekolah
Proses melihat informasi sekolah
Validasi - Username benar password benar - Pilih button logout - Menambah data sekolah - Mengubah salah satu informasi sekolah - Menghapus data sekolah - Pilih Accordion Pencarian - Pilih Marker - Pilih Button Profile - Pilih CheckBox - Pilih ListBox Hasil Pencarian - Pilih TabPanel
Output Sistem Masuk halaman admin Keluar halaman admin Berhasil menambah data informasi sekolah Berhasil mengubah data informasi sekolah Berhasil menghapus data informasi sekolah Berhasil menampilkan sekolah pilihan pencarian Berhasil menampilkan shape Berhasil menampilkan profil web Berhasil menampilkan peta Berhasil menampilkan keterangan informasi sekolah Berhasil menampilkan data kelulusan/fasilitas/prestasi
Status Uji Valid Valid Valid Valid Valid Valid Valid Valid Valid Valid 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. 12
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 1 2 3 4 5 6
Jumlah Responden/Kategori Jawaban SS
S
R
TS
STS
52 61 39 40 44
148 146 163 132 171
59 52 57 82 44
5 -
-
53 131 75 Total dan Rata - rata Keseluruhan
-
Total
Ratarata
1029
3,97
1045 1018
4,04 3,93
984 1036 1014 5097
3,79 4 3,91 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 Berdasarkan hasil perancangan sistem informasi sekolah menggunakan Vaadin dengan memanfaatkan Google Maps, bahwa menggunakan teknologi Vaadin dalam sistem menjadikan data Dinas PPO menjadi terorganisir dan sistem berjalan tanpa terjadi error. Sistem ini dapat digunakan dengan mudah dan dapat membantu dalam pencarian informasi sekolah. Informasi dan peta yang ditampilkan dengan jelas beserta fitur – fitur yang bermanfaat dalam pencarian sekolah. Aplikasi memberikan semua informasi yang dibutuhkan tentang sekolah. Hal ini ditunjukkan dengan adanya perolehan nilai rata – rata 3,94 dari perhitungan skala Likert. Aplikasi ini dapat digunakan user untuk mencari data informasi sekolah berdasarkan input-an user berupa nama sekolah, tingkatan, akreditasi, dan kecamatan. Aplikasi menampilkan peta lokasi sekolah beserta detail data informasi sekolah. 13
6. Daftar Pustaka [1]
Pemerintah Kota Semarang, 2012, Gambaran Umum Kondisi Daerah Kota Semarang, http://semarangkota.go.id. /webportal/index.php. Diakses tanggal 12 Maret 2013. [2] Ardiyanto, Dhany, 2013, Sistem Informasi Area Pengatur Distribusi dan Penyaluran (APDP) Menggunakan GoogleApp Engine dan Vaadin di PT. PLN (Persero) Wilayah Kalimantan Barat, Salatiga: FTI UKSW. [3] Anggraini, Dina, 2010, Sistem Informasi Geografis Sekolah di DKI Jakarta. [4] Kristiyaningrum, Nova, 2012, Perancangan Sistem Informasi Pencarian Lembaga Pendidikan di Kota Salatiga Berbasis Web, Salatiga: FTI UKSW. [5] Ichtiara, Cita, 2008, Implementasi Aplikasi Sistem Informasi Geografis (SIG) Universitas Indonesia (UI) Berbasis Web dengan Menggunakan Google Maps API. [6] Frankel, Nicholas, 2011, Learning Vaadin. Birmingham, United Kingdom: Packt Publishing Ltd. [7] Johnson, Rod, 2013, Tutorialspoint Simply Easy Learning, http://www.tutorialspoint.com/spring. Diakses tanggal 11 November 2013. [8] Koyongian, Silvia, Althesia, 2010, Perancangan Aplikasi Pencarian Data Digital Library dengan Framework Hibernate, Lucene, dan Struts, Salatiga: FTI UKSW. [9] Suryana, 2010, Metodologi Penelitian : Model Praktis Penelitian Kuantitatif dan Kualitatif, Universitas Pendidikan Indonesia. [10] Hasibuan, Zainal A., 2007, “Metodologi Penelitian Pada Bidang Ilmu Komputer dan Teknologi Informasi : Konsep, Teknik, dan Aplikasi”, Jakarta : Ilmu Komputer Universitas Indonesia. [11] Pressman, Roger, S, 2001, Software Engineering: A Practitioner’s Approach, Amerika Serikat : McGraw-Hill.
14
