Flask Framework (ฟลัสค์ เฟรมเวิร์ค) เป็น Framework (โครงร่างหรือขอบเขตของระบบงาน) ที่เอาไว้ใช้จัดการด้าน Back-end ซึ่งจะเป็นการประมวลผลทางฝั่ง Web Server ส่วนไฟล์ HTML จะสร้างเพื่อทำโครงสร้างของหน้าเว็บ ในบทความนี้จะมีไม่การทำ CSS เพื่อตกแต่งหน้าเว็บจะเน้น HTML แล้วส่งข้อมูลไปมาระหว่าง Python Flask Framework
สร้างไฟล์ HTML ให้มี select tag เพื่อส่งข้อมูลไปมาระหว่าง Flask
สร้างไฟล์ html เป็น html5 ภายในไฟล์จะมี
- select tag เพื่อให้เลือกรายการที่มีหรือ option tag แต่ถ้าผู้ใช้ไม่ได้เลือกอะไร default จะเป็น Python สังเกตได้ตรง option tag มี selected อยู่ใน option tag ข้างหน้า
- form tag เพื่อส่งข้อมูลที่ผู้ใช้เลือกจาก select tag แล้วจะส่งผ่าน url คือ "/" ด้วย method = "post"
- ปุ่มให้กด submit เพื่อส่งข้อมูลไปยัง Flask
- ใน h3 tag จะเป็นส่วนที่เอาไว้โชว์ผลลัพธ์ที่ผู้ใช้ได้เลือกและกด submit ไป สังเกตได้จาก {{result}} เป็นผลลัพธ์ที่ส่งมาจาก Flask
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test selection</title>
</head>
<body>
<form action="/" method="post">
<select name="skill">
<option value="Python" selected>Python</option>
<option value="Java">Java</option>
<option value="C++">C++</option>
<option value="C">C</option>
<option value="C#">C#</option>
</select>
<button type="submit">submit</button>
</form>
<h3>U selected {{result}}</h3>
</body>
</html>
สร้างไฟล์ Python สำหรับ run server และจัดการเบื้องหลัง Web ด้วย Flask Framework
ในไฟล์ Python จะมีการเรียกใช้ Flask Framework แต่ต้องมีการติดตั้ง ก่อนถึงจะ run ได้
โดยส่วนที่แสดงหน้าเว็บตอนเริ่ม run server จะเป็น function ชื่อ index ภายใน function คือ
- จะเป็นการ render template หน้า html ที่ได้สร้างไว้ชื่อว่า "index.html" และไม่มีการส่งค่าใดๆ ไปยังหน้าเว็บ
ส่วนที่ทำการรับค่ามาจากหน้าเว็บที่ผู้ใช้เลือกและกด submit มา จะเป็น function ชื่อ get_select_item ภายใน function คือ
- จะรับค่าจาก form ใน html ตัวแปรที่เก็บค่าคือ skill
- print(skill) จะเป็นการแสดงค่าของ skill ผ่าน terminal
- return render_template('index.html', result=skill) จะ render หน้า index.html และส่งค่า skill ให้ตัวแปร result ในหน้าเว็บ
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/', methods=['POST'])
def get_slected_item():
skill = request.form.get('skill')
print(skill)
return render_template('index.html', result=skill)
if __name__ == '__main__':
app.run(debug=True) # debug mode is on
ผลลัพท์ที่ได้หลังจากการ run server (run ไฟล์ Python)
สรุป
การทำหน้าเว็บสำหรับส่งข้อมูลไปยังหน้าเว็บใน Flask Framework (ฟลัสค์ เฟรมเวิร์ค) จะใช้ render_template เพื่อระบุหน้าที่ต้องการจะ render และตัวแปรที่ต้องการส่งค่าไปยังหน้าเว็บ ซึ่งเป็น function ที่ใช้บ่อยมาก เราสามารถแสดงหน้าเว็บได้โดยไม่จำเป็นต้องใส่ตัวแปรอะไรไปก็ได้เหมือนกัน ในหน้า HTML ตรง select จะเป็นโชว์ list ที่จะให้ผู้ใช้เลือก ตอนส่งช้อมูลไปยัง flask ก็ต้องใส่ name="ชื่อตัวแปร" เพื่อระบุชื่อตัวแปรที่ต้องของค่านั้น
อ้างอิง
"select tag" .[ออนไลน์] เข้าถึงได้ที่ https://www.w3schools.com/tags/att_option_selected.asp
"set default option" .[ออนไลน์] เข้าถึงได้ที่ https://stackoverflow.com/questions/3518002/how-can-i-set-the-default-value-for-an-html-select-element
"Flask and Select element" .[ออนไลน์] เข้าถึงได้ที่ https://python-forum.io/thread-30999.html
- หัวเรื่อง
- บทเรียนการรับค่าจาก tag select ใน flask แล้วส่งค่าไปแสดงในหน้าเว็บ
- หมวดหมู่
- Python Framework Flask, Python Framework Flask
- ฮิต
- 1190
- ผู้สร้างเอกสาร
- anawatj
- วันที่สร้างเอกสาร
- 2023-09-25 19:42:01
- รายละเอียด
การรับค่าจาก tag select ใน flask แล้วส่งค่าไปแสดงในหน้าเว็บ