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

2

3

4

5

6

7

*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,

Dr. Elly Rosmaini, M.Si.

NIP. 1960 0520 1985 0320 02

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

<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="home.php">home</a></li> <li><a href="place.php">place</a></li> <li><a href="about.php">about</a></li> </ul>

</div> </div>

<form>

(5)

<span class="glyphicon

glyphicon-search"></span> Search

</button>

</form>

</div> </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)

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

</div>

</div>

(7)

</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); ?>

<title>square</title>

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

<body>

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

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

(9)

<li><a href="home.php">home</a></li> <li><a href="place.php">place</a></li> <li><a href="about.php">about</a></li> </ul>

</div> </div>

<form>

<span class="glyphicon

glyphicon-search"></span> Search

</button>

</form>

</div> </div>

</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:

center;background:Black;color:white;width:100%;margin-left:auto;margin-right:auto">

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

</div> </div>

(14)

</div> </div>

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>

about.php

<?php

error_reporting(0); ?>

<title>square</title>

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

<body>

(15)

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

<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="home.php">home</a></li> <li><a href="place.php">place</a></li> <li><a href="about.php">about</a></li> </ul>

</div> </div>

<p>we made this square for you who live in the medan city and tourist, we make you know the great places you can

(16)

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

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

</form>

</div>

</div> </div>

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>

style.css

margin: 0; padding: 0; }

(18)

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

border-radius: 0px; }

.row-1{

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

.row-1p{

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

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

border-radius: 2px; border: none;

}

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

filter: alpha(opacity=60); }

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

.row-2 a img{ height: 16%;

(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{

border-radius: 0px; }

.row-1{

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

.row-1p{

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

.row-1a{

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

(23)

}

.row-1 form{

margin-top: 3%; }

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

height: 33px;

border-radius: 2px; border: none;

}

.row-1p form{

margin-top: 3%; }

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

height: 33px;

border-radius: 2px; border: none;

}

.btn-default{ width: 90px; }

(24)

width: 30%;

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

.row-1a{

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

height: 30%; opacity: 0.75;

filter: alpha(opacity=60); }

.row-1a-1 p{

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

text-align: center; }

.post img{

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

height: 45%; }

(25)

.row-2{

width: 100%; height: 200%;

background: #4d4d4d; }

.post{

width: 80%; height: 50%;

margin-bottom: 5%; }

.faq{

width: 600px; margin: 0 auto; }

.faq h1{

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

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

height: 28px; color: black; border: none;

(26)

margin-bottom: 1%; }

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

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

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

}

.faq form{

width: 380px; margin: 0 auto; }

}

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

border-radius: 0px; }

(27)

.row-1{

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

.row-1p{

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

.row-1a{

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

}

.row-1 form{

margin-top: 3%; }

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

height: 33px;

border-radius: 2px; border: none;

}

.row-1p form{

margin-top: 3%; }

(28)

width: 235px; height: 33px;

border-radius: 2px; border: none;

}

.row-1a-1 p{

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

text-align: center; }

.row-1a{

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

height: 70%; opacity: 0.75;

filter: alpha(opacity=60); }

.btn-default{ width: 90px; }

(29)

width: 30%;

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

.post img{

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

height: 45%; }

.post{

width: 75%; height: 50%;

margin-bottom: 5%; }

.row-2{

width: 100%; height: 70%;

background: #4d4d4d; }

.faq{

width: 600px; margin: 0 auto; }

(30)

.faq h1{

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

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

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

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

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

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

(31)

.faq form{

width: 380px; margin: 0 auto; }

}

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

border-radius: 0px; }

.row-1{

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

.row-1p{

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

.row-1a{

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

}

.row-1 form{

margin-top: 13px; }

(32)

width: 380px; }

.row-1p form{

margin-top: 13px; }

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

}

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

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

.row-1a-1 p{

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

text-align: center; }

.row-1a{

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

(33)

height: 40%; opacity: 0.75;

filter: alpha(opacity=60); }

.post img{

width: 107.2%; height: 100%; }

a img{

width: 107%; height: 100%;

margin-left: -3.5%; }

a img:hover{

background: #000000; opacity: 0.75;

filter: alpha(opacity=60); }

.post{

width: 100%; height: 100%; margin-bottom: 5%; }

(34)

.row-1-2 p{

margin-top: -20px; }

.row-2{

width: 100%; height: 80%;

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

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

.copyright p{

text-align:center; color:white;

padding-top:21%; }

.faq{

width: 600px; margin: 0 auto; }

.faq h1{

color: white; margin-bottom: 3%;

(35)

}

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

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

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

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

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

}

.faq form{

width: 380px; margin: 0 auto;

(36)

} }

.wrapper{

width: 100%; }

.navbar{

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

.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{

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

height: 15%; opacity: 0.75;

filter: alpha(opacity=60); }

.row-1-2 p{

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

(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",""); mysql_select_db("square");

(39)

admin/index.php

<?php

error_reporting(0); ?>

<title>Login Admin</title>

<body>

<tr>

<td>

(40)

</tr>

<tr>

<td>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table> </form>

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

admin/home.php

(41)

error_reporting(0); ?>

<title>Home Admin</title>

<body>

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

(42)

<th>Nama Tempat</th> <th>Review Tempat</th> <th>Alamat</th>

<th>Gambar</th> <th>Lat</th> <th>Lng</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 $qq['ID'] ?></td> <td><?php echo $qq['nama'] ?></td> <td><?php echo $qq['review'] ?></td> <td><?php echo $qq['alamat'] ?></td> <td><?php echo "<img

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

<td><?php echo $qq['lat'] ?></td> <td><?php echo $qq['lng'] ?></td> <td><?php echo $qq['title'] ?></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++;} ?> </table>

(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> </div>

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

admin/create.php

<?php

(46)

?> <html> <head>

<title>Home Admin</title>

<body>

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

<h1>Create new data</h1>

<table>

(47)

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td><input type="file"

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

</tr>

<tr>

</tr>

<tr>

</tr>

(48)

<td><textarea name="title"

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

</tr>

<tr>

</tr>

</table>

</form> </div>

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

admin/create-account.php

<?php

error_reporting(0); ?>

<title>Home Admin</title>

(49)

<body>

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

<h1>Create new data</h1>

<table>

<tr>

</tr>

<tr>

(50)

<tr>

</tr>

</table>

</form> </div>

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

admin/logout.php

<?php

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

admin/proses_login.php

<?php

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

(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

include ('../koneksi.php'); $nama = $_POST['nama']; $review = $_POST['review']; $alamat = $_POST['alamat'];

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

admin/proses-delete.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{

width: 100%; height: 100%;

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

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

background: #efa15d; border: none;

}

.wrapper button:hover{ background: #ed9345;

(55)

}

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

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

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

.box{

width: 30%; height: 30%;

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

left: 35%;

border-radius: 20px; }

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

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

}

.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{

width: 100%; height: 10%;

background: white; }

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

background: #ff3300; border: none;

border-radius: 10px; }

.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%;

border-radius: 20px; }

(60)

margin: 3%; }

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

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

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

