ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
index subttile VDO แนะนำการใช้ CI (Continuous Integration) ใน GitLab จับโค้ดจาก git ขึ้น demo & Production อัพไฟล์
โดย Nes224 พฤ 20 ม.ค. 2022 11:46 am บอร์ด M150 - ธราวุธ ชัยศรี
2
10
พฤ 20 ม.ค. 2022 3:54 pm โดย norisa_dl
งานประจำวันที่ 20 มกราคม 2565
โดย Nes224 พฤ 20 ม.ค. 2022 8:52 am บอร์ด M150 - ธราวุธ ชัยศรี
6
41
พฤ 20 ม.ค. 2022 7:19 pm โดย norisa_dl
สิ่งควรรู้ก่อนสร้าง component ใน joomla
โดย adinan49 พ 19 ม.ค. 2022 10:17 pm บอร์ด Joomla user Guide Knowledge
0
12
พ 19 ม.ค. 2022 10:17 pm โดย adinan49
ติดตั้ง Odoo 15 แล้วเจอ ปัญหาปริ้นไม่ได้ ปริ้นไม่ออก แก้ตามนี้
โดย mindphp พ 19 ม.ค. 2022 8:32 pm บอร์ด Linux - Web Server
1
16
พ 19 ม.ค. 2022 8:32 pm โดย mindphp
เริ่มหัดเขียนโปรแกรม node.js หรือ php หรือ python ดี
โดย SharminSultana พ 19 ม.ค. 2022 3:55 pm บอร์ด Programming - PHP
2
21
พฤ 20 ม.ค. 2022 6:41 pm โดย บุคคลทั่วไป
โหลด mooziicart จากไหนดีสุด
โดย Anonymous พ 19 ม.ค. 2022 2:43 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
5
พ 19 ม.ค. 2022 2:43 pm โดย บุคคลทั่วไป
งานประจำวันที่ 19 มกราคม 2565
โดย Nes224 พ 19 ม.ค. 2022 8:36 am บอร์ด M150 - ธราวุธ ชัยศรี
4
49
พฤ 20 ม.ค. 2022 1:08 pm โดย norisa_dl
วิธีเขียนโค้ด JavaScript ใน Joomla ผ่านไฟล์ภายนอก
โดย adinan49 อ 18 ม.ค. 2022 11:14 pm บอร์ด Joomla user Guide Knowledge
0
21
อ 18 ม.ค. 2022 11:14 pm โดย adinan49