Alur program input data ke dalam database my sql pada pemrograman google maps api

ALUR PROGRAM “INPUT DATA KE DALAM DATABASE DARI MARKER
PADA PEMROGRAMAN GOOGLE MAPS API”
Firmansyah Wahyudiarto – http://firmansyah.web.id

Seperti pada postingan blog saya dengan judul “Input Data Ke Dalam Database MySQL Pada
Pemrograman Google Maps API”, maka akan saya coba jelaskan satu persatu alur cara
mengimplementasikan contoh kasus input data dari suatu marker melalui database yang telah kita
define sebelumnya. Langsung saja, mari kita belajar bersama untuk membedah habis-habisan kode
pemrogramannya. Selamat menikmati sajian kali ini dan cekibrot gan..

Secara garis besarnya, ada 3 hal yang akan kita lakukan kedepan.

1. Pertama-tama, mari kita coba gambarkan apa yang akan kita buat terlebih dahulu, yaitu
menampilkan suatu peta dalam suatu area tertentu pada browser. Untuk contoh kali ini, saya
gunakan properti “width” dan “height” dimana panjang & lebar bidang petanya semuanya
maksimum alias 100% sehingga peta akan terlihat penuh pada jendela browser.
Bayangan didalam benak:

2. Kemudian, kita mencoba untuk membuat marker yang bisa kita klik dimanapun marker kita
letakkan, kemudian secara otomatis google maps bisa membaca lokasi latitude maupun
longitude-nya dan kemudian menyimpannya ke dalam database. Selain itu terdapat pula
atribut-atribut atau field-field yang telah kita definisikan. Sebagai contoh, kita akan menginput
lokasi suatu bangunan. Dalam suatu bangunan, pasti terdapat atribut-atributnya bukan? Seperti

Sponsored by http://lokerdb.com – LokerDb Repositori Lowongan Kerja Perusahaan Besar di Indonesia

nama bangunan, alamat, jenis bangunan, dan lain sebagainya. Dari sini kita buat field/tabelnya
pada database.

3. Kalau sudah, bagaimana caranya setelah kita klik “lokasi tertentu” kemudian muncul marker
kemudian muncul jendela “Pop Up” untuk memasukkan data-data kita. Setelah kita klik tombol
“Simpan” maka langsung masuk dan tersimpan dalam database.

Pada kasus ini saya tidak membahas cara menampilkan marker yang telah tersimpan ke dalam database
kita, InsyaAlloh pada postingan selanjutnya bagaimana cara untuk memunculkan jendela Pop Up dari
marker yang telah didefinisikan atribut-atributnya.


Langsung saja, mari siapkan Notepad(++) dan kopi hangat beserta camilan stick ketela madu 

1. Mari kita ketikkan kode-kode berikut (tanpa diikuti nomer disamping kiri).

