01204223/flask - ประวัติรุ่นแก้ไข

Jittat: /* การใช้ url_for */

2025-12-26T22:01:13Z

การใช้ url_for

Jittat: /* การแสดงฟอร์มและการเรียกข้อมูลจาก request */

2025-12-26T21:57:30Z

การแสดงฟอร์มและการเรียกข้อมูลจาก request

Jittat: /* การติดตั้งและเริ่มเปิดหน้าเว็บ */

2025-12-26T21:43:03Z

การติดตั้งและเริ่มเปิดหน้าเว็บ

Jittat: /* UPDATE */

2025-12-26T21:39:54Z

UPDATE

Jittat: /* แสดงรายละเอียดแต่ละข่าว */

2025-12-26T08:30:01Z

แสดงรายละเอียดแต่ละข่าว

Jittat: /* การประมวลผลฟอร์ม และการ redirect */

2025-12-26T03:47:47Z

การประมวลผลฟอร์ม และการ redirect

Jittat: /* main.py */

2025-12-26T03:36:25Z

main.py

Jittat: /* การแสดงฟอร์มและการเรียกข้อมูลจาก request */

2025-12-26T03:32:17Z

การแสดงฟอร์มและการเรียกข้อมูลจาก request

Jittat: /* การประมวลผลฟอร์ม และการ redirect */

2025-12-26T03:27:45Z

การประมวลผลฟอร์ม และการ redirect

Jittat: /* การแสดงฟอร์มและการเรียกข้อมูลจาก request */

2025-12-26T02:44:24Z

การแสดงฟอร์มและการเรียกข้อมูลจาก request

@@ แถว 350: / แถว 350: @@
 : '''🄶''' commit อย่าลืม add ไฟล์ template ที่เราสร้างลงใน repo ก่อนด้วย
 }}
 === การใช้ url_for ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 21:57, 26 ธันวาคม 2568
แถว 478:		แถว 478:

	ให้ refresh แล้วทดลองกดส่งฟอร์ม ให้ลองอ่าน error message จะพบว่ามีการเข้ามาทำงานที่ฟังก์ชัน create_news_item แล้ว แต่ฟังก์ชันดังกล่าวไม่คืนค่าอะไร		ให้ refresh แล้วทดลองกดส่งฟอร์ม ให้ลองอ่าน error message จะพบว่ามีการเข้ามาทำงานที่ฟังก์ชัน create_news_item แล้ว แต่ฟังก์ชันดังกล่าวไม่คืนค่าอะไร
		+
		+	หน้าจอ error จะมีข้อความว่า '''TypeError'''
		+
		+	TypeError: The view function for 'create_news_item' did not return a valid response. The function either returned None or ended without a return statement.
		+
		+	: '''หมายเหตุ''': ถ้าไม่ได้ error นี้ ให้ลองอ่านรายละเอียดเพิ่มเติม ถ้าเป็น error เกี่ยวกับการทำงานของฟังก์ชัน เช่น <tt>ValueError: invalid literal for int() with base 10: 'create'</tt> และมีบรรทัดที่มีปัญหาอยู่ในฟังก์ชัน <tt>show_news_item</tt> เป็นไปได้ว่า url /news/create/ จะถูก route ไปที่ฟังก์ชันดังกล่าว เพราะว่ามันตรงกับ pattern /news/<id>/ ที่ id=="create" ซึ่งอาจจะเกิดขึ้นได้เพราะว่าเราไม่ได้เขียน pattern ให้รัดกุมพอ ในกรณีนี้ ให้แก้ annotation ของฟังก์ชัน show_news_item ให้เป็น <tt>@app.route('/news/<int:id>/')</tt> (เพิ่ม int: ก่อนหน้าชื่อ parameter id) จะทำให้ route ดังกล่าวจะไม่ match กับ /news/create/ พอแก้แล้วให้ลองส่งฟอร์มใหม่

	เมื่อ browser ส่งฟอร์มมาให้กับ web application, จะมีการส่งข้อมูลต่าง ๆ กลับมาด้วย     ใน Flask เราจะเข้าถึงข้อมูลดังกล่าวผ่านทางตัวแปร <tt>request</tt> ซึ่งจะเป็นตัวแปร global ในโมดูล Flask     เราจะเพิ่มการ import ที่ตอนต้น main.py ดังนี้		เมื่อ browser ส่งฟอร์มมาให้กับ web application, จะมีการส่งข้อมูลต่าง ๆ กลับมาด้วย     ใน Flask เราจะเข้าถึงข้อมูลดังกล่าวผ่านทางตัวแปร <tt>request</tt> ซึ่งจะเป็นตัวแปร global ในโมดูล Flask     เราจะเพิ่มการ import ที่ตอนต้น main.py ดังนี้

