Sebelum memasuki Pembahsan DropdownList kita membahas AJAX Dulu karena ini sangat penting sekali yah kusus web Development maupun Web Designer
Setelah kemarin kita sudah belajar tentang XMLHttp dan pengiriman request ke server menggunakan method POST dan GET. Sekarang, kita akan belajar bersama tentang "Respon Server".
Respon Server
Untuk mendapatkan respon dari server, kita dapat menggunakan responeText atau responeXML. Sekedar penjelasan, responText berarti kita menerima balasan dari server dalam bentuk text, sedangkan responeXML berarti kita menerima balasan dari server dalam bentuk data XML. Silahkan kalian pilih dengan bijak yang mana yang akan kalian gunakan.
Menggunakan ResponeText
Jika balasan dari server berupa teks dan bukan data XML, maka gunakan responeText. ResponeText akan mengembalikan bentuk data dari server menjadi teks. Seperti yang saya gunakan pada contoh di part pertama.
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Menggunakan ResponeXML
Jika balasan dari server bukan berupa teks dan kalian ingin menguraikannya menjadi XML, maka gunakan responeXML. Sebagai contoh, kita akan menggunakan contoh yang sudah ada di w3schools.com. yaitu menggunakan data xml cd_catalog.xml dan kode html :
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(){
var xmlhttp;
var txt,x,i;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++){
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","cd_catalog.xml",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>My CD Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
</body>
</html>
Event onreadystatechange
Ketika perminataan ke server dikirim, kita bisa melakukan beberapa tindakan berdasarkan respon dari server.
Event onreadystatechange akan ter-eksekusi setiap ada perubahan readyState.
Properti readyState itu membawa status dari XMLHttpRequest.
Properti Deskripsi
onreadystatechange Sebuah fungsi yang otomatis akan terpanggil tiap kali property readyState berubah
readyState Pemegang status dari XMLHttpRequest, Berubah dari 0 sampai 4
0 : Request di-inisialisasikan
1 : Koneksi ke server didirikan
2 : Permintaan diterima server
3 : Permintaan diproses server
4 : Permintaan telah diterima dan respon siap
Status 200 : OK
404 : PNF(Page Not Found)
Kita dapat menentukan readiState dan status-nya di :
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Note : event onreadystatechange dieksekusi sebanyak lima kali (0-4), yaitu setiap perubahan pada readyState.
Callback
Callback adalah fungsi yang menyalurkan parameter ke fungsi lain.
Jika kita memiliki lebih dari satu tugas AJAX di website kita, maka kita harus membuat satu fungsi standar untuk menciptakan objek XMLHttpRequest, dan memanggilnya untuk setiap tugas AJAX.
Fungsi yang dipanggil harus berisi URL dan apa yang harus dilakukan pada onreadystatechange (yang mungkin berbeda untuk setiap panggilan). Ini tentunya sangat berguna untuk menyingkat waktu penulisan code bukan?
Sekian untuk hari ini. Tapi, untuk kalian yang belum memahami tentang callback bisa melihat contoh callack dari www.w3schools.com ini :
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">Change Content</button>
</body>
</html>
Mengapa kita perlu membuat sebuah drop down list pada form kita? Kan kita bisa membuat sebuah drop down secara manual. Um... kita buat sebuah studi kasus.
Kita mempunyai dua buah tabel seperti berikut:
Kemudian kita membuat CRUD tabel 'artikel' menggunakan GII dan hasilnya seperti ini:
Kalau belum tahu caranya membuat CRUD menggunakan GII,
Di sini kita anggap saja yang memasukkan data bukanlah penulis artikel itu sendiri. Melainkan orang lain yang tugasnya memang memasukkan data. Masalah yang muncul adalah, petugas tersebut tidak hafal id penulis dan ini membuat pekerjaannya menjadi kurang cepat. Karena itu, kita akan mengganti form input tersebut menjadi dropdown list yang berisi nama-nama penulis. Meskipun nanti, nilai yang disimpan di database adalah id sang penulis.
Baiklah, pertama yang perlu kita edit adalah _form.php yang ada di folder artikel.
Pada bagian atas(yang ada use), kita tambahkan arrayHelper dan models tabel User. Sehingga menjadi seperti ini:
use yii\helpers\Html;
use yii\widgets\ActiveForm;
use yii\helpers\ArrayHelper;
use common\models\User;
Di atas models User saya namespace-nya "common\models". Bisa disesuaikan dengan namespace dari model yang anda gunakan.
Lalu pada kita ubah :
<?= $form->field($model, 'user_id')->textInput() ?>
Menjadi :
<?=
$form->field($model, 'user_id')->dropDownList(
ArrayHelper::map(User::find()->all(),'id','username'),
['prompt'=>'Pilih User']
)
?>
Penjelasan step by step:
1. Kita ubah textInput() menjadi dropDownList() karena kita akan membuat sebuah dropdown. Tapi, bagaimana dengan isinya?
2. Untuk mengisi dropdown tersebut, kita menggunakan ArrayHelper yang di integrasikan dengan model User.
3. Pada sintaks di atas, User adalah nama class yang ada di dalam model. Sedangkan maksud dari sintak User::find()->all() adalah menemukan dan mengambil semua data yang ada pada tabel user (kan model User dibuat berdasarkan tabel user).
4. 'id' dan 'username' di sana adalah kolom yang ada pada tabel user. 'id' adalah apa yang akan dikirimkan ketika form di submit, sedangkan 'username' adalah apa yang akan muncul (menjadi isi) di dropdown.
5. ['prompt'=>'Pilih User'] berarti, nilai awal atau tulisan yang ada pada dropdown ketika kosong adalah 'Pilih User'.
Jadinya akan Seperti gambar dibawah ini:
Ok Itulah tips dari kami semoga Artikel ini sangat berguna sekali buat anda, Jangan lupa Share ke lainnya yahh dan berikan Komentar
Tidak ada komentar:
Posting Komentar