Jumat, 18 April 2014

Sistem Informasi Geografis Web dan Mobile

Membuat Peta dengan Json Format

          JSON adalah singkatan dari JavaScript Object merupakan suatu format ringkas pertukaran data komputer. Formatnya berbasis teks dan terbaca manusia serta digunakan untuk merepresentasikan struktur data sederhana dan larik asosiatif (disebut objek). Format JSON sering digunakan untuk mentransmisikan data terstruktur melalui suatu koneksi jaringan pada suatu proses yang disebut serialisasi. Aplikasi utamanya adalah pada pemrogramanaplikasi web AJAX dengan berperan sebagai alternatif terhadap penggunaan tradisional format XML.
Walaupun JSON didasarkan pada subset bahasa pemrograman JavaScript dan umumnya digunakan dengan bahasa tersebut, JSON dianggap sebagai format data yang tak tergantung pada suatu bahasa. Kode untuk pengolahan dan pembuatan data JSON telah tersedia untuk banyak jenis bahasa pemrograman. Situs json.org menyediakan daftar komprehensif pengikatan JSON yang tersedia, disusun menurut bahasa. (Wikipedia).
Tugas II kali ini adalah membuat sebuah database yang berisi sepuluh titik koordinat Latitude dan Longitude tetangga rumah. data tersebut kemudian diambil menggunakan array dan JSON kemudian ditampilkan ke web.
            Nilai ID bertipe int primary key dan Latitute Longtitute bertipe data double sedangkan Nama pemilik dan alamat pemilik bertipe varchar.
            Langkah selanjutnya adalah membuat koneksi ke db_pemetaan tersebut. Koneksi ke database dilakukan atau diletakkan pada satu file yang sama dengan mengambil data dari database dan menyimpannya kedalam sebuah array dengan menggunakan format Json. Berikut adalah kode program dan tampilan hasilnya.
<?php
$host = "localhost";
$username = "root";
$password = "";
$namadatabase = "db_pemetaan"; //tiga baris kode program diatas merupakan koneksi ke database db_pemetaan
$koneksi = mysql_connect($host,$username,$password) or die("koneksi gagal".mysql_error()); //notifikasi jika koneksi gagal
mysql_selectdb($namadatabase,$koneksi) or die("Database Error".mysql_error()); 

//sql query untuk memilih tabel dalam database db_pemetaan
$sql = mysql_query("SELECT * FROM tb_pemetaanrumah");

$cabang = array(); //menyimpan hasil array kedalam variabel cabang

/**
dibawah ini adalah looping data dari database.
disini tidak menggunakan  mysql_fetch_array, melainkan menggunakan mysql_fetch_assoc
karena hanya mengambil nama kolom field tablenya saja sebagai indexnya,
bukan dengan nomor urutan arraynya.
**/
while ($row = mysql_fetch_assoc($sql))
    // selipkan semua hasil looping data dari database kedalam array
    $cabang[] = $row;

// array tersebut encode menjadi json seperti dibawah ini
$json = json_encode($cabang);

// tampilkan data json-nya
echo $json;
?>
Kode Program 1 Mengambil Data dari db_pemetaan dengan Array dan Json

            Selanjutnya adalah menampilkan atau mengambil data langsung dari db_pemetaan dengan menggunakan format Json. Langkah pertama yang dilakukan adalah membuat header tabel yang sesuai dengan database, membuat button untuk mengambil data kemudian menambahkan format Json untuk mengambil data dan menampilkan data tersebut. Berikut adalah kode programnya.
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menampilkan Data</title>
<script src="../GIST3/jquery.js"></script>
</head>

<body>
//membuat header tabel
<table id="tabel" border="1">
      <tr><td>ID</td><td>Latitute</td><td>Longtitute</td><td>Nama_Pemilik</td><td>Alamat_Pemilik</td></tr>
</table>
//membuat button
<input type="submit" id="add_row" value="Ambil Data dari Database">

<script>
//fungsi dibawah ini adalah fungi untuk mengambil data yag ada di db_pemetaan kemudian ditampilkan ke web
$('#add_row').click(function(){
              $.get('simpandata.php',function(output){
                for(i=0;i<output.length;i++){               $('<tr><td>'+output[i].ID+'</td><td>'+output[i].Latitute+'</td><td>'+output[i].Longtitute+'</td><td>'+output[i].Nama_Pemilik+'</td><td>'+output[i].Alamat_Pemilik+'</td></tr>').appendTo('#tabel');
                  }
              },'json');
            });
</script>

</body>
</html>
Kode Program 2 Mengambil dan Menampilkan Data dari db_pemetaan ke Web

0 komentar:

Posting Komentar