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

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

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

http://firmansyah.web.id/

http://firmansyah.web.id/input-data-ke-dalam-database-mysql-pada-pemrograman-google-maps-api.html

http://firmansyah.web.id/input-data-ke-dalam-database-mysql-pada-pemrograman-google-maps-api.html


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

https://code.google.com/apis/console/

http://firmansyah.web.id/belajar-google-maps-api-javascript-bag-1.html



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.

http://firmansyah.web.id/

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

Technology

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