Sistem Informasi Geografis Berbasis Web Untuk Menentukan Jarak Terpendek Menggunakan Algoritma Dijkstra (Studi Kasus : Plaza Mall Dikota Medan)

(1)

LAMPIRAN

1.List Program Index.php

<!DOCTYPE html> <html>

<head>

peta_awal(); });

function peta_awal(){

var cloudmade = new CM.Tiles.CloudMade.Web({key: '9c4b0691bd814c389ed0817f1c1d407e'});

(2)

var medan=new CM.LatLng(3.5912003919158533, 98.67774286037593); map.setCenter(medan, 14);

map.addControl(new CM.LargeMapControl());

var CloudMadeIcon = new CM.Icon(); CloudMadeIcon.image = "marker.png";

CloudMadeIcon.iconSize = new CM.Size(50, 50); CloudMadeIcon.iconAnchor = new CM.Point(25, 50);

var myMarker = new Array(10); data = new Array (9);

for (i = 0; i < data . length; ++ i) data [i] = new Array (8);

data[0]['x']=3.589492320629244; data[0]['y']=98.661775588989260; data[0]['t']="Medan Plaza";

data[1]['x']=3.583067624935456; data[1]['y']=98.671946525573730; data[1]['t']="Sun Plaza";

(3)

data[4]['x']=3.611421607722068; data[4]['y']=98.61113548278809; data[4]['t']="Millenium Plaza"; data[5]['x']=3.590177618837350; data[5]['y']=98.673191070556640; data[5]['t']="Grand Paladium"; data[6]['x']=3.587265097902338; data[6]['y']=98.682889938354490; data[6]['t']="Medan Mall";

data[7]['x']=3.582553647330075; data[7]['y']=98.68100166320801; data[7]['t']="Yuki Simpang Raya"; data[8]['x']=3.778357838460572; data[8]['y']=98.68709564208984; data[8]['t']="pelabuhan belawan";

for(var i=0; i<=data.length; i++) {

var myMarkerLatLng = new CM.LatLng(data[i]['x'], data[i]['y']); myMarker[i] = new CM.Marker(myMarkerLatLng, {

title: data[i]['t'], icon:CloudMadeIcon });

(4)

}

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

.animate({opacity: 1.0}, 1100, function() { $active.removeClass('active last-active'); });

}

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

(5)

}

function content_diagnosa(id){ $("#tengah").fadeOut('slow'); $("#tengah").fadeIn('slow');

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

function PostDetail(form){

var id=$("#IDPasien").val(); var json = buildQuery(form); $.ajax({

type: form.method, url: form.action, data: json, cache: false });

alert("Anda Menuju Halaman Diagnosa ...!!");

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

</script>

(6)

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;

}

(7)

display: block; border: 0;

margin-bottom: 0px; }

</style>

</head> <body>

</body> </html>

2. List Program kanan.php

<?php

include("connect.php");

(8)

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

echo "<div class='judul'>Login Area</div><br>"; echo "

<tr>

<td>Username</td>

<tr>

<td>Password</td>

<tr>

</table> </form> ";

echo "</div>";

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

(9)

echo "

<tr>

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

<tr>

<td>Akhir</td>

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

<tr>

</table> </form> ";

echo "</div>"; ?>

3. List Program Login.php

<?php

session_start();

(10)

$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/adlingis/"); }

?>

4. List Program Routing.php

function peta_awal(){

var map = new CM.Map('cm-example', cloudmade);

(11)

CM.Event.addListener(map, 'click', function(latlng) { kasihtanda(latlng);

}); }

function kasihtanda(lokasi){

$("#form_lokasi").slideDown(); $("#cx").val(lokasi.lat(15)); $("#cy").val(lokasi.lng(15)); }

function setpeta(x,y){

var map = new CM.Map('cm-example', cloudmade); var myMarkerLatLng = new CM.LatLng(x, y);

var myMarker = new CM.Marker(myMarkerLatLng, { title: ""

});

map.setCenter(myMarkerLatLng, 14); map.addOverlay(myMarker);

}

