AJAX: Melangkah lebih jauh dengan XMLHttpRequest

AJAX didasarkan pada penggunaan engine javascript yang tertanam hampir di semua browser modern. Dengan kontra bahwa perilaku kode javascript yang kita ciptakan akan bervariasi sesuai dengan engine javascript yang digunakan oleh masing-masing browser. Untuk mengetahui lebih lanjut engine javascript browser, Anda dapat membacanya lebih lanjut di wikipedia.

XMLHttpRequest

Seperti yang sudah dibahasa pada posting saya sebelumnya, AJAX menggunakan object javascript XMLHTTPRequest untuk berkomunikasi dengan web server.
Objek javascript XMLHttpRequest atau yang biasa disingkat xhr,seperti namanya,akan memungkinkan kita untuk membuat request melalui protokol http ke web server dengan return XML.

Membuat objek XMLHttpRequest

var xhr = null;
if (window.XMLHttpRequest) //Firefox dan lainnya
    xhr = new XMLHttpRequest();
else if (window.ActiveXObject) {//Internet Explorer
    try {
        xhr = new ActiveXObject ("MSXML2.XMLHTTP");
    } catch(e) {
        xhr = new ActiveXObject ("Microsoft.XMLHTTP");
    }
} else {
    //XMLHttpRequest tidak didukung oleh browser Anda
    alert ("Browser Anda tidak mendukung objek XMLHttpRequest ...");
    xhr = false;
}

Penggunaan Objek XMLHttpRequest

Property / Method	Deskripsi
open("method","url",flag)	Membuka koneksi ke server. method: metode koneksi "GET" atau "POST" url: url tujuan koneksi flag: tipe boolean, true jika asynchronous.
setRequestHeader("nama","nilai")	Mengeset HTTP header dalam request. Contoh: POST nama->"Content-Type" value->"application/x-www-form-urlencoded"
send("params")	mengirim parameter request. Jika menggunakan metode GET, parameter akan diset null namun parameter dikirim melalui url query string. Jika menggunakan metode POST, parameter akan dikirim melalui form.
abort()	Membatalkan request
onreadystatechange	fungsi yang akan dieksekusi ketika terjadi perubahan pada objek.
readyState	fungsi yang menguji fungsi onreadystatechange. 0: Not Initialized (belum / tidak di inisiasi) 1: Open (telah dibuka) 2: Sent (telah dikirim) 3: In Progress (dalam proses) 4: Ready (semua data telah dimuat)
status	respon status dalam kode
statusText	respon status dalam format teks
responseText	respon pesan yang dikembalikan server dalam format text
responseXML	respon pesan yang dikembalikan server dalam format XML

Baca selengkapnya...

JavaScript dan Cookies

Kita pasti sering mendengar istilah "Cookie" di internet. Didalam dunia web, "cookie" adalah potongan informasi yang diberikan oleh web server kepada browser saat pertama kalinya terjadi interaksi antara web server dengan browser. Data ini disimpan kedua-duanya; baik di web server maupun di browser sehingga data ini dapat saling dipergunakan antara web browser dan server.

Dengan menggunakan JavaScript, kita bisa melakukan banyak hal bermanfaat dengan cookie. Misalnya, membuat web yang menggunakan sistem authentikasi dengan fasilitas pengingat password. Kita bisa menggunakan cookie untuk menyimpan username serta password sehingga saat berikutnya, pengunjung web kita tidak perlu bersusah-payah melakukan login ulang. Kita juga bisa menggunakan cookie untuk men-track bagian website kita yang sering dikunjungi sehingga kita dapat menghitung secara spesifik bagian mana dari website kita yang paling sering dikunjungi.

Konsep Penggunaan Cookie

Yang pastinya, cookie tidak bisa melakukan hal-hal berikut:

• Cookie tidak bisa digunakan untuk mendapatkan informasi "real" dari user, contohnya mendapatkan alamat email user
• Cookie tidak bisa digunakan untuk memeriksa konten hard disk,
• Cookie tidak bisa digunakan untuk mentransmit virus

Jadi, cookie itu sebenarnya hanya sebuah file sederhana yang tersimpan di hard disk pengunjung dimana kita bisa menggunakannya hanya untuk menyimpan beberapa informasi saja. Oh iya, satu lagi:

