Implementasi Sistem Informasi Geografis Untuk Menentukan Jarak Terpendek Menggunakan Algoritma Dijkstra Berbasis Web (Studi Kasus : Tempat Wisata di Kota Banda Aceh)

(1)

LAMPIRAN

1. List Program Index.php

<?php

session_start(); session_destroy();

?>

<!DOCTYPE html> <html>

<head>

<title>Web GIS Kota Banda Aceh</title>

src="flowplayer/example/flowplayer-3.2.6.min.js"></script> <link rel="stylesheet" type="text/css"

href="flowplayer/example/style.css">

setInterval( "slideSwitch()", 4000 ); var aksi="home";

content_tengah(aksi);

(2)

show: "blind", hide: "explode", modal: true}); });

function content_grab(id){

$("#tengah").load("konten.php?id="+id); }

function _tamusave(){

var nama=$("#nama").val(); var email=$("#email").val();

var komentar=$("#komentar").val(); var query =

"act=tamu&nama="+nama+"&email="+email+"&komentar="+komentar; $.ajax({

type:"post", url:"act.php", data:query, cache:false,

success: function(msg){ if(msg=="sukses"){

$("#tengah").load("tengah.php?get=tamusukses"); }else {

alert(msg); }

} }); }

function slideSwitch() {

var $active = $('#slideshow DIV.active');

if ( $active.length == 0 ) $active = $('#slideshow DIV:last'); var $next = $active.next().length ? $active.next()

: $('#slideshow DIV:first');

$active.addClass('last-active'); $next.css({opacity: 0.0}) .addClass('active')

(3)

}); }

function showAlert(obj,txt,tm){ $(obj).hide();

$(obj).html('<p>'+txt+'</p>');$(obj).show('slow');

setTimeout(function(){ $(obj).hide('slow');$(obj).html('');},tm); }

function content_tengah(aksi){ $("#tengah").fadeOut('slow'); $("#tengah").fadeIn('slow');

$("#tengah").load("tengah.php?get="+aksi); }

function content_detail_berita(id){ var aksi="det_berita"; $("#tengah").fadeOut('slow'); $("#tengah").fadeIn('slow');

$("#tengah").load("tengah.php?get="+aksi+"&id="+id); }

function isikategori(id){ var aksi="kategori"; $("#tengah").fadeOut('slow'); $("#tengah").fadeIn('slow');

$("#tengah").load("tengah.php?get="+aksi+"&id="+id); }

function registrasi(){

var aksi="registrasi"; $("#tengah").fadeOut('slow'); $("#tengah").fadeIn('slow');

$("#tengah").load("tengah.php?get="+aksi); }

function _prosescari(){

(4)

$("#tengah").load("tengah.php?get=info&kode="+KodeBagian+"&tahun="+T ahun);

}

</script>

position:relative; height:200px; padding:0px; margin-left:10px; }

#slideshow DIV { position:absolute; top:0;

left:0; z-index:8; opacity:0.0; height: 100px;

background-color: #FFF; padding:0px;

margin:0px; }

#slideshow DIV.active { z-index:10;

opacity:1.0; }

#slideshow DIV.last-active { z-index:9;

}

#slideshow DIV IMG { height: 160px; width: 200px; display: block; border: 0;

margin-bottom: 0px; }

(5)

</head> <body> <div id="wrap">

<div id="header"><img

src="img/templatemo_banner_bg.jpg" align="left" height="100" width="100%"></div>

<div id="foter">Copyright @ Teuku Muarrif Ikramullah <br> Fasilkom TI 2012</div>

</div>

</body> </html>

2. List Program Koneksi.php

<?php

$host="localhost"; $user="root"; $password=""; $db="wisataaceh";

mysql_connect($host,$user,$password) or die("Koneksi Gagal"); mysql_select_db($db) or die ("Database Tidak Ditemukan");

?>

3. List Program Login.php

<?php

session_start();

(6)

$username=$_REQUEST['username']; $password=$_REQUEST['password'];

$sql=mysql_query("select username,password from user where username ='$username' and password=md5('$password')");

if(mysql_num_rows($sql)==1){ // echo "Sukses";

$_SESSION['user']=$username; header("location: admin.php"); }else{

// echo "Gagal";

header("location:http://localhost/giswisata/"); }

