Rancangan Aplikasi Wisata Kuliner Kota Medan Berbasis SIG (Sistem Informasi Geografi)

(1)

Listing Program

1. Index.php

<!DOCTYPE html> <html lang="en"> <head>

<?php include './inc/head.php'; ?> </head>

<body>

<?php include './inc/header.php'; ?> </header>

<div class="flex_caption1"> <p class="title1 captionDelay2 FromTop">Kuliner </p>

<p class="title2 captionDelay4 FromTop">Medan</p>

<p class="title4 captionDelay7 FromBottom">Aplikasi Mencari kuliner di kota Medan</p>

</div>

(2)

</ul> </div>

</section> </div>

</body> </html>

2. Admin.php

<?php

include './koneksi.php'; $class = "admin";

@$operasi = $_REQUEST['operasi'];

if ($operasi == "masukkan") { $nama = $_POST['nama']; $alamat = $_POST['alamat']; $kategori = $_POST['kategori']; $koordinat = $_POST['koordinat'];

$q = mysqli_query($koneksi, "INSERT INTO kuliner(nama,

alamat, kategori, koordinat)

VALUE('$nama','$alamat','$kategori', '$koordinat')") or die(mysqli_error($koneksi));

refresh();

} else if ($operasi == "hapus") { $id= $_GET['id'];

$q = mysqli_query($koneksi, "DELETE FROM kuliner WHERE id_kuliner=$id") or die(mysqli_error($koneksi));

refresh(); }

function refresh() { ?>

(3)

?>

<?php include './inc/head.php'; ?> <script

src="http://maps.google.com/maps/api/js?key=AIzaSyCAm1o60e69 enQcVMg8TaXLqzJtpDWXsH0&sensor=true"></script>

</head> <body>

<div id="page">

<header>

(4)

<tr><td>Alamat</td><td>:</td><td><input type="text" required="" name="alamat" id="alamat" size="120" /></td></tr>

<tr><td>Kategori</td><td>:</td><td><input type="text" required="" name="kategori" id="kategori" size="120" /></td></tr>

<tr><td>Koordinat</td><td>:</td><td><input type="text" required="" readonly="true" name="koordinat" id="koordinat" size="40" required=""/></td></tr>

</form> <br/> <br/> <br/>

<caption><h3>Daftar Kuliner Medan</h3></caption>

<thead>

<th>Nama</th> <th>Alamat</th> <th>Kategori</th> <th>Koordinat</th> <th>Operasi</th> </thead>

<tbody> <?php

$q = mysqli_query($koneksi, "SELECT * FROM kuliner") or die(mysqli_error($koneksi));

while ($row =

mysqli_fetch_array($q)) {

?> <tr>

(5)

<td><a

href="?operasi=hapus&id=<?php echo $row['id_kuliner']; ?>">Hapus</a></td>

</tr>

<?php }

?>

</tbody> </table>

var myLatlng = new google.maps.LatLng(3.5577644, 98.6671229);

var mapOptions = { zoom: 14,

center: myLatlng }

var map = new

google.maps.Map(document.getElementById('map_canvas'), mapOptions);

// var yourStartLatLng = new google.maps.LatLng(3.57475828494887, 98.6429786682129); // var map = $('#map_canvas').gmap({'center': yourStartLatLng, zoom: 15})

// .bind('init', function(event, map) { $(map).click(function (event) {

(6)

var alamat = "";

var geocoder = new google.maps.Geocoder(); // create a geocoder object

var location = new google.maps.LatLng(lat, lng); // turn coordinates into an object

geocoder.geocode({'latLng': location}, function (results, status) {

if (status == google.maps.GeocoderStatus.OK) { // if geocode success

var add = results[0].formatted_address; // if address found, pass to processing function

document.write(add); alamat = add;

console.log(alamat + " sds");

$('#alamat').val(alamat); }

});

console.log(alamat);

$('#koordinat').val(lat + "," + lng); //$('#lng').val(lng);

Convert_LatLng_To_Address(lat, lng); });

// });

// var array_daftar_titik_koordinat = <?php // echo $array_daftar_titik_koordinat; ?>;

