ขั้นตอนและวิธีการสร้าง template
1. ทำการสร้าง directory ชื่อ template ในไฟร์โปรเจค
2. เมื่อทำการสร้าง directory เรียบร้อยแล้วให้ทำการเพิ่ม path ของ directory template เข้าไปในโปรเจคโดย เข้าไปแก้ไขไฟร์ settings.py แล้วทำการเพิ่ม TEMPLATE_DIRS = ( os.path.join(BASE_DIR, 'template'), ) เข้าไปในไฟร์ดังรูป
3. ต่อไปก็จะเป็นส่วนของการแยกโค้ด python กับส่วนการแสดงผลออกจากกัน โดยเริ่มจากการสร้างไฟร์ template/datetime.html ซึ่งไฟร์นี้จะทำหน้าที่เก็บโค้ด html ที่เป็น form ใช้ในกาแสดงผล ทำการแก้ไขไฟร์ template/datetime.html ดังนี้
<html><head>
<title>Time </title>
</head><body><center><font size='7' color = 'orange'><B>It is now {{ current_date }}.</B></font><BR>
</center>
</body></html>
จากโค้ดจะเห็นได้ว่าเป็นโค้ด html ที่เก็บส่วนการแสดงผลและมีการเชื่อมต่อกับ attribute ที่ชื่อ current_date ซึ่งเป็น attribute เป็นตัวเชื่อมระหว่าตัวโค้ดกับส่วนการแสดงผล
4. ทำการสร้างและแก้ไขไฟร์ django/views.py ซึ่งเป็นส่วนของโค้ด python และเป็นส่วนการคำนวณค่าดังนี้
from django.template.loader import get_template
from django.template import Template, Context
from django.http import HttpResponse
import datetime
def current_datetime(request):
now = datetime.datetime.now()
t = get_template('datetime.html')
html = t.render(Context({'current_date': now})
return HttpResponse(html)
จากโค้ดจะเห็นว่าเป็นโค้ด python ที่ทำการดึง วัน เวลาปัจจุบัน และทำการดึง form จาก template ที่ได้เขียนไว้แล้วใส่ค่าเวลาปัจจุบันลงไปใน attribute ชื่อ current_date เพื่อทำการแสดงค่า
5. ทำการเพิ่ม url ในไฟร์ django/urls.py ไปยัง class current_datetime
url(r'^calendar/', 'mytemplate.mycal.current_datetime'),
6. เมื่อทำการ runserver แล้วทำการเข้าไปยัง url/calender (127.0.0.1:8000/calender/) จะได้ผลดังภาพ
ก็จะได้วิธีการสร้าง template เบื้องต้นซึ่งจะเห็นได้ว่าการใช้ template ในการแยกส่วนโค้ดออกจากการแสดงผลจะทำให้ง่ายต่อการอ่าน ทำความเข้าใจ ไม่สับสน และทำการแก้ไขง่าย
นอกจากนี้การเขียน form html ที่ช่วยในการแสดงผลยังมีอีกหลายรูปแบบซึ่งสามารถศึกษาเพิ่มเติมได้ที่ https://docs.djangoproject.com/en/dev/ref/templates/builtins/
=======================================================================
ไม่มีความคิดเห็น:
แสดงความคิดเห็น