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.