Sistem Informasi Geografis Penentuan Lokasi Hydrant Berbasis Web Dengan Metode Simple Additive Weighting di Wilayah Kota Medan

(1)

Listing program

1. Pemanggilan Class

<?php

/* Quick, clean & clear */

defined( '__GISSAW__' ) or die( 'Get out of here !' );

require_once( 'includes/config.php' );

require_once( 'includes/class_config.php' ); require_once( 'includes/functions.php' ); require_once( 'includes/class_template.php' ); require_once( 'includes/class_gissaw.php' ); require_once( 'includes/class_html.php' );

/*

//$required = 'includes'; if( is_dir( $required ) ) {

$dir = opendir( $required );

while( ($file = readdir( $dir )) !== false ) {

if( $file != '.' && $file != '..' ) {

require_once( $required . '/' . $file ); }

} }

*/ ?>

Config (Program untuk menampilkan tulisan pada halaman utama home)

<?php

/* App configuration */

define( 'WEB_AUTHOR', 'Herna Junita Pakpahan(081201021) ' ); define( 'WEB_TITLE', 'Sistem Informasi Geografis Penentuan Lokasi Hydrant Dengan Metode Simple Additive Weighting Berbasis Web di Wilayah Kota Medan' );

define( 'WEB_APP_TITLE', 'Sistem Informasi Geografis Penentuan Lokasi Hydrant Dengan Metode Simple Additive Weighting Berbasis Web di Wilayah Kota Medan' );

define( 'WEB_COPYRIGHT', 'Program Studi S1 Ilmu Komputer <br>Fakultas Ilmu Komputer dan Tehnik Informasi<br>Universitas Sumatera Utara<br>Medan 2011/2012'

);

(2)

define( 'BASE_URL', 'http://localhost/gissaw/' );

?>

Class config <?php

/* It might be more complext as you want */ class Config

{

var $web_author; var $web_title; var $web_app_title; var $web_copyright;

var $alternative = array( 0 => 'Kec. Medan Deli A<sub>1</sub>',

1 => 'Kec. Medan Sunggal A<sub>2</sub>',

2 => 'Kec. Medan Selayang A<sub>3</sub>' );

/* Add more alternative here */

public function __construct() {

$this->web_author = WEB_AUTHOR; $this->web_title = WEB_TITLE; $this->web_app_title = WEB_APP_TITLE; $this->web_copyright = WEB_COPYRIGHT; }

public function web_author( $author= '' ) {

if( $author != '' ) {

return $author; }

else {

return $this->web_author; /* Print the default title */

} }

public function web_title( $title = '' ) {

if( $title != '' ) {

return $title; }

(3)

return $this->web_title; /* Print the default title */

} }

public function web_app_title( $app_title = '' ) {

if( $app_title != '' ) {

return $app_title; }

else {

return $this->web_app_title; /* Print the default title */

} }

public function web_copyright( $copyright= '' ) {

if( $copyright != '' ) {

echo $copyright; }

else {

echo $this->web_copyright; /* Print the default title */

} }

}

/* Turn on the configuration as default */ $config = new Config();

?>

Class_Functions <?php

function base_url() {

return BASE_URL; }

function redirect( $url ) {

header("Location: " . $url ); }

?>

(4)

<?php

class Template {

var $page_title; var $temp_path; var $copyright; var $page; var $config; var $winner;

public function __construct( $template_path ) {

$this->temp_path = $template_path; $this->config = new Config(); }

public function set_header( $header ) {

?>

<img src="<?php echo $this->temp_path . 'images/' . $header; ?>" width="100%" height="100"/>

<?php }

public function set_logo( $logo ) {

?>

<img src="<?php echo base_url() . 'images/' . $logo; ?>" title="Universitas Sumatera Utara" width="35" align="left"/>

<?php }

public function set_title( $title ) {

$this->page_title = ucwords( strtolower( $title ) );

}

public function html_header( $images = array() ) {

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

(5)

<title><?php echo $this->page_title; ?></title> </head>

<?php }

public function set_page( $page ) {

$this->page = $page; }

public function load_page( $page = '' ) {

if( $page != '' ) {

if( file_exists( 'theme/default/' . $page . '.php' ) )

{

require_once( 'theme/default/' . $page . '.php' );

} else {

echo 'No page !' . "\n"; }

} else {

if( file_exists( 'theme/default/' . $this->page . '.php' ) )

{

require_once( 'theme/default/' . $this->page . '.php' );

} else {

echo 'No page !' . "\n"; }

} }

public function html_footer() {

(6)

</html> <?php }

public function run() {

$this->html_header();

require_once( 'theme/default/index.php' ); $this->html_footer();

} }

