"When the codes like a part of my body"

Jumat, 18 Juli 2014

ExtJS : Tutorial Dasar ExtJS

13.52 Posted by Unknown No comments

Assalammu’alaikum Wr. Wb.

Selamat siang teman blogger dimanapun anda berada. Sesuai janji saya di postingan sebelumnya, pada postingan kali ini kita akan mulai praktek ngoding dengan ExtJS yang telah saya bahas sebelumnya. Oh ya, sebelumnya saya lupa memberitahu bahwa ExtJS ini ada versi gratis dan versi berbayar. Untuk saat ini kita bisa mencoba ExtJS versi gratis, namun apabila anda telah nyaman dengan fitur ExtJS dan ingin membuat aplikasi professional komersial, saya sarankan anda beralih ke versi berbayar.

Saya mengasumsikan, teman-teman sudah sedikit mengerti tentang javascript dan minimal pernah menggunakan javascript framework lainnya seperti jquery. Bila belum familiar dengan javascript, mungkin lebih baik mencari sedikit informasi tentang javascript. Tapi bila ingin langsung mencoba, monggo silakan  juga. Okay untuk memulai ngoding ExtJS ini, kita membutuhkan beberapa peralatan tempur yang wajib tersedia dan yang tidak terlalu wajib tersedia. Berikut peralatan tempur yang harus kita persiapkan :

1.      Javascript Framework ExtJS 4.1.1
Saya sarankan menggunakan versi ini terlebih dahulu, untuk menyamakan visi dan misi kita selama menempuh perjalanan panjang ini. (hahaha). Silakan sedot ExtJS disini.
2.      Web Server
Sama seperti umumnya untuk pemrograman berbasis web, maka diperlukan web server untuk kegiatan kita yang satu ini. Saya mempercayakan bundle XAMPP 1.7.2 pada tutorial kali ini.
3.      Text Editor
Saya menggunakan Sublime Text versi 2 yang telah menemani saya selama ini, terutama selama saya bekerja sebagai web developer.
4.      Kopi dan Snack
Anda sedang berpuasa? Silakan siapkan saja kopi dan snacknya sekalian dengan kolak ataupun makanan yang manis-manis lainnya, karena kemungkinan bisa saja anda ketagihan ngoding sampai lupa waktu hingga adzan magrib tiba. :)

Okay semua peralatan tempur yang diperlukan sudah dipersiapkan, silakan download terlebih dahulu ExtJS yang telah saya sertakan sebelumnya. Hal yang pertama akan saya bahas disini adalah tentang struktur foldernya terlebih dahulu. Setelah anda mendownload ExtJS, silakan ekstrak kulit manggisnya terlebih dahulu. Nah loh? Maksud saya silakan ekstrak paket kompresi dari ExtJS yang telah anda download sebelumnya. Okay lupakan ekstrak kulit manggis tadi, sekarang coba buka folder hasil ekstrak tadi. Kira-kira, gambarannya akan seperti ini.


Hasil ekstrak ExtJS ini berukuran cukup besar, oleh karena itu dalam setiap tutorial berikutnya saya tidak akan menyertakan file ExtJS ini lagi untuk download koding nya. Okay dapat kita lihat folder di atas, ada folder docs yang berisi dokumentasi lengkap dari ExtJS ini yang dapat anda buka secara lokal di web server anda.
Untuk koding awal, saya hanya ingin berbagi bagaimana menyimpan file dan menggunakan ExtJS ini serta membuat file sederhana menampilkan Hello World! dengan menggunakan Message Box di ExtJS. Kenapa Hello World? Entahlah, saya hanya mengikuti master-master sebelum saya yang menggunakan si Hello World! ini di setiap tutorial awal. Mungkin tradisi turun temurun di setiap tutorial pemrograman. Hahaha. Rasanya selalu ada yang kurang bila belajar pemrograman tanpa melalui tahapan Hello World!

