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.

Django Tutorial 7 : Mengeluarkan data dari database

  Oke, kita sudah memiliki 2 klas table di dalam models, kita juga sudah mengatur urlconf dan views, tibalah saatnya bagi kita untuk mempelajar “bagaimana cara mengeluarkan data dari database ke user interface”. Kita ambil contoh model/table menu, maka cara mengeluarkan datanya adalah sebagai berikut :

  • kita import model menu
  • kemudian kita kita ambil data data menu atau query data menu
  • kemudian data tersebut kita kirim ke template untuk di render

Coba kita buka browser kita, dan kita arahkan ke alamat http://localhost:8000/ , dimana website project pawang kita berada. Nah tugas kita adalah mengganti kata kata “Hello World” tersebut dengan data dari tabel menu. Tentu saja kita harus memasukkan sample data ke dalam tabel menu untuk kita mainkan.

Tutorial :

  1. Berikut ini adalah perintah SQL yang perlu dijalankan dari postgresql console atau PGADMIN III atau tools yang lainnya. Kita akan memasukkan 3 record ke dalam tabel menu.
    INSERT INTO public.menus(id, parent_menu_id, name, link, status, level_degree, arrange_no, created_date) 
        VALUES(1, '', 'Administration', '/core/', 0, 0, 1, NOW());
    INSERT INTO public.menus(id, parent_menu_id, name, link, status, level_degree, arrange_no, created_date) 
        VALUES(2, 1, 'Permission', '/core/', 0, 1, 1, NOW());
    INSERT INTO public.menus(id, parent_menu_id, name, link, status, level_degree, arrange_no, created_date) 
        VALUES(3, 2, 'Menu', '/core/', 0, 2, 2, NOW());
    
  2. Step berikutnya adalah import data Menu, maka kita buka file kontroler/view kita, yakni based.py. tambahkan baris perintah berikut ini untuk import model menu.

    from core.models import Menu

    Kemudian kita ambil data yang sudah kita masukkan ke tabel menu tadi dan kita tampung didalam varial rs dengan perintah seperti ini.

    rs = Menu.objects.filter()

    Kemudian variabel rs tempat kita menampung data itu kita kirimkan ke template index.html dengan perintah seperti ini.

    c = Context({"name" : "test",
    "menu_rs" : rs
    })

    Jadi sekarang file based.py kita akan terlihat seperti ini.

    from django.http import HttpResponse
    from django.template import Context, loader
    from django.http import HttpResponse
    from core.models import Menu
    
    def index(request):
        rs = Menu.objects.filter()
        t = loader.get_template('core/index.html')
        c = Context({"name" : "test",
                            "menu_rs" : rs
                           })
        return HttpResponse(t.render(c))
    
  3. Setelah itu kita harus merubah file template index.html, dan kita ubah baris Hello World tersebut menjadi seperti ini
      <ul>
    	  {% for menu in menu_rs %}
    	  <li>{{ menu }}</li>
    	  {% endfor %}
       </ul>
    
  4. Simpan file index.html, dan kita periksa hasilnya melalui http://localhost:8080/ . Apabila kita bisa melihat data Administration, Permission dan Menu, maka kita sudah berhasil mengeluarkan data dari database.
  5. Selamat anda sudah menyelesaikan tutorial untuk kali ini. Next tugas kita adalah menempatkan data tersebut dalam sebuah GRID

Django Tutorial 6 : Models

  Seperti dijelaskan pada tutorial sebelumnya, yakni tutorial ke-2, dimana kita melakukan setup untuk koneksi database dan melakukan instalasi default modul dari django seperti module authentication, session dan seterusnya. Didalam tutorial tersebut kita juga bisa melihat adanya perintah “sync db” yang mana perintah ini akan melakukan proses pembuatan tabel di dalam database secara otomatis.

Didalam tutorial yang ke-5, kita juga mempelajari mengenai views.py dan urls.py, dimana setiap kita membuat applikasi didalam instance django, maka secara otomatis kita juga di beri 1 file views.py dan urls.py. Sebenarnya selain kedua file ini, masih ada file lain yang secara otomatis diberikan kepada kita, yakni file models.py.

File models.py ini dipergunakan untuk melakukan berbagai proses kegiatan yang berkaitan dengan data. Bagaimana cara mengakses data, bagaimana validasinya, serta bagaimana relasi antar data tersebut. Jadi file models.py ini juga di kenal sebagai layer data. Django menggunakan file models.py ini untuk mengeksekusi perintah SQL dan mengeluarkan struktur data python yang berisikan data data dari tabel database kita.

