13
Tabel 3 Tabel Data Sekolah
Perancangan desain antar muka diperlukan sebagai dasar untuk membuat tampilan aplikasi yang akan dibuat. Rancangan dapat dilihat pada Gambar 9.
Gambar 9 Antar Muka Aplikasi
Gambar 9 menunjukkan ada 10 bagian dari antar muka aplikasi yang berturut-turut merupakan header web, menu, link jenjang SMP, link jenjang SMA,
link jenjang perguruan tinggi, link statistik jumlah siswa, kolom search, menu
konten, form login, dan footer.
4. Hasil Perancangan Dan Pengujian
Tahap pertama yaitu integrasi Google Maps API dengan mendapatkan Google
Maps API
key. Key
ini didapatkan
dari situs
http:code.Google.comAPIsMapssignup.html. Setelah terdaftar, key yang digunakan dalam penelitian ini adalah
Field Tipe
Keterangan
id integer11
primary Nama
varchar255 Telp
varchar255 alamat
jumlah_guru tahun_berdiri
fasilitas website
e-mail foto
latitude longitude
jenjang status
varchar255 text
varchar255 text
varchar255 varchar255
varchar255 double
double varchar255
varchar255
1 2
9
8
10 3
4 5
6 7
“
ABQIAAAAPDUET0Qt7p2 RJn9vy_TWxWvuLoOfSFB
sistem yang telah dibuat atau tidak.
Pada Gambar 10 Tampilan antar muka in
mengakses menu secara yang terdiri dari menu-me
footer .
Gambar 11 merupakan mencari sekolah berdas
Setelah User memasukk menampilkan hasil penca
12.
14
2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiT Bw
”. Tahap selanjutnya adalah hasil dari pe uat untuk mengetahui apakah sistem layak untuk
Gambar 10 Tampilan Awal
10 tampak tampilan antar muka awal saat sistem ini terdiri dari header dengan logo situs, link
ra langsung, kolom search untuk pencarian seko menu utama di dalam sistem, form login untuk A
Gambar 11 Search
an tampilan menu Search yang digunakan U dasarkan nama, alamat, fasilitas, atau konsentr
ukkan kata kunci nama sekolah, sistem akan me ncarian sekolah yang dimaksud seperti terlihat pad
ThQYkcZUP
perancangan k digunakan
tem diakses. k bar
untuk kolah, menu
Admin , dan
User untuk
ntrasi studi. mencari dan
pada Gambar
Pada Gambar 12 sistem dicari, alamat sekolah,
melihat informasi lebih l
Gambar 13 merupakan dipilih yaitu informasi n
pengajar, letak geografi Halaman ini juga dileng
User
juga dapat melaku dengan lokasi pilihan
didalamnya terlihat titik
15
Gambar 12 Hasil Pencarian
tem akan menampilkan hasil berupa nama sek h, nomer telpon dan link Detail yang dapat dip
h lengkap mengenai sekolah yang dicari.
Gambar 13 Informasi Sekolah
an tampilan informasi terperinci mengenai sek i nama, alamat, website, email, foto, tahun berdi
afis, status, fasilitas dan konsentrasi pendidikan ngkapi dengan peta yang menunjukkan titik lokas
kukan hitung jarak dan melihat rute antara loka an User. Gambar 14 merupakan tampilan p
ik lokasi sekolah. ekolah yang
dipilih untuk
ekolah yang rdiri, jumlah
n bila ada. kasi sekolah.
kasi sekolah peta yang
Kode program untuk me dilihat pada Kode Progra
Kode Program 1 Integrasi G
script src=http:Maps.Google.c
APDUET0Qt7p2VcSk6JNU1sBSM type=textjavascript
var map; var geocoder;
var address; function initialize {
map = new GMap2document. map.setCenternew GLatLng
map.setUIToDefault; GEv geocoder = new GClientGeo
function getAddressoverl address =
geocoder. function showAddressresp
map.clearOverlays; if response || response
alertStatus Code: + re } else {
place = response.Placemar point = new GLatLngplace
place.Point.coordinates[0 marker = new GMarkerpoin
map.addOverlaymarker; document.getElementById
document.getElementById function shownewAddressa
if geocoder {ge function
if a
} els m
v m
m }} ;
16
Gambar 14 Peta Sekolah
menampilkan peta Google Maps pada halaman de gram 1.
Google Maps
.comMaps?file=apiamp;v=2amp;sensor=falseamp;k SM5jMcmVqUpI7aqV44cW1cEECiThQYkcZUPRJn9vy_TWxWvuL
script script type=textjavascript
t.getElementByIdmap_canvas; ng-7.343436,110.503197, 15;
Event.addListenermap, click, getAddress; eocoder;}
rlay, latlng { if latlng = null {
= latlng; r.getLocationslatlng, showAddress;}}
sponse { se.Status.code = 200 {
response.Status.code; ark[0];
ce.Point.coordinates[1], [0];
int;
x.value = place.Point.coordinates[1]; y.value = place.Point.coordinates[0];}}
address { geocoder.getLatLngaddress,
npoint { point {
alertaddress + not found; lse {
map.setCenterpoint, 17; var marker = new GMarkerpoint;
map.addOverlaymarker; marker.openInfoWindowHtmladdress;
; } }
detail dapat
key=ABQIAAA LoOfSFBw
Pertama disisipkan key “
ABQIAAAAPDUET0Qt7p2 RJn_TWxWvuLoOfSFBw
”. secara default, titik teng
7.343436
dan longitud perbesaran peta.
Selanjutnya pad melihat rute dan hitung j
untuk melihat hasil kedu fungsi melihat rute dan h
Gambar 15 merupakan Sebelumnya User memi
pada peta untuk melih berwarna biru. Selanjut
mendapatkan informasi untuk hitung jarak dapat
untuk melihat rute dapat
Kode Program 2 Hitung Jara
function hitung { var x = doc
var y = doc var x2 = do
var y2 = do var glatlng
var glatlng var miledis
var kmdista alertJara
return fals
17 key
untuk integrasi Google Maps API pada
2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW1cEECiT
”. Fungsi
initialize
digunakan untuk men engah peta pada kota Salatiga yang memiliki
tude
110.503197
sedangkan angka 15 merupa
ada peta pada halaman Detail, dapat dilakuk g jarak. User dapat memilih salah satu titik lokasi
edua fungsi tersebut. Gambar 15 merupakan hasi n hitung jarak.
Gambar 15 Hitung Jarak dan Lihat Rute
an tampilan peta untuk fungsi lihat rute dan hit milih lokasi yang diinginkan dengan melakukan
lihat rute. Rute akan ditampilkan dengan seb jutnya User dapat menekan tombol Hitung Ja
si jarak tempuh dengan satuan kilometer. Kode pat dilihat pada Kode Program 2, sedangkan kod
at dilihat pada Kode Program 3.
arak
cument.getElementByIdx.value; cument.getElementByIdy.value;
ocument.getElementByIdx2.value; ocument.getElementByIdy2.value;
g1 = new GLatLngx, y; g2 = new GLatLngx2, y2;
stance = glatlng1.distanceFromglatlng2, 3959.to ance = miledistance 1.609344.toFixed1;
ak Tempuh: + kmdistance + km; se; }
a web yaitu
ThQYkcZUP
mengatur peta ki latitude
-
pakan skala ukan fungsi
asi pada peta asil tampilan
hitung jarak. n 2 kali klik
sebuah garis Jarak untuk
ode program ode program
oFixed1;
Fungsi pada Kod antara lembaga pendidik
kmdistance = miledista dua titik di peta. Dua titik
Kode Program 3 Lihat Rute
var gd = new GDirection gd.loadfrom:
longitude; ? place.Point.co
var route; GEvent.addLi var numRoute = gd.getNu
Pada Kode Prog fungsi GDirections dip
dimasukkan User sebelu Maps
API yang menanga
Gambar 16 merupakan t garis. Grafik ini menamp
sekolah.
Gambar 17 merupakan h sekolah di kota Salatiga
18 ode Program 2 merupakan fungsi untuk menghi
idikan dan lokasi yang dipilih oleh User. Baris stance 1.609344 digunakan untuk kalkulasi ja
titik yang dimaksud yaitu glatlng1 dan glatlng2.
te
nsmap,null; : ?php echo daftar-latitude; ?,?php echo da
to: + place.Point.coordinates[1] + , + oordinates[0];
istenergd,load, function { umRoutes; };
rogram 3 dapat dilihat kode program untuk me dipanggil setelah mendapatkan koordinat dari i
elumnya. Fungsi GDirections merupakan fung ngani rute pada peta dari satu lokasi ke tempat lain
Gambar 16 Statistik Jumlah Siswa
n tampilan Statistik Jumlah Siswa berupa grafik ampilkan perkembangan jumlah siswa per tahu
Gambar 17 Peta Seluruh Sekolah
n halaman Peta Seluruh Sekolah yang menampilk a sesuai dengan jenjang yang dipilih.
hitung jarak ris kode var
jarak antara
aftar-
melihat rute, input
yang ngsi Google
ainnya.
ik berbentuk ahun di satu
ilkan seluruh
Untuk menampilkan dat administrator
. Gambar digunakan Admin untuk
untuk menambah daftar siswa per tahun di suatu
sekolah dan Detail yang
Pada Gambar 19 dapat dengan sekolah yang in
kolom berupa latitude lokasi dari lembaga pend
Black Box Testing
Tahap berikutnya telah dirancang. Black
pelengkap untuk menem Tabel 4.
19
Gambar 18 Manajemen Daftar Sekolah
data sekolah dalam aplikasi ini, maka dibutuhkan ar 18 merupakan menu Manajemen Daftar Sek
k mengelola data sekolah dengan fitur berupa Tamb ftar sekolah, Jml Siswa untuk mengelola statist
atu sekolah, dan fungsi Edit dan Hapus untuk mer ng berguna untuk menampilkan hasil input terakhi
Gambar 19 Tambah Daftar Sekolah
at dilihat sebuah form yang dapat dimasukkan d ingin didaftarkan dalam aplikasi. Pada form in
dan longitude yang harus diisi untuk menamp ndidikan.
nya yaitu dilakukan pengujian validasi terhadap si ck box
merupakan pendekatan yang digunaka emukan kesalahan [13]. Validasi sistem dapat di
kan halaman ekolah yang
ambah Data tistik jumlah
erubah data hir.
data terkait ini ada dua
mpilkan titik
sistem yang kan sebagai
dilihat pada
20
Tabel 4 Hasil Pengujian Black Box
No Point
Pengujian Validasi Input
Data Input Hasil Uji
1. Proses login
username password
dikosongkan value name
dikosongkan value password
gagal login berhasil login
gagal login berhasil login
2. Cari sekolah
kata kunci nama sekolah
berhasil tampil 3.
Tambah Daftar
Sekolah input
Tambah Data
lihat detail data pilih menu
pilih menu berhasil dibuat
berhasil dibuat
4. Tambah
Jumlah Siswa input
tambah
data
pilih menu berhasil dibuat
5. Ubah
Informasi input
baru lihat data
pilih menu pilih menu
berhasil dibuat berhasil dibuat
6. Ubah
Password input username
input password Pilih menu
Pilih menu berhasil dibuat
berhasil dibuat 7.
Logout logout
Pilih menu berhasil keluar
Pada pengujian yang dilakukan pada Tabel 4, dapat dilihat bahwa proses validasi sistem sudah sesuai dengan apa yang dirancang dan berjalan sesuai yang
diharapkan. Proses pencarian sekolah dapat dilakukan dengan memasukkan kata kunci berupa nama sekolah. Sedangkan proses tambah daftar sekolah dan detail
data berhasil dibuat setelah dilakukan input data ke dalam sistem. Tambah jumlah siswa, ubah informasi, dan ubah password bagi Admin juga berhasil dibuat.
Pengujian Pengguna
Pengujian ini bertujuan untuk mengukur kualitas aplikasi yang dibuat dengan 30 orang sebagai sampel. Penyusunan dan perhitungan pengujian ini
menggunakan skala Likert yang merupakan cara sistematis untuk memberi skor pada indeks [14]. Di dalam skala Likert tersebut diberi bobot nilai 1 sampai 5,
yaitu Sangat Kurang SK, Kurang K, Cukup C, Baik B, dan Sangat Baik SB. Dari hasil kuesioner dapat dihitung hasil penilaian keseluruhan sistem
melalui pengujian dengan skala Likert dapat dilihat pada Tabel 5.
Tabel 5 Hasil Penilaian Keseluruhan Pertanyaan SB
B C
K SK Total
Rata-Rata
1 2
21 7
- -
115 3.8
2 6
20 4
- -
122 4.06
3 3
15 12 -
- 111
3.7 4
2 21
7 -
- 115
3.8 5
1 21
8 -
- 113
3.7 6
8 18
4 -
- 124
4.1 7
7 19
4 -
- 123
4.1 Total dan Rata-rata Keseluruhan
823 3.89
21 Pada Tabel 5 dapat dilihat bahwa hasil penilaian keseluruhan sistem memperoleh
nilai rata-rata 3.89 yang berarti menunjukkan nilai B atau Baik karena terletak antara rentang nilai Baik.
5.
Simpulan
Berdasarkan hasil perancangan sistem informasi pencarian lembaga pendidikan di kota Salatiga berbasis web, maka dapat disimpulkan bahwa
teknologi web yang diterapkan dalam sistem ini dapat digunakan dengan baik oleh user
dan dapat membantu dalam pencarian lembaga pendidikan. Hal ini ditunjukkan dengan adanya perolehan rata-rata nilai B yang berarti baik. Dengan
aplikasi ini user dapat mencari lokasi berdasarkan nama, alamat, fasilitas, dan konsentrasi lembaga pendidikan di kota Salatiga yang sedang dicari khusus untuk
jenjang SMP, SMA dan perguruan tinggi baik Negeri maupun Swasta.
Sistem pencarian lembaga pendidikan di Kota Salatiga ini masih memiliki keterbatasan yang muncul, untuk itu saran yang dapat disampaikan adalah :
penambahan jenjang SD, dibuat pembagian kategori lembaga pendidikan berdasarkan Kecamatan, serta integrasi dengan situs Pemkot Salatiga sehingga
diharapkan dapat memberi manfaat yang besar di sektor pendidikan kota Salatiga.
6. Daftar Pustaka