You are hereBlogs > jittat's blog > มาสร้าง app สำหรับอัพโหลดรูปกัน (2)
มาสร้าง app สำหรับอัพโหลดรูปกัน (2)
เรามาต่อจากตอนแรกกันครับ ในตอนนี้เราจะสร้าง view และ template สำหรับแสดงรูปที่ upload มาครับ
เกี่ยวกับการสร้าง view และ template เริ่มต้น ผมคงไม่ลงรายละเอียดขั้นตอนมาก เอาเป็นดูเพิ่มได้จาก entry 1 2 3 ที่ sugree เขียนไว้นะครับ
มาตั้งค่าเกี่ยวกับไดเรกทอรีของ template กับจัดการตั้งค่า URL dispatcher (routing) กันก่อน
เราจะใช้ template โดยเราจะเก็บไว้ที่ youpics/templates ดังนั้นไปเพิ่มไดเรกทอรีดังกล่าวใน settings.py
# Always use forward slashes, even on Windows.
# Don't forget to use absolute paths, not relative paths.
"/พาธเต็ม/youpics/templates",
)
แล้วก็ไปตั้งค่า URL ในไฟล์ urls.py
เราจะเขียนฟังก์ชัน index ในโมดูล pictures.views ให้จัดการกับการเรียกหน้าหลักของเรา ดังนั้นเราจะไปเพิ่มบรรทัด
เข้าไปในรายการของ urlpatterns
พอตั้งค่าเรียบร้อยแล้ว ก็ได้เวลามาเขียน view และ template กันครับ
เดี๋ยวใน view เราจะโหลดวัตถุจากโมเดล Picture มา แล้วโยนให้ template นั้นแสดงผลครับ
เข้าไปแก้โค้ดใน pictures/views.py ก่อนเลยดีกว่าครับ
from django.shortcuts import render_to_response
def index(request):
pics = Picture.objects.all()
return render_to_response("index.html",{'pictures': pics})
เราจะใช้โมเดลที่นิยามไว้ในไฟล์ models.py ในไดเร็กทอรี pictures ดังนั้นเราจึงสั่ง import จากโมดูล pictures.models ครับ
ส่วนในการเรียกให้แสดง template นั้น เราจะใช้ฟังก์ชันลัดชื่อ render_to_response เพื่อเรียกให้แสดงผล พร้อม ๆ กับส่งพารามิเตอร์เข้าไปใน template ครับ ดังนั้น ก็ต้อง import มาก่อนเช่นเดียวกัน
ในการเรียกค้นวัตถุในโมเดลใด ๆ เราจะทำผ่าน "ผู้จัดการ" (Manager) ของโมเดลนั้น ที่เข้าถึงได้ทางคลาสของโมเดลนั้น โดยทั่วไปแล้วผู้จัดการจะถูกตั้งชื่อว่า objects
ฟังแล้วดูยาก พิจารณาโปรแกรมด้านบน ในบรรทัด
เราเรียกเมท็อด all จาก Picture.objects ซึ่งเป็นผู้จัดการของโมเดล Picture ดังนั้น เราก็จะได้วัตถุทั้งหมดคืนมาเป็น QuerySet ซึ่งคิดง่าย ๆ (ตอนนี้) ว่าเป็นลิสต์ก็ได้
สำหรับการเรียกค้นข้อมูลจากโมเดล ดูเพิ่มเติมได้ที่ เอกสารของ django
จากนั้นเราเรียก render_to_response ให้ไป render ตัว template ในไฟล์ index.html โดยส่ง pics ที่ค้นมาได้เข้าไปเป็นพารามิเตอร์ชื่อ pictures
(จริง ๆ แล้วผมอยากใช้ตัวแปร pictures ในการเก็บ QuerySet แต่ไม่อยากทำให้เข้าใจผิดว่าตัวแปรใน view จะต้องถูกส่งไปยัง template ด้วยชื่อเดียวกันครับ)
ทีนี้ไปเขียน template กัน
อย่างที่ sugree กล่าวไว้ ว่าภาษา template ของ django ไม่ใช่ xml ไม่ใช่ Python เป็นภาษาของตนเองครับ
ทีนี้ ทดลองดูจากตัวอย่างเลยครับ สร้างไฟล์ index.html ไว้ในไดเรกทอรี youpics/templates ตามด้านล่าง
{% for picture in pictures %}
<h3>{{ picture.title }}</h3>
{% endfor %}
ใน template นะครับ อะไรที่อยู่เครื่องหมาย {{ วงเล็บปีกกาคู่ }} จะถูกมองว่าเป็นตัวแปร และค่าของมันจะถูกแทรกลงไปในข้อความที่ render ได้
ส่วนอะไรที่อยู่ในเครื่องหมาย {% ปีกกาและเปอร์เซ็นต์ %} จะถูกเรียกว่าเป็น template tag ซึ่งจะทำให้เราสามารถควบคุมการทำงานของ template ได้
ด้านบนเราระบุให้ตัวแปร picture วิ่งไปในรายการ pictures ด้วย template tag for ภายในลูป เราสั่งให้แสดง picture.title
ลองเรียก server มาดูผลลัพธ์กันครับ
ทีนี้เราจะทำให้มีการแสดงรูปครับ ใน ImageField ที่เราใช้เพื่อเก็บรูปนั้นมี attribute url ให้เราอ่านได้ ดังนั้นแก้ index.html เป็นดังด้านล่างครับ
{% for picture in pictures %}
<h3>{{ picture.title }}</h3>
<img src="{{ picture.image.url }}"/>
{% endfor %}
แล้วลอง refresh ที่บราวเซอร์ดูครับ น่าจะเห็นรูปแล้ว
สำหรับการเขียน template ดูเอกสารของ django ได้ที่นี่นะครับ
ตอนหน้าเราจะมาทำ form สำหรับ upload รูปกันครับ
- jittat's blog
- Login or register to post comments
เยี่ยมมากเลยครับ ไม่ทราบต้องลง Pil ก่อนหรือไม่ครับ?
คิดว่าไม่ต้องนะครับ (เพราะว่าเราจะไม่ได้ทำอะไรกับตัวรูปเลยครับ เอามาแสดงเฉย ๆ เลยครับ)
ผมไปอ่านดูใหม่ ในเอกสารเขียนว่าจะใช้ ImageField ได้ต้องลง Python Imaging Library ด้วยครับ