1
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
2
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
3
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
4
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
5
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 masing-
masing 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.
mengatur inf ormasi sekolahadmin Dinas PPO
melihat detail inf ormasi sekolah
<<include>>
melihat peta sekolah
<<include>>
<<extend>>
orang tua siswa/i
menambah inf ormasi sekolah
mengubah inf ormasi sekolah
menghapus inf ormasi sekolah
<<extend>>
<<extend>>
<<extend>>
melihat daf tar sekolah
<<include>>
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
6
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
7
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.
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 MyGoogleMap(coreApplication, new Point2D.Double(
4 110.394745, -7.016394), 12);
5 googleMap.setWidth("100%");
6 googleMap.setHeight("100%");
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-name>core-app</servlet-name>
3 <servlet-class>com.vaadin.terminal.gwt.server.ApplicationServlet
4 </servlet-class>
5 <init-param>
6 <param-name>application</param-name>
7 <param-value>com.core.app.CoreApplication</param-value>
8 </init-param>
9 <init-param>
10 <param-name>widgetset</param-name>
11 <param-value>com.core.app.widgetset.Sips_appWidgetset
12 </param-value>
13 </init-param>
14 </servlet>
15 <servlet-mapping>
16 <servlet-name>core-app</servlet-name>
17 <url-pattern>/*</url-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 buttonClick(ClickEvent event) {
2 UserAccount userAccount;
3 try {
4 userAccount = userService.login(usernameField.getValue().toString(),
5 passwordField.getValue().toString());
6 if (userAccount != null) {
7 coreApplication.setUser(userAccount);
8 coreApplication.showAdminView();
9 coreApplication.getMainWindow().removeWindow(loginPopupWindow);}}
10 catch (Exception e) {
11 e.printStackTrace();
12 LoginView.this.getApplication().getMainWindow().showNotification("Login
13 Failed", e.getMessage()Notification.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 delete(E persistentObject) throws DataAccessException {
2 getHibernateTemplate().delete(persistentObject);
3 }
4 public PK save(E entity) throws DataAccessException {
5 return (PK) getHibernateTemplate().save(entity);
6 }
7 public void update(E transientObject) throws DataAccessException {
8 getHibernateTemplate().update(transientObject);
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
kelulusan/fasilitas/prestasi
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 Responden/Kategori 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
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.
14
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.