Sistem Informasi Pemetaan Desa di Kecamatan Dolok Masihul Berbasis Sistem Informasi Geografis
LAMPIRAN PROGRAM
1. Admin add.php
<?php
if (isset($_POST['add'])) { $id = $_POST['id']; $nama = $_POST['nama'];
$jumlah_penduduk = $_POST['jumlah_penduduk']; $mata_pencaharian = $_POST['mata_pencaharian']; $pendidikan = $_POST['pendidikan'];
$suku = $_POST['suku'];
$kesehatan = $_POST['kesehatan']; $kemiskinan = $_POST['kemiskinan']; $keterangan = $_POST['keterangan']; $lattitude = $_POST['lattitude']; $longitude = $_POST['longitude'];
$query_desa = mysqli_query($conn, "INSERT INTO desa(nama, jumlah_penduduk, mata_pencaharian, pendidikan, suku,
kesehatan, kemiskinan) VAlUES('$nama', $jumlah_penduduk, '$mata_pencaharian', '$pendidikan', '$suku', '$kesehatan', '$kemiskinan')");
$query_lat = mysqli_query($conn, "INSERT INTO
tbl_map(keterangan, lat, lng, title, id) VALUES('$keterangan', $lattitude, $longitude, '$nama', $id)");
if ($query_desa AND $query_lat) { ?>
<script>
alert("Data berhasil ditambah!");
window.location.href = "index.php?desa"; </script>
<?php } else {
?>
<script>
alert("Error.. <?php echo mysqli_error($conn); ?>")
</script> <?php
(2)
} ?>
<div class="add" style="width: 100%; background: #2e8b57;"> <form action="" method="post">
<table style="width: 50%; margin: auto"> <tr> <td>Id</td><td><input type="text" required name="id"></td> </tr> <tr> <td>Nama</td><td><input type="text" required name="nama"></td> </tr> <tr> <td>Jumlah Penduduk</td><td><input required type="text" name="jumlah_penduduk"></td>
</tr> <tr>
<td>Mata Pencaharian</td><td><input required type="text" name="mata_pencaharian"></td>
</tr> <tr> <td>Pendidikan</td><td><input required type="text" name="pendidikan"></td> </tr> <tr> <td>Suku</td><td><input type="text" required name="suku"></td> </tr> <tr> <td>Kesehatan</td><td><input type="text" required name="kesehatan"></td> </tr> <tr> <td>Kemiskinan</td><td><input type="text" required name="kemiskinan"></td>
</tr> <tr>
<td>Keterangan</td><td><input type="text" required name="keterangan"></td>
</tr> <tr> <td>Lattitude</td><td><input type="text" required name="lattitude"></td> </tr> <tr> <td>Longitude</td><td><input type="text" required name="longitude"></td> </tr>
(3)
<tr>
<td colspan="2"><input type="submit" name="add" value="Add"></td>
</tr> </table> </form>
</div>
Delete.php
<?php
include '../koneksi.php'; if (isset($_GET['nama'])) {
$nama = $_GET['nama'];
$query = mysqli_query($conn, "DELETE FROM desa WHERE nama='$nama'");
if ($query) { ?>
<script>
alert("Data berhasil dihapus!");
window.location.href = "index.php?desa"; </script>
<?php }
}
desa.php
<div id="desa">
<table style="height: 500px; overflow-y: scroll;"> <tr>
<th>Nama</th>
<th>Jumlah Penduduk</th> <th>Mata Pencaharian</th> <th>Pendidikan</th>
<th>Suku</th> <th>Kesehatan</th> <th>Kemiskinan</th>
(4)
<th colspan="2">Aksi</th> </tr>
<?php
$query = mysqli_query($conn, "SELECT * FROM desa"); while($row = mysqli_fetch_array($query)) {
?> <tr>
<td><?php echo $row[0]; ?></td> <td><?php echo $row[1]; ?></td> <td><?php echo $row[2]; ?></td> <td><?php echo $row[3]; ?></td> <td><?php echo $row[4]; ?></td> <td><?php echo $row[5]; ?></td> <td><?php echo $row[6]; ?></td>
<td><a href="edit.php?nama=<?php echo $row[0]; ?>">Edit</td>
<td><a href="delete.php?nama=<?php echo $row[0]; ?>">Delete</td>
</tr> <?php }
?>
</table> </div>
edit.php
<?php
include '../koneksi.php'; if (isset($_GET['nama'])) {
$nama_u = $_GET['nama'];
$query = mysqli_query($conn, "SELECT * FROM desa WHERE nama='$nama_u'");
$row = mysqli_fetch_array($query); }
if (isset($_POST['update'])) { $nama = $_POST['nama'];
(5)
$mata_pencaharian = $_POST['mata_pencaharian']; $jumlah_penduduk = $_POST['jumlah_penduduk']; $pendidikan = $_POST['pendidikan'];
$suku = $_POST['suku'];
$kesehatan = $_POST['kesehatan']; $kemiskinan = $_POST['kemiskinan'];
$query2 = mysqli_query($conn, "UPDATE desa set nama='$nama', mata_pencaharian='$mata_pencaharian',
jumlah_penduduk='$jumlah_penduduk', pendidikan='$pendidikan', kesehatan='$kesehatan', kemiskinan='$kemiskinan' WHERE
nama='$nama_u'");
if ($query2) {
header("Location: index.php?desa"); exit();
} else {
echo "Error..." . mysqli_error($conn); }
} ?>
<form action="" method="post"> <table>
<tr>
<td>Nama</td><td><input type="text" name="nama" value="<?php echo $row['0'] ?>"></td>
</tr> <tr>
<td>Jumlah Penduduk</td><td><input type="text"
name="jumlah_penduduk" value="<?php echo $row['1'] ?>"></td> </tr>
<tr>
<td>Mata Pencaharian</td><td><input type="text"
name="mata_pencaharian" value="<?php echo $row['2'] ?>"></td> </tr>
<tr>
<td>Pendidikan</td><td><input type="text" name="pendidikan" value="<?php echo $row['3'] ?>"></td>
</tr> <tr>
<td>Suku</td><td><input type="text" name="suku" value="<?php echo $row['4'] ?>"></td>
</tr> <tr>
<td>Kesehatan</td><td><input type="text" name="kesehatan" value="<?php echo $row['5'] ?>"></td>
(6)
<tr>
<td>Kemiskinan</td><td><input type="text" name="kemiskinan" value="<?php echo $row['6'] ?>"></td>
</tr> <tr>
<td><input type="submit" name="update" value="Update"></td> </tr>
</table> </form>
home.php
<div class="content">
<div id="keterangan"> <p>
<br>
Sistem Informasi ini dibuat dengan tujuan agar masyarakat dapat lebih mudah mendapatkan informasi - informasi penting yang ada di masing - masing desa seperti : </br>
<br>1. Jumlah Penduduk</br> <br>2. Mata Pencaharian</br> <br>3. Pendidikan</br>
<br>4. Suku</br> <br>5. Kesehatan</br> <br>6. Kemiskinan</br>
<br>Dengan Sistem Informasi ini, masyarakat tidak perlu lagi pergi jauh kesetiap desa jika sedang mencari suatu informasi umum dari desa tersebut, karena dalam sistem ini sudah di sediakan informasi - informasi umum seluruh desa yang ada di Kecamatan Dolok Masihul.</br>
<br>Sistem ini dapat digunakan oleh semua masyarakat karena ini bersifat universal.</br>
</p> <br></br> </div>
</div>
index.php
(7)
<html> <head>
<title>ADMIN</title>
<link rel="stylesheet" href="css/style.css"> <script src="../js/jquery.js"></script>
<link rel="SHORTCUT ICON" href="../img/icon.jpg" /> </head> <body> <div class="container"> <div id="header"> <h1>Selamat Datang</h1> </div> <div id="content"> <div id="aside"> <ul> <li><a href="index.php?home">Beranda</a></li> <li><a href="index.php?desa">Desa</a></li> <li><a href="index.php?add">Tambah</a></li> <li><a href="../logout.php">Keluar</a></li> </ul> </div> <div id="section"> <div id="section-content"> <?php
if (isset($_GET['home'])) { include 'home.php'; }
if (isset($_GET['desa'])) { include 'desa.php'; }
if (isset($_GET['add'])) { include 'add.php'; } ?> </div> </div> </div> <div id="footer"> <table> <tr> <td>Email</td><td>citramelisa33@gmail.com</td> </tr>
(8)
<tr> <td>No. HP</td><td>085360599769</td> </tr> <tr> <td>Nama</td><td>Citra Melisa Tamba</td> </tr> </table>
<p>© <?php echo date("Y"); ?> tugasakhirku.com | All Right Reserved</p>
</div> </div> </body> </html> style.css * { padding: 0; margin: 0; } body { background: #2e8b57; } #header { width: 100%; height: 150px; background: #2e8b57; }
#header h1 {
color: white;
text-align: center;
text-shadow: 3px 3px 5px #171717; font: 5em 'Lucida';
line-height: 150px; } #content { width: 100%; } #aside { width: 20%; float: left; box-sizing: border-box; min-height: 500px;
(9)
padding: 15px; }
#aside ul {
list-style: none; }
#aside ul li { }
#aside ul li a { display: block; padding: 15px;
text-decoration: none; background: #171717; color: white;
font: 1.2em lucida; } #section { width: 80%; float: right; box-sizing: border-box; padding: 15px; min-height: 500px; } #desa { width: 100%; height: 500px; overflow-y: scroll; }
#section .content { background: #fffacd;
min-height: 500px; padding: 15px; }
#section .content h3 { padding: 15px; text-align: center;
border-bottom: 1px solid black; }
#section .content p { padding: 15px 0; }
#section #keterangan { margin-top: 15px; }
#section #map { width: 100%; height: 500px;
(10)
}
#section #keterangan p { text-align: justify; font-family : 'Lucida'; }
#section table {
border: 1px solid #ccc; height: 500px;
overflow-y: scroll; }
#section table td input { padding: 10px;
background: linear-gradient(#ccc, #f3f3f3); width: 100%;
}
#section table td textarea { max-width: 277px;
max-height: 60px; }
#section table th { padding: 15px;
background: #171717; color: white;
border: 1px solid white; }
#section table td { padding: 10px;
border: 1px solid white; color: white;
font: 1.2em 'Agency Fb'; }
#section table td:nth-child(2) { width: 30px!important; }
#section table tr:nth-child(odd) { background: #dcdcdc;
}
#section table tr:nth-child(even) { background: #808080;
}
#section table tr:nth-child(odd) td { color: black!important;
}
#section table tr:last-child td { width: 50%;
}
#section table tr:nth-child(even) a { text-decoration: none;
(11)
}
#section table tr:nth-child(odd) a { text-decoration: none;
color: black; }
#section table input[type="submit"] { width: 50%;
padding: 15px 0; margin-left: 25%; } #footer { clear: both; width: 100%; padding: 15px; background: #2e8b57;; box-sizing: border-box; }
#footer p {
text-align: center;
font-family : 'Harrington'; margin-top: 15px;
color: white; }
#footer table { width: 200px; margin-top: 15px; margin: auto;
border: 1px solid black; border-radius: 15px; background: #fffacd; }
#footer table td { color: black; padding: 10px; font-family: 'Harrington'; } 2. Style.php * { padding: 0;
(12)
margin: 0; } body { width: 100%; } .col {
background: url("../img/back.jpg") no-repeat fixed; } .container { width: 1000px; margin: auto; } #header { width: 100%; box-sizing: border-box; height: 150px; position: relative; border: 1px solid #ccc; }
#header #logo {
position: absolute; }
#header #logo img { width: 150px; height: 150px; }
#header #gambar img { width: 850px; height: 150px; }
#header #gambar {
position: absolute; left: 150px;
}
#header h3 {
text-align: center; color: white; } #nav { width: 100%; height: 50px; background: #008B8B; }
#nav ul {
list-style: none; }
#nav ul li { float: left;
(13)
}
#nav ul li a { display: block; padding: 15px; background:#008B8B; color: white; text-decoration: none; font-size: 1.2em;
font-family: 'Agency Fb'; width: 150px;
text-align: center;
transition: all ease .5s; color: #f3f3f3;
}
#nav ul li a:hover { background: #40E0D0; }
#nav > ul > li {
position: relative; }
#nav > ul > li > ul { position: absolute; z-index: 3;
display: none; margin-top: -5px; }
#nav > ul > li > ul > li { float: none;
}
#nav > ul > li:hover > ul { display: block; } #section { margin-top: 15px; width: 100%; box-sizing: border-box; padding: 15px; min-height: 400px; background: #f3f3f3; }
#section #profil p { text-align: justify;
font-family: 'Comic Sans MS'; }
#section #keterangan { margin-top: 15px; }
(14)
#section #map { width: 100%; height: 500px; }
#section #keterangan p { text-align: justify;
font-family : 'Comic Sans MS'; } #footer { clear: both; width: 100%; padding: 15px; box-sizing: border-box; heigth: 250px; position: relative; }
#footer .gambar {
position: absolute; left: 170px;
top: 15px; }
#footer .gambar img { width: 150px; }
#footer p {
text-align: center;
font-family : 'Harrington'; margin-bottom: 15px;
color: white; }
#footer table { width: 200px; margin: auto;
border: 1px solid black; border-radius: 15px; background: #40E0D0; margin-bottom: 15px; }
#footer table td { color: black; padding: 10px;
font-family: 'Harrington'; }
/* LOGIN */ .login {
width: 400px; margin: auto;
(15)
background: #2f4f4f; position: absolute; top: 50%; left: 50%; margin-left: -200px; margin-top: -200px; padding: 15px; box-sizing: border-box; height: 350px;
box-shadow: 3px 3px 3px #171717, -3px -3px 3px #696969; }
.login input { padding: 10px;
background: linear-gradient(#ccc, #f3f3f3); margin: 15px 0;
}
.login .header-login { width: 100%;
padding: 15px 0; }
.login .header-login h1 { text-align: center; color: #bdb76b;
font: 2em 'Agency Fb'; }
.login td { width: 100%; margin: 30px;
font: 1.3em 'Agency Fb'; }
.login table { width: 100%; }
.login input[type=submit] { cursor: pointer;
background: orange; color: white;
font: 1.3em 'Agency Fb'; width: 50%;
margin-left: 25%;
transition: all ease 1s; }
.login input[type=submit]:hover { color: orange;
background: white;
border: 1px solid orange; }
(16)
color: white; }
3. Data.php
<?php
$conn = mysqli_connect("localhost", "root", "", "tugasakhir");
$desa = $_POST['desa'];
$query = mysqli_query($conn, "SELECT * FROM desa WHERE nama='$desa'");
if ($query) {
$row = mysqli_fetch_array($query); ?>
<div id="data-table">
<table style="border: 1px solid #ccc;"> <tr>
<td>Nama</td><td>:</td><td><?php echo $row[0]; ?></td>
</tr> <tr>
<td>Jumlah Penduduk</td><td>:</td><td><?php echo $row[1]; ?></td>
</tr> <tr>
<td>Mata Pencaharian</td><td>:</td><td><?php echo $row[2]; ?></td>
</tr> <tr> <td>Pendidikan</td><td>:</td><td><?php echo $row[3]; ?></td> </tr> <tr>
<td>Suku</td><td>:</td><td><?php echo $row[4]; ?></td> </tr> <tr> <td>Kesehatan</td><td>:</td><td><?php echo $row[5]; ?></td> </tr> <tr> <td>Kemiskinan</td><td>:</td><td><?php echo $row[6]; ?></td>
(17)
</tr> </table> </div>
<?php } else {
echo "Error.. " . mysqli_error($conn); }
?>
4. Footer.php
<div id="footer" class="col"> <div class="gambar">
<img src="img/contactus.png"> </div>
<table> <tr>
<td>Email</td><td>citramelisa33@gmail.com</td> </tr>
<tr>
<td>No. HP</td><td>085360599769</td> </tr>
<tr>
<td>Nama</td><td>Citra Melisa Tamba</td> </tr>
</table>
<p>© <?php echo date("Y"); ?> tugasakhirku.com | All Right Reserved</p>
</div>
5. Head.php
<div id="header"> <div id="logo">
(18)
</div> <div id="gambar"> <img src="img/kec.png"> </div> </div> 6. Index.php
<?php include 'koneksi.php'; ?> <html>
<head>
<title>PEMETAAN</title>
<link rel="SHORTCUT ICON" href="img/icon.jpg" /> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script>
<! Insert to your webpage before the </head> -->
<script src="sliderjs/jquery.js"></script>
<script src="sliderjs/amazingslider.js"></script> <link rel="stylesheet" type="text/css"
href="sliderjs/amazingslider-1.css">
<script src="sliderjs/initslider-1.js"></script> <!-- End of head section HTML codes -->
</head>
<body class="col">
<div class="container">
<?php include 'head.php'; ?> <?php include 'nav.php'; ?>
<!-- Insert to your webpage where you want to display the slider -->
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:1000px;margin:0px auto 56px;">
<div id="amazingslider-1"
style="display:block;position:relative;margin:0 auto;"> <ul class="amazingslider-slides"
style="display:none;">
<li><img src="sliderimg/1.jpg" alt="1" title="1" />
</li>
<li><img src="sliderimg/2.jpg" alt="2" title="2" />
</li>
<li><img src="sliderimg/3.jpg" alt="3" title="3" />
(19)
<li><img src="sliderimg/4.jpg" alt="4" title="4" />
</li>
<li><img src="sliderimg/5.jpg" alt="5" title="5" />
</li>
<li><img src="sliderimg/6.jpg" alt="6" title="6" />
</li> </ul>
<ul class="amazingslider-thumbnails" style="display:none;">
<li><img src="sliderimg/1-tn.jpg" alt="1" title="1" /></li>
<li><img src="sliderimg/2-tn.jpg" alt="2" title="2" /></li>
<li><img src="sliderimg/3-tn.jpg" alt="3" title="3" /></li>
<li><img src="sliderimg/4-tn.jpg" alt="4" title="4" /></li>
<li><img src="sliderimg/5-tn.jpg" alt="5" title="5" /></li>
<li><img src="sliderimg/6-tn.jpg" alt="6" title="6" /></li>
</ul> </div> </div>
<!-- End of body section HTML codes --> <div id="section">
<div id="keterangan"> <p>
<br>
Sistem Informasi ini dibuat dengan tujuan agar masyarakat dapat lebih mudah mendapatkan
informasi - informasi penting yang ada di masing - masing desa seperti : </br>
<br>1. Jumlah Penduduk</br> <br>2. Mata Pencaharian</br> <br>3. Pendidikan</br>
<br>4. Suku</br> <br>5. Kesehatan</br> <br>6. Kemiskinan</br>
<br>Dengan Sistem Informasi ini, masyarakat tidak perlu lagi pergi jauh kesetiap desa jika sedang mencari suatu informasi umum dari desa tersebut, karena dalam sistem ini sudah di sediakan informasi - informasi umum seluruh desa yang ada di Kecamatan Dolok Masihul.</br>
(20)
<br>Sistem ini dapat digunakan oleh semua masyarakat karena ini bersifat universal.</br>
</p> <br></br> </div>
</div>
<?php include 'footer.php'; ?> </div>
</body> </html>
7. Koneksi.php
<?php
session_start();
$conn = mysqli_connect("localhost", "root", "", "tugasakhir");
if (!$conn) {
echo "Error..." . mysqli_error($conn); }
8. Login.php
<?php
include 'koneksi.php';
if (isset($_SESSION['username'])) { header("Location: index.php"); exit();
}
if (isset($_POST['submit'])) { $username = $_POST['username']; $password = md5($_POST['password']);
$query = mysqli_query($conn, "SELECT * FROM admin WHERE username='$username' AND password='$password'");
if (mysqli_num_rows($query)) {
$_SESSION['username'] = $username;
header("Location: admin/index.php?home"); exit();
(21)
echo "Error..." . mysqli_error($conn); } } ?> <html> <head> <title>Login</title>
<link rel="SHORTCUT ICON" href="img/icon.jpg" /> <link rel="stylesheet" href="css/style.css" /> </head> <body> <div class="login"> <div class="header-login"> <h1>Login Admin</h3> </div>
<form action="" method="post"> <table> <tr> <td><label for="username">Username</label></td><td><input type="text" id="username" name="username"></td> </tr> <tr> <td><label for="password">Password</label></td><td><input type="password" id="password" name="password"></td>
</tr>
<tr>
<td colspan="2"><input type="submit" name="submit" value="Login"></td> </tr> </table> </form> </div> </body> </html> 9. Logout.php <?php include 'koneksi.php'; session_destroy(); header("Location: index.php"); ?>
(22)
10. Map.php <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> html, body{ width: 100%; height: 100%; padding:0%; margin:0%; } #map{ width: 100%; height: 100%; } #data-table { width: 600px; min-height: 500px; }
#data-table table {
border: 1px solid #ccc; width: 600px;
margin: auto; }
#data-table td:nth-child(odd) { background: #e6e6fa;
color: #8b0000; }
#data-table td:nth-child(even) { background: #e6e6fa;
color: white; }
#data-table td { padding: 15px; color: white; } </style> </head> <body>
<div id="data" style="display: none;"></div> <div id="map"></div>
<script type="text/javascript" src="jquery.js"></script>
(23)
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDCPl Luij0Z6BbXIWoIgAIQ42BNBQHv13s&callback=initMap"
type="text/javascript"></script> <script type="text/javascript">
var lokasi = {lat: 3.336463, lng: 99.018283}; var tanda = [];
function initMap() { var map = new
google.maps.Map(document.getElementById('map'), { zoom: 13,
center: lokasi });
$.getJSON('proses.php', function (data) { $.each(data, function (i, call) {
tanda[i] = new google.maps.Marker({ position: new google.maps.LatLng(call.lat, call.lng), map: map, html: call.keterangan, id: i, title: call.title, }); tanda[i].addListener('click', function () {
var c; $.ajax({
method: "post", url: "data.php",
data: { desa: call.title}, success: function(data) { $("#data").html(data); c = data;
},
async: false });
ket = $("#data").html(); iw = new
google.maps.InfoWindow({ id: this.id, content: c, position: this.getPosition() }); iw.open(map);
(24)
}); }); }); }
</script> </body>
</html>
11. Nav.php
<div id="nav"> <ul>
<li><a href="index.php">Home</a></li> <li><a href="profil.php">Profil</a></li> <li><a href="peta.php">Peta</a></li> <?php
if (isset($_SESSION['username'])) { ?>
<li><a href=""><?php echo $_SESSION['username']; ?></a>
<ul>
<li><a
href="logout.php">Logout</a></li> </ul>
</li> <?php } else { ?>
<li><a href="login.php">Login</a></li> <?php
} ?> </ul> </div>
(25)
12. Peta.php
<?php include 'koneksi.php'; ?> <html>
<head>
<title>PEMETAAN</title>
<link rel="SHORTCUT ICON" href="img/icon.jpg" /> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script>
<!-- Insert to your webpage before the </head> --> <script src="js/jquery.js"></script>
<script src="js/amazingslider.js"></script> <link rel="stylesheet" type="text/css" href="js/amazingslider-1.css">
<script src="js/initslider-1.js"></script> <!-- End of head section HTML codes --> </head>
<body class="col">
<div class="container">
<?php include 'head.php'; ?> <?php include 'nav.php'; ?>
<div id="amazingslider-wrapper-1"
style="display:block;position:relative; border: 5px solid #ccc; max-width:1000px;margin:0px auto 0px;">
<div id="amazingslider-1"
style="display:block;position:relative;margin:0 auto;"> <ul class="amazingslider-slides" style="display:none;">
<li><img src="imgslider/gambar.jpg" alt="gambar" title="gambar" />
</li> <li><img
src="imgslider/gambar2.jpg" alt="gambar2" title="gambar2" />
</li> <li><img
src="imgslider/gambar3.jpg" alt="gambar3" title="gambar3" />
</li> <li><img
src="imgslider/gambar4.jpg" alt="gambar4" title="gambar4" />
</li>
<li><img src="imgslider/gedung.jpg" alt="gedung" title="gedung" />
</li> </ul>
(26)
<ul class="amazingslider-thumbnails" style="display:none;">
<li><img src="imgslider/gambar-tn.jpg" alt="gambar" title="gambar" /></li>
<li><img src="imgslider/gambar2-tn.jpg" alt="gambar2" title="gambar2" /></li>
<li><img src="imgslider/gambar3-tn.jpg" alt="gambar3" title="gambar3" /></li>
<li><img src="imgslider/gambar4-tn.jpg" alt="gambar4" title="gambar4" /></li>
<li><img src="imgslider/gedung-tn.jpg" alt="gedung" title="gedung" /></li>
</ul> </div> </div>
<div id="section">
<div id="keterangan">
<?php include 'map.php'; ?> </div>
</div>
<?php include 'footer.php'; ?> </div>
</body> </html>
13. Profil.php
<?php include 'koneksi.php'; ?> <html>
<head>
<title>Profil</title>
<link rel="SHORTCUT ICON" href="img/icon.jpg" /> <link rel="stylesheet" href="css/style.css"> <script src="js/jquery.js"></script> <script> $(document).ready(function() { setInterval({ $("#container-gambar").css("margin-left", "-300px"); }, 3000); }); </script>
(27)
<script src="sliderjs/jquery.js"></script>
<script src="sliderjs/amazingslider.js"></script> <link rel="stylesheet" type="text/css"
href="sliderjs/amazingslider-1.css">
<script src="sliderjs/initslider-1.js"></script> <!-- End of head section HTML codes -->
</head> <body class="col"> <div class="container"> <div id="header"> <div id="logo"> <img src="img/logo1.png"> </div> <div id="gambar"> <img src="img/gedung.jpg"> </div> </div>
<?php include 'nav.php'; ?>
<!-- Insert to your webpage where you want to display the slider -->
<div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:1000px;margin:0px auto 56px;">
<div id="amazingslider-1"
style="display:block;position:relative;margin:0 auto;"> <ul class="amazingslider-slides"
style="display:none;">
<li><img src="sliderimg/1.jpg" alt="1" title="1" />
</li>
<li><img src="sliderimg/2.jpg" alt="2" title="2" />
</li>
<li><img src="sliderimg/3.jpg" alt="3" title="3" />
</li>
<li><img src="sliderimg/4.jpg" alt="4" title="4" />
</li>
<li><img src="sliderimg/5.jpg" alt="5" title="5" />
</li>
<li><img src="sliderimg/6.jpg" alt="6" title="6" />
</li> </ul>
<ul class="amazingslider-thumbnails" style="display:none;">
(28)
<li><img src="sliderimg/1-tn.jpg" alt="1" title="1" /></li>
<li><img src="sliderimg/2-tn.jpg" alt="2" title="2" /></li>
<li><img src="sliderimg/3-tn.jpg" alt="3" title="3" /></li>
<li><img src="sliderimg/4-tn.jpg" alt="4" title="4" /></li>
<li><img src="sliderimg/5-tn.jpg" alt="5" title="5" /></li>
<li><img src="sliderimg/6-tn.jpg" alt="6" title="6" /></li>
</ul> </div> </div>
<!-- End of body section HTML codes --> <div id="section">
<div id="profil">
<p>
<br>Kecamatan Dolok Masihul pada
mulanya pada tahun 1945 s/d 1963 adalah Kewedanaan Bedagai, yang mana kepala Pemerintahannya hanya disebut Asisten Wedana. Setelah Kewedanaan dihapus pada tahun 1963, maka Pemerintah Wilayah Kecamatan Dolok Masihul langsung
dibawahi oleh Bupati KDH-Tk-II Deli Serdang yang mana pada saat ini Kecamatan Dolok Masihul diwilayah Kabupaten
Serdang Bedagai yang baru dimekarkan sesuai dengan Undang - Undang No. 36 Tahun 2003 tentang Pembentukan Kabupaten Samosir dan Kabupaten Serdang Bedagai di Propinsi Sumatera Utara selanjutnya Kecamatan Dolok Masihul dimekarkan
menjadi dua kecamatan yakni : Kecamatan Dolok Masihul dan Kecamatan Serba Jadi sesuai dengan Perda No. 6 Tahun 2006 Tanggal 17 Oktober 2006 tentang perubahan Nomen Klatur Kecamatan Bangun Purba menjadi Kecamatan Silindak dan Kecamatan Galang menjadi Kecamatan Serba Jadi.</br>
<br>
Bahwa berdasarkan Undang - Undang
No. 36 Tahun 2003 Tanggal 18 Desember Tahun 2003 tentang Pembentukan Kabupaten Samosir dan Kabupaten Serdang Bedagai di Provinsi Sumatera Utara, maka terbentuklah Kabupaten Serdang Bedagai sebagai salah satu Daerah Otonom baru dan berpisah dari kabupaten induk Deli Serdang. Kecamatan Dolok Masihul adalah salah satu dari 17 kecamatan yang berada di Kabupaten Serdang Bedagai.</br>
<br>Batas -Batas :</br>
<br>1.Sebelah utara berbatasan
dengan Kecamatan Sei Rampah</br>
<br>2. Sebelah selatan berbatasan
(29)
<br>3. Sebelah timur berbatasan dengan Kecamatan Tebing Tinggi</br>
<br>4. Sebelah barat berbatasan
dengan Kecamatan Serba Jadi dan Kecamatan Bintang Bayu</br>
<br>Wilayah Dolok Masihul sebagian
besar terletak di dataran rendah dan sebagian kecil terletak di dataran tinggi yaitu sekitar 200 M di atas permukaan laut. Ibu Kota Kecamatan Dolok Masihul adalah Kelurahan Pekan Dolok Masihul</br>
<br>Kecamatan Dolok Masihul terdiri
dari 27 (dua puluh tujuh) Desa dan 1 (satu) Kelurahan dengan jumlah penduduk Kecamatan Dolok Masihul Seluruhnya 49.118 jiwa dengan rincian penduduk laki - laki 24.267 jiwa dan penduduk perempuan 24.851 jiwa</br>
<br>
Demikian sekilas sejarah singkat
mengenai Kecamatan Dolok Masihul Kabupaten Serdang Bedagai yang telah melekat sebagai Tanah Bertuah dan Negeri
Beradat.</br>
</p>
</div> </div>
<?php include 'footer.php'; ?> </div>
</body> </html>
14. Proses.php
<?php
include 'koneksi.php';
$query = "SELECT * FROM tbl_map"; $exe = mysqli_query($conn, $query);
while ($row = mysqli_fetch_array($exe)) { $arr[] = $row;
}
echo json_encode($arr); ?>
(30)
KEMENTERIAN RISET, TEKNOLOGI DAN PENDIDIKAN TINGGI
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 : Citra Melisa Tamba
NIM : 132406028
Judul Tugas Akhir : Sistem Informasi Pemetaan Desa Di Kecamatan Dolok Masihul Berbasis Sistem Informasi Geografis. Dosen Pembimbing : Dr. Syahriol Sitorus, S.Si., M.IT
Tanggal Mulai Bimbingan : Tanggal Selesai Bimbingan :
No Tanggal Asisten Bimbingan
Pembahasan Pada Asisten Mengenai, Pada
Bab Paraf Dosen Pembimbing Keterangan 1 2 3 4 5 6 7
*Kartu ini harap dikembalikan ke Program Studi D-3 Teknik Informatika bila bimbingan mahasiswa telah selesai.
Diketahui/Disetujui Oleh,
Program Studi D3 Teknik Informatika FMIPA
Ketua
Dr. Elly Rosmaini, M.Si NIP. 19600520 198503 2 002
Disetujui, Pembimbing
Dr. Syahriol Sitorus, S.Si., M.IT NIP. 19710310 199703 1 004
(31)
SURAT KETERANGAN Hasil Uji Program Tugas Akhir
Yang bertanda tangan dibawah ini, menerangkan bahwa Mahasiswa Tugas Akhir Program Diploma 3 Teknik Informatika :
Nama : Citra Melisa Tamba
Nomor Induk Mahasiswa : 132406028
Program Studi : Diploma 3 Teknik Informatika
Judul Tugas Akhir : Sistem Informasi Pemetaan Desa Di Kecamatan Dolok Masihul Berbasis Sistem Informasi Geografis
Telah melaksanakan Test Program Tugas Akhir Mahasiswa tersebut diatas pada tanggal ………..
Dengan Hasil : Sukses / Gagal
Demikian diterangkan untuk digunakan melengkapi syarat pendaftaran Ujian Meja Hijau Tugas Akhir Mahasiswa bersangkutan di Program Studi D-3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sumatera Utara.
Medan , Juni 2016 Dosen Pembimbing
Dr. Syahriol Sitorus, S.Si., M.IT NIP. 197103101997031004
(32)
DAFTAR PUSTAKA
Chairi, Padlian. 2013. Aplikasi Pemetaan Rumah Sakit Di Kota Medan. [Tugas Akhir]. Medan: Universitas Sumatera Utara.
Darmawan, Arief. 2006. Sekilas tentang Sistem Informasi Geografis (Geographic Information System). http://www.ilmukomputer.org/wp-content/uploads/2006/og/arifdarmawan-gis.zip. [26 juli 2016].
Kadir, Abdul. 2002. Mencakup : HTML, CSS, Javascript dan PHP. Yogyakarta. Andi.
Megawati, Inthan. 2010. Sistem Informasi Geografis Desa Wisata di Kabupaten Sleman. [Skripsi]. Yogyakarta: Program Studi Teknik Informatika UIN Sunan Kalijaga.
Nurmeita, Indah. Pengantar GIS (Geographical Information System). http://www.ilmukomputer.com/artikel/2005. [29 mei 2016].
Prahasta, Eddy. 2009. Sistem Informasi Geografis Konsep - Konsep Dasar, Informatika, Bandung.
Prasetyo, Hary, Daniel, 2003. Sistem Informasi Geografis (SIG) Tata Guna Lahan, Ilmu Komputer.com.
(33)
BAB 3
GAMBARAN UMUM
3.1 Sejarah Singkat Kecamatan Dolok Masihul
Kecamatan Dolok Masihul pada mulanya pada tahun ± 1945 s/d 1963 adalah Kewedanan Bedagai, yang mana kepala pemerintahannya hanya disebut Asisten Wedana, setelah Kewedanan dihapus pada tahun 1963, maka Pemerintah Wilayah Kecamatan Dolok Masihul langsung dibawahi oleh Bupati KDH Tk-II Deli Serdang yang mana pada saat ini Kecamatan Dolok Masihul di wilayah Kabupaten Serdang Bedagai yang baru dimekarkan sesuai dengan Undang - Undang No : 36 Tahun 2003 tentang Pembentukan Kabupaten Samosir dan Kabupaten Serdang Bedagai di Propinsi Sumatera Utara dan selanjutnya Kecamatan Dolok Masihul dimekarkan menjadi dua kecamatan yakni : Kecamatan Dolok Masihul dan Kecamatan Serba Jadi sesuai dengan Perda No. 6 Tahun 2006 tanggal 17 Oktober 2006 tentang perubahan Nomen Klatur Kecamatan Bangun Purba menjadi Kecamatan Silindak dan Kecamatan Galang menjadi Kecamaatan Serba Jadi.
Sejak terbentuknya Pemerintahan dengan Ibu Kota Kecamatan, Kecamatan Dolok Masihul dipimpin oleh Asisten Wedana, Camat Kepala Wilayah silih berganti
(34)
23
1. Ngaliman 1945-1952
2. Osmar Siahaan 1952-1954
3. Abdul Kadir Nst 1955-1960
4. Saiman Sinaga 1960-1964
5. Gailam Sipayung 1964-1965
6. Yahya Silitonga 1965-1974 7. Mozart Hutabarat 1974-1975
8. Karlim Girsang 1975-1980
9. M.D.Taram Sinaga BA 1980-1981 10. Drs. Laut Manurung 1981-1985 11. Drs. M. Lumban Gaol 1985-1991 12. Drs. G.Manuntun Sagala 1991-1995
13. Drs. SJ. Sagala 1995-1999
14. Drs. Agus Salim MR 1999-2000
15. Drs. M. Zein 2000-2002
16. Drs. Suryana Res M.Si 2002-2004
17. Drs. Herianto 2004-2006
18. Drs. Parlin 2006-2008
19. Drs. Fajar Simbolon 2008-2011
20. Drs. Dimas Kurnianto 2011 s/d Juli 2014 21. Drs. Ramadhan 2014 s/d saat ini
(35)
24
3.2 Letak dan Geografis Kecamatan Dolok Masihul
Kecamatan Dolok Masihul adalah salah satu dari tujuh belas kecamatan yang berada di Kabupaten Serdang Bedagai dengan batas - batas sebagai berikut :
Batas - Batas :
1. Sebelah Utara berbatasan dengan Kecamatan Sei Rampah 2. Sebelah Selatan berbatasan dengan Kecamatan Sipispis 3. Sebelah Timur berbatasan dengan Kecamatan Tebing Tinggi
4. Sebelah Barat berbatasan dengan Kecamatan Serba Jadi dan Kecamatan Bintang Bayu
Kecamatan Dolok Masihul terletak pada posisi 3º13’ LU - 3º33’ LU dan
99º01’ BT - 99º11’ BT dengan ketinggian di atas permukaan laut sekitar ± 60 - 90
dpl. Sedangkan jarak Kecamatan Dolok Masihul ke Kantor Bupati Serdang Bedagai di Sei Rampah adalah adalah sekitar ± 22 km. Dapat dilalui dengan kendaraan roda empat.
Wilayah Dolok Masihul sebagian besar terletak di dataran rendah dan sebagian kecil terletak di dataran tinggi yaitu sekitar ± 200 m di atas permukaan laut. Ibu kota Kecamatan Dolok Masihul adalah di Kelurahan Pekan Dolok Masihul. Luas wilayah Kecamatan Dolok Masihul : ± 2237.42 km2. Kecamatan Dolok Masihul terdiri dari :
(36)
25
Desa : 27
Kelurahan : 1
Dusun : 110
Lingkungan : 8
Kecamatan Dolok Masihul terdiri dari 27 (dua puluh tujuh) Desa dan 1 (satu) Kelurahan dengan jumlah penduduk Kecamatan Dolok Masihul seluruhnya 49.118 jiwa dengan rincian penduduk laki - laki 24.267 jiwa dan penduduk perempuan 24.851 jiwa. Dari jumlah Desa di Kecamatan Dolok Masihul tersebut ada beberapa type Desa terdiri dari :
1. Desa Persawahan = 16 Desa
2. Desa Perladangan / Perkebunan Rakyat = 14 Desa
3. Desa Perkebunan BUMN = 3 Desa
4. Desa Perkebunan Swasta Asing = 3 Desa 5. Desa Perkebunan Swasta = 1 Desa
(37)
BAB 4
ANALISIS DAN PERANCANGAN SISTEM
4.1 Analisis Sistem
Analisis merupakan tahap pengumpulan data, mengolahnya dan menghasilkan sebuah laporan analisa yang akan dijadikan dasar pengambilan keputusan pelaksanaan proyek pembangunan sistem dan sebagai referensi dalam perancangan sistem.
Dari hasil penelitian yang dilakukan di Kantor Camat Dolok Masihul dan hasil observasi diperoleh data - data yang dibutuhkan untuk membuat Sistem Informasi Geografis. Data yang diperoleh berupa data nama desa, jumlah penduduk, pendidikan, suku, mata pencaharian, tingkat kesehatan, dan tingkat kemiskinan. Dari penelitian ini akan dibuat sebuah Sistem Informasi Geografis yang dapat memberikan informasi kepada user untuk mengetahui letak desa secara online dan disertai beberapa informasi penting dari desa tersebut.
(38)
27
4.2 Analisis Kebutuhan
Analisis kebutuhan digunakan untuk mengidentifikasi terhadap kebutuhan sistem baru. Kebutuhan sistem meliputi analisis kebutuhan user dan kebutuhan admin. Kebutuhan user meliputi apasaja yang dibutuhkan oleh user pada sistem informasi pemetaan desa di Kecamatan Dolok Masihul berbasis sistem informasi geografis ini berupa : tampilan tentang pemetaan lokasi desa dan tampilan tentang informasi umum dari masing - masing desa. Sedangkan kebutuhan admin pada sistem ini meliputi apa yang dibutuhkan oleh admin pada sistem ini berupa : melakukan proses login terhadap sistem, mengelola data admin, dan melakukan proses marker lokasi desa di Kecamatan Dolok Masihul. Sistem akan menampilkan informasi kepada user dengan memproses data yang telah tersimpan dalam basis data.
4.3 Perancangan Sistem
Perancangan sistem adalah upaya untuk mulai memiliki sistem yang baru atau memperbaiki sistem yang lama secara keseluruhan atau memperbaiki sistem yang telah ada. Perancangan sistem dilakukan setelah mendapat gambaran dengan jelas apa yang harus dikerjakan. Untuk membuat suatu sistem memerlukan persiapan, perencanaan yang baik, tujuan yang jelas dan percobaan yang berulang - ulang karena menyangkut semua elemen yang menyangkut sistem informasi.
(39)
28
4.4 Diagram Konteks
Diagram konteks merupakan tingkatan tertinggi dalam diagram aliran data dan hanya memuat satu proses, menunjukkan sistem secara keseluruhan. Proses tersebut diberi nomor nol. Semua entitas eksternal yang ditunjukkan pada diagram konteks berikut aliran data - aliran data utama menuju dan dari sistem. Diagram konteks dimulai dengan penggambaran terminator, aliran data, aliran kontrol penyimpanan, dan proses tunggal yang menunjukkan keseluruhan sistem.
Bagian termudah adalah menetapkan proses (yang hanya terdiri dari satu lingkaran) dan diberi nama yang mewakili sistem. Nama dalam hal ini dapat menjelaskan proses atau pekerjaan atau dalam kasus ekstrim berupa nama perusahaan yang dalam hal ini mewakili proses yang dilakukan keseluruhan organisasi. Terminator ditunjukkan dalam bentuk persegi panjang dan berkomunikasi langsung dengan sistem melalui aliran data atau penyimpanan eksternal. Antar terminator tidak diperbolehkan komunikasi langsung. Pada kenyataannya hubungan antar terminator dilakukan, tetapi secara definitif karena terminator adalah bagian dari lingkungan, maka tidak relevan jika dibahas dalam diagram konteks.
(40)
29
Jumlah Info Jumlah Penduduk,
Penduduk, Info Jumlah Penduduk, Info MataPencarian, Data Tingkat Info Mata Pencarian, Info Suku,
Kemiskinan, Info Kemiskinan, Info Kemiskinan,
Data Suku, Info Suku, Info Pendidikan,
Data Mata Info Pendidikan, Info Kesehatan,
Pencaharian, Info Kesehatan, Info Nama Desa
Data Pendidikan, Info Nama Desa
Data Kesehatan, Nama Desa, Username, Password, Lattitude, Longitude
Gambar 4.1 Diagram konteks Sistem Informasi Geografis Pemetaan Desa Di Kecamatan Dolok Masihul
Admin
User / Masyarakat Sistem Informasi
Geografis Pemetaan Desa Di Kecamatan
Dolok Masihul 0
(41)
30
4.5 Data Flow Diagram (DFD) Level 0
Verifikasi Data Admin Data Admin
Data Admin
D1 Admin
Data Admin
Data Desa dan Map
Data Desa dan Map
D2 Desa D3 Map
Data Desa dan Map Informasi Desa
dan Map
Gambar 4.2 DFD Level 0 Admin
1 Login
2 Kelola
Data
(42)
31
4.6 Data Flow Diagram (DFD) Level 1
Data Desa Data Desa
D1 Desa Data Desa Data Desa
Data Desa dan Map Data Map
D2 Map
Data Desa
Gambar 4.3 DFD Level 1 Admin
2.1 Edit Data
2.2 Delete Data
2.3 Tambah Data
(43)
32
4.7 Entity Relationship Diagram (ERD)
Gambar 4.4 Entity Relationship Diagram
4.8 Perancangan Database
Perancangan database merupakan bagian penting pada sebuah sistem informasi, karena diperlukan untuk mengelola sumber informasi. Untuk mengelola sumber informasi tersebut yang pertama kali dilakukan adalah merancang suatu sistem database agar informasi yang ada dapat digunakan secara maksimal.
Username
Password Admin
Nama
Jumlah Penduduk Pendidikan
Suku Kesehatan Kemiskinan Mata Pencaharian Desa
Kelola
Map
Keterangan
Lattitude
Longitude Id
Title Kelola
(44)
33
Tujuan utama dari perancangan database adalah menyediakan struktur informasi yang natural dan mudah dimengerti oleh pengguna serta mendukung kebutuhan pemrosesan dan beberapa obyek kinerja dari suatu sistem database. Berikut rancangan tabel yang digunakan dalam membangun sistem informasi ini :
Tabel 4.1 Tabel admin
Nama Field Type Keterangan
username Varchar (32) Username admin untuk login
password Varchar (255) Password admin untuk login
Tabel 4.2 Tabel desa
Nama Field Type Keterangan
nama Varchar (255) Nama Desa
jumlah_penduduk Int (11) Jumlah Penduduk
mata_pencaharian Varchar (255) Mata Pencaharian pendidikan Varchar (255) Tungkat Pendidikan
suku Varchar (255) Jenis Suku
kesehatan Varchar (255) Tingkat Kesehatan
kemiskinan Varchar (255) Tingkat Kemiskinan
Tabel 4.3 Tabel map
Nama Field Type Keterangan
id Int (3) Id dari Desa
keterangan Text Keterangan Desa
lat Double Latitudinal Desa
lng Double Longitudinal Desa
(45)
34
4.9 Perancangan Flowchart
Berikut adalah rancangan flowchart dari program sistem informasi pemetaan desa di Kecamatan Dolok Masihul berbasis sistem informasi geografis :
4.9.1 Flowchart Admin
TIDAK
YA YA
Gambar 4.5 Flowchart login admin
Keterangan : Jika admin ingin mengolah atau memperbaiki data yang ada pada sistem informasi, sebelumnya admin harus mulai login dulu. Ketika ingin login, admin harus
Input username dan password
Username dan password benar?
Tampilan halaman admin
Username atau password salah Mulai
(46)
35
memasukkan atau menginput username dan password kemudian klik login. Username dan password akan diproses ketika kita klik tombol login. Setelah diproses username dan password akan dieksekusi apakah username dan password yang dimasukkan benar atau salah. Jika benar maka selanjutnya tampilan halaman admin akan terbuka, jika salah maka akan muncul pesan eror dan kita akan disuruh memasukkan atau menginputkan username dan password yang benar.
(47)
36
4.9.2 Flowchart Tampilan Admin
Tidak
Ya
Y
Tidak
Tidak
Ya
Gambar 4.6 Flowchart tampilan admin Mulai
Tampilan Menu Admin
Beranda
Desa Pilih
Data Ubah?
Ubah Data
Data Berhasil Diubah Data Desa
Hapus? Hapus Data
Data Desa
Data Berhasil Dihapus
Tambah Masukkan
Data Simpan Lengkap?
Data Desa dan Map
Data Disimpan Selesai
(48)
BAB 5
IMPLEMENTASI SISTEM
5.1 Pengertian Implementasi Sistem
Implementasi sistem adalah prosedur yang dilakukan untuk menyelesaikan sistem yang ada dalam dokumen rancangan sistem yang telah disetujui dan telah diuji, menginstal dan memulai menggunakan sistem baru yang diperbaiki. Adapun langkah - langkah yang dibutuhkan dalam implementasi sistem adalah :
1. Mendapatkan software dan hardware yang tepat / sesuai untuk merancang website
2. Menyelesaikan rancangan sistem
3. Menulis, menguji, mengontrol dan mendokumentasikan website 4. Mendapatkan persetujuan
5.2 Tujuan Implementasi Sistem
Tujuan dari implementasi sistem yaitu :
1. Mengkaji rangkaian sistem, baik dari segi software maupun hardware sebagai sarana pengolah data dan penyaji informasi
(49)
38
2. Menyelesaikan rancangan sistem yang ada dalam dokumen sistem yang baru atau yang telah disetujui
3. Memastikan bahwa pemakai dapat mengoperasikan dengan mudah terhadap sistem yang baru dan mendapat informasi yang baik dan jelas
4. Memperhitungkan bahwa sistem telah memenuhi permintaan pemakai yaitu dengan menguji sistem secara menyeluruh
5. Memastikan bahwa sistem telah berjalan lancar dengan mengontrol dan melakukan instalasi secara benar
5.3 Komponen Utama
Agar perancangan sistem yang telah kita kerjakan dapat berjalan baik atau tidak, maka perlu dilakukan pengujian terhadap sistem yang telah kita kerjakan. Untuk itu dibutuhkan beberapa komponen utama mencakup perangkat keras ( Hardware ), perangkat lunak ( Software ), dan unsur manusia ( Brainware ).
5.3.1 Perangkat Keras (Hardware)
Hardware merupakan komponen yang terlihat secara fisik, yang saling bekerjasama dalam pengolahan data. Perangkat keras ( hardware ) yang digunakan meliputi : 1. Monitor
(50)
39
3. Harddisk sebagai tempat sistem beroperasi dan media penyimpanan 4. Memori minimal 128 MB
5. Keyboard 6. Mouse
5.3.2 Perangkat Lunak ( Software )
Software adalah instruksi atau program - program komputer yang dapat digunakan oleh komputer dengan memberikan fungsi serta penampilan yang diinginkan. Dalam hal ini, perangkat lunak yang digunakan penulis untuk aplikasi perancangan website adalah :
1. Sistem operasi Windows XP
2. MYSQL sebagai bahasa pemrograman untuk database dalam bahasa SQL 3. Sublime Text 2 sebagai editor pendesainnya
4. PHP sebagai bahasa pemrograman server side
5. Web server sebagai server lokal dalam pengetesan halam web
6. Browser sebagai tempat media tampilan halaman website, seperti : Google Chrome
(51)
40
5.3.3 Unsur Manusia ( Brainware )
Brainware merupakan faktor manusia yang menangani fasilitas komputer yang ada. Faktor manusia yang dimaksud adalah orang - orang yang memiliki bagian untuk menangani sistem dan merupakan unsur manusia yang meliputi :
1. Analisis sistem, yaitu orang yang membentuk dan membangun fasilitas rancangan sistem atau program
2. Programmer, yaitu orang yang mengerti bahasa pemrograman yang digunakan dalam membuat dan membangun suatu program
3. Operator ( Administrator ), yaitu orang yang mengoperasikan sistem seperti memasukkan data untuk dioperasikan oleh komputer dalam menghasilkan informasi dan lain sebagainya
4. Public ( Pengguna ), yaitu orang yang memakai sistem yang telah dirancang untuk mendapatkan informasi yang dibutuhkan
5.4 Tampilan Halaman Website
Untuk menjalankan sistem guna web browser pada pengujian ini penulis menggunakan web browser Google Chrome. Setelah web browser jalan, ketikkan pada address bar http://localhost/citra/fix/tugasakhir. Penulisan citra setelah localhost menunjukkan folder tempat penyimpanan file - file aplikasi pemetaan desa.
(52)
41
5.4.1 Tampilan Home
Halaman ini merupakan halaman utama yang akan diakses pertama kali ketika situs dibuka. Di halaman ini berisi tujuan mengapa penulis memilih untuk membuat website tersebut.
Gambar 5.1 Tampilan home
5.4.2 Tampilan Profil
Tampilan ini berisi sejarah singkat serta batas - batas dari Kantor Camat Dolok Masihul.
(53)
42
Gambar 5.2 Tampilan profil
5.4.3 Tampilan Peta
Halaman ini berisi tampilan dari letak masing - masing desa yang ada di Kecamatan Dolok Masihul. Dalam halaman ini juga akan ditampilkan informasi - informasi umum yang ada dari masing - masing desa apabila pengguna mengklik marker dari setiap desa.
(54)
43
Gambar 5.3 Tampilan peta
5.4.4 Tampilan Login
Halaman login merupakan halaman yang dikhususkan untuk admin ( administrator ) situs, yang jika ingin masuk ke halaman ini harus melakukan login terlebih dahulu.
(55)
44
Gambar 5.4 Tampilan login
5.4.5 Tampilan Utama Admin
Halaman ini merupakan halaman yang dikhususkan untuk administrator situs, yang jika ingin masuk ke halaman ini harus melakukan login terlebih dahulu. Di halaman ini administrator / admin dapat melakukan penambahan, pengeditan maupun penghapusan terhadap data dari masing - masing desa.
(56)
45
Gambar 5.5 Tampilan utama admin
5.4.6 Tampilan Desa
Pada halaman ini akan ditampilkan informasi umum dari masing - masing desa seperti : Nama, Jumlah Penduduk, Mata Pencaharian, Pendidikan, Suku, Kesehatan, dan Kemiskinan.
(57)
46
Gambar 5.6 Tampilan desa
5.4.7 Tampilan Edit Data
Halaman ini digunakan untuk mengubah data yang telah dimasukkan sebelumnya.
(58)
47
5.4.8 Tampilan Tambah Data
Halaman ini digunakan admin untuk menambahkan data yang baru.
(59)
BAB 6
KESIMPULAN DAN SARAN
6.1 Kesimpulan
Dalam penulisan Tugas Akhir ini telah diuraikan bagaimana perancangan sistem dalam membangun sistem informasi pemetaan desa di Kecamatan Dolok Masihul berbasis sistem informasi geografis, maka dapat disimpulkan bahwa aplikasi yang dibuat oleh penulis sangat berguna bagi masyarakat untuk mengetahui informasi -informasi umum dari masing - masing desa yang ada di Kantor Camat Dolok Masihul seperti nama desa, jumlah penduduk, mata pencaharian, suku, tingkat pendidikan, tingkat kesehatan dan tingkat kemiskinan. Selain itu aplikasi ini juga berguna untuk mempermudah dan mempercepat pengolaan data masing - masing desa di Kecamatan Dolok Masihul. Aplikasi ini dibuat dengan tampilan antarmuka yang sederhana, sehingga pengguna dapat dengan mudah memakainya. Pada aplikasi ini user/masyarakat dapat melihat tampilan Home yang berisi tujuan dari aplikasi ini dibuat. Tampilan profil berisi sejarah singkat dari kecamatan Dolok Masihul, tampilan peta berisi letak pemetaan dari masing - masing desa dan informasi - informasi umum dari desa tersebut. Pada tampilan Admin hanya dapat digunakan oleh admin untuk menginputkan, mengedit dan menambahkan data.
(60)
49
6.2 Saran
Penelitian yang dilakukan tentunya tidak lepas dari kekurangan dan kelemahan. Oleh karena itu, untuk pengembangan sistem lebih lanjut diperlukan perhatian terhadap beberapa hal, diantaranya :
1. Untuk pengembangan sistem selanjutnya diharapkan bisa dibuat layer yang lebih detail sehingga peta akan lebih mudah dilihat, dipahami dan lengkap akan informasi yang dibutuhkan.
2. Antarmuka dan sistem yang dibangun masih tampak sederhana sehingga dapat dikembangkan lebih menarik lagi agar pengguna merasa lebih nyaman dalam menggunakan sistem ini
Akhirnya dengan segala keterbatasan sistem yang dibangun oleh penulis, penulis berharap bahwa sistem ini akan memberikan gagasan baru bagi pembaca untuk mengembangkan lebih lanjut.
(61)
BAB 2
LANDASAN TEORI
2.1 Sistem Informasi Geografis
Sistem Informasi Geografis (bahasa Inggris: Geographic Information System disingkat GIS) adalah sistem informasi khusus yang mengelola data yang memiliki informasi spasial (bereferensi keruangan). Atau dalam arti yang lebih sempit, adalah sistem komputer yang memiliki kemampuan untuk membangun, menyimpan, mengelola dan menampilkan informasi bereferensi geografis, misalnya data yang diidentifikasi menurut lokasinya, dalam sebuah database. Para praktisi juga memasukkan orang yang membangun dan mengoperasikannya dan data sebagai bagian dari sistem ini.
2.2 HTML
HTML adalah bahasa komputer yang dirancang untuk memungkinkan dalam pembuatan website. Website ini kemudian dapat dilihat oleh orang lain yang terhubung ke internet. Menurut Lia Kuswayatno, HTML merupakan halaman yang berada pada suatu situs internet atau web.
(62)
9
HTML merupakan metode yang menautkan (link) dalam dokumen ke dokumen lain melalui teks. Menurut Deris Stiawan, HTML merupakan framework internet, hampir semua situs web yang ada menggunakan HTML untuk menampilkan teks, grafik, suara dan animasinya. Menurut Diar Puji, HTML adalah suatu bahasa yang dikenali oleh web browser untuk menampilkan informasi dengan lebih menarik dibandingkan dengan tulisan teks biasa (plain teks).
HTML terdiri dari serangkain kode pendek diketik ke dalam teks-file dengan penulis situs. Teks tersebut kemudian disimpan sebagai file html, dan dilihat melalui browser. Browser ini membaca file dan menerjemahkan teks ke dalam bentuk yang terlihat.
2.3 PHP
Menurut Arief (2011c:43) PHP adalah Bahasa server-side-scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis. Karena PHP merupakan server-side-scripting maka sintaks dan perintah - perintah PHP akan diesksekusi diserver kemudian hasilnya akan dikirimkan ke browser dengan format HTML.
Dengan demikian kode program yang ditulis dalam PHP tidak akan terlihat oleh user sehingga keamanan halaman web lebih terjamin. PHP dirancang untuk membuat halaman web yang dinamis, yaitu halaman web yang dapat membentuk
(63)
10
suatu tampilan berdasarkan permintaan terkini, seperti menampilkan isi basis data ke halaman web.
Sedangkan menurut Nugroho (2006b:61) “PHP atau singkatan dari Personal Home Page merupakan bahasa skrip yang tertanam dalam HTML untuk dieksekusi bersifat server side”. PHP termasuk dalam open source product, sehingga source code PHP dapat diubah dan didistribusikan secara bebas. Versi terbaru PHP dapat diunduh secara gratis melalui situs resmi PHP : http://www.php.net.
PHP juga dapat berjalan pada berbagai web server seperti IIS (Internet Information Server), PWS (Personal Web Server), Apache, Xitami. PHP juga mampu berjalan di banyak sistem operasi yang beredar saat ini, diantaranya: Sistem Operasi Microsoft Windows (semua versi), Linux, Mac Os, Solaris. PHP dapat dibangun sebagai modul web server Apache dan sebagai binary yang dapat berjalan sebagai CGI (Common Gateway Interface). PHP dapat mengirim HTTP header, dapat mengatur cookies, mengatur authentication dan redirect user.
Salah satu keunggulan yang dimiliki PHP adalah kemampuannya untuk melakukan koneksi ke berbagai macam software sistem manajemen basis data atau Database Management Sistem (DBMS), sehingga dapat menciptakan suatu halaman web dinamis. PHP mempunyai koneksitas yang baik dengan beberapa DBMS seperti Oracle, Sybase, mSQL, MySQL, Microsoft SQL Server, Solid, PostgreSQL,
(64)
11
berinterface ODBC. Hampir seluruh aplikasi berbasis web dapat dibuat dengan PHP. Namun kekuatan utama adalah konektivitas basis data dengan web. Dengan kemampuan ini kita akan mempunyai suatu sistem basis data yang dapat diakses.
2.4 XAMPP
XAMPP adalah perangkat lunak bebas, yang mendukung untuk banyak sistem operasi, yang merupakan kompilasi dari beberapa program. Fungsi XAMPP sendiri adalah sebagai server yang berdiri sendiri (localhost), yang terdiri beberapa program antara lain : Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Nama XAMPP sendiri merupakan singkatan dari X (empat sistem operasi apapun), Apache, MySQL, PHP dan Perl. Program ini tersedia dalam GNU General Public License dan bebas, merupakan web server yang mudah untuk digunakan yang dapat menampilkan halaman web yang dinamis. Untuk mendapatkannya XAMPP anda dapat mendownload langsung dari web resminya. Dan berikut beberapa definisi program lainnya yang terdapat dalam XAMPP.
Server HTTP Apache atau Server Web/WWW Apache adalah server web yang dapat dijalankan di banyak sistem operasi seperti (Unix, BSD, Linux, Microsoft Windows dan Novell Netware serta platform lainnya) yang berguna untuk melayani
(65)
12
dan memfungsikan situs web. Protokol yang digunakan untuk melayani fasilitas web/www ini menggunakan HTTP. MySQL adalah sebuah perangkat lunak sistem manajemen basis data SQL (bahasa Inggris: database management system) atau DBMS yang multithread, multi-user, dengan sekitar 6 juta instalasi di seluruh dunia. MySQL AB membuat MySQL tersedia sebagai perangkat lunak gratis dibawah lisensi GNU General Public License (GPL), tetapi mereka juga menjual dibawah lisensi komersial untuk kasus-kasus dimana penggunaannya tidak cocok dengan penggunaan GPL. PHP: Hypertext Preprocessor adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS.
PhpMyAdmin adalah perangkat lunak bebas yang ditulis dalam bahasa pemrograman PHP yang digunakan untuk menangani administrasi MySQL melalui Jejaring Jagat Jembar ( World Wide Web ). PhpMyAdmin mendukung berbagai operasi MySQL, diantaranya (mengelola basis data, table - tabel, bidang ( fields ), relasi ( relations ), indeks, pengguna ( users ), perijinan ( permissions ), dan lain - lain. Pada dasarnya, mengelola basis data dengan MySQL harus dilakukan dengan cara mengetikkan baris - baris perintah yang sesuai ( command line ) untuk setiap maksud tertentu. Jika seseorang ingin membuat basis data ( database ), ketikkan baris perintah yang sesuai untuk membuat basis data. Jika seseorang menghapus tabel, ketikkan baris perintah yang sesuai untuk menghapus tabel. Hal tersebut tentu saja sangat menyulitkan karena seseorang harus hafal dan mengetikkan perintahnya satu
(66)
13
Saat ini banyak sekali perangkat lunak yang dapat dimanfaatkan untuk mengelola basis data dalam MySQL, salah satunya adalah phpMyAdmin. Dengan phpMyAdmin, seseorang dapat membuat database, membuat tabel, mengisi data, dan lain - lain dengan mudah, tanpa harus menghafal baris perintahnya. phpMyAdmin merupakan bagian untuk mengelola basis data MySQL yang ada di komputer. Untuk membukanya, buka browser lalu ketikkan alamat http://localhost/phpmyadmin, maka akan muncul halaman phpMyAdmin. Di situ nantinya seseorang bisa membuat basis data baru, dan mengelolanya.
2.5 Sublime Text Editor
Sublime Text Editor adalah editor teks untuk berbagai bahasa pemograman termasuk pemograman PHP. Sublime Text Editor merupakan editor text lintas-platform dengan Python application programming interface ( API ). Sublime Text Editor juga mendukung banyak bahasa pemrograman dan bahasa markup, dan fungsinya dapat ditambah dengan plugin, dan Sublime Text Editor tanpa lisensi perangkat lunak. Sublime Text Editor pertama kali dirilis pada tanggal 18 januari 2008, dan sekarang versi Sublime Text Editor sudah mencapai versi 3 yang dirilis pada tanggal 29 januari 2013. Sublime Text mendukung operation system seperti Linux, Mac Os X, dan juga windows. Sangat Banyak fitur yang tersedia pada Sublime Text Editor diantarnya minimap, membuka script secara side by side, bracket highlight sehingga tidak
(67)
14
bingung mencari pasangannya, kode snippets, drag and drop direktori ke sidebar terasa mirip dengan TextMate untuk Mac OS.
Dalam sistem ini kita menggunakan Sublime Text 2. Sublime Text 2 adalah editor teks yang dirancang untuk mengolah potongan-potongan kode, plugin, dan markup. Tetapi Anda juga bisa memakainya untuk menulis artikel dan mengetik dalam prosa normal. Bagaimanapun Anda mau memakainya, keunggulan Sublime Text 2 ada di kualitas dan kuantitas fitur - fiturnya seperti blok multi tempat, kursor banyak, dan pengolahan split. Bermacam - macam fitur ini membuat pengolahan kode menjadi lebih cepat dan mudah.
Fitur lain yang menarik adalah dukungannya pada berbagai macam bahasa seperti Clojure, Perl, Javascript, Haskell, Erlango, dan Escala. Anda juga bisa membuat dan menyimpan macro kapan saja, pekerjaan menjadi lebih mudah dengan banyaknys opsi yang bisa dipilih. Adanya kemampuan konfigurasi pintasan kibor menurut kemauan pengguna juga sangat membantu. Dengan ini tindakan yang memakan banyak waktu di program lain bisa Anda lakukan dalam hitungan detik dengan program ini.
Sublime Text 2 adalah aplikasi pengolah kata yang sangat lengkap yang akan segera membuat penggunanya jatuh hati padanya.
(68)
15
2.6 Google Maps API
Google Map adalah layanan pemetaan berbasis web yang populer. Google Maps API dapat ditambahkan ke website kita menggunakan JavaScript. API tersebut menyediakan banyak fasilitas dan utilitas untuk memanipulasi peta dan menambahkan konten ke peta melalui berbagai layanan, memungkinkan Anda untuk membuat aplikasi peta yang kuat pada website Anda. JavaScript API mirip dengan versi sebelumnya. Versi 3 disesain lebih cepat, khusunya untuk browser mobile seperti Android dan iPhone. Agar peta dapat ditampilkan ke dalam website kita, maka kita harus mempunyai account Google, kemudian mendaftarkan diri dahulu di http://code.google.com/apis/maps/signup.html.
Google Map adalah layanan aplikasi dan teknologi peta berbasis web yang disediakan oleh Google secara gartis ( bukan untuk kepentingan komersial ), temasuk di dalamnya website Google Map (http://maps.google.com), Google Ride Finder, Google Transit, dan peta yang dapat disisipkan pada website lain melalui Google Maps API. Saat ini Google Map adalah layanan pemetaan berbasis web yang populer. Kita dapat menambahkan layanan Google Map ke website kita sendiri menggunakan Google Maps API. Pengetahuan yang diperlukan untuk mengembangkan Google Maps API adalah tentang HTML dan JavaScript, sedangkan peta sudah disediakan oleh Google. Jadi kita hanya berkonsentrasi tentang data dan biarkan urusan peta ditangani oleh Google, sehingga dapat menghemat waktu.
(69)
16
Google API bisa di katakan bagian dari Framework Google. Google menyediakan berbagai API (Application Programming Interface) yang sangat berguna bagi pengembang web maupun aplikasi desktop untuk memanfaatkan berbagai fitur yang disediakan oleh Google seperti: AdSense, Search Engine, Translation maupun YouTube. API secara sederhana bisa diartikan sebagai kode program yang merupakan antarmuka atau penghubung antara aplikasi atau web yang kita buat dengan fungsi - fungsi yang dikerjakan. Misalnya dalam hal ini Google API berarti kode program ( yang disederhanakan ) yang dapat kita tambahkan pada aplikasi atau web kita untuk mengakses / menjalankan / memanfaatkan fungsi atau fitur yang disediakan Google. Misalnya saja kita bisa menambahkan fitur Google Map pada website kita.
Google API dapat dipelajari langsung melalui Google Code. Melalui Google Code kita dapat belajar tentang Google API dan dapat mengimplementasikan pada aplikasi web atau website yang kita kembangkan. Ada banyak API yang disediakan oleh Google, beberapa diantaranya adalah:
1. Language API: untuk memanfaatkan fitur translation yang dimiliki Google. 2. Earth API: memanfatkan fitur yang ada pada Google Earth
3. Javascript API
4. Maps API: memanfaatkan fitur yang ada pada Google Maps 5. Search API: memanfaatkan fitur pencarian pada Google Search 6. Visualization API: membuat grafik maupun chart dengan Google API
(70)
17
7. YouTube API: memanfaatkan fitur yang ada pada YouTube misalnya untuk pencarian video
Salah satu cara mudah mempelajari Google API adalah dengan memanfaatkan Google AJAX APIs Playground. AJAX APIs playground adalah sebuah situs yang disediakan oleh Google bagi kita untuk mencoba secara langsung sejumlah Google API yang berbasis AJAX (Asynchronous Javascript and XML). Karena berbasis AJAX maka tentunya semua kode program dalam sintaks Javascript yang bisa kita lihat, kopi dan paste secara langsung untuk digunakan pada website kita.
2.7 Data Flow Diagram (DFD)
Data Flow Diagram (DFD) adalah alat pembuatan model yang memungkinkan profesional sistem untuk menggambarkan sistem sebagai suatu jaringan proses fungsional yang dihubungkan satu sama lain dengan alur data, baik secara manual maupun komputerisasi. DFD ini sering disebut juga dengan nama Bubble chart, Bubble diagram, model proses, diagram alur kerja, atau model fungsi.
DFD ini adalah salah satu alat pembuatan model yang sering digunakan, khususnya bila fungsi - fungsi sistem merupakan bagian yang lebih penting dan kompleks dari pada data yang dimanipulasi oleh sistem. Dengan kata lain, DFD
(71)
18
adalah alat pembuatan model yang memberikan penekanan hanya pada fungsi sistem.
DFD ini merupakan alat perancangan sistem yang berorientasi pada alur data dengan konsep dekomposisi dapat digunakan untuk penggambaran analisa maupun rancangan sistem yang mudah dikomunikasikan oleh profesional sistem kepada pemakai maupun pembuat program.
Didalam DFD terdapat 3 level, yaitu :
1. Diagram Konteks : menggambarkan satu lingkaran besar yang dapat mewakili seluruh proses yang terdapat di dalam suatu sistem. Merupakan tingkatan tertinggi dalam DFD dan biasanya diberi nomor 0 (nol). Semua entitas eksternal yang ditunjukkan pada diagram konteks berikut aliran-aliran data utama menuju dan dari sistem. Diagram ini sama sekali tidak memuat penyimpanan data dan tampak sederhana untuk diciptakan.
2. Diagram Nol (diagram level-1) : merupakan satu lingkaran besar yang mewakili lingkaran-lingkaran kecil yang ada di dalamnya. Merupakan pemecahan dari diagram Konteks ke diagram Nol. di dalam diagram ini memuat penyimpanan data.
3. Diagram Rinci : merupakan diagram yang menguraikan proses apa yang ada dalam diagram Nol.
(72)
19
Tabel 2.1 Simbol - simbol data flow diagram (DFD)
Simbol Keterangan
External Entity, merupakan kesatuan di lingkungan luar sistem yang bisa berupa orang, organisasi atau sistem lain.
Process, merupakan proses seperti perhitungan aritmatik penulisan suatu formula atau pembuatan laporan.
Data Store (simpan data), dapat berupa suatu file atau database pada sistem komputer atau catatan manual.
Data Flow (arus data), arus data ini mengalir diantara proses, simpan data dan kesatuan luar.
(Sumber : http://www.academia.edu/8981430/Pengertian_Simbol_DFD)
2.8 Flowchart
Flowchart adalah sekumpulan symbol - simbol yang menunjukkan atau menggambarkan rangkaian kegiatan - kegiatan program dari awal hingga akhir, jadi flowchart juga digunakan untuk menggambarkan urutan langkah - langkah pekerjaan di suatu algoritma. Dengan adanya flowchart, akan sangat membantu untuk
(73)
20
memvisualisasikan isi dari setiap halaman dan link atau navigasi antara halaman - halaman tersebut.
Disamping itu juga dapat mempermudah dalam mengatur kode dan file html, terutama link untuk navigasi penjelajahan ke seluruh halaman web. Penjeleasan arti simbol - simbol flowchart dapat di defenisikan seperti table berikut :
Tabel 2.2 Simbol - simbol flowchart
No Simbol Fungsi
1 Terminator, untuk memulai dan mengakhiri
suatu program
2 Process, suatu simbol yang menunjukkan setiap pengolahan yang dilakukan oleh computer
3 Data, digunakan untuk memasukkan data
maupun menunjukkan hasil dari suatu proses
4 Decision, suatu kondisi yang akan menghasilkan
beberapa kemungkinan jawaban atau pilihan
5
Preparation, suatu symbol yang menyediakan tempat – tempat pengolahan data dalam storage
6 Connector, merupakan symbol untuk masuk dan
keluarnya suatu prosedur pada lembar kertas yang sama
(74)
21
7 Off-Page Connector, merupakan symbol untuk
masuk dan keluarnya suatu prosedur pada lembar kertas yang lain.
8 Arus atau Flow, prosedur yang dapat dilakukan dari atas ke bawah, bawah ke atas, dari kiri ke kanan, atau dari kanan ke kiri
9 Document, merupakan simbol untuk data yang
berbentuk informasi
10 Predefined Process, digunakan untuk
menyatakan sekumpulan langkah proses yang ditulis sebagai prosedur
11
Magnetic Disk, untuk menyimpan data
(Sumber: http://www.google.co.id/search?site=&source=hp&ei=cwdoV9G6MMb7vg StqY30DA&q=simbol+hasil+dalam+dfd)
(75)
BAB 1
PENDAHULUAN
1.1 Latar Belakang
Mengingat akan pesatnya kemajuan teknologi yang sudah merambah ke semua bidang serta pola kehidupan masyarakat Indonesia yang sudah relative maju, dapat dipastikan bahwa hampir semua orang saat ini sudah memanfaatkan internet sebagai media informasi. Hadirnya internet telah menunjang efektifitas dan efisiensi operasional dalam segala bidang, terutama peranannya sebagai sarana komunikasi, publikasi serta sarana untuk mendapatkan berbagai informasi yang dibutuhkan oleh instansi, badan usaha atau lembaga lainnya.
Sistem Informasi Geografis (SIG) atau juga yang dikenal sebagai Geographic Information System (GIS) merupakan salah satu macam sistem informasi dari sekian banyak sistem informasi yang ada. Sistem Informasi Geografis ini adalah sistem informasi berbasis komputer yang menggabungkan antara unsur peta (geografis) dan informasinya tentang peta tersebut (data atribut) yang dirancang untuk mendapatkan, mengolah, memanipulasi, analisa, memperagakan dan menampilkan data spasial untuk menyelesaikan perencanaan, mengolah dan meneliti permasalahan.
(1)
vii ABSTRACT
Geographic Information System is one of the development of information management systems very rapidly with the increasing development of human intelligence. In its development it needed to build a Geographic Information System is a data and information. Geographic information systems are essential to the development of an area. One is a Geographic Information System mapping of villages in Sub Dolok Masihul. The presence of Geographic Information System is expected to provide convenience for people who need information about the location of villages in the district Dolok Masihul. This study develops a application which is implemented in the form of web to map the location of the village - the village in Sub Dolok Masihul. The system utilizes a MySQL database as the database server, PHP is used as a programming language. From the results of system testing has been done, Geographic Information System mapping Dolok Masihul village in the district unfit for use.
(2)
viii DAFTAR ISI
Halaman
Persetujuan ii
Pernyataan iii
Penghargaan iv
Abstrak vi
Abstract vii
Daftar Isi viii
Daftar Tabel x
Daftar Gambar xi
Daftar Lampiran xii
Bab 1. Pendahuluan 1.1 Latar Belakang 1 1.2 Rumusan Masalah 3
1.3 Batasan Masalah 3 1.4 Tujuan 4 1.5 Metodologi Penelitian 4 1.6 Sistematika Penulisan 5 Bab 2. Landasan Teori 2.1 Sistem Informasi Geografis 8
2.2 HTML 8 2.3 PHP 9
2.4 XAMPP 11
2.5 Sublime Text Editor 13
2.6 Google Maps API 15
2.7 Data Flow Diagram (DFD) 17
2.8 Flowchart 19
Bab 3. Gambaran Umum 3.1 Sejarah Singkat Kecamatan Dolok Masihul 22
3.2 Letak dan Geografis Kecamatan Dolok Masihul 24
Bab 4. Analisis Dan Perancangan Sistem 4.1 Analisis Sistem 26
4.2 Analisis Kebutuhan 27
4.3 Perancangan Sistem 27
4.4 Diagram Konteks 28
4.5 Data Flow Diagram (DFD) Level 0 30
4.6 Data Flow Diagram (DFD) Level 1 31
(3)
ix
4.7 Entity Relationship Diagram (ERD) 32
4.8 Perancangan Database 32
4.9 Perancangan Flowchart 34
4.9.1 Flowchart Admin 34
4.9.2 Flowchart Tampilan Admin 36
Bab 5. Implementasi Sistem 6.1 Pengertian Implementasi Sistem 37
6.2 Tujuan Implementasi Sistem 37
6.3 Komponen Utama 38
6.3.1 Perangkat Keras (Hardware) 38
6.3.2 Perangkat Lunak (Software) 39
6.3.3 Unsur Manusia (Brainware) 40
6.4 Tampilan Halaman Website 40
6.4.1 Tampilan Home 41
6.4.2 Tampilan Profil 41
6.4.3 Tampilan Peta 42
6.4.4 Tampilan Login 43
6.4.5 Tampilan Utama Admin 44
6.4.6 Tampilan Desa 45
6.4.7 Tampilan Edit Data 46
6.4.8 Tampilan Tambah Data 47
Bab 6. Kesimpulan dan Saran 6.1 Kesimpulan 48
6.2 Saran 49 Daftar Pustaka
(4)
x
DAFTAR TABEL
Nomor Judul Halaman
Tabel
2.1 Simbol - Simbol Data Flow Diagram 19
2.2 Simbol - Simbol Flowchart 20
4.1 Tabel Admin 33
4.2 Tabel Desa 33
4.3 Tabel Map 33
(5)
xi
DAFTAR GAMBAR
Nomor Judul Halaman
Gambar
4.1 Diagram Konteks Sistem Informasi 29
4.2 DFD Level 0 30
4.3 DFD Level 1 31
4.4 Entity Relationship Diagram 32
4.5 Flowchart Login Admin 34
4.6 Flowchart Tampilan Admin 36
5.1 Tampilan Home 41
5.2 Tampilan Profil 42
5.3 Tampilan Peta 43
5.4 Tampilan Login 44
5.5 Tampilan Utama Admin 45
5.6 Tampilan Desa 46
5.7 Tampilan Edit Data 46
(6)
xii
DAFTAR LAMPIRAN
1. Program
2. Kartu Bimbingan Tugas Akhir 3. Surat Keterangan Hasil Uji Program 4. Surat Riset
5. Surat Balasan Penerimaan Riset