Django Forms ผู้ช่วยที่ทำให้การสร้าง Forms เป็นเรื่องง่าย Ep. 3 Form Decoration
ปรับแต่ง form ให้สวยขึ้นกว่าเดิม
Django Forms: Form Decoration
หลายคนอาจสงสัยถ้าเรียกตัวแปรแบบนี้เวลาจะยัด style หรือเพิ่ม class มันต้องทำอย่างไรซึ่งวันนี้ผมจะสอนเรื่องของการตกแต่ง form ให้ดูสวยงามและนำเอา bootstrap มาใช้งานเพื่อความรวดเร็วในการทำเว็บมากยิ่งขึ้นมาเริ่มกันเลยครับ
Set up Bootstrap
ในส่วนของการนำ Bootstrap มาใช้เราจะติดตั้งแบบ link โดยนำ link ไปใส่ใน <head> Tag ในไฟล์ order.html
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">เราจะใช้แค่ css เพราะเฉพาะนั้นเราก็ติดตั้งแค่ตัวเดี่ยวในส่วนของตัว js กับ jquery ในบทความนี้ยังไม่ใช้แค่นี้เราก็สามารถใช้งาน bootstrap ได้แล้วครับมันทดลองใช้กับปุ่มสั่งน้ำแข็งใสกันดีกว่าครับโดยเราจะเพิ่ม class='btn btn-success' เข้าไปใน input tag แบบนี้
<input type="submit" class="btn btn-success" value="สั่งน้ำแข็งใส"/>run server แล้วไปที่ http://127.0.0.1:8000/order จะเห็นว่าปุ่มมีการเปลี่ยนแปลงแสดงว่าการเรียกใช้ bootstrap ไม่มีปัญหาสามารถใช้ได้ปกติ
Form decoration
เรามาทำให้ Form ของเราดูมีระเบียบมากยิ่งขึ้นหรือสวยมากขึ้นโดยนำเอา class จาก bootstrap มาใช้งานกันดีกว่าซึ่งเราสามารถเพิ่ม class ลงไปใน form ที่เราสร้างขึ้นได้ 2 วิธี 1.add in forms 2.add in template
1. Add in Forms
วิธีนี้เป็นวิธีการเพิ่ม class หรือ styles ผ่านทางไฟล์ forms.py ซึ่งวิธีนี้สามารถทำได้เลยไม่ต้องเพิ่มอะไรโดยเราจะไปแก้โค้ดในส่วนของ OrderForm เพิ่ม widgets เข้าไปใน Meta class
จะเห็นว่าได้มีการเพิ่ม labels ของ form และ widgets ตัวนี้เป็นตัวที่เพิ่ม class ลงไปใน tag ที่อยู่ใน html ได้ด้านบนผมได้เพิ่ม form-control class ลงใน field แต่ลง field และนอกจากเพิ่ม class เราสามารถเพิ่ม style ผ่านการเขียนแบบนี้อีกด้วยเพิ่มแค่นี้ก็เสร็จแล้วครับเรามาทดลองรันกันดีกว่าครับ (ผมขอเปลี่ยน background-color ของเว็บนิดหน่อยนะครับเพื่อให้ดูง่ายขึ้น)
เย่ Form ดูดีขึ้นนิดนึงแล้วเรอาจะต้องจัดหน้าเพิ่มนิดหน่อยโดยครอบ form ด้วย container เปลี่ยนโค้ดใน order.html กันนิดหน่อยดีกว่าครับ
จะเห็นว่าผมได้เพิ่มโค้ดบางส่วนเพื่อทำให้ form ของเราดูง่ายยิ่งขึ้นมาทดลองรันดูอีกครั้งครับว่าเป็นยังไงบ้าง
2. Add in Template
อีกหนึ่งตัวเลือกที่ช่วยเราในเรื่องของการแต่ง field ใน form ให้สวยยิ่งขึ้นโดยเราต้อง install packet เพิ่ม
pip install django-widget-tweaksและต้องไปเพิ่ม INSTALLED_APPS ใน settings.py ด้วย
แค่นี้เราก็สามารถใช้เจ้าตัว widget_tweaks ได้แล้วซึ่งทำให้เราสามารถเพิ่ม widget ผ่านทาง template โดยเพิ่มโค้ดตามนี้
วิธีการนี้จะเห็นได้ว่ามันค่อนข้างรวดเร็วกว่าเพิ่มโค้ดน้อยกว่าแต่มีการติดตั้ง packet เพิ่ม 1 ตัวซึ่งก็ไม่ได้มากแต่ทำให้เราพัฒนาโปรแกรมได้รวดเร็วยิ่งขึ้น แต่ก่อนเราจะใช้อย่าลืม load มันมาใช้ก่อนนะครับไม่งั้นใช้ไม่ได้นะ(วิธีเรียก widget_tweaks มาใช้ในบรรทัดที่ 1) โดยเราจะเรียก field ออกมาผ่านคำสั่ง render_field ทดลองรันก็จะได้คล้ายกับวิธีที่ 1
จบแล้วครับในส่วน ep.3 หวังว่า 3 บทความนี้จะเป็นประโยชน์แก่ผู้ที่เริ่มต้นศึกษา django นะครับขอบคุณมากครับที่ติดตามอ่าน ขอให้สนุกกับการศึกษานะครับ ❤ ❤
