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>