//

console.log(array_daftar_titik_koordinat); //

tampilkan_marker(array_daftar_titik_koordinat); //

(7)

//

// // console.log(array_kemacetan);

//

// for (i = 0; i < array_daftar_titik_koordinat.length; i++) {

// var url_gambar = "";

// url_gambar = "gambar/titik.png"; //

// var marker = new google.maps.Marker({

// position: new google.maps.LatLng(array_daftar_titik_koordinat[i]['latitude '], array_daftar_titik_koordinat[i]['longitude']),

// map: map,

// icon: url_gambar, // title: array_daftar_titik_koordinat[i]['id'] + " - " + array_daftar_titik_koordinat[i]['nama']

// }); // }

// } var address = new Array();

/*

* Get the json file from Google Geo */

function Convert_LatLng_To_Address(lat, lng) {

var url =

"http://maps.googleapis.com/maps/api/geocode/json?latlng=" + lat + "," + lng + "&sensor=false";

jQuery.getJSON(url, function (json) { Create_Address(json);

}); }

/*

(8)

function Create_Address(json) {

if (!check_status(json)) // If the json file's status is not ok, then return

return 0;

address['country'] = google_getCountry(json);

address['province'] = google_getProvince(json); address['city'] = google_getCity(json);

address['street'] = google_getStreet(json);

address['postal_code'] = google_getPostalCode(json);

address['country_code'] =

google_getCountryCode(json);

address['formatted_address'] =

google_getAddress(json);

console.log(address['formatted_address'] = google_getAddress(json));

// callback();

$('#nama_titik').val(google_getAddress(json)); }

/*

* Check if the json data from Google Geo is valid */

function check_status(json) { if (json["status"] == "OK") return true;

return false; }

/*

* Given Google Geocode json, return the value in the specified element of the array

*/

function google_getCountry(json) {

return Find_Long_Name_Given_Type("country", json["results"][0]["address_components"], false);

}

(9)

return

Find_Long_Name_Given_Type("administrative_area_level_1", json["results"][0]["address_components"], true);

}

function google_getCity(json) {

return Find_Long_Name_Given_Type("locality", json["results"][0]["address_components"], false);

}

function google_getStreet(json) {

return Find_Long_Name_Given_Type("street_number", json["results"][0]["address_components"], false) + ' ' + Find_Long_Name_Given_Type("route",

json["results"][0]["address_components"], false); }

function google_getPostalCode(json) {

return Find_Long_Name_Given_Type("postal_code", json["results"][0]["address_components"], false);

}

function google_getCountryCode(json) {

return Find_Long_Name_Given_Type("country", json["results"][0]["address_components"], true);

}

function google_getAddress(json) {

return json["results"][0]["formatted_address"]; }

/*

* Searching in Google Geo json, return the long name given the type.

* (if short_name is true, return short name) */

function Find_Long_Name_Given_Type(t, a, short_name) { var key;

for (key in a) {

if ((a[key]["types"]).indexOf(t) != -1) { if (short_name)

(10)

} } }

</script> </div>

</div>

<!-- <script

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAm1o 60e69enQcVMg8TaXLqzJtpDWXsH0"

async defer></script>-->

</body> </html>

3. Autentifikasi.php

<?php session_start();

include './koneksi.php';;

@$operasi = strtolower($_REQUEST['operasi']); if ($operasi == "login") {

@$username = $_POST['username']; @$password = $_POST['password'];

$q = mysqli_query($koneksi,"SELECT * FROM user WHERE username='$username' AND password='$password'") or die(mysql_error($koneksi));

if (mysqli_num_rows($q) > 0) { $r = mysqli_fetch_array($q);

$_SESSION['id_user'] = $r['id_user']; $_SESSION['email'] = $r['email'];

$_SESSION['username'] = $r['username'];

echo "<script>window.location='admin.php'</script>"; } else {

(11)

}

} else if ($operasi == "logout") { session_destroy();

echo "Sdf";

echo "<script>window.location='login.php'</script>"; }

?>

4. Daftar_kuliner.php

