Assuming you are implementing your django blog post with search form(Bootstrap) or any HTML forms, but do not know how make it functional. This post is created for you.

Prerequisites

YOU SHOULD

• Get familiar with basic Django, and its structures
• Get familiar with Bootstrap, and basic frontend programming languages , HTML, CSS.

How does search work ?(Brief)

We type any word e.g. “django” to our search form from a navbar section, then a client(Web browser) sends request to a server, a server makes query to a database. Based on a query, if found, response a post we previously made query to show on a web page

…

หลังจากทั้ง 2 EPs ที่ผ่านมาได้ทำระบบ Login และทำความเข้าใจกระบวนการต่าง ๆ ไปพอสมควร จนเกือบจะสมบูรณ์กันแล้วครับ แต่จะยังคงเหลือระบบอีกบางส่วนครับ แต่ก็เหลือไม่เยอะแล้ว คือเหลือ Logout และการทำ Message Flashing ซึ่งหลายท่านอาจจะยังงง ๆ อยู่ว่า Message Flashing มันคืออะไร ใน Ep นี้มีคำตอบครับ

จุดประสงค์

• เข้าใจและสามารถสร้างฟังก์ชันเพื่อทำการ Logout ออกจากระบบได้
• เข้าใจและสามารถใช้งานการทำ Message Flashing ซึ่งเป็นฟีเจอร์ที่จะช่วยให้ฟีดแบ็คแก่ผู้ใช้ ซึ่งจะช่วยสร้างประสบการณ์การใช้งานของผู้ใช้ (User Experience) ที่ดียิ่งขึ้น
• ประยุกต์ใช้งาน Bootstrap Alert Cards และสามารถเลือกแสดงผล Message Flashing ให้แจ้งเตือนตามแต่ละประเภทได้ เช่นถ้ามีการลบข้อมูลหรือหรือล็อกอินไม่ถูกต้องให้แจ้งเตือนเป็นการ์ดสีแดง(danger) ถ้ามีการสร้างโพสต์ใหม่หรือล็อกอินสำเร็จให้แจ้งเตือนด้วยการ์ดสีเขียว(success) เป็นต้น

หลังจากใน Ep.1 และ Ep.2 ได้ทำการล็อกอินไปเรียบร้อย พร้อมทั้งเรียนรู้โพรเซสทีสำคัญและเกี่ยวข้องทุกส่วนแล้ว ในบทความนี้ก็จะเป็นบทความสุดท้ายในซีรีย์นี้กันแล้วครับ

Logout

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

สำหรับใน Ep.2 นี้จะเป็นการเขียนฟังก์ชัน login เพื่อรับค่าจากฟอร์มที่เราเขียนไว้ในฝั่ง Frontend กันครับ และทำการเช็ค password โดยใช้ check_password_hash รวมไปถึงการใช้ UserMixin คลาสเข้ามาช่วยเพื่อสืบทอดเมธอดต่าง ๆ ที่จำเป็นในระบบ Login-Logout ในคลาส User ของเรา การใช้งาน flask_wtf รวมไปถึงการทำความรู้จักกับ SECRET_KEY พร้อมการใช้งานกันครับ

จุดประสงค์

• เข้าใจและสามารถใช้งาน UserMixin คลาส เพื่อสืบทอดและเรียกใช้งานเมธอดเกี่ยวกับการ Login-Logout ได้
• เข้าใจและสามารถใช้งาน flask-wtf ได้
• เข้าใจ flash message
• เข้าใจ SECRET_KEY และสามารถสร้าง SECRET_KEY เพื่อใช้งานได้
• ฯลฯ

หลังจากใน Ep.1 ในส่วนของ flask-login ได้ทำการอิมพอร์ต LoginManager, login_required มาเรียบร้อย และใน Ep.2 นี้ให้ทำการอิมพอร์ตเข้ามาเพิ่มอีก 4 ตัวคือ

• UserMixin
• login_user
• logout_user
• current_user

pending

from flask_login import LoginManager, login_required ,UserMixin, login_user, logout_user, current_user

Flask-WTF

flask_wtf เป็นไลบรารี่ของ Flask ที่เอาไว้ใช้สำหรับจัดการเกี่ยวกับฟอร์มไม่ว่าจะเป็นการ Validate, การสร้างฟีลด์ ฯลฯ

ติดตั้ง flask_wtf

pip install flask_wtf

ทำการอิมพอร์ตเข้ามาใช้งานได้เลย โดยสร้างไฟล์ขึ้นมาใหม่อีก 1 ไฟล์คือ form.py…

flask-login เป็นไลบรารี่ที่ได้รับความนิยมสูงสุดสำหรับ Flask Framework สำหรับพัฒนาระบบยืนยันตัวตน (Authentication Systems) สำหรับใน tutorial นี้จะเป็นการสอนการใช้งาน Flask Authentication Systems โดยประยุกต์ใช้งาน flask-login ไลบรารี่ เข้ามาใช้ในโปรเจคท์นี้ พร้อมทั้งทำความรู้จักกับ LoginManager คลาส login_required decorator, และ user_loader ฟังก์ชัน รวมไปถึงการสร้างแบบฟอร์มสำหรับการล็อกอินในหน้าเว็บ

สำหรับท่านใดที่ยังไม่รู้ว่า Flask คืออะไร ทำไมถึงต้องใช้ Flask รับชมได้ที่วิดีโอนี้

Flask Introduction- แนะนำการเขียนพัฒนาเว็บด้วยไพธอน(Flask)

จุดประสงค์

• เข้าใจและสามารถใช้งาน flask-login ไลบรารี่ได้
• เข้าใจกระบวนการทำงานในระบบยืนยันตัวตน(Authentication Systems)ของผู้ใช้งาน
• เข้าใจการทำงานของ LoginManager
• เข้าใจ user_loader
• เข้าใจและสามารถใช้ login_required decorator ในการจำกัดการเข้าถึงหน้าเว็บได้
• เข้าใจกระบวนการทำงานของฟอร์มและสามารถสร้างฟอร์มในหน้าเว็บเพื่อใช้สำหรับการล็อกอิน
• ฯลฯ

หลังจาก Ep.11/1 ที่ผ่านมาเราได้ทำการสร้างหน้าลงทะเบียน พร้อมทั้งได้มีการ hash password

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 ไม่มีปัญหาสามารถใช้ได้ปกติ

Django Forms: Model Forms

Model Forms เป็นตัวที่ทำให้เราสร้าง Forms ได้ง่ายขึ้นมากในแต่ละ Model ก็จะมี Field ที่ต้องใส่เพื่อเพิ่มข้อมูลเข้าไปใน Database ซึ่งเราสามารถที่จะอ้างอิง Field ที่ Model ต้องการเพื่อนำไปสร้าง Form ได้ซึ่งใน Form ก็จะมี Field ตามที่เราสร้างใน Model เลยโดยที่เราไม่ต้องไปสร้าง Form เพิ่มแยกขึ้นมากริ่นมาพอควรแล้วเรามาลองสร้าง Model เพื่อที่จะเอาไปทำ Form กันเลยดีกว่าครับ

Create Model

เราสร้าง Model ที่เป็น Order และ Water เพื่อเก็บข้อมูลที่ลูกค้าสั่งและน้ำหวานที่ให้ลูกค้าสามารถสั่งได้โดยเราไปที่ models.py ที่อยู่ใน order folder แล้วเขียนโค้ดตามนี้

เราได้สร้าง model ขึ้นมาแล้วในที่นี้มีอยู่ 2 model คือ Water และ Order ในส่วนของ Water เราได้เก็บข้อมูล water ซึ่งเป็นน้ำหวานในร้านน้ำแข็งใสเก็บประเภทเป็น char และมีการแปลง object ให้เป็น string เพื่อให้ง่ายต่อการนำไปใช้โดยใช้ function __str__
Order model เก็บข้อมูลที่ลูกค้าสั่งโดยจะเก็บ topping ต่างๆที่ลูกค้าเพิ่มเข้ามาสามารถใส่ได้ 2 topping และมีการดึงตารางของ Water มาใช้โดยอ้าง Foreign Key ไปหา Water Model

Make Migrations

เพื่อทำให้ model ขึ้นไปอยู่ใน database เราจำเป็นต้องมีการ migrate เป็นขึ้นตอนที่ทำให้เราเอา model ของเราเปลี่ยนกลายไปเป็นตารางขึ้นไปอยู่ใน database ซึ่งสิ่งนี้เราเรียกกันว่า Django ORM ซึ่งถ้าใครอยากอ่านเจาะลึกเข้าไปอีกว่าทำงานอย่างไหร่ก็สามารถที่จะหาอ่านเพิ่มเติมได้นะครับวันนี้ผมขอแค่บอกวิธีการที่ทำให้ model เราขึ้นไปอยู่ใน database ขั้นตอนแรกคือการ…

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

พบกันอีกครั้งครับกับซีรีย์ JavaScript Ep.4 หลังจากห่างหายไปพักหนึ่งต้องขออภัยท่านที่ติดตามกันอย่างเหนียวแน่นทุกท่านครับ ท่านใดที่ยังไม่ได้อ่าน Ep.3 กลับไปอ่านก่อนได้เลยครับ ใน Ep.3 JavaScript Output และใน Ep นี้ ไม่รอช้า ไปดูจุดประสงค์ของ Ep นี้กันเลยครับ

จุดประสงค์(Objectives)

1. รู้และเข้าใจความหมายของ JavaScript Statement
2. รู้และเข้าใจ Statements ประกอบไปด้วยอะไรบ้าง
3. รู้และเข้าใจ White Space และสามารถใช้ได้อย่างถูกต้องตามมาตรฐาน
4. สามารถใช้ Line Break และขึ้นบรรทัดใหม่ ได้อย่างถูกต้องตามมาตรฐาน
5. รู้และเข้าใจ Code Blocks
6. รู้และอธิบาย คำสงวน (Reserved Words) ในภาษา JavaScript ได้

JavaScript Programs

โปรแกรมคอมพิวเตอร์คือส่วนที่เป็นชุดของคำสั่ง เพื่อรอให้รันคำสั่งโดยคอมพิวเตอร์

ในทางภาษาโปรแกรมมิ่งนั้น คำสั่งโปรแกรมมิ่งเหล่านี้จะถูกเรียกว่า “statements”

และตัว JavaScript program ก็คือส่วนของ programming statements

ตัวอย่าง

var x, y, z; // Statement 1
x = 2; // Statement 2
y = 5; // Statement 3
z = x + y; // Statement 4

จากบล็อกด้านบนจะเห็นว่าทุก ๆ บรรทัดของโค้ด JavaScript ล้วนเป็น Statements ทั้งสิ้น โดยลำดับจะไล่มาจากบนลงล่าง

นอกจากนี้ เรายังสามารถเขียน Statements ให้อยู่ในบรรทัดเดียวกันได้ โดยใช้ Semicolon ในการแยกแต่ละ Statement…