• Cookie hanya valid untuk web yang membuatnya. Mekanisme di browser tidak mengizinkan kita untuk membaca/menulis cookie yang dibuat oleh orang/web lain.

Artinya, kita hanya bisa menggunakan cookie yang kita buat sendiri.

Membuat Cookie

Cookie dapat dibuat dengan format berikut:

cookieName=cookieValue;
expires=expirationDateGMT;
path=URLpath; domain=siteDomain

Keterangan

cookieName: nama dari Cookie yang kita buat. Nama cookie wajib dibuat.

expires: tanggal kadaluarsa cookie. Cookie akan dihapus oleh browser secara otomatis apabila melewati tanggal ini.

path: alamat web cookie.

domain: domain cookie.

Baca selengkapnya...

Teknik Shorthand JavaScript

Menyingkat script, memperkecil ukuran kode, ... mempercepat loading

Kita dapat menggunakan sejumlah pernyataan JavaScript dengan metode singkatan untuk memperkecil size kode, setidaknya size kode kita berkurang beberapa byte yang akan memberikan keuntungan mempercepat waktu loading aplikasi kita :)

Perlu diketahui, metode singkatan atau "shorthand" dalam JavaScript (maupun ECMAScript sebagai induk resmi dari Javascript) bukanlah cara yang resmi. Cara ini murni merupakan metode yang ditemukan oleh programmer.

Mari kita mulai, ...

1. Cara Singkat Deklarasi Variable

Metode singkat deklarasi variable dalam javascript ini juga dapat kita temukan dalam banyak bahasa lainnya. Metode ini dapat menghemat banyak waktu dan ruang ketika mendeklarasikan beberapa variabel sekaligus.

Metode Longhand:

var x;
var y;
var z = 3;

Metode Shorthand:

var x, y, z = 3;

2. Cara Singkat Deklarasi Object Array

Metode singkat mendeklarasikan object array dalam satu baris.

Metode Longhand:

var a = new Array();
a[0] = "myString1";
a[1] = "myString2";
a[2] = "myString3";

Metode Shorthand:

var a = ["myString1", "myString2", "myString3"];

3. Cara Singkat Deklarasi Object Array Asosiatif

Bagaimana dengan array asosiatif? Hampir sama dengan cara diatas, array asosiatif juga bisa kita singkat. Contoh seperti berikut...

Metode Longhand:

var mySkill = new Array();
mySkill['Web Programming'] = 'PHP';
mySkill['Desktop Programming'] = 'Java';
mySkill['Database'] = 'MySQL';

Metode Shorthand:

var mySkill= {
    'Web Programming': 'PHP',
    'Desktop Programming': 'Java',
    'Database': 'MySQL'
};

4. If true … else

Ini adalah metode penghemat kode untuk ketika kita ingin melakukan test kondisi. Kita dapat mempersingkat test kondisi satu dengan yang lain dengan menggunakan operator ternary.

Metode Longhand:

var big;
if (x > 10) {
    big = true;
} else {
    big = false;
}

Metode Shorthand:

var big = (x > 10) ? true : false;

Cara singkat untuk test kondisi bercabang (nested if):

var big = (x > 10);
//Contoh kondisi bercabang
x = 3;
var big = (x > 10) ? "besar dari 10" : (x < 5) ? "kurang dari 5" : "antara 5 dan 10";

5. Null, Undefined

Ketika membuat variabel baru kadang-kadang kita perlu memeriksa apakah variabel referensi untuk nilai itu tidak null atau undefined.

Metode Longhand:

if (variable1 !== null || variable1 !== undefined || variable1 !== '') {
     var variable2 = variable1;
}

Metode Shorthand:

var variable2 = variable1  || '';

Bingung dengan metode singkat ini? Mungkin anda perlu membaca post saya sebelumnya Null dan Undefined pada JavaScript.

6. Membandingkan nilai Variable

Cara ini untuk membandingkan nilai variable,.. Contoh kode dibawah ini adalah kode untuk mengembalikan salah satu nilai variable tersebut bergantung pada ada atau tidaknya nilai_awal.

Metode Longhand:

if (!nilai_awal) {
    return nilai_awal;
} else{
   return nilai_akhir('100');
}

Metode Shorthand:

return nilai_awal || nilai_akhir('100');

Baca selengkapnya...

Ext.ux.data.PagingStore problem with empty store

