Sistem Informasi Geografis Penyebaran Wisata di Kota Medan Menggunakan Google Maps API Berbasis Web Mobile

(1)

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, 8214290, Fax. (061) 8214290

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

Nama Mahasiswa

: M HAFIZH HILMY

Nomor Stambuk

:132406003

Judul Tugas Akhir

:

SISTEM

INFORMASI

GEOGRAFIS

PENYEBARAN

WISATA DI KOTA MEDAN MENGGUNAKAN GOOGLE

MAPS API BERBASIS WEB MOBILE

Dosen Pembimbing

: Dr. Sawaluddin M.IT

Tanggal Mulai Bimbingan

:

Tanggal Selesai Bimbingan

:

No.

Tanggal Asisten

Bimbingan

Pembahasan pada

Asistensi Mengenai,

pada Bab :

Paraf Dosen

Pembimbing

Keterangan

1

*Kartu ini harap dikembalikan ke Departemen Matematika bila bimbingan telah selesai

Diketahui,

Disetujui,

Ketua

Pembimbing Utama

Program Studi D3 Teknik Informatika

Dr. Elly Rosmaini, M.Si. Dr. Sawaluddin, M.IT

(2)

KEMENTERIAN PENDIDIKAN DAN KEBUDAYAAN

UNIVERSITAS SUMATERA UTARA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

Jln. Bioteknologi No.1 Kampus USU Padang Bulan Medan-20155

Telp. (061) 8211050, 8214290, Fax. (061) 8214290

SURAT KETERANGAN

Hasil Uji Program Tugas Akhir

Yang bertanda tangan dibawah ini, menerangkan bahwa Tugas Akhir Mahasiswa Program

Diploma 3 Teknik Informatika :

Nama

: M HAFIZH HILMY

NIM

: 132406003

Program Studi

: TEKNIK INFORMATIKA

Judul TA

: SISTEM INFORMASI GEOGRAFIS PENYEBARAN WISATA DI

KOTA MEDAN MENGGUNAKAN GOOGLE MAPS API BERBASIS

WEB MOBILE

Telah melaksanakan test program Tugas Akhir Mahasiswa tersebut diatas tanggal...Juni 2016

Dengan Hasil

: Sukses / Gagal

Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas

Akhir Mahasiswa bersangkutan di Departemen Matematika FMIPA USU Medan.

Medan, Juni 2016

Program Studi D3 Teknik Informatika

Ketua,

(3)

LAMPIRAN

Listing Program

index.php

<?php

header("location: home.php"); ?>

home.php

<title>square</title>

href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min .css">

<body>

(4)

<span class="navbar-brand">Square</span>

<button type="button" class="navbar-toggle"

data-toggle="collapse" data-target=".navbar-collapse">

<span class="sr-only">Toggle Navigation</span>

<span class="icon-bar"><img

style="margin-top:-5%;width:80%" src="img/toggle-icon.png"></span>

</button>

</div>

<li><a href="place.php">place</a></li>

<li><a href="about.php">about</a></li>

</ul>

</div>

<form>

<input type="text" name="search"

(5)

<span class="glyphicon

glyphicon-search"></span> Search

</button>

</form>

</div>

<p class="2">we make your wonderfull life in

medan city</p>

</div>

</div>

<a href="

view.php?ID=Mesjid%20Raya%20Medan"><img src="img/wisata_medan/Mesjid Raya Medan1.jpg" id="img" ></a>

(6)

<a href="view.php?ID=Istana%20Maimun"><img

src="img/wisata_medan/istana maimun2.jpg"></a>

</div>

<a href="

view.php?ID=Museum%20Sumatera%20Utara"><img

src="img/wisata_medan/museum sumatera utara2.jpg"></a>

</div>

<a href="

view.php?ID=Rumah%20Tjong%20A%20Fie"><img src="img/wisata_medan/rumah tjong a fie2.jpg"></a>

</div>

<a href=" view.php?ID=Tip%20Top"><img

src="img/wisata_medan/tip top2.jpg"></a>

</div>

<a href="view.php?ID=Merdeka%20Walk"><img

src="img/wisata_medan/merdeka walk2.jpg"></a>

</div>

(7)

</div> </div>

</div>

<p>copyright @ 2016 square</p>