@@ แถว 33: / แถว 33: @@
 == การติดตั้งและเริ่มเปิดหน้าเว็บ ==
-Flask เป็น library บน python ซึ่งเราจะติดตั้งผ่านทางคำสั่ง pip  อย่างไรก็ตาม เราจะพยายามแบ่งส่วนการติดตั้ง library ของ python ให้แยกกันไปตามแต่ละงาน โดยใช้ virtual environment (venv)  ดังนั้นก่อนจะติดตั้ง Flask เราจะสร้าง virtual environment ก่อน โดยสั่ง
+Flask เป็น library บน python ซึ่งเราจะติดตั้งผ่านทางคำสั่ง pip  อย่างไรก็ตาม เราจะพยายามแบ่งส่วนการติดตั้ง library ของ python ให้แยกกันไปตามแต่ละงาน โดยใช้ virtual environment (venv)  ดังนั้นก่อนจะติดตั้ง Flask เราจะสร้าง virtual environment ก่อน
   python -m venv venv
@@ แถว 39: / แถว 43: @@
 (พารามิเตอร์ venv ตัวแรกเป็นชื่อ module ใน python พารามิเตอร์ venv ตัวที่สองเป็นชื่อไดเร็กทอรีที่จะเก็บ environment ซึ่งเราเปลี่ยนเป็นชื่ออื่นได้)
-ถ้าจะเริ่มใช้จะเรียก activate ใน venv/bin/activate (เรียกแตกต่างกันตาม os)
+ถ้าจะเริ่มใช้จะเรียกคำสั่ง activate ที่อยู่ใน venv การเรียกนี้จะแตกต่างกันตาม os
 ถ้าเรียก activate แล้ว prompt ใน terminal จะเปลี่ยนไป (ลองสังเกต) จากนั้นเราจะสามารถสั่งให้ติดตั้ง Flask ได้ โดยสั่ง

@@ แถว 338: / แถว 338: @@
 : '''🄶''' commit อย่าลืม add ไฟล์ template ที่เราสร้างลงใน repo ก่อนด้วย
 }}
 === การใช้ url_for ===

@@ แถว 338: / แถว 338: @@
 : '''🄶''' commit อย่าลืม add ไฟล์ template ที่เราสร้างลงใน repo ก่อนด้วย
 }}
 === การใช้ url_for ===

@@ แถว 513: / แถว 513: @@
 @app.route('/news/create/', methods=['POST'])
 def create_news_item():
-     print(request.args)
+     print(request.form)        # change from request.args to request.form
      return ''                  # added to show empty page instead of error
 </syntaxhighlight>
 ให้ทดลองกดส่งฟอร์มอีกครั้ง และดูผลลัพธ์ที่ใน console ด้วย ว่าโปรแกรมพิมพ์อะไรออกมาบ้าง
 === การส่งงานสัปดาห์นี้ ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 03:36, 26 ธันวาคม 2568
แถว 88:		แถว 88:

	การทำงานใน debug mode ทำให้สิ่งที่เราแก้มีผลทันที '''อย่าลืมเรียกแบบนี้ทุกครั้ง''' ไม่เช่นนั้นอาจจะสับสนใจได้ ว่าทำไมสิ่งที่เราแก้ในโค้ดไม่มีผลต่อการทำงาน		การทำงานใน debug mode ทำให้สิ่งที่เราแก้มีผลทันที '''อย่าลืมเรียกแบบนี้ทุกครั้ง''' ไม่เช่นนั้นอาจจะสับสนใจได้ ว่าทำไมสิ่งที่เราแก้ในโค้ดไม่มีผลต่อการทำงาน
		+
		+	==== ผลลัพธ์บน terminal (console) ====
		+
		+	ในการพัฒนาเว็บ นอกจากเราจะดูผลลัพธ์ทางหน้าจอบน browser แล้ว ใน terminal ที่เราเรียก flask run ก็ยังคงพิมพ์รายละเอียดของ request ต่าง ๆ ที่เข้ามาที่ development server ด้วย     ดังนั้นอย่าลืมใช้รายละเอียดเหล่านี้เป็นช่องทางในการตรวจสอบและติดตามการทำงานของโปรแกรมด้วย
		+
		+	[[Image:223-flask-consolelog.png\|400px]]

	=== git commit ===		=== git commit ===

