Home > AJAX, PHP > Membuat GIS Peta Dunia Sederhana dengan PHP dan AJAX

Membuat GIS Peta Dunia Sederhana dengan PHP dan AJAX

Setelah mengenal dan mempelajari tentang PHP GD, akhirnya dapat juga membuat suatu GIS (Geographic information system) peta dunia yang sederhana. PHP GD?? mungkin bagi Anda ada yang merasa baru mendengar kata tersebut. Mungkin Anda bertanya-tanya apa itu PHP GD? PHP GD adalah salah satu library dalam PHP yang digunakan untuk mengolah suatu gambar. Pada artikel saya kali ini, saya akan mencoba membuat sebuah GIS peta dunia yang sederhana.Langkah pertama yang harusUntuk mengaktifkan PHP GD, Anda dapat membuka file php.ini yang terdapat pada folder WINDOWS, kemudian Anda melakukan pencarian untuk kata berikut ini extension=php_gd2.dll. Kemudian Anda melakukan pengecekan apakah terdapat tanda ; di awal kata tersebut. Apabila terdapat tanda ; maka Anda harus menghilangkan tanda ; tersebut dan save file tersebut.

Setelah Anda mengaktifkan PHP GD, maka langkah berikutnya adalah membuat database dengan nama peta_dunia. Berikut SQL dari peta_dunia.sql.