I'm using Ext.ux.data.PagingStore extension made by Condor because I need local store for paging my ExtJs grid. But, there is problem with this extension. The grid paging toolbar always set the current page cursor at page 2 while the store is empty.

After searching at sencha forum, I've found this solution was succesfully solve my problem with Ext.ux.data.PagingStore.

Just add a constructor for Ext.ux.data.PagingStore:

constructor: function(config) {
        this.totalLength = 0;
        Ext.ux.data.PagingStore.superclass.constructor.call(this, config);
},

and ... At the beginning of the Ext.ux.PagingToolbar's onChange method:
Change the code

if (this.cursor >= t) {
     this.cursor = Math.ceil((t + 1) / s) * s;
}

into like this:

if (this.cursor >= t && this.cursor > 0) {
     this.cursor = Math.ceil((t + 1) / s) * s;
}

The link to sencha forum thread is:
http://www.sencha.com/forum/showthread.php?71532-Ext.ux.data.PagingStore-v0.5&p=624509&viewfull=1#post624509

Hopefully that save your headache too.. :)
Baca selengkapnya...

Null dan Undefined pada JavaScript

Banyak yang menguji ekspresi nilai dalam JavaScript dengan cara berikut:

if (SomeObject != null ) ...

Apa yang salah?

Dalam javascript, object yang belum tercipta akan mengembalikan nilai "undefined", jadi kode tersebut diatas hanya dapat dipergunakan untuk mengecek nilai object yang sebelumnya telah terdefinisi. Jika object belum tercipta, maka kode tersebut malah menciptakan error lain... yaitu "SomeObject is undefined"

Kita dapat menggunakan "typeof" secara eksplisit untuk memeriksa apakah object telah terdefinisi, atau menggunakan trik lainnya. Tapi, cara itu juga memungkinkan celah terjadinya kesalahan dalam evaluasi nilai.


Cara yang benar:

if (!SomeObject) {

Terlihat singkat, tapi inilah yang lebih benar.
Sekali lagi perlu diperhatikan bahwa "undefined" berbeda dengan "null".
Object yang tidak/belum memiliki nilai mengembalikan nilai "null", sedangkan object yang malah belum tercipta sama sekali akan mengembalikan nilai "undefined". Baca selengkapnya...

Namespace untuk memudahkan organisasi kode JavaScript

Sebagai Web Programmer, kita harus menyadari bahwa kadang programmer lain dapat berinteraksi dengan kode web yang kita buat ataupun sebaliknya, kadang kala kita sering kali "mencuri" potongan class, widget dari berbagai sumber untuk membentuk kode milik kita sendiri. Untuk itulah kita memerlukan namespaces.

Tunggu dulu... Sebenarnya, Apa itu Namespace?
Definisi Wikipedia, Namespace adalah "an abstract container providing context for the items (names, or technical terms, or words) it holds and allowing disambiguation of items having the same name [...] For many programming languages, a namespace is a context for identifiers. In an operating system, an example of namespace is a directory."

Jadi namespace itu dalam pemrograman cuma digunakan untuk memudahkan melakukan identifikasi dan organisasi kode. Layaknya kita mengatur semua file mp3 kedalam folder "My Music", dan file gambar dan photo ke dalam folder "My Picture".

Atau coba perhatikan gambar berikut yang merupakan diagram namespace Domain Name dan Filesystem Unix:

Mengapa menggunakan namespaces?
Menggunakan Namespace sangat penting bagi kita sebagai web programmer untuk memastikan bahwa kode yang kita buat tidak ditimpa ketika diproses oleh JavaScript intepreter. Jika ada programmer lain yang mendefinisikan sebuah variabel dengan nama yang sama dengan yang kita buat, maka variable tersebut akan ditimpa. Kode milik programmer terakhir yang diproses oleh JavaScript merupakan variable yang dianggap sah.

Ini terjadi karena JavaScript adalah bahasa fungsional yang menciptakan fungsi atau variabel yang tidak dibungkus dalam fungsi lain dan dibuat dalam lingkup global (window). Maka untuk mengatasi terjadinya konflik seperti ini, kita dapat menempatkan variable maupun fungsi milik kita kedalam object sehingga hanya berada di scope object yang kita buat.

Cara Membuat Namespace
Pertama tentunya kita harus menentukan "nama" sebagai namespace kita.. hehe :)
Buatlah nama yang merefer fungsi yang dimilik dari object namespace tersebut. Misal untuk menampilkan data pegawai, kita beri namespace "appPegawaiView", untuk mengedit data pegawai, kita beri namespace "appPegawaiEdit"...

