เรียนรู้วิธีใช้ Django Forms ผู้ช่วยที่ทำให้การสร้าง Forms เป็นเรื่องง่าย Ep. 1 เริ่มเขียน Django Forms ครั้งแรก

Django Form ง่ายกว่าที่คิด

Photo by: https://www.freepik.com/free-vector/registration-form-template-with-flat-design_3301477.htm#page=1&query=forms&position=1

Django Form

การสร้าง form ใน html นั้นในบางครั้งอาจมีความสับสนในการไล่ดู code ย้อนหลังเพราะมี fields เป็นจำนวนมากและถ้าจะต้อง validate ต้องขียน javascript เพิ่มเติมเพื่อทำการ validate ข้อมูลที่อยู่ใน form ซึ่งในตัว Django form นั้นจะช่วยเราทั้งการเขียนให้ง่ายขึ้นอ่านสะดวกขึ้นแล้วยังสามารถ validate ข้อมูลได้อีกด้วยบทความนี้ผมจะพาไปสร้าง form การสั่งน้ำแข็งใสกันเริ่มกันเลยดีกว่า ❤❤❤

Create a new project

สร้าง project ใหม่ขึ้นมาโดยใช้คำสั่ง (set virtual environment)

django-admin startproject myform

สร้าง app ใหม่ใน project myform ของเรา ***ต้องเข้าไปใน folder ที่เป็น project ของเราก่อนแล้วค่อยสร้าง app ให้ app อยู่ภายใต้ folder myform

cd myform
django-admin startapp order

เมื่อสร้าง app ทุกครั้งอย่าลืมเพิ่ม app เข้าไปใน INSTALLED_APPS ที่อยู่ในไฟล์ settings.py

เพิ่ม order app

Create Templates

สร้าง templates folder ขึ้นมาภายใต้ order folder โดยเราจะสร้าง file ชื่อว่า home.html, order.html ดังภาพ (templates ต้องเป็นตัวเล็กทั้งหมดแล้วมี s ด้วยส่วน folder ที่อยู่ข้างในนั้นจะเป็น folder ที่ตั้งตามชื่อ app ในส่วนของตัวอย่าง app ชื่อ order)

create templates in order app

เพิ่มโค้ดเล็กน้อยใน home.html และ order.html เพื่อทดลองการแสดงผล

เพื่อทำให้ templates แสดงผลเราต้องมีการเพิ่มโค้ดในส่วนของ views.py ที่อยู่ใน folder order สร้าง function ที่ทำการ render หน้า templates ที่เราสร้างขึ้นมาโดยจะเรียกไฟล์จาก folder templates

เพิ่ม views เสร็จเรียบร้อยถัดมาต้องมีการเพิ่ม url เชื่อมไปยังตัว views ที่เราสร้างขึ้นเพื่อทำให้ server หา views ที่เราสร้างเจอให้เราไปที่ไฟล์ urls.py ใน folder หลักของเราในที่นี้ผมสร้างเป็น myform

โอเคครับตอนนี้เราเชื่อมหน้าเรียบร้อยแล้วทดลองรันผลลัพธ์กันดีกว่าครับ

python manage.py runserver

หน้า Home จะแสดงผลตามนี้

Create Form class

ลุยกันต่อเลยดีกว่าสร้าง forms.py ใน order folder จานั้นก็เริ่มสร้าง form แรกขึ้นมาเพื่อที่มารับ order น้ำแข็งใสจากลูกค้า

เมื่อเราเพิ่ม code ลงใน forms.py ตามด้านบนนี้เสร็จแล้วเราจำเป็นต้องไปเรียกใช้ forms ใน views.py เพื่อทำให้ form ที่เราสร้างนั้นแสดงผลออกมาบนเว็บของเรา

เราจะเห็นว่าเราส่ง form เข้าไปยัง order ที่มีชื่อว่า ‘orderform’ แต่เรายังไม่ได้ไปเพิ่ม form ใน order.html เลยทำให้ตอนนี้ form นั้นยังไม่แสดงผลซึ่งเราต้องเรียก orderform ที่ถูกส่งมาไปให้ html แสดงผลโดยเราจะไปที่ order.html แล้วเรียก form ที่ส่งผ่าน view มาใช้ในตัวไฟล์ html

เมื่อ form เรามีการส่งข้อมูลแบบ Post ใน django จำเป็นต้องมี {% csrf_token %} ด้วยเสมอถ้าไม่มีก็ไม่สามารถส่งข้อมูลแบบ Post ได้เพราะฉะนั้นอย่าลืมนะครับแต่ถ้าเราแค่ Get ข้อมูลก็ไม่ต้องใส่ครับ

ในส่วนโค้ดที่เราเพิ่มมาก็เป็นการเรียกใช้ตัวแปลที่ชื่อ orderform ที่ถูกส่งมาเพื่อแสดงผลเป็น form ที่เราได้สร้างไว้ มาทดลอง run เพื่อดูผลลัพธ์กันดีกว่าครับ

python manage.py runserver

แล้วเข้าไปที่ http://127.0.0.1:8000/order หน้าเว็บก็แสดงผลตามนี้

แค่นี้เราก็สร้าง form แรกของเราได้แล้วเห็นไหมครับขั้นตอนไม่ยากเลยแล้วการอ่าน code ต่าง ๆ ง่ายอีกด้วยและยังสามารถกำหนด field ข้อความแต่ละอันว่าต้องการให้เป็นแบบไหนในที่นี้มีอยู่สอง fields คือ CharField, ChoiceField ซึ่งยังมี fields ให้เลือกใช้อยู่อีกเยอะสามารถศึกษาเพิ่มเติมได้นะครับเรื่อง field

ในส่วนของ Ep 1 จบลงแล้วขอขอบคุณมากครับที่อ่านบทความของผมจนจบซึ่งในส่วนของ Ep 2 เราจะพูดเรื่อง Model forms จะง่ายแค่ไหนถ้าเราเพียงแค่สร้าง Model ขึ้นมาแล้วสามารถเปลี่ยนให้มันเป็น forms ติดตามได้ใน Ep 2 ฝากกด clap และกดติดตามเพื่อเป็นกำลังใจให้กันด้วยนะครับ