ทดลองสร้าง Django app ตอนที่ 3

การทดลองเขียนไฟล์ view ครั้งแรก

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

1. ให้ทำการเปิดไฟล์ views.py ซึ่งไฟล์นี้จะอยู่ใน Directory ของ app ที่เราได้สร้างขึ้นใน ทดลองสร้าง Django app ตอนที่ 1  สำหรับในตัวอย่างนี้จะอยู่ที่ polls/views.py

2. ให้ทดลองทำการแก้ไข code ของไฟล์ views.py ดังต่อไปนี้

3. สร้างไฟล์ใหม่ที่มีชื่อว่า urls.py ใน Directory ของ app  สำหรับตัวอย่างนี้จะอยู่ใน Directory ชื่อ polls  โดยในตอนนี้ Directory ของ app จะมีไฟล์ดังต่อไปนี้
polls/
     __init__.py
     admin.py
     models.py
     test.py
     views.py
     urls.py

4. ให้ทำการทดลองแก้ไขไฟล์ polls/urls.py ดังต่อไปนี้

5. ให้เปิดไฟล์ที่มีชื่อว่า urls.py ที่อยู่ใน Directory ของ Project  สำหรับตัวอย่างนี้จะใช้ชื่อว่า mysite  ดังนั้นไฟล์นี้จะอยู่ที่ mysite/urls.py  เมื่อเปิดไฟล์นี้แล้วให้ทำการแก้ไข code ดังต่อไปนี้

6. ให้ทำการ runserver และลองเปิด Browser แล้วพิมพ์ url ดังนี้ http://localhost:8000/polls/ จะเห็นหน้าเว็บเพจที่แสดงคำว่า "Hello, world. You're at the poll index."  ดังภาพด้านล่าง

ทดลองเขียนไฟล์ view เพิ่มขึ้น

          ในขั้นตอนนี้เราจะทดลองทำการเขียน code ในไฟล์ view เพิ่มขึ้น  โดยมีวิธีการทดลองทำดังต่อไปนี้

1. ให้เปิดไฟล์ views.py ใน Directory ของ app และทำการแก้ไข code ดังต่อไปนี้

2. ให้เปิดไฟล์ urls.py ใน Directory ของ app และทำการแก้ไข code ดังต่อไปนี้

          หลังจากทำการแก้ไข code ในขั้นตอนข้างต้นแล้ว  เราจะลองทำการเปิด Browser แล้วพิมพ์ urls เพื่อดูความเปลี่ยนแปลงที่เราทำดังต่อไปนี้
urls: http://localhost:8000/polls/5
          จาก url นี้จะไปทำการเรียกฟังก์ชัน detail ที่เราได้ทำการเพิ่มลงไปในไฟล์ views.py  จะได้ตัวอย่างหน้าเว็บเพจดังภาพด้านล่าง

urls: http://localhost:8000/polls/5/results
          จาก url นี้จะไปทำการเรียกฟังก์ชัน results ที่เราได้ทำการเพิ่มลงไปในไฟล์ views.py  จะได้ตัวอย่างหน้าเว็บเพจดังภาพด้านล่าง

urls: http://localhost:8000/polls/5/vote
          จาก url นี้จะไปทำการเรียกฟังก์ชัน vote ที่เราได้ทำการเพิ่มลงไปในไฟล์ views.py  จะได้ตัวอย่างหน้าเว็บเพจดังภาพด้านล่าง

ทดลองเขียนไฟล์ view เพื่อทดลองร่วมกับ polls app

1. ให้ทำการเปิดไฟล์ views.py ใน Directory ของ app แล้วทำการแก้ไขฟังก์ชัน index ดังต่อไปนี้

          เมื่อทำการแก้ไขแล้วลองเปิด Browser แล้วพิมพ์ url ดังนี้ http://localhost:8000/polls  จะได้หน้าเว็บเพจดังภาพด้านล่าง

2. ทดลองสร้าง template ใน app โดยวิธีการดังต่อไปนี้

2.1 ให้สร้าง Directory ใหม่ที่มีชื่อว่า templates ใน Directory ของ app ในตัวอย่างนี้จะใช้ชื่อว่า polls

2.2 ให้สร้าง Directory ใหม่ที่มีชื่อว่า polls ใน Directory ของ templates ที่เพิ่งสร้างขึ้น

2.3 ให้สร้างไฟล์ชื่อ index.html ใน Directory ชื่อ polls ที่เพิ่งสร้างขึ้นใหม่  และทำการแก้ไข code ในไฟล์ index.html ดังต่อไปนี้

2.4 ให้ทำการแก้ไข code ในฟังก์ชันชื่อ index ในไฟล์ views.py ดังต่อไปนี้