Okay sekarang buat folder baru di c:/xampp/htdocs (dengan asumsi saya menginstal paket XAMPP di direktori C). Beri nama folder tersebut dengan nama apapun yang anda kehendaki, contohnya thecodesfighter.blogspot.com. Selanjutnya, rubah nama dari folder hasil ekstrak dari ExtJS tadi menjadi extjs saja dan selanjutnya copy folder tersebut ke dalam folder baru tadi.

Sampai disini, kita sudah bisa memulai praktik untuk membuat aplikasi pertama kita dengan  menggunakan ExtJS. Ada dua cara yang bisa kita gunakan untuk membuat aplikasi dengan ExtJS ini. Yang pertama adalah dengan menggabungkan file javascript dengan file HTML yang akan kita load di browser, sedangkan cara yang kedua adalah memisahkan file HTML dan Javascript menjadi dua file berbeda. Untuk tutorial kali ini, kita akan mencoba kedua cara tersebut agar teman-teman bisa lebih memahami alur kerja dari ExtJS ini.

Sekarang buat file HTML dengan nama index.html di editor anda.
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Extjs Application</title>
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript">
		Ext.onReady(function()
		{
		 	Ext.Msg.alert('Message', 'Hello World, Thanks God I\'m with ExtJS!');
		 });
	</script>
</head>
<body>
	<!-- Do Nothing -->
</body>
</html>

Ada dua file penting dari ExtJS yang kita gunakan dalam setiap pembuatan aplikasi dengan ExtJS ini, yaitu file ext-all.css dan juga ext-all.js. Koding javascript kita harus disimpan di dalam Ext.onReady(function(){}); agar dapat dijalankan pada saat browser di load. Koding di atas adalah contoh file HTML dan javascript ExtJS dijadikan satu file. Simpan file di atas di dalam folder thecodesfighter.blogspot.com sejajar dengan folder extjs. Struktur foldernya kira-kira seperti ini.


Seperti yang sudah saya beritahu sebelumnya, bahwa ada 2 cara untuk membuat file javacsript dengan ExtJS ini yaitu dengan menggabungkan file HTML dan javascript nya di dalam satu file, dan memisahkan HTML serta javascript dalam file yang berbeda. Sekarang kita akan menggunakan cara yang kedua yaitu memisahkan HTML dan javascriptnya. Silakan edit file index.html yang telah kita buat sebelumnya menjadi seperti ini.

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Extjs Application</title>
	<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
	<script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript" src="applications/helloworld.js"></script>
</head>
<body>
	<!-- Do Nothing -->
</body>
</html>

Bila diperhatikan pada baris yang ada src=”applications/helloworld.js”, ini adalah cara memanggil file javascript kita yang dibuat secara terpisah dengan html nya. Pada bagian src, menjelaskan bahwa file helloworld.js ada di dalam folder applications, oleh karena itu kita buat folder applications nya terlebih dahulu sebelum membuat file helloworld.js nya.

Setelah itu, kita copy atau buat ulang koding yang untuk file helloworld.js nya. Kodingnya sama dengan javascript yang telah kita buat sebelumnya.

Ext.onReady(function()
{
	Ext.Msg.alert('Message', 'Hello World, Thanks God I\'m with ExtJS from another file!');
});

Beri nama file di atas dengan helloworld.js dan simpan di dalam folder applications yang sebelumnya telah kita buat. Jadi struktur folder dari file javascript helloworld.js yang baru saja kita buat ini adalah c://xampp/htdocs/thecodesfighter.blogspot.com/applications/helloworld.js. Dan inilah hasilnya running koding pertama kita.


Okay, postingan kali ini memang masih dasar bahkan bisa dibilang amat sangat dasar. Namun hal dasar akan sangat menentukan semangat anda ke depannya, dan yang penting adalah bila hal dasar saja kita tidak kuasai bagaimana bisa kita membuat hal yang jauh lebih besar. Insya Allah di postingan berikutnya kita akan terus menjelajahi dunia ExtJS ini, so sampai bertemu di postingan selanjutnya teman-teman. Semoga bermanfaat.  

0 komentar:

Posting Komentar