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
nama bangunan, alamat, jenis bangunan, dan lain sebagainya. Dari sini kita buat field/tabelnya pada database.
Bayangan didalam benak:
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.
Bayangan didalam benak:
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. `id` INT(11) NOT NULL AUTO_INCREMENT,
3. `name` VARCHAR(60) NOT NULL,
4. `address` 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 (`id`)
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">
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
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.
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. <!-- kode untuk tampilan full screen atau dibatasi pjg/lbr--> 3. <!-- <div id="map_canvas" style="width: 500px; height:
300px"></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.
}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.
