วันอังคารที่ 10 ธันวาคม พ.ศ. 2556

Djangobook - Templates

ในบทความนี้นั้นเราจะมาทดลองการใช้งาน Template ใน Django กันครับโดยเริ่มต้นให้สร้าง Folder ที่ชื่อ Templates ขึ้นใน Project ของเราก่อนจากนั้นให้ไปแก้ไขในไฟล์ setting.py โดยเพิ่มโค้ดเข้าไปดังนี้

TEMPLATE_DIRS = (
"/home/wittawin/Kim/Stamp/Templates",
# From Django book
# Always use forward slashes, even on Windows.
# Don’t forget to use absolute paths, not relative paths.
)

    โดยใน String ที่ใส่เพิ่มเข้าไปนั้นให้แก้ไขตาม Directory ที่แต่ละคนสร้างไว้เพื่อเก็บ Templates ซึ่งเหตุผลที่ต้องเพิ่มโค้ดชุดนี้เข้าก็เพื่อเป็นการกำหนดให้ Django รู้ว่าเราจะเก็บ Templates ไว้ที่ไหนเพื่อให้ Django รู้ที่อยู่แล้วเข้าไปอ่านไฟล์ Templates ในนั้นได้

จากนั้นให้เข้าไปเพิ่มโค้ดเข้าไปในไฟล์ urls.py ดังนี้

    url(r'^calendar/$', 'Stamp.views.Years_Calendar'),
    url(r'^calendar(\d+)/$', 'Stamp.views.Years_Calendar'),

จากนั้นไปแก้ไขไฟล์ views.py โดยเพิ่มโค้ดเหล่านี้เข้าไป

from django.shortcuts import render_to_response
import calendar

def Years_Calendar(request,years=2013):
    mycal = calendar.HTMLCalendar(calendar.SUNDAY)
    monthsq1 = ["January","Febuary","March"]
    monthsq2 = ["April","May","June"]
    monthsq3 = ["July","August","September"]
    monthsq4 = ["October","November","December"]
    return render_to_response('Calendar_Template.html', {'listofdate': mycal.yeardayscalendar(int(years)), 'year_show' : years, 'monthq1' : monthsq1, 'monthq2' : monthsq2, 'monthq3' : monthsq3, 'monthq4' : monthsq4, 'value' : 0})

และในโฟลเดอร์ Templates ที่สร้างไว้ตอนต้นให้สร้างไฟล์ที่ชื่อ Calendar_Template.html จากนั้นภายใน Calendar_Template.html ให้ใส่โค้ดดังต่อไปนี้

<html>
    <head>
        <title>Calendar {{ year_show }}</title>
    </head>
    <body bgcolor="skyblue">
        <center><br><font color="white" size = "10">
        Calendar {{ year_show }}</font><br><br>
        <table border="0" cellpadding="2">
    {% for quarters in listofdate %}
        <tr valign="top">
        {% ifequal forloop.counter 1 %}
            {% for month in monthq1 %}
            <td><center><font color="white" size = "6">{{ month }}</font></center></td>
            {% endfor %}
            </tr><tr valign="top">
        {% endifequal %}
        {% ifequal forloop.counter 2 %}
            {% for month in monthq2 %}
            <td><center><font color="white" size = "6">{{ month }}</font></center></td>
            {% endfor %}
            </tr><tr valign="top">
        {% endifequal %}
        {% ifequal forloop.counter 3 %}
            {% for month in monthq3 %}
            <td><center><font color="white" size = "6">{{ month }}</font></center></td>
            {% endfor %}
            </tr><tr valign="top">
        {% endifequal %}
        {% ifequal forloop.counter 4 %}
            {% for month in monthq4 %}
            <td><center><font color="white" size = "6">{{ month }}</font></center></td>
            {% endfor %}
            </tr><tr valign="top">
        {% endifequal %}
        {% for months in quarters %}
            <td><table border="5" cellpadding="10"><tr><td align="center"><font color="white" size = "3">Sun</font></td><td align="center"><font color="white" size = "3">Mon</font></td><td align="center"><font color="white" size = "3">Tue</font></td><td align="center"><font color="white" size = "3">Wed</font></td><td align="center"><font color="white" size = "3">Thu</font></td><td align="center"><font color="white" size = "3">Fri</font></td><td align="center"><font color="white" size = "3">Sat</font></td></tr>
            {% for weeks in months %}
                <tr>
                {% for days in weeks %}
                    {% ifnotequal days 0 %}
                        <td align="right"><font color="white" size = "4">{{ days }}</font></td>
                    {% else %}
                        <td> </td>
                    {% endifnotequal %}
                {% endfor %}
                </tr>
            {% endfor %}
            </table></td>
           
        {% endfor %}
        </tr>
    {% endfor %}
    </table>
        </center>
    </body>
