Django Tips ที่ควรรู้ สำหรับสาวก Python Web Development

วันนี้เราจะมาเรียนรู้ แนะนำ และสอนเทคนิค DjangoTips ต่าง ๆ ว่ามีอะไรบ้างที่น่าสนใจ เพื่อให้สาวก Django และเหล่า Python Web Developer ทั้งหลายได้นำไปประยุกต์ใช้งานและศึกษาเพิ่มเติมได้ตามต้องการกันนะครับโดยหัวข้อบางส่วนเช่น security, seo, django admin, url, slug, built-in tags and templates, draft post, 404 error, shell, settings, debug โดยหัวข้อเหล่านี้จะมีทั้งการสอนประยุกต์ใช้งานและก็มีไกด์ไลน์ (เป็นส่วนใหญ่) เอาเป็นว่าในบทความนี้จะทำให้ทุกท่านที่ศึกษา Django Framework ได้เข้าใจภาพรวมกันได้ดียิ่งขึ้นครับ

ปล. Tips หรือเทคนิคอื่น ๆ จะเขียนเพิ่มเติมในภายหลัง แนะนำกันเข้ามาได้ครับ แต่แค่ในบทความนี้ก็น่าจะเยอะและเพียงพอในเบื้องต้นแล้ว

จุดประสงค์

• เข้าใจและสามารถอธิบายได้ว่า ทำไมถึงต้องมีการซ่อนหน้า Django Admin เพื่อป้องกันบุคคลภายนอกเข้าถึง
• เข้าใจและสามารถอธิบาย ทำไมต้องใช้ Slug และ Slug นั้นมีความสำคัญต่อการทำให้เว็บไซต์ที่พัฒนาด้วย Django เป็นมิตรต่อ SEO (SEO Friendly) ทำให้ Google จัดอันดับหน้าเว็บของเราได้ในอันดับที่ดีและสูงขึ้นเพราะ URL มีคีย์เวิร์ดนั่นเอง
• เข้าใจแนวทางในการสร้าง Draft ให้กับบทความ ทำให้เราสามารถที่จะเขียนฉบับร่าง (Draft) ในเว็บของเราได้
• เข้าใจและสามารถประยุกต์ Django JET ซึ่งเป็นหน้าแอดมินที่สวยงามเข้ามาใช้ใน Django Project ของเราได้
• เข้าใจและสามารถอธิบายได้ว่า ทำไมถึงต้องมีการ Customize หน้า 404 Page Not Found
• เข้าใจและสามารถอธิบายได้ว่า ทำไมถึงต้องมีการแยก Configuration File ของ Django ออกเป็นโหมด Production และ Development
• เข้าใจและสามารถอธิบายได้ว่าทำไมถึงต้องมีการติดตั้งใช้งาน Django Debug Toolbar ซึ่งจะทำให้เรา Debug และ Inspect การ Query ข้อมูลที่เกิดขึ้นระหว่างช่วง Development ได้
• เข้าใจและสามารถอธิบายได้ว่า ทำไมต้องมีการนำ WYSIWYG มาประยุกต์ใช้กับเว็บไซต์ของเรา เพื่อให้สามารถแทรกฟอร์แมต ลูกเล่น มีเดียต่าง ๆ ลงไปในโพสต์ของเราได้
• เข้าใจและอธิบายได้ว่า ทำไมต้องมีการใช้งาน Django Shell ในการทดสอบข้อมูลในฐานข้อมูล (Database) 
• เข้าใจและอธิบายได้ว่าช่วงไหนควรเปิดโหมด debug เป็น True หรือ False 
• เข้าใจและสามารถใช้งานการลูปหมายเลขโดยเรียงอันดับให้อัตโนมัติในตารางในหน้าเว็บเพจได้
  
  

#1. ซ่อน Django Admin URL

ปกติตัว default url ของหน้า Django Admin จะเป็น url ดังนี้