?>

Class gissaw

<?php

class Gissaw {

/* The weight of criteria */ var $criteria = array();

/* Hold the matrix Rij (alternative x criteria). * But, it element is the number of 'Alternative'. Recall that

*/

var $alternative = array();

/* N x N matrix (alternative x criteria */ var $elements; // <-- Required OR depreciated ?

/* Rij is the bridge to build normalized matrix */ var $rij = array();

/* Normalized matrix */ var $r_matrix = array();

/* hold the most weight of element from the normalized matrix */

var $max_weight = array();

/* Preferensi of alternative (V1) */ var $preferensi = array();

/* Preferensi label */ var $preflabel = array();

public function find_max( $alt = array() ) {

$max = 0;

(7)

{

if( $v > $max ) $max = $v; }

return $max; }

public function who_max( $alt = array(), $val ) {

foreach( $alt as $k => $v ) {

if ( $val == $v ) {

return $k; break; }

} }

/* Once we have Rij matrix from the user, it's time to normalized it */

public function normalize_matrix() {

/* First of all we need to restructure the matrix into

* Rij so that we can get closer to the way of normalization matrix

*/

for( $i = 1; $i <= count( $this->criteria ); $i++ ) /* 5 times */

{

for( $j = 1; $j <= count( $this->alternative ); $j++ ) /* 3 times */

{

array_push( $this->rij, $this->alternative[$j][$i] );

} }

/* Now keep the maximum value of each column matrix Rij */

$c = 1; $max = 0;

for( $i = 0; $i < count( $this->rij); $i++ ) {

if( $this->rij[$i] > $max ) {

$max = $this->rij[$i]; }

$c++;

(8)

array_push( $this->max_weight, $max);

$c = 1; $max = 0; }

}

/* Build normalized matrix */ $c = 0;

$d = 0;

for( $i = 1; $i <= count( $this->criteria); $i++ ) /* 5 times */

{

for( $j = 1; $j <= count( $this->alternative ); $j++ ) /* 3 times */

{

$this->r_matrix[$j][$i] = round( $this->rij[$c] / $this->max_weight[$d], 3 );

$c++; }

$d++; }

/* Now that, we have normalized matrix. Yay ! */ }

public function execute() {

$config = new Config();

session_start();

$this->normalize_matrix();

/* Keep the number elements of N x N matrix, so that we can loop it in

* another page due to unsupported session for multidemensial array (I doubt it ;-)

*/

$_SESSION['row'] = count( $this->alternative );

$_SESSION['column'] = count( $this->criteria );

/* No more than an interface */ $weight = 0;

$index = 0; $str = '';

foreach( $this->r_matrix as $key => $val ) {

foreach( $val as $key1 => $val1 ) {

$weight = ( $val1 * $this->criteria[$index] ) + $weight;

$operator = ($index == count( $this->criteria ) - 1 ) ? ' = ' : ' + ';

(9)

$_SESSION["i" . $key]["j" . $key1] = $val1;

$index++; }

array_push( $this->preferensi, $weight ); /* Hold the total result */

array_push( $this->preflabel, $str ); /* Hold its process */

$index = 0; $weight = 0; $str = ''; }

foreach( $this->preferensi as $key => $val ) {

$_SESSION["V" . $key] = $val; /* return V0, V1, V2 for A1, A2, A3 */

}

foreach( $this->preflabel as $key => $val ) {

$_SESSION["L" . $key] = $val; /* return L0, L1, L2 for A1, A2, A3 */

}

/* Write the winner to the buffer */

$winner_index = $this->who_max( $this->preferensi, $this->find_max( $this->preferensi) );

$_SESSION['winner_label'] = $config->alternative[$winner_index];

$_SESSION['winner_value'] = $this->find_max( $this->preferensi );

}

?>

Class html

<?php