1. CREATE TABLE IF NOT EXISTS `markers` (
2. ìd` INT(11) NOT NULL AUTO_INCREMENT,
3. `name` VARCHAR(60) NOT NULL,
4. àddress` VARCHAR(80) NOT NULL,
5. `lat` FLOAT(10,6) NOT NULL,
6. `lng` FLOAT(10,6) NOT NULL,
7. `type` VARCHAR(30) NOT NULL,
8. PRIMARY KEY (ìd`)
9. ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

Penjelasan Kode:
CREATE TABLE IF NOT EXISTS : Membuat tabel bernama ‘markers’ - jika belum ada
tabel dengan nama ‘markers’.
‘field tabel’ [tipe(jumlah karakter/angka)’ NOT NULL [AUTO
_INCREMENT] : buat suatu field dengan nama ‘id’ dengan tipe INT(EGER) dan tidak boleh
berisi kosong serta bertambah secara inkremental (1, 2,3, … dst).
PRIMARY KEY (‘id’) : untuk membedakan nilai yang unik (pembeda)

2. Setelah itu, ketikkan untuk setting koneksi databasenya. Lebih baik dipisah, karena bila proyek
kita skalanya sudah mulai besar akan lebih memudahkan bila akan mengganti setting-an
database. Cukup satu file yang diubah nanti disetiap file php yang membutuhkan koneksi
database bisa menggunakan fungsi require(); atau include();.

1. <?php
2. $username="root";
3. $password="";
4. $database="asik";
5. ?>

Penjelasan Kode:
$username : mendefinisikan nama user database
$password : mendefinisikan password database
$database : nama databasenya

3. Oke gan, kalo udah saatnya 2 poin terakhir yang agak panjang. Pelan-pelan aja, jangan dicopy
paste ya, biar terbiasa ngetik di text editor.
Bagian 1:

1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3. <html xmlns="http://www.w3.org/1999/xhtml">
4. <head>


5. <style type="text/css">
6. v:* {behavior:url(#default#VML);}
7. html, body {width: 100%; height: 100%}
8. body {margin-top: 0px; margin-right: 0px; margin-left:
0px; margin-bottom: 0px}
9. </style>

Penjelasan Kode:

1-3 : Deklarasi yang direkomendasikan oleh W3C (World Wide Web Consortium) dimana
digunakan untuk identifikasi jenis dokumen HTML yang akan digunakan sehingga web browser
bisa mengetahui dan memperlakukan seperti apa kode tersebut. Kodenya (baik XML atau
XHTML) akan diperlakukan sangat ketat (strict) oleh standar dari W3C.

5-9 : Mendefinisikan fungsi CSS (Cascading Style Sheet) langsung pada satu halaman web. Bisa
juga dipanggil dari file berekstensi .css dengan syntax <link rel="stylesheet"
type="text/css" media="screen" href="namafilecss.css" /> Untuk kode “v:*
{behavior:url(#default#VML);}” tidak perlu diperhatikan karena di-generate dari file
Ms Word yang disimpan dalam bentuk web page. Sedangkan halaman bidang petanya satu
halaman penuh (kode “html, body {width: 100%; height: 100%}”). Untuk margin-top:
0px, dlsb bisa dipelajari mengenai pemrograman CSS agar tampilan web lebih cantik. Secara
garis besar gambarnya seperti dibawah kok gan. Sehingga peta di-load penuh pada layar
browser tanpa margin.

Bagian 2:

1. <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
2. <title>Firmansyah Wahyudiarto - Simpan Data Atribut ke Database
Melalui Peta</title>
3. <script
src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPM


v7oQ-jjS7dYxTPZYElJSBeBUeMSX5xXgq6lLjHthSAk20WnZ_iuuzhMt60X_ukms-
AUg"
4. type="text/javascript"></script>
5. <script type="text/javascript">

Penjelasan Kode:
1 : Meta merupakan elemen yang digunakan untuk mendefinisikan deskripsi halaman web, ada
pula untuk keywords, nama pembuat, dan lain sebagainya. Metadata ini hanya sebagai identifier
dan tidak muncul pada halaman web.

2 : Merupakan tag html <title></title> untuk memberikan judul halaman.

3-5: Ini yang harus diperhatikan bagi pembaca, karena untuk mendapatkan key pada google
maps saat ini agak lumayan ribet langkah-langkahnya. Saya menggunakan versi 2 (Google Maps
v2) yang saat ini sudah tidak didukung lagi dan digantikan dengan versi 3. Untuk mendapatkan
API Key, silakan kunjungi : https://code.google.com/apis/console/ dan untuk mendapatkannya
harus punya Google Account dulu ya.

Bagian 3

1. var marker;
2. function initialize() {
3. if (GBrowserIsCompatible()) {
4. var map = new GMap2(document.getElementById("map_canvas"));
5. map.setCenter(new GLatLng(-7.5619, 110.8161), 9);
6.
7. GEvent.addListener(map, "click", function(overlay, latlng) {
8. if (latlng) {
9. marker = new GMarker(latlng, {draggable:true});
10. GEvent.addListener(marker, "click", function() {

Penjelasan Kode:
1 : Definisikan suatu variabel misal pada contoh adalah marker.

2 – 5 : Pembaca silakan bisa baca di tulisan blog saya sebelumnya ya, di postingan “Belajar
Google Maps API_Javascript (bag 1)”.

7 : Menambahkan suatu event melalui namespace “Gevent” yang memanggil fungsi pada peta
(ditunjukkan dan ditampilkan dalam variabel “map” yang telah kita definisikan sebelumnya),
kemudian diikuti event saat peta di-klik (“click”) dan juga fungsi menunjukkan bidang
permukaan peta sesuai dengan koordinat latitude dan longitude-nya.

8 : Jika latitude dan longitude bernilai true atau telah sesuai, maka


9 : isi variabel marker dengan object baru yaitu membuat suatu marker pada peta (ditunjukkan
oleh fungsi GMarker(latlng, {...});. Kemudian area peta bisa digeser-geser
{draggable:true}).Kalau ingin petanya statis dan tidak bisa digeser-geser tinggal diganti
menjadi “false”.

10 : oke, kita pake static method lagi nich, yaitu GEvent.addListener Kita ngerepotin untuk
meminta google maps tetap siaga mendengarkan fungsi yang akan kita panggil. Apa itu?
Melanjutkan seperti kode nomor 9, kalau markernya udah muncul, dan kita klik di marker-nya,
maka….jreng-jreng….lanjut ke tahap selanjutnya ya. , lanjut gan.

1. var html = "<table>" +
2. "<tr><td>Nama:</td> <td><input type='text' id='name'/> </td> </tr>" +
3. "<tr><td>Alamat:</td> <td><input type='text' id='address'/></td> </tr>" +
4. "<tr><td>Type:</td> <td><select id='type'>" +
5. "<option value='Rumah Sakit' SELECTED>Rumah Sakit</option>" +
6. "<option value='Gedung Perkantoran' SELECTED>Gedung Perkantoran</option>" +
7. "<option value='Perumahan' SELECTED>Perumahan</option>" +
8. "<option value='Supermarket'>Supermarket</option>" +
9. "</select> </td></tr>" +
10. "<tr><td></td><td><input type='button' value='Simpan Lalu Keluar'
onclick='saveData()'/></td></tr>";
11.
12. marker.openInfoWindow(html);
13. });
14. map.addOverlay(marker);
15. }
16. });
17. }
18. }

Penjelasan Kode:
1 : misal kita buat variabel bernama “html” dan kita isikan dengan kode-kode html yang
nantinya akan kita panggil agar bisa membuat tampilan input di jendela pop up window marker.

2 – 10 : Membuat tampilan seperti dibawah ini:
Gini gan, ane yakin yang pasti agan udah ketahui
bahasa html, yaitu:
<table> : untuk membuat tabel
<tr> : membuat baris/ table row
<td> : data atau teksnya (table data)
dan jangan luupa, yang cukup penting juga adalah
id-nya agar nanti PHP bisa menangkap
(menggunakan fungsi $_GET[]; ) parameter yang
dikirimkan di halaman ini. Misal Isi dari Nama
(id=’name’) akan dikirimkan isinya dan ditangkap di
halaman selanjutnya (tambahdata.php). Dan ketika
di klik (type=’button’), maka jalankan fungsi
saveData().


12 : pada marker, munculkan suatu pop up window yang isinya seperti pada gambar diatas.

13 : Inisialisasikan peta pada layar (var map) dan tambahkan overlay dari marker yang telah
didefinisikan sebelumnya.

Bagian 4.

1. function saveData() {
2. var name = escape(document.getElementById("name").value);
3. var address =
escape(document.getElementById("address").value);
4. var type = document.getElementById("type").value;
5. var latlng = marker.getLatLng();
6. var lat = latlng.lat();
7. var lng = latlng.lng();

Penjelasan Data :
1 : Oke, kita buat fungsi simpan data dulu ya namanya “saveData()”.

2-4 : escape(encodeURI(document.getElementById("name").value)) untuk meng-
encode string yang mendukung karakter ASCII sehingga lebih bisa dibaca di semua browser.
Sebagai contoh:
document.write(escape("Yuk, belajar fungsi escape."));
Output:
Yuk%2C%20belajar%20fungsi%20escape.
Lalu, maksud (document.getElementById("name").value yaitu kita menangkap (fungsi
getElementById) dari “isi/nilai/value” dari field “name” dan simpan ke variabel “name”.

5 : Isikan variable latlng dengan fungsi getLatLng() yaitu fungsi yang mengembalikan nilai
latitude dan longitude dari marker yang telah kita pilih tadinya sehingga kita bisa tahu posisi di
lintang dan bujur berapa.

6-7 : Nha, setelah dari fungsi GetLatLng() kan kita mendapatkan nilai (lat,lng) nya kan?yang udah
disimpan di variabel latlng misal (106,27). Biar kita bisa mengambil salah satu atau salah dua eh
dua-duanya tapi terpisah dari latitude atau longitude pakenya fungsi lat() dan lng(). Dari variabel
latlng tadi kita meminta google untuk tampilkan/kembalikan nilai hanya latitude atau longitude-
nya dan kita simpan deh di variabel lat dan lng.

Bagian 5

1. <body onload="initialize()" onunload="GUnload()">
2. 
3. 
4. <div id="map_canvas" style="width: 100%; height: 100%"></div>

5. <div style="top:25px; left:25px; position:absolute; background-
color:white; border:2px solid black;">
6. <div id="message"></div>
7. </body>

Trus untuk kode 1 sampai 7 juga sudah pernah saya bahas di postingan sebelumnya, sama
judulnya yaitu “Belajar Google Maps API_Javascript (bag 1)”. Oke gan. Siip! Lanjuutt….

4. Hufffttt…udah capek nih…untungnya ini poin yang terakhir. Okey, once more! Untuk yang
terakhir ini agak lumayan pendek dan lebih seru soalnya kalau sebelumnya udah pening dengan
HTML dan Javascript sekarang kita coba untuk membedah lagi inti dari proses memasukkan data
dari halaman peta ke dalam database.
Bagian 6

1. <?php
2. require("infodb.php");
3. // Fungsi untuk Mengambil Data dari Variabel yang dikirim dari file
index.html
4. $name = $_GET['name'];
5. $address = $_GET['address'];
6. $lat = $_GET['lat'];
7. $lng = $_GET['lng'];
8. $type = $_GET['type'];

Penjelasan Kode:

1 : tag pembuka bahasa pemrograman php

2 : Kita panggil file “infodb.php” karena kita membutuhkan informasi nama database, username,
dan password.

4-8 : Seperti yang sebelumnya pernah saya jelaskan, bahwa pada Bagian 4 merupakan fungsi
dari javascript dimana untuk sementara, value atau isi dari setiap variabel (nama, alamat, tipe,
lat, dan lang) ditampung terlebih dahulu secara temporer. Setelah itu, agar isi dari variabel ini
dapat “ditangkap” oleh PHP, maka menggunakan fungsi $_GET[‘nama_id’]; sehingga isi variabel
yang tadi sementara diambil oleh PHP, nantinya akan “disimpan” ke dalam database “sesuai”
dengan field masing-masing dalam database DAN sesuai dengan ‘nama_id’ nya. Analoginya
seperti lari estafet dan tongkat estafet-nya itu adalah ‘nama_id’ tersebut. Oke gan, sampai sini
saya berharap udah paham ya.

Bagian 7
1. // Membuka koneksi ke database
2. $connection = mysql_connect ("localhost", $username, $password);
3. if (!$connection) {
4. die('Database tidak bisa terkoneksi : ' . mysql_error());
5. }

Penjelasan Kode:


2 : variabel $connection digunakan untuk mengkoneksikan (mysql_connect) nama host,
username, dan juga password

3-4 : jika, kondisi tidak terpenuhi, misal username dan password tidak sama dengan settingan di
webserver-nya, maka akan muncul peringatan error bahwa “Database tidak bisa terkoneksi”.

Bagian 8
1. // Setting untuk aktivasi database yang terpilih
2. $db_selected = mysql_select_db($database, $connection);
3. if (!$db_selected) {
4. die ('Database tidak bisa digunakan bos : ' . mysql_error());
5. }

Penjelasan Kode:
1 : Pilih database, dan kemudian jalankan proses menghubungkan antara database dengan
mencocokkan seperti pada bagian 7.

3-4: Jika terjadi kesalahan, maka akan muncul error.

Bagian 9

1. // Memasukkan data ke dalam database
2. $query = sprintf("INSERT INTO markers " .
3. " (id, name, address, lat, lng, type ) " .
4. " VALUES (NULL, '%s', '%s', '%s', '%s', '%s');",
5. mysql_real_escape_string($name),
6. mysql_real_escape_string($address),
7. mysql_real_escape_string($lat),
8. mysql_real_escape_string($lng),
9. mysql_real_escape_string($type));
10.
11. $result = mysql_query($query);
12.
13. if (!$result) {
14. die('Query Salah: ' . mysql_error());
15. }
16. ?>
17.

Penjelasan Kode:

2-9 : untuk melakukan query ke dalam database, agar lebih mudah kita tampung dalam suatu
variabel, misalnya $query. Nah, fungsi sprintf(); digunakan untuk menampilkan output dengan
format tertentu. Kita jalankan perintah SQL, INSERT INTO yaitu masukkan ke dalam tabel
“markers”, yang mana tabel markers MEMILIKI field (id, name, address, lat, lng, type) DAN
ISIKAN nilainya (VALUES …..) dengan format string (%S). Kemudian, digunakan fungsi
mysql_real_escape_string(); yaitu fungsi ini digunakan pada saat akan memasukkan data
dimana datanya memiliki karakter khusus. Misalnya, hari Jum’at ada tanda petik diantara huruf
m dan a. Maka didatabase akan tersimpan dengan isi datanya hari Jum’at bukan Jumat.


11 : Jalankan query agar diproses ke dalam database.

13-14 : Kalau terjadi kesalahan, maka akan muncul error. Biasanya disebut dengan Error
Handling. Sedikit menyinggung bahwa didalam merancang suatu program, perlu adanya
penanganan suatu kesalahan sehingga jika user salah dalam melakukan prosedur pengisian atau
menjalankan aplikasi yang kita buat, maka akan muncul peringatan sehingga mempermudah
untuk mengetahui dimana letak kesalahannya.

Okay, sekian tutorialnya sudah selesai ya. Udah lumayan capek soalnya habis pulang kerja. Ane
berharap semoga bisa bermanfaat sedikit tulisan yang masih carut-marut ini. Silakan untuk
mengupdate selalu tutorial terbaru Google Maps v3 karena kode diatas disediakan oleh pihak Google
untuk media pembelajaran. Apabila ada kesalahan, mohon maaf ya…Tunggu selalu postingan-
postingan selanjutnya di http://firmansyah.web.id.

Jakarta, 16 Oktober 2012 – @ 22.15.


Alur program input data ke dalam database my sql pada pemrograman google maps api

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Mehr von firmansyahw

Mehr von firmansyahw (6)

Alur program input data ke dalam database my sql pada pemrograman google maps api