http://example.com/admin ซึ่ง example ก็คือชื่อโดเมนเนมของเรานั่นเอง ถ้าเรากำลังพัฒนาเว็บของเราบน localhost ก็จะเป็น

http://127.0.0.1:8000/admin

ซึ่งถ้าใน Localhost ก็คงไม่ได้ซีเรียสอะไร แต่ถ้าอยู่บนโปรดักชัน เว็บของเราต้องให้คนได้ใช้งาน ถ้าใคร ๆ ก็สามารถที่จะไปที่ url หน้า Admin เราได้ นึกถึง worst case scenario ที่จะเกิดขึ้นลองดู ถ้าเรากำหนด username และ password ของเราไว้ดังนี้

Username: admin และ Password: 12345678 และถ้าคนนั้นกรอกถูกจะเกิดอะไรขึ้น

จากภาพด้านล่างคือหน้าเว็บที่ผมได้ค้นหาและทดสอบว่าได้มีการกำหนดหน้า Django Admin เป็น /admin (Default) หรือไม่ ผลที่เห็นคือ กำหนดเป็น Default ทำให้เข้าไปใน URL เจอหน้านี้ได้

ตัวอย่างหน้าเว็บ Django ที่ตั้งค่า URL ในส่วนของหน้า Admin เป็น Default

ทดสอบหน้าเว็บคนอื่นเสร็จแล้ว ลองมาดูหน้าเว็บของ STACKPYTHON ดูบ้างครับว่าจะแสดงผลเป็นอย่างไร โดยตามภาพด้านล่าง เราได้มีการ Customize หน้า 404 Page Not Found และมีการกำหนดตัว URL ของ Django Admin ไว้ใน URL อื่นที่ไม่มีใครรับรู้ได้ นอกจากทีมงาน STACKPYTHON ของเรา

ตัวอย่างหน้าเว็บ Django ที่ตั้งค่า URL ในส่วนของหน้า Admin ให้คนคาดเดาไม่ได้หรือเดาได้ยาก

ไกด์ไลน์

• เปลี่ยน url เช่น จากปกติค่า default จะเป็น /admin อาจจะเปลี่ยนเป็น /secret-admin-url/-hard-to-guess-/admin เป็นต้น
• คอนฟิกใน Nginx หรือ Web Server ตัวอื่น ๆ เช่น Apache โดยฟิกหรือจำกัดการเข้าถึง URL นี้จาก Public IPs ให้สามารถเข้าถึงหน้า admin ได้เฉพาะ IP ที่กำหนด

#2. ใช้ Django Slug Field สำหรับ SEO

การดีไซน์ URL ที่ดีนั้นจะช่วยให้ Search Engine อย่าง Google ทำการ Rank หรือจัดอันดับโพสต์ของเราให้มีอันดับที่สูงและดียิ่งขึ้น

เปรียบเทียบ 2 ภาพนี้

URL ที่มีการออกแบบที่ไม่เอื้อต่อ SEO

URL ที่มีการออกแบบที่ดี SEO

ลองค้นหาตามภาพด้านบน จะเห็นว่าบทความของเราที่มีการวางคีย์เวิร์ดและดีไซน์ URL ที่ดี จะทำให้ติดหน้าแรกได้ง่ายยิ่งขึ้น

ซึ่งข้อดีหลัก ๆ ของการใช้ Slug ใน URL คือ

• ช่วยให้ Google Bot หรือ Web Clawler ของ Google นั้นพบหน้าบทความหรือเว็บของเราได้ง่ายและไวยิ่งขึ้น ซึ่งแน่นอนครับว่า มันส่งผลดีต่อ SEO เป็นอย่างมากในส่วนนี้
• ช่วยให้ผู้ใช้งานหรือผู้อ่านที่ทำการค้นหาบทความ สามารถกวาดสายตาและสามารถเดาได้ว่าบทความในลิ้งค์นี้เกี่ยวกับอะไรบ้าง ทำให้ผู้ใช้งานตัดสินใจคลิ๊กเข้าไปอ่านบทความของเราได้

