Google Map Application

Using CodeIgniter and Google Maps API

Yesi Diah Rosita, S.Kom. Islamic Majapahit University

Mojokerto 2013

Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 1

Dalam kesempatan ini akan membuat sebuah aplikasi sistem informasi geografis

berbasis web dengan menggunakan CodeIgniter dan memanfaatkan Google Maps API, tetapi

sebelumnya paling tidak sudah mempunyai dasar kepahaman dengan PHP. Sekarang apa

yang dimaksud dengan CodeIgniter & Google Maps API?

CodeIgniter adalah salah satu framework php yang bagus dengan ukuran kecil.

Framework merupakan kumpulan script (terutama class dan fungsi) yang dapat membantu

developer/programmer dalam menangani berbagai masalah dalam pemrograman.

Sedangkan Google Maps API merupakan aplikasi interface yang dapat diakses lewat

javascript dengan tujuan agar Google Maps dapat ditampilkan pada halaman web yang

dibangun.

Sebelum menggunakan CodeIgniter maka perlu dipersiapkan:

a. PHP 4.3.2 atau versi di atasnya.

b. Web Server (Apache Recommended)

c. Database (MySQL Recommended)

d. CodeIgniter php framework (www.codeigniter.com)

Proses Instalasi CodeIgniter

a. Letakkan folder CodeIgniter di dalam foler xampp/htdocs. Kemudian rename

menjadi terminal.

b. Konfigurasi pada folder application yang terdapat pada folder CodeIgniter:

config/config.php

Mengisi alamat pemanggilan di browser.

$config['base_url'] = 'http://localhost/terminal';

$config['rewrite_short_tags'] = TRUE;

config/database.php

Mengisi hostname, username, password, database, dan dBDriver.

$db['default']['hostname'] = 'localhost';

$db['default']['username'] = 'root';

$db['default']['password'] = '';

$db['default']['database'] = 'terminal';

$db['default']['dbdriver'] = 'mysql';


config/autoload.php

Memanggil secara otomatis fungsi-fungsi yang sudah disediakan oleh

CodeIgniter atau yang kita buat tanpa harus memanggilnya dalam aplikasi.

$autoload['libraries'] = array(database); $autoload['helper'] = array(url,form);

config/routes.php

Menentukan berkas utama yang digunakan pada sebagai eksekutor utama

website/aplikasi.

$route['default_controller'] = 'welcome';

Excute

Buka sebuah browser (misal: Mozilla) kemudian ketikkan:

http://localhost/terminal

nama terminal merupakan hasil rename dari CodeIgniter. Jangan lupa di aktifkan

modules pada Xampp Control Panel.

Gambar a. Hasil execute http://localhost/terminal


Pada sub bab ini akan membuat sebuah aplikasi yang dapat digunakan untuk mencari

titik koordinat yang terdekat dari sebuah lokasi. Maka yang perlu dipahami terlebih dahulu

adalah system koordinat geografis.

Lintang dan bujur merupakan dasar dari sistem koordinat. Letak suatu lokasi terdapat

pada garis lintang dan garis bujur tertentu. Contoh lokasi Universitas Islam Majapahit

Mojokerto terletak pada titik koordinat

Secara sederhana konversi ukuran dari derajat ke jarak lurus adalah sebagai berikut:

Lintang (Lattitude) : 110.54 km

Bujur (Longitudinal) : 110,32 x cos () km

Jika sudah diketahui titik koordinat suatu lokasi, maka dapat dicari jarak antara lokasi

satu dengan yang lain dengan sudah diketahui titik koordinatnya juga. Adapun rumusnya

sebagai berikut:

di mana:

D = Jarak linier antara dua titik

xi = Posisi titik i pada sumbu x (garis lintang)

yi = Posisi titik I pada sumbu y (garis bujur)


2.1 Menampilkan Data Terminal

Dalam dal ini membuat data terminal wilayah Jakarta dengan membuat table pada

database yang sudah dibuat (terminal) dengan koordinat. Table koordinat

mempunyai 4 field/kolom sebagai berikut:

Table a. Rancangan table koordinat

Field Data Type

ID int

lng Float

lat float

nmterm Varchar(30)

Kemudian isi table koordinat seperti berikut ini:

Gambar b Data table koordinat

Script

a. xampp/localhost/terminal/application/model

Tuliskan script di bawah ini kemudian simpan dengan nama m_terminal.php


}

b. xampp/localhost/terminal/application/view

