แนะนำจังโก้ admin

4 min readJul 27, 2017

จังโก้ “admin” มีหน้าที่สำหรับจัดการข้อมูลต่างๆในระบบของเรา โดยปกติแล้วถ้าเราทำโปรเจ็กต์โดยใช้เฟรมเวิร์คอื่น นอกจากเราจะทำส่วนของ frontend เพื่อให้ผู้ใช้ได้ใช้งานแล้ว เรายังจะต้องทำส่วนของ admin สำหรับจัดการข้อมูลเหล่านั้นอีกด้วย ซึ่งนับว่าเราต้องเสียพลังไปกับการทำงานใหญ่ๆ ถึงสองงานด้วยกัน แต่ข่าวดีก็คือจังโก้ได้เตรียม admin มาให้เราเรียบร้อยแล้ว เราเพียงแต่เขียนโค้ดเพียงเล็กน้อย เพื่อปรับแต่งให้ตรงความต้องการก็เท่านั้นเอง สำหรับเนื้อหาของบทนี้จะกล่าวถึงวิธีเขียนโค้ดและปรับแต่ง admin เพื่อต่อยอดจากระบบ eexam ของเราครับ

สร้างยูสเซอร์สำหรับล็อกอิน

เริ่มต้นให้เราไปที่โปรเจ็กต์ eexam ของเรา จากนั้นทำการ start เว็บเซิร์ฟเวอร์แล้วเข้าไปที่ยูอาร์แอล http://localhost:5000/admin จะเห็นว่ามีหน้าจอล็อกอินปรากฏขึ้นตามภาพ

$ (vbox) python manage.py runserver

ตอนนี้ยังไม่มียูสเซอร์สำหรับล็อกอินเลย ดังนั้นเราจะมาสร้างยูสเซอร์กันก่อน วิธีการสร้างให้ใช้คำสั่ง python manage.py createsuperuser จากนั้นระบบจะให้เรากรอก username, password และ email เพื่อใช้เป็นยูสเซอร์แอดมินของระบบ สำหรับตัวอย่างนี้ผมขอใช้ยูสเซอร์เป็น "admin" และพาสเวิร์ดเป็น "admin" ละกันนะครับ

$ (vbox) python manage.py createsuperuser
Username (leave blank to use 'macbookpro'): admin
Email address: admin@mail.com
Password:
Password (again):
Superuser created successfully.

จากนั้นให้เราล็อกอินโดยใช้ username และ password ที่เราได้สร้าง ท่านจะพบว่าสามารถเข้าสู่ระบบได้ตามภาพ ท่านสามารถลองเล่น users หรือ group ดูได้ หรือหากต้องการออกจากระบบให้คลิกที่ logout

เริ่มการปรับแต่ง admin

ไฟล์หลักๆ ของการปรับแต่งจะอยู่ที่ myapp/admin.py เริ่มต้นให้เราลองแก้ไข site header และ site title โดยการเขียนโค้ดลงไปใน admin.py ดังต่อไปนี้

from django.contrib import adminadmin.site.site_title = 'e-Exam'
admin.site.site_header = 'e-Exam Administration'

ท่านจะเห็นว่าทั้งหน้าจอได้เปลี่ยนไป เป็นชื่อใหม่ของระบบเราทั้งหมดแล้วดังภาพ

หน้าจอสร้างข้อสอบ

เราจะมาปรับแต่งหน้าจอสำหรับจัดการข้อสอบ (Exam) กันครับ เริ่มต้นที่ไฟล์ myapp/admin.py ให้เราอิมพอร์ต models ของเราเข้ามาก่อน แล้วทำการ register เพื่อให้จังโก้ admin รู้จักกับโมเดลของเราตามตัวอย่างต่อไปนี้

from django.contrib import admin
from .models import Examadmin.site.register(Exam)

สำหรับคำสั่ง from .models import Exam หมายความว่าให้ไปที่ไฟล์ models.py (ถ้าอยู่ใน package เดียวกันกับ admin.py จะเรียกใช้ด้วย "." นำหน้าเรียกว่าการอ้างอิงแบบ relative ครับ) จากนั้นให้อิมพอร์ตคลาส Exam เข้ามาในระบบ จากนั้นทำการ register ให้ระบบแอดมินของจังโก้รู้จักด้วย admin.site.register(...) นั่นเอง แค่นี้ท่านก็สามารถที่จะแสดงรายการ สร้าง แก้ไข และลบข้อสอบได้ดังภาพ

การปรับแต่งหน้าจอ Exam List

ขออณุญาตแก้ไข myapp/models.py ของเราเล็กน้อย โดยการเพิ่ม published เพื่อเป็นการกำหนดว่าเราอณุญาติให้ “เผยแพร่” ข้อสอบนี้ได้หรือไม่?ตามโค้ดด่านล่างนี้