ไกด์ไลน์

เพิ่มคอลัมน์ในตารางหรือฟีลด์ขึ้นมาอีก 1 คอลัมน์ในตาราง Blog โดยตั้งชื่อว่า slug และชนิดของฟีลด์หรือข้อมูล (Field Type) จะเป็นรูปแบบของ Slug โดยอ่านและศึกษาเพิ่มเติมได้ในบทความแนะนำด้านล่าง

บทความแนะนำ: DjangoSlug Tutorial จาก William Vincent

#3. สร้าง Draft (ฉบับร่าง) ฟีเจอร์สำหรับบทความ

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

กำหนดฟีเจอร์ให้ร่างบทความได้

สถานะ ระหว่าง Draft และ Published

ไกด์ไลน์

กำหนด status คอลัมน์ขึ้นมาใน class (Blog) ใน models.py และกำหนดตัวแปร STATUS_CHOICES ขึ้นมาเก็บข้อมูลเป็นแบบ List ซึ่งข้างในจะเป็น Tuple อีกที โดยเก็บ status คือ Draft และ Published จากนั้นส่งเข้ามาใน Keyword Argument ในส่วนของ option ของ CharField(status) โดยดูเพิ่มเติมได้ในบทความด้านล่าง

บทความแนะนำ: Draftand Published Status จาก Django Official Website

#4. ใช้ Django JET เปลี่ยน Django Admin ให้ดูคูล

ถ้าท่านใดที่ใช้หน้า Django Admin แล้วรู้สึกว่ามันดธรรมดาหรือเชยไปแล้ว อยากลองอะไรใหม่ ๆ ดูบ้าง มีหน้า Admin Template อื่น ๆ ที่แจ่ม ๆ ให้สามารถใช้งานแทนได้หรือไม่ คำตอบคือ สิ่งที่คุณกำลังมองหาคือ ตัวนี้เลยครับ “Django JET” ซึ่งถ้าหากท่านใดที่เคยใช้งานดูแล้วจะพบว่าตัว UX (User Experience) นั้นจะเหมือนเดิมกับหน้า Django Admin ปกติ แต่ความแตกต่างคือ UI ที่ดูดีมีราคา ดูสวยงามและแปลกใหม่กว่าครับ แถมยังมีตัว Google Analytics พ่วงเข้ามาด้วยอีกต่างหาก (แน่นอนว่าต้องคอนฟิกและติดตั้งเพิ่มเติมในส่วน Google Analytics) แต่ถ้าในส่วนของ Django JET นั้น ติดตั้งและคอนฟิกค่อนข้างง่ายเพียงไม่กี่สเต็ปครับ ก็จะได้หน้าแอดมินที่ดูดี มีราคาแพงได้ไม่ยาก

หน้า Django JET Demo

ไกด์ไลน์

บทความแนะนำ: Document การติดตั้งและใช้งาน Django JET

#5. Customize หน้า 404 Page Not Found

การแสดงผลหน้า 404 page not found นั้น เราสามารถที่จะปรับได้ตามรูปแบบที่เราต้องการ แทนที่จะให้เว็บแสดงผลหน้า 404 แบบน่าเบื่อและทื่อ ๆ จะช่วยสร้าง User Experience ที่ดีแก่ User ได้ครับโดยในตัวอย่างภาพด้านล่าง ผมได้สร้างหน้า 404 page not found ขึ้นมาแสดงผล ซึ่งแน่นอนว่านอกจากที่จะแสดงผลหน้า page not found แล้ว ยังได้มีการแสดงผลข้อความอื่น ๆ ที่จะสามารถนำ User ไปหน้าอื่นได้ เช่นหน้า homepage และ หน้าคอร์สออนไลน์ของเรา ได้ดังภาพด้านล่าง ดังนั้นไม่ว่า User จะพิมพ์ URL อะไรก็ตามในหน้าเว็บของเรา ที่ไม่มี URL นั้นอยู่จริง หน้านี้จะทำการแสดงผลขึ้นมาทันที
https://stackpython.co/abc