margin-bottom: 1%; }

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

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

margin-bottom: 1%; }

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

(61)

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

margin-bottom: 1%; }

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

height: 30px; color: white;

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

margin-bottom: 1%; }

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

}

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

margin-bottom: 1%; }

(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");

(63)

DAFTAR PUSTAKA

Kadir, Abdul. 2002. Dasar Pemrograman Web Dinamis Menggunakan PHP. Penerbit

Andi. Yogyakarta.

Abdulloh, Rohi.2015.Web Programming is Easy.PT Elex Media Komputindo.Jakarta Frein, Ben.2012.Responsive Web Design with HTML5 dan CSS3.

Packt Publishing.

Birmingham

Svennerberg, Gabriel.2010.Beginning Google Maps API 3.Apress

Sirenden, Bernadus Herdi & Ester Laekha Dachi.2012.

Buat Sendiri Aplikasi Petamu

Menggunakan Codelngiter dan Google Maps API

.Andi Publisher.Yogyakarta.

(64)

BAB 3

PERANCANGAN SISTEM

3.1 Pengertian Perancangan Sistem

Membangun sebuah aplikasi pada umumnya akan diawali oleh perancangan sistem terlebih

dahulu. Dimana perancangan sistem adalah sebuah proses yang secara garis besar meliputi

langkah-langkah operasi dalam proses pengolahan data dan prosedur untuk mendukung operasi

sistem.

Menurut Jogiyanto H. M (1991) dalam bukunya

“Analisis dan Desain Sistem”

,

perancangan sistem dapat diartikan seperti berikut :

1. Tahap setelah analisis dari siklus pengembangan sistem.

2. Pendefinisian dari kebutuhan-kebutuhan fungsional.

3. Persiapan untuk rancang bangun implementasi.

4. Menggambarkan bagaimana suatu sistem dibentuk.

5. Yang dapat berupa pengambaran perencanaan dan pembuatan sketsa atau pengaturan dari

beberapa elemen yang terpisah ke dalam satu kesatuan yang utuh dan berfungsi.

6. Termasuk menyangkut mengkonfigurasi dari komponen perangkat keras dari suatu

sistem.

(65)

3.2 Flowchart Program

Berikut adalah alur

flowchart

untuk aplikasi yang dibangun beserta penjelasannya.

Gambar 3.1. Flowchart Program Untuk User

Dari bagan

flowchart

diatas, tampak bahwa user hanya dapat melakukan beberapa hal

melalui

mobile

atau desktop (PC)

saja. Pengontrolan data seperti melihat semua data, mencari

data, melihat hasil pencarian data, hingga melihat data yang dipilih dapat dilakukan melalui

(66)

Gambar 3.2. Flowchart Program Untuk Admin

Dan bagan

flowchart

yang diatas, tampak bahwa admin hanya dapat melakukan beberapa

hal melalui desktop (PC), Pengontrolan data seperti melihat semua data, menambah data,

mengedit data, menghapus data, melihat data admin, menambah data admin, mengedit data

admin, yang dipilih dapat dilakukan melalui desktop (PC) dan untuk admin dan user sudah bisa

diakses melalui situs website yang disediakan oleh penulis.

(67)

3.3 Diagram Konteks Sistem

Berikut adalah diagram konteks dari website parawisata yang dibangun. Diagram konteks ini

hanya menampilkan entitas yang terdapat dalam aplikasi tersebut, yakni

admin

, user, dan sistem.

Gambar 3.3. Diagram Konteks Sistem

3.4 Diagram Nol Sistem

Berikut adalah diagram nol dari diagram konteks pada aplikasi kontrol keuangan.

(68)

Diagram nol diatas menggambarkan jelas bahwasanya terdapat tiga proses utama dalam

system website ini. Yakni input data, edit dan hapus data, serta lihat data wisata. Ketiga proses

yang saling dikaitkan ini mencakup metode CRUD (

Create, Read, Update,

dan

Delete)

dalam

database.

Untuk proses penginputan data yang dilakukan oleh admin sendiri bersumber dari data

recommend dari user dan data yang didapati oleh admin yang menjadi sumber data valid bagi

website ini. Sehingga mengurangi kekeliruan dan kesalahan input data pada website

ini.

(69)

3.5 Diagram Rinci Proses 1: Input Data

Berikut adalah diagram rinci dari proses input data oleh admin yang bersumber dari buku kas

umum. Proses input data melalui beberapa proses rincian, mulai dari pengambilan data yang

valid langsung dari recommend dari user dan data dari admin, dilanjutkan dengan proses

penginputan data, hingga penyimpanan data ke

database

.

Gambar 3.5. Diagram Rinci Proses 1: Input Data

3.6 Diagram Rinci Proses 2: Edit dan Hapus Data

Diagram rinci berikut akan menjelaskan secara detail bagaimana proses edit dan hapus yang

dilakukan oleh sistem. Proses edit dilakukan apabila terdapat kesalahan input pada awal proses.

(70)

Sedangkan proses hapus data dilakukan berdasarkan dua hal. Yang pertama karena adanya

kesalahan input, yang kedua karena data sudah tidak diperlukan atau tidak valid.

(71)

3.7 Diagram Rinci Proses 3: Lihat Data

Diagram rinci berikut merupakan diagram rinci yang menggambarkan proses akhir dari website

parawisata ini. Berikut diagram rinci dari proses lihat data wisata.

(72)

3.8 Entity Relationship Diagram

Seperti yang sudah dijelaskan pada bab sebelumnya bahwa

Entity Relationship Diagram

atau

biasa disebut ERD merupakan suatu model yang menjelaskan hubungan antar-data dalam basis

data. Berikut merupakan ERD dari aplikasi

mobile

ini.

Gambar 3.8. ERD Sistem

Pada ERD diatas, terdapat dua entitas yaitu admin dan data wisata yang antara keduanya

terdapat sebuah relasi.

admin mengontrol Data Wisata

username

password

gambar alamt

ID Nama

review

Title latitude

longtitude wee

(73)

BAB 4

IMPLEMENTASI SISTEM

4.1 Pengertian Implementasi Sistem

Implementasi sistem adalah langkah-langkah atau prosedur yang dilakukan untuk merealisasikan

perancangan sistem yang sebelumnya telah disetujui. Implementasi sistem bertujuan untuk

menciptakan sistem baru maupun mengganti sistem yang telah ada.

4.2 Tujuan Implementasi Sistem

Adapun tujuan dari implementasi sistem ini adalah bukti nyata dari perencanaan yang matang. Segala

aspek dalam perencanaan sistem direalisasikan sehingga sistem akhirnya dapat diuji dan dioperasikan

langsung oleh pengguna. Pengguna berhak memastikan bahwa pengimplementasian sistem sesuai

dengan perencanaan sistem. Implementasi sistem memperhitungkan banyak hal seperti memastikan

sistem berjalan dengan baik, penginstalan sistem secara benar, serta pengontrolan yang dilakukan

(74)

4.3 Komponen Utama dalam Implementasi Sistem

Pada dasarnya, dalam pengimplementasian sistem terdapat beberapa komponen penting agar aplikasi

yang dibangun dapat berjalan. Berikut beberapa komponen yang dibutuhkan.

4.3.1 Perangkat Keras

Perangkat keras merupakan bagian dari komputer yang dapat dilihat secara fisik dan dapat disentuh.

Perangkat keras merupakan seluruh komponen peralatan yang membentuk suatu sistem komputer

serta peralatan lainnya yang memungkinkan komputer dapat melakukan tugasnya. Dalam pembuatan

website parawisata ini penulis menggunakan komputer sebagai perangkat keras pengganti. Dimana

pada komputer tersebut telah diinstal text editor dansoftware web serveryang memungkinkan website

ini berjalan diatas komputer.

(75)

Perangkat lunak adalah sekumpulan instruksi yang memungkinkan perangkat keras untuk dapat

memproses data. Perangkat lunak ini tidak berbentuk fisik, melainkan berupa program yang diciptakan

melalui perangkat elektronik. Dalam perangkat lunak dikenal dengan apa yang disebut sistem operasi

dan program aplikasi. Penulis mengembangkan bagian perangkat lunak berupa aplikasi.

Perangkat lunak yang digunakan dalam perencanaan hingga implementasi sistem adalah :

4) IDE (Integrated Developnment Environment) menggunakan Sublime Text 2.

