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

วิธีนี้เป็นวิธีการเพิ่ม 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 ของเราดูง่ายยิ่งขึ้นมาทดลองรันดูอีกครั้งครับว่าเป็นยังไงบ้าง

อีกหนึ่งตัวเลือกที่ช่วยเราในเรื่องของการแต่ง 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 นะครับขอบคุณมากครับที่ติดตามอ่าน ขอให้สนุกกับการศึกษานะครับ ❤ ❤

Full Stack Python Developers

Full Stack Python Developers