<?php include './koneksi.php'; ?>

<?php include './inc/head.php'; ?>

</head> <body>

(12)

<th>Kategori</th> <th>Koordinat</th> </thead>

<tbody>

<?php

$q = mysqli_query($koneksi, "SELECT * FROM kuliner") or die(mysqli_error($koneksi)); $no = 1;

while ($row =

?> <tr>

<td><a

href="map.php?id_kuliner=<?php echo $row['id_kuliner']; ?>&koordinat=<?php echo $row['koordinat']; ?>"><?php echo $row['nama']; ?></a></td>

</tr> <?php } ?> </tbody>

</table>

</section>

</div> </body>

</html>

5. Data_kuliner.php

(13)

<body>

<th>No</th> <th>Nama</th> <th>Alamat</th> <th>Kategori</th> <th>Koordinat</th> </thead>

<tbody>

<?php

$q = mysqli_query($koneksi, "SELECT * FROM kuliner") or die(mysqli_error($koneksi)); $no = 1;

while ($row =

(14)

<td><a

href="map.php?id_kuliner=<?php echo $row['id_kuliner']; ?>&koordinat=<?php echo $row['koordinat']; ?>"><?php echo $row['nama']; ?></a></td>

</tr> <?php } ?> </tbody>

</table>

</body> </html>

6. Koneksi.php

<?php

$db_host = "localhost"; $db_user = "root"; $db_pass = ""; $db_name = "nisa";

$koneksi = mysqli_connect($db_host, $db_user, $db_pass, $db_name);

if (mysqli_connect_errno()) {

echo 'Gagal melakukan koneksi ke Database : ' . mysqli_connect_error();

(15)

7. Login.php

<body>

<div id="page">  <header>

(16)

style="margin: 10px;width: 300px; height:40px;"></input></td></tr>

<tr><td><input

type="password" name="password" required="" placeholder="Password"style="margin: 10px;width: 300px; height: 40px;"></input></td></tr>

</table> </form>

</div>

</div> </body>

</html>

8. Map.php

<?php

@$id_kuliner = $_GET['id_kuliner']; if (!isset($id_kuliner)) {

$id_kuliner = 0; }

@$koordinat = $_GET['koordinat'];

if (!isset($koordinat)) {

$koordinat = "3.579816,98.662981"; }

$k = explode(",", $koordinat); @$lat = trim($k[0]);

@$lng = trim($k[1]);

//print_r($k); //die();

?>

(17)

<body>

<br/>

(18)

<button type="submit" style="width: 200px;height: 30px; padding-top: 5px;">Cari Jalan</button>

</form>

</div>

<script> var map;

function initMap() {

var lt = <?php echo $lat;?>; var lng = <?php echo $lng;?>;

map = new

google.maps.Map(document.getElementById('map'), {

center: {lat: lt, lng: lng}, zoom: 15

});

map.clear;

tampilkan_kuliner();

}

var markerAsal = "";

function cari_koordinat_pasien() { var user1Location = "medan " + $("#nama_lokasi_pasien").val();

(19)

//convert location into longitude and latitude

geocoder.geocode({

address: user1Location }, function (locResult) { console.log(locResult); var latitudeAsal = locResult[0].geometry.location.lat();

var longitudeAsal = locResult[0].geometry.location.lng();

if (markerAsal != "") { markerAsal.setMap(null); }

var bounds = new google.maps.LatLngBounds();

bounds.extend(new google.maps.LatLng(latitudeAsal, longitudeAsal)); map.fitBounds(bounds); map.setZoom(13);

markerAsal = new google.maps.Marker({

position: new google.maps.LatLng(latitudeAsal, longitudeAsal),

map: map,

icon: "gambar/user.png", title: "Lokasi Asal" });

}); }

function tampilkan_kuliner() {

map.clear;

(20)

var markerListener = [];

var markerListenerFunction = [];

var url_fix =

"data_kuliner.php";

console.log(url_fix);

$.ajax({

async: false, type: 'POST', cache: false, url: url_fix, data: {},

success: function (hasil) {

var arrayKuliner = jQuery.parseJSON(hasil);

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

// console.log(arrayKuliner[i]);

var id_kuliner = arrayKuliner[i]['id_kuliner'];

var nama = arrayKuliner[i]['nama'];

var alamat = arrayKuliner[i]['alamat'];

var kategori = arrayKuliner[i]['kategori'];

var koordinat = arrayKuliner[i]['koordinat'].replace(" ", "");

var k = koordinat.split(',');

var lat = k[0]; var lng = k[1];

(21)

var id_kul = <?php echo $id_kuliner; ?>;

var gambar_rm = 'gambar/rm.png';

if (id_kul == id_kuliner) {

gambar_rm = 'gambar/rm_choose.png';

}

marker[i] = new google.maps.Marker({

position: point, map: map,

icon: gambar_rm, clickable: true });

var infowindow = new google.maps.InfoWindow();

markerListenerFunction[i] = new

markerListenerFunctionCreator(i, arrayKuliner[i]);

markerListener[i] = new google.maps.event.addListener(marker[i], 'click', markerListenerFunction[i]);

} } }); }

