} public function combo_box name
{ ?
select name=?php
echo name;
? class=selectedfield
option value=0.000.00option option value=0.200.20option
option value=0.400.40option option value=0.600.60option
option value=0.800.80option option value=1.001.00option
select ?php
} }
?
2. Template
Indeks ?php
Quick, clean clear defined __GISSAW__ or die Get out of here ;
? div id=container
div id=header ?php this-set_header header.jpg ; ?
div div id=page-container
div id=pipe ?php this-set_logo usu.png ; ?
div id=web-app-title?php echo this- config-web_app_title; ?div
div id=web-author?php echo Oleh : . this-config-web_author; ?div
div div id=page
div id=left-nav div id=mainmenu
?php this-load_page
mainmenu ; ? div
div div id=right-nav
div id=dynamic-page-title?php
echo this-page_title; ?div div id=dynamic-page-loaded?php
this-load_page; ?div div
div id=clearnbsp;div
Universitas Sumatera Utara
div div
div id=copyright ?php echo this-config-web_copyright; ?
div div
Main menu ?php
Quick, clean clear defined __GISSAW__ or die Get out of here ;
? ul
li id=titleMAIN MENUli lia
href=?php echo
base_url; ?
title=HomeHomeali lia href=?php echo base_url . hydrant.php;
? title=Fire Hydrant Kota MedanFire Hydrant Kota Medanali
ul Home
?php Quick, clean clear
defined __GISSAW__ or die Get out of here ; ?
div id=welcome
Selamat datang di b ?php echo this-config- web_app_title; ?. b
Sistem ini berguna untuk menentukan lokasi hydrant yang tepat di Kota Medan
berdasarkan kriteria
lokasi seperti
Topografi, Penggunaan Lahan, Gegologi,
Hidrologi, dan Aksebilitas. Output dari sistem ini adalah nilai preverensi
lokasi yang dihitung dengan metode Simple Additive Weighting SAW. Kecamatan kota Medan
yang memiliki nilai preverensi tertinggi merupakan lokasi yang terpilih sebagai
lokasi hydrant yang tepat yang akan ditampilkan dihighlight pada peta kota Medan.pnbsp;p
Pengguna dapat menggunakan sistem ini dengan mengikuti prosedur berikut:
ul li
Universitas Sumatera Utara
Pilih Menu bFire Hydrant Kota Medan.b li
li Input nilai bBobot Kriteria Weightb
dan bMatrix Keputusan X rsubijsub, b kemudian tekan tombol bproses.b
li li
Nilai preverensi
setiap alternatif
lokasi akan ditampilkan, yang selanjutnya dapat divisualisasikan dalam bentuk peta
dengan mengklik link bTampilkan Peta.b li
ul div
img src=?php echo base_url . imagesmedan.gif; ? title=Peta Kota Medan align=right WIDTH=300
Hydrant ?php
Quick, clean clear defined __GISSAW__ or die Get out of here ;
? form action=hydrant.php?do=process method=post
div id=step
LANGKAH 1: Tentukan Bobot dan Matrix Keputusan X div
fieldset legendBobot Kriterialegend
table width=50 class=table-weight tr
th width=283
scope=rowTopografi Csub1subth
td width=27:td td width=283?php HTML::combo_box C1 ;
?td tr
tr th scope=rowPenggunaan Lahan Csub2sub
th td:td
td?php HTML::combo_box C2 ; ?td tr
tr th scope=rowGeologi Csub3sub th
td:td td?php HTML::combo_box C3 ; ?td
tr tr
Universitas Sumatera Utara
th scope=rowHidrologi Csub4sub th td:td
td?php HTML::combo_box C4 ; ?td tr
tr th
scope=rowAksebilitas Csub5sub
th td:td
td?php HTML::combo_box C5 ; ?td tr
table fieldset
fieldset legendMatrix Keputusan Xlegend
table width=100 class=table-matrix tr
td width=35
scope=col style=background-
color:E5E5E5;strongdiv align=centeriRsubijsubidivstrongtd
th width=15
scope=coldiv align=centerTopografibrCsub1subdivth
th width=15
scope=coldiv align=centerPenggunaan
brLahan Csub2subdivth
th width=15
scope=coldiv align=centerGeologibrCsub3subdivth
th width=15
scope=coldiv align=centerHidrologibrCsub4subdivth
th width=15
scope=coldiv align=centerAksebilitasbrCsub5subdivth
tr tr
th scope=row?php
echo this-config-
alternative[0]; ?th tddiv align=center?php HTML::combo_box A11 ;
?divtd tddiv align=center?php HTML::combo_box A12 ;
?divtd tddiv align=center?php HTML::combo_box A13 ;
?divtd tddiv align=center?php HTML::combo_box A14 ;
?divtd tddiv align=center?php HTML::combo_box A15 ;
?divtd tr
tr th
scope=row?php echo
this-config- alternative[1]; ?th
tddiv align=center?php HTML::combo_box A21 ; ?divtd
tddiv align=center?php HTML::combo_box A22 ; ?divtd
tddiv align=center?php HTML::combo_box A23 ; ?divtd
tddiv align=center?php HTML::combo_box A24 ; ?divtd
Universitas Sumatera Utara
tddiv align=center?php HTML::combo_box A25 ; ?divtd
tr tr
th
scope=row?php echo
this-config- alternative[2]; ?th
tddiv align=center?php HTML::combo_box A31 ; ?divtd
tddiv align=center?php HTML::combo_box A32 ; ?divtd
tddiv align=center?php HTML::combo_box A33 ; ?divtd
tddiv align=center?php HTML::combo_box A34 ; ?divtd
tddiv align=center?php HTML::combo_box A35 ; ?divtd
tr table
fieldset fieldset
legendAksilegend ?php echo HTML::button reset, Reset ; echo
HTML::button submit, Proses ; ? fieldset
form Finally
?php Quick, clean clear
defined __GISSAW__ or die Get out of here ; function bgcolor val
{
echoval ==
_SESSION[winner_value] ?
style=background-color:FFE1FF : ; }
? form action=hydrant.php?do=process method=post
div id=step
LANGKAH 2: Tampilkan Peta div
fieldset legendMatrik Ternormalisasi Rlegend
table width=3 border=1 class=table-matrix-r cellpadding=0 cellspacing=0
tr tdnbsp;td
tdnbsp;td td
style=border-left:solid 2px
000000; border-top:solid 2px 000000;nbsp;td
td colspan=5 rowspan=3
Universitas Sumatera Utara
table cellpadding=0
cellspacing=0 class=table-element
?php for i = 1; i = _SESSION[row]; i++
{ for j = 1; j = _SESSION[column];
j++ {
? td?php
echo _SESSION[i
. i][j . j]; ?td
?php }
echo trtr; }
? table
td td style=border-top:solid 2px 000000; border-
right:solid 2px 000000;nbsp;td tr
tr tdRtd
td=td td
style=border-left:solid 2px
000000;nbsp;td td
style=border-right:solid 2px
000000;nbsp;td tr
tr tdnbsp;td
tdnbsp;td td
style=border-left:solid 2px
000000; border-bottom:solid 2px 000000;nbsp;td
td style=border-right:solid
2px 000000;
border-bottom:solid 2px 000000;nbsp;td tr
table fieldset
fieldset legendPreferensi
Setiap Alternatif
Vi -
Ailegend table width=100 class=table-preferensi
tr ?php bgcolor _SESSION[V0] ; ? th
width=26 scope=row
?php bgcolor
_SESSION[V0] ;
??php echo
this-config- alternative[0]; ?th
td width=1:td td width=73?php echo _SESSION[L0] . b .
_SESSION[V0] . b; ?td tr
tr ?php bgcolor _SESSION[V1] ; ? th scope=row ?php bgcolor _SESSION[V1] ;
??php echo this-config-alternative[1]; ?th td:td
Universitas Sumatera Utara
td?php echo _SESSION[L1] . b . _SESSION[V1] . b; ?td
tr tr ?php bgcolor _SESSION[V2] ; ?
th scope=row ?php bgcolor _SESSION[V2] ; ??php echo this-config-alternative[2]; ?th
td:td td?php echo _SESSION[L2] . b . _SESSION[V2]
. b; ?td tr
table fieldset
fieldset
legendLokasi Terbaik The Winnerlegend ?php if _SESSION[winner_value] = 0 { ?
div id=thebest?php
echo _SESSION[winner_label];
? ?php
echo _SESSION[winner_value]; ? ?php echo HTML::button
button, Tampilkan Peta , finally.php; ? div
?php } else { ? Tidak ada output
?php } ? fieldset
form Map
?php Quick, clean clear
defined __GISSAW__ or die Get out of here ; session_start;
if
_SESSION[winner_label] ==
this-config- alternative[0]
this-winner = mapalta; elseif
_SESSION[winner_label] ==
this-config- alternative[1]
this-winner = mapaltb; else
this-winner = mapaltc; ?
iframe name=peta
src=http:localhostcgi- binmapserv.exe?map=C:\ms4w\Apache\htdocs\gissaw\?php echo
this-winner; ?.mapmode=browse?php echo this-winner . .map; ? width=100 height=1000 frameborder=0
scrolling=noiframe Style
Universitas Sumatera Utara
body {
font-family:MS Trebuchet;
font-size:14px; background-color:666666;}
body, html, form, h1, h2, h3, h4, h5, h6, p, br { margin:0px; padding:0px }
clear { clear:both; } container {}
header { background-color:000000; text-align:center;} page-container { margin:0 auto; width:85; border:solid 1px
666666; background-color:FFFFFF; height:1200px; } pipe { padding:15px; border-bottom:solid 4px CCCCCC;
background-color:f3f3f3; } web-app-title{
font-size:15px; font-weight:bold;
color:666666; text-align:center; } web-author { text-align:right; text-align:center; font-
size:14px; color:000000; font-weight:bold; } page { padding:0px;}
left-nav { border:solid 1px cccccc; float:left; width:23; padding:10px; background-color:f3f3f3; height:1000px; }
mainmenu ul { margin:0px; padding:0px; list-style:none; } mainmenu
ul title,
dynamic-page-title {
border- bottom:solid
1px cccccc;
padding-bottom:10px; color:FF0000;
font-size:15px; font-weight:bold;
text- transform:uppercase; }
mainmenu ul li { border-bottom:solid 1px cccccc;} mainmenu ul li a { display:block; padding:10px; font-
size:15px; text-decoration:none;
font-weight:bold; color:333333; }
mainmenu ul
li a:hover{
background-color:E4E4E4; color:000000;}
right-nav { float:left; width:72; padding:10px; } dynamic-page-loaded { margin-top:10px; }
copyright { text-align:center; padding:10px; color:FFFFFF; font-size:15px; font-weight:bold; background-color:333333;
} BEGIN FOR CONTENT STYLE
welcome { float:left; width:50; text-align:justify; line- height:22px; }
welcome ul li { margin-bottom:10px; } Hydrant
step { font-size:15px; font-weight:bold; margin:20px 0px 20px 0px;}
fieldset { padding:20px; margin-bottom:50px;} fieldset
legend {
font-size:15px; font-weight:bold;
color:FF3300; } .button { padding:10px; font-weight:bold; cursor:pointer;
background-color:f3f3f3; border:solid 1px CCCCCC; -moz- border-widget:5px;
-moz-border-radius:5px; box-shadow:1px
1px 5px
cccccc; font-family:MS
Trebuchet; font-
size:14px;} .selectedfield { padding:5px; font-weight:bold; }
Universitas Sumatera Utara
.table-weight{ border-collapse:collapse; border:solid 1px CCCCCC;}
.table-weight th { text-align:left; padding-left:15px; border:solid 0px CCCCCC; }
.table-weight
td {
text-align:center; padding:10px;
border:solid 0px CCCCCC; } .table-weight
tr {
text-align:center; padding:10px;
border:solid 1px CCCCCC; } .table-matrix{ border-collapse:collapse; border:solid 1px
CCCCCC; } .table-matrix
th {
text-align:left; padding:10px;
border:solid 1px CCCCCC; background-color: f3f3f3;} .table-matrix
td {
text-align:center; padding:10px;
border:solid 1px CCCCCC; } .table-matrix-r{ border-collapse:collapse; font-size:20px;
font-weight:bold; border:solid 0px red; } .table-matrix-r
th {
text-align:left; padding:3px;
background-color: f3f3f3; border:solid 0px green; } .table-matrix-r
td {
text-align:center; padding:3px;
border:solid 0px blue; } .table-element { }
.table-element td{ padding:13px;} .table-preferensi{
border-collapse:collapse; border:solid
1px CCCCCC; } .table-preferensi th { text-align:left; padding-left:10px;
border:solid 0px CCCCCC; background-color: f3f3f3; } .table-preferensi td { text-align:left; padding:10px 5px
10px 5px; border:solid 0px CCCCCC; } .table-preferensi tr { text-align:left; padding:10px 5px
10px 5px; border:solid 1px CCCCCC; } thebest { font-weight:bold; font-size:25px; color:009900;}
3. User interface
