การใช้ Template
ตอนนี้ web application ของเรายังหน้าตาไม่สวยเท่าไหร่ โดยส่วนมาก web application จะไม่เสิร์ฟแค่ข้อความธรรมดาแต่จะเสิร์ฟข้อความที่ถูกตกแต่งแล้วด้วย html และ css นักศึกษาที่เคยเรียนทำเว็บมาแล้วน่าจะพอนึกออก
เราสามารถนำ html template ไปครอบบนผลลัพธ์ของโค้ดได้สบายๆ ก่อนที่จะเสิร์ฟให้กับ web browser
from flask import Flask
app = Flask(__name__)
@app.route("/")
@app.route('/<num1>/<num2>')
def add(num1=0, num2=0):
return """
<! doctype html>
<head>
<title>We have added your numbers</title>
</head>
<body>
<h1>{} + {} = {}</h1>
</body>
</html>
""".format(num1, num2, int(num1) + int(num2))
app.run(debug=True)
แต่การทำเช่นนี้มันค่อนข้างยุ่งยากที่ต้องเขียน html เป็น string ลงในโค้ดไพตอนซึ่งบางทีโค้ดของ html อาจจะยาวและยิ่งใหญ่มากๆ ทำให้ยุ่งยากในการแก้ไขและ debug ดังนั้น Flask จึงอนุญาตให้เราใช้ template ในการเขียน web application กล่าวคือเราจะเขียนโค้ดของ html ทั้งหมดไว้ในไฟล์ .html แล้วเรียกไฟล์นั้นขึ้นมาใช้ในโค้ด python
การใช้ html template
ก่อนอื่นเราจะต้องสร้าง folder ที่ชื่อ templates ไว้ในโปรเจ็คก่อน แล้วสร้างไฟล์ที่ชื่อ add.html ไว้ใน templates เนื้อหาของไฟล์ add.html เป็นดังต่อไปนี้
<!Doctype html>
<head>
<title>We have added your numbers</title>
</head>
<body>
<h1>{{ n1 }} + {{ n2 }} = {{ n1+n2 }}</h1>
</body>
</html>
จะเห็นว่า template นี้ก็ดูคล้ายๆกับ html ทั่วไป ต่างแต่เพียงว่าเรามี {{ var }} แทรกอยู่ในโค้ดด้วย {{ var }} บอกให้ python นำเอาตัวแปรชื่อ var มาแทรกแทนที่ {{ var }} ก่อนที่จะยิ่งส่งไปที่ web browser
Flask ใช้ templating engine ซึ่งก็คือ python library อีกตัวหนึ่งที่ช่วยให้เราเขียน html ปะปนกับตัวแปรและคำสั่งจาก python templating engine ที่ Flask เลือกใช้ชื่อ jinja ซึ่งจะทำอะไรเจ๋งๆได้มากกว่านี้อีก นักศึกษาที่อยากรู้เพิ่มอ่านได้ที่ Jinja2 Documentation
จากนั้นเรามาลองเปลี่ยน app ของเราให้ลองใช้ template ดู ลองรันโค้ดนี้แล้วดูว่าทำงานได้ดีหรือเปล่า
from flask import Flask
from flask import render_template
app = Flask(__name__)
@app.route("/")
@app.route('/<num1>/<num2>')
def add(num1=0, num2=0):
return render_template('add.html', n1=num1, n2=num2)
app.run(debug=True)
คำอธิบายโค้ด
ก่อนอื่นเรา import render_template ซึ่งเป็นคำสั่งสำหรับเรียก html template ที่เราเขียนไปมาแสดง
จากนั้น เวลา return ค่าจากฟังก์ชัน add() เราระบุว่าต้องการเรียก add.html แล้วป้อนค่าตัวแปร n1 และ n2 ให้เป็นค่าที่เราต้องการ