</html>

    หลักการใช้ Template นั้นประกอบไปด้วยสองส่วนนั่นคือ template และ context โดย template นั้นก็หมายถึงไฟล์ HTML ที่ได้เขียนไว้สำหรับการใช้เป็น template นั่นเองส่วน context คือส่วนที่ระบุว่าตัวแปรใน template ที่รอค่าเข้าไปใส่ในตอนใช้งาน template นั้นมีค่าตรงกับตัวแปรใดหรือค่าเท่าใด โดยทั้งสองส่วนนั้นมีความสำคัญสำหรับการใช้ template อย่างมากหากขาดอย่างใดอย่างนึงก็ไม่สามารถใช้ template ได้เมื่อมีครบทั้งสองส่วนแล้วเราก็ต้องทำการ render

    ซึ่งต้องเริ่มด้วยการ import render_to_response เป็นหนึ่งใน API ที่มาจาก django.shortcuts ซึ่งทำหน้าที่ในการนำ context ที่มีไป render ในไฟล์ HTML ที่เป็น template อยู่จากนั้นจึงส่งกลับไปแสดงผลที่ Browser ทันทีเหมือนกับการใช้คำสั่ง HttpResponse เพียงแต่เพิ่มการ render context เข้าไปใน template ก่อนจะ return
return render_to_response('Calendar_Template.html', {'listofdate': mycal.yeardayscalendar(int(years)), 'year_show' : years, 'monthq1' : monthsq1, 'monthq2' : monthsq2, 'monthq3' : monthsq3, 'monthq4' : monthsq4, 'value' : 0})
 จากตัวอย่างจะเห็นว่าส่วนแรกคือชื่อของ template ที่เราจะเป็นโครงในการนำ context ไป render ส่วนต่อมาคือ context จะเห็นว่าตัวทางซ้ายของเครื่องหมาย : คือชื่อของตัวแปรที่อยู่ใน template ส่วนตัวทางขวาของเครื่องหมาย : คือค่าหรือตัวแปรที่จะนำไปใช้นั่นเอง

    ส่วน Calendar นั้นเป็น API ของ python ที่มีมาให้อยู่แล้วซึ่งเราจะใช้ในการสร้าง List ที่เก็บวันที่ของทั้งปีไว้ภายในโดยใช้คำสั่ง mycal.yeardayscalendar(int(years)) เป็น List ที่ประกอบด้วย 4 Quarter ในแต่ละปีและใน List ของแต่ละ Quarter ก็จะประกอบได้เดือน 3 เดือนจากนั้นในแต่ละเดือนก็จะเก็บค่าของสัปดาห์ในเดือนนั้นๆ และในแต่ละสัปดาห์ก็จะเก็บวันที่ของในสัปดาห์นั้นๆโดยเริ่มจากวันที่เรากำหนดให้เป็นวันแรกของสัปดาห์ไว้ตอนสร้าง object
mycal = calendar.HTMLCalendar(calendar.SUNDAY) อย่างในตัวอย่างกำหนดให้เป็นวันอาทิตย์ไว้ จะสังเกตเห็นว่าใน Function def Years_Calendar(request,years=2013): years=2013 นั้นมีไว้ใส่ค่าเป็นค่า พื้นฐานให้หากไม่มีการส่งค่าจาก Urls แต่หากส่งมาก็จะนำค่านั้นมาใช้แทน

ภาพตัวอย่างเมื่อเรียกเพจ 127.0.0.1/calendar


ภาพตัวอย่างเมื่อเรียกเพจ 127.0.0.1/calendar2020


    จากการใช้ Template ในข้างต้นนั้นประการแรกเลยจะเห็นได้ว่าปัญหาอย่างนึงที่ลดลงไปเลยก็คือความสับสนในด้าน Code HTML ที่ผสมกับ python ซึ่งเราจะเจอปัญหานี้ถ้าเราไม่ใช้  Template แบบในตัวอย่างของ Djangobook -  Dynamic Urls and views ซึ่งในตัวอย่าง Code HTML ยังมีจำนวนไม่มาก หากมีจำนวนมากกว่านี้ต้องเกิดความสับสนขึ้นอย่างแน่นอน

    ประการที่สองเราสามารถนำ Template มาใช้ซ้ำได้อีกเพราะ Template เป็นเพียงแค่แบบในการกำหนดโครงสร้างของโค้ดต่างๆโดยสิ่งที่จะนำมาแสดงขึ้นกับ context ที่นำไป render ล้วนๆดังนั้น หากเปลี่ยนค่าของ context ที่จะนำไป render ก็จะได้หน้าต่างที่แสดงผลต่างจากแบบเดิมแล้ว

ไม่มีความคิดเห็น:

แสดงความคิดเห็น