function setnavigasi(x1,y1,x2,y2){ var map = new CM.Map('cm-example',

(12)

var directions = new CM.Directions(map, 'panel', '9c4b0691bd814c389ed0817f1c1d407e');

var points1=new CM.LatLng(x1, y1); var points2=new CM.LatLng(x2, y2); var waypoints = [points1, points2];

directions.loadFromWaypoints(waypoints); directions.getDistance().toString();

} </script> <style>

table{background-color:;border:0px;font-family:tahoma} table th{background-color:black;color:white;padding:1px}

table tr td{background-color:white;color:black;padding 0px;border:solid 1px teal;} #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; }

(13)

#header{

border:solid 1px silver;

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

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

</style> <?php

include "connect.php";

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

$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']; ?>

</head>

(14)

<?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." Ke Mall: ".$pos_akhir."</td></tr>

<tr>

<th>Nama Jalan</th> <th>Jarak</th> </tr>

";

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

(15)

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'"; $b1=mysql_query($a1);

echo "<tr><td colspan=3 align=left>Melalui Rute :".$norute."</td></tr>"; $no=1;

$ttl_jarak=0;

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

<tr>

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

";

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

}

echo "<tr><td colspan=2 align=left>Jarak Total :</td><td>".$ttl_jarak."</td></tr>";

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

(16)

?> </div>

<div id="footer">Copyright : Adly Azhary<br>Ekstensi Ilmu Komputer USU</div> </body>

</html>

5. 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/robin/");

}

?> <html>

<head>

(17)

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>

<?php

$act=$_GET['act'];

(18)

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==6){include("module/peta/index.php"); }

else if ($act==7){include("module/rute/index.php"); } else if ($act==8){include("module/manage/index.php"); } ?>

</div>

<div id="foter">User Login:<?php echo $_SESSION['user']; ?> </div> </div>

</body> </html>

6. List Program Simpan_lokasi.php

<?php

include("../../connect.php"); $x = $_REQUEST['x']; $y = $_REQUEST['y'];

$nama = $_REQUEST['nama']; $kategori = $_REQUEST['kategori']; $des = $_REQUEST['des'];

(19)

echo "berhasil"; }else{

echo "gagal"; }

?>

7. List Program Input lokasi.php

$(document).ready(function(){

var map = new CM.Map('petaku', cloudmade);

var medan=new CM.LatLng(3.5912003919158533, 98.67774286037593); map.setCenter(medan, 14);

CM.Event.addListener(map, 'click', function(latlng) { kasihtanda(latlng);

});

function kasihtanda(lokasi){ $("#x").val(lokasi.lat()); $("#y").val(lokasi.lng());

(20)

function SimpanPeta(){

var kategori=$("#kategori").val(); var x=$("#x").val(); var y=$("#y").val();

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

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

"x="+x+"&y="+y+"&nama="+nama+"&des="+des+"&kategori="+kategori; $.ajax({

type:"post",

url:"module/peta/simpanlokasi.php", data:query,

cache:false,

success: function(msg){

alert("penyimpanan data sukses"); $("#x").val("");

$("#y").val(""); $("#nama").val(""); $("#des").val(""); }

}); }

(21)

#petaku{ width:75%; height:100%;

border:solid 1px silver; float:left;

margin-right:10px;

}

#forminput{ width:18%; height:100%;

border:solid 1px silver; float:left;

padding:5px;

}

</style>

<div>

(22)

<form> Kategori:<br>

<option value="0">- Pilih Kategori -</option> <option value="start_point">Start Point</option> <option value="entry_point">Entry Point</option> </select>

<br>

X : <br><input type=text id=x size=30><br> Y : <br><input type=text id=y size=30><br> Nama:<br>

<input type=text id="nama" size=30><p> Deskripsi:<br>

</div>

8. List Program Admin Input Rute.php

<?php

include("connect.php");

(23)

?>

jQuery(document).ready(function($) { _funcindex();

$("#openform").click(function() { $("#dialog").dialog("open"); $("#RuteSet").hide();

$("#Rute").show();

$("#dialog").dialog({ autoOpen: true, height: 170, width: 350, modal: true});

$("#noRute").attr('disabled',false); $("#noRute").val("");

$("#KodeAwal").val(""); $("#nomor").val(""); $("#proses").val("add"); return false;

});

$("#close").click(function() {

$("#dialog").dialog( "close" ); return false;

(24)

$("#reset").click(function() { _funcindex();

return false; });

});

function _back(){

$("#atas").show();

$("#listrecord").load("module/Rute/get.php?get=listrecord"); }

function _funcindex(){ $("#cari").val(""); $("#pertama").show(); $("#ruteset").hide();

$("#listrecord").load("module/Rute/get.php?get=listrecord"); }

function _funcformsetrute(a,b,c){

$("#dialog").dialog("open"); $("#RuteSet").show();

(25)

$("#proses2").val("add2"); $("#Rute").hide();

$("#dialog").dialog({ autoOpen: true, height: 170, width: 350, modal: true});

} function _funcedit(id){

$("#dialog").dialog("open"); $("#uploadimage").hide();

$("#Rute").show();

$("#dialog").dialog({ autoOpen: true, height: 170, width: 350, modal: true}); $("#noRute").attr('disabled',true); var query="get=editrecord&id="+id; $.ajax({

type:"post",

url:"module/Rute/get.php", data:query,

(26)

success: function(msg){ data=msg.split("|"); $("#noRute").val(data[0]); $("#KodeAwal").val(data[1]); $("#nomor").val(data[2]); $("#proses").val("edit"); }

}); }

function _funcdelete2(id,a,b,c){

var query="act=manage&proses=delete2&idrute2="+id; $.ajax({

type:"post",

url:"module/Rute/act.php", data:query,

cache:false,

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

_funcsetrute(a,b,c); }else{

alert("Delete Gagal"); }

(27)

}); }

function _funcdelete(id){

var query="act=manage&proses=delete&noRute="+id; $.ajax({

type:"post",

cache:false,

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

_funcindex(); }else{

alert("Delete Gagal"); }

}

}); }