5) Database MySQL.

6) XAMPP Control Panel Versi 3.2.1

7) Web Browser Google Chrome.

8) Windows 8.1 64bit.

4.3.3 Brainware

Brainware atau pengguna adalah manusia yang terlibat dalam mengoperasikan serta mengatur sistem di

dalam komputer. Diartikan juga sebagai perangkat intelektual yang mengoperasikan dan

(76)

Brainware termasuk bagian penting dari sebuah sistem komputer. Karena sebuah sistem tidak

akan berjalan apabila tidak ada peran brainware. Dalam sistem yang dibangun ini, adminlah yang

mengambil peran sebagai brainware.

4.4 Demonstrasi Program

Demonstrasi program akan menjelaskan secara visual bagaimana tampilan dari aplikasi kontrol

keuangan. Mulai dari tampilan Home,login admin, menu dan menu admin, input data dan data admin,

edit dan hapus data.

4.4.1 Tampilan home, place dan about

Berikut adalah tampilan awal dari website parawisata berupa halaman home,place dan about untuk

user. Dengan adanya fitur ini, maka user akan dibantu untuk diarahkan ke berbagai fitur website ini dan

(77)

Gambar 4.1. Tampilan Home Dekstop (PC)

(78)

(79)

(80)

Gambar 4.5. Tampilan View Data mobile

4.4.2 Tampilan login

Berikut adalah tampilan login dari website parawisata berupa halaman form login khusus untuk admin.

Dengan adanya fitur login, maka menyempitkan ruang bagi pengguna lain yang hendak masuk

(81)

Gambar 4.6. Tampilan Login

4.4.3 Tampilan menu admin

Ketika admin berhasil masuk melalui halaman login, maka admin akan dibawa ke halaman berikutnya

yang berisi menu. Terdapat tiga menu utama pada halaman ini, yaitu Home, Create Data, dan Account.

Menu Home nantinya akan membawa admin ke halaman untuk melihat semua data wisata,

mengedit data wisata dan menghapusnya , sedangkan menu Create Data akan membawa admin ke

halaman dimana admin untuk menambah data wisata dan Account akan membawa admin ke halaman

dimana admin dapat melihat menambah account admin mengedit nya menghapus nya dan membuat

(82)