หน้า Page Not Found ที่ได้ทำการ Customize

โดยผมได้ทำการทดสอบหาหน้าเว็บไซต์จริงที่พัฒนาด้วย Django และก็ได้มาเจอกับเว็บนี้ (ไม่ขอเปิดเผยชื่อเว็บ) และทดสอบพิมพ์ URL ที่น่าจะไม่มีอยู่จริง

หน้าเว็บไซต์ที่พัฒนาโดย Django ที่ไม่ได้ทำการ Customize หน้า 404 page not found

ไกด์ไลน์

บทความแนะนำ:  WritingViews(Django) เกี่ยวกับการ Error Views ต่าง ๆ ไม่ว่าจะเป็นการรีเทิร์น 403, 404, 500 เป็นต้น

#6. แยกคอนฟิกไฟล์ settings.py ออกเป็นหลายโหมด

การแยกคอนฟิกไฟล์จะช่วยให้การ Develop สะดวกยิ่งขึ้น โดยไม่ต้องแก้ไขไฟล์ settings.py กลับไปมาระหว่างการขึ้น Production และ Development โหมดโดยในส่วนของ settings.py ที่เป็นไฟล์ default เราจะทำให้กลายเป็น packageใน package (settings) นี้นั้นก็จะประกอบไปด้วยไฟล์ 3 ไฟล์ คือ

Django Configuration Files (Settings) 

1. base.py
2. dev.py
3. production.py

โดยในส่วนของ base.py นั้นก็จะเป็นไฟล์ settings.py ปกติที่มากับ Django เพียงแต่เราจะต้องทำการ Override โดยทำการอิมพอร์ตแบบ * คืออิมพอร์ตเข้ามาทั้งหมด

from .base import *

จากนั้นในไฟล์ dev.py และ production.py ก็ทำการ Override ค่าเดิม ใส่ค่าคอนฟิกต่าง ๆ เข้าไปได้ตามต้องการ 
ซึ่งทั้ง 3 ไฟล์ก็จะอยู่ในระดับดังนี้ในโปรเจคท์
myproject\settings\base.py
myproject\settings\dev.py
myproject\settings\production.py

ไกด์ไลน์

บทความแนะนำ:  Workingwith multiple Django settings modules

#7. ใช้ Django Debug Toolbar

คงจะมีประโยชน์ไม่น้อยถ้าหากเราสามารถดูการ Query ต่าง ๆ ว่าใช้เวลาไปเท่าไรในแต่ละตาราง มีการ Query จากตารางไหนบ้าง มีการ Request จำนวนเท่าไร และส่วนอื่น ๆ นอกจากนี้เช่น Caching, ฯลฯ (Django Developer ที่มีประสบการณ์เยอะ ๆ ตัว Django Debug Toolbar คือเครื่องมือที่เรียกได้ว่าธรรมดาและต้องมีติดตัว)

หน้าตา Django Debug Toolbar

ไกด์ไลน์

บทความแนะนำ:  สอนการติดตั้งใช้งาน Django Debug Toolbar จาก STACKPYTHON โดยติดตั้งเพียงไม่กี่สเต็ป

#8. ใช้ WYSIWYG Editor สำหรับเขียนบล็อก

