Table of Contents

หน้านี้เป็นส่วนหนึ่งของตัวอย่างการพัฒนาโปรแกรมด้วย Django: 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 เอาไว้ใส่โครงขอหน้าเว็บของเรา ดังนี้ 

<html>
<body>
<h1>uQuiz</h1>
 
<div id="main-content">
  {% block content %}
  {% endblock %}
</div>
 
<div id="footer">uQuiz is a demo for class 204223.</div>
</body>
</html>

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

{% extends "base.html" %}
 
{% block content %}
<p>
  Welcome to uQuiz.  It's time to start creating quizes.
</p>
<p>
  What you can do here:
  <ul>
    <li>Create quizes</li>
    <li>Play quizes</li>
  </ul>
</p>
{% 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 เสียก่อน (ดูรายละเอียดเพิ่มเติมที่ การใช้แฟ้ม_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<path>.*)$', '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 ดังแสดงด้านล่าง 

<html>
<head>
  <link href="/site_media/css/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
   ... ละไว้ ...
</body>
</html>