Gambar 4.7. Tampilan Menu

4.4.4 Tampilan menu input data dan data admin

Berikut adalah tampilan apabila admin masuk ke menu Input Data dan Data Admin. Pada halaman ini,

untuk data wista admin dapat mengisikan nama tempat, review tempat, alamat tempat, gambar,

latitude, longtitude, serta title. Tombol Input dibawah akan memproses dan menyimpan data yang

diinputkan oleh admin ke database yang sudah ada. Sedangkan untuk data admin, admin dapat

mengisikan username baru dan password baru dan tombol Input dibawah akan memproses dan

(83)

Gambar 4.8. Tampilan Menu Input Data Wisata

(84)

4.4.5 Tampilan data admin

Berikut merupakan tampilan apabila admin masuk ke menu account. Didalamnya terdapat list atau

daftar username dan password untuk admin. Di sini admin dapat melihat username dan password para

admin, menambah admin, mengedit data admin dan menghapus data admin.

(85)

BAB 5

PENUTUP

Dari uraian sebelumnya, penulis menarik beberapa kesimpulan dan memberikan beberapa saran yang

mudah-mudahan dapat bermanfaat dan membangun bagi pembaca.

5.1 Kesimpulan

Berdasarkan proses perencanaan hingga implementasi sistem, maka sebagai penutup laporan

penulis mengambil beberapa kesimpulan antara lain:

1. Pembangunan webiste ini didukung oleh sebuah system Google Maps API untuk menampilkan

lokasi dari tempat wisata. Sehingga user dapat menggetahui letak atau lokasi dari tempat wisata

tersebut.

2. Sulitnya membangun sebuah sistem mengidintifikasikan bahwa sistem yang ada haruslah selalu

berada dalam pengawasan. Sehingga sistem senantiasa memiliki inovasi baru.

3. Penulis melakukan pembatasan fungsi pada website ini mengingat sifatnya yang hanya untuk

menampilkan data saja. Bukan sebagai sarana utama untuk menginput, edit, serta menghapus

(86)

4. Dengan adanya aplikasi ini, admin dapat memberi kan wawasan baru menggenai lokasi tempat

wisata dikota medan.

5. Memunculkan peluang lebih lagi terhadap user untuk memberi kan recommend tempat wisata

agar tempat wisata tersebut jadi objek wisata yang menarik.

5.2 Saran

Dengan selesainya pengimplementasian sistem ini, banyak saran-saran yang masuk baik kepada

penulis seperti berikut :

1. Besar harapan agar sistem dapat dibangun lebih lagi mengingat masih banyak kekurangan yang

menempel pada sistem.

2. Sistem yang dibuat diharapkan mampu menaungi dan meringankan masalah-masalah yang

tadinya kurangnya informasi, kini mendapatkan informasi secara fokus untuk kota medan oleh

sistem.

3. Melihat wista kota medan yang kini kalah pamor oleh gedung tingkat tinggi dan Mall di kawasan

kota Medan, penulis menyarankan agar kita semua harus meningkatkan wisata dikota medan

(87)

BAB 2

LANDASAN TEORI

2.1 Sekilas Website

World Wide Web atau WWW atau juga dikenal dengan WEB (Website) adalah salah satu

layanan yang didapat oleh pemakai computer yang terhubung ke internet. Web ini menyediakan

informasi bagi pemakai computer yang terhubung ke internet dari sekedar informasi yang tidak

berguna sama sekali sampai informasi yang serius dari informasi yang gratisan sampai informasi

yang komersial. Website atau situs dapat diartikan sebagai kumpulan halaman-halaman yang

digunakan untuk menampilkan informasi teks, gambar diam atau gerak, animasi, suara, dan atau

gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang membentuk satu

rangkaian bangunan yang saling terkait dimana masing-masing dihubungkan dengan

jaringan-jaringan halaman (hyperlink).

2.2 Pemrograman Web

Pemrograman web diambil dari 2 suku kata yaitu pemrograman dan web. Pemrograman

diartikan proses, cara, perbuatan program. Definisi Web jaringan komputer yang terdiri dari

kumpulan situs internet yang menawarkan teks dan grafik dan suara dan sumber daya animasi

melalui protokol transfer hypertext. Orang banyak mengenal web dengan istilah WWW (world

wide web), World Wide Web adalah layanan internet yang paling populer saat ini internet mulai

(88)

dikenal dan digunakan secara luas setelah adanya layanan WWW. WWW adalah

halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya (hyperlink) yang membentuk

samudra belantara informasi. WWW berjalan dengan protokol HyperText Transfer Protokol

(HTTP). Halaman Web merupakan file teks murni (plain text) yang berisi sintaks-sintaks HTML

yang dapat dibuka/ dilihat/ diterjemahkan dengan Internet Browser . Sintaks HTML mampu

memuat konten text, gambar, audio, video dan animasi. Kini internet identik dengan web, karena

kepopuleran web sebagai standar interface pada lanyanan-layanan yang ada di internet, dari

awalnya sebagai penyedia informasi, ini digunakan juga untuk komunikasi dari email sampai

dengan chatting, sampai dengan melakukan transaksi bisnis (commerce).

Banyak keuntungan yang diberikan oleh Aplikasi berbasis Web daripada aplikasi berbasis

desktop, sehingga aplikasi berbasis web telah diadopsi oleh perusahaan sebagai bagian dari

strategi teknologi informasinya, karena beberapa alasan :

1. Akses informasi mudah,

2. Setup server lebih mudah

3. Informasi mudah didistribusikan

4. Bebas platform, informasi dapat disajikan oleh browser web pada sistem operasi mana

saja karena adanya standar dokumen berbagai tipe data dapat disajikan

2.3 Perkembangan Website

Adapun beberapa perkembangan versi

–

versi website dari tahun pertama kali dibuat

hingga sekarang ialah sebagai berikut.

(89)