function

markerListenerFunctionCreator(i, arrayKulinerItem) {

// console.log(arrayKulinerItem);

(22)

$("#id").html(arrayKulinerItem['id_kuliner']);

$("#nama").html("<b>" + arrayKulinerItem['nama'].toUpperCase() + "</b>");

$("#alamat").html(arrayKulinerItem['alamat']);

var k =

arrayKulinerItem['koordinat'].replace(" ", "").split(','); var lat = k[0];

var lng = k[1];

$("#lat").val(lat); $("#lng").val(lng);

var form = $(".save-form").clone().show();

var infowindow_content = form[0];

var infowindow = new google.maps.InfoWindow({

content: infowindow_content

});

//tampilkan info window infowindow.open(map, this);

//button klik

form.submit(function (event) {

var alamat_lokasi_asal = $("input[name=lokasi_asal]", this).val();

(23)

//tutup infowindow setelah button di klik

infowindow.close();

//agar halaman tidak refresh

return false; });

} }

//mengambil koordinat dari lokasi asal

function

ambil_koordinat_lokasi_asal(alamat_lokasi_asal, lat, lng) {

initMap();

//tambahkan medan agar google map langsung mengarah ke medan

var user1Location = "medan " + alamat_lokasi_asal;

var geocoder = new google.maps.Geocoder();

//convert location into longitude and latitude

geocoder.geocode({

address: user1Location }, function (locResult) {

var latitude = locResult[0].geometry.location.lat();

var longitude = locResult[0].geometry.location.lng();

//tampilkan marker user var point = new google.maps.LatLng(parseFloat(latitude),

(24)

new google.maps.Marker({ position: point, map: map,

icon: 'gambar/user.png', clickable: true

});

//hitung dengan bellman url_waktu_jarak = "waktu_jarak.php?asal=" + latitude + "," + longitude + "&tujuan=" + lat + "," + lng;

console.log(url_waktu_jarak);

$.ajax({

async: false, cache: false,

url: url_waktu_jarak, success: function (msg) {

data_waktu_jarak = jQuery.parseJSON(msg);

$("#keterangan").html("Waktu Tempuh :" + data_waktu_jarak['waktu'] + "<br/>Jarak :" + data_waktu_jarak['jarak']);

}});

var start = new google.maps.LatLng(latitude, longitude);

var end = new google.maps.LatLng(lat, lng);

var request = { origin: start, destination: end,

// waypoints: waypts,

(25)

travelMode: google.maps.TravelMode.WALKING

};

var directionsDisplay;

var directionsService = new google.maps.DirectionsService();

directionsDisplay = new google.maps.DirectionsRenderer({polylineOptions:

{strokeColor: "BLUE"}, suppressMarkers: true});

directionsService.route(request, function (response, status) {

if (status == google.maps.DirectionsStatus.OK) {

directionsDisplay.setDirections(response);

var route = response.routes[0];

} }); directionsDisplay.setMap(map); }); }

</script> <script