Contoh:

var appPegawaiView = {};
var appPegawaiEdit = {};

Atau kita dapat memeriksa terlebih dahulu apakah sudah ada object yang memiliki nama yang sama dengan object namespace yang ingin kita buat dengan cara:

if (!appPegawaiView) appPegawaiView = {};
if (!appPegawaiView.form) appPegawaiView.form = {};
if (!appPegawaiView.data) appPegawaiView.data = {};

Contoh lengkap:

var appPegawaiView = function(){
	var private_var;
	function private_method(){
	}
	return {
		method_1: function(){
			// kode metode 1 disini
		},
		method_2: function(){
			// kode metode 2 disini
		}
	};
}();

Baca selengkapnya...

Memahami Object dalam JavaScript

Object dalam bahasa yang paling disalahpahami di dunia

Banyak yang percaya, JavaScript adalah bahasa yang paling disalahpahami di dunia.. Contohnya dalam memahami Object dalam javaScript.

Mana sebenarnya "Object" dalam JavaScript?

JavaScript dibentuk dari object. Array adalah object. Fungsi adalah object. Object adalah Object. Jadi, mana object sebenarnya???

Object adalah pasangan nama dan nilai. Nama-nama adalah string, dan nilai dari string tersebut bisa bertipe string, angka, boolean, dan juga bertipe object (fungsi dan array).. Wahaha.. makin bingung kan?

Begini.., Object biasanya diimplementasikan sebagai hashtables sehingga nilai dapat diambil dengan cepat. Jika kamu masih bingung dengan hashtables, coba baca artikel yang bagus tentang hashtables disini.

Jika nilai merupakan sebuah fungsi, kita dapat menganggapnya sebagai method. Ketika method sebuah object dipanggil, variable ini kemudian akan dimasukkan kedalam object. Method dapat secara instan mengakses variable melalui variable lain.

Perlu diingat, Object hanya dapat diproduksi oleh Constructor, yang memang berfungsi untuk menginisialisasi object. Constructor menyediakan fitur yang memberikan class dalam bahasa yang berbeda, termasuk variable static dan method.

Tipe Object: Public dan Private

Public

Anggota atau member sebuah object bertipe public. Fungsi apapun dapat mengakses, memodifikasi, menambah atau menghapus anggota. Ada dua teknik untuk menambahkan anggota dalam object. Yaitu dengan menambahkan kedalam Constructor atau melalui Protoype..

Teknik Constructor

Teknik ini biasanya digunakan untuk menginisalisasi variable instan publik. Konstruktor variable ini digunakan untuk menambahkan anggota ke dalam object.
Contoh:

function myContainer(param){
   this.member = param;
}

Jadi, saat ingin membuat sebuah object baru, kita cukup menggunakan cara:

var myNewContainer = new myContainer('abc');

Object baru kita, "myNewContainer" adalah object yang dibangun dengan menggunakan konstruktor fungsi "myContainer".
Object myNewContainer secara otomatis mempunyai anggota bernilai 'abc'. (myNewContainer.member)

Teknik Prototype

Teknik ini biasanya digunakan untuk menambahkan method public. Ketika anggota dicari (dan tidak ditemukan) dalam sebuah object yang dicari, maaka anggota akan diambil dari anggota prototype Constructor itu sendiri. Mekanisme ini digunakan untuk pewarisan, yang dapat lebih menghemat memori dibandingkan dengan selalu membuat object baru.

Teknik protoype ini juga dapat digunakan untuk metode dari object yang dibuat oleh Constructor.
Contoh:

myContainer.prototype.stamp = function(string){
   return this.member + string;
}

dari contoh diatas, kita telah menambahkan sebuah method baru kedalam sebuah constructor, yaitu "stamp"... jadi nilai otomatis diwariskan ke object yang dibuat dengan constructor tersebut...Coba kita panggil object yang kita ciptakan sebelumnya dengan cara:

myNewContainer.stamp('def');

Maka, nilai dari object myNewContainer sekarang menjadi 'abcdef'.
Baca selengkapnya...