Web 1.0 adalah merupakan teknologi web yang pertama kali digunakan dalam aplikasi

world wide web, atau ada yang menyebut web 1.0. sebagai www itu sendiri yang banyak

digunakan dalam situs web yang bersifat personal. Adapun beberapa ciri atau

karakteristik web 1.0. adalah:

a)

Merupakan halaman web yang statis atau hanya berfungsi untuk menampilkan.

b)

Halaman masih didesain sebagai html murni, yang ‘hanya’ memungkinkan orang

untuk melihat tanpa ada interaksi

c)

Biasanya hanya menyediakan semacam buku tamu online tapi tidak ada interaksi

yang intens

d)

Masih menggunakan form-form yang dikirim melalui e-mail, sehingga

komunikasi biasanya baru satu arah.

2)

Web 2.0

Web 2.0, adalah sebuah istilah yang dicetuskan pertama kali oleh O'Reilly Media pada

tahun 2003, dan dipopulerkan pada

konferensi web 2.0 pertama di tahun 2004, merujuk pada generasi yang dirasakan

sebagai generasi kedua layanan berbasis web seperti situs jaringan sosial, wiki, perangkat

komunikasi, dan folksonomi yang menekankan pada kolaborasi online dan berbagi antar

pengguna. O'Reilly Media, dengan kolaborasinya bersama MediaLive International,

menggunakan istilah ini sebagai judul untuk sejumlah seri konferensi, dan sejak 2004

beberapa pengembang dan pemasar telah mengadopsi ungkapan ini.

(90)

Walaupun kelihatannya istilah ini menunjukkan versi baru daripada web, istilah

ini tidak mengacu kepada pembaruan kepada spesifikasi teknis World Wide Web, tetapi

lebih kepada bagaimana cara si-pengembang sistem di dalam menggunakan platform

web. Mengacu pada Tim Oreilly, istilah Web 2.0 didefinisikan sebagai berikut:

"Web 2.0 adalah sebuah revolusi bisnis di dalam industri komputer yang terjadi

akibat pergerakan ke internet sebagai platform, dan suatu usaha untuk mengerti

aturan-aturan agar sukses di platform tersebut. ”

Beberapa ciri atau karakteristik web 2.0:

a)

Web sebagai platform.

b)

Data sebagai pengendali utama.

c)

Efek jaringan diciptakan oleh arsitektur partisipasi.

d)

Inovasi dalam perakitan sistem serta situs disusun dengan menyatukan fitur dari

pengembang yang terdistribusi dan independen (semacam model pengembangan

"open source").

e)

Model bisnis yang ringan, yang dikembangkan dengan gabungan isi dan layanan.

f)

Akhir dari sikllus peluncuran (release cycle) perangkat lunak (perpetual beta).

g)

Mudah untuk digunakan dan diadopsi oleh user.

Selain itu ada beberapa kelebihan yang diberikan oleh web 2.0 kepada penggna seperti :

a)

The web as platform

Aplikasi Web 2.0 menggunakan Web sebagai platformnya. Yang dimaksud

dengan platform di sini adalah tempat suatu aplikasi dijalankan. Contoh platform

(91)

yang terkenal seperti Windows, di mana ada aplikasi-aplikasi seperti Microsoft

Office dan Adobe Photoshop. Atau yang saat ini sedang banyak digunakan oleh

masyarakat, seperti platform Android, dimana pengguna

dapat meggunakan berbagai macam aplikasi untuk membantu pekerjaan manusia.

Dengan demikian menggunakan Internet sebagai platform berarti

aplikasi-aplikasi tersebut dijalankan langsung di atas Internet dan bukan di atas satu sistem

operasi tertentu. Contohnya adalah Google yang bisa diakses dari sistem operasi

mana pun. Atau berbagai media social dan game.

Kelebihannya jelas, aplikasi-aplikasi Web 2.0 ini tidak lagi dibatasi sistem

operasi seperti pada Windows an lainnya. Dan kita bahkan tidak perlu menginstall

apapun untuk menggunakan aplikasi-aplikasi tersebut.

b)

Harnessing Collective Intelligence

Aplikasi Web 2.0 memiliki sifat yang unik, yaitu memanfaatkan kepandaian dari

banyak orang secara kolektif. Sebagai hasilnya muncullah basis pengetahuan yang

sangat besar hasil gabungan dari pengetahuan banyak orang. Contoh yang jelas

adalah Wikipedia. Yang menjadi ensiklopedi online besar yang sangat lengkap

artikelnya hal ini dikarenakan Wikipedia memperbolehkan semua orang untuk

membuat dan mengedit artikel yang secara otomatis dapat membentuk jaringan

pengetahuan, mirip seperti sel-sel otak yang saling terkait satu sama lain di dalam

otak manusia.

(92)

Kekuatan aplikasi Web 2.0 terletak pada data. Aplikasi-aplikasi Internet yang

berhasil selalu didukung oleh basis data yang kuat dan unik. Contohnya adalah

Google, yang kekuatannya terletak pada pengumpulan dan manajemen data

halaman-halaman Web di Internet. Dengan demikian web 2.0 dapat memberikan

informasi yg lebih dari generasi terdahulunya karena didukung oleh basis data

yang baik.

d)

End of the software release cycle

Aplikasi yang dimiliki oleh web 2.0 memiliki sifat yang berbeda dengan platform

lainnya seperti Windows yang biasanya suatu aplikasi di dalamnya dirilis setiap

dua atau tiga tahun sekali, semisal Microsoft Office yang memiliki versi 97, 2000,

XP, 2003, 2007, 2010 hingga 2013. Berbeda dengan aplikasi pada web 2.0 yang

selalu melakukan update terus menerus karena sifatnya yang bukan lagi produk

melainkan layanan. Semisal Google yang selalu di-update data dan programnya

tanpa perlu menunggu waktu-waktu tertentu.

e)

RSS & XML

RSS & XML Adalah dukungan dari sebuah program yang sederhana, sehingga

