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

การเริ่มต้น Run server และเข้าหน้าเว็บเพจ admin

          ให้ใช้คำสั่ง cd เพื่อเข้าไปยัง Directory ของ django Project ที่มีไฟล์ manage.py  จากนั้นให้ใช้คำสั่งต่อไปนี้ในการ run server
     python manage.py runserver

          เมื่อทำการ run server แล้ว  ให้เปิด Browser ขึ้นมาแล้วเข้าไปที่ http://127.0.0.1:8000/admin/  จะมีหน้าเว็บเพจปรากฏขึ้นดังภาพ

เว็บเพจหน้า log in

          หลังจากที่เราเปิดหน้า log in ได้แล้ว  ให้ทำการ log in  ด้วย superuser ที่เราได้ใส่ข้อมูลลงไปตอนที่ใช้คำสั่ง syncdb ใน ทดลองสร้าง Django app ตอนที่ 1  เมื่อทำการ log in  ได้แล้วจะเห็นหน้าเว็บ admin ดังภาพด้านล่าง

เว็บเพจหน้า admin

การแสดง poll app ในหน้า admin

          ตอนนี้ในหน้าเพจ admin ยังไม่มี poll app ที่เราสร้างไว้ใน ทดลองสร้าง Django app ตอนที่ 1  มาแสดงในหน้าเว็บ  โดยวิธีการที่จะทำให้หน้าเว็บเพจ admin มีการแสดง poll app นั้นทำได้โดยการแก้ไข code ในไฟล์ admin.py ภายใน Directory ของ app ดังนี้

ภาพแสดงไฟล์ admin.py หลังจากแก้ไข

          เมื่อทำการแก้ไข code แล้วจะมีการแสดง poll app ในหน้าเพจ admin ดังภาพด้านล่าง

มี poll app แสดงในหน้าเพจ admin

          หลังจากนั้นเมื่อทำการคลิกเข้าไปที่ลิงค์ Polls จะมี What's up? ที่ได้สร้างไว้ใน ทดลองสร้าง Django app ตอนที่ 1 แสดงในหน้าเว็บดังภาพด้านล่าง

มี What's up? แสดงในหน้าเพจ admin

          เมื่อคลิกเข้าไปที่ลิงค์ What's up? จะมีส่วนที่ให้แก้ไข Question และ Date Published  ดังภาพด้านล่าง

หลังจากคลิกเข้าไปที่ What's up?

          ให้เราลองทดลองเปลี่ยนแปลงค่าของ Date Published โดยกดที่ปุ่ม Today และ Now  หลังจากนั้นกดปุ่ม Save and continue editing.  จากนั้นให้ลองกดปุ่ม History ที่มุมบนขวา เพื่อดูการเปลี่ยนแปลงที่เราเคยทำไป ดังภาพด้านล่าง

หลังจากคลิกเข้าไปที่ History

การปรับแต่งรูปแบบของหน้าเพจ admin

การจัดลำดับการแสดงผล          
          ให้ทำการแก้ไข code ในไฟล์ admin.py เพื่อจัดลำดับการแสดงผลใหม่  โดยให้แก้ไข code ดังนี้

แก้ไขโค้ดใน admin.py

          หลังจากแก้ไขโค้ดแล้ว  หน้าเพจ admin จะมีรูปแบบเปลี่ยนไปคือมีการแสดงผลเป็นลำดับ ตามลำดับใน list ของ fields ในที่นี้ลำดับแรกคือ Date Published และลำดับที่สองคือ Question ดังแสดงในภาพด้านล่าง

มีลำดับการแสดงผลใหม่

การแยกข้อความออกเป็นส่วนๆ
          ให้ลองทำการแก้ไขโค้ดในไฟล์ admin.py ใหม่เพื่อแยกส่วนระหว่าง Question กับ Date Published ออกเป็นสองส่วน  โดยให้แก้ไขโค้ดดังนี้

แก้ไขโค้ดใน admin.py

          เมื่อทำการแก้ไขโค้ดแล้ว  หน้าเพจ admin จะมีข้อความแยกส่วนกันตามข้อมูลที่เราใส่ใน fieldsets ดังแสดงในภาพด้านล่าง

มีการแยกส่วนกันระหว่าง Question กับ Date Published

การซ่อนข้อความบางส่วน
          ทดลองทำการแก้ไขโค้ดในไฟล์ admin.py เพื่อทำการซ่อนข้อความในส่วนที่เราต้องการ  ในที่นี้เราจะลองทำการซ่อนในส่วนของ Date Published  ให้ลองทำการแก้ไขโค้ดดังนี้

แก้ไขโค้ด admin.py เพื่อซ่อนส่วน Data Published

          หลังจากทำการแก้ไขโค้ดแล้ว  ในหน้าเพจ admin จะมีส่วน Date Published ที่ถูกซ่อนเอาไว้  โดยจะมีปุ่มกดให้เราสามารถแสดงหรือซ่อนข้อความได้  ดังแสดงตัวอย่างในภาพด้านล่าง