class HTML {

public function radio( $name, $yes, $no, $current_value = '' )

{

if( $current_value == 0 ) { ?>

(10)

<?php } else { ?>

<input type="radio" value="1" name="<?php echo $name; ?>" checked="checked"> <?php echo $yes; ?>

<?php } }

public function button( $type, $caption, $base_url = '' )

{

if( $type == 'cancel' ) {

return "<input type='button' value='" . $caption . "' onClick='history.back()' class='button'/>  ";

} else {

if( $base_url != '' ) {

return "<input type='" . $type . "'

value='" . $caption . "'

onClick='location.href=\"$base_url\"' class='button'/>  ";

} else {

return "<input type='" . $type . "' value='" . $caption . "' class='button'/>  ";

} }

}

public function select( $value = array(), $name, $cur_value )

{ ?>

<select name="<?php echo $name; ?>" class="selectedfield">

<?php foreach( $value as $key => $val ) { ?> <?php if( $key == $cur_value ) { ?>

<option value="<?php echo $key; ?>" selected="selected"><?php echo $val; ?></option>

<?php } else { ?>

<?php } ?> <?php } ?>

(11)

}

public function combo_box( $name ) {

?>

<select name="<?php echo $name; ?>" class="selectedfield">

<?php }

} ?>

2. Template

Indeks

<?php

?>

<?php $this->set_header( 'header.jpg' ); ?> </div>

<?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>

<?php $this->load_page( 'mainmenu' ); ?>

</div> </div>

<div id="dynamic-page-title"><?php echo $this->page_title; ?></div>

</div>

(12)

</div> </div>

<?php echo $this->config->web_copyright(); ?> </div>

</div>

Main menu

<?php

?> <ul>

<li><a href="<?php echo base_url(); ?>" title="Home">Home</a></li>

<li><a href="<?php echo base_url() . 'hydrant.php'; ?>" title="Fire Hydrant Kota Medan">Fire Hydrant Kota Medan</a></li>

</ul>

Home

<?php

?>

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.<p> </p>

Pengguna dapat menggunakan sistem ini dengan mengikuti prosedur berikut:

<ul>

(13)

Pilih Menu <b>Fire Hydrant Kota Medan.</b> </li>

<li>

Input nilai <b>Bobot Kriteria (Weight)</b> dan <b>Matrix Keputusan X (r<sub>ij</sub>),

</b> kemudian tekan tombol <b>proses.</b> </li>

<li>

Nilai preverensi setiap alternatif (lokasi) akan ditampilkan, yang selanjutnya

dapat divisualisasikan dalam bentuk peta dengan mengklik link <b>Tampilkan Peta.</b>

</li> </ul>

</div>

<img src="<?php echo base_url() . 'images/medan.gif'; ?>" title="Peta Kota Medan" align="right" WIDTH="300"/>

Hydrant

<?php

?>

LANGKAH 1: Tentukan Bobot dan Matrix Keputusan X </div>

<legend>Bobot Kriteria</legend>

<th width="283" scope="row">Topografi (C<sub>1</sub>)</th>

</tr> <tr>

<th scope="row">Penggunaan Lahan (C<sub>2</sub>) </th>

<tr>

<th scope="row">Geologi (C<sub>3</sub>) </th> <td>:</td>

(14)

<th scope="row">Hidrologi (C<sub>4</sub>) </th> <td>:</td>

<tr>

<th scope="row">Aksebilitas (C<sub>5</sub>) </th>

</table> </fieldset> <fieldset>

<legend>Matrix Keputusan X</legend>

<td width="35%" scope="col" style="background-color:#E5E5E5;"><strong><div

align="center"><i>R<sub>ij</sub></i></div></strong></td> <th width="15%" scope="col"><div align="center">Topografi<br>(C<sub>1</sub>)</div></th>

<th width="15%" scope="col"><div align="center">Penggunaan <br>Lahan (C<sub>2</sub>)</div></th>

<th width="15%" scope="col"><div align="center">Geologi<br>(C<sub>3</sub>)</div></th>

<th width="15%" scope="col"><div align="center">Hidrologi<br>(C<sub>4</sub>)</div></th>

<th width="15%" scope="col"><div align="center">Aksebilitas<br>(C<sub>5</sub>)</div></th> </tr>

<tr>

<th scope="row"><?php echo $this->config->alternative[0]; ?></th>

</tr> <tr>

(15)

</tr> <tr>

</tr> </table> </fieldset> <fieldset>

