Bab 4 Hasil dan Pembahasan -...

18
46 Bab 4 Hasil dan Pembahasan 4.1 Implementasi Sistem Berdasarkan 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.

Transcript of Bab 4 Hasil dan Pembahasan -...

Page 1: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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.

Page 2: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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.

Page 3: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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.

Page 4: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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>

Page 5: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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';

Page 6: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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.

Page 7: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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];

Page 8: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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>

Page 9: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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

Page 10: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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

Page 11: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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.

Page 12: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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

Page 13: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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.

Page 14: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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

Page 15: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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

Page 16: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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

Page 17: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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

Page 18: Bab 4 Hasil dan Pembahasan - repository.uksw.edurepository.uksw.edu/bitstream/123456789/1775/5/T1_682009705_BAB I… · 4.1 Implementasi Sistem ... src=images/img108.gif width=3 height=5

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.