dengan adanya RSS ini akan memudahkan pengguna untuk menikmati informasi

secara cepat dengan cara berlangganan, atau bagi para pelaku web akan mudah

untuk me-remix atau re-post dari website lainnya.

f)

Software above the level of a single device

Aplikasi Web 2.0 bisa berjalan secara terintegrasi melalui berbagai device.

Contohnya adalah iTunes dari Apple yang berjalan secara terintegrasi mulai dari

server Internet (dalam bentuk toko musik online), ke komputer pengguna (dalam

(93)

bentuk program iTunes), sampai ke mobile device (dalam bentuk iPod). Di masa

depan diperkirakan akan makin banyak aplikasi-aplikasi yang memiliki sifat ini.

g)

Lightweight programming models

Aplikasi Web 2.0 menggunakan teknik-teknik pemrograman yang ringan seperti

AJAX dan RSS. Ini memudahkan orang lain untuk memakai ulang layanan suatu

aplikasi Web 2.0 guna membentuk layanan baru. Contohnya adalah Google Maps

yang dengan mudah dapat digunakan orang lain untuk membentuk layanan baru.

Sebagai hasilnya muncullah layanan-layanan seperti HousingMaps yang

menggabungkan layanan Google Maps dengan Craigslist. Layanan seperti ini,

yang menggabungkan layanan dari aplikasi-aplikasi lainnya, dikenal dengan

istilah mashup.

h)

Rich user experiences

Aplikasi Web 2.0 memiliki user interface yang kaya meskipun berjalan di dalam

browser. Teknologi seperti AJAX memungkinkan aplikasi Internet memiliki

waktu respons yang cepat dan user interface yang intuitif mirip seperti aplikasi

Windows yang di-install di komputer kita. Contohnya adalah Gmail, aplikasi

email dari Google yang memiliki user interface revolusioner. Contoh lainnya lagi

adalah Google Maps yang meskipun berjalan dalam browser namun bisa

memberikan respons yang cepat saat pengguna menjelajahi peta.

Dengan beberapa kelebihan yang ada pada web 2.0 memungkinkan

pengguna internet dapat melihat konten suatu website tanpa harus berkunjung ke

alamat situs yang bersangkutan. Selain itu, kemampuan Web 2.0 dalam

(94)

melakukan aktivitas drag and drop, auto complete, chat, dan voice seperti

layaknya aplikasi desktop, bahkan berlaku seperti sistem operasi, dengan

menggunakan dukungan AJAX atau berbagai plug-in

(API) yang ada di internet.

Hal tersebut akan merubah paradigma pengembang sofware dari distribusi produk

menjadi distribusi layanan. Tetapi aplikasi Web 2.0 disajikan secara penuh dalam

suatu web browser tanpa membutuhkan teknologi perangkat yang canggih dari

sisi user. Tidak mengherankan bila suatu aplikasi (software) dapat diakses secara

online tanpa harus menginstalnya terlebih dahulu. Karena aplikasi pada web 2.0

sifatnya bukan produk melainkan layanan.

3)

Web 3.0

Teknologi Web generasi ketiga yang pertama kali diperkenalkan tahun 2001 ini memiliki

ciri-ciri umum seperti suggest, happen dan provide, dimana disini web seolah-olah sudah

seperti kehidupan di alam nyata.

Web 3.0 sendiri juga merupakan sebuah realisasi dari pengembangan sistem

kecerdasan buatan (artificial intelegence) untuk menciptakan global meta data yang dapat

dimengerti oleh sistem, sehingga sistem dapat mengartikan kembali data tersebut kepada

pengunjung dengan baik.

Dalam era web 3.0, pengembangan aspek sosial sebuah web mulai

dipertimbangkan. Aspek sosial yang dimaksud, terutama adalah aspek interaksi.

Bagaimana sebuah web dapat memberikan sebuah interaksi sesuai dengan kebutuhan

informasi setiap pemakaianya, merupakan sebuah tantangan utama dikembangkannya

(95)

versi Web 3.0 ini. Walaupun hanya bersifat virtual 3D, namun ternyata banyak yang

mengharapkan perkembangan teknologi web ini dapat memenuhi kebutuhan setiap

bidang informasi, bahkan setiap orang yang mengunjunginya. Tetapi teknologi pada

generasi web 3.0 masih pada masa pengembangan.

Disamping perkembangan web 1.0 hingga 3.0 ada pekembangan yang

mengiringinya yaitu Web Science dan Web Semantic.

a)

Web scince

Web Science merupakan kajian sains dari Web yang lahir dari desentralisasi

sistem Informasi. Pada Web Science membutuhkan pemahaman akan Web dan

juga fokus pada pengembangan terhadap kebutuhan komunikasi dan representasi.

.Web science dipercaya banyak orang seperti pimpinan bisnis, pengusaha dan

pembuat polis dari seluruh dunia. Kelahiran Web Science

didorong oleh

pergerakan generasi Web dari Web 1.0 ke Web 3.0.

Dengan adanya web science kita tidak mengenal lagi belajar dengan

batasan tempat dan waktu, kita dapat berkomunikasi dengan para kompeten

kapanpun dan dimanapun tanpa bertatap muka secara langsung. Kita dapat

mendapatkan informasi dibidang IPTEK dengan langsung melakukan percakapan

dengan para ahli.

b)

Web semantic

Pengertian Semantic Web (Web Semantik) atau Definisi Semantic Web adalah

pengembangan dari World Wide Web di mana makna semantik dari informasi di

web didefinisikan, sehingga memungkinkan mesin untuk memprosesnya.

(96)

Semantic Web berasal dari World Wide Web Konsorsium dari Web sebagai

media universal data, informasi, dan pertukaran pengetahuan.

Istilah Web Semantik itu sendiri diperkenalkan oleh Tim Berners-Lee,

penemu World Wide Web. Sekarang, prinsip web semantik disebut-sebut akan