CREATE TABLE `negara` (
`kode_negara` varchar(3) NOT NULL,
`nama_negara` varchar(100) NOT NULL,
`ibukota_negara` varchar(100) NOT NULL,
`x` int(11) NOT NULL,
`y` int(11) NOT NULL,
PRIMARY KEY (`kode_negara`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

INSERT INTO `negara` VALUES (‘IDN’, ‘Indonesia’, ‘Jakarta’, 493, 165);
INSERT INTO `negara` VALUES (‘IND’, ‘India’, ‘New Delhi’, 442, 106);
INSERT INTO `negara` VALUES (‘BRA’, ‘Brasil’, ‘Rio De Janeiro’, 235, 193);
INSERT INTO `negara` VALUES (‘GER’, ‘Jerman’, ‘Berlin’, 332, 65);
INSERT INTO `negara` VALUES (‘CHN’, ‘Republik Rakyat Cina’, ‘Shanghai’, 518, 101);
INSERT INTO `negara` VALUES (‘MEX’, ‘Meksiko’, ‘Mexico City’, 139, 121);

Setelah kita membuat database, maka langkah berikutnya adalah melakukan pengolahan pada gambar peta dunia dengan membuat titik-titik pada lokasi yang terdapat dalam database yang telah kita buat, yaitu koordinat.php

<?php
mysql_connect(“localhost”,”root”,”erick”); //koneksi ke database mysql
mysql_select_db(“peta_dunia”);$peta = imagecreatefromjpeg(“earth.jpg”); //membuka gambar peta dunia
$warna = imagecolorallocate ($peta, 255,0,0); //menentukan warna titik lokasi pada peta

$querytitik = mysql_query(“SELECT x,y FROM negara”); //query informasi koordinat lokasi
while($titik = mysql_fetch_row($querytitik))
{
$x = $titik[0];
$y = $titik[1];
imagefilledrectangle($peta,$x-3,$y-3,$x+3,$y+3,$warna); //membuat titik kotak pada peta
}
imagestring($peta,14,220,290,”By Erick Alfons Lisangan”,$warna);

header(“Content-Type: image/jpeg”); //menampilkan file gambar
imagejpeg($peta);
imagedestroy($peta);
?>

Langkah selanjutnya adalah membuat script PHP yang akan menampilkan peta dan memanfaatkan AJAX untuk menampilkan informasi yang dihasilkan ketika kita mengklik titik lokasi tersebut, yaitu peta.php

<?php
mysql_connect(“localhost”,”root”,”erick”);
mysql_select_db(“peta_dunia”);
?>
<html>
<head>
<title>Membuat GIS Peta Dunia Sederhana dengan PHP dan Ajax By Erick Alfons Lisangan</title>
<script language=’JavaScript’>
var ajaxRequest;

function getAjax() //fungsi untuk mengecek apakah browser mendukung AJAX
{
try
{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer Browsers
try
{
ajaxRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
ajaxRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
// Something went wrong
alert(“Your browser broke!”);
return false;
}
}
}
}

function getInfo(kode)
{
getAjax();
ajaxRequest.open(“GET”,”bukainfo.php?kode=” + kode);
ajaxRequest.onreadystatechange = function()
{
document.getElementById(“info”).innerHTML = ajaxRequest.responseText;
}
ajaxRequest.send(null);
}
</script>
</head>
<body>
<table>
<tr>
<td>
<img src=’koordinat.php’ usemap =’#negara’>
<map name=’negara’>
<?php
$querytitik = mysql_query(“SELECT x,y,kode_negara FROM negara”);
while($titik = mysql_fetch_row($querytitik))
{
$minx = $titik[0]-3;
$miny = $titik[1]-3;
$maxx = $titik[0]+3;
$maxy = $titik[1]+3;
?>
<area shape=’rect’ coords='<?=$minx.”,”.$miny.”,”.$maxx.”,”.$maxy?>’ href=”javascript:getInfo(‘<?=$titik[2]?>’);”> <!– daftar link lokasi –>
<?php
}
?>
<area shape=’rect’ coords=’220,290,430,305′ href=’https://erick1719.wordpress.com&#8217; target=’_blank’>
</map>
</td>
<td valign=’top’ id=’info’></td>
</tr>
</table>
</body>
</html>

Setelah membuat file peta.php, langkah selanjutnya adalah membuat file bukainfo.php yang akan menampilkan informasi dari lokasi yang diklik.

<?php
mysql_connect(“localhost”,”root”,”erick”);
mysql_select_db(“peta_dunia”);

$kode = $_GET[‘kode’]; //menangkap kode negara dari lokasi yang dipilih

$queryinfo = mysql_query(“SELECT nama_negara, ibukota_negara FROM negara WHERE kode_negara=’$kode'”);
$info = mysql_fetch_row($queryinfo);
?>
<table>
<tr>
<td>Kode Negara</td>
<td>:</td>
<td><?=$kode?></td>
</tr>
<tr>
<td>Nama Negara</td>
<td>:</td>
<td><?=$info[0]?></td>
<tr>
<td>Ibu Kota Negara</td>
<td>:</td>
<td><?=$info[1]?></td>
</tr>
</table>

Apabila kita menjalankan script peta.php, maka akan diperoleh tampilan sebagai berikut:

Apabila Anda mengklik pada titik lokasi yang terdapat pada peta, maka akan diperoleh tampilan informasi tentang lokasi tersebut seperti di bawah ini :

download script

Bagaimana?? Dengan menggunakan PHP dan AJAX maka kita dapat membuat GIS Peta Dunia Sederhana. Semoga artikel ini berguna bagi Anda. Gbu…..

Categories: AJAX, PHP
  1. ghani536ghani
    21 October 2015 at 08:40

    mas, kalau misal kita klik titik itu, maka muncul keterangannya di halaman baru, bukan di sampingnya itu gmna?

  2. 11 October 2015 at 22:04

    mas saya mau tanya
    gimana cara nya membuat pencarian lokasi
    misalnya
    lokasi A
    begitu kita submit/cari
    langsung menglik lokasi tersebut dan tampil infonya

  3. 28 July 2014 at 23:21

    I was excited to find this great site. I want to to thank
    you for ones time for this particularly fantastic read!!
    I definitely really liked every bit of it and i also have you book marked to look at
    new stuff in your site.

  4. 11 July 2013 at 04:45

    mas tolong dunk….
    kenapa petanya gak muncul ya ????
    saya pake MS4W sebagai servernya dan XAMPP sebagai DataBase nya….
    kalau ada setingannya, tolong di paparkan ya mas…. please…….

  5. panji
    14 April 2013 at 09:17

    rumusnya bagaimana gan, tolong infony donk! buat tugas akhir

  6. panji
    13 April 2013 at 23:27

    tolong dong gan caranya menentukan titik x dan y tersebut dari gambar petanya, buat tugas akhir ni

  7. 27 January 2013 at 00:53

    setting XAMPP short_tag…apanya yang di set ya mas???

  8. krisna
    20 January 2013 at 22:25

    mas untuk nambahin titik2nya gmna yah.?
    karna saya butuh 500an titik..
    thx b4..

  9. 10 December 2012 at 23:36

    Nice blog, i like it.
    thanks🙂

  10. Agi
    31 July 2012 at 15:16

    oh iya mas satu lagi, bisa ngga saya memberi warnanya itu untuk setiap region, misalnya provinsi a warna merah, nah jadi wilayah (region) yang termasuk provinsi a itu warnanya merah.
    Situnggu responnya mas.
    Terima kasih.

  11. Agi
    31 July 2012 at 12:27

    mas mau nanya, misalkan digambar itu kan ada nama – nama provinsi ya, nah dengan input nama provinsinya aja di database, saya bisa tahu koordinat provinsi tersebut ngga mas?

  12. tantan
    14 July 2012 at 03:27

    mas boleh nanya ga? kalau saya ingin 2 warna bagai mana ya misalnya saya ingin menambahkan field nilai di tabel negaranya misalnya kalu isi nilainya 1 warna titiknya merah dan kalau nilainya 0 warna kotaknya kuning, jika bisa saya boleh minta codenya ke tantan.supriaditgs@gmail.com terimakasih mas

  13. Syahrul
    26 June 2012 at 11:42

    saya rasa gambar peta nya ga keluar gara-gara saya ga punya gambar “earth.jpg” ini deh mas..gambar nya download dimana mas??

  14. Syahrul
    25 June 2012 at 19:07

    MAS..gambar nya ga keluar … ;'(

  15. 21 June 2012 at 11:09

    kalo mau diganti misalkan pake peta indonesia doank gimana ya? saya udh ganti imagenya tapi ga muncul

  16. Vito
    4 June 2012 at 22:12

    mas saya punya masalah seperti ini
    Fatal error: Call to undefined function imagecreatefromjpeg()

    saya pakai wamp
    saya dah rubah konfigny

    extension sudah
    short tag sudah

    saya bingung harus gimana?
    tolong bantu….
    thx

  17. 2 April 2012 at 20:23

    saya pakek xampp kok g muncul petanya ya mas..?mohon bimbingannya..

    • 11 April 2012 at 18:47

      kalo pake XAMPP, mesti di atur setting php.ini untuk open_short_tag…
      kalo malas ato ragu untuk edit file php.ini, ganti aja format penulisan sebagai berikut yang saya contohkan menjadi
      berlaku untuk semua penulisan

  18. 2 April 2012 at 20:20

    saya pakek xampp kok muncul ya mas petanya…ada yang salah kyaknya…mohon bimbingannya

  19. p_wito
    23 March 2012 at 10:00

    om erik bagaimana menghubungkan titik titik koordinat data dengan sebuah garis sehingga menjadi sebuah rute ( perjalanan ) misalnya.

    trimkasih

  20. Suyono
    30 January 2012 at 10:55

    Untuk Menentukan Koordinat x dan y, coba anda gunakan adobe photoshop
    (preferences ubah ke pixel dan di info panel secara otomatis akan mengetahui koordinat x dan y nya). –> x dan y anda gunakan di tempat baru.

  21. Suyono
    29 January 2012 at 21:51

    Terima kasih, sangat bermanfaat artikelnya. GBU.

    Setelah saya coba untuk menentukan koordinat x dan y, coba dengan adobe photoshop.
    Pilh preferences dan ubah ke pixel –> kemudian pada info panel secara otomatis akan menunjukkan koordinat x dan y nya.
    senang bisa berbagi.

  22. 5 January 2012 at 02:08

    mas,, aku dah aktifkan di php.ini nya..
    tetep gag mau diklik titik2nya..
    mohon pencerahan..
    kalo bisa secepatnya mas.. masalahnya urgent..
    thx before..

    • 5 January 2012 at 02:09

      tolong ya mas

    • 5 January 2012 at 08:29

      gambar petanya muncul ga??

      • 6 January 2012 at 02:52

        muncul mas.. cuma link di titik2nya gag muncul mas…

      • 6 January 2012 at 11:07

        kalo gambarnya muncul, artinya settingan php.ini tidak ada masalah…coba perhatikan baik javascriptnya…mungkin ada error dikit…

      • 7 January 2012 at 02:16

        boleh minta script yg berhasil gag mas..
        kalo boleh,
        kirim ke email saya ya..
        pintimee@gmail.com

      • 8 January 2012 at 01:23

        silahkan Anda coba donload pada link yang tersedia pada artikel GIS…

  23. 5 January 2012 at 02:07

    bg, aku udah aktifkan di php.ini nya..
    tapi gag mau juga pas dklik titik nya..
    mohon pencerahan..
    secepatnya..kalo bisa besok mas..
    thx before..

    • p_wito
      23 March 2012 at 08:52

      php scrip dari om eric menggunakan <?= ( short tag ) coba ganti pakai <?php echo . karena php yang baru defaultnya tidak short tag. pasti muncul kli di klik.

      • 30 March 2012 at 15:03

        kalo di XAMPP memang harus di atur dulu setting short_tag…kl di AppServ tidak perlu… saya buatnya pake short tag soalnya pake AppServ…hehehe

  24. 12 December 2011 at 17:18

    bagaimana kelanjutan dari tutorial ini?cukup menarik dan saya sedang mempelajarinya, tapi saya ingin menanyakan hal yang sama seperti pertanyaan sebelumnya, bagaimana kita menentukan titik2 dari kota kota atau lokasi tersebut, apakah berdasarkan pixel dari image tersebut?
    terima kasih

    • 12 December 2011 at 21:08

      terima kasih atas masukannya…saya usahakan secepatnya…hehehe….untuk penentuan titiknya adalah dari garis lintang dan bujurnya…

  25. 13 October 2011 at 15:18

    gimana caranya mendapatkan lokasi (x dan y) dari titik yang
    di klik pada peta??
    fungsi ajax untuk mendapatkan x dan y pada peta yang diklik??

    thx before

    • 9 December 2011 at 21:36

      Maaf baru membalas…untuk mendapatkan titik x dan y adalah garis lintang dan bujur dari kota yang akan kita buatkan titiknya

  26. 10 September 2011 at 10:03

    mungkin kah di terapkan di mobile….

  27. 5 September 2011 at 04:59

    duh, ga lengkap

  28. julia
    18 December 2010 at 23:17

    mas..aku uda coba scriptnya, tp kok waktu di klik ga ada apa2 ya?

    aku blm pernah pake ajax sh mas..hhehe

    klo phpmapscript pernah coba ga mas?

    tks

    • 19 December 2010 at 09:24

      udah diikuti instruksinya untuk menghilangkan tanda ; di php.ini??

      soalnya script ini jalan koq..hehehhe…

      phpmapscript??kl nda salah, memanfaatkan fungsi php yang dah ada y??

  29. anthoplara
    12 October 2010 at 18:51

    Kirain bagus,,, nyesel donlod…

  30. 15 June 2010 at 17:10

    kalau kita ingin memindahkan koordinat salah satu titik bagaimana mas???

    bisa gak pake ajax??

    tks mas.,

    • 15 June 2010 at 19:00

      maksudnya bagaimana??titik koordinatnya bisa dipindahkan??

      • 16 June 2010 at 14:31

        maksudnya kalau kita ingin mengubah koordinat x dan y suatu negara. bisa gak menggunakan ajax, jadi untuk memindahkannya lebih mudah. hanya menggeser titik pada peta.???

        tks infonya.

      • 17 June 2010 at 11:42

        sepertinya bisa…nanti saya testing dulu y??ehehehe….

  31. rara
    8 June 2010 at 22:18

    saya mw tny,,,

    2k nentuin ti2k x & y nya gmn mas???

    makasih…

    • 8 June 2010 at 22:28

      untuk menentukan titik x dan y, terdapat sebuah rumus untuk menentukan koordinat x dan y dilayar monitor…jadi kita hanya menginput posisi bujur dan lintang dari kota yang kita input…nanti saya post y??hehehhee

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: