IV.3. Implementasi Tampilan Antarmuka Sistem IV.3.1. Implementasi Tampilan Antarmuka Pengguna Umum
Implementasi tampilan antarmuka pengguna umum merupakan implementasi tampilan dari sistem yang akan berinteraksi langsung dengan
pengguna umum. Berikut adalah implementasi tampilan antarmuka pengguna umum :
IV.3.1.1. Implementasi Proses
Halaman Home
Sistem Pengguna Umum
Gambar 4.13
Tampilan Halaman Home Pengguna Umum
IV.3.1.2. Implementasi Proses Tampil Peta
Gambar 4.14
Tampilan Peta Pengguna Umum
Untuk menampilkan peta pada tampilan antarmuka pengguna umum
menggunakan perintah
javascript yang
terdapat pada
pencarianLokasi.php dibawah berikut: function ambilData {
var searchUrl = ambilDataPerguruanTinggi.php; downloadUrlsearchUrl, functiondata {
var xml = parseXmldata; var markerNodes =
xml.documentElement.getElementsByTagNamemarker;
for var i = 0; i markerNodes.length; i++ { var id = markerNodes[i].getAttributeid;
var name = markerNodes[i].getAttributename; var address = markerNodes[i].getAttributeaddress;
var email = markerNodes[i].getAttributeemail; var website = markerNodes[i].getAttributewebsite;
var telp = markerNodes[i].getAttributetelp; var jenis =markerNodes[i].getAttributejenis;
var kategori=markerNodes[i].getAttributekategori;
set_iconjenis; var latlng = new google.maps.LatLng
parseFloatmarkerNodes[i].getAttributelat, parseFloatmarkerNodes[i].getAttributelng;
createMarkerlatlng, name, address,telp,email,id,website,jenis;
} };
}
div id=map style=width:580px; height:600pxdiv
IV.3.1.3. Implementasi Proses Halaman Cari Berdasarkan Nama Perguruan Tinggi Pengguna Umum
Gambar 4.15
Tampilan Halaman Pencarian Lokasi Pengguna Umum
pada halaman pencarian berdasarkan lokasi ini memanggil keluaran xml berdasarkan dengan nama perguruan tinggi, file phpnya
bernama hasil_pencarianLokasi.php ?php
include Adminkoneksi.php;
Start XML file, create parent node dom = new DOMDocument1.0;
node = dom-createElementmarkers; parnode = dom-appendChildnode;
if _GET[kategori] =0 {
id = _GET[id]; kategori = 1;
bagianWhere .=
AND perguruan_tinggi.idPerguruanTinggi = .id;
} query
= sprintfSELECT
program_studi., kategori.,
perguruan_tinggi., fakultas. FROM kategori, perguruan_tinggi, fakultas, program_studi
WHERE fakultas.idFakultas = program_studi.idFakultas AND perguruan_tinggi.idPerguruanTinggi= fakultas.idPerguruanTinggi AND
kategori.idKategoriPerguruanTinggi =
perguruan_tinggi.idKategoriPerguruanTinggi.bagianWhere.; result = mysql_queryquery;
headerContent-type: textxml; Iterate through the rows, adding XML nodes for each
while row = mysql_fetch_assocresult{ node = dom-createElementmarker;
newnode = parnode-appendChildnode; newnode-setAttributeid, row[idPerguruanTinggi];
newnode-setAttributename, row[namaPerguruanTinggi]; newnode-setAttributeaddress, row[Alamat];
newnode-setAttributelat, row[Latitude]; newnode-setAttributelng, row[Longitude];
newnode-setAttributetelp, row[Telepon]; newnode-setAttributeemail, row[Email];
newnode-setAttributewebsite, row[Website]; newnode-setAttributekategori,
row[idKategoriPerguruanTinggi]; newnode-setAttributejenis,
row[namaKategoriPerguruanTinggi]; }
echo dom-saveXML; ?
IV.3.1.4. Implementasi Proses Cari Berdasarkan Kriteria Pengguna Umum
Gambar 4.16 Tampilan Halaman Pencarian Kriteria Pengguna Umum
pada halaman pencarian berdasarkan
kriteria kategori ini
memanggil keluaran xml berdasarkan dengan nama perguruan tinggi, file phpnya bernama hasil_pencarianKriteria2.php
?php include Adminkoneksi.php;
Start XML file, create parent node dom = new DOMDocument1.0;
node = dom-createElementmarkers; parnode = dom-appendChildnode;
if _GET[kategori] =0 {
kategori = _GET[kategori]; kategori = 1;
bagianWhere .=
AND kategori.idKategoriPerguruanTinggi = .kategori;
}
Search the rows in the markers table query
= sprintfSELECT
program_studi., kategori.,
perguruan_tinggi., fakultas. FROM kategori, perguruan_tinggi, fakultas, program_studi
WHERE fakultas.idFakultas = program_studi.idFakultas AND perguruan_tinggi.idPerguruanTinggi= fakultas.idPerguruanTinggi AND
kategori.idKategoriPerguruanTinggi =
perguruan_tinggi.idKategoriPerguruanTinggi.bagianWhere.;
result = mysql_queryquery;
headerContent-type: textxml;
Iterate through the rows, adding XML nodes for each while row = mysql_fetch_assocresult{
node = dom-createElementmarker; newnode = parnode-appendChildnode;
newnode-setAttributeid, row[idPerguruanTinggi]; newnode-setAttributename, row[namaPerguruanTinggi];
newnode-setAttributeaddress, row[Alamat]; newnode-setAttributelat, row[Latitude];
newnode-setAttributelng, row[Longitude]; newnode-setAttributetelp, row[Telepon];
newnode-setAttributeemail, row[Email]; newnode-setAttributewebsite, row[Website];
newnode-setAttributekategori, row[idKategoriPerguruanTinggi];
newnode-setAttributejenis, row[namaKategoriPerguruanTinggi];
} echo dom-saveXML;
?
IV.3.1.5. Implementasi Proses Halaman Buku Tamu Pengguna Umum
Gambar 4.17
Tampilan Halaman Buku Tamu Pengguna Umum
IV.3.1.6. Implementasi Proses Halaman Tentang Sistem Pengguna Umum
Gambar 4.18 Tampilan Halaman Tentang Sistem Pengguna Umum
IV.3.2. Implementasi Tampilan Antarmuka Administrator IV.3.2.1. Implementasi Proses Halaman Login Administrator
Implementasi tampilan antarmuka administrator
merupakan implementasi tampilan dari sistem yang akan berinteraksi langsung dengan
admin. Berikut adalah implementasi tampilan antarmuka administrator :
Gambar 4.19
Tampilan Halaman Login Administrator
IV.3.2.2. Implementasi Halaman Home Administrator
Gambar 4.20
Tampilan Halaman Home Administrator
IV.3.2.3. Implementasi Proses Halaman Kelola Perguruan Tinggi Administrator
Gambar 4.21 Tampilan Halaman Kelola Perguruan Tinggi Administrator
IV.3.2.4. Implementasi Proses Halaman Tambah Data Perguruan Tinggi Administrator
Gambar 4.22
Tampilan Halaman Tambah Data Perguruan Tinggi Administrator Pada halaman ini admin dapat menambahkan data perguruan tinggi yang
ditentukan dengan memasukkan longitude dan latitude. Proses ini terdapat pada tambahPerguruanTinggi.php
body onLoad=load -- begin container --
div id=container
-- begin header -- div id=header
divimg src=..imagesSIG_head.jpg alt= div div
-- end header -- -- begin contentBody --
br br
div class=tampil br
h1Tambah Perguruan Tinggih1
form method=POST action=tambahPerguruanTinggi1.php enctype=multipartform-data name=form onsubmit=return validateRthis;
table tr
td valign=topKategori Perguruan Tinggitd td valign=top:td
tdselect name=jenis title=Pilih Kategori Perguruan
Tinggi option value=-1 selected-- Pilih Kategori Perguruan
Tinggi --option ?php include koneksi.php;
sql=mysql_queryselect idKategoriPerguruanTinggi, namaKategoriPerguruanTinggi from kategori
GROUP BY namaKategoriPerguruanTinggi; while data=mysql_fetch_arraysql {
echo option value=data[idKategoriPerguruanTinggi]
onClick=setjenisthis.valuedata[namaKategoriPerguruanTinggi]option; }
? select
tr tr
td valign=topNama Perguruan Tinggitd td:td
td valign=topinput name=namaPerguruanTinggi
type=text id=judul size=25 onblur=_blurjudul onfocus=_focusjudultd
tr tr
td valign=topLatitudetd td:td
td valign=topinput name=Latitude
onKeyUp=validatethis type=text id=x size=20onblur=_blurx onfocus=_focusxtd
tr tr
td valign=topLongitudetd td:td
td valign=topinput name=Longitude
onKeyUp=validatethis type=text id=y size=20 onblur=_blury onfocus=_focusytd
tr
table br
input type=submit name=Submit title=Klik di sini untuk melanjutkan value=Lanjut
input type=button value= Batal title=Klik Disini Untuk Kembali Keform Sebelumnya onclick=self.history.back
form p align=CENTERLatitude input type=text id=lat Longitude
input type=text id=long p br
br div id=map style=width:580px; height:600pxdivbr br br
br br br br
div div id=footer
pCopyright copy; 2013 Sistem Informasi Geografis Lokasi Perguruan Tinggi DIY p
div body
\
IV.3.2.5. Implementasi
Proses Halaman
Kelola Fakultas
Administrator
Gambar 4.23 Tampilan Halaman Kelola Fakultas Administrator
IV.3.2.6. Implementasi Proses Halaman Kelola Program Studi Administrator
Gambar 4.24
Tampilan Halaman Kelola Program Studi Administrator
IV.3.2.7. Implementasi Proses Halaman Kategori Administrator
Gambar 4.25
Tampilan Halaman Kategori Administrator
IV.3.2.8. Implementasi Proses Halaman Kelola Administrator
Gambar 4.26
Tampilan Halaman Kelola Administrator
IV.3.2.9. Implementasi Proses
Halaman Kelola Buku Tamu
Administrator
Gambar 4.27 Tampilan Halaman Kelola Buku Tamu Administrator
100
BAB V ANALISIS HASIL IMPLEMENTASI