สำหรับท่านใดที่กำลังพัฒนา Django Website สำหรับเขียนบล็อก จะเห็นได้ว่าใน TextField ใน models.py ของ Django นั้นเราจะสามารถเขียนบทความหรือโพสต์ยาว ๆ ได้ แต่จะพบปัญหาที่ชัดเจนเลยคือ เราจะไม่สามารถทำอะไรได้เลยนอกจากเขียนเป็นตัวข้อความปกติ เช่นถ้าอยากแทรกรูปภาพ, แทรกลิ้งค์ YouTube, กำหนด Title เป็นตัวหนา, กำหนดสีข้อความ ขนาดข้อความ, ฯลฯ ต่าง ๆ เหล่านั้น จะไม่สามารถทำได้ ดังนั้นพระเอกที่จะเข้ามาช่วยให้สิ่งเหล่านี้เป็นจริงและเป็นไปได้คือใช้ WYSIWYG (What You See Is What You Get) ซึ่งก็มีอยู่หลายตัวที่สามารถนำมาใช้กับ Django ได้ ไม่ว่าจะเป็น TinyMCE, CKEditor, DjangoSummernote เป็นต้น

หน้า Post ปกติที่ไม่ได้มีการนำ WYSIWYG มาใช้ 

                     หน้า Post ที่นำ WYSIWYG มาประยุกต์ใช้ โดยในภาพเป็น django-summernote

ไกด์ไลน์ 

บทความแนะนำ: แนะนำ GitHub และมีสอนติดตั้ง WYSIWYG ต่าง ๆ ของ Django 

django-summernote GitHub

django-ckeditor GitHub

django-tinymce GitHub

#9. ใช้ Django Shell ทดสอบ เพิ่ม ลบ เรียกดูข้อมูล ใน Database ได้รวดเร็ว

ในกรณีที่เรามีข้อมูลอยู่ใน Database ของเราแล้วนั้น แต่อยากลองทดสอบดึงข้อมูลมาแสดงผล แต่ยังไม่ได้เขียนโค้ดในไฟล์ HTML สักไฟล์ ดังนั้นถ้าอยากทดสอบแบบรวดเร็วในการดึงข้อมูลในรูปแบบต่าง ๆ นั้น ไม่จำเป็นต้องสร้างไฟล์ HTML เสร็จแล้วดึงไปแสดงผลหน้าเว็บ เราสามารถที่จะทดสอบดึงข้อมูลและแสดงผลได้ทันทีผ่าน Django Shell ซึ่งจะเป็นการแสดงผลใน Terminal นั่นเอง ทำให้สามารถทดสอบเพิ่มข้อมูลและดึงข้อมูลมาแสดงผลได้อย่างรวดเร็ว
โดยคำสั่งง่าย ๆ คือ

python manage.py shell

ใช้งาน Django Shell ใน Visual Studio Code

ไกด์ไลน์

แนะนำคลิปการใช้งาน Django Shell และใช้งาน QuerySet APIs ต่าง ๆ ของ Django

บทความแนะนำ:  DjangoQuerySet (Youtube STACKPYTHON)

#10. เปิดโหมด debug=False สำหรับ Production

ถ้าโปรเจคท์ของเราขึ้นโปรดักชั่นอย่าลืมปิดการตั้งค่าดีบั๊กจาก True (ใช้ช่วง Development) ให้เป็น False (ใช้สำหรับ Production) ไม่เช่นนั้นข้อมูลที่มีความ Sensitive และเกี่ยวข้องกับการตั้งค่าใน settings.py และส่วนต่าง ๆ ของโปรเจคท์เราอาจถูกเปิดเผยสู่ภายนอกได้ ก็คือมันมี Trace back ที่คนที่เห็นอาจจะเข้าถึงข้อมูลสำคัญของโปรเจคท์เรา แน่นอนครับว่ามันจะทำให้เว็บไซต์เรามีความเสี่ยงสูงโดยใช่เหตุ

จากภาพด้านล่างผมได้ทำการพิมพ์ URL ที่ไม่มีอยู่จริง โดยอันนี้ไม่ได้ทดสอบในหน้าเว็บจริง (จริง ๆ มีหน้าเว็บของคนที่เปิดโหมด debug=True อยู่ แต่ไม่แคปมา เพราะจะทำให้คนอื่นรู้ URLs และทำให้คนที่มาอ่านอาจรู้ได้ว่าเป็นเว็บไหน) เอาเป็นว่า ถ้าไม่ได้เปิดโหมด debug=False เวลาที่เรา Deploy เว็บบนโปรดักชั่นแล้ว หน้าเว็บก็จะแสดงผลแบบนี้เหมือนกัน

