Flask — เริ่มต้นเขียนเว็บง่ายๆด้วย Flask

สร้างเว็บไซต์ด้วยภาษา python

4 min readNov 12, 2019

1. Flask คืออะไร

Flask คือ micro web framework ที่เขียนด้วย python. Flask ถูกจัดให้อยู่ใน microframework เพราะว่าไม่ต้องการใช้เครื่องมือหรือไลบารี่เฉพาะ ดังนั้นจึงมีแค่ที่จำเป็นเลยเล็ก แต่เขียนไม่กี่บรรทัดก็รันได้เลย Flask ไม่มีทั้ง database หรือการตรวจการตรวจแบบฟอร์ม (form validation) แต่ยังรองรับ extensions ที่ช่วยเพิ่มความสามารถอื่นได้ ถ้ารองรับการใช้กับ Flask

ตัวอย่างเว็บ ที่นำ Flask ไปใช้ คือ Pinterest LinkedIn เป็นต้น

Flask คือ ขวดน้ำ นะครับไม่ใช่ พริก

2. ส่วนประกอบของ Flask

Flask สร้างมาจากพื้นฐานของ pocoo projects Werkzeug และ Jinja2

Werkzeug

คือ ไลบารี่ที่เป็นประโยชน์สำหรับภาษา python กล่าวอีกนัยหนึ่ง คือ เครื่องมือสำหรับ WSGI

https://en.wikipedia.org/wiki/Jinja_(template_engine)

JinJa2

คือ template engine สำหรับภาษา python ในการแสดงผลหน้าเว็บพร้อมกับข้อมูลแบบไดนามิก

