Hasil Perancangan Dan Pengujian

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