ใครที่กำลังเรียน Python กันอยู่ วันนี้เราจะมาสอนการทำเว็บอย่างง่ายๆ ด้วย python กันครับ โดยเครื่องมือที่เราจะใช้ก็คือ Flask ที่เป็น Framework ของ python ที่ใช้ในการเขียนเว็บสำหรับใครที่กำลังอยากลองเขียนเว็บเล่นๆ ก็ลองทำตามดูนะครับ
สิ่งที่ต้องมี
1.Python
2.Editer (ในที่นี้จะใช้ Pycharm ครับ)
ก่อนอื่นก็มาติดตั้ง Flask กัน
พิมพ์โค้ดตามนี้ใน Terminal เพื่อติดตั้งได้เลย
python -m pip install Flask
มาลองสร้างหน้าเว็บพื้นฐาน Hello กัน
- ขั้นแรกให้สร้างไฟล์ Python ขึ้นมาแล้ว import Flask และประกาศตามนี้
from flask import Flask
app = Flask(__name__)- จากนั้นให้เขียนโค้ดให้เว็บของเรารันใน localhost ที่ port 8000
if __name__ == '__main__':
app.debug = True
app.run(host='0.0.0.0', port=8000)- แล้วเขียนคำสั่งแบบนี้ไว้ระหว่างโค้ดด้านบน
@app.route('/hello')
def Home():
return "<h1>Hello World</h1>"คำสั่งนี้จะเป็นการใช้ @app.route() เพื่อกำหนดให้ url path ‘/hello’ ไปเรียกฟังก์ชัน Home เพื่อ return html code มา render ในเว็บของเรา
(path นั้นสามารถเปลี่ยนเป็นคำว่าอะไรก็ได้ เพียงแค่เปลี่ยนคำว่า hello เป็นคำอื่นได้เลย)
เสร็จแล้วก็จะได้โค้ดประมาณนี้
from flask import Flask
app = Flask(__name__)
@app.route('/')
def Home():
return "<h1>Hello</h1>"
if __name__ == '__main__':
app.debug = True
app.run(host='0.0.0.0', port=8000)- ใช้คำสั่ง python myWeb.py ใน terminal เพื่อรันไฟล์ของเรากันเลย
python myWeb.py
เมื่อเปิดเข้า localhost:8000 ใน browser ก็จะได้หน้าเว็บตามโค้ด html ที่เราใส่ลงไป
@app.route() นั้นสามารถใช้สำหรับกำหนดการรับ input ผ่าน path ได้ เช่น
@app.route('/hello/<string:name>')
def Home(name):
return ("<h1>Hello %s </h1>" % name)
ตามคำสั่งด้านบนจะเป็นการรับค่า string ที่อยู่ด้านหลัง path ‘/hello/’ มาเก็บไว้ในตัวแปรชื่อ name จากนั้นจึงนำค่าที่ได้ส่งมาใส่ฟังก์ชัน Home เพื่อมาประกอบกับ html code ที่จะถูกนำไป render บนหน้าเว็บ ดังนี้
สร้าง Template
เราสามารถให้ python ไปเรียกไฟล์ html มา render ได้ด้วย โดยที่จะได้ไม่ต้องมาเขียนโค้ด html ยาวๆในไฟล์ python เพื่อให้โค้ดอ่านง่าย เป็นระเบียบ และง่ายต่อการแก้ไข
– ขั้นแรกให้เราสร้างโฟลเดอร์ชื่อ templates ให้อยู่ในชั้นเดียวกับไฟล์ python ของเรา และสร้างไฟล์ html ขึ้นมา
– ที่ไฟล์ python ให้เรา import render_template เข้ามาเพิ่ม และเปลี่ยนการ return จาก string ธรรมดาเป็นการใช้ฟังก์ชัน render_template เพื่อนำไฟล์ html มา render แทน และโยนตัวแปร name เข้าไปในไฟล์ html
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/hello/<string:name>')
def Home(name):
return render_template('myTemplate.html', name=name)
if __name__ == '__main__':
app.debug = True
app.run(host='0.0.0.0', port=8000)– ส่วนที่ไฟล์ html ให้เราเพิ่ม {{name}} เพื่อรับตัวแปร name จากฝั่ง python มาแสดง
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello</title>
</head>
<body>
<h1>Hello {{name}}</h1>
</body>
</html>เท่านี้เว็บของเราก็จะใช้ไฟล์ html มาใช้เป็น template ของเว็บแล้วโดยที่ยังคงมีหน้าตาเหมือนเดิม
จากนั้นก็ต่อเติมเว็บตามที่เราต้องการได้เลย
จากภาพจะเป็นเว็บแสดงตารางโชว์ในสวนสัตว์ที่มีเพียง html แต่ยังไม่มี css ที่ช่วยเพิ่มความสวยงาม
ถ้าเราไม่อยากจัดแต่งความสวยงามด้วยตัวเองอย่างละเอียด ขอแนะนำให้ลองใช้ css framework ที่มี css สำเร็จรูปให้เรียกใช้ได้ทันทีเพียงแค่ใส่ class เท่านั้นเอง ในที่นี้จะใช้ของ bootstrap เพื่อตกแต่งคร่าวๆก็จะได้ตามรูป
การตกแต่งนี้เพิ่มโค้ดใน html เพียงแค่ 3 บรรทัดเท่านั้นเอง
ขั้นแรกให้ทำการ import bootstrap โดยการแปะ link นี้ไว้ที่ head ของhtml ตามภาพ
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
จากใส่ class ให้กับ html element เพื่อเติมความสวยงามของ css bootstrap ให้กับ element ของเรา
ในที่นี้จะเพิ่มคลาสให้กับ div เพื่อจัดระยะ : <div class=”container”> และ table : <table class=” table table-striped”> เท่านี้ก็ได้ผลลัพธ์ดังภาพแล้ว
