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.
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.
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