muncul pada Web 3.0, generasi ketiga dari World Wide Web. Bahkan Web 3.0 itu

sendiri sering disamakan dengan Web Semantik. Web Semantik menggunakan

XML, XMLS (XML Schema), RDF, RDFS (Resources Description Framework

Schema) dan OWL.

Web Semantik merujuk kepada kemampuan aplikasi komputer untuk lebih

memahami bahasa manusia, bukan hanya bahasa yang baku dari para

penggunanya tetapi juga bahasa yang lebih kompleks, seperti dalam bahasa

percakapan sehingga memudahkan penggunanya untuk berkomunikasi dengan

mesin. Web Semantik dapat mengolah bahasa dan mengenali homonim, sinonim,

atau atribut yang berbeda pada suatu database.

2.4 Database MySQL

Database

adalah suatu kumpulan data-data yang disusun sedemikian rupa sehingga membentuk

informasi yang sangat berguna.

Database

terbentuk dari sekelompok data-data yang memiliki

jenis/sifat yang sama. Ambil contoh, data-data berupa nama-nama, kelas-kelas, alamat-alamat.

Semua data tersebut dikumpulkan menjadi satu menjadi kelompok data baru, sebut saja sebagai

data-data mahasiswa.

(97)

Demikian juga, kumpulan dari data-data mahasiswa, data-data dosen, data-data keuangan

dan lainnya dapat dikumpulkan lagi menjadi kelompok besar, misalkan data-data politeknik

elektronika. Bahkan dalam perkembangannya, data-data tersebut dapat berbentuk berbagai

macam data, misalkan dapat berupa program, lembaran-lembaran untuk

entry

(memasukkan)

data, laporan-laporan. Kesemuanya itu dapat dikumpulkan menjadi satu yang disebut dengan

database. Salah satu bahasa

database

yang populer adalah SQL.

MySQL biasa dibaca

mai-es-ki-el

atau

mai-se-kuel

adalah suatu perangkat lunak

database

relasi (

Relational Database Management System

atau RDBMS) seperti halnya Oracle,

Postgresql, MS SQL dan sebagainya.

SQL atau singkatan dari

Structured Query Language

ialah suatu sintaks perintah-perintah

tertentu atau bahasa pemrograman yang digunakan untuk mengelola suatu

database

. Jadi,

MySQL dan SQL tidaklah sama. Singkatnya, MySQL ialah perangkat lunaknya dan SQL adalah

bahasa perintahnya.

Ketika dibandingkan antara MySQL dengan sistem

database

yang lain, maka perlu

difikirkan apa yang paling penting sesuai kebutuhan. Apakah tampilan,

support

, fitur-fitur SQL,

kondisi keamanan dalam lisensi, atau masalah harga. Dengan pertimbangan tersebut, MySQL

memiliki banyak hal yang bisa ditawarkan, antara lain :

1. Berdasarkan kecepatannya, banyak ahli memberikan pendapat bahwa MySQL merupakan

(98)

2. MySQL memiliki performa tinggi namun merupakan

database

yang simpel sehingga mudah

di-

setup

dan dikonfigurasi.

3. MySQL cenderung gratis untuk penggunaan tertentu.

4. MySQL mengerti bahasa SQL (

Structured Query Language

) yang merupakan pilihan sistem

database

moderen.

5. Banyak klien dapat mengakses

server

dalam satu waktu. Mereka dapat menggunakan banyak

database

secara simultan.

6. Database

MySQL dapat diakses dari semua tempat di internet dengan hak akses tertentu.

7. MySQL dapat berjalan dalam banyak varian Unix dengan baik, sebaik seperti saat berjalan di

sistem non-Unix.

8. MySQL mudah didapatkan dan memiliki

source code

yang boleh disebarluaskan sehingga

bisa dikembangkan lebih lanjut.

9. Dapat dikoneksikan pada bahasa C, C++, Java, Perl, PHP dan Python.

Jika hal-hal diatas ialah kelebihan yang dimiliki oleh MySQL, maka MySQL juga

memiliki kekurangan seperti :

1. Untuk koneksi ke bahasa pemrograman visual seperti visual basic, delphi, dan foxpro,

MySQL kurang mendukung. Karena koneksi ini menyebabkan

field

yang dibaca harus sesuai

(99)

dengan koneksi dari program visual tersebut. Dan ini yang menyebabkan MySQL jarang

dipakai dalam program visual.

2. Data yang ditangani belum begitu besar.

2.5 IDE

IDE (

Integrated Development Environment

) adalah

program komputer

yang memiliki beberapa

fasilitas yang diperlukan dalam pembangunan

perangkat lunak

. Tujuan dari IDE adalah untuk

menyediakan semua utilitas yang diperlukan dalam membangun perangkat lunak.

Sebuah IDE, atau secara bebas dapat diterjemahkan sebagai Lingkungan Pengembangan

Terpadu, setidaknya memiliki fasilitas:



Editor

, yaitu fasilitas untuk menuliskan kode sumber dari perangkat lunak.



Compiler

, yaitu fasilitas untuk mengecek sintaks dari kode sumber kemudian mengubah

dalam bentuk binari yang sesuai dengan bahasa mesin.



Linker

, yaitu fasilitas untuk menyatukan data binari yang beberapa kode sumber yang

dihasilkan

compiler

sehingga data-data binari tersebut menjadi satu kesatuan dan menjadi

suatu program komputer yang siap dieksekusi.



Debuger

, yaitu fasilitas untuk mengetes jalannya program, untuk mencari

bug

/kesalahan

yang terdapat dalam program.

Sampai tahap tertentu IDE modern dapat membantu memberikan saran yang

mempercepat penulisan. Pada saat penulisan kode, IDE juga dapat menunjukan bagian-bagian

yang jelas mengandung kesalahan atau keraguan.

(100)

2.6 Google Maps API

Google Maps API adalah fungsi fungsi pemrograman yang disediakan oleh Google Maps agar

