Aplikasi Web Gis Pemetaan Penyebaran Sekolah Di Kota Medan Menggunakan Google Maps Api

(1)

LAMPIRAN

1. Index.php

<?php ini_set("display_errors","Off"); session_start();

include"styles/fungsi_indotgl.php";

if (empty($_SESSION['namauser']) AND empty($_SESSION['passuser'])){?> <!DOCTYPE html>

<head>

src="scripts/cari/jquery.watermarkinput.js"></script>

content: $(this).attr('alt'), // Use the ALT attribute of the area map

style: {

width: 0, radius: 4 },

tip: true // Apply a tip at the default tooltip corner } }); }); }); </script> <script type="text/javascript"> $(document).ready(function(){

/* Start Map Controls*/

jQuery("#map-container area").mouseover(function(){ var regionMap = '.'+$(this).attr('id')+'-map';

jQuery(regionMap).css('display', 'inline'); }).mouseout(function(){

var regionMap = '.'+$(this).attr('id')+'-map';

// Check if a click event has occured and only change the Region hover state accodringly

if (! jQuery(regionMap).hasClass('selected')) {

jQuery(regionMap).css('display', 'none');

(2)

} }); jQuery("#map-container area").click(function(){ jQuery('#map-container img.region').removeClass('selected').css('display', 'none'); jQuery('#practice-container ul').removeClass('selected').css('display', 'none');

var regionMap = '.'+$(this).attr('id')+'-map';

jQuery(regionMap).addClass('selected').css('display', 'inline');

});

/* End Map Controls*/ }); </script> <script type="text/javascript"> $(document).ready(function(){ $(".search").keyup(function() {

var kotakpencarian = $(this).val();

$("#kotakpencarian").Watermark("Cari");// Untuk menampilkan tulisan "Cari" di kotakpencarian

}); </script> </head> <body><div id="taufiq_pembungkus"> <div id="taufiq_kepala"> </div> <div id="topmenu"> <ul id="menu"> <li><a href='index.php'>Depan</a></li> <li><a href='tentang.php'>Tentang</a></li> <li><a href='cari.php'>Cari</a></li> <li><a href='berita.php'><b>Berita</b></a></li> <li><a href='download.php'><b>File</b></a></li> <li><a href='daftar.php'>Registrasi</a></li> <li><a href="login.php">Admin</a></li>

(3)

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

<div id="table"><TABLE><tr><th colspan="2">Form Login</th></tr> <tr></tr>

<tr><td><input name="username" type="text" size="30" maxlength="25" placeholder="Username"/></td><td> <input name="password"

type="password" size="30" maxlength="25"

placeholder="Password"/></td></tr></TABLE></div>

<tr><td><input type="submit" value="Login" name="Login"></td><td><a href="#">Forgot Password?</a></td></tr></FORM>

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

Cari :<input type="text" class="search" id="kotakpencarian" /><br />

<div id="taufiq_sekolah_table"> <div id="table"> <table border="2px"> <col class="col1"> <col class="col2"> <col class="col3"> <tr><th>NPSN</th><th>NAMA</th><th>Aksi</th></tr> <tbody> <?php include"koneksi.php"; $batasan =15;

$angka = $_GET['angka']; $batas = $_GET['batas']; $halaman = $_GET['halaman']; if(empty($halaman)){

$posisi=0; $halaman=1; }

else{

$posisi = ($halaman-1) * $batas; }

echo"<form method='get' action='$file'>

<input type=hidden name=halaman value=$halaman> Tentukan Tampilan Data Per Halaman :

<select name=batas onChange='this.form.submit()'>"; for($i=1;$i<=10;$i++){

$angka=$batasan*$i; if ($batas==$angka)

echo "<option value=$angka selected>$angka</option>"; else

echo "<option value=$angka>$angka</option>"; }

echo "</select></form>"; if(empty($batas)){

$batas = $batasan; }

(4)

$no = 1;

$query = "Select * from sekolah LIMIT $posisi, $batas"; $data = mysql_query($query);

while($x = mysql_fetch_array($data)){ echo" <tr> <td class='title'>$x[npsn]</td> <td class='title'>$x[nama]</td> <td class='title'><a href='lihat.php?npsn=$x[npsn]'>Lihat</a></td> </tr> "; $no++; } ?> </tbody> </table> <?php

echo"<br> Halaman : ";

$tampil = mysql_query("select * from sekolah"); $jmldata = mysql_num_rows($tampil);

$jmlhalaman = ceil($jmldata/$batas); for($i=1;$i<=$jmlhalaman;$i++)

if ($i != $halaman){

echo " <a href=$file?halaman=$i&batas=$batas>$i</A> | "; }

else{

echo " <b>$i</b> | "; }

echo "<p>Total sekolah : <b>$jmldata</b> sekolah</p>"; ?>

</div> </div>

<div id="map-view-container"> Pilih Lokasi Kecamatan di Medan :`

<img src="transparentMap.gif" alt=""

usemap="#regionMapView" class="map" border="0" height="700" width="464">

<area shape="poly"

coords="256,97,273,179,259,194,253,194,257,208,242,228,214,234,214,25 2,206,249,202,232,156,229,188,147,188,133,207,139,215,97,224,97,229,1 03,244,92" href="cari.php?kec=Medan+Marelan&jj=0&ss=0" title="Medan Marelan" id="jkp">

(5)

<area shape="poly"

coords="217,301,221,235,244,231,244,224,251,221,291,229,306,232,297,2 42,281,243,274,250,258,248,258,260,280,267,312,277,309,292,342,280,34 0,313,318,313,265,330,257,318,245,318,250,337,226,328,222,303"

href="cari.php?kec=Medan+Deli&jj=0&ss=0" title="Medan Deli" id="jks"> <area shape="poly"

coords="321,335,321,365,291,366,295,414,317,412,321,421,294,427,302,4 43,293,444,279,416,266,362,266,337,256,335,257,332 "

href="cari.php?kec=Medan+Timur&jj=0&ss=0" title="Medan Timur" id="perjuangan" >

<area shape="poly"

coords="296,370,322,371,323,404,354,408,356,433,337,442,317,430,316,4 26,331,418,318,410,297,410"

href="cari.php?kec=Medan+Perjuangan&jj=0&ss=0" title="Medan Perjuangan" id="jkt" >

<area shape="poly"

coords="328,256,363,356,364,415,415,413,456,424,359,433,355,400,328,3 99 " href="cari.php?kec=Medan+Tembung&jj=0&ss=0" title="Medan Tembung" id="tembung">

<area shape="poly"

coords="360,438,391,435,392,453,445,451,442,465,419,413,412,516,357,5 15,357,487,386,483,382,458,359,436 " href="#" title="Medan Denai" id="denai">

<area shape="poly"

coords="287,536,372,538,386,561,413,554,417,565,444,568,443,582,307,5 80,307,611,297,609,301,543,286,542"

href="cari.php?kec=Medan+Amplas&jj=0&ss=0" title="Medan Amplas" id="amplas">

<area shape="poly"

coords=298,546,295,611,252,623,162,621,171,589,161,577,179,566,220,56 3,297,545,296,611" href="cari.php?kec=Medan+Johor&jj=0&ss=0"

title="Medan Johor" id="johor">

<area shape="poly" coords=

"86,582,147,588,160,580,168,588,159,625,201,634,164,682,149,628,115,6 06,82,649,93,652,38,680,19,662,44,619,19,564,56,540,94,543"

href="cari.php?kec=Medan+Tuntungan&jj=0&ss=0" title="Medan Tuntungan" id="tuntungan">

<area shape="poly" coords=

"60,511,112,520,140,515,164,519,168,496,185,497,179,547,203,548,117,5 66,147,584,90,578,100,539,71,538"

href="cari.php?kec=Medan+Selayang&jj=0&ss=0" title="Medan Selayang" id="selayang">

<area shape="poly" coords=

"58,429,69,444,162,455,159,466,184,469,186,494,163,494,170,510,159,51 5,135,511,60,508,46,467" href="cari.php?kec=Medan+Sunggal&jj=0&ss=0" title="Medan Selayang" id="sunggal">

<area shape="poly" coords=

"40,391,42,401,107,405,116,361,186,389,234,331,221,414,175,414,161,46 0,54,439," href="cari.php?kec=Medan+Helvetia&jj=0&ss=0" title="Medan Helvetia" id="helvetia">

<area shape="poly" coords= "

162,465,260,464,232,448,228,431,167,430"

href="cari.php?kec=Medan+Petisah&jj=0&ss=0" title="Medan Petisah" id="petisah">

<area shape="poly" coords= "

188,468,226,470,223,490,204,494,215,521,208,545,182,544,184,509,189,5 49" href="cari.php?kec=Medan+Baru&jj=0&ss=0" title="Medan Baru"

(6)

<area shape="poly" coords= "

235,356,234,377,262,461,248,457,232,447,230,427,174,423,198,419,210,4 00,205,390,229,357" href="cari.php?kec=Medan+Barat&jj=0&ss=0"

title="Medan Barat" id="barat"> <area shape="poly" coords= "

228,469,224,469,250,482,233,492,239,496,468,500,270,528,266,550,211,5 61,217,521,208,503,227,491,227,484"

href="cari.php?kec=Medan+Polonia&jj=0&ss=0" title="Medan Polonia" id="polonia">

<area shape="poly" coords= "

264,464,287,509,284,546,267,550,279,534,271,528,270,495,237,490,252,4 78,247,468" href="cari.php?kec=Medan+Maimun&jj=0&ss=0" title="Medan Maimun" id="maimun">

<area shape="poly" coords=

"266,466,276,461,274,450,285,447,301,447,302,457,288,459,295,471,285, 475,287,429,303,499,327,502,327,535,288,532,288,508,267,466,275,461" href="cari.php?kec=Medan+Kota&jj=0&ss=0" title="Medan Kota"

id="kota">

<area shape="poly" coords=

"303,446,311,444,350,470,355,497,305,497,305,491,289,489,289,475,297, 473,291,461,304,458" href="cari.php?kec=Medan+Area&jj=0&ss=0"

title="Medan Area" id="area"> </map>

<img style="display: none; width:464px; height:700px;

background:url('images/belawan.png'); background-position:;" src="images/transparentMap.gif" class="region blw-map" alt="Medan Belawan">

<img style="display: none; width:464px; height:700px;

background:url('images/labuhan.png'); background-position:;" src="images/transparentMap.gif" class="region jku-map" alt="Medan Labuhan">

<img style="display: none; width:464px; height:700px;

background:url('images/marelan.png'); background-position:"

src="images/transparentMap.gif" class="region jkp-map" alt="Medan Marelan">

<img style="display: none; width:464px; height:700px; background:url('images/deli.png'); background-position:"

src="images/transparentMap.gif" class="region jks-map" alt="Medan Deli">

<img style="display: none; width:464px; height:700px; background:url('images/timur.png'); background-position:"

src="images/transparentMap.gif" class="region jkt-map" alt="Medan Timur">

<img style="display: none; width:464px; height:700px;

background:url('images/perjuangan.png'); background-position:" src="images/transparentMap.gif" class="region perjuangan-map" alt="Medan Perjuangan">

<img style="display: none; width:464px; height:700px;

background:url('images/tembung.png'); background-position:"

src="images/transparentMap.gif" class="region tembung-map" alt="Medan Tembung">

<img style="display: none; width:464px; height:700px; background:url('images/denai.png'); background-position:"

src="images/transparentMap.gif" class="region denai-map" alt="Medan Denai">

<img style="display: none; width:464px; height:700px; background:url('images/amplas.png'); background-position:"

(7)

src="images/transparentMap.gif" class="region amplas-map" alt="Medan Amplas">

<img style="display: none; width:464px; height:700px; background:url('images/johor.png'); background-position:"

src="images/transparentMap.gif" class="region johor-map" alt="Medan Johor">

<img style="display: none; width:464px; height:700px;

background:url('images/tuntungan.png'); background-position:" src="images/transparentMap.gif" class="region tuntungan-map" alt="Medan Tuntungan">

<img style="display: none; width:464px; height:700px; background:url('images/sunggal.png'); background-position:"

src="images/transparentMap.gif" class="region sunggal-map" alt="Medan Sunggal">

<img style="display: none; width:464px; height:700px; background:url('images/petisah.png'); background-position:"

src="images/transparentMap.gif" class="region petisah-map" alt="Medan Petisah">

<img style="display: none; width:464px; height:700px; background:url('images/baru.png'); background-position:"

src="images/transparentMap.gif" class="region baru-map" alt="Medan Baru">

<img style="display: none; width:464px;

height:700px;background:url('images/barat.png');

background-position:" src="images/transparentMap.gif" class="region barat-map" alt="Medan Baru">

<img style="display: none; width:464px; height:700px; background:url('images/polonia.png');

background-position:" src="images/transparentMap.gif" class="region polonia-map" alt="Medan Polonia">

<img style="display: none; width:464px; height:700px; background:url('images/maimun.png');

background-position:" src="images/transparentMap.gif" class="region maimun-map" alt="Medan Maimun">

<img style="display: none; width:464px; height:700px; background:url('images/kota.png');

background-position:" src="images/transparentMap.gif" class="region kota-map" alt="Medan Kota">

<img style="display: none; width:464px; height:700px; background:url('images/area.png');

background-position:" src="images/transparentMap.gif" class="region area-map" alt="Medan Area">

</div></body></html> <?php

}

else { header('location:halaman_utama.php'); } ?>

(8)

2. taufiq.css

body{background: url(images/bg_hatch_grey_dark.jpg);} #taufiq_pembungkus {margin: auto;

width: 1000px; }

#taufiq_kepala {width: 1000px; height: 250px;

background: url(images/header-jadi.jpg) no-repeat; margin: auto;

}

#taufiq_konten {float: left; width: 1000px; background:#CFF; } #taufiq_isi {background:#FFF; padding: 10px; float: left; width: 450px; margin:10px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_isi2 {margin: 10px 10px 10px 0px; padding: 10px 10px 10px 10px ; float: left;

width: 430px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

text-align:justify;} }

#taufiq_kanan {padding:10px 20px; -moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

float: right; margin-top: 10px; margin-right: 15px; width: 460px;

}

#bawah {clear: both; float: left; padding: 25px; width: 950px; color: #FFF; text-align: left; background: #333333; } #menu{width: 100%; margin: 0;

padding: 10px 0 0 0; list-style: none; background: #111;

background: -moz-linear-gradient(#444, #111);

(9)

top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111); -moz-border-radius: 50px;

border-radius: 50px;

-moz-box-shadow: 0 2px 1px #9c9c9c; -webkit-box-shadow: 0 2px 1px #9c9c9c; box-shadow: 0 2px 1px #9c9c9c;

}

#menu li{float: left; padding: 0 0 10px 0; position: relative; line-height: 0; }

#menu a {float: left; height: 25px; padding: 0 25px; color: #999;

text-transform: uppercase;

font: bold 12px/25px Arial, Helvetica; text-decoration: none;

text-shadow: 0 1px 0 #000; }

#menu li:hover > a{color: #fafafa;} #menu li:hover > ul{display: block;} /* Sub-menu */

#menu ul {list-style: none; margin: 0; padding: 0; display: none; position: absolute; top: 35px; left: 0; z-index: 99999; background: #444;

background: -moz-linear-gradient(#444, #111);

background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));

background: -webkit-linear-gradient(#444, #111); background: -o-linear-gradient(#444, #111); background: -ms-linear-gradient(#444, #111); background: linear-gradient(#444, #111);

-moz-box-shadow: 0 0 2px rgba(255,255,255,.5); -webkit-box-shadow: 0 0 2px rgba(255,255,255,.5); box-shadow: 0 0 2px rgba(255,255,255,.5);

-moz-border-radius: 5px; border-radius: 5px; }

#menu ul ul{top: 0; left: 150px;} #menu ul li{float: none;

margin: 0; padding: 0; display: block;

-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; -webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777; box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;

(10)

}

#menu ul { padding: 10px; height: 10px; width: 130px; height: auto; line-height: 1; display: block; white-space: nowrap; float: none; text-transform: none; }

#menu ul a:hover{background: #0186ba;

background: -moz-linear-gradient(#04acec, #0186ba);

background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));

background: -webkit-linear-gradient(#04acec, #0186ba); background: -o-linear-gradient(#04acec, #0186ba); background: -ms-linear-gradient(#04acec, #0186ba); background: linear-gradient(#04acec, #0186ba); }

#menu ul li:first-child > a{ -moz-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0;}

#menu ul li:first-child > a:after{content: ''; position: absolute;

left: 30px; top: -8px; width: 0; height: 0;

border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;

}

#menu ul ul li:first-child a:after{left: -8px; top: 12px;

width: 0; height: 0; border-left: 0;

border-bottom: 5px solid transparent; border-top: 5px solid transparent; border-right: 8px solid #444; }

#menu ul li:first-child a:hover:after{border-bottom-color: #04acec; } #menu ul ul li:first-child a:hover:after{ border-right-color:

#04acec; border-bottom-color: transparent; }

#menu ul li:last-child > a{

-moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; }

#menu:after {visibility: hidden; display: block;

font-size: 0; content: " "; clear: both; height: 0; }

#taufiq_sekolah {padding: 20px; float: left;

width: 930px; margin:20px;

(11)

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_sekolah_table {padding:10px; float: left;

width: 440px; margin:10px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_daftar {padding-left:60px; float: left;

width: 400px; margin:5px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_daftar2 {padding:30px; float: right;

width: 460px; margin:5px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_peta {padding: 5px; float: right;

width: 480px; margin:5px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_login {padding: 5px; float: right;

width: 300px; margin:5px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_konten_atas {padding: 10 px ,20px, 10px, 30px; float: left;

width: 965px; margin:20px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

.clearboth {clear: both; }

map {border: solid 0px green;} area {border: solid 0px : blue;}

#map-view-container {position: relative;

font-family:"Arial Black", Gadget, sans-serif;} #map-container {float: left;

(12)

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;}

#regionMapView {border: none;}

#map-view-container img.map {position: relative;z-index: 100;border: solid 0px;}

#map-view-container img.map area:hover { border: solid 0px red;} #map-view-container img.region {display: none;left: 0px;

position: absolute; top: 0px;

z-index: 20;

border: solid 0px;}

#map-view-container img.regionBg {left: 0px; position: absolute;

top: 0px; z-index: 19;

border: solid 0px;} #dasar{float:left;

width:450px;

background-color:#fffff3;padding:5px 5px 5px 5px;border-bottom:0 none;box-shadow:0 0 6px rgba(0,0,0,0.55);margin-top:0px; }

#dasar2{

float:right; width:450px;

background-color:#fffff3;padding:5px 5px 5px 5px;border-bottom:0 none;box-shadow:0 0 6px rgba(0,0,0,0.55);margin-top:0px; }

#table table { border-collapse:collapse; width:100%;

box-shadow: 0px 20px 25px -20px black; margin:0 auto 25px auto;}

#table table, th, td {border: 1px solid white; padding:5px 10px;

}

#table tr {color:black;

font:normal 14px Arial, Helvetica, sans-serif; -webkit-transition:All 1s ease;

-moz-transition:All 1s ease; -o-transition:All 1s ease; transition:All 1s ease; }

#table tr:nth-child(even) { color:blue;}

#table tr:hover, tr:nth-child(even):hover {color:white; text-shadow: 0px 0px 15px #FFFFFF;}

#table th {

background-image: linear-gradient(bottom, #5789AB 13%, #96C4D9 67%); background-image: -o-linear-gradient(bottom, #5789AB 13%, #96C4D9 67%);

color:white;

font:normal 16px Impact, Charcoal, sans-serif; text-shadow: 1px 1px 0px #151F26;

}

(13)

.col2 {background:#CC0;} .col3 {background:#FF6666;} h1, div#loginForm * { margin: 0;

padding: 0;

list-style: none; }

h1 {float: left;} div#loginForm {

float: left; }

div#loginForm ul li { display: inline; }

#taufiq_map_lihat {padding:10px 80px; float:left;

width: 820px; margin:10px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_komentar {padding:10px 80px; float:left;

width: 640px; margin:10px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_input {padding:10px 20px; float:left;

width: 600px; margin:10px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

} #taufiq_map_lihat1 {clear:both; padding:8px 8px; float:left; width: 230px; margin:10px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

}

#taufiq_map_lihat2{padding:8px 8px; float:left;

width: 690px; margin:10px;

-moz-box-shadow: 0 0 5px #888; -webkit-box-shadow: 0 0 5px#888; box-shadow: 0 0 5px #888;

} #taufiq_detail_sekolah { padding:10px 80px; float:left; width: 820px; margin:10px; } #jendelainfo{position:absolute;z-index:1000;top:400;

(14)

left:400;background-color:black;display:none;} #jendelainfo1{position:absolute;z-index:1000;top:400; left:400;background-color:black;display:none;} #jendelainfo2{position:absolute;z-index:1000;top:400; left:400;background-color:black;display:none;} #jendelainfo3{position:absolute;z-index:1000;top:400; left:400;background-color:black;display:none;} #kotakpencarian{width:350px; border:solid 1px #000;

padding:3px; } #hasilpencarian{position:relative; width:350px; display:none; float:right;

border-left:solid 1px #dedede; border-right:solid 1px #dedede; border-bottom:solid 1px #dedede; overflow:hidden;

}

.kotak_hasilpencarian{font-family:Tahoma, Geneva, sans-serif; padding:4px; border-top:solid 1px #dedede; font-size:12px; height:35px; } .kotak_hasilpencarian:hover{ background:#3b5998; color:#FFFFFF; }

3. koneksi.php

<?php mysql_connect("localhost","root",""); mysql_select_db("webgis"); ?> Logout.php <?php session_start(); session_destroy(); header('location:index.php'); ?> Aksi.php <?php ini_set("display_errors","Off"); include "koneksi.php"; $act=$_GET['act']; $npsn=$_GET['npsn']; $username=$_GET['username']; $id_berita=$_GET['id_berita']; if ($act=='hapus'){

mysql_query("DELETE FROM sekolah WHERE npsn='$npsn'"); }

elseif ($act=='hapususer'){

mysql_query("DELETE FROM users WHERE username='$username'"); header('location:../modul/users.php');

(15)

}

elseif ($act=='hapusberita'){

mysql_query("DELETE FROM berita WHERE id_berita='$id_berita'"); header('location:../modul/berita.php');

}

elseif ($act=='edit'){

/*echo"lat = $_POST[x], lng = $_POST[y],

npsn = '$_POST[npsn]', nama = '$_POST[nama]', alamat = '$_POST[alamat]', kec = '$_POST[kec]',

kel = '$_POST[kel]', kdpos = '$_POST[kdpos]', telp = '$_POST[telp]', email = '$_POST[email]' waktu = '$_POST[waktu]', tatus = '$_POST[status]', thn = '$_POST[thn]'

npsn = '$_POST[npsn]'";*/

$query = "update sekolah set lat = $_POST[x], lng = $_POST[y],

nss = '$_POST[nss]', nama = '$_POST[nama]', alamat = '$_POST[alamat]',

kec = '$_POST[kec]', kel = '$_POST[kel]', kdpos = '$_POST[kdpos]', telp = '$_POST[telp]',

email = '$_POST[email]', waktu = '$_POST[waktu]', status = '$_POST[status]', thn = '$_POST[thn]'

WHERE npsn = '$_POST[npsn]'"; $result = mysql_query($query);

?><script type='text/javascript'> history.go(-2); </script><?php } ?>

4. ambildatasma.php

<?php include "koneksi.php"; $akhir = $_GET['akhir']; if($akhir==1){

$query = "SELECT * FROM sekolah where tingkat = 'SMA/MA' ORDER BY id DESC LIMIT 1";

}else{

$query = "SELECT * FROM sekolah where tingkat = 'SMA/MA'"; }

$data = mysql_query($query); $json = '{"wilayah": {'; $json .= '"petak":[ ';

while($x = mysql_fetch_array($data)){ $json .= '{';

(16)

"npsn":"'.htmlspecialchars($x['npsn']).'", "nama":"'.htmlspecialchars($x['nama']).'", "alamat":"'.htmlspecialchars($x['alamat']).'", "status":"'.htmlspecialchars($x['status']).'", "nss":"'.htmlspecialchars($x['nss']).'", "x":"'.$x['lat'].'", "y":"'.$x['lng'].'" },'; }

$json = substr($json,0,strlen($json)-1); $json .= ']';

$json .= '}}'; echo $json; ?>

5. carisma.php

<table border="2px"> <col class="col1"> <col class="col2"> <col class="col3"> <col class="col3"> <tr><th>NPSN</th><th>NAMA</th><th>Aksi</th><th>Edit</th><th>Hapus</th ></tr> <tbody> <?php include"koneksi.php";] $batasan =10;

$kec = $_GET['kec']; $ss= $_GET['ss']; $jj = $_GET['jj'];

$angka = $_GET['angka']; $batas = $_GET['batas']; $halaman = $_GET['halaman']; $no = 1;

if (((isset($kec))AND($ss=='0'))) {

$query = "select * from sekolah where tingkat = 'SMA/MA' AND kec = '$kec'";

$data = mysql_query($query);

while($x = mysql_fetch_array($data)){ echo" <tr> <td>$x[npsn]</td> <td>$x[nama]</td> <td><a href='../halaman_utama.php?npsn=$x[npsn]&halaman=lihat'>Lihat Lokasi</a></td> <td><a href='edit.php?npsn=$x[npsn]'>Edit</a></td> <td><a href='aksi.php?act=hapus&npsn=$x[npsn]'>Hapus</a></td> </tr> "; $no++; }}

(17)

$query = "select * from sekolah where tingkat = 'SMA/MA' AND status = '$ss'";

$data = mysql_query($query);

elseif ((isset($ss))AND(isset($kec))) {

$query = "select * from sekolah where tingkat = 'SMA/MA' AND status = '$ss' AND kec = '$kec'";

$data = mysql_query($query);

$query = "select * from sekolah where tingkat = 'SMA/MA'"; $data = mysql_query($query);

6. tambahsma.php

(18)

<title>Tambah Tempat SMA</title>

src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"

src="baru/jquery-ui-1.10.1.custom/js/jquery-1.9.1.js"></script> <script type="text/javascript">

//inisialisasi variabel tampung var peta;

var pertama = 0; var jenis = "sma";

var anpsn = new Array(); var anama = new Array(); var aalamat = new Array(); var astatus = new Array(); var alnpsn = new Array(); var i;

var url;

var gambar_tanda;

//load peta google maps function peta_awal(){

var Medan = new google.maps.LatLng(3.590006,98.675394); var petaoption = {

zoom: 13, center: Medan,

mapTypeId: google.maps.MapTypeId.ROADMAP };

peta = new

google.maps.Map(document.getElementById("petaku"),petaoption); google.maps.event.addListener(peta,'click',function(event){ kasihtanda(event.latLng); }); ambildatabase('awal'); } $(document).ready(function(){ $("#tombol_simpan").click(function(){ var x = $("#x").val();

var y = $("#y").val();

var npsn= $("#npsn").val(); var nss = $("#nss").val(); var nama = $("#nama").val(); var alamat = $("#alamat").val(); var kec = $("#kec").val();

var kel = $("#kel").val(); var kdpos = $("#kdpos").val(); var telp = $("#telp").val(); var email = $("#email").val(); var waktu = $("#waktu").val(); var ak = $("#ak").val();

var status = $("#status").val(); var thn = $("#thn").val();

(19)

cache: false, success: function(msg){ alert(msg); $("#loading").hide(); $("#x").val(""); $("#y").val(""); $("#npsn").val(""); $("#nss").val(""); $("#nama").val(""); $("#alamat").val(""); $("#kec").val(""); $("#kel").val(""); $("#kdpos").val(""); $("#telp").val(""); $("#email").val(""); $("#waktu").val(""); $("#ak").val(""); $("#status").val(""); $("#thn").val(""); ambildatabase('akhir'); } }); }); $("#tutup").click(function(){ $("#jendelainfo").fadeOut(); }); }); function kasihtanda(lokasi){ set_icon(jenis);

tanda = new google.maps.Marker({ position: lokasi, map: peta, icon: gambar_tanda }); $("#x").val(lokasi.lat()); $("#y").val(lokasi.lng()); } function set_icon(jenisnya){ switch(jenisnya){ case "sma":

gambar_tanda = 'icon/sma.png'; break;

case "airport":

gambar_tanda = 'icon/airport.png'; break;

case "masjid":

gambar_tanda = 'icon/mosque.png'; break;

} }

function ambildatabase(akhir){ if(akhir=="akhir"){

url = "ambildatasma.php?akhir=1"; }else{

url = "ambildatasma.php?akhir=0"; }

$.ajax({ url: url,

dataType: 'json', cache: false,

(20)

success: function(msg){

for(i=0;i<msg.wilayah.petak.length;i++){

// kodestox[i] = msg.wilayah.petak[i].kode;

// alamatx[i] = msg.wilayah.petak[i].alamat; //kecx[i] = msg.wilayah.petak[i].kec; //daerahx[i] = msg.wilayah.petak[i].daerah;

anpsn[i] = msg.wilayah.petak[i].npsn; anama[i] = msg.wilayah.petak[i].nama; aalamat[i] = msg.wilayah.petak[i].alamat; astatus[i] = msg.wilayah.petak[i].status; alnpsn[i] = msg.wilayah.petak[i].lnpsn;

var point = new google.maps.LatLng( parseFloat(msg.wilayah.petak[i].x), parseFloat(msg.wilayah.petak[i].y)); tanda = new google.maps.Marker({

position: point, map: peta, icon: 'icon/sma.png' }); setinfo (tanda,i); } } }); } function setjenis(jns){ jenis = jns;

}

function setinfo(petak, nomor){

google.maps.event.addListener(petak, 'click', function() { $("#jendelainfo").fadeIn(); $("#teksnpsn").html(anpsn[nomor]); $("#teksnama").html(anama[nomor]); $("#teksalamat").html(aalamat[nomor]); $("#teksstatus").html(astatus[nomor]); $("#teksdaerah").html(daerahx[nomor]); }); } </script> </head> <body onLoad="peta_awal()"> <center>

<tr>

<td><td width="300" bgcolor="#00FFFF" height="19" valign="top" colspan="2"><p align="center">Kode NPSN : <span

id="teksnpsn"></span></td></tr> <tr>

<td><td width="300" bgcolor="#00FFFF" height="19" valign="top" colspan="2"><p align="center">Alamat : <span

(21)

<tr>

<td><td width="300" bgcolor="#00FFFF" height="19" valign="top" colspan="2"><p align="center">Status :<span

id="teksstatus"></span></td></tr> </table>

<B>TAMBAH DAFTAR SEKOLAH MENENGAH ATAS</B> </center> </ul> </div> <div class="clear"> <br> </div>

<div id="petaku" style="width:auto; height:600px;" ></div> <div id="isi"> <p>Silakan Isikan Data Sekolah :</p>

<tr><td><p><strong>Lokasi Sekolah</strong></p></td></tr> </table>

<td width="158">Koordinat X (Lat)</td> <td width="8">:</td>

</tr> <tr>

<td>Koordinat Y (Long)</td> <td>:</td>

<tr>

<tr>

<tr>

<td>Nama Sekolah</td> <td>:</td>

<tr>

<td>Alamat </td> <td>:</td>

<td><input type=text id="alamat" size=60 maxlength="60"></td> </tr> <tr> <tr> <td>Kecamatan</td> <td>:</td> <td><select id='kec'>

(22)

<option value='Medan Area'>Medan Area</option> <option value='Medan Barat'>Medan Barat</option> <option value='Medan Baru'> Medan Baru</option>

<option value='Medan Belawan Kota'>Medan Belawan Kota</option> <option value='Medan Deli'>Medan Deli</option>

<option value='Medan Helvetia'>Medan Helvetia</option> <option value='Medan Johor'>Medan Johor</option>

<option value='Medan Kota'> Medan Kota</option> <option value='Medan Labuhan'>Medan Labuhan</option> <option value='Medan Maimun'>Medan Maimun</option> <option value='Medan Marelan'>Medan Marelan</option>

<option value='Medan Perjuangan'>Medan Perjuangan</option> <option value='Medan Petisah'>Medan Petisah</option>

<option value='Medan Polonia'>Medan Polonia</option> <option value='Medan Selayang'>Medan Selayang</option> <option value='Medan Sunggal'>Medan Sunggal</option> <option value='Medan Tembung'>Medan Tembung</option> <option value='Medan Timur'>Medan Timur</option>

<option value='Medan Tuntungan'>Medan Tuntungan</option></select> </td>

</tr> <tr>

<td>Kelurahan </td> <td>:</td>

<tr>

<td><input type=text id="kdpos" size=6 maxlength="6"></td> </tr>`

<tr>

<td>Telepon </td> <td>:</td>

<tr>

<td>Email</td> <td>:</td>

<tr>

<td>Waktu Mulai Sekolah</td> <td>:</td> <td><select id='waktu'> <option value='Pagi'>PAGI</option> <option value='Siang'>SIANG</option> <option value='Sore'>SORE</option> <option value='Kombinasi'>KOMBINASI</option> </select></td> <tr> <td>Akreditasi</td> <td>:</td> <td><select id='ak'> <option value='A'>A</option> <option value='B'>B</option> <option value='C'>C</option> <option value='TT'>TT</option> </select></td> </tr>

(23)

<td>Status</td> <td>:</td> <td><select id='status'> <option value='Negeri'>Negeri</option> <option value='Swasta'>Swasta</option> </select></td> </tr> <tr>

<td>Tahun Buka </td> <td>:</td>

<button id="tombol_simpan">Simpan Data</button> </td>

</tr> </table> </div></div> <div id="footer">

<div class="footer_links">xxxxxxxxx</a><a href="#" title=""></a> </div> <div class="copyright"></div> </div></div> </body> </html>

7. editsma.php

<?php ini_set("display_errors","Off"); ?> <html> <head>

src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"

src="baru/jquery-ui-1.10.1.custom/js/jquery-1.9.1.js"></script> <script type="text/javascript">

//inisialisasi variabel tampung var peta;

var pertama = 0; var jenis = "sma";

var anpsn = new Array(); var anama = new Array(); var aalamat = new Array(); var astatus = new Array(); var alnpsn = new Array(); var i;

var url;

var gambar_tanda;

//load peta google maps function peta_awal(){

(24)

var petaoption = { zoom: 13, center: Medan,

mapTypeId: google.maps.MapTypeId.ROADMAP };

peta = new

var y = $("#y").val();

var npsn= $("#npsn").val(); var nss = $("#nss").val(); var nama = $("#nama").val(); var alamat = $("#alamat").val(); var kec = $("#kec").val();

var kel = $("#kel").val(); var kdpos = $("#kdpos").val(); var telp = $("#telp").val(); var email = $("#email").val(); var waktu = $("#waktu").val(); var ak = $("#ak").val();

var status = $("#status").val(); var thn = $("#thn").val();

$("#loading").show(); $.ajax({ url: "simpansma.php", data: "&x="+x+"&y="+y+"&npsn="+npsn+"&nss="+nss+"&nama="+nama+"&alamat="+al amat+"&kec="+kec+"&kel="+kel+"&kdpos="+kdpos+"&telp="+telp+"&email="+ email+"&waktu="+waktu+"&ak="+ak+"&status="+status+"&thn="+thn, cache: false, success: function(msg){ alert(msg); $("#loading").hide(); $("#x").val(""); $("#y").val(""); $("#npsn").val(""); $("#nss").val(""); $("#nama").val(""); $("#alamat").val(""); $("#kec").val(""); $("#kel").val(""); $("#kdpos").val(""); $("#telp").val(""); $("#email").val(""); $("#waktu").val(""); $("#ak").val(""); $("#status").val(""); $("#thn").val(""); ambildatabase('akhir'); } }); });

