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.

Author: Nareswara

Ordinary People with eye glasses

Leave a Reply

Your email address will not be published. Required fields are marked *