Tutorial ExtJS bagian 2: Hello World to AJAX

Pada tutorial sebelumnya kita sudah mencoba bagaimana membuat sebuah “Hello World” dengan ExtJS. Pada tutorial kali ini kita masih akan membuat “Hello World” hanya saja sekarang kita akan melakukan say hello kepada server secara asinkron.
Sebelum mulai pastikan web server anda berjalan dengan baik dan siapkan semua peralatan yang diperlukan (jangan lupa kopi dan snack).

Secara default ExtJS melakukan komunikasi dengan server (request & response) secara asinkron atau biasa disebut dengan AJAX, sehingga dalam membuat aplikasi web berbasis AJAX tidaklah sulit.

Kita akan mencoba membuat sebuah form dengan sebuah textfield dan button didalamnya, yang akan mengirimkan data dalam form saat tombol di klik, lalu server menerima request dan melakukan response.

Buat sebuah file helloclient.html dengan editor anda dan ketik kode berikut didalam head dibawah link ke file-file ExtJS.

<script>
	Ext.onReady(function() {
		var formbaru = new Ext.FormPanel({
			labelWidth: 80,
			url: 'helloserver.php',
			title: 'Say Hello to Server',
			width: 250,
			renderTo: document.body,
			items: [{
				xtype: 'textfield',
				name: 'txtNama',
				fieldLabel: 'Nama'
			}, {
				buttons: [{
					text: 'Hello Server',
					handler: function() {
						formbaru.getForm().submit({
							waitMsg: 'Tunggu ya...',
							success: function(form, action) {
								Ext.Msg.alert('Hello',action.result.nama);
								formbaru.getForm().clear;
							},
							failure: function(form,action) {
								Ext.Msg.alert('salah', action.result.error);
							}
						});
					}
				}]
			}]
		});
	});
</script>

Berikutnya kita buat file helloserver.php dan ketikkan kode berikut ini

<?php
	$nama = trim($_POST['txtNama']);
	if(!empty($nama)) {
		echo '{"success":"true", "nama":"'.$nama.'"}';
	} else {
    	echo '{"error":"nama belum diisi"}';
	}
?>

Jika anda menggunakan JSP sebagai server side scripting maka kita tinggal ubah dibagian url: ‘helloserver.php’ menjadi url: ‘helloserver.jsp’ lalu ketikkan kode berikut kedalam file helloserver,jsp

<%
	String nama = request.getParameter("txtNama");
	if (!nama.trim().equals("")) {
		out.print("{'success':'true', 'nama':'" + nama + "'}");
	} else {
		out.print("{'error':'nama tidak boleh kosong'}");
	}
%>

Setelah selesai silahkan dicoba di web browser anda dengan mengetikkan http://localhost/belajarextjs/helloclient.html

Jika nama tidak diisi maka akan tampil seperti berikut

Oke sekian dulu untuk tutorial kali ini, tunggu tutorial bagian berikutnya …