from django.db import modelsclass Exam(models.Model):
	name = models.CharField(max_length=150)
	description = models.TextField(null=True, blank=True)
	published = models.BooleanField(default=False)
	created = models.DateTimeField(auto_now_add=True)
	updated = models.DateTimeField(auto_now=True)	def __unicode__(self):
		return self.name

จากนั้นทำการสร้าง migrations ใหม่อีกครั้ง

$ (vbox) python manage.py makemigrations
$ (vbox) python manage.py migrate

จากนั้นเรามาปรับแต่งหน้าแสดงรายการข้อสอบ (Exam List) ให้แสดงฟิลด์ที่ต้องการ รวมไปถึงให้สามารถค้นหา (Search) และกรอง (Filter) ข้อมูลได้อีกด้วย

from .models import Examclass ExamAdmin(admin.ModelAdmin):
	list_display = ['name', 'description', 'published']admin.site.register(Exam, ExamAdmin)

โค้ดด้านบนนี้เป็นการกำหนดฟิลด์ที่จะมาแสดงในหน้า Exam List เริ่มแรกเราจะต้องสร้างคลาส ExamAdmin โดยสืบทอดมาจาก admin.ModelAdmin ของจังโก้อีกที (มีข้อสังเกตคือจังโก้จะแนะนำให้ตั้งชื่อคลาสตามด้วย Admin เสมอเพื่อให้จำง่าย เช่น ExamAdmin เป็นต้น) จากนั้นให้เราสร้าง array ชื่อ list_display = ['...'] แล้วเราก็มากำหนดชื่อฟิลด์ที่จะให้มันแสดงในหน้าลิสต์ จากนั้นคำคลาสใหม่ของเราไปลงทะเบียนใน admin.site.register() อีกที ก็จะได้หน้าลิสต์ใหม่ตามที่เราต้องการดังภาพ

ต่อไปเราจะมากรองข้อมูลโดยการใช้ list_filter เพื่อดูว่ามีข้อสอบไหนบ้างที่ได้รับการเผยแพร่ จากโค้ดดังต่อไปนี้

class ExamAdmin(admin.ModelAdmin):
	list_display = ['name', 'description', 'published']
	list_filter = ['published']

เมื่อใส่ list_filter[...] เข้าไปจากภาพท่านจะพบว่า ที่ด้านขวาของหน้าจอจะมี filter ให้กรองข้อมูลปรากฏขึ้น ซึ่งเราสามารถเพิ่มฟิลเตอร์ได้เรื่อยๆ ขึ้นอยู่กับ criteria ที่ท่านต้องการ

สุดท้ายของการปรับแต่งหน้ารายการ คือให้สามารถค้นหา (search) ข้อสอบตามคำค้นที่เราต้องการได้ วิธีการทำนั้นง่ายมาก โดยการเพิ่ม search_fields เข้าไป ตามโค้ดตัวอย่างต่อไปนี้

class ExamAdmin(admin.ModelAdmin):
	list_display = ['name', 'description', 'published']
	list_filter = ['published']
	search_fields = ('name', 'description')

อาเรย์ search_fields เป็นการกำหนดให้จังโก้ค้นหาจากฟิลด์ไหนบ้าง ในที่นี้เราบอกให้จังโก้ค้นหาจากฟิลด์ name และ description ของเทเบิ้ล Exam ตามลำดับ โดยจะมีเท็กซ์บ็อกสำหรับค้นหาปรากฏขึ้นตามภาพ

การปรับแต่งหน้าจอ Exam Detail

หัวข้อนี้เราจะมาปรับแต่งหน้าจอ เพิ่ม/แก้ไขข้อสอบ หรือเรียกว่าหน้าจอ detail ก็ได้ครับ เรามาปรับแต่งแบบง่ายๆโดยการแบ่ง section ของหน้าจอออกเป็นสองช่วง ครึ่งช่วงบนคือรายละเอียดข้อสอบ ส่วนครึ่งล่างจะเป็นการกำหนดเพื่อ “เผยแพร่” ข้อสอบ วิธีการทำก็ง่ายมากอีกเหมือนกัน โดยการใช้คำสั่ง fieldsets ดังต่อไปนี้

class ExamAdmin(admin.ModelAdmin):
	list_display = ['name', 'description', 'published']
	list_filter = ['published']
	search_fields = ('name', 'description')
	fieldsets = (
		(None, {'fields': ('name', 'description')}),
		('Option', {'fields': ('published',), 'classes': ('collapse',)}),
	)