src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCAm1o 60e69enQcVMg8TaXLqzJtpDWXsH0&callback=initMap"

async defer></script>

</div> </body>

(26)

9. Waktu_jarak.php

<?php

$from = $_GET['asal']; $to = $_GET['tujuan'];

$from = urlencode($from); $to = urlencode($to);

$data =

file_get_contents("http://maps.googleapis.com/maps/api/dista ncematrix/json?origins=$from&destinations=$to&language=id-ID&sensor=false");

$data = json_decode($data);

$time = 0; $distance = 0;

foreach ($data->rows[0]->elements as $road) { $time += $road->duration->value;

$distance += $road->distance->value; }

//echo "Asal: " . $data->destination_addresses[0];

//echo "Tujuan: " . $data->origin_addresses[0];

$hasil = array("waktu"=> gmdate('H', $time) . " jam " . gmdate('i', $time) . " menit", "jarak"=>floor($distance / 1000) . " km");

echo json_encode($hasil); ?>

10. Owl.carousel.css

/*

* Core Owl Carousel CSS File * v1.3.2

(27)

/* clearfix */

.owl-carousel .owl-wrapper:after { content: ".";

display: block; clear: both;

visibility: hidden; line-height: 0; height: 0; }

/* display none until init */ .owl-carousel {

display: none; position: relative; width: 100%;

padding:48px 0 0;

-ms-touch-action: pan-y; }

.owl-carousel .testim_slider {padding-top:30px;} .owl-carousel .owl-wrapper{

display: none; position: relative;

-webkit-transform: translate3d(0px, 0px, 0px); }

.owl-carousel .owl-wrapper-outer{ overflow: hidden;

position: relative; width: 100%;

}

.owl-carousel .owl-wrapper-outer.autoHeight{

-webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; }

.owl-carousel .owl-item{ float: left;

}

(28)

.owl-controls .owl-buttons div{ cursor: pointer;

}

.owl-controls {

-webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }

/* mouse grab icon */ .grabbing {

cursor:url(grabbing.png) 8 8, move; }

/* fix */

.owl-carousel .owl-wrapper, .owl-carousel .owl-item{

-webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); }

/* Navigation */

.owl-theme .owl-controls{ position:absolute; left:50%;

top:-80px; width:100%;

text-align: right;

(29)

.testimonials .owl-theme .owl-controls{top:-50px;}

.owl-theme .owl-controls .owl-buttons div { position:relative;

z-index:1;

display: inline-block; width:70px;

height:70px;

margin:0 0 0 -2px; border:2px solid #ccc;

transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out; }

.owl-theme .owl-controls .owl-buttons div:hover {z-index:2; border-color:#333;}

.owl-theme .owl-controls .owl-buttons div:before { position:absolute;

left:0; top:0; width:68px; height:68px;

font-family: FontAwesome; text-align:center;

line-height:66px; font-size:32px; color:#ccc;

transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out; }

.owl-theme .owl-controls .owl-buttons .owl-prev:before {content: "\f104";}

.owl-theme .owl-controls .owl-buttons .owl-next:before {content: "\f105";}

.owl-theme .owl-controls .owl-buttons div:hover:before {color:#333;}

/* Styling Pagination*/

.owl-theme .owl-controls .owl-pagination {height:14px;} .owl-theme .owl-controls .owl-page{

(30)

vertical-align:top; margin-left:16px; zoom: 1;

*display: inline;/*IE7 life-saver */ }

.owl-theme .owl-controls .owl-page span{ display: block;

width: 14px; height: 14px; margin: 0;

border-radius: 50%; border:2px solid #333; }

.owl-theme .owl-controls .owl-page.active span { position:relative;

top:-3px; bottom:-3px; width:20px; height:20px;

background-color:#333; }

/* If PaginationNumbers is true */

.owl-theme .owl-controls .owl-page span.owl-numbers{ height: auto;

width: auto; color: #FFF;

padding: 2px 10px; font-size: 12px;

-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; }

/* preloading images */ .owl-item.loading{

min-height: 150px;

(31)

(32)

(33)

(34)

(35)