@@ แถว 475: / แถว 475: @@
 </syntaxhighlight>
-ให้ทดลองส่งฟอร์มอีกครั้งเพื่อดูผลลัพธ์
+ให้ทดลองส่งฟอร์มอีกครั้งเพื่อดูผลลัพธ์  ที่หน้า page เราจะเห็น error เพราะว่าฟังก์ชันไม่ได้คืนค่า แต่ถ้าดูใน terminal (console) ที่เรียก flask run ทิ้งไว้จะเห็นว่าใน request.args เป็น ImmutableMultiDict ดังรูปด้านล่าง ที่เก็บข้อมูลจากฟอร์มที่เราส่งมา
 อย่างไรก็ตาม การส่งข้อมูลฟอร์มแบบที่เราทำข้างต้นเป็นการใช้งานที่ไม่ค่อยจะถูกต้องนัก

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 03:27, 26 ธันวาคม 2568
แถว 491:		แถว 491:

	=== การประมวลผลฟอร์ม และการ redirect ===		=== การประมวลผลฟอร์ม และการ redirect ===
		+
		+	การระบุให้การส่ง request ของฟอร์มเป็นการส่งแบบ POST ก็ทำได้โดยการระบุ attribute ใน tag form ดังด้านล่าง
		+
		+	<syntaxhighlight lang="html">
		+	<form action="{{ url_for('create_news_item') }}" method="POST>
		+	...
		+	</form>
		+	</syntaxhighlight>
		+
		+	ให้ทดลองกดส่งฟอร์มอีกครั้ง จะพบ error เพราะว่าใน Flask ถ้าไม่ระบุอะไร @app.route จะรับแค่ GET request เท่านั้น เราจะแก้ annotation ของฟังก์ชัน create_new_item โดยเพิ่มการระบุ methods ดังนี้ (และเราเพิ่มให้คืนสตริงว่างด้วย จะได้ไม่เห็น error ที่หน้าเว็บเพจ)
		+
		+	<syntaxhighlight lang="python">
		+	@app.route('/news/create/', methods=['POST'])
		+	def create_news_item():
		+	print(request.args)
		+	return '' # added to show empty page instead of error
		+	</syntaxhighlight>
		+
		+	ให้ทดลองกดส่งฟอร์มอีกครั้ง และดูผลลัพธ์ที่ใน console ด้วย ว่าโปรแกรมพิมพ์อะไรออกมาบ้าง

	=== การส่งงานสัปดาห์นี้ ===		=== การส่งงานสัปดาห์นี้ ===

←รุ่นแก้ไขก่อนหน้า		รุ่นแก้ไขเมื่อ 02:44, 26 ธันวาคม 2568
แถว 476:		แถว 476:

	ให้ทดลองส่งฟอร์มอีกครั้งเพื่อดูผลลัพธ์		ให้ทดลองส่งฟอร์มอีกครั้งเพื่อดูผลลัพธ์
		+
		+	อย่างไรก็ตาม การส่งข้อมูลฟอร์มแบบที่เราทำข้างต้นเป็นการใช้งานที่ไม่ค่อยจะถูกต้องนัก
		+
		+	ในรูปแบบการติดต่อแบบ HTTP จะมีการระบุรูปแบบในการขอข้อมูลไว้หลายแบบ ที่เราจะเห็นในเอกสารนี้มีสองแบบคือ
		+
		+	* GET - ใช้สำหรับขอข้อมูล โดยหลักการพื้นฐาน การเรียก GET request จะต้องไม่ทำให้ข้อมูลเปลี่ยนสถานะ
		+	* POST - โดยมากใช้สำหรับการเพิ่มหรือแก้ไขข้อมูล
		+
		+	(หมายเหตุยังมี PUT, UPDATE, DELETE แต่เราจะยังไม่ใช้)
		+
		+	ประเภทของ request เหล่านี้ จะถูกแสดงใน Flask development server เวลาที่มีการประมวลผลการเรียกใช้ (ลองสังเกตดู)
		+
		+	จากที่เขียนมาข้างต้น เราจึงไม่ควรประมวลผลฟอร์มด้วย GET    ดังนั้นในส่วนถัดไปเราจะปรับรูปแบบให้เป็น POST

	=== การประมวลผลฟอร์ม และการ redirect ===		=== การประมวลผลฟอร์ม และการ redirect ===