คำสั่ง fieldsets เป็นการแบ่งช่วงของฟอร์มออกมาเป็นฟอร์มย่อย เพื่อช่วยให้เราจัดระเบียบฟอร์มให้มีขนาดเล็กและเป็นระเบียบขึ้น โดยมันจะรับข้อมูลเป็นชนิด dictionary ที่ประกอบด้วยชื่อ label แล้วก็ fields ที่จะแสดงผล จากตัวอย่างโปรแกรมจะเห็นว่ามีฟอร์มอยู่สองตัว ฟอร์มครึ่งบนมี label เป็น none หมายความว่าไม่แสดง label และกำหนดให้แสดงข้อมูลในฟิลด์ name กับ description ส่วนฟอร์มครึ่งล่างจะมี label ชื่อ “Option” และแสดงฟิลด์ชื่อ published โดยที่กำหนดให้ซ่อนการแสดงผลไว้โดย default รายละเอียดที่อธิบายจะแสดงในภาพด้านล่าง

การปรับแต่งหน้าจอแบบ Master-Detail

ลักษณะของหน้าจอ master/detail ในระบบ eexam จะประกอบด้วยส่วนที่เป็น master ได้แก่ข้อมูลข้อสอบซึ่งจะมีฟอร์มเดียว และส่วนที่เป็น detail คือส่วนที่เป็นข้อคำถามซึ่งจะมีตั้งแต่หนึ่งข้อขึ้นไป โดยทั้งสองส่วนนี้จะมาอยู่ร่วมกันในหน้าจอเดียว วิธีการสร้างหน้าจอแบบนี้จะใช้คำสั่ง TabularInline ของจังโก้ตามโค้ดตัวอย่างดังต่อไปนี้

from .models import Exam, Quizclass QuizInline(admin.TabularInline):
	model = Quiz
	extra = 5class ExamAdmin(admin.ModelAdmin):
	list_display = ['name', 'description', 'published']
        ...
	inlines = [QuizInline]admin.site.register(Exam, ExamAdmin)

จากโค้ดตัวอย่างจะเห็นว่าเราได้เพิ่มการ import Quiz เข้ามา จากนั้นเราจะมาสร้างคลาสชื่อ QuizInline โดยสืบทอดมาจาก TabularInline ของจังโก้อีกที ภายในคลาสนี้เราได้กำหนดให้ model ชื่อว่า Quiz และ extra=5 (หากเราไม่ใส่ extra ตัวจังโก้จะกำหนดให้เราไว้ที่ 3) หมายความว่าให้จองแถวสำหรับกรอกข้อมูลไว้ที่ 5 แถว จากนั้นที่คลาส ExamAdmin ให้เราเพิ่มคำสั่ง inlines[...] และผูกเข้ากับ QuizInline ของเรานั่นเองตามภาพ

การปรับแต่งหน้าจอ choice

ยังเหลือหน้าจอสุดท้ายที่เราจะมาปรับแต่งกันนั่นก็คือตัวเลือกคำตอบ (choice) นั่นเอง ให้แก้ไขโค้ดนิดหน่อยจาก TabularInline เป็น StackedInline และเขียนโค้ดเพื่อปรับแต่งหน้าจอ ตามที่เราได้เรียนมาดังต่อไปนี้

from .models import Exam, Quiz, Choice
...class ChoiceInline(admin.StackedInline):
	model = Choiceclass QuizAdmin(admin.ModelAdmin):
	inlines = [ChoiceInline]admin.site.register(Exam, ExamAdmin)
admin.site.register(Quiz, QuizAdmin)

สรุปท้ายบท

เป็นไงกันบ้าง พอเข้าใจบ้างไหมครับ สำหรับเนื้อหาของตอนนี้จริงๆ แล้วไม่ยากเลย โดยเริ่มต้นเราก็มาเพิ่ม user ที่เป็น admin ของระบบ เพื่อให้สามารถล็อกอินเข้าไปจัดการข้อมูลต่างๆ ได้ หลังจากนั้นเราก็ปรับแต่ง admin โดยเริ่มจากข้อสอบ (exam) ก่อน ซึ่งเราปรับแต่งประมาณสองหน้าคือหน้า list และหน้า detail จากนั้นก็เริ่มทำ master/detail และเราก็มาปรับแต่งหน้า choice เป็นอันดับสุดท้ายครับ

สำหรับเนื้อหาในตอนถัดไปจะมาพูดถึงส่วนที่เป็น frontend ล้วนๆเลยครับ ซึ่งผู้ใช้ที่ทำข้อสอบจะเห็นตัวข้อสอบ ทำข้อสอบ และตรวจคำตอบได้จากหน้านี้เลย จากนั้นจะพูดถึงการนำโปรเจ็กต์ของเราไปติดตั้งใน cloud hosting เพื่อใช้งานจริงบน production กันครับ ผมขอจบเนื้อหาของตอนที่ 3 ไว้แก่เพียงเท่านี้ .ขอบคุณครับ.