มีการซ่อนข้อความในส่วน Date Published

การเพิ่ม Object ใหม่เข้ามาในหน้า admin

          ในตอนนี้เรามี Poll อยู่ในหน้าเพจ admin แล้ว  แต่ใน Poll นั้นจะต้องประกอบด้วยหลายๆ choice  ในตอนนี้นั้นเราจะทำการเพิ่ม choice ลงไปในหน้า admin  ซึ่งสามารถที่จะทำได้สองวิธีคือ

1. ทำการ register choice ในไฟล์ admin.py  โดยให้ทำการแก้ไขโค้ดดังนี้

register Choice ในไฟล์ admin.py

          หลังจากทำการแก้ไขโค้ดเรียบร้อยแล้วจะได้หน้าเว็บเพจ ดังแสดงในภาพด้านล่าง

หน้าเพจหลังจากการ register Choice

          แต่การเพิ่ม choice object ด้วยวิธีนี้ยังไม่ใช่วิธีการที่มีประสิทธิภาพ  ยังมีวิธีการที่ดีกว่านี้ซึ่งจะช่วยให้เราสามารถเพิ่ม choice ได้โดยตรงเมื่อเราสร้าง Poll Object  เราจะลองศึกษาวิธีการทำนี้ในวิธีการที่สอง

2. ทำการลบ register Choice ที่ได้ทำในวิธีการที่หนึ่ง แล้วทำการแก้ไขโค้ดในไฟล์ admin.py ดังนี้

แก้ไขโค้ดในไฟล์ admin.py

          หลังจากการแก้ไขโค้ดจะทำให้เราสามารถทำการเพิ่มหรือแก้ไข Choice ได้ง่ายขึ้นในหน้าเพจ admin ดังแสดงในภาพด้านล่าง

หน้าเว็บ admin หลังจากแก้ไขโค้ดใน admin.py

          ในการแสดงผลหน้าเว็บเพจแบบนี้คือแบบ StackedInline  เราสามารถที่จะเปลี่ยนรูปแบบไปเป็นแบบ TabularInline ได้ โดยทำการแก้ไขโค้ดในไฟล์ admin.py ดังนี้

แก้ไขโค้ดเป็นแบบ TabularInline

          หลังจากทำการแก้ไขโค้ดให้แสดงผลแบบ TabularInline แล้วจะได้หน้าเว็บเพจแสดงดังภาพด้านล่าง

หน้าเพจ admin แบบ TabularInline

การปรับแต่งในหน้าเพจ Poll Admin

          ในตอนนี้หน้า Poll Admin จะมีลักษณะดังภาพด้านล่าง

หน้าเพจของ Poll Admin ในตอนนี้

          เราต้องการปรับแต่หน้า Poll Admin นี้ใหม่โดยให้ลักษณะการแสดงผลดังภาพด้านล่าง

หน้าเพจของ Poll Admin ใหม่ที่ต้องการ

          หากเราต้องการให้หน้า Poll Admin มีการแสดงผลตามลักษณะใหม่ที่ต้องการนี้  จะต้องทำการแก้ไขโค้ดในไฟล์ admin.py ดังนี้

แก้ไขโค้ดใน admin.py ทำการเพิ่ม list_display

          ในหน้าเพจ Poll Admin ใหม่นี้เราสามารถกดที่หัวของ column เพื่อเป็นการเรียงข้อมูลได้  ยกเว้นในส่วนหัวของ Was published recently เพราะว่าตอนนี้ยังไม่รองรับ  
          เราสามารถเพิ่ม filter ลองไปในหน้าเพจ Poll Admin ได้โดยให้เราทำการแก้ไขโค้ดในไฟล์ models.py ดังนี้

แก้ไขโค้ดในไฟล์ models.py

          และทำการแก้ไขโค้ดในไฟล์ admin.py โดยการเพิ่มในส่วนของ list_filter ดังภาพด้านล่าง

เพิ่ม list_filter ในไฟล์ admin.py

          เมื่อทำการแก้ไขโค้ดในไฟล์ medels.py และไฟล์ admin.py แล้วจะได้หน้าเพจ Poll Admin ใหม่ดังภาพด้านล่าง

หน้าเว็บ Poll Admin ที่มี Filter

          
          นอกจากนี้แล้วเรายังสามารถเพิ่มช่อง search ลงในหน้า Poll Admin ได้  ให้ทำการแก้ไขโค้ดในไฟล์ admin.py โดยทำการเพิ่มโค้ดในส่วน search_fields ดังแสดงในภาพด้านล่าง

แก้ไขโค้ดในไฟล์ admin.py เพิ่ม search_fields

          หลังจากทำการแก้ไขโค้ดแล้ว  ในหน้าเว็บเพจ Poll Admin จะลักษณะดังภาพด้านล่าง

หน้าเพจ Poll Admin เพิ่มช่อง search

          ใน ทดลองสร้าง Django app ตอนที่ 2  นี้เราได้ศึกษาเกี่ยวกับการจัดการหน้าเพจ admin ของ Django

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