(25)

$("#tutup").click(function(){ $("#jendelainfo").fadeOut(); }); }); function kasihtanda(lokasi){ set_icon(jenis);

tanda = new google.maps.Marker({ position: lokasi, map: peta, icon: gambar_tanda }); $("#x").val(lokasi.lat()); $("#y").val(lokasi.lng()); } function set_icon(jenisnya){ switch(jenisnya){ case "sma":

gambar_tanda = 'icon/sma.png'; break;

case "airport":

gambar_tanda = 'icon/airport.png'; break;

case "masjid":

gambar_tanda = 'icon/mosque.png'; break;

} }

function ambildatabase(akhir){ if(akhir=="akhir"){

url = "ambildatasma.php?akhir=1"; }else{

url = "ambildatasma.php?akhir=0"; } $.ajax({ url: url, dataType: 'json', cache: false, success: function(msg){ for(i=0;i<msg.wilayah.petak.length;i++){

// kodestox[i] = msg.wilayah.petak[i].kode;

// alamatx[i] = msg.wilayah.petak[i].alamat; //kecx[i] = msg.wilayah.petak[i].kec; //daerahx[i] = msg.wilayah.petak[i].daerah;

anpsn[i] = msg.wilayah.petak[i].npsn; anama[i] = msg.wilayah.petak[i].nama; aalamat[i] = msg.wilayah.petak[i].alamat; astatus[i] = msg.wilayah.petak[i].status; alnpsn[i] = msg.wilayah.petak[i].lnpsn; var point = new google.maps.LatLng(

parseFloat(msg.wilayah.petak[i].x), parseFloat(msg.wilayah.petak[i].y)); tanda = new google.maps.Marker({

position: point, map: peta,

icon: 'icon/sma.png' });

(26)

} } }); }