Tutorial kita kali ini, akan membahas mengenai Models di project pawang ini secara garis besar.

Tutorial :

  1. Buka file models.py dan copy paste kode kode berikut :
    from django.db import models
    from django.db import models, connection, transaction
    import datetime
    
    class Menu(models.Model):
        id = models.IntegerField(max_length=18, primary_key= True)
        #parent_menu_id = models.IntegerField(max_length=18, blank=True, null=True)
        parent_menu_id = models.ForeignKey('self', blank=True, null=True, related_name='children', db_column="parent_menu_id")
        name = models.CharField(max_length=64)
        link = models.CharField(max_length=32)
        status = models.IntegerField(max_length=1, default=0)
        level_degree = models.IntegerField(max_length=18, blank=True, null=True)
        arrange_no = models.IntegerField(max_length=18, blank=True, null=True)
        created_date = models.DateTimeField('created date', auto_now_add=True)
        last_update = models.DateTimeField('last update date', auto_now=True)
        def __unicode__(self):
            return u"%s"%(self.name)
        class Meta :
            db_table='menus'
    
    

    Kemudian simpan perubahan ini.

  2. Kemudian dari prompt atau konsole kita jalankan perintah sebagai berikut :

    $ python manage.py syncdb

    Perintah ini akan melakukan sinkronisasi antara applikasi kita dengan database. Perintah ini juga akan melakukan pengecekan terhadap tabel tabel yang ada di database untuk di bandingkan dengan file models.py. Apabila ada perubahan data di dalam file models.py, maka django akan menyesuaikannya.
  3. Untuk melihat apa efek dari perintah diatas, mari kita buka database pawang di dalam postgresql. Anda dapat melakukannya melalui PGAdmin III atau tool database browser yang lainnya.
    Apakah anda bisa menemukan adanya tabel baru disana ? tabel menus ? Jika iya, berarti anda berada di jalur yang benar.
  4. Berikutnya kita bisa coba lagi untuk model yang lainnya. Buka file models.py dan tambahkan baris perintah di bawah ini :
    class Currency(models.Model):
        id = models.CharField(max_length=3, primary_key=True)
        name = models.CharField(max_length=32)
        symbol = models.CharField(max_length=3)
        status = models.IntegerField(max_length=1, default=0)
        created_date = models.DateTimeField('created date', auto_now_add=True)
        last_update = models.DateTimeField('last update date', auto_now=True)
        def __unicode__(self):
            return u"%s"%(self.name)
        class Meta :
            db_table='currencies'
            permissions = (
                ("can_print", "Can print currency"),
                ("can_approve", "Can approve currency")
            )
    
  5. Lakukan kembali perintah sync db seperti sebelumnya, dan lihat hasilnya di dalam database.

    Kang kok sintaknya mirip dengan perintah CREATE TABLE di SQL ya ? Iya jelas, wong models inikan layer data, jadi gampangannya 1 klas itu mewakili 1 tabel

  6. Nah dari dua class model tersebut, kita bisa melihat bagaimana django membuatkan tabel secara otomatis di dalam database. Bagaimana django menginterpretasikan python class menjadi suatu tabel. File models.py ini bekerja di level applikasi, artinya 1 applikasi didalam instance django akan memakai 1 file models.py.Sama seperti tutorial yang ke-5, file models.py ini juga akan berkembang seiring berkembangnya applikasi, kondisi file models.py ini akan sama dengan file views.py yang suatu saat nanti akan perlu di ubah menjadi suatu paket dan kita akan mempelajari hal ini nanti.
  7. Nah apabila anda sudah dapat melihat dua tabel di dalam database yakni menus dan currencies, maka selamat, anda telah menyelesaikan tutorial ini. Untuk detail tutorial mengenai models, akan kita pelajari di kesempatan berikutnya.

Django Tutorial 5 : View dan UrlConf

  Pada Tutorial yang sebelumnya, kita sempat bersinggungan dengan 2 file yang akan jadi topik pembahasan kita saat ini, yakni views.py dan urls.py.

File views.py dirancang untuk menampung bisnis-logic kita. File ini bekerja di level applikasi (*tutorial ke 3), setiap kita membuat applikasi didalam instance django, maka kita akan mendapatkan 1 file view ini. Didalam file ini kita menuliskan fungsi2 atau prosedur2 applikasi kita. Setiap fungsi inilah yang disebut sebagai suatu view. Seperti yang dicontohkan didalam tutorial ke 4 point 5, disitu kita mendaftarkan fungsi index.

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