{% … %} สำหรับใส่คำสั่ง if, else ต่าง ๆ
{{ … }} สำหรับแสดงค่าออกทางหน้าเว็บ
{# … #} คอมเมนต์โค้ดไม่ให้แสดงผล
# … ## เหมือนกับตัวแรก

3. การติดตั้ง Flask

ก่อนจะติดตั้ง Flask เราจะติดตั้งแพ็กเกจที่สำศัญนั้นก็ คือ
venv (virtual environments) ก่อน

virtual environments ใช้สำหรับการจัดการแพ็กเกจ (package) ของ python เพื่อที่จะติดตั้งแยกแพ็กเกจที่ใช้สำหรับโปรเจคนั้น ๆ เท่านั้น ซึ่งดีกว่าการติดตั้งแบบธรรมดา (global) เพื่อป้องกันปัญหาระหว่างเวอร์ชั่นที่แต่ต่างกันของไลบารี่ python แต่ละตัวในโปรเจคที่แตกต่างกัน

สร้างโฟลเดอร์และส่วนสำศัญต่าง ๆ สำหรับโปรเจคเราขึ้นมา

mkdir flask-web
cd flask-web
mkdir app
mkdir app/static
mkdir app/templates

static ใช้เก็บไฟล์ที่คงที่ถาวร เช่น CSS, JavaScript image , node_modules
templates ใช้เก็บไฟล์ที่ใช้ในการแสดงผลเป็นหน้าเว็บ (html)

virtual environments

(venv นั้นถูกติดตั้งมาพร้อมกับ python3.3+ อยู่แล้ว)

ถ้าใช้ python 2.7+ ให้ลง pip install virtualenv

เริ่มต้นด้วยการสร้างโฟลเดอร์ไว้เว็บตัว enviroments ของโปรเจคเรา
ในที่นี้จะใช้ชื่อว่า “env”
@ path: project/flask-web/

สร้าง และ เปิดใน linux

# python3 -m venv <DIR> 
# source <DIR>/bin/activate python3 -m venv env
source env/bin/activate

สร้าง และ เปิดใน window

# python -m venv <DIR> 
# เปิดด้วยไฟล์ activate ในโฟลเดอร์ Scriptspython -m venv env
cd Scripts 
activate

ถ้าถูกต้องจะมี (env) ของเราด้านหน้า
*หมายความว่าได้เปิดการทำงานแล้ว

ตอนนี้แพ็กเกจ python ของเราแยกจากส่วนหลักแล้ว ลอง pip freeze จะพบว่าไม่มีแพ็กเกจอะไรเลย (ใน env ของเรา)

Flask

ติดตั้งตัว Flask เอง

pip install flask

พอ pip freeze ก็จะได้

4.เริ่มต้นเขียนโปรแกรม

สามารถใช้ text editor ต่างๆได้ตามต้องการ เช่น vscode, vim ฯลฯ

4.1 หน้าแรก และหน้าสวัสดี

สร้างไฟล์ app.py ซึ่งจะเป็นโปรแกรมหลักของเรา

from flask import Flask
app = Flask(__name__)@app.route('/')
def home():
    return "This is home page "if __name__ == '__main__':
    app.run(debug=True)

แล้วลองรันด้วยคำสั่ง python app.py
*ตอนรันอย่าลืมว่าต้องเปิด enviorments ด้วยนะ (env)

จากนั้นปล่อยให้มันทำงานไปแล้วเปิดเว็บขึ้นมาพิมพ์ในช่อง url ว่า

http://127.0.0.1:5000/ หรือ http://localhost:5000/

ก็จะได้ “This is home page” แต่ตัวเล็กไปหน่อย เราสามารถใส่ html tag เพิ่มความสามารถได้ — '<h1> This is home page with header1 tag </h1>'

และ เราสามารถใส่ค่าลงไปใน url ได้เพื่อนำค่านั้นไปใช้ เช่น
เพิ่ม

@app.route('/hello/<name>')
def hello_name(name):
    return "hello {}. ".format(name)

แล้ว ลอง http://localhost:5000/hello/ชื่อ หรือ ข้อความที่่ต้องการให้แสดง
ก็จะได้

4.2 ใช้ render_template

ตอนนี้เราทำสร้างหน้าเว็บแรกได้แล้วแต่ถ้าจะเพิ่มเติมควรจะแยกหน้าเว็บไปจัดเก็บไว้ในที่ของมันซึ่งก็คือใน templates นั้นเอง และใช้ render template ในการแสดงหน้าเว็บนั้น อีกทั้งเรายังสามารถส่งค่าไปแสดงผลได้อีกด้วย โดยการแสดงค่าใน html นั้นเราจะใช้ jinja นั้นเอง

render_template(template_name_or_list,**context)

render_template ใช้ในการแสดงหน้าเว็บนั้นจากโฟลเดอร์ template พร้อมกับค่าที่ถูกส่งมา (context) มีไม่มีก็ได้

{{...}}ใช้เข้าถึงค่าตัวแปรนั้นๆ และแสดงค่าออกทางหน้าเว็บ
เช่น {{ context }} ค่าเข้าถึงค่า context และแสดงออกที่หน้าเว็บ

เข้าไปใน templates
สร้างไฟล์ home.html ซึ่งจะเป็นหน้าเว็บของเรา

<html>
   <head>
          <title> {{ title }}</title>
   </head>
   <body>
   
         <h1> you may already know this is home page </h1>
      
   </body>
</html>

และ hello.html หน้าสวัสดีชื่อของเรา

<html>
   <head>
         <title> {{ title }}</title>
   </head>
   <body>
   
       <h1> hello I know you! you are {{name}}  </h1>
      
   </body>
</html>

และแก้ใน app.py

เพิ่ม render_template และใช้มัน render หน้าเว็บขึ้นมา และส่งตัวแปรไปด้วย

from flask import Flask, render_template
app = Flask(__name__)@app.route('/')
def home():
    return render_template('home.html',title='home')@app.route('/hello/<name>')
def hello_name(name):
    return render_template('hello.html',title='hello_name',name=name)if __name__ == '__main__':
    app.run(debug=True)

{{ title }} แสดงค่าของตัวแปร title
{{ name }} แสดงค่าของตัวแปร name
ซึ่งเป็นค่าที่ส่งมาจากแอปหลักในการ render_template นั้นเอง