AJAX adalah teknologi yang sudah biasa digunakan dalam membangun Web. Dalam membangun dropdown yang akan kita demokan kali ini adalah, bagaimana membuat MVC (Controller, View, Model) dengan menambahkan code AJAX sederhana. Hal mendasar yang perlu diketahui adalah bagaimana memformat url yang biasanya di PHP biasa dengan
<select name="country" onchange="getCity('city.php?country='+this.value)" >
Kedalam konsep url di Codeigniter,
<select name="country" onchange="getCity(‘message/getCity/'+this.value) ">
- Message = nama class controller (sekaligus nama file controller)
- getCity = saah satu fungsi (method0 dalam class controller Message
- this.value = adalah nilai yang di select
Sehingga terbentuk url = http://codeigniter.bs/index.php/message/getCity/1 ( catt : 1 adalah nilai id country yang terselect misalnya)
Nah untuk mendapatkan nilai id = 1 itu menggunakan $this->uri->segment(3)
(lebih lanjutnya baca user_guide codeigniter bagian URI class)
Untuk lebih jelasnya bisa lihat list berikut :
1.Siapkan Codeigniter
Saya memisahkan file codeigniter kedalam beberapa bagian. Pertama ada file class yang digunakan sebagai engine utama. Kedua file yang didevelop (folder application) yang terdapat modul-modul config dan MVC. Ketiga adalah file pendukung seperti javascript,css,image dll.Lengkapnya sebagai berikut :
Struktur file :
DocumentRoot +
|
Codeigniter+
|
Htaccess
|
Index.php
|
Apps +
=> Application //Folder aplikasi utama
|
Js +
=>Jquery.js //file library ajax-javascript
|
Core +
=>ci //Folder engine Codeigniter minus folder application
2. Selanjutnya kita mulai membuat MVC di Codeigniter. Variabel penting yang harus diperhatikan adalah mengambil cara mengambil nilai dari id Country di dalam url http://codeigniter.bs/message/getCity/1 (aslinya bentuknya http://codeigniter.bs/index.php/message/getCity/1 . Maka tugas kita adalah mengambil nilai 1 sebagai modal untuk select data city dengan menggunakan $this->uri->segment(3).
3. Terakhir kita buat fungsi AJAX sederhananya. Berinama Ajax.js dan simpan di folder js .
function getXMLHTTP() {
var xmlhttp=false;
try{
xmlhttp=new XMLHttpRequest();
}
catch(e)<span> </span>{
try{
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
xmlhttp=false;
}
}
}
return xmlhttp;
}
function getCity(strURL) {
var req = getXMLHTTP();
if (req) {
req.onreadystatechange = function() {
if (req.readyState == 4) {</code>
// only if "OK"
if (req.status == 200) {
document.getElementById('citydiv').innerHTML=req.responseText;
} else {
alert("There was a problem while using XMLHTTP:\n" + req.statusText);
}
}
}
req.open("GET", strURL, true);
req.send(null);
}
}
