Dojo 1.6 Tutorial

  Dojo baru saja merilis dokumentasi tutorial untuk Dojo versi 1.6. Kumpulan pertama Dojo Tutorial ini dibuat oleh engineer dari sitepen.com.

Tutorial yang ada saat ini bisa membimbing anda step by step untuk belajar dari yang paling sederhana, membuat hello world, manipulasi DOM, query, sistem event, hingga melakukan ajax process.

Tutorial ini akan selalu di update oleh team dari dojo. Anda dapat juga mengirimkan tutorial anda kepada mereka.

Silahkan anda pelajari satu persatu, dijamin tidak akan rugi.

Django Tutorial 8 : GRID

  Di tutorial terakhir, kita telah membahas bagaimana cara mengeluarkan data dari Database dan menampilkannya di dalam template index.html. Untuk tutorial kita kali ini yang akan kita lakukan adalah membuat sebuah UI GRID.
Tutorial :

  1. Buka file template index.html dan perhatikan baris perintah berikut ini :
    <!-- Center Pane -->
    <div dojoType="dijit.layout.TabContainer" region="center" id="centerPane">
    </div>
    

    Baris ini adalah tag dari dojo untuk sebuat tab-container, atau tempat dimana kita nanti akan meletakkan tab dari masing masing GRID. Jadi di tempat inilah nanti kita akan meletakkan tab MENU, tab USER, tab USER MENU, dan seterusnya.

  2. Tag TabContainer dipergunakan untuk menampung tab-tab. Sedangkan untuk membuat tab-nya kita memakai tag BorderContainer. Didalam tab BorderContainer inilah kita meletakkan GRID kita. Adapun baris perintah untuk membuat BorderContainer adalah seperti ini :
    <div id="gridCon" dojoType="dijit.layout.BorderContainer" persist="true" design="sidebar"
    			  style="width:100%; height:100%;" title="MENU">
    
  3. Grid didalam dojo sebenarnya merupakan suatu tag Table juga. Sehingga kalau kita ingin membuat GRID, bayangkan saja tag table di dalam HTML. Sehingga baris perintah untuk membuat GRID adalah seperti ini :
    <table dojoType="dojox.grid.EnhancedGrid"
    	jsId="userGrid"
    	id="userGrid"
    	store="gridStore"
    	region="center"
    	clientSort = "true"
    	attachParent="true"
    	loadingMessage="Loading Data ... "
    	_saveCustom = function(){}>
    	<thead>
    		<tr>
    			<th field="menu_id" width="5%">ID</th>
    			<th field="parent_menu_id" width="5%" editable=true>Parent</th>
    			<th field="name" editable=true>Name</th>
    			<th field="link" editable=true>Link</th>
    			<th field="level_degree" width="5%" editable=true>Level</th>
    			<th field="arrange_no" width="5%" editable=true>Arrange.No</th>
    			<th field="status" width="5%" editable=true
    			        cellType="dojox.grid.cells.Select"
    				options="Active, InActive"
    				values="0,1">Status</th>
    			<th field="last_update" width="15%">Last Update</th>
    			<th field="created_date" width="15%">Created</th>
    		</tr>
    	</thead>
    </table>
    

    Kang, kok kayaknya istilah tab ini ada di VB ya ? yup begitulah kira kira. Di dalam konteks windows development, seperti Visual Basic, Delphi, PowerBuilder, Oracle Developer, Java Swing/AWT, maka tab ini dikenal sebagai tab-notebook.

    Perhatikan atribut region=”center”, atribut ini memberitahukan kita bahwasannya GRID ini menempati area tengah dari layout tag BorderContainer.

    Atribut clientSort = “true” memungkinkan kita untuk mensortir data yang ada didalam GRID dengan jalan klik melalui nama kolomnya, maka secara otomatis data akan disortir secara ascending atau descending.

    Atribut store=”gridStore”, atribut ini memberitahu kita bahwasannya GRID ini membutuhkan suatu media penyimpanan/penampung data dengan nama gridStore

  4. Store, adalah komponen dari dojo untuk menyimpan atau menampung data dengan format JSON. Dojo memiliki 2 tipe data store, yakni ItemFileReadStore yang hanya bisa dipergunakan untuk baca saja, dan ItemFileWriteStore yang dapat dipergunakan untuk baca dan tulis.
    <div id="gridStore"
        url="core/menu/0/1/"
        urlPreventCache="true" clearOnClose="true">
    </div>
    

    Atribut url menunjukkan dari url mana data tersebut berasal.

    Atribut urlPreventCache=”true” akan membuatkan suatu random data sehingga url yang dikirim ke server selalu memiliki data yang berbeda beda. Hal ini untuk menghindarkan mekanisme cache dari browser.

    Atribut clearOnClose=”true” akan memungkinkan datastore ini untuk menghapus data penyimpanannya setiap perintah close di jalankan.

  5. Hingga saat ini isi dari file index.html akan tampak seperti ini :
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
       <title> C O R E </title>
       <style type="text/css">
          @import "/site_media/js/dojo/dojox/layout/resources/ExpandoPane.css";
    	  @import "/site_media/js/dojo/dojo/resources/dojo.css";
          @import "/site_media/js/dojo/dijit/themes/soria/soria.css";
    	  html, body {
    				width: 100%;	/* make the body expand to fill the visible window */
    				height: 100%;
    				overflow: hidden;	/* erase window level scrollbars */
    				padding: 0 0 0 0;
    				margin: 0 0 0 0;
    			}
       </style>
       <script type="text/javascript" src="/site_media/js/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
       <script type="text/javascript">
    		dojo.require("dijit.layout.TabContainer");
    		dojo.require("dijit.layout.BorderContainer");
            dojo.require("dojox.layout.ExpandoPane");
       </script>
    </head>
    <body class="soria">
        <div id="BorderCon" style="width:100%; height:100%;" dojoType="dijit.layout.BorderContainer" persist="true" design="sidebar" >
            <!-- Left Pane -->
            <div dojoType="dojox.layout.ExpandoPane"
                id="leftPane"
                region="left"
                title="C o r e"
                splitter="true"
                duration="125"
                maxWidth="275"
                style='width: 275px; background: #fafafa;'>Hello world
            </div>
            <!-- Center Pane -->
            <div dojoType="dijit.layout.TabContainer" region="center" id="centerPane">
               <div id="gridCon" dojoType="dijit.layout.BorderContainer"
                      persist="true" design="sidebar"
                      style="width:100%; height:100%;" title="ABCE">
                      <div dojoType="dojo.data.ItemFileWriteStore" id="gridStore" jsId="gridStore"
    			 url="core/menu/0/1/"
    			 urlPreventCache="true" clearOnClose="true">
    		  </div>
    		  <table dojoType="dojox.grid.EnhancedGrid"
    			   jsId="userGrid"
    			   id="userGrid"
    			   store="gridStore"
    			   region="center"
    			   clientSort = "true"
    			   attachParent="true"
    			   loadingMessage="Loading Data ... "
    			   _saveCustom = function(){}>
    			   <thead>
    				  <tr>
    					 <th field="menu_id" width="5%">ID</th>
    					 <th field="parent_menu_id" width="5%" editable=true>Parent</th>
    					 <th field="name" editable=true>Name</th>
    					 <th field="link" editable=true>Link</th>
    					 <th field="level_degree" width="5%" editable=true>Level</th>
    					 <th field="arrange_no" width="5%" editable=true>Arrange.No</th>
    					 <th field="status" width="5%" editable=true
    						   cellType="dojox.grid.cells.Select"
    						   options="Active, InActive"
    						   values="0,1">Status</th>
    					 <th field="last_update" width="15%">Last Update</th>
    					 <th field="created_date" width="15%">Created</th>
    				  </tr>
    			   </thead>
    			</table>
               </div>
            </div>
        </div>
    </body>
    </html>
    

    Simpan file index.html tersebut dan anda bisa melihat hasilnya melalui http://localhost:8080.
    Seharusnya GRID sudah muncul, hanya saja akan ada pesan error yang menunjukkan bawasannya tidak ada data yang di load di dalam GRID tersebut. Tidak apa apa, artikel berikutnya akan menjelaskan bagaimana mengirimkan data ke dalam GRID ini.

Mengapa harus Dojo Toolkit ?

  Dojo Toolkit merupakan salah satu pustaka javascript yang cukup terkenal di antara para web developer. Pustaka ini dapat dipergunakan untuk mengembangkan applikasi kelas menengah hingga Enterprise. Pengembangnya juga sanat aktif dengan dukungan dari vendor vendor kelas dunia, seperti IBM, Cisco, AOL, Sun dan lain lainnya.

Kang, apa artinya dojo tidak bisa dipergunakan untuk membangun applikasi kecil ? Bisa, tetapi akan kurang tepat guna, lebih baik kita memilih mengunakan pustaka yang lainnya

Mengapa memilih Dojo Toolkit untuk project pawang ? Mengapa tidak ExtJs, JQuery atau Prorotype ?

1. Open Source

Dojo 100% open source, dimana source code nya dimiliki oleh Dojo Foundation atau yayasan Dojo. Hal ini akan memastikan segala hal yang berbau dojo toolkit tidak jatuh ke dalam tangan suatu perusahaan. Definisi Open yang dimaksud ini dapat anda lihat disini.

2. BSD & MIT Licence

Dojo Toolkit memiliki licence BSD dan MIT, sehingga akan memudahkan pengembang untuk memilih dojo dalam applikasi mereka. Dengan licence ini, applikasi yang dibuat dapat di perjualbelikan secara komersil.

3. Widget yang banyak.

Dengan adanya widget ini, kita bisa focus untuk membuat applikasi. Tidak perlu terlalu focus kepada UI.

4. GRID dan Chart.

GRID adalah User Interface seperti spreadsheet. GRID didalam dojo cukup powerful dan dapat di kembangkan lagi.

5. Comet dan HTML5.

Comet adalah salah satu feature yang memungkinkan terjadinya komunikasi realtime 2 arah antara browser dan server. HTML5 adalah standard HTML yang baru. Dua hal ini adalah teknologi yang baru yang sudah ada di dalam dojo.

Itulah alasan utama menggunakan Dojo. Licence dan GRID adalah dua hal yang penting. GRID akan sangat sering dipergunakan didalam project pawang.

Sebenarnya ada alternatif yang lainnya, yakni menggunakan ExtJS dimana Widget dan Grid dari ExtJs bisa diperbandingkan dengan Dojo. Tetapi karena alasan kepemilikan licencenya yang saat dini dimiliki sencha sajalah, maka saya memutuskan untuk memakai Dojo. Coba anda ingat kasus open source project milik Sun yang sekarang jatuh ke tangan Oracle.

Django Tutorial 4 : Static file

Tutorial ini bekerja untuk Django 1.2

  Setelah kita belajar bagaimana menampilkan ‘Hello World’ dalam tutorial sebelumnya, kali ini kita akan mempelajari bagaimana cara meletakkan file statis didalam project pawang ini, dalam hal ini kita meletakkan file Javascript Library Dojo. Dojo akan kita pergunakan sebagai User Interface didalam project ini.

Kang dojo-nya diambil dimana ?

Dojo dapat diambil di websitenya dojotoolkit, ini link nya.

Tutorial

  1. Buat direktori media, media/js, templates, templates/core di dalam project pawang dengan perintah sebagai berikut :
    $ mkdir media
    $ mkdir media/js
    $ mkdir templates
    $ mkdir templates/core
  2. Extract file dojo didalam direktory js tersebut dengan nama direktori dojo.
  3. Edit file settings.py dan ubah parameter parameter berikut :

    MEDIA_ROOT = '/Project/pawang/media/'
    MEDIA_URL = 'http://localhost:8000/media/'
    ADMIN_MEDIA_PREFIX = '/media/'
  4. Edit file urls.py dan tambahkan string berikut ini :

    (r'^site_media/(?P
    .*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),
  5. Kita akan merubah halaman ‘Hello World’ agar menggunakan UI dari dojo. Edit file views.py, dan ubah fungsi index menjadi seperti berikut :

    def index(request):
    # return HttpResponse("Hello, world. You're at The Project PAWANG index page.")
    t = loader.get_template('core/index.html')
    c = Context({"name" : "test"})
    return HttpResponse(t.render(c))
  6. Buat file index.html di dalam direktori templates/core, dan copy paste content html seperti berikut :
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
       <title> C O R E </title>
       <style type="text/css">
          @import "/site_media/js/dojo/dojox/layout/resources/ExpandoPane.css";
    	  @import "/site_media/js/dojo/dojo/resources/dojo.css";
          @import "/site_media/js/dojo/dijit/themes/soria/soria.css";
    	  html, body {
    				width: 100%;	/* make the body expand to fill the visible window */
    				height: 100%;
    				overflow: hidden;	/* erase window level scrollbars */
    				padding: 0 0 0 0;
    				margin: 0 0 0 0;
    			}
       </style>
       <script type="text/javascript" src="/site_media/js/dojo/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
       <script type="text/javascript">
    		dojo.require("dijit.layout.TabContainer");
    		dojo.require("dijit.layout.BorderContainer");
            dojo.require("dojox.layout.ExpandoPane");
       </script>
    </head>
    <body class="soria">
        <div id="BorderCon" style="width:100%; height:100%;" dojoType="dijit.layout.BorderContainer" persist="true" design="sidebar" >
            <!-- Left Pane -->
            <div dojoType="dojox.layout.ExpandoPane"
                id="leftPane"
                region="left"
                title="C o r e"
                splitter="true"
                duration="125"
                maxWidth="275"
                style='width: 275px; background: #fafafa;'>Hello world
            </div>
            <!-- Center Pane -->
            <div dojoType="dijit.layout.TabContainer" region="center" id="centerPane">
            </div>
        </div>
    </body>
    </html>
    
  7. Jika anda bisa melihat tulisan ‘Hello World’ didalam browser anda melalui alamat http://localhost:8000/ , Selamat anda sudah menyelesaikan tutorial ini.