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';
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 2
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
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 3
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)
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 4
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
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 5
}
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
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 6
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 */
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 7
Excute
Buka sebuah browser (misal: Mozilla) kemudian ketikkan:
http://localhost/terminal
Jangan lupa untuk mengaktifkan modul pada Xampp Control Panel terlebih dahulu.
Gambar c. Hasil eksekusi menampilkan data
2.2 Mencari Terminal Terdekat
Script
a. xampp/localhost/terminal/application/model
Tuliskan script di bawah ini kemudian simpan dengan nama m_terminal.php
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 8
$dx=$lat1-$lat2;
$dy=$lng1-$lng2;
$dr=sqrt(pow($dx,2)+pow($dy,2));
if($ind == 1 or $dr
Rumus jarak koordinat
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 9
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
c. xampp/localhost/terminal/application/controller
Tuliskan script di bawah ini kemudian simpan dengan nama utama.php
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 10
Excute
Buka sebuah browser (misal: Mozilla) kemudian ketikkan:
http://localhost/terminal
Jangan lupa untuk mengaktifkan modul pada Xampp Control Panel terlebih dahulu.
Gambar d. Hasil eksekusi pencarian terminal terdekat
2.3 Mencari Dua Terminal Terdekat
Script
a. xampp/localhost/terminal/application/model
Tuliskan script di bawah ini kemudian simpan dengan nama m_terminal.php
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 11
$dx=$lat1-$lat2;
$dy=$lng1-$lng2;
$dr=sqrt(pow($dx,2)+pow($dy,2));
if($ind == 1 or $dr
b. xampp/localhost/terminal/application/view
Dalam hal ini yang perlu diubah hanyalah file hasil.php karena sebagai hasil outputnya.
Terminal Terdekat dari Kordinat ( , )
adalah dan
c. xampp/localhost/terminal/application/controller
Tuliskan script di bawah ini kemudian simpan dengan nama utama.php
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 12
}
}
Excute
Buka sebuah browser (misal: Mozilla) kemudian ketikkan:
http://localhost/terminal
Jangan lupa untuk mengaktifkan modul pada Xampp Control Panel terlebih dahulu.
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\.
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 13
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
a. xampp/localhost/terminal/application/model
Tuliskan script di bawah ini kemudian simpan dengan nama m_terminal.php
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 14
$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);
}
}
b. xampp/localhost/terminal/application/view
Tuliskan script di bawah ini kemudian simpan dengan nama cari_terminal.php
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 15
}
?>
Excute
Buka sebuah browser (misal: Mozilla) kemudian ketikkan:
http://localhost/terminal
Jangan lupa untuk mengaktifkan modul pada Xampp Control Panel terlebih dahulu.
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:
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 16
function initialize() {
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var peta = new
google.maps.Map(document.getElementById("kanvas_peta"),myOptions);
var marker = new google.maps.Marker({
map:peta,
title:"",
position: latlng
});
}
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 17
b. xampp/localhost/terminal/application/controller
Tuliskan script di bawah ini kemudian simpan dengan nama utama.php
?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";
$this->load->view('tampil_peta', $data);
}
}
Excute
Buka sebuah browser (misal: Mozilla) kemudian ketikkan:
http://localhost/terminal
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 18
Jangan lupa untuk mengaktifkan modul pada Xampp Control Panel terlebih dahulu.
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
a. xampp/localhost/terminal/application/model
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();
}
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 19
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;
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 20
}
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);
}
}
b. xampp/localhost/terminal/application/view
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,'');
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 21
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
});
}
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 22
echo " Terminal terdekat dari lokasi ini :$marker1[2] ($jarak1 km) dan $marker2[2]
($jarak2 km) ";
}
if(isset($note)) { echo $note ; }
?>
c. xampp/localhost/terminal/application/controller
Tuliskan script di bawah ini kemudian simpan dengan nama utama.php
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 23
$data['marker1']= $term1;
$data['marker2']=$term2;
}
else{
$data['note']= "Lokasi berjarak $batas_jarak KM lebih dari jakarta, tidak
ada data terminal yang ditampilkan";
}
$this->load->view('tampil_peta', $data);
}
else{
$this->kesalahan();
}
}
else{
$this->kesalahan();
}
}
function kesalahan(){
$data['pusat_peta'] = $this->m_terminal->geocode('Jakarta');
$data['note']="Alamat tidak ditemukan, silahkan coba lagi";
$this->load->view('tampil_peta', $data);
}
}
?>
Google Maps Application | GIS | Yesi Diah Rosita, S.Kom. | UNIM-Mojokerto | 2013 Page 24
Excute
Buka sebuah browser (misal: Mozilla) kemudian ketikkan:
http://localhost/terminal
Jangan lupa untuk mengaktifkan modul pada Xampp Control Panel terlebih dahulu.
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!