Tuliskan script di bawah ini kemudian simpan dengan nama data_terminal.php

Data Terminal

ID

Longitudinal

Lattitude

Nama Terminal

c. xampp/localhost/terminal/application/controller

Tuliskan script di bawah ini kemudian simpan dengan nama utama.php


Konfigurasi

application/config/routes.php

Menentukan berkas utama yang digunakan pada sebagai eksekutor utama

website/aplikasi.

|-----------------------------------------------------------------

| RESERVED ROUTES

| ----------------------------------------------------------------

| There area two reserved routes:

|

| $route['default_controller'] = 'welcome';

|

| This route indicates which controller class should be loaded if

| The URI contains no data. In the above example, the "welcome" class

| would be loaded.

|

| $route['404_override'] = 'errors/page_missing';

|

| This route will tell the Router what URI segments to use if

those provided

| in the URL cannot be matched to a valid route.

|

*/

$route['default_controller'] = "utama";

$route['404_override'] = '';

/* End of file routes.php */

/* Location: ./application/config/routes.php */


Excute



Jangan lupa untuk mengaktifkan modul pada Xampp Control Panel terlebih dahulu.

Gambar c. Hasil eksekusi menampilkan data

2.2 Mencari Terminal Terdekat

Script




$dx=$lat1-$lat2;

$dy=$lng1-$lng2;

$dr=sqrt(pow($dx,2)+pow($dy,2));

if($ind == 1 or $dr

Rumus jarak koordinat


Tuliskan script di bawah ini kemudian simpan dengan nama

cari_terminal.php

Longitude

Latidude

Tuliskan script di bawah ini kemudian simpan dengan nama hasil.php

Terminal Terdekat dari Kordinat ( , ) adalah




Excute




Gambar d. Hasil eksekusi pencarian terminal terdekat

2.3 Mencari Dua Terminal Terdekat

Script




$dx=$lat1-$lat2;

$dy=$lng1-$lng2;

$dr=sqrt(pow($dx,2)+pow($dy,2));

if($ind == 1 or $dr


Dalam hal ini yang perlu diubah hanyalah file hasil.php karena sebagai hasil outputnya.

Terminal Terdekat dari Kordinat ( , )

adalah dan




}

}

Excute




Gambar e. Hasil eksekusi pencarian dua terminal terdekat

2.4 Menampilkan Koordinat Geografis

Sebelumnya aktifkan modul cURL (dibaca: si URL) dulu, caranya dengan file

C:\xampp\php\php.ini. Cari baris yang bertuliskan ;extension=php_curl.dll. Lalu

hapus tanda titik koma (;), sehingga menjadi extension=php_curl.dll. Setelah itu cek

apakah cURL sudah akif apa tidak dengan mengetikkan script dibawah ini dan simpan

dengan nama file test.php (letakkan pada C:\xampp\htdocs\.


Kemudian restart modul XAMPP Control Panel. Ketikkan

http://localhost/test.php.

cURL merupakan alat bantu command line untuk transfer berkas dengan syntax

URL melalui berbagai macal protocol (FTP,HTTP, HTTPS, dll). Ada beberapa fungsi

umum pada cURL, yakni:

a. curl_init = memulai sesi cURL

b. curl_setopt = menentukan opsi-opsi sebelum menjalankan cURL.

c. curl_exec = menjalankan cURL

d. curl_close = menutup sesi cURL

Script




$lat = $geocode->results[0]->geometry->location->lat;

$lng = $geocode->results[0]->geometry->location->lng;

$formatted_address = $geocode->results[0]->formatted_address;

}

return array ($lat, $lng, $formatted_address, $geo_status);

}

}


Tuliskan script di bawah ini kemudian simpan dengan nama cari_terminal.php


}

?>

Excute




Gambar f. Hasil eksekusi tampilan input lokasi

Misalnya masukkan Mojokerto, kemudian klik tombol cari, maka hasilnya:

Gambar g. Hasil eksekusi tampilan output titik koordinat

2.5 Menampilkan Koordinat Geografis dalam Peta Google Maps

Script

a. xampp/localhost/terminal/application/view

Tambahkan file dengan nama tampil_peta.php dan berikut ini script-nya:


b. xampp/localhost/terminal/application/controller


?php