?>

4. List Program tengah.php

<?php

include "connect.php"; $get=$_REQUEST['get']; switch($get){

case 'home' : _home(); break;

case 'tempat' : _peta(); break;

case 'tentang' : _tentang(); break;

case 'det_berita' : det_berita(); break;

case 'berita' : berita(); break;

(7)

_rumahmakan(); break;

case 'admin' : _admin(); break;

case 'tamu' : _tamu(); break;

case 'tamusukses' : tamusukses(); break;

}

function tamusukses(){

echo "<h3>Komentar anda sukses</h3>";

}

function _tamu(){

echo "<h3>Berikan Komentar Anda</h3>"; echo "<form name='frm' id='frm'>";

echo "

<div id='frmalert' class='frmalert'

style='background-color:red;color:white;font-weight:bold;text-align:center;padding:0px'></div> <table>

<tr>

<tr>

<td align=right>Alamat Email</td>

<tr>

<td align=right>Komentar Anda</td>

(8)

<tr>

</tr> </table>

</form> </div>

";

$qry="select a.Tanggal,a.NamaTamu,a.Email,Komentar from tamu a where a.Status='Y' order by a.Tanggal asc";

$p=mysql_query($qry);

echo "<div style='border-bottom:solid 0px silver;height:auto;text-align:left;height:auto;margin-bottom:20px;'>";

echo "<h3>Daftar Komentar</h3>"; while($r=mysql_fetch_array($p)){

echo "Tanggal :".$r['Tanggal']."<br>";

echo "Nama Tamu :".$r['NamaTamu']."<br>"; echo "Email :".$r['Email']."<br>";

echo "Komentar :".$r['Komentar']."<br><br>"; }

echo "</div>";

}

