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.

Author: Nareswara

Ordinary People with eye glasses

Leave a Reply

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