URL routes ต่าง ๆ จะแสดงผลบนหน้าเว็บ ทำให้คนที่เข้ามาหน้าเว็บรู้ได้ว่า เว็บของเรามี URLs ไหนบ้าง

ไกด์ไลน์

ปิดการใช้งาน debug=False ใน settings.py 

บทความแนะนำ: ในหัวข้อนี้ไม่มีบทความแนะนำ เอาเป็นแนะนำ Django Course ของทาง STACKPYTHON เราแทนแล้วกันครับ

#11. ใช้ {{ forloop.counter }} แสดงผลหมายเลขลำดับอัตโนมัติในตาราง

ปกติตารางที่เราทำการก็อปมาจาก Bootstrap นั้น แน่นอนว่ามันจะไม่ทำการ loop ลำดับเลขให้เราอัตโนมัติ เราต้องทำการ loop เอง โดยหลายคนอาจจะคิดว่าตัวเลขข้างหน้า 1, 2, 3 นั้นมันคือ ID ใน Database ของเราหรือไม่ คำตอบคือ มันไม่ใช่เลยครับ ถ้าเราใช้ ID ในลำดับนั้นผิดแน่นอน ในกรณีที่เราเพิ่งสร้าง Django โปรเจคท์ใหม่ ๆ  เช่น  เราอาจจะมีข้อมูลในตารางอยู่ 3 rows (records) ถ้าเราลอง Query เอา ID ออกมาแสดงเป็นลำดับก็อาจจะเรียงลงมา 1, 2, 3 แบบนั้นดูเหมือนไม่มีปัญหาและยังดูถูกต้องหลอกตาเราอยู่ แต่ถ้าข้อมูลเยอะขึ้น แน่นอนว่าในบางกรณี ID มันก็จะไม่ได้ลำดับลงมาแล้ว อีกอย่างสมมติว่าเรามีการลบข้อมูลในแถวที่ 2 ตัว ID 2 ก็จะถูกลบไปด้วยทันที ดังนั้นการดึงข้อมูลในกรณีนี้ไม่ถูกต้องและ make sense ครับ
แค่คิดก็เริ่มจะปวดหัวแล้ว แต่ดีใจด้วยครับ ไม่ต้องคิดมาก (Don’t be serious) Django มีคำสั่งสำเร็จรูปให้เรียบร้อยพร้อมใช้งานได้อย่างสบาย ๆ เป็น built-in template tag คือ {{ forloop.counter }} คำสั่งเดียวจบ !! 

เพิ่ม forloop.counter เข้าไปในแท็ก th

ไกด์ไลน์

ใช้ {{ forloop.counter }} ซึ่งเป็น tag สำเร็จรูปในการวนซ้ำลำดับให้อัตโนมัติ

บทความแนะนำ:  Built-in template tags and filters

สำหรับบทความ Django Tips ที่ควรรู้ ก็ขอจบลงเพียงเท่านี้ มี Tips แนะนำอื่น ๆ ที่น่าสนใจและควรรู้ก็แนะนำเข้ามาได้เลยนะครับ จะได้ช่วยเพิ่มเข้ามาในบทความ หรืออยากติชม แสดงความคิดเห็นตรงส่วนไหนก็โปรดจงกดไลก์และคอมเมนต์ได้ที่คอมเมนต์ด้านล่างได้เลยนะครับ แค่นี้ก็เป็นการซัพพอร์ตพวกเราแล้วครับ :)

Follow us on

Medium: STACKPYTHON

Youtube: STACKPYTHON

Facebook: STACKPYTHON