>> หน้านี้เป็นส่วนหนึ่งของตัวอย่างการพัฒนาโปรแกรมด้วย Django: [[:204223-52:uquiz]] เราเริ่มพัฒนาโดยสร้าง project django-admin.py startproject uquiz ===== แก้ settings.py ขั้นแรก ===== จากนั้นเข้าไปแก้ settings.py คร่าว ๆ ดังนี้ เพิ่มบรรทัดเหล่านี้ตอนต้นแฟ้มเพื่อกำหนดค่าคงที่ ''PROJECT_DIR''


import os.path
PROJECT_DIR = os.path.dirname(__file__)

จากนั้นตั้งค่า ''DATABASE_ENGINE'' (เป็น ''sqlite3'') และ ''DATABASE_NAME'' เป็นชื่อแฟ้มสำหรับเก็บฐานข้อมูล เช่น ''development.db'' เราจะใช้ระบบ template แน่นอน โดยเราจะเก็บไว้ที่ไดเร็กทอรีย่อย templates ใน project ของเรา ดังนั้นไประบุข้อมูลดังกล่าว โดยเข้าไปแก้ในส่วน ''TEMPLATE_DIRS''


TEMPLATE_DIRS = (
    # Put strings here, like "/home/html/django_templates" or "C:/www/django/templates".
    # Always use forward slashes, even on Windows.
    # Don't forget to use absolute paths, not relative paths.
    os.path.join(PROJECT_DIR,'templates'),     #  <------ Add this line  ##########
)

===== สร้าง app ===== จากนั้นเราจะไปสร้าง app ของเรา ให้ออกไปที่ไดเร็กทอรีของ project แล้วสั่ง python manage.py startapp quiz เพื่อสร้าง app ''quiz'' เราจะไปเพิ่ม app นี้รวมทั้ง admin ใน ''settings.py'' โดยแก้ส่วน ''INSTALLED_APPS'' ให้เป็นดังด้านล่าง


INSTALLED_APPS = (
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.sites',
    'django.contrib.admin',          # <------ add this two lines ###########
    'uquiz.quiz',                    #
)

จากนั้นให้ไปที่ไดเร็กทอรีของ project และ syncdb โดยสั่ง python manage.py syncdb อย่าลืมรหัสผ่านในระบบ admin ===== หน้าแรก ===== เราจะสร้างหน้าแรกของเว็บ รวมถึงจัดการ config ในส่วนการแจกจ่ายเนื้อหา static สำหรับ css เราจะสร้างไฟล์ ''templates/base.html'' เอาไว้ใส่โครงขอหน้าเว็บของเรา ดังนี้




uQuiz


  {% block content %}
  {% endblock %}


uQuiz is a demo for class 204223.

และสร้างแฟ้ม ''templates/quiz/index.html'' ไว้เป็นหน้าแรก ดังนี้


{% extends "base.html" %}

{% block content %}

  Welcome to uQuiz.  It's time to start creating quizes.


  What you can do here:
  

    Create quizes
    Play quizes
  

{% endblock %}

จากนั้นเราจะไปแก้แฟ้ม ''quiz/views.py'' เพื่อสร้างฟังก์ชันวิว ''index'' สำหรับแสดงหน้าแรก


from django.shortcuts import render_to_response

def index(request):
    return render_to_response("quiz/index.html")

และสุดท้าย ไปแก้แฟ้ม ''urls.py'' ให้เรียกวิวฟังก์ชันนี้ เมื่อผู้ใช้เข้ามาหน้าแรก


urlpatterns = patterns('',
    (r'^$', 'quiz.views.index'),      #  <--- add this line #########
)

===== CSS ===== เราจะใช้ CSS ในการจัดรูปแบบหน้าเว็บของเรา ก่อนอื่นเราต้องไปกำหนดค่าให้ระบบแจกจ่ายแฟ้ม static เสียก่อน (ดูรายละเอียดเพิ่มเติมที่ [[:204223-52:การใช้แฟ้ม_static]]) ด้านล่างแสดงการแก้ไขที่เห็นด้วยคำสั่ง diff โดยบรรทัดที่ขึ้นด้วย ''+'' คือบรรทัดที่เพิ่มเข้ามา ส่วน ''-'' คือบรรทัดที่หายไป ต่อไปการแก้ไขมักจะแสดงด้วยวิธีนี้เพื่อความง่ายให้การเขียนเอกสารนี้ เราไปเพิ่มค่าคงที่ใน ''settings.py'' ระบุไดเร็กทอรีที่เก็บ static file (หรือมักเรียกว่า media)


--- a/settings.py	Sun Sep 13 22:53:34 2009 +0700
+++ b/settings.py	Sun Sep 13 22:56:53 2009 +0700
@@ -83,3 +83,5 @@
     'django.contrib.admin',
     'uquiz.quiz',
 )
+
+STATIC_DOC_ROOT = os.path.join(PROJECT_DIR,'media')

จากนั้นทำ url mapping สังเกตว่าเราต้อง import โมดูล settings มาด้วย เพราะเราต้องการค่าคงที่ ''STATIC_DOC_ROOT''


--- a/urls.py	Sun Sep 13 22:53:34 2009 +0700
+++ b/urls.py	Sun Sep 13 22:56:53 2009 +0700
@@ -1,4 +1,5 @@
 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
@@ -15,4 +16,8 @@
 
     # Uncomment the next line to enable the admin:
     # (r'^admin/', include(admin.site.urls)),
+
+    # for serving static files
+    (r'^site_media/(?P.*)$', 'django.views.static.serve',
+     {'document_root': settings.STATIC_DOC_ROOT}),
 )

สังเกตว่าเรา map url ที่ขึ้นต้นด้วย ''site_media'' ไปที่วิวมาตรฐานของ django ชื่อ ''django.views.static.serve''. จากนั้นสร้างไดเร็กทอรี ''media'' และ ''media/css'' และสร้างแฟ้ม style.css ดังด้านล่าง


h1 {
    color: white;
    background: black;
    height: 40px;
    padding-left: 5px;
}

#main-content {
    margin: 10px;
    padding: 5px;
    background: #edf3fe;
}

#footer {
    text-align: center;
    font-size: 70%;
}

สุดท้ายเราไปเพิ่มส่วน tag ''head'' ใน ''templates/base.html'' ให้อ่าน css มาด้วย ดังนี้ โดยส่วน ''head'' จะต้องอยู่ก่อนหน้า ''body'' ดังแสดงด้านล่าง




  


   ... ละไว้ ...