function setjenis(jns){ jenis = jns;

}

function setinfo(petak, nomor){

<tr>

</tr> <tr>

<td><td width="300" bgcolor="#00FFFF" height="19" valign="top" colspan="2"><p align="center">Kode NPSN : <span

id="teksnpsn"></span></td></tr> <tr>

<td><td width="300" bgcolor="#00FFFF" height="19" valign="top" colspan="2"><p align="center">Alamat : <span

id="teksalamat"></span></td></tr> <tr>

<td><td width="300" bgcolor="#00FFFF" height="19" valign="top" colspan="2"><p align="center">Status :<span

id="teksstatus"></span></td> </tr> </table> <div id="main_content"> <div id="top_banner"></div> <div id="page_content"> <div> <ul class="menu">

</div>

(27)

<form method='get' action='editsma.php?kec=$kec&pr=$pr'><label for="kec">Kecamatan</label>

<option value='0'>-Seluruh-</option>

<option value='Medan Amplas'>Medan Amplas</option> <option value='Medan Area'>Medan Area</option> <option value='Medan Barat'>Medan Barat</option> <option value='Medan Baru'> Medan Baru</option>

<option value='Medan Belawan Kota'>Medan Belawan Kota</option> <option value='Medan Deli'>Medan Deli</option>

<option value='Medan Helvetia'>Medan Helvetia</option> <option value='Medan Johor'>Medan Johor</option>

<option value='Medan Perjuangan'>Medan Perjuangan</option> <option value='Medan Petisah'>Medan Petisah</option>

<option value='Medan Tuntungan'>Medan Tuntungan</option></select> <label for="status">Status</label> <select name="ss" id="ss" >

<option value="0">-Seluruh-</option> <option value="Negeri">Negeri</option> <option value="Swasta">Swasta</option>

</select> <br /><br>

<?php include "carisma.php"; ?>

</div></div> <div id="footer">

<div class="footer_links">xxxxxxxxx</a><a href="#" title=""></a> </div> <div class="copyright"></div></div></div> </body> </html>

8. users.php

(28)

<div id="isi"><br><center><?php include"koneksi.php";

$no = 1;

echo "<table border=2 bordercolor='#0033CC' bgcolor='#FFFFFF'> <tr>

<th bgcolor='#990000'>Nama Lengkap</th> <th bgcolor='#990000'>User</th>

<th bgcolor='#990000'>Eksekusi</th> </tr>";

$tampil=mysql_query("SELECT * FROM users"); while ($r=mysql_fetch_array($tampil)){ echo "

<td bgcolor='#CC9933' width=50>$r[nama_lengkap]</td> <td bgcolor='#CC9933' width=90>$r[username]</td> <td bgcolor='#CC9933'><a href='aksi.php?act=hapususer&username=$r[username]'>Hapus</a> | <a href=>Hapus</a></td> </tr>"; $no++; } echo "</table>"; ?> <br> </div></div> <div id="footer">

<div class="footer_links">Muhammad Taufiq</a><a href="#" title=""></a> </div>

9. cari.php

<table border="2px"> <col class="col1"> <col class="col2"> <col class="col3"> <tr><th>NPSN</th><th>NAMA</th><th>Aksi</th></tr> <?php include"koneksi.php"; ?> <tbody> <?php

$kec = $_GET['kec']; $ss= $_GET['ss']; $jj = $_GET['jj']; $batas = 10;

$halaman = $_GET['halaman']; if(empty($halaman)){

$posisi=0; $halaman=1; }

else{

$posisi = ($halaman-1) * $batas; }

(29)

$no = 1;

if ((($kec=='0')AND($jj=='0')AND($ss=='0'))) { $e = "kec=0&jj=0&ss=0";

$query1 = "select * from sekolah ";

$query = "select * from sekolah limit $posisi,$batas"; $data = mysql_query($query);

while($x = mysql_fetch_array($data)){ echo" <tr> <td class='title'>$x[npsn]</td> <td class='title'>$x[nama]</td> <td class='title'><a href='halaman_utama.php?npsn=$x[npsn]&halaman=lihat'>Lihat Lokasi</a></td> </tr> "; $no++; } }

elseif (((isset($ss))AND($kec=='0')AND($jj=='0'))) { $e = "ss=$ss&kec=0&jj=0";

$query1 = "select * from sekolah where status = '$ss' "; $query = "select * from sekolah where status = '$ss' limit $posisi,$batas";

$data = mysql_query($query);

elseif (((isset($jj))AND($kec=='0')AND($ss=='0'))) { $e = "jj=$jj&kec=0&ss=0";

$query1 = "select * from sekolah where tingkat = '$jj'"; $query = "select * from sekolah where tingkat = '$jj' limit $posisi,$batas";

$data = mysql_query($query);

elseif (((isset($kec))AND($jj=='0')AND($ss=='0'))) { $query1 = "select * from sekolah where kec = '$kec'";

(30)

$query = "select * from sekolah where kec = '$kec' limit $posisi,$batas";

$data = mysql_query($query);

$kec = str_replace(' ', '+', $kec); $e = "kec=$kec&jj=0&ss=0";

}

elseif (((isset($kec))AND($jj=='0')AND(isset($ss)))) {

$query1 = "select * from sekolah where kec = '$kec' AND status = '$ss'";

$query = "select * from sekolah where kec = '$kec' AND status = '$ss' limit $posisi,$batas";

$data = mysql_query($query);

$kec = str_replace(' ', '+', $kec); $e = "kec=$kec&jj=0&ss=0";

}

elseif ((($kec=='0')AND((isset($jj)))AND(isset($ss)))) {

$query1 = "select * from sekolah where tingkat = '$jj' AND status = '$ss'";

$query = "select * from sekolah where tingkat = '$jj' AND status = '$ss' limit $posisi,$batas";

$data = mysql_query($query);

(31)

$e = "kec=0&jj=$jj&ss=$ss"; }

elseif((((isset($kec))AND(isset($jj))AND ($ss=='0')))){

$query1 = "select * from sekolah where kec = '$kec' AND tingkat = '$jj'";

$query = "select * from sekolah where kec = '$kec' AND tingkat = '$jj' limit $posisi,$batas";

$data = mysql_query($query);

$kec = str_replace(' ', '+', $kec); $e = "kec=$kec&jj=$jj&ss=0";

}

elseif((((isset($kec))AND(isset($ss))AND(isset($jj))))){

$query1 = "select * from sekolah where kec = '$kec' AND tingkat = '$jj' AND status = '$ss'";

$query = "select * from sekolah where kec = '$kec' AND tingkat = '$jj' AND status = '$ss' limit $posisi,$batas";

$data = mysql_query($query);

$kec = str_replace(' ', '+', $kec); $e = "kec=$kec&jj=$jj&ss=$ss"; }

else {

$e = "kec=0&jj=0&ss=0";

$query1 = "select * from sekolah ";

$query = "select * from sekolah limit $posisi,$batas"; $data = mysql_query($query);

while($x = mysql_fetch_array($data)){ echo"

<tr>

(32)

<td class='title'><a

href='halaman_utama.php?npsn=$x[npsn]&halaman=lihat'>Lihat Lokasi</a></td>

</tr> ";

$no++; } } ?>

</tbody> <tfoot>

</tfoot> </table> </div> <?php

$file = $_SERVER['PHP_SELF']; echo"<br> Halaman : ";

$tampil = mysql_query("$query1"); $jmldata = mysql_num_rows($tampil); $jmlhalaman = ceil($jmldata/$batas); for($i=1;$i<=$jmlhalaman;$i++)

if ($i != $halaman){

echo " <a href=$file?$e&halaman=$i&batas=$batas>$i</A> | "; }

else{

echo " <b>$i</b> | "; }

echo "<p>Total sekolah : <b>$jmldata</b> sekolah</p>"; ?>

10. input_pesan.php

<?php

include"styles/library.php"; include"styles/fungsi_thumb.php"; include "koneksi.php";

$lokasi_file=$_FILES['fupload']['tmp_name']; $tipe_file=$_FILES['fupload']['type'];

$nama_file=$_FILES['fupload']['name']; $acak= rand(1,99);

$nama_file_unik= $acak.$nama_file; $nama = $_POST['nama'];

$email = $_POST['email']; $komentar = $_POST['komentar'];

$npsn = $_POST['npsn']; echo "npsn : $npsn";

echo "npsn : $npsn"; echo "Nama : $nama"; echo "Email : $email";

echo "Komentar : $komentar<br><br>"; if (!empty($lokasi_file)){

(33)

echo "<script>window.alert('Upload Gagal, Pastikan File yang di Upload bertipe *.JPG');

window.location=('../../media.php?module=produk)</script>"; }else{

UploadImage($nama_file_unik); $query = "INSERT INTO saran

VALUES('','$nama','$email','$komentar','$npsn','$tgl_sekarang','$nama _file_unik')";

$hasil = mysql_query($query);

header("location:lihat.php?npsn=$npsn"); }}

else{

$query = "INSERT INTO saran

VALUES('','$nama','$email','$komentar','$npsn','$tgl_sekarang','')"; $hasil = mysql_query($query);

}

11. library.php

<?php

//date_default_timezone_set('Asia/Jakarta'); // PHP 6 mengharuskan penyebutan timezone.

$seminggu =

array("Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"); $hari = date("w");

$hari_ini = $seminggu[$hari]; $tgl_sekarang = date("Ymd"); $tgl_skrg = date("d"); $bln_sekarang = date("m"); $thn_sekarang = date("Y"); $jam_sekarang = date("H:i:s");

$nama_bln=array(1=> "Januari", "Februari", "Maret", "April", "Mei", "Juni", "Juli", "Agustus", "September",

"Oktober", "November", "Desember"); ?>

12. fungsi_thumb.php

<?php

function UploadImage($fupload_name){ //direktori gambar

$vdir_upload = "images/";

$vfile_upload = $vdir_upload . $fupload_name; //Simpan gambar dalam ukuran sebenarnya

move_uploaded_file($_FILES["fupload"]["tmp_name"], $vfile_upload); //identitas file asli

$im_src = imagecreatefromjpeg($vfile_upload); $src_width = imageSX($im_src);

$src_height = imageSY($im_src); //Simpan dalam versi small 110 pixel //Set ukuran gambar hasil perubahan $dst_width = 55;

(34)

$dst_height = ($dst_width/$src_width)*$src_height; //proses perubahan ukuran

$im = imagecreatetruecolor($dst_width,$dst_height); imagecopyresampled($im, $im_src, 0, 0, 0, 0, $dst_width, $dst_height, $src_width, $src_height);

//Simpan gambar

imagejpeg($im,$vdir_upload . "small_" . $fupload_name); //Hapus gambar di memori komputer

imagedestroy($im_src); imagedestroy($im); }

function UploadBanner($fupload_name){ //direktori banner

$vdir_upload = "../../../foto_banner/";

$vfile_upload = $vdir_upload . $fupload_name; //Simpan gambar dalam ukuran sebenarnya

move_uploaded_file($_FILES["fupload"]["tmp_name"], $vfile_upload); }

function UploadFile($fupload_name){ //direktori file

$vdir_upload = "../files/";

$vfile_upload = $vdir_upload . $fupload_name; //Simpan gambar dalam ukuran sebenarnya

move_uploaded_file($_FILES["fupload"]["tmp_name"], $vfile_upload); }

13. login.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head>

if (form.username.value == ""){

alert("Anda belum mengisikan Username."); form.username.focus();

return (false); }

if (form.password.value == ""){

alert("Anda belum mengisikan Password."); form.password.focus();

return (false); }

return (true); }

</script>

(35)

<!--p, h1, form, button{border:0; margin:0; padding:0;} body {

background-color: #D6E8F4; }

#wrapper button {

position:absolute; left:403; top:388; margin-left:150px; width:125px; height:31px; } #aksi { position:absolute; left:699px; top:432px; width:132px; height:31px; z-index:1; text-align: center; } #wrapper { position: absolute; height: 600px; width: 800px; left: 220px; top: 45px; bottom: 50px; } #inputnama { position:absolute; left:278px; top:273px; width:215px; height:23px; z-index:1; } #inputpass { position:absolute; left:278px; top:332px; width:215px; height:21px; z-index:2; }

#aksi table {

text-align: center; } --> </style> </head> <body OnLoad="document.login.username.focus();">

(36)

</div>

</div> </div>

</tr> </table> </div> </form> </body> </html>

(37)

40 DAFTAR PUSTAKA

Kadir, Abdul. 1999.

Konsep & Tuntunan Praktis Basis Data.

Yogyakarta: Andi

Kadir, Abdul. 2011.

Buku Pintar JQuery dan PHP

. Jakarta : Mediakom,

Hakim, Lukmanul. 2009.

Trik Rahasia PHP Terbongkar Lagi

, Yogyakarta :

Lokomedia.

Hakim, Lukmanul, 2008

. Membongkar Trik Rahasia Para Master PHP

,

Yogyakarta : Lokomedia.

Prahasta, Eddy. 2002,

Konsep-konsep Dasar SIG, Informatika

, Bandung.

Abidin, Hasanudin,Z. 1995.

Penentuan Posisi dengan GPS dan Aplikasinya.

, Jakarta:

PT. Pradnya Paramita.

Gabriel, Svennerberg. (2010).

Begginning Google Maps API 3.

New York: Apress

Kadir, Abdul 2003,

Pengenalan Sistem Informasi

, Andi, Yogyakarta

(38)

17 BAB 3

PERANCANGAN SISTEM

Sebelum melakukan perancangan sistem informasi, maka harus dilakukan analisis

sistem terlebih dahulu untuk memperoleh gambaran yang jelas mengenai kelebihan

dan kekurangan sistem yang sedang berjalan.

3.1 Gambaran Umum Sistem Perancangan

Secara umum perancangan sistem GIS ini bertujuan untuk menampilkan informasi

letak sekolah di kota medan. Kode dasar dari peta diambil dari google map yang di

bagikan oleh google untuk kalangan pengembang. Aplikasi ini memanipulasi letak

dari tempat-tempat sekolah.

Desain yang

userfriendly

sangat diperlukan oleh semua apikasi. Program

aplikasi peta ini dikemas secara

userfriendly

baik secara tampilan, letak navigasi, serta

posisi elemen pembangun aplikasi. Kemudahan-kemudahan yang telah dirangkai,

untuk membuat user menggunakan aplikasi dengan efektif dan efisien dalam mencari

data sekolah yang diinginkn.

Terdapat 2 tipe pengguna aplikasi peta ini yaitu Pengguna aplikasi yang

terdaftar dan pengguna aplikasi yang tidak terdaftar. Pengguna aplikasi yang terdaftar

akan bisa melakukan akses ke halaman admin, dan melakukan beberapa eksekusi

terhadap data seperti lihat tambah, hapus, pembaruan data. Sedangkan pada pengguna

aplikasi yang tidak terdaftar hanya dapat melihat imformasi mengenai letak dan info

sekolah yang ada di dalam database. Terdapat fitur pencarian sekolah secara dinamis

yang memudahkan pengguna dalam proses pencarian sekolah yang diinginkan.

(39)

18 3.2 Flowchart Sistem

Flowchart

merupakan bagan yang menunjukkan alir didalam program atau prosedur

system secara logika. Adapun

flowchart

yang didesain penulis adalah sebagai berikut :

Gambar 3.1 Flowchart Halaman Utama

Depan

START

Halaman Menu

Utama

Halaman Depan

Panduan

Cari

Lihat

Admin

_{Form Login}

Keluar

Halaman Panduan

Halaman Cari

(40)

19 Gambar 3.2 Flowchart Register

START

Formulir Registrasi

Jika Username

≠

database

F

Registrasi gagal

T

Registrasi Berhasil

Update db

(41)

20 Gambar 3.2 Flowchart Halaman Admin

Start

Input Username dan Password

Autentifikasi

True

Halaman menu Admin

home

ue

tentang

ue

Edit

Tambah

Logout

Halaman awal

Halaman tentang

Edit data

Update

update

Update db

Tambah

insert

(42)

21 3.3 Perancangan Database

Database atau basis data merupakan

kumpulan dari data-data yang saling

berhubungan yang disebut berelasi. Sebuah Database website disimpan dalam alat

penyimpanan dan membutuhkan database server untuk melayani

user

dalam

memanipulasi datanya.

Dalam aplikasi Web GIS ini dibutuhkan data-data penting mengenai sekolah

seperti NSS, nama sekolah, alamat, kecamatan, kelurahan dan lainnya. Data-data ini

nantinya akan disimpan kedalam sebuah database yang dikelompokan secara

terstruktur dalam beberapa tabel sesuai dengan informasi yang dikandungnya. Berikut

rancangan database yang digunakan :

1. Tabel Sekolah

Tabel sekolah merupakan tabel basisdata yang digunakan untuk menyimpan

data identitas sekolah dan juga terdapat penanda koordinat pada google map.

Untuk menginput basisdata ini seseorang harus mempunyai akses dalam

aplikasi.

Tabel 3.1 Tabel Sekolah

Nama Field

Tipe Data

Besar

Penjelasan

id

integer

4 Primary Key

npsn

varchar

8 Nomor pokok sekolah nasional

nss

varchar

12 Nomor standar nasional

nama

varchar

50 Nama sekolah

tingkat

varchar

10 Jenjang Pendidikan

alamat

text

Alamat sekolah

kec

varchar

30 Kecamatan

kel

varchar

50 Kelurahan

kdpos

varchar

6 Kode Pos

telp

varchar

12 Telepon

(43)

22 waktu

varchar

10 Waktu berlangsungnya pendidikan

akreditasi

varchar

1 Nilai standarisasi pendidikan

status

varchar

10 Status sekolah

thn

varchar

6 Tahun Berdirinya sekolah

lat

double

Kordinat x

lng

double

Kordinat y

2. Tabel Users

Tabel users merupakan tabel basis data yang digunakan untuk menyimpan data

user berisi username dan password untuk melakukan proses login. Sebelum

melakukan proses login, user harusregistrasi terlebih dahulu. Setelah registrasi,

administrator akan memilih user yang boleh menggunakan akses ke dalam

aplikasi.

Tabel 3.2 Tabel Users

Nama Field

Tipe Data

Besar

Penjelasan

username

varchar

50 Nama login

password

varchar

50 Password login

nama_lengkap

varchar

100 Nama lengkap user

email

varchar

100 Alamat Email

no_telp

varchar

20 No telepon user

level

varchar

20 Level user

blokir

enum('Y', 'N')

Aktif atau tidak aktif

id_session

varchar

100 Session user

3. Tabel saran

Tabel saran berisi tentang saran dan komentar mengenai sekolah yang ada di

dalam basis data.

(44)

23 Tabel 3.3 Tabel Saran

Nama Field

Tipe Data

Besar

Penjelasan

id

varchar

50 Nama login

nama

varchar

50 Password login

email

varchar

100 Nama lengkap user

pesan

varchar

100 Alamat Email

npsn

varchar

20 No telepon user

4. Tabel Berita

Tabel berita berisi tentang informasi berbentuk pemberitahuan mengenai

linkup sekolah dan juga aplikasi web gis. Tabel ini hanya bias diinput oleh user

yang terdaftar dan bias dibaca oleh siapa saja.

Tabel 3.4 Tabel Berita

Nama Field

Tipe Data

Besar

Penjelasan

Id_berita

Int

5 Primary Key

Judul

Varchar

100 Judul dari Berita

Headline

Text

Tampil sebagian berita

Isi

Text

Seluruh isi berita

Pengirim

Varchar

15 Penulis berita

Tanggal

Datetime

Waktu menulis berita

3.4 Membangun Halaman Situs

Penulis membagi katagori halaman menjadi 2 bagian, halaman admin dan halaman

pengguna biasa. Halaman admin dan halaman pengguna biasa memiliki fitur dan

fungsi yang berbeda, sehingga untuk mengakses halaman admin harus user yang

benar-benar mendapat hak akses.

(45)

24

3.4.1 Halaman Pengguna Biasa

1. Halaman index.php merupakan halaman utama yang akan diakses pertama kali

situs dibuka. Halaman ini berisikan daftar

link link

beberapa sekolah yang ada

di dalam database. Terdapat juga peta kota medan yang terbagi atas beberapa

kecamatan, user yang mengklik sebuah kecamatan akan dibawa ke halaman

lain untuk melihat sekolah apa saja yang berada di dalam kecamatan tersebut.

2. Halaman panduan.php merupakan halaman yang berisikan tentang informasi

aplikasi dan tata cara penggunaan aplikasi situs.

3. Halaman cari.php merupakan halaman yang memudahkan pengguna aplikasi

untuk bisa mencari info lokasi suatu sekolah. Tersedia bebrerapa fitur aplikasi

seperti pencarian menggunakan input text, pencarian bentuk peta, dan

pencarian dalam bentuk katagori.

4. Lihat.php merupakan halaman yang menginformasikan letak dan data sekolah

yang telah dipilih pengguna melalui aplikasi.

5. Berita.php merupakan halaman untuk melihat berita-berita yang telah

dipublikasikan oleh user terdaftar ataupun admin.

6. Registrasi.php merupkan halaman untuk formulir pendaftaran menjadi seorang

user untuk bisa menginput data dan berita.

3.4.2 Halaman Admin

Sebelum mengakses halaman admin, user diharapkan mengisi form login yang

verifikasi bahwa

user

itu

valid

ada di dalam sistem. Adapaun halaman-halaman yang

dibangun adalah.

1. Halaman_utama.php merupakan halaman awal dari halaman admin. Terdapat

peta kota medan, informasi penanda peta dan link-link yang berfungsi untuk

eksekusi data aplikasi.

2. Tambahsma.php, tambagsmk.php, tambahsmp.php halaman ini berguna untuk

menginputkan data sekolah ke dalam database. Terdapat 3 pilihan tipe sekolah

yang akan diinputkan yaitu sma, smk, smp.

3. Editsma.php, editsmk.php, editsmp.php. Halaman ini berguna untuk mengedit

data info dan letak sekolah.

(46)

25 4. Berita.php. dalam halaman ini user bisa memsaukan berita singkat mengenai

pengembangan aplikasi atau topik lain. Nantinya akan menggunakan fitur

jquery untuk menggunakan

tab option

pada berita tersebut.

5. User.php merupakan halaman untuk memanagement user, hanya admin yang

bisa menggunakan fitur ini untuk member atau tidak member akses user

terhadap aplikasi.

6. Logout.php merupakan link untuk menghancurkan sesi pada php. Dengan link

ini user tidak menggunkan hak akses lagi npada aplikasi.

3.5 Algoritma

Kumpulan perintah untuk menyelesaikan suatu masalah. Perintah-perintah ini dapat

diterjemahkan secara bertahap dari awal hingga akhir. Masalah tersebut dapat berupa

apa saja, dengan catatan untuk setiap masalah, ada kriteria kondisi awal yang harus

dipenuhi sebelum menjalankan algoritma. Algoritma akan dapat selalu berakhir untuk

semua kondisi awal yang memenuhi kriteria.

1. Algoritma Menu Utama

Langkah 1

: Tunggu

load

data lalu akan tampil halaman depan aplikasi web yang

terdiri Tabel sekolah, peta kota medan dan menu login.

Langkah 2

:Jika diklik menu tentang, maka akan tampil informasi mengenai

aplikasi pemetaaan.

Langkah 3

:Jika di klik menu cari, maka akan ditampilkan halaman cari dan sub

menu pencarian lokasi

Langkah 4

:Jika di klik menu berita, maka akan ditampilkan halaman berita dan

list berita.

Langkah 5

:Jika di klik menu registrasi, maka akan ditampilkan halaman registrasi

yang didalamnya terdapat form yang kosong.

Langkah 6

:Jika di klik menu login, maka akan ditampilkan halaman login, yang

digunakan untuk akses sebagai user.

(1)

PENGHARGAAN

Puji syukur penulis panjatkan kehadirat Tuhan Yang Maha Esa atas limpahan rahmat dan hidayah-Nya sehingga kajian tugas akhir ini dapat diselesaikan dengan baik dan dalam waktu yang telah ditetapkan.

Penyusunan tugas akhir ini masih banyak memiliki kekurangan karena keterbatasan kemampuan dan pengetahuan penulis, sehingga diharapkan kritik dan saran yang membangun serta dapat memberikan inspirasi yang baik untuk kemajuan tugas akhir ini.

Tugas Akhir merupakan salah satu syarat yang harus dilakukan setiap mahasiswa Teknik Informatika untuk dapat menyelesaikan pendidikan di Program D-3 Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam di Universitas Sumatera Utara.

Pada kesempatan ini penulis juga menyampaikan terima kasih kepada seluruh pihak yang sudah banyak membantu:

1. Bapak Drs. Sawaluddin, M.IT, selaku Dosen pembimbing pada penyelesaian tugas akhir ini yang telah memberikan panduan dan penuh kepercayaan kepada penulis untuk menyelesaikan kajian tugas akhir ini.

2. Bapak Syahriol Sitorus S.Si, MIT selaku ketua program studi D3 Teknik Informatika di Universitas Sumatera Utara.

3. Prof. Drs. Tulus, M.Si, selaku ketua Departemen Matematika di Universitas Sumatera Utara.

4. Bapak Dr. Sutarman, M.Sc, selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam di Universitas Sumatera Utara.

5. Para Staf/Pengajar Jurusan D-3 Teknik Informatika FMIPA USU.

6. Kepada ayahanda Suyatno dan bunda Suryani serta keluarga untuk segenap doa dan dukungannya

7. Seluruh rekan-rekan dari D-3 Teknik Informatika FMIPA USU, khususnya Kom C 2010, terimakasih atas saran dan kritik dalam penyusunan Tugas Akhir

ini.

(2)

ABSTRAK

Pada penulisan tugas akhir ini, penulis membuat aplikasi web gis pemetaan penyebaran sekolah di kota Medan menggunakan Google Maps Api. Medan merupakan kota yang sedang berkembang pesat dalam segala aspek pembangunan dan pendidikan. Aplikasi pemetaan ini merupakan sebuah perangkat lunak yang digunakan untuk melihat posisi geografis untuk sekolah-sekolah yang ada di kota Medan. Dalam kaitannya sistem informasi geografis sangat dibutuhkan dalam memastikan suatu data lokasi. Hal tersebut membuat penulis tertarik membuat aplikasi web gis pemetaan yang berbentuk elektonik yang praktis dan efisien dalam pencarian lokasi, ditambahkan fasilitas untuk menambah, menghapus, atau mengganti koordinat suatu lokasi. Perancangan peta yang ditampilkan dalam sistem ini menggunakan Google Maps API, perangkat lunak yang digunakan dalam membangun aplikasi ini adalah PHP (Pear Hypertext Prepocessor) sebagai bahasa pemograman, MySQL sebagai database server, Adobe Dreamweaver CS5 sebagai penunjang. Metode penelitian yang digunakan penulis adalah studi pustaka yaitu mengambil bahan dari buku-buku dan internet. Dalam menjalankan aplikasi ini dibutuhkan koneksi internet untuk meload peta.

(3)

DAFTAR ISI Halaman Persetujuan ii Pernyataan iii Penghargaan iv Abstrak v

Daftar Isi vi

Daftar Tabel viii

Daftar Gambar ix

BAB 1 PENDAHULUAN 1

1.1 Latar Belakang Masalah 1

1.2 Rumusan Masalah 2

1.3 Batasan Masalah 2

1.4 Tujuan 3

1.5 Manfaat 3

1.6 Sistematika Penulisan 4

BAB 2 LANDASAN TEORI 5

2.1 Geographic Information System 5

2.1.1 Komponen GIS 5

2.2 Google Maps 6

2.2.1 Cara Kerja Google Map 7

2.2.2 Migrasi Google Map API v2 ke v3 7

2.3 PHP 8

2.3.1 Kelebihan PHP 9

2.4 MySQL 9

2.5 Java Script dan Koneksi Google Maps API 11

2.6 Adobe Dreameaver CS5.5 11

2.7 JQuery 12

2.8 Adobe Photoshop CS5 13

2.9 Flow-Chart 14

BAB 3 PERANCANGAN SISTEM 17

3.1 Gambaran Umum Sistem Perancangan 17

3.2 Flowchart Sistem 18

3.3 Perancangan Database 20

3.4 Membangun Halaman Situs 23

3.4.1 Halaman Pengguna Biasa 23

3.4.2 Halaman Pengguna Admin 23

3.4 Algoritma 25

(4)

BAB 4 IMPLEMENTASI 27

4.1 Pengertian Implementasi 27

4.2 Komponen Sistem 27

4.2.1 Hardware 27

4.2.2 Software 28

4.2.3 Jaringan Internet 28

4.3 Instalasi Paket Server 28

4.4 Pengujian Website di Browser 31

4.5 Prosedur Persiapan Program 32

4.6 Demonstrasi Program 35

BAB 5 KESIMPULAN DAN SARAN 38

5.1 Kesimpulan 38

5.2 Saran 39

Daftar Pustaka 40

Lampiran: Listing Program

(5)

DAFTAR TABEL

Halaman

Tabel 3.1 Flow-Chart 10

Tabel 3.1 Tabel Sekolah 10

Tabel 3.2 Tabel Users 12

Tabel 3.3 Tabel Saran 21

Tabel 3.4 Tabel Berita 28

(6)

DAFTAR GAMBAR

Halaman

Gambar 2.1 Komponen GIS 5

Gambar 2.2 Google Map v2 dan v3 8

Gambar 2.3 Tampilan Adobe Dreameaver CS5.5 12

Gambar 3.1 Flowchart Halaman Utama 18

Gambar 3.2 Flowchart Register 19

Gambar 3.3 Flowchart Halaman Admin 20

Gambar 2.4 Tampilan Adobe Photoshop CS5 14

Gambar 4.1 Folder Installer Xampp 28

Gambar 4.2 Pemilihan Bahasa 29

Gambar 4.3 Pemilihan Lokasi Berkas 29

Gambar 4.4 Pemilihan paket-paket Instalasi 30

Gambar 4.5 Dialog Xampp berhasil diinstal 30

Gambar 4.6 Letak Folder Xampp 31

Gambar 4.7 Panel kontrol xampp 31

Gambar 4.8 Tampilan Halaman Depan 32

Gambar 4.9 Phpmyadmin Membuat database baru 33

Gambar 4.10 Phpmyadmin Import Tabel 34

Gambar 4.11 Tampilan Halaman Depan 35

Gambar 4.12 Tampilan Halaman Login 35

Gambar 4.13 Tampilan Halaman Lihat Peta 36

Gambar 4.14 Tampilan HalamanTentang Program 36

Gambar 4.15 Tampilan Halaman Cari lokasi 37