Google Maps bisa di integrasikan kedalam Web atau aplikasi yang sedang buat. Contoh

sederhanya misalkan anda ingin membuat Sistem informasi Geografis kampus di jogja, dengan

memanfaatkan Google Maps API anda bisa membuat GIS tanpa perlu memikirkan Peta Jogja,

anda tinggal pake Google Maps dan memanggil fungsi fungsi yang dibutuhkan seperti

menampilkan peta, menempatkan marker dan sabagainya.

Google Maps API sendiri menyediakan fungsi yang sangat banyak, berikut ini adalah

pembagiannya:

1. Google Maps Javascript API V3

2. Google Maps API Webservice

3. Google Place API

2.7 XAMPP Control Panel

XAMPP merupakan

tool

yang menyediakan paket perangkat lunak ke dalam satu buah paket.

Dengan menginstall XAMPP maka tidak perlu lagi melakukan instalasi dan konfigurasi

web

server

Apache, PHP dan MySQL secara manual. XAMPP akan menginstalasi dan

mengkonfigurasikannya secara otomatis untuk anda atau auto konfigurasi. Anda bisa

(1)

6. Kedua orang tua saya, Zulhelmi Ar dan Irma F Nasution yang senantiasa mendukung dan terus membimbing penulis serta memberi bantuan moril maupun material sehingga Tugas Akhir ini dapat terselesaikan dengan baik.

Akhir kata, semoga Tugas Akhir ini dapat memberi manfaat dan menambah wawasan maupun pengetahuan kita.

(2)

SISTEM INFORMASI GEOGRAFIS PENYEBARAN WISATA DI KOTA MEDAN MENGGUNAKAN GOOGLE MAPS API BERBASIS WEB MOBILE

ABSTRAK

Kota Medan merupakan kota metropolitan yang selalu menjadi objek wisata bagi para wisatawan ataupun penduduk di kota medan. Masalah ini muncul ketika banyaknya objek wisata di kota Medan akan tetapi kurang informasi yang secara terperinci mengenai objek wisata tersebut. Ada pun beberapa pihak yang membuat hal yang sama saya buat tetapi tidak terfokus akan kota Medan, website ini dikembangkan di komputer dan handphone diharapkan dapat meningkatkan perwisataan kota medan dan minat bagi wisatawan ataupun penduduk di kota Medan untuk tertarik untuk mengunjungi objek wisata di kota Medan.

(3)

DAFTAR ISI

... Halaman

Persetujuan ... i

Pernyataan ... ii

Penghargaan ... iii

Abstrak ... iv

Daftar Isi ...v

Daftar Tabel ... vii

Daftar Gambar ... viii

Bab 1. Pendahuluan ... 1.1 Latar Belakang ...1

1.2 Perumusan Masalah ...3

1.3 Batasan Masalah ...3

1.4 Tinjauan Penelitian ...4

1.5 Manfaat Penelitian ...4

1.6 Metodologi Penelitian ...5

1.7 Sistematika Penulisan ...6

Bab 2. Landasan Teori ... 2.1 Sekilas Website ...8

2.2 Pemrograman Web...8

2.3 Perkembangan Website ...10

2.4 Database MySQL ...18

2.5 IDE ...21

2.6 Google Maps API ...22

2.7 XAMPP Control Panel ...23

2.8 PHP: Hypertext Preprocessor ...23

2.9 PHP dan Mysql Sebagai Web Service ...24

2.10 Flowchart ...24

(4)

2.12 Entity Relationship Diagram...28

Bab 3. Perancangan Sistem ... 3.1 Pengertian Perancangan Sistem ...30

3.2 Flowchart Program...31

3.3 Diagram Konteks Sistem ...33

3.4 Diagram Nol Sistem ...33

3.5 Diagram Rinci Proses 1: Input Data ...35

3.6 Diagram Rinci Proses 2: Edit dan Hapus Data ...35

3.7 Diagram Rinci Proses 3: Lihat Data ...37

3.8 Entity Relationship Diagram ...38

Bab 4. Implementasi Sistem ... 4.1 Pengertian Implementasi Sistem ...39

4.2 Tujuan Implementasi Sistem...39

4.3 Komponen Utama dalam Implementasi Sistem ...40

4.3.1 Perangkat Keras ...40

4.3.2 Perangkat Lunak ...40

4.3.3 Brainware ...41

4.4 Demonstrasi Program...41

4.4.1 Tampilan Home,Place dan About ...42

4.4.2 Tampilan Login ...45

4.4.3 Tampilan Menu Admin ...45

4.4.4 Tampilan Menu Input Data dan Data Admin ...46

4.4.5 Tampilan Data Admin...48

Bab 5. Penutup ... 5.1 Kesimpulan ...49

5.2 Saran ...50

(5)

DAFTAR TABEL

Nama Tabel ... Halaman 2.1 Simbol Flowchart ...25 2.2 Simbol Data Flow Diagram ...28 2.3 Komponen ERD ...29

(6)

DAFTAR GAMBAR

Nama Gambar ... Halaman

3.1 Flowchart Program Untuk User ...31

3.2 Flowchart Program Untuk Admin ...32

3.3 Diagram Konteks Sistem ...33

3.4 Diagram Nol Sistem ...33

3.5 Diagram Rinci Proses 1: Input Data ...35

3.6 Diagram Rinci Proses 2: Edit dan Hapus Data ...36

3.7 Diagram Rinci Proses 3: Lihat Data ...37

3.8 ERD Sistem ...38

4.1 Tampilan Home Dekstop (PC) ...42

4.2 Tampilan Home mobile ...43

4.3 Tampilan Place mobile ...43

4.4 Tampilan About mobile ...44

4.5 Tampilan View Data mobile ...44

4.6 Tampilan Login ...45

4.7 Tampilan Menu ...46

4.8 Tampilan Menu Input Data Wisata ...47

4.9 Tampilan Menu Input Data Admin ...47