<?php echo HTML::button( 'reset', 'Reset' ); echo HTML::button( 'submit', 'Proses !'); ?>

</fieldset> </form>

Finally

<?php

function bgcolor( $val ) {

echo($val == $_SESSION['winner_value']) ? 'style="background-color:#FFE1FF"' : '';

} ?>

LANGKAH 2: Tampilkan Peta </div>

<legend>Matrik Ternormalisasi R</legend>

<tr>

(16)

<?php

for( $i = 1; $i <= $_SESSION['row']; $i++ ) {

for( $j = 1; $j <= $_SESSION['column']; $j++ )

{ ?>

<?php }

echo "<tr></tr>"; }

?>

</table> </td>

</tr> <tr>

</tr> <tr>

<legend>Preferensi Setiap Alternatif (Vi -> Ai)</legend>

<th width="26%" scope="row" <?php bgcolor( $_SESSION["V0"] ); ?>><?php echo $this->config->alternative[0]; ?></th>

<td width="73%"><?php echo $_SESSION["L0"] . '<b>' . $_SESSION["V0"] . '</b>'; ?></td>

</tr>

<th scope="row" <?php bgcolor( $_SESSION["V1"] ); ?>><?php echo $this->config->alternative[1]; ?></th>

(17)

<td><?php echo $_SESSION["L1"] . '<b>' . $_SESSION["V1"] . '</b>'; ?></td>

</tr>

<th scope="row" <?php bgcolor( $_SESSION["V2"] ); ?>><?php echo $this->config->alternative[2]; ?></th>

<td><?php echo $_SESSION["L2"] . '<b>' . $_SESSION["V2"] . '</b>'; ?></td>

<legend>Lokasi Terbaik (The Winner)</legend> <?php if( $_SESSION['winner_value'] != 0 ) { ?>

<?php } else { ?>

Tidak ada output ! <?php } ?>

</fieldset> </form>

Map

<?php

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

?>

(18)

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

(19)

.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

Index

<?php

define( '__GISSAW__', true );

require_once( 'includes/__call__.php' );

$template = new Template( base_url() . 'theme/default/' ); $template->set_title( $template->config->web_title( 'Selamat Datang !' ) );

$template->set_page( 'home' );

(20)

?>

Hydrant

<?php

$template = new Template( base_url() . 'theme/default/' ); $gissaw = new Gissaw();

$template->set_title( $template->config->web_title( 'Fire Hydrant Kota Medan' ) );

$_GET['do'] = empty( $_GET['do'] ) || !isset( $_GET['do'] ) || $_GET['do'] == '' ? NULL : $_GET['do'];

switch( $_GET['do'] ) {

default:

$template->set_page( 'hydrant' ); $template->run();

break;

case 'process':

/* Set the weight for criteria */

$gissaw->criteria = array( $_POST['C1'], $_POST['C2'], $_POST['C3'], $_POST['C4'], $_POST['C5'] );

/* Set matrix Rij [row (alternative) x column (criteria)] */

$gissaw->alternative = array (

1 => array( 1 => $_POST['A11'],

2 => $_POST['A12'],

3 => $_POST['A13'],

4 => $_POST['A14'],

5 => $_POST['A15'] ),

2 => array( 1 => $_POST['A21'],

2 => $_POST['A22'],

3 => $_POST['A23'],

(21)

5 => $_POST['A25'] ),

3 => array( 1 => $_POST['A31'],

2 => $_POST['A32'],

3 => $_POST['A33'],

4 => $_POST['A34'],

5 => $_POST['A35'] )

) ; $gissaw->execute();

redirect( 'hydrant.php?do=finally' );

break;

case 'finally':

session_start();

$template->set_page( 'finally' ); $template->run();

break;

case 'destroy': // <-- ??? session_start(); session_destroy(); break;

}

$template->run(); ?>

Finally

<?php

$template = new Template( base_url() . 'theme/default/' ); $template->set_title( $template->config->web_title( 'Peta Lokasi Hydrant Yang Tepat' ) );

$template->set_page( 'map' );

$template->run();

(22)

Index.tmp

<html>

<head>

<title>Template for mapfile</title> <style type="text/css">

body { font-size:9px;} </style>

</head> <body>