</div>

</div> </div>

<scrip ttype="text/javascript"

src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js "></script>

src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.j s"></script>

</body> </html>

place.php

(8)

error_reporting(0); ?>

<body>

</button>

</div>

(9)

</ul>

</div>

<form>

<input type="text" name="search"

placeholder="search place">

<button type="button" class="btn

btn-default">

<span class="glyphicon

glyphicon-search"></span> Search

</button>

</form>

</div>

(10)

<table

style="width:90%;padding-top:2%;margin-left:auto;margin-right:auto;margin-top:2%;">

<?php

include ('koneksi.php');

$batas = 4;

$pg = isset( $_GET['pg'] ) ?

$_GET['pg'] : "";

if ( empty( $pg ) ) {

$posisi = 0;

$pg = 1;

}

else {

$posisi = ( $pg - 1 ) *

$batas;

}

$que = "SELECT * FROM `data`

limit $posisi, $batas";

$no = 1+$posisi;

(11)

while ($qq = mysql_fetch_assoc($q)) {

?>

<tr>

<th><?php echo $qq['nama']

?></th>

</tr>

<tr>

<td><?php echo

$qq['alamat'] ?></td>

</tr>

<tr>

<td><?php echo "<img

style='width:180px;height:180px;'src=img/wisata_medan/".$qq['gambar']. ">" ?></td>

</tr>

<tr>

<td

style="padding-bottom:3%;padding-top:1%"><div class="button"><a

href="view.php?ID=<?php echo $qq['nama'];?>">VIEW</a></div></td>

</tr>

<?php $no++;} ?>

</table>

<table style="text-align:

(12)

<tr>

<?php

$jml_data =

mysql_num_rows(mysql_query("SELECT * FROM `data`"));

$JmlHalaman =

ceil($jml_data/$batas);

if ( $pg > 1 ) {

$link = $pg-1;

$prev = "<a

href='?pg=$link'>Sebelumnya </a>";

}

else {

$prev = "< ";

}

for ( $i = 1; $i<=

$JmlHalaman; $i++ ){

if ( $i == $pg )

{

$nmr .= $i

. " ";

}

(13)

$nmr .= "<a href='?pg=$i'>$i</a> ";

}

if ( $pg <

$JmlHalaman ) {

$link = $pg + 1;

$next = " <a

href='?pg=$link'>Selanjutnya</a>";

}

else {

$next = " >";

}

echo $prev . $nmr .

$next;

?>

</td>

</tr>

</table>

</div>

(14)

</div> </div>

</body> </html>

about.php

<?php

<body>

(15)

</button>

</div>

</ul>

</div>

<p>we made this square for you who live in the

(16)

visit in the medan city, and we need the support of you to share with us for promote good place</p>

</div>

</div>

<h1>Saran Tempat Wisata Kota Medan</h1>

<form >

<table>

<tr>

<td><input type="text"

placeholder="email" name="email"></td>

<td rowspan="2"><input

type="submit" value="send"></td>

</tr>

<tr>

<td><input type="text"

placeholder="nama tempat" name="nama_tempat"></td>

</tr>

(17)

<span style="color:white"><?php echo

$_GET['error']; ?></span>

</form>

</div>

</div> </div>

</body> </html>

style.css *{

(18)

@media only screen and (min-width: 320px) { .navbar{

border-radius: 0px; }

.row-1{

background: url("img/32.jpg")repeat center; }

.row-1p{

.row-1a{

background: url("img/imageedit_7_8427303109.jpg")no-repeat center;

}

.row-1 form{

margin-top: 3.5%; }

.row-1 form input[type=text]{ width: 190px;

height: 33px;

border-radius: 2px; border: none;

(19)

.row-1p form{

margin-top: 3.5%; }

.row-1p form input[type=text]{ width: 190px;

height: 33px;

}

.row-1a-1 p{

margin-top: 15%; font-size: 10px; font-weight: bold; color: white;

text-align: center; }

.row-1a{

margin-top: -20px; width: 100%;

height: 30%; opacity: 0.75;

(20)

.btn-default{ width: 90px; }

.row-1-2 img{ width: 30%;

margin-left: 35%; margin-top: 7%; }

.row-1-2 p{

margin-top: 5%; }

.row-2{

width: 100%; height: 800px;

background: rgb(229,119,22); }

a img{

margin-top: 0.5%; width: 100%; height: 100%; }

(21)

}

.content{

padding-top: 4%; }

.copyright p{

text-align:center; color:white;

padding-top:80%; }

.faq h1{

color: white; margin-bottom: 3%; }

.faq input[type='text']{ width: 100%;

height: 28px; color: black; border: none; margin-bottom: 1%; }

.faq input[type='submit']{ width: 74px;

(22)

color: white; background: black; border: none; margin-left: 3%; margin-bottom: 1%; }

.faq input[type='submit']:hover{ background: #1a1a1a;

} }

@media screen and (min-width: 360px) { .navbar{

.row-1{

.row-1p{

.row-1a{

(23)

}

.row-1 form{

margin-top: 3%; }

height: 33px;

}

.row-1p form{

margin-top: 3%; }

height: 33px;

}

(24)

width: 30%;

.row-1a{

filter: alpha(opacity=60); }

.row-1a-1 p{

.post img{

margin-left: 20%; width: 60%;

(25)

.row-2{

width: 100%; height: 200%;

background: #4d4d4d; }

.post{

margin-bottom: 5%; }

.faq{

width: 600px; margin: 0 auto; }

.faq h1{

.faq input[type='text']{ width: 300px;

(26)

height: 60px; color: white; background: black; border: none; margin-left: 3%; margin-bottom: 1%; }

}

.faq form{

}

(27)

.row-1{

.row-1p{

.row-1a{

}

.row-1 form{

margin-top: 3%; }

height: 33px;

}

.row-1p form{

margin-top: 3%; }

(28)

width: 235px; height: 33px;

}

.row-1a-1 p{

.row-1a{

(29)

width: 30%;

.post img{

margin-left: 27.5%; width: 45%;

height: 45%; }

.post{

.row-2{

background: #4d4d4d; }

.faq{

(30)

.faq h1{

.faq input[type='text']{ width: 300px;

(31)

.faq form{

}

.row-1{

.row-1p{

.row-1a{

}

.row-1 form{

margin-top: 13px; }

(32)

width: 380px; }

.row-1p form{

margin-top: 13px; }

}

.row-1-2 img{ width: 10%;

margin-left: 45%; margin-top: -3.5px; }

.row-1a-1 p{

.row-1a{

(33)

.post img{

width: 107.2%; height: 100%; }

a img{

margin-left: -3.5%; }

a img:hover{

background: #000000; opacity: 0.75;

.post{

(34)

.row-1-2 p{

margin-top: -20px; }

.row-2{

.row-2 a img{ height: 40%; }

.copyright p{

text-align:center; color:white;

padding-top:21%; }

.faq{

.faq h1{

(35)

}

.faq input[type='text']{ width: 100%;

}

.faq form{

(36)

} }

.wrapper{

width: 100%; }

.navbar{

.navbar-header span{ color: #ffffff; }

.navbar .navbar-header a{ color: #ffffff;

}

.navbar .navbar-collapse ul li a{ color: #ffffff;

}

.navbar .navbar-collapse ul li a:hover{ color: #000;

} .row-1{

(37)

width: 100%; height: 50%; }

.row-1-2 p{

margin-top: 3%; font-size: 18px; font-weight: bold; color: #ff9900; text-align: center;

} .row-1p{

.row-1-2 p{

(38)

} .row-3{

width: 100%; height: 300px;

background: url("img/background2.jpg")center; }

.row-1a{

width: 100%; height: 92.6%; }

.line{

background: rgb(229,119,22); width: 500px;

height: 2px; margin: 0 auto; margin-top: 5%; margin-bottom: 5%; }

koneksi.php

<?php

mysql_connect("localhost","root","");

(39)

?>

admin/index.php

<?php

<title>Login Admin</title>

<body>

<table>

<tr>

<td>

<input type="text" name="username"

placeholder="username">

(40)

</tr>

<tr>

<td>

<input type="password" name="password"

placeholder="password">

</td>

</tr>

<tr>

<td><input type="submit"

value="login"></td>

</tr>

<tr>

<td><span style="color:red"><?php echo

$_GET['error']; ?></span></td>

</tr>

</table>

</form>

</div> </div> </body> </html>

admin/home.php

(41)

<title>Home Admin</title>

<body>

<nav>

<li><a href="create.php">Create Data</a></li>

<li><a href="account.php">account</a></li>

</nav>

<button><a href="logout.php">logout</a></button>

</div>

<table

style="width:90%;margin-left:auto;margin-right:auto;background:#d16c15;margin-top: 30px">

(42)

<th>Nama Tempat</th>

<th>Review Tempat</th>

<th>Alamat</th>

<th>Gambar</th>

<th>Title</th>

<th>Action</th>

</tr>

<?php

include ('../koneksi.php');

$batas = 2;

$pg = isset( $_GET['pg'] ) ? $_GET['pg'] : "";

if ( empty( $pg ) ) {

$posisi = 0;

$pg = 1;

}

else {

$posisi = ( $pg - 1 ) * $batas;

}

$que = "SELECT * FROM `data` limit $posisi,

$batas";

(43)

$q = mysql_query($que);

while ($qq = mysql_fetch_assoc($q)) {

?>

<td><?php echo "<img

style='width:180px;height:180px;'src=../img/wisata_medan/".$qq['gambar '].">" ?></td>

<td style="text-align:center"><a

href="edit.php?nama=<?php echo $qq['nama'];?>"><input type="submit" value="edit"></a>||<a href="proses-delete.php?nama=<?php echo

$qq['nama'];?>"><input type="submit" value="delete"></a></td>

</tr>

<?php $no++;} ?>

(44)

<table style="text-align:

center;background:#d16c15;color:white;width:90%;margin-left:auto;margin-right:auto">

<tr>

<?php

$jml_data =

mysql_num_rows(mysql_query("SELECT * FROM `data`"));

$JmlHalaman = ceil($jml_data/$batas);

if ( $pg > 1 ) {

$link = $pg-1;

$prev = "<a

href='?pg=$link'>Perv </a>";

}

else {

$prev = "Prev ";

}

for ( $i = 1; $i<= $JmlHalaman; $i++

){

if ( $i == $pg ) {

$nmr .= $i . " ";

}

else {

$nmr .= "<a href='?pg=$i'>$i</a>

(45)

}

if ( $pg < $JmlHalaman ) {

$link = $pg + 1;

$next = " <a

href='?pg=$link'>Next</a>";

}

else {

$next = "Next";

}

echo $prev . $nmr . $next;

?>

</td>

</tr>

</table>

admin/create.php

<?php

(46)

?> <html> <head>

<body>

<nav>

</nav>

</div>

<h1>Create new data</h1>

<form action="proses-tambah.php" method="POST"

enctype="multipart/form-data">

<table>

(47)

</tr>

<tr>

<td><textarea name="review"

placeholder="review tempat" cols="50" rows="5"></textarea></td>

</tr>

<tr>

<td><input type="text" name="alamat"

placeholder="alamat tempat"></td>

</tr>

<tr>

<td><input type="file"

name="gambar"><p>*minimal photo ukuran 1260 x 720 atau lebih</p></td>

</tr>

<tr>

<td><input type="text" name="lat"

placeholder="latitude tempat"></td>

</tr>

<tr>

<td><input type="text" name="lng"

placeholder="longitude tempat"></td>

</tr>

(48)

<td><textarea name="title"

placeholder="title untuk dimap" cols="50" rows="5"></textarea></td>

</tr>

<tr>

value="Input"></td>

</tr>

</table>

</form>

</div>

admin/create-account.php

<?php

(49)

<body>

<nav>

</nav>

</div>

<h1>Create new data</h1>

<form action="proses-tambah-account.php"

method="POST">

<table>

<tr>

<td><input type="text" name="username"

placeholder="username yang baru"></td>

</tr>

<tr>

<td><input type="password"

name="password" placeholder="password yang baru"></td>

(50)

<tr>

value="Input"></td>

</tr>

</table>

</form>

</div>

admin/logout.php

<?php

header("location: index.php"); ?>

admin/proses_login.php <?php

(51)

$querry="SELECT `username`, `password` FROM `admin` WHERE username='$username' and password='$pass'";

$eq=mysql_query($querry); $numb=mysql_num_rows($eq); if($numb == 1){

echo "Berhasil login";

header("location:home.php"); }

else{

$error = "username valid";

header("location: index.php?error=$error"); }

?>

admin/proses-tambah.php

<?php

(52)

$photo = $_FILES['gambar']['name']; $lat = $_POST['lat'];

$lng = $_POST['lng']; $title = $_POST['title'];

$sql = mysql_query("INSERT INTO `data` (`nama`, `review`, `alamat`, `gambar`, `lat`, `lng`, `title`) VALUES

('$nama','$review','$alamat','$photo','$lat','$lng','$title')"); move_uploaded_file($_FILES['gambar']['tmp_name'],

"../img/wisata_medan/".$_FILES['gambar']['name']); header('location:home.php');

?>

admin/proses-tambah-account.php

<?php

include ('../koneksi.php'); $username = $_POST['username']; $password = $_POST['password'];

$sql = mysql_query("INSERT INTO `admin` (`username`, `password`) VALUES ('$username','$password')");

header('location:account.php'); ?>

(53)

include ('../koneksi.php'); $nama = $_GET['nama'];

$que = "DELETE FROM `data` WHERE nama='$nama'"; $q = mysql_query($que);

if ($q) {

header('location:home.php'); }

else{

echo die(mysql_error()); }

?>

admin/proses-delete-account.php

<?php

include ('../koneksi.php'); $nama = $_GET['username'];

$que = "DELETE FROM `admin` WHERE username='$nama'"; $q = mysql_query($que);

if ($q) {

header('location:account.php'); }

else{

(54)

} ?>

admin/style.css *{

margin: 0; padding: 0;

font-family: sans-serif; }

.wrapper{

background: url("../img/background3.jpg"); }

.wrapper button{ width: 50px; height: 50px; margin: 10px;

background: #efa15d; border: none;

}

(55)

}

.wrapper img{ width: 50px; height: 50px; }

.container{ width: 100%; height: 100%;

background: url("../img/background3.jpg"); }

.box{

background: #ea862e; position: fixed; top: 35%;

left: 35%;

.box table{

position: fixed; top: 43%;

(56)

}

.box table tr td input[type='text']{ width: 200px;

height: 30px; background: white; border-radius: 5px; border: none;

}

.box table tr td input[type='password']{ width: 200px;

}

.box table tr td input[type='submit']{ width: 200px;

height: 30px; color: white;

background: #5cd65c; border-radius: 5px; border: none;

(57)

.box table tr td input[type='submit']:hover{ background: #47d147;

} .menu{

background: white; }

.menu button{ float: right; width: 80px; height: 40px; margin: 10px;

background: #ff3300; border: none;

.menu button:hover{ background: #cc2900; }

.menu button a{ color: white;

(58)

}

.menu nav li{ float: left; list-style: none; }

.menu nav li{ float: left; list-style: none; padding-left: 10px; padding-right: 10px; margin-top: 25px; }

.menu nav li a{ color: black;

text-decoration: none; }

.menu nav li a:hover{ font-weight: bold; }

.contet{

width: 100%; }

(59)

position: fixed; margin-left: 2%; background: #d16c15; width: 100px;

height: 100px; border: none; }

.content button:hover{ background: #ba6012; }

.content button a{ color: white;

text-decoration: none; }

.box-create{ width: 30.5%;

background: #ea862e; position: fixed; top: 14%;

left: 35%;

(60)

margin: 3%; }

.box-create table{ margin: 3%; }

.box-create input[type="text"]{ width: 368px;

.box-create input[type="password"]{ width: 368px;

(61)

background: white; border-radius: 5px; border: none;

.box-create input[type="submit"]{ width: 368px;

height: 30px; color: white;

background: #5cd65c; border-radius: 5px; border: none;

.box-create input[type="submit"]:hover{ background: #47d147;

}

.box-create textarea{ background: white; border-radius: 5px; border: none;

(62)

proses/index.php

<?php

include ("koneksi.php"); $ID = $_GET['ID'];

$querry = "SELECT * FROM `data` nama='$ID'"; $exe = mysql_query($querry);

while ($row = mysql_fetch_assoc($exe)) { $arr[] = $row;

}

echo json_encode($arr); ?>

Proses/koneksi.php

<?php

mysql_connect("localhost","root",""); mysql_select_db("square");