class Utama extends CI_Controller {

function __construct(){

parent::__construct();

$this->load->model('m_terminal');

$this->load->helper('form');

$this->load->database();

}

function index(){

$data['pusat_peta'] = $this->m_terminal->geocode('monumen nasional');

$this->load->view('tampil_peta', $data);

}

function cari(){

$alamat = $this->input->POST('address');

if($alamat""){

$alamat = $this->m_terminal->geocode($alamat);

if($alamat[3]=="OK"){

$data['pusat_peta'] = $alamat;

$this->load->view('tampil_peta', $data);}

else{

$this->kesalahan();

}

}

else{

$this->kesalahan();

}

}

function kesalahan(){

$data['pusat_peta'] = $this->m_terminal->geocode('monumen nasional');

$data['note']="Alamat tidak ditemukan, silahkan coba lagi";


}

}

Excute





Misal sebagai inputannya adalah Mojokerto, maka hasilnya:

Gambar h. Hasil eksekusi tampilan output titik koordinat dalam peta Google Maps

2.6 Mencari Dua Terminal Terdekat dalam Peta Google Maps

Script


Tambahkan file dengan nama m_terminal.php dan berikut ini script-nya:

?php

class M_terminal extends CI_Model {

function data_tabel(){

$query = $this->db->get('koordinat');

return $query->result();

}


function carintd($lat1,$lng1,$ntx) {

$radlat1 = deg2rad($lat1);

$radlng1 = deg2rad($lng1);

$data_term = $this->m_terminal->data_tabel();

foreach ($data_term as $row) {

$ind = $row->ID ;

$lat2 =$row->lat;

$lng2 =$row->lng;

$nt =$row->nmterm;

$radlat2 = deg2rad($lat2);

$radlng2 = deg2rad($lng2);

$radlng21 = deg2rad($lng2-$lng1);

$dr=cos($radlat1)*cos($radlat2)*cos($radlng21);

$dr=$dr+(sin($radlat1)*sin($radlat2));

$dr=acos($dr)*6371;

if($ind == 1 or $drstatus;


}

else {

$geo_status = "HTTP_FAIL_$httpCode";

}

if ($geo_status == "OK"){

$lat = $geocode->results[0]->geometry->location->lat;

$lng = $geocode->results[0]->geometry->location->lng;

$formatted_address = $geocode->results[0]-

>formatted_address;

}

return array ($lat, $lng, $formatted_address, $geo_status);

}

}


Tuliskan script di bawah ini kemudian simpan dengan nama tampil_peta.php

function initialize() {

var myOptions = {

zoom : 14,

center: latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var peta = new

google.maps.Map(document.getElementById("kanvas_peta"),myOptions);

tambah_marker(peta,"",latlng,'');


echo "var ikon1 =

'http://maps.google.com/mapfiles/kml/pal3/icon0.png';";

echo "var ikon2 =

'http://maps.google.com/mapfiles/kml/pal3/icon1.png';";

echo "tambah_marker(peta,'$marker1[2]',latlngm1,ikon1);";

echo "tambah_marker(peta,'$marker2[2]',latlngm2,ikon2);";

echo "var batas = new google.maps.LatLngBounds();";

echo "batas.extend(latlng);";

echo "batas.extend(latlngm1);";

echo "batas.extend(latlngm2);";

echo "peta.fitBounds(batas);";

}

?>

}

function tambah_marker(mpeta,mjudul,mposisi,mikon) {

if (mikon=="") {mikon="http://www.google.com/mapfiles/marker.png"};

var marker = new google.maps.Marker({

map:mpeta,

title:mjudul,

icon: mikon,

position: mposisi

});

}


echo " Terminal terdekat dari lokasi ini :$marker1[2] ($jarak1 km) dan $marker2[2]

($jarak2 km) ";

}

if(isset($note)) { echo $note ; }

?>




$data['marker1']= $term1;

$data['marker2']=$term2;

}

else{

$data['note']= "Lokasi berjarak $batas_jarak KM lebih dari jakarta, tidak

ada data terminal yang ditampilkan";

}


}

else{

$this->kesalahan();

}

}

else{

$this->kesalahan();

}

}

function kesalahan(){

$data['pusat_peta'] = $this->m_terminal->geocode('Jakarta');

$data['note']="Alamat tidak ditemukan, silahkan coba lagi";


}

}

?>


Excute




Misal sebagai inputannya adalah Depok, maka hasilnya:

Gambar 2.8 Hasil eksekusi tampilan output pencarian dua titik koordinat terdekat dalam peta Google Maps

Semoga Bermanfaat!

Google Map Application

Documents

Transcript of Google Map Application