File urls.py dirancang untuk mengatur konfigurasi request url kita. File urls.py ini bekerja di level instance. Jadi setiap kali kita membuat applikasi yang baru (*tutorial ke 3), kita akan memakai file urls.py yang sama. Seperti yang dicontohkan dalam tutorial ke 4 point 4, disitu kita mendaftarkan virtual directory site_media ke dalam file urls.py. Sehingga setiap request site_media/ akan di tangani oleh fungsi django.views.static.serve.

(r'^site_media/(?P.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),

Nah kedua file ini, urls.py dan views.py, akan dipergunakan oleh seluruh modul yang kita buat. Semisal kita akan membangun modul Sales, Purchasing, Inventory, Accounting, CMS, Blog dan berbagai modul yang lain, kita harus mendaftarkan semua pattern url atau virtual directory ke dalam satu file urls.py dan kita harus menuliskan semua fungsi insert, delete, update, search, print dan berbagai fungsi yang lain kedalam file satu views.py. Tentu hal ini akan menyulitkan kita dalam bekerja. Satu file dipergunakan untuk semua module.

Nah, yang kita perlukan adalah membuat kedua file itu lebih user friendly, lebih moduler, lebih gampang di maintenance.

Tutorial :

  1. Buka file urls.py dan perhatikan baris yang sudah kita tulis sebelumnya :
    (r'^$', 'pawang.core.views.index')Arti perintah tersebut adalah sebagai berikut “Semua request url dengan awalan / di tangani oleh fungsi index di dalam file views.py di dalam direktori pawang/core”.
  2. kemudian tambahkan baris perintah seperti berikut :
    (r'^core/', include('core.urls'))Arti perintah tersebut adalah sebagai berikut “Semua request url yang dimulai dengan core/ akan memakai file urls.py di dalam direktory pawang/core atau didalam direktori applikasi core”. Jadi jikalau ada request url yang dimulai dengan core/abcd atau core/xyz, maka request itu akan di arahkan ke file core.urls.py.
  3. Masuk ke dalam direktori pawang/core dan buat file urls.py dan copy paste perintah berikut :
    from django.conf.urls.defaults import *
    from django.views.generic.simple import direct_to_template
    
    # this is 'core.urls'
    
    urlpatterns = patterns('core.views',
        url(r'^menu/(\d{1,2})/(\d{1,2})/$', 'menu.index'),
        url(r'^currency/(\d{1,2})/(\d{1,2})/$', 'currency.index'),
    )
    

    Nah perhatikan baris perintah berikut :

    urlpatterns = patterns('core.views',
    url(r'^menu/(\d{1,2})/(\d{1,2})/$', 'menu.index'),

    Arti perintah tersebut adalah sebagai berikut “Semua request url yang dimulai dengan core/menu/ akan ditangani oleh fungsi index didalam file menu.py di dalam direktori pawang/core/views dengan format request /core/menu/desimal max 2 digit/ desimal max 2 digit”.

    Contoh requestnya seperti ini /core/menu/0/0 atau kombinasi maksimum 2 digitnya adalah /core/menu/99/99

  4. Dari point diatas dinyatakan bahwasannya file menu.py ada di dalam direktori /pawang/core/views yang mana kita belum memiliki direktori tersebut. Yang ada di dalam direktori /pawang/core adalah file views.py yang mana file ini akan berisi fungsi fungsi dari setiap modul yang ada di applikasi core.
    Kita akan memecah fungsi fungsi yang akan kita buat menjadi lebih moduler agar lebih mudah dimaintain.
    Jalankan perintah perintah berikut :

    $ cd pawang/core
    $ mkdir views
    $ mv views.py views/based.py

    Kita buat direktori views didalam direktori /pawang/core dan kita pindahkan file views.py ke dalam direktori views dan kita ubah namanya menjadi based.py.
  5. Pemindahan file views.py menjadi based.py akan mengakibatkan request url kita akan error. Coba perhatikan point 1 diatas. Berarti kita harus merubah file urls.py yang ada di instance django tersebut akan sesuai dengan perubahan terakhir yang kita lakukan.Buka file urls.py dan ubah perintahnya sebagai berikut :
    (r'^$', 'pawang.core.views.based.index')

    Nah sekarang arti perintah tersebut adalah sebagai berikut “Semua request url dengan awalan / di tangani oleh fungsi index di dalam file based.py di dalam direktori pawang/core/views”.

  6. Berikut adalah isi file urls.py di instance django atau di direktori pawang :
    from django.conf.urls.defaults import *
    from django.conf import settings
    # Uncomment the next two lines to enable the admin:
    # from django.contrib import admin
    # admin.autodiscover()
    
    urlpatterns = patterns('',
        # Example:
        # (r'^pawang/', include('pawang.foo.urls')),
    
        # Uncomment the admin/doc line below and add 'django.contrib.admindocs'
        # to INSTALLED_APPS to enable admin documentation:
        # (r'^admin/doc/', include('django.contrib.admindocs.urls')),
    
        # Uncomment the next line to enable the admin:
        # (r'^admin/', include(admin.site.urls)),
    
        (r'^$', 'pawang.core.views.based.index'),
        (r'^core/', include('core.urls')),
        (r'^site_media/(?P<path>.*)$', 'django.views.static.serve',{'document_root': settings.MEDIA_ROOT}),
    )
    
  7. Buka internet browser anda, dan arahkan ke alamat http://localhost:8000/. Jika anda bisa melihat tulisan Hello World lagi, Selamat anda sudah berhasil dalam tutorial ke lima 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.

Django Tutorial 3 : Create Application Pawang – Core

Tutorial ini bekerja untuk Django 1.2

  Setelah kita berhasil menghubungkan database postgresql dengan project pawang yang kita buat melalui Django, tutorial berikut ini kita akan membuat applikasi pawang-nya, kita beri nama

CORE.

Lho kang apa bedanya project pawang dengan applikasi pawang ?

Project pawang itu adalah instance dari django, dan ini hanya sekali dibuat. Instance ini adalah tempat dimana applikasi applikasi django akan kita kembangkan

Applikasi pawang ( CORE ) adalah salah satu applikasi yang kita buat didalam instance tersebut, kita bisa mengembangkan project pawang ini dengan membuat applikasi lainnya, semisal accounting, inventory atau payroll

Tapi kalau bingung tidak apa apa, ikuti saja tutorial ini terus, nanti juga akan paham sendiri.

Tutorial

  1. Untuk membuat applikasi CORE, jalankan perintah berikut :

    python manage.py startapp core
  2. Perintah tersebut akan membuat direktori core yang berisikan file file sebagai berikut :

    $ ls core -l
    __init__.py
    models.py
    tests.py
    views.py
  3. Edit file settings.py dan tambahkan string ‘pawang.core’ berikut ini di dalam parameter INSTALLED_APP. Langkah ini akan mendaftarkan applikasi core ke dalam instance Pawang untuk otomatis di jalankan pada saat web development server dijalankan.
  4. Edit file urls.py dan tambahkan baris perintah berikut ini :

    (r'^$', 'pawang.core.views.index')
    . Langkah ini akan memberitahu instance Pawang, bahwa request url ke ‘http://localhost:8000/’ ini akan menjalankan fungsi index di dalam file views dari applikasi core
  5. Kemudian edit file views.py di dalam directory applikasi core yang sudah kita buat tadi dan copy paste kan baris baris perintah berikut ini :

    # Create your views here.
    from django.http import HttpResponse
    from django.template import Context, loader
    from django.http import HttpResponse


    def index(request):
    return HttpResponse("Hello, world. You're at The Project Pawang index page.")
  6. kemudian kita test hasilnya, kita jalankan web development servernya dengan perintah sebagai berikut :

    python manage.py runserver
  7. Buka internet browser anda, dan arahkan ke alamat http://localhost:8000/. Jika anda bisa melihat tulisan Hello World, Selamat anda sudah berhasil dalam tutorial ke tiga ini.

Django tutorial 2 : Database Connection

Tutorial ini bekerja untuk Django 1.2

  Setelah kita dapat membuat project pawang serta start and stop web development server dari django, maka kali ini kita akan belajar mengenai koneksi ke database, dalam hal ini postgresql database.

Yang perlu disiapkan :

  • Postgresql, yang berfungsi untuk menyimpan data
  • Psycopg2, yang berfungsi sebagai driver antara python dan database Postgresql.
  • Database pawang sudah di buat didalam Postgresql

Tutorial :

  • Edit file settings.py, dan ubah parameternya seperti berikut :

    DATABASE_ENGINE = 'postgresql_psycopg2'
    DATABASE_NAME = 'pawang'
    DATABASE_USER = 'postgres'
    DATABASE_PASSWORD = 'postgres'
    DATABASE_HOST = '127.0.0.1'
    DATABASE_PORT = ''
  • Kemudian perhatikan parameter INSTALLED_APPS. Parameter ini berisikan modul modul dasar dari Django. Ubah setting parameternya seperti berikut :

    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.messages',
    'django.contrib.admin',
  • Setelah setting untuk database siap, berikutnya kita akan melakukan sinkronisasi antara Django dengan database postgresql

    python manage.py syncdb
  • Perintah diatas akan membuat tabel tabel baru di dalam database postgresql berdasarkan pada module apa saja yang kita install, seperti point diatas. Kemudian jika kita menginstall django.contrib.auth, maka kita akan ditanya apakah kita akan membuat superuser untuk sistem otentikasi yang kita install. Untuk project pawang kita install superuser dengan user = pawang, dan password = pawang
  • Setelah itu kita bisa melihat tabel tabel yang telah di buatnya melalui database browser, semisal PGAdmin III, untuk memastikan proses syncdb berhasil dijalankan. Jika ada tabel tabel baru didalam database yang telah anda buat di postgresql, dalam hal ini database pawang, maka selamat anda telah berhasil melakukan koneksi ke database postgresql dari django.

Django Tutorial 1 : Create Project Pawang

Tutorial ini bekerja untuk Django 1.2

  Tutorial pertama kita ini adalah pembuatan project. Tutorial ini bisa dilakukan apabila django sudah terinstall di sistem komputer kita.

  1. Pilih salah satu direktori dimana kita akan menyimpan project kita yang baru ini, kita ambil contoh direktory Project
    $ cd Project
  2. Kemudian kita jalankan perintah untuk membuat project yang baru,kita ambil contoh nama projectnya adalah project pawang
    $ django-admin.py startproject pawang
  3. Perintah tersebut secara otomatis akan membuatkan direktori baru, bernama pawang, yang berisikan file file seperti ini :
    $ ls pawang -l
    __init__.py
    manage.py
    settings.py
    urls.py
    Detail dari file file ini akan kita pelajari nanti.
  4. File file tersebut merupakan file file dasar yang menjadi dasar dari applikasi yang dibuat melalui framework django. Mari kita jalankan konfigurasi dasar ini.
    $ python manage.py runserver
    Validating models...
    0 errors found


    Django version 1.2, using settings 'pawang.settings'Development server is running at http://127.0.0.1:8000/
    Quit the server with CONTROL-C.
    Manage.py dipergunakan untuk berkomunikasi dengan system django melalui command line atau prompt. Detail penggunaan manage.py bisa kita pelajari nanti
  5. Kemudian kita lihat hasilnya melalui internet browser kita , contohnya firefox, opera atau google chrome, dan masukkan http://127.0.0.1:8000 di bagian address bar
  6. Pastikan anda melihat tulisan “Wellcome to Django” pada halaman yang muncul di internet browser anda.
  7. Untuk mematikan web server development tersebut, tekan CTL+C

Selamat anda telah membuat suatu applikasi baru yang siap untuk anda kembangkan, dalam hal ini kita mengembangkan project Pawang. Langkah berikutnya adalah menghubungkan Project pawang dengan database postgresql.

Apa itu Project Pawang ?

Project Pawang adalah ide dari saya untuk membuat suatu applikasi kecil yang akan selalu di pergunakan setiap kali kita membuat suatu software. Berisikan manajemen user, menu, role dan pengaturan perusahaan. Applikasi kecil ini akan di sajikan dalam gaya pembelajaran “step by step” tutorial agar teman teman bisa belajar dengan mudah.

Sebenarnya Project Pawang ini sudah di release December 2009. Tetapi, berhubung alasan klasik, “kesibukan”, maka baru saat ini project ini di jalankan kembali. Semoga Project ini bisa memberikan manfaat buat teman teman sekalian.

Project pawang ini, untuk saat ini, menggunakan bahasa python dan akan menggunakan beberapa framework. Diharapkan dengan menggunakan gaya “step by step” ini, kita semua bisa mempelajari python dan frameworknya. Tentu saja tidak secara detail karena target dari project pawang ini adalah para pemula, baik pemula pengguna bahasa python maupun pemula pengguna framework.

Target framework yang akan di pergunakan adalah sebagai berikut :

1. Django
2. Web2Py
3. Pylons
4. TurboGears

Sedangkan untuk user interface menggunakan Dojo Framework.

Nah untuk para pengguna python bisa menggunduh file project ini untuk mengembangkan lebih lanjut tanpa keharusan untuk merelease perubahan yang dilakukannya itu. Mereka bisa mengembangkannya untuk sistem Human Resource di kantor mereka, atau sistem Kehutanan, atau sistem CMS, atau sistem yang lain lain.

Tentu saja software yang di hasilkan dari project ini harus memiliki licence. Saya sedang merencanakan untuk menggunakan MIT licence. Semoga licence MIT ini sesuai dan flexible dengan tujuan di atas.

Bagaimana menurut anda ?