46
Bab 4
Hasil dan Pembahasan
4.1 Implementasi SistemBerdasarkan perancangan yang telah dilakukan pada Bab
Tiga, maka pada bagian ini akan dibahas tentang implementasi
sistem WebGis sekolah di Salatiga. Adapun tujuan dari
implementasi sistem ini adalah untuk memastikan perangkat lunak
yang dibuat dapat bekerja secara efektif dan efisien sesuai dengan
yang diharapkan. Aplikasi sistem Informasi Geografi sekolah
Salatiga berbasis web ini dibangun menggunakan MapServer-CGI
dengan framework Chameleon untuk menampilkan peta berbasis
web dan PHP script untuk user interface nya.
Dalam pembangunan WebGis sekolah di salatiga, maka ada
tiga komponen utama yang dibahas yaitu antar muka pengguna, peta
sarana dan administrasi sarana. Ketiga komponen ini memiliki
peranan penting dalam pengembangan sistem informasi sekolah
berbasis web pada kota Salatiga.
4.1.1 Implementasi Antarmuka
Pada pertama kali user mengakses web, maka user akan
masuk pada Menu home. Gambar 4.1 menunjukkan antar muka
menu utama yang disebut sebagai Menu Home.
47
Gambar 4.1. Menu Home
Berdasarkan menu home pada Gambar 4.1, dapat dilihat
fasilitas-fasilitas awal yang yang ditampilkan seperti :
Home, yang menunjukan tentang tampilan awal web,
Fasilitas, yang menunjukan tentang daftar sekolah yang ada
di Salatiga beserta keterangan penunjang meliputi daftar guru
dan fasilitas penunjang sekolah.
Peta fasilitas, menunjukan lokasi sekolah yang ada di
Salatiga berupa peta interaktif.
Buku tamu, menfasilitasi pengunjung web untuk member
kritik dan saran.
Admin, pada bagian ini, berfungsi untuk mengatur atau
mengelola Sistem Informasi Geografis Berbasis Web sekolah
di Salatiga.
48
.
4.1.2 Daftar fasilitas sekolah di Salatiga
Penjelasan mengenai sekolah-sekolah di Salatiga yang
menginformasikan atribut-atribut yang ada di dalam masing-masing
sekolah yang ada, diantaranya daftar guru dan fasilitas pendidikan
yang ada..
Berdasarkan Gambar 4.2 terlihat bahwa sistem WebGIS
Sekolah di Salatiga dapat menampilkan daftar sekolah di Salatiga,
dalam hal ini dibedakan menajadi 3 kategori, yaitu SD, SMP, SMA.
Gambar 4.2 daftar jenis sekolah
Berdasarkan kategori-kategori yang diperlihatkan di atas,
maka pengguna dapat memilih jenis sekolah untuk melihat daftar
jenis sekolah yang dipilih. Pemanggilan informasi daftar sekolah
dari database yang akan ditampilkan dapat dilihat dari script berikut.
49
Kode program 4.1 Pemanggilan Tabel Sekolah
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<title>[daftar fasilitas]</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table>
<tr>
<a href=admin.php.?action=2
class=my3><strong>Kembali</strong></a><img
src=images/img108.gif width=3 height=5 style=margin-left:3px/>
</tr>
<?php echo "<center><h3> $ket </h3></center>"; ?>
</table>
<?php
$id_fas=$_GET[id];
include("./engines/head.php");
include("./engines/id_fas.php");
echo("
<table>
<tr>
50
<a href=daftarfas.htm
class=my3><strong>Kembali</strong></a><img
src=images/img108.gif width=3 height=5
style=margin-left:3px/></span>
<center><h5>Fasilitas : $nm_fas</h4></center>
</tr>
<tr width=60% height=100% valign=top bgcolor=#FFFCFB>
<p style=padding-right:10px; padding-left:10px>
<iframe width=100% height=300
src=./engines/f_daftarfas.php?id=$_GET[id] name=view
align=middle marginheight=0 marginwidth=0
hspace=0 vspace=0 frameborder=0 order=behind
scrolling=yes>
</iframe>
</p>
</tr>
</table>
");
include("./engines/bottom.php");
?>
</body>
</html>
?php
if ($id_fas=='fas1')
{
$tb_fas='tb_sekolah';
$nm_fas='SMP';
51
$nm_fas2='MTs';
}
elseif ($id_fas=='fas2')
{
$tb_fas='tb_sekolah';
$nm_fas='SD';
$nm_fas2='MI';
}
elseif ($id_fas=='fas3')
{
$tb_fas='tb_Sekolah';
$nm_fas='SMA';
$nm_fas2='SMK';
}
else
{
$id_fas='0';
}
?>
Maka tampilan informasi berupa tabel yang berisi data
sekolah di salatiga dapat dilihat dalam Gambar 4.3.
52
Gambar 4.3. Tabel daftar sekolah
Dari Gambar 4.3, terlihat contoh tampilan daftar sekolah dasar
yang ada di salatiga baik negri maupun swasta beserta alamatnya.
Dimana dalam Gambar ini, pengunjung dapat memperoleh informasi
tentang masing-masing sekolah, diantaranya daftar guru dan fasilitas
di sekolah yang dipilih.Kode Program 4.2 pemanggilan tabel guru
<?
include("conn.php");
$id=$_GET[id];
//ambil nama sekolah
$sql="SELECT nama_sekolah FROM tb_sekolah WHERE
id_sekolah = '$id'";
$query=pg_query($conn,$sql);
while($row=pg_fetch_array($query))
{
$nm_sekolah=$row[nama_sekolah];
53
}
$sql="SELECT * FROM tb_guru WHERE sekolah =
'$nm_sekolah'";
$query=pg_query($conn,$sql);
$jml_fas=pg_num_rows($query);
//----Form Tabel(Judul)
echo("<table width=100% cellspacing=0 cellpadding=0
bgcolor=#000000>");
echo("<font color=#80B33C size=2><b> Jumlah Fasilitas :
$jml_fas</b></font>");
echo("<table width=100% cellspacing=0 cellpadding=0
bgcolor=#000000>");
echo("<tr>
<td bgcolor=#CCCCCC >Nama Guru</td>
<td bgcolor=#CCCCCC >Jenis Kelamin</td>
<td bgcolor=#CCCCCC >Status
Pegawai</td>
</tr>");
// ----Ambil Isi Record
while($row=pg_fetch_array($query))
{
// ----Ambil Isi Kolom
$nama=$row[gelar_depan]." ".$row[nama_guru]."
".$row[gelar_belakang];
$sex=$row[jenis_kelamin];
$status=$row[status_pegawai];
echo("<tr>
54
<td bgcolor=#FFFFFF>$nama</td>
<td bgcolor=#FFFFFF>$sex</td>
<td bgcolor=#FFFFFF>$status</td>
</tr>");
}
echo("</table>");
?>
Maka tampilan dapat dilihat pada gambar 4.4.
Gambar 4.4, Table Daftar Guru
4.1.3 Peta Sekolah Salatiga
Pada halaman peta sekolah, maka pengguna akan
mendapatkan tentang lokasi sekolah di Salatiga. Halaman peta
sekolah dapat memudahkan pengguna dalam melakukan pencaharian
tempat-tempat yang akan dituju oleh pengguna, dimana penampilan
lokasi tersebut dalam bentuk peta. Pada saat menu ini dijalankan
maka akan memanggil file inisialisasi yang akan berisi rujukan ke
file Chameleon.php, lokasi MapFile serta file template-nya dan
55
melakukan parsing terhadap file template ke dalam aplikasi yang
sesuai dengan file HTML. Koding file inisialisasi terlihat pada Kode
Program 4.1Kode Program 4.3 File Inisialisasi
<?phpinclude( "/ms4w/apps/chameleon/htdocs/chameleon.php");
$szMapFile = "../map/faskes.map";class SampleApp extends Chameleon{function SampleApp(){
parent::Chameleon();$this->moMapSession = new MapSession_RW;$this->moMapSession->setTempDir( getSessionSavePath());
}}
$oApp = new SampleApp();$oApp->registerSkin( 'skins/sample' );
$oApp->CWCAddRegionalTemplate( 'en-CA',dirname(__FILE__).'/template_en.htm',dirname(__FILE__).'/template_rsc_en.php' );$oApp->CWCAddRegionalTemplate( 'id-CA',dirname(__FILE__).'/template_id.htm',dirname(__FILE__).'/template_rsc_id.php' );$oApp->CWCInitialize( dirname(__FILE__).'/template_en.htm',$szMapFile );$oApp->CWCExecute();?>
Ketika dijalankan file inisialisasi tersebut akan memanggil
MapFile. Setiap aplikasi yang dibangun menggunakan MapServer,
membutuhkan minimal satu buah MapFile yang mendeskripsikan
56
apa dan dimana sumber data serta bagaimana data tersebut
ditampilkan.
Setelah hasil dari file inisialisai dan MapFile diolah oleh
MapServer, hasilnya akan di-parsing ke file template. File template
akan berisi kumpulan widget yang menangani bagian fungionalitas
yang terkait erat dengan tampilan akhir peta ke pengguna seperti
pada Gambar 4.5.
Gambar 4.5. Peta Lokasi Sekolah
Gambar 4.6 menunjukkan tentang Peta Lokasi sekolah di
Salatiga. Pada Gambar 4.6 terdapat beberapa fitur utama seperti
legenda, tools, nafigasi peta, tambah fasilitas, keymap, skala dan
posisi kursor.
57
1. Legenda : digunakan untuk menampilkan kategori fitur tempat
sekolah. Dalam fitur ini, tiap layer mewakili kategori fitur
tertentu, dalam hal ini meliputi fitur SD, SMP, SMA.. Fitur
dapat dipilih untuk ditampilkan atau dimatikan sesuai dengan
kebutuhan yang diinginkan oleh pengguna.
2. Tools Peta, komponen yang terdapat dalam tools peta adalah
map size yang berfungsi sebagai informasi ukuran peta yang
ditampilkan, print yang berfungsi untuk mencetak informasi
yang diinginkan pengguna, dan help.
3. Tambah Fasilitas: komponen ini berfungsi untuk menambah
lokasi.
4. Nafigasi Peta : komponen ini terdiri dari beberapa fungsi yang
digunakan untuk melakukan nafigasi peta seperti perbesar,
perkecil, dan query (menampilkan informasi lengkap terhadap
fiture yang di-click oleh pengguna).
5. Keymap : Merupakan komponen yang akan menampilkan posisi
peta, yang akan berguna untuk mengetahui posisi peta pada saat
pengguna melakukan perbesaran pada peta.
6. Posisi Kursor : Komponen ini digunakan untuk menampilkan
posisi dari axis kursor di atas peta dalam koordinat[x,y].
4.1.4 Fasilitas Admin
Dalam sistem informasi geografis Sekolah di Salatiga
berbasis web ini yaitu dapat melakukan update terhadap daftar
sekolah berdasarkan perkembangan yang ada. Adapun tujuan dari
fasilitas admin adalah dalam rangka menampilkan informasi
berdasarkan tingkat keakuratan data sesuai dengan perkembangan
58
yang ada. Berdasarkan hal tersebut, guna menjamin tingkat
keamanan, maka diperlukan autentifikasi pengguna. Hal ini
dimaksudkan untuk melindungi data dan informasi karena system ini
di implementasikan secara online. Guna melihat lebih jauh tentang
fasilitas ini, maka dapat dilihat dalam Gambar 4.7.
Gambar 4.6 Halaman Autentikasi
Dari Gambar 4.6, terlihat jika kombinasi username dan
password yang diinputkan sesuai dengan data yang tersimpan pada
Tabel admin maka user telah terautentifikasi dan halaman antarmuka
admin akan ditampilkan.
4.1.4.1 Administrasi Sekolah
Dalam halaman antarmuka utama admin, maka Secara
default ditampilkan adalah halaman administrasi fasilitas. Untuk
melihat lebih jauh tentang Halaman administrasi fasilitas, maka
dapat dilihat pada Gambar 4.8.
59
Gambar 4.7. Halaman Utama Administrasi Sarana
Berdasarkan Gambar 4.7, maka terdapat fungsi untuk tambah
edit fasilitas (update), hapus fasilitas (delete) serta keluar (logout).
Guna melihat lebih jauh tentang penggunaan fasilitas ini, maka dapat
dilihat pada Gambar 4.9 dibawah ini.
Gambar 4.8. Halaman Tambah Fasilitas
60
Dari Gambar 4.8, maka terlihat bahwa admin dapat
melakukan penambahan fasilitas sekolah dan informasi di dalamnya.
Dalam kolom edit fasilitas, admin dapat mengedit fasilitas yang
dipilih. Selain itu juga dapat melakukan pengelolaan buku tamu.
4.2 Pengujian SistemAgar mengetahui sejauh mana keberhasilan perangkat lunak
yang dibuat, maka perlu adanya suatu pengujian pada proses
administrasi fasilitas sistem informasi geografis sekolah di Salatiga
berbasis web ini. Untuk mendapatkan hasil maksimal, maka
pengujian dilakukan dengan menggunakan metode unit testing, unuk
memastikan proses sistem berjalan seperti dengan yang diharapkan.
4.2.1 Halaman Login
Untuk melakukan administrasi lokasi sekolah dan fasilitas
pendukung, maka halaman login akan dipanggil pertama kali untuk
autentifikasi pengguna dengan memberikan session(session_id).
Jika kombinasi username dan password yang diinputkan sesuai
dengan data yang tersimpan pada Tabel admin, maka administrasi
sarana dapat dilakukan.
Halaman ini akan memberikan proteksi berupa peringatan
apabila username dan password belum di inputkan (kosong) seperti
pada Gambar 4.9 dan Gambar 4.10.
Gambar 4.19 Username Kosong Gambar 4.10 Password Kosong
61
Peringatan juga diberikan apabila kombinasi username dan
password yang diinputkan tidak sesuai dengan data yang tersimpan
pada Tabel admin seperti pada Gambar 4.11.
Gambar 4.11 Username & Password Tidak Terdaftar
Berdasarkan pengujian pada halaman login maka terlihat
bahwa telah terjadi proteksi pada sistem apabila pengguna tidak
mengisi password maupun user nama dan salah memasukan kata
kunci atau password.
4.2.2 Administrasi Tambah Fasilitas
Dalam melakukan pengujian pada halaman tambah fasilitas,
maka dimasukan data baru untuk SD dengan nama “sdn tambah fas”
yang telah di-input-kan, akan di-update dengan informasi pada
Gambar 4.12
Tabel 4.12 Informasi Tambah Fasilitas
62
Berdasarkan hasil penambahan fasilitas sekolah dasar maka hasilnya
dapat dilihat pada daftar sekolah yang sudah terdapat “sdn tambah
fas dan informasinya” dapat dilihat dalam Gambar 4.13.
Gambar 4.13 Daftar sekolah
Dapat dilihat dari gambar 4.13 bahwa penambahan sudah
berhasil dan bisa ditampilkan sebagai informasi baru.
4.3 AnalisaBerdasarkan hasil implementasi dan pengujian sistem
informasi geografis sekolah di Slatiga berbasis web, maka informasi
yang dihasilkan berupa peta tematik lokasi sekolah yang memuat
informasi mengenai lokasi dan keterangan. Peta ini dapat
menghasilkan informasi yang cepat dan akurat yang dapat digunakan
oleh masyarakat umum dan paling tidak dapat memenuhi kebutuhan
63
masyarakat yang ingin mencari mana sekolah yang pas baik
mengenai lokasi, fasilitas dan guru pengajarnya.
Kelebihan utama dari sistem informasi geografis sekolah di
Salatiga berbasis web ini yaitu dapat melakukan update fiture
fasilitas pendukung yang dimiliki secara langsung (on-the-fly)
melalui web interface.