function pan(direction) {

var x, y;

if(direction == 'u') {

x = ([mapwidth] - 1) / 2.0; y = 0 - ([mapheight] * pansize); }

else if ( direction == 'ub') {

x = 0 - ([mapwidth] * pansize )/2.0; y = 0 - ([mapheight] * pansize)/2.0; }

else if( direction == 'ut') {

x = ([mapwidth] - 1) + ([mapwidth] * pansize )/2.0;

y = 0 - ([mapheight] * pansize ) / 2.0; }

else if( direction == 's') {

x = ([mapwidth] - 1)/2.0;

y = ([mapheight] - 1) + ([mapheight] * pansize)/2.0;

}

else if( direction == 'sb') {

x = 0 - ([mapwidth] * pansize )/2.0;

y = ([mapheight]-1) +

([mapheight]*pansize)/2.0; }

else if( direction == 'st') {

x = ([mapwidth] - 1) + ([mapwidth] * pansize )/2.0;

y = ([mapheight] - 1) + ([mapheight] * pansize)/2.0;

}

else if( direction == 't') {

(23)

y = ([mapheight]-1)/2.0; }

else if( direction == 'b') {

x = 0 - ([mapwidth] * pansize ) /2.0; y = ([mapheight] -1)/2.0;

}

//document.mapserv.imgxy.value = x + " " + y; var zoomer = location.href.split("&")[1]; var spliter = zoomer.split("=")[0];

if( spliter == 'mode' ) {

var mapfile = location.href.split("&")[2]; }

else {

//alert( mapfile ); if( spliter == "zoom" ) {

location.href="http://localhost/cgi-bin/mapserv.exe?map=D:/\ms4w/\Apache/\htdocs/\gissaw/" + mapfile + "&" + location.href.split("&")[1] + "&imgxy="+x + " " + y+"&zoom="+document.mapserv.zoom.value + "&" + mapfile;

} else {

location.href="http://localhost/cgi-bin/mapserv.exe?map=D:/\ms4w/\Apache/\htdocs/\gissaw/" + mapfile + "&map=[map]&imgext=[mapext]&imgxy="+x + " " + y + "&" + mapfile;

}

//document.mapserv.submit(); //alert();

}

function do_zoom() {

//document.mapserv.imgxy.value = x + " " + y; var zoomer = location.href.split("&")[1]; var spliter = zoomer.split("=")[1];

if( spliter == "browse" ) {

else {

(24)

location.href="http://localhost/cgi-bin/mapserv.exe?map=D:/\ms4w/\Apache/\htdocs/\gissaw/" + mapfile + "&mode=browse&" + mapfile;

} else {

location.href="http://localhost/cgi-bin/mapserv.exe?map=D:/\ms4w/\Apache/\htdocs/\gissaw/" +

mapfile +

"&imgext=[mapext]&imgxy=[center]&zoom="+document.mapserv.zoo m.value + "&" + mapfile;

//document.mapserv.submit(); }

}

</script>

<td bgcolor="#666666"><a

href="javascript:pan('ub')"><img

src="http://localhost/gissaw/symbols/aub.gif" border="0"></a></td>

<td align="center"><a

href="javascript:pan('u')"><img

src="http://localhost/gissaw/symbols/autara.gif" border="0"></a></td>

href="javascript:pan('ut')"><img

src="http://localhost/gissaw/symbols/aut.gif" border="0"></a></td>

</tr>

<tr>

href="javascript:pan('b')"><img

src="http://localhost/gissaw/symbols/abarat.gif" border="0"></a></td>

<td>

<img src="[img]"

border="1"></td>

href="javascript:pan('t')"><img

src="http://localhost/gissaw/symbols/atimur.gif" border="0"></a></td>

</tr>

<tr>

(25)

src="http://localhost/gissaw/symbols/asb.gif" border="0"></a></td>

<td align="center"

bgcolor="#666666"><a href="javascript:pan('s')"><img src="http://localhost/exercise/symbols/aselatan.gif"

border="0"></a></td>

href="javascript:pan('st')"><img

src="http://localhost/gissaw/symbols/ast.gif" border="0"></a></td>

</tr>

</table> </td>

<div style="margin-left:10px; "> <b>Pilih Tampilan: </b><br>

<option value="0" checked="checked">Normal</option>

<option value="1" [zoom_1_select]>Center</option>

</select> <p>

[legend] </div> </td>