Scribd Logo

Bahasa

Unggah

Selamat datang di Scribd!

Web Marker Kelompok 4B

Diunggah oleh

Eka Fiktri
1 tayangan11 halaman
web marker

Hak Cipta

© © All Rights Reserved

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Laporkan Dokumen Ini
web marker

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
1 tayangan11 halaman

Web Marker Kelompok 4B

Diunggah oleh

Eka Fiktri
web marker

Hak Cipta:

© All Rights Reserved
Tandai sebagai konten tidak pantas
dari 11

TUGAS PRAKTIKUM

SISTEM INFORMASI GEOGRAFIS

Disusun oleh :

Athiyyah Yumna (G41160964)

Kurnia Arofah (G41161119)

Rintan Illahi Wahyu (G41161269)

Inggil De Crystal (G41161411)

Nur Amaliyatul F (G41161430)

Anggota Kelompok 4B

POLITEKNIK NEGERI JEMBER

Jl. Mastrip PO BOX 164 68101

Jember

Jawa Timur
Tahun Ajaran 2018
Pada tugas kali ini , kami akan membuat persebaran lokasi Rumah Sakit yang ada di
daerah Jember dengan menggunakan webgis marker yang dikoneksikan pada PHP.

1. Buatlah database terlebih dahulu dengan mengaktifkan XAMPP

2. Kemudian ketik localhost maka akan keluar MyPHP. Pada kesempatan ini kelompok
kami membuat database yang bernama test_db.
3. Selesai membuat database selanjutnya kita membuat tabel yang akan digunakan. Pada
saat ini kelompok kami menggunakan tabel bernama tbl_lokasi.

4. Buatlah id , nama , lat , dan lng pada tabel yang sudah dibuat.
5. Tetapkan id menjadi primary key.

6. Masukkan data pada tabel yang sudah dibuat tadi , berisikan Rumah sakit yang asa di
Jember serta lokasi RS.
7. Kemudian buat script inputan pada notepad++ berfungsi untuk membuat tampilan
awal.
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

<title>Web GIS</title>

<!-- css -->


<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css"
href="plugins/cubeportfolio/css/cubeportfolio.min.css">
<link href="css/nivo-lightbox.css" rel="stylesheet" />
<link href="css/nivo-lightbox-theme/default/default.css" rel="stylesheet" type="text/css"
/>
<link href="css/owl.carousel.css" rel="stylesheet" media="screen" />
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-
awesome.min.css">
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<link rel="stylesheet" type="text/css" href="vendor/perfect-scrollbar/perfect-
scrollbar.css">
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link href="css/owl.theme.css" rel="stylesheet" media="screen" />
<link href="css/animate.css" rel="stylesheet" />
<link href="css/style.css" rel="stylesheet">

<!-- boxed bg -->


<link id="bodybg" href="bodybg/bg1.css" rel="stylesheet" type="text/css" />
<!-- template skin -->
<link id="t-colors" href="color/default.css" rel="stylesheet">

</head>

<body id="page-top" data-spy="scroll" data-target=".navbar-custom">


<div id="wrapper">
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
<div class="container navigation">

<div class="navbar-header page-scroll">


<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target=".navbar-main-collapse">
<i class="fa fa-bars"></i>
</button>
<a class="navbar-brand" href="index.html">
<img src="img/logo.png" alt="" width="250" height="43" />
</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-main-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#intro">D-IV Rekam Medik</a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>

<!-- Section: intro -->


<section id="intro" class="intro">
<form action="fungsi.php" method="POST" name="form-input-data">
<div class="intro-content">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="wow fadeInDown" data-wow-offset="0" data-wow-delay="0.1s">
<h2 class="h-ultra">Google Maps Maker</h2>
</div>
<div class="wow fadeInUp" data-wow-offset="0" data-wow-delay="0.1s">
<h4 class="h-light">Temukan <span class="color">Lokasi mu</span> Disini !</h4>
</div>
<div class="well well-trans" "container text-center">
<a class="container-brand" href="index.html">
<img src="img/map.png" alt="" width="517" height="191" /></a>
<div class="wow fadeInRight" data-wow-delay="0.1s">
</div>
</div>
</div>
<div class="col-lg-6">
<div class="form-wrapper">
<div class="wow fadeInRight" data-wow-duration="2s" data-wow-delay="0.2s">
<div class="panel panel-skin">
<div class="panel-heading">
<h3 class="panel-title"><span class="fa fa-pencil-square-o"></span> Cari Lokasimu
<small>(Rumah Sakit Jember!)</small></h3>
</div>
<div class="panel-body">
<form role="form" class="lead">
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label>ID</label>
<input type="int" name="id" >
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label>Nama Lokasi</label>
<input type="text" name="nama" >
</div>
</div>
</div>

<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label>Latitute</label>
<input type="text" name="lat" >
</div>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div class="form-group">
<label>Longitute</label>
<input type="text" name="lng" >
</div>
</div>
</div>

<input type="submit" value="Cari" class="btn btn-skin btn-block btn-lg">


<p class="lead-footer">* Isi Lengkap Datamu</p>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</section>
<!-- /Section: intro -->
</div>
<a href="#" class="scrollup"><i class="fa fa-angle-up active"></i></a>
<!-- Core JavaScript Files -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.scrollTo.js"></script>
<script src="js/jquery.appear.js"></script>
<script src="js/stellar.js"></script>
<script src="plugins/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/nivo-lightbox.min.js"></script>
<script src="js/custom.js"></script>

</body>
</html>

8. Membuat index untuk menampilkan marker peta.


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

<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 100%;
height: 500px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
var marker;
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var infoWindow = new google.maps.InfoWindow;
var bounds = new google.maps.LatLngBounds();

function bindInfoWindow(marker, map, infoWindow, html) {


google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}

function addMarker(lat, lng, info) {


var pt = new google.maps.LatLng(lat, lng);
bounds.extend(pt);
var marker = new google.maps.Marker({
map: map,
position: pt
});
map.fitBounds(bounds);
bindInfoWindow(marker, map, infoWindow, info);
}

<?php
$query = mysql_query("select * from tbl_lokasi");
while ($data = mysql_fetch_array($query)) {
$lat = $data['lat'];
$lng = $data['lng'];
$nama = $data['nama'];
echo ("addMarker($lat, $lng, '<b>$nama</b>');\n");
}
?>
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body> <a><center><h1><b>- - - PETA MARKER RUMAH SAKIT DI KABUPATEN
JEMBER - - -</b></h1></center></a>
<div id="map-canvas"></div>
</body>
</html>

9. Kemudian membuat fungsi untuk menyambungkan inputan dengan index.


<?php
include 'config.php';

$id = $_POST['id'];
$nama = $_POST['nama'];
$lat = $_POST['lat'];
$lng = $_POST['lng'];

//masukkaan data ke table


$query = "INSERT INTO markers SET id='$id', nama='$nama', lat='$lat',
lng='$lng'";
mysql_query ($query);

header("location:index.php");

10. Membuat sambungan semua scipt kedalam database yang sudah dibuat tadi,
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db = 'test_db';
$koneksi = mysql_connect($host,$user,$pass);

if(!$koneksi){
die("Cannot connect to database.");
}

mysql_select_db($db);

?>
11. Maka jika di run akan muncul tampilan seperti dibawah ini,

Anda mungkin juga menyukai