Sistem Informasi Pemetaan Desa di Kecamatan Dolok Masihul Berbasis Sistem Informasi Geografis

(1)

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) { ?>

alert("Data berhasil ditambah!");

window.location.href = "index.php?desa"; </script>

<?php } else {

?>

alert("Error.. <?php echo mysqli_error($conn); ?>")

(2)

} ?>

</tr> <tr>

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

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

(3)

<tr>

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

alert("Data berhasil dihapus!");

window.location.href = "index.php?desa"; </script>

<?php }

}

desa.php

<th>Jumlah Penduduk</th> <th>Mata Pencaharian</th> <th>Pendidikan</th>

(4)

<?php

$query = mysqli_query($conn, "SELECT * FROM desa");

while($row = mysqli_fetch_array($query)) { ?>

<tr>

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

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

} ?>

<tr>

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

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

</table> </form>

home.php

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

<title>ADMIN</title>

</head> <body>

<h1>Selamat Datang</h1> </div>

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

<tr>

(8)

<tr>

<td>Nama</td><td>Citra Melisa Tamba</td>

</tr> </table>

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

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

(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

* {

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

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

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

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

</tr> <tr>

<td>Kesehatan</td><td>:</td><td><?php echo $row[5]; ?></td>

</tr> <tr>

(17)

</tr> </table> </div>

<?php } else {

echo "Error.. " . mysqli_error($conn); }

?>

4.

Footer.php

<td>Email</td><td>citramelisa33@gmail.com</td> </tr>

<tr>

<tr>

<td>Nama</td><td>Citra Melisa Tamba</td> </tr>

</table>

</div>

5.

Head.php

(18)

</div>

</div>

6.

Index.php

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

<head>

<title>PEMETAAN</title>

<! Insert to your webpage before the </head> -->

href="sliderjs/amazingslider-1.css">

</head>

<?php include 'head.php'; ?> <?php include 'nav.php'; ?>

<div id="amazingslider-1"

style="display:block;position:relative;margin:0 auto;"> <ul class="amazingslider-slides"

style="display:none;">

</li>

(19)

</li>

</li> </ul>

</ul> </div> </div>

<div id="section">

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

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

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)

} ?> <html> <head>

<title>Login</title>

<body>

<div class="header-login"> <h1>Login Admin</h3> </div>

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

</tr> </table> </form>

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

9.

Logout.php

<?php

session_destroy();

(22)

10.

Map.php

<!DOCTYPE html> <html>

<head>

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>

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

});

(24)

}); }); }); }

</script> </body>

</html>

11.

Nav.php

<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'])) { ?>

<ul>

<li><a

href="logout.php">Logout</a></li> </ul>

</li> <?php } else { ?>

<li><a href="login.php">Login</a></li> <?php

}

(25)

12.

Peta.php

<head>

<title>PEMETAAN</title>

<script src="js/jquery.js"></script>

<?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;">

style="display:block;position:relative;margin:0 auto;"> <ul class="amazingslider-slides" style="display:none;">

</li> <li><img

src="imgslider/gambar2.jpg" alt="gambar2" title="gambar2" />

</li> <li><img

</li>

(26)

</ul> </div> </div>

<?php include 'map.php'; ?> </div>

</div>

</body> </html>

13.

Profil.php

<head>

<title>Profil</title>

$(document).ready(function() { setInterval({

$("#container-gambar").css("margin-left", "-300px");

}, 3000); });

</script>

(27)

href="sliderjs/amazingslider-1.css">

</head>

</div>

<?php include 'nav.php'; ?>

style="display:block;position:relative;margin:0 auto;"> <ul class="amazingslider-slides"

style="display:none;">

</li>

</li> </ul>

(28)

</ul> </div> </div>

<div id="section">

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

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

</body> </html>

14.

Proses.php

<?php

$query = "SELECT * FROM tbl_map"; $exe = mysqli_query($conn, $query);

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

}

(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

(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