function _funcsetrute(id,awal,akhir){ $("#pertama").hide();

$("#ruteset").show(); $('#a').val(id);

(28)

$('#c').val(akhir);

$('#a').attr('disabled',true); $('#b').attr('disabled',true); $('#c').attr('disabled',true);

$("#listrecord2").load("module/Rute/get.php?get=setrute&id="+id); }

function _funcsearch(){ var key=$("#cari").val();

$("#listrecord").load("module/Rute/get.php?get=listrecord&key="+key); }

function PostSearch(){ var key=$("#cari").val();

$("#listrecord").load("module/Rute/get.php?get=listrecord&key="+key); }

function PostRute(){

var query="act=manage&proses="+$('#proses').val()+ "&noRute="+$('#noRute').val()+

"&nomor="+$('#nomor').val()+

"&KodeAwal="+$('#KodeAwal').val(); $.ajax({

type:"post",

cache:false,

(29)

if(msg=="RecordSama"){

showAlert('.frmalert','Kode Rute sudah ada',2000); }else if(msg=="noRute"){

showAlert('.frmalert','Kode Rute tidak boleh kosong',2000);

}else if(msg=="KodeAwal"){

showAlert('.frmalert','Posisi Awal tidak boleh kosong',2000);

}else{

if(msg=="sukses"){

$("#dialog").dialog("close"); _funcindex();

}else{

alert("Penyimpanan Gagal"); }

} }

}); }

function PostSetRute(){

var a=$('#ruteno').val(); var b=$('#posa').val(); var c=$('#posb').val();

var query="act=manage&proses="+$('#proses2').val()+ "&ruteno="+$('#ruteno').val()+

(30)

"&km="+$('#km').val()+ "&rute="+$('#rute').val(); $.ajax({

type:"post",

cache:false,

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

showAlert('.frmalert2','Kode Rute sudah ada',2000); }else if(msg=="ruteno"){

showAlert('.frmalert2','No. Rute tidak boleh kosong',2000);

}else if(msg=="jalan"){

showAlert('.frmalert2','Jalan tidak boleh kosong',2000); }else if(msg=="km"){

showAlert('.frmalert2','Km tidak boleh kosong',2000); }else if(msg=="rute"){

showAlert('.frmalert2','Urutan Rute tidak boleh kosong',2000);

}else{

if(msg=="sukses"){

$("#dialog").dialog("close"); _funcsetrute(a,b,c);

}else{

(31)

} }

}

}); }

</script>

Cari : <input type="text" id="cari" name="cari" size="15" />  <input type="submit" name="submit" value="Cari" />  <button id="openform"> Create New</button>  <button id="reset">Reset</button>

</form>

<div id="ruteset" style="display:none"> <h3>Rute Setting</h3>

(32)

<tr><td>Posisi Akhir</td><td><input type="text" name="c" size="40" id="c"/></td></tr>

<tr>

</tr> </table>

</form>

<tr>

(33)

<tr>

<td>Posisi Awal</td><td><?php echo ddownAwal(); ?></td> </tr>

<tr>

<td>Posisi Akhir</td><td><?php echo ddownAkhir(); ?></td> </tr>

<tr>

<input type="submit" id="save" name="save" value="save" /> <button id="close">Close</button>

</td> </tr> </table>

</form> </div>

<tr>

(34)

</tr> <tr>

<td>Nama Jalan</td><td><input type="text" name="jalan" size="30" id="jalan" /></td> </tr>

<tr>

<td>Jarak Km</td><td><input type="text" name="km" size="5" id="km" /></td> </tr>

<tr>

<tr>

<input type="submit" id="save" name="save" value="save" /> <button id="close">Close</button>

</td> </tr> </table>

(35)

(36)