2.5 ลองเปิด Browser แล้วพิมพ์ url ดังนี้ http://localhost:8000/polls  จะได้หน้าเว็บเพจดังภาพด้านล่าง

2.6 ลองทำการแก้ไข code ในฟังก์ชัน index ของไฟล์ views.py ดังต่อไปนี้เพื่อใช้คำสั่ง render แทนการใช้ HttpResponse

          ลองเปิด Browser แล้วพิมพ์ url ดังนี้ http://localhost:8000/polls  จะได้หน้าเว็บเพจดังภาพด้านล่าง

การสร้าง 404 Error

          ในการสร้างหน้าเพจสำหรับ 404 Error นี้มีไว้เพื่อแสดงหน้าเว็บเพจในกรณีที่เกิดข้อผิดพลาดที่ไม่สามารถตอบสนองตามคำร้องขอได้  โดยให้ทำการแก้ไขโค้ดในไฟล์ views.py ดังนี้

แก้ไขฟังก์ชัน detail ในไฟล์ views.py

          เสร็จแล้วให้ทำลองทำการแก้ไขโค้ดใน template ที่ชื่อว่า detail.html โดยเขียนโค้ดดังนี้
     
     {{poll}}

          เมื่อทำการแก้ไขโค้ดในไฟล์ views.py และใน template detail.html เสร็จแล้ว  จะได้หน้าเว็บเพจที่แสดงหน้า 404 Error ดังภาพด้านล่าง

หน้าเพจ 404 Error

          นอกจากนี้แล้วเรายังสามารถใช้ get_object_or_404() เพื่อใช้แสดงหน้าเพจ 404 Error แทนโค้ดที่เขียนไปก่อนหน้านี้ได้เช่นกัน  ดังนั้นเราจะทดลองทำการแก้ไขโค้ดในไฟล์ views.py ดังต่อไปนี้

แก้ไขโค้ดฟังก์ชัน detail ในไฟล์ views.py

          หลังจากทำการแก้ไขโค้ดแล้ว  หน้าเว็บเพจก็ยังสามารถแสดงหน้า 404 Error ได้เหมือนเดิม

หน้าเพจ 404 Error

การใช้ระบบของ Template

          เราจะลองใช้ template โดยทำการแก้ไขโค้ดในไฟล์ template ที่ชื่อ detail.html ดังต่อไปนี้

แก้ไขโค้ดใน detail.html

          หลังจากแก้ไขโค้ดใน detail.html แล้ว  เมื่อเข้าไปที่หน้าเว็บเพจจะแสดงดังภาพด้านล่าง

หน้าเว็บเพจ: localhost:8000/polls/1/

การลบ Hardcoded URLs ใน Templates

          ในตอนนี้ลิงค์ใน Template ที่ชื่อ index.html จะเป็นลิงค์ที่เฉพาะเจาะจงกับ url  เมื่อใดที่เราต้องการเปลี่ยนชื่อ url เราก็จะต้องเสียเวลาเข้ามาแก้ไขโค้ดใน Template นี้ด้วย  ดังนั้นเราจึงจะแก้ไขโค้ดใน Template นี้เพื่อให้ลิงค์มีการอ้างอิง url ใหม่ได้อัตโนมัติถ้าหากมีการเปลี่ยนแปลงชื่อ url  โดยแก้ไขโค้ดใน template ชื่อ index.html ดังนี้
แก้ไขโค้ดเก่าในบรรทัดนี้
<li><a href="/polls/{{ poll.id }}/">{{ poll.question }}</a></li>
เปลี่ยนใหม่เป็นดังนี้
<li><a href="{% url ’detail’ poll.id %}">{{ poll.question }}</a></li>

การใช้ชื่อ URL แบบ Namespacing

          ในตัวอย่างนี้เรามี app เพียงหนึ่ง app คือ polls แต่ถ้าหากว่าเรามีหลายๆ app อยู่ใน project เดียวกัน  เราจำเป็นต้องเพิ่มชื่อ URL แบบ Namespacing เพื่อให้ Django สามารถแยกความแตกต่างของ URL ในแต่ละ app ได้  โดยทำการแก้ไขโค้ดในไฟล์ urls.py ของ Project ดังนี้

แก้ไขโค้ดในไฟล์ urls.py ของ Project

          และทำการแก้ไขในไฟล์ template ชื่อ index.html ดังนี้

แก้ไขโค้ดในไฟล์ index.html

          
          ใน ทดลองสร้าง Django app ตอนที่ 3  นี้เราได้ศึกษาเกี่ยวกับ views, urls และ template ใน Django

สามารถศึกษา form และ Generic views ได้ ใน ทดลองสร้าง Django app ตอนที่ 4