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)

 

รูปหน้าเว็บก่อนที่จะเลือกรายการและกด submit
รูปหน้าเว็บก่อนที่จะเลือกรายการและกด submit
รูปหน้าเว็บหลังจากลือก C# และกด submit
รูปหน้าเว็บหลังจากลือก C# และกด submit

 

สรุป

การทำหน้าเว็บสำหรับส่งข้อมูลไปยังหน้าเว็บใน 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 แล้วส่งค่าไปแสดงในหน้าเว็บ

select-tag-flask-show-value.zip

ประเภทไฟล์ zip

ขนาดไฟล์ 778 bytes

ผู้อัพโหลดไฟล์ anawatj

วันที่อัพโหลด 2023-09-25 12:40:01


กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ประเมิณราคาเปลี่ยนจอ อะไหล่ เปลี่ยนจอ samsung s10e
โดย mindphp พฤ 01 ก.พ. 2024 7:49 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
651
ส 03 ก.พ. 2024 12:32 am โดย mindphp View Topic ประเมิณราคาเปลี่ยนจอ อะไหล่ เปลี่ยนจอ samsung s10e
จะเข้า Line แต่ใช้มือถือ Scan QRCode ไม่ได้ ต้องทำยังไงดี
โดย Narisara พ 31 ม.ค. 2024 12:41 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
484
พ 31 ม.ค. 2024 12:44 pm โดย Narisara View Topic จะเข้า Line แต่ใช้มือถือ Scan QRCode ไม่ได้ ต้องทำยังไงดี
อัปเดต Joomla เวอร์ชัน 5.0.2 และ 4.4.2 แก้ไขปัญหาปัญหาระบบต่าง ๆ
โดย Thanapoom1514 อ 28 ม.ค. 2024 2:37 pm บอร์ด MindPHP News & Feedback
1
562
อ 30 ม.ค. 2024 11:53 am โดย mrfurniture View Topic อัปเดต Joomla เวอร์ชัน 5.0.2 และ 4.4.2 แก้ไขปัญหาปัญหาระบบต่าง ๆ
10 คำถาม เกี่ยวกับคอมพิวเตอร์ Q&A
โดย Best1677 พฤ 25 ม.ค. 2024 11:29 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
619
พฤ 25 ม.ค. 2024 11:29 am โดย Best1677 View Topic 10 คำถาม เกี่ยวกับคอมพิวเตอร์  Q&A
หลอด T8 LED วิวัฒนาการของวงการหลอดไฟ
โดย admeadme พฤ 25 ม.ค. 2024 9:23 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
622
พฤ 25 ม.ค. 2024 9:23 am โดย admeadme View Topic หลอด T8 LED วิวัฒนาการของวงการหลอดไฟ
ปัญหา เร้าเตอร์เน็ต ขึ้น los สีแดง
โดย Thanavat_n พ 24 ม.ค. 2024 4:28 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
374
พ 24 ม.ค. 2024 4:29 pm โดย Thanavat_n View Topic ปัญหา เร้าเตอร์เน็ต ขึ้น los สีแดง
ใช้โปรแกรมอะไรดีสุดครับ จะอัพโค้ด PHP ขึ้นโฮส ทำการเช่าโฮสไว้แล้ว
โดย Anonymous อ 23 ม.ค. 2024 10:46 am บอร์ด Programming - PHP
1
1369
พ 24 ม.ค. 2024 7:47 am โดย mindphp View Topic ใช้โปรแกรมอะไรดีสุดครับ จะอัพโค้ด PHP ขึ้นโฮส ทำการเช่าโฮสไว้แล้ว
ภาษา Lua ตอนที่ 9 : ตัวดำเนินการตรรกะ
โดย worramaitk พฤ 18 ม.ค. 2024 5:17 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
632
พฤ 18 ม.ค. 2024 5:17 pm โดย worramaitk View Topic ภาษา Lua ตอนที่ 9 : ตัวดำเนินการตรรกะ