function berita(){

echo "<h3>Informasi Lokasi Wisata</h3>";

$qry="select a.BeritaID,a.Judul,a.Berita,a.Foto_name from berita a order by a.Tanggal asc";

$p=mysql_query($qry);

while($r=mysql_fetch_array($p)){ $ket=substr($r['Berita'],0,500);

echo "<h2>".$r['Judul']."</h2>";

echo "<img src='berita/".$r['Foto_name']."' width='100' height='100' align='right' style='margin-right:10px;margin-bottom:3px;'/>";

(9)

}

function det_berita(){ $id=$_REQUEST['id'];

echo "<h3>Informasi Detail</h3>";

$q=mysql_query("select a.BeritaID,

a.Judul, a.Foto_name, a.Berita

from berita a Where a.BeritaID='$id'"); $r=mysql_fetch_array($q);

echo "<h2>".$r['Judul']."</h2>";

echo "<img src='berita/".$r['Foto_name']."' width='350' height='300' align='right' style='margin-right:10px;'/>";

echo "<b>Informasi Lengkap Tempat Wisata : </b><br>".$r['Berita'].""; }

function _tentang(){

echo "<h2>About Me</h2>";

echo "<img src='img/logo.jpg' align='left' style='margin-right:20px'>"; echo "<br>";

echo "

Nama : TEUKU MUARRIF IKRAMULLAH<br> NIM : 101421016<br>

No.HP : 08527010XXXX<br> Email : eyk_ram@yahoo.com<br> ";

}

function _peta(){ echo "<h2>Peta</h2>";

require_once "petautama.php";

}

(10)

}

function _rumahmakan(){

echo "<h2>Rumah Makan dan Cafe</h2>"; require_once "rumahmakan.php";

}

function _home(){ echo "<h2>Home</h2>";

echo "<h3>Awal Penetapan Kota Banda Aceh</h3>"; echo "

<br>";

} ?>

5. List Program Template_style.css

body {

margin: 0; padding: 0;

line-height: 1.5em;

font-family: Arial, Helvetica, sans-serif; font-size: 11px;

color: #fff;

background: #ffffff;

background-image: url(../images/templatemo_body.jpg); }

a:link, a:visited { color: #af1313; text-decoration: underline; font-weight: normal; }

a:active, a:hover { color: #996600; text-decoration: none; }

p {

margin: 0px; padding: 0px; }

(11)

margin: 0px; padding: 0px; border: none; }

.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px; }

.margin_bottom_10 { clear: both; width: 100%; height: 10px; font-size: 1px; }

.margin_right_25 { margin-right: 25px; } .margin_right_60 { margin-right: 60px; }

.fl { float: left; } .fr { float: right }

.border_bottom { border-bottom: 1px dotted #999; }

.rc_btn_01 a { clear: both; float: right; display: block; width: 41px; height: 8px; border: none;

background: url(../images/templatemo_more.jpg) no-repeat; }

.header_01 {

(12)

font-size: 26px; color: #ffffff; }

.header_02 {

padding: 0 0 5px 0; margin: 0 0 5px 0; font-size: 12px; color: #af1313; font-weight: bold; }

#templatemo_container { width: 960px; margin: 0 auto; padding: 0 10px; border: 1px solid; }

#templatemo_banner { width: 960px; height: 70px; margin: 0 auto;

background: url(../images/templatemo_banner_bg.jpg) no-repeat; border-bottom: 1px solid #cfd389;

}

#templatemo_banner #logo { float: left;

margin: 10px 0 0 80px; width: 295px;

height: 1px;

background: url(../images/templatemo_logo.jpg) no-repeat; }

/* menu */

#templatemo_menu_search { clear: both;

width: 960px; height: 40px;

background: url(../images/templatemo_menu_bg.jpg) repeat-x; border-bottom:medium solid 50px;

(13)

#templatemo_menu { float: center; width: 650px; height: 35px; }

#templatemo_menu ul { margin: 0px; padding: 0px; list-style: none; }

#templatemo_menu ul li { display: inline; }

#templatemo_menu ul li a { float: left;

display: block; padding: 2px 40px; height: 15px; padding-top: 18px; text-align: center; font-size: 12px; text-align: center; text-decoration: none; color: #333333; font-weight: bold; outline: none; }

#templatemo_menu li a:hover, #templatemo_menu li .current { color: #000;

background: url(../images/templatemo_menu_hover.jpg) repeat-x; }

/* end of menu*/

#templatemo_menu_search #search_section { float: right;

margin: 10px 20px 0 0; width: 275px;

(14)

#search_section form { float: right; margin: 0px; padding: 0px; }

#searchfield { height: 15px; width: 180px; padding: 5px; color: #ffffff; font-size: 13px; font-variant: normal; line-height: normal; background: #13af17; border: 1px solid #ffffff; }

#searchbutton { height: 29px; margin: 0 0 0 10px; padding: 0 6px; cursor: pointer; font-size: 12px; font-weight: bold; text-align: center; vertical-align: bottom; white-space: pre; color: #333333; background: none; border: none; }

#templatemo_content { clear: both;

padding: 10px 0 20px 0; }

(15)

margin-bottom: 20px;

background: url(../images/templatemo_welcome_title.jpg) no-repeat; }

#project_title { clear: both; width: 116px; height: 32px;

background: url(../images/templatemo_project_title.jpg) no-repeat; }

#news_events_title { clear: both; width: 157px; height: 32px;

background: url(../images/templatemo_news_events_title.jpg) no-repeat;

}

#contact_title { clear: both; width: 157px; height: 32px;

background: url(../images/templatemo_contact_title.jpg) no-repeat; }

.section_w270 { width: 270px; }

.section_w650 { width: 650px; }

.section_w650 p {

text-align: justify; margin-bottom: 10px; }

(16)

width: 200px; }

.image_wrapper_01 { position: relative; width: 185px; height: 95px;

background: url(../images/templatemo_image_frame.png) no-repeat; }

.image_wrapper_01 img { position: absolute; width: 175px; height: 74px; top: 4px; left: 5px; }

#news_events_section_wrapper { clear: both;

width: 250px; height: 130px; padding: 20px 10px;

background: url(../images/templatemo_news_bg.jpg) no-repeat; }

#news_events_section_wrapper .news_events_section { clear: both;

}

.news_events_section .date { float: left;

width: 50px; font-size: 12px; color: #ffffff; font-weight: bold; }

.news_events_section .short_note { float: right;

(17)

.contact_info_list { margin: 0px; padding: 0px; list-style:none; }

.contact_info_list li { padding: 0px; margin-bottom: 5px; }

.contact_info_list li span { float: left;

display: block; width: 80px; }

/* footer */

#templatemo_footer { clear: both; height: 1000; width: 920px; text-align: center; color: #333;

padding: 0px 20px 0 20px;

background: url(../images/templatemo_footer_bg.jpg) repeat-x; }

.footer_list {

margin: 0px; padding: 0px; list-style: none; }

.footer_list li {

padding: 0 10px; display: inline;

border-right: 1px solid #333; }

(18)

}

.footer_list .current { color: #af1313; }

.footer_list .last {

border-right: none; }

/* end of footer */

.content_title_01 { font-size: 22px; color: #13110F; padding-bottom: 10px; margin-bottom: 20px;

background: url(../images/batas_title1.jpg) bottom repeat-x; }

.gallery_box { float: left; width: 100px; padding: 5px;

background: #221f1d; text-align: center; margin-right: 15px; }

.gallery_box:hover {

background: #13110f; }

.gallery_box a { color: #FFF;

text-decoration: none; }

.gallery_box a:hover {

text-decoration: underline; }

(19)

margin: 0 0 5px 0; border: none; }

#keterangan{ padding:10px; }

#keterangan h2{ color:#036301; }

#keterangan img { float: left;

border: 5px solid #2f2c29; margin: 3px 20px 0 0; }

6. List Program admin.php

<?php

session_start();

if(empty($_SESSION['user'])or($_SESSION['user']=="")){

echo "<script>alert('anda belum login');window.location.href='index.php'; </script>";

//header("location: http://localhost/giswisata/"); }

?> <html>

<head>

<title>Web GIS Tempat Wisata Banda Aceh</title>

src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script> <script type="text/javascript" src="js/jquery.js"></script>

(20)

function showAlert(obj,txt,tm){ $(obj).hide();

$(obj).html('<p>'+txt+'</p>');$(obj).show('slow');

setTimeout(function(){ $(obj).hide('slow');$(obj).html('');},tm); }

</script>

</head> <body> <div id="wrap">

<?php

$act=$_GET['act'];

if($act==1 or $act==""){ include("admintengah.php"); } else if ($act==2){include("module/modul/index.php"); } else if ($act==3){include("module/grup/index.php"); } else if ($act==4){include("module/user/index.php"); } else if ($act==5){include("module/akses/index.php"); } else if ($act==7){include("module/Rute/index.php"); }

else if

($act==11){include("module/berita/index.php"); }

else if ($act==8){include("module/tamu/index.php"); }

else if

($act==9){include("module/manage/index.php"); }

else if ($act==6){include("module/peta/index.php"); }

(21)

</div>

<div id="foter">Selamat Datang, <?php echo $_SESSION['user']; ?></div> </div>

</body> </html>

7. List Program menu.php

<?php $aksi=array(

"home"=>"Beranda", "tempat"=>"Peta Wisata",

"tamu"=>"Buku Tamu",

"berita"=>"Informasi Lokasi Wisata",

"rumahmakan"=>"Informasi Rumah Makan dan Cafe", "tentang"=>"Tentang Saya",

"admin"=>"Admin"); echo "<ul>";

foreach($aksi as $i=>$v){ echo "<li><a

href='javascript:content_tengah(\"".$i."\")'>".$v."</a></li>"; }

echo "</ul>";

?>

8. List Program menu.php

<?php

include "connect.php";

$awal=$_REQUEST['KodeAwal']; $akhir=$_REQUEST['nomor']; ?>

<style>

(22)

table th{background-color:teal;color:white;padding:1px;font-family:Lucida Bright}

table tr td{background-color:white;color:black;padding 0px;border:DOTTED 1px silver;}

#footer{

border:solid 1px silver; -moz-border-radius: 5px;

margin:5px; text-align:center;

background-image:url('img/bg.jpg'); color:white;

font-weight:; padding:5px;

}

#header{

border:solid 1px silver;

margin:0px; color:white; text-align:center;

background-image:url('img/bg.jpg'); }

#foter{ border:solid 0px silver;margin:5px;height:auto;background-

color:#CC3300;color:white;font-weight:;text-align:center;padding:10px;border-radius:70px 0px 70px 0px} </style>

<script

src="http://maps.google.com/maps?file=api&v=2&sensor=false&am p;

key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44cW 1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw"

type="text/javascript"></script> //ikram

(23)

<?php

$aa="select a.nama from peta_icon a where a.nomor='$awal'"; $bb=mysql_query($aa);

$cc=mysql_fetch_array($bb); $pos_awal=$cc['nama'];

$aaa="select a.nama from peta_icon a where a.nomor='$akhir'"; $bbb=mysql_query($aaa);

$ccc=mysql_fetch_array($bbb); $pos_akhir=$ccc['nama'];

echo "

<tr><td colspan=3 align=center>Djikstra Search <br> Dari : ".$pos_awal." <br>Ke Wisata : ".$pos_akhir."</td></tr>

<tr>

<th>Nama Jalan</th>

<th ALIGN=RIGHT>Jarak</th> </tr>

";

$a="select a.noRute from rute2 a left join rute b on a.noRute=b.noRute

where b.KodeAwal='$awal' and b.nomor='$akhir' group by a.norute order by sum(a.km) asc"; $b=mysql_query($a);

while($r=mysql_fetch_array($b)){ $norute=$r['noRute'];

$a1="select a.jalan,a.km,a.rute,a.noRute from rute2 a where a.noRute='$norute'";

(24)

echo "<tr><td colspan=3 align=left>Rute Jalan</td></tr>"; $no=1;

$ttl_jarak=0;

while($r1=mysql_fetch_array($b1)){ echo "

<tr>

<td>".$no."</td> <td>".$r1['jalan']."</td>

";

$ttl_jarak+=$r1['km']; $no++;

}

echo "<tr><td colspan=2 align=center>Jarak Total :</td><td ALIGN=RIGHT>".number_format($ttl_jarak,2)." Km</td></tr>";

echo "<tr><td colspan=3></td></tr>";

echo "<tr ALIGN=RIGHT><td colspan=3></td></tr>"; }

echo "</table>";

?>

</div><br>

<?php

$sql=mysql_query("SELECT * FROM peta_icon WHERE nomor=$awal"); $row=mysql_fetch_array($sql);

$x1=$row['lat']; $y1=$row['lng'];

$sql2=mysql_query("SELECT * FROM peta_icon WHERE nomor=$akhir"); $row2=mysql_fetch_array($sql2);

$x2=$row2['lat']; $y2=$row2['lng']; $point1=$x1.",".$y1; $point2=$x2.",".$y2;

(25)

echo "<input type='hidden' id='point2' size='50' name='point2' value='".$point2."'><br><br>";

?>

var map = new GMap2(document.getElementById("map")); map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(5.543546267456227, 95.31669616699219),15);

var aa=$("#point1").val(); var xx=$("#point2").val(); routing(aa,xx);

function routing(point1,point2){ var start_point = point1; var end_point = point2;

var directionsPanel = document.getElementById("info");

var directions = new GDirections(map, directionsPanel);

var locale = "ID";

directions.load("from: "+start_point+" to:"+end_point,{ "locale": locale });

} }) </script> </body> </html>

9. List Program kanan.php

<?php

include("connect.php");

(26)

$qry="select a.BeritaID,a.Judul from berita a "; $p=mysql_query($qry);

echo "<br><br><div style='border-bottom:solid 0px silver;height:auto;text-align:left;height:auto;margin-bottom:-50px;'>";

echo'<div id="slideshow">

<div><img src="img/slide/4.jpg" alt="Mencari uang" /></div> </div>';

echo "</div><br>";

echo "<div style='border-bottom:solid 1px silver;height:auto;text-align:left;margin-bottom:0px;padding:5px'>";

echo "<div class='judul'>Pencarian Peta</div><br>";

echo "

<tr>

<td>Start Point</td> <td>".ddownAwal()."</td> </tr>

<tr>

<td>Wisata</td>

<td>".ddownAkhir()."</td> </tr>

<tr>

</table> </form>

(27)

echo "</div>";

echo "<div style='border-bottom:solid 0px silver;height:auto;text-align:left;height:auto;margin-bottom:20px;'>";

echo "<div class='judul'><img src='img/television_in.png'> Informasi Tempat Wisata</div>";

echo "<ul>";

while($r=mysql_fetch_array($p)){ echo "<li><a

href='javascript:content_detail_berita(\"".$r['BeritaID']."\")'>  &n bsp;<img src='img/star_bronze.png'> ".$r['Judul']."</a></li>";

}

echo "</ul>"; echo "</div>";