“Render Template” và “Code Python trong HTML” là các khái niệm quan trọng trong phát triển web, cho phép bạn tạo và hiển thị nội dung động trên trang web của bạn dựa trên dữ liệu và logic của ứng dụng.
1. Render Template.
- Render trong việc phát triển web đề cập đến việc tạo và hiển thị trang web hoặc trang HTML động dựa trên dữ liệu hoặc logic được xử lý bên trong ứng dụng web.
- Template là một mẫu hoặc file HTML được thiết kế để chứa cấu trúc cơ bản của trang web. Mẫu này thường chứa các vị trí (placeholders) cho dữ liệu động hoặc code Python.
- Render Template là quá trình lấy dữ liệu từ ứng dụng web của bạn, kết hợp nó với mẫu HTML và sau đó trả về trang web hoặc trang HTML hoàn chỉnh để hiển thị cho người dùng. Trang web được tạo ra có thể thay đổi dựa trên dữ liệu hoặc logic của ứng dụng.
2. Code Python trong HTML.
- Python trong HTML: Đôi khi, bạn muốn thực hiện các phần của logic Python trong các file HTML của bạn để tạo nội dung động. Ví dụ, bạn muốn hiển thị tên người dùng đã đăng nhập hoặc danh sách sản phẩm từ cơ sở dữ liệu trên trang web của bạn.
- Sử dụng Template Engine: Để thực hiện Python trong HTML, các framework web thường sử dụng các “template engine” như Jinja2 (trong Flask) hoặc Django Template Engine (trong Django). Các template engine này cho phép bạn nhúng code Python vào trong các mẫu HTML bằng cách sử dụng cú pháp đặc biệt.
- Ví dụ: Dưới đây là một ví dụ về việc sử dụng Jinja2 template engine trong Flask để hiển thị tên người dùng:
<html>
<body>
<h1>Hello, {{ user_name }}</h1>
</body>
</html>Trong ví dụ này, {{ user_name }} là một placeholder mà bạn có thể điền bằng dữ liệu Python từ ứng dụng của bạn. Khi bạn render template này, template engine sẽ thay thế {{ user_name }} bằng giá trị thích hợp và trả về trang web hoàn chỉnh.
3. Thực hành tạo Project.
Trong myproject tạo thư mục myapp1, myapp2 và các file tương tự như cây thư mục dưới.
../myproject/
├── myapp1
│ ├── render_html.py
│ └── templates
│ └── index.html
└── myapp2
└── app.py
3 directories, 3 filesĐối với APP1.
Trong thư mục myapp1 tạo file index.html và hãy làm theo thao tác sau để tạo ra 1 đoạn code mẫu HTML.
Chỉnh sửa lại một số nội dung như dưới.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Pages</title>
</head>
<body>
<h1>Demo Render HTML</h1>
</body>
</html>File myapp1/render_html.py bạn mình có nội dung như dưới.
from flask import Flask, redirect, url_for, render_template
import requests
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('index.html')
@app.route('/myapp2/<user>')
def call_app2(user):
x = requests.get(f'http://127.0.0.1:5001/user/{user}')
return x.text
if __name__=="__main__":
app.run(debug=True, host='0.0.0.0', port=5000)Đoạn code trên là một ứng dụng Flask đơn giản với hai route chính. Hãy giải thích từng phần trong code này:
from flask import Flask, redirect, url_for, render_template, requests: Dòng này import các module và class cần thiết từ Flask để xây dựng ứng dụng web, cũng như modulerequestsđể thực hiện các yêu cầu HTTP tới một ứng dụng khác. Nếu bạn chưa cài modulerequeststhì hãy chạy lệnhpip install requestsđể cài đặt nó.app = Flask(__name__): Dòng này tạo một đối tượng ứng dụng Flask chính. Đối tượng này sẽ được sử dụng để định nghĩa các route và xử lý các yêu cầu HTTP.@app.route('/'): Đây là một route chính trong ứng dụng Flask của bạn. Khi người dùng truy cập địa chỉ gốc (‘/’), hàmhello_worldsẽ được gọi.def hello_world(): Hàm này trả về một trang web được render từ template'index.html'sử dụngrender_template. Nó sẽ hiển thị trang chào đón khi người dùng truy cập địa chỉ gốc.
@app.route('/myapp2/<user>'): Đây là một route khác trong ứng dụng Flask. Route này chứa một biến động<user>, nghĩa là bạn có thể truyền giá trị user vào URL.def call_app2(user): Hàm này nhận giá trị của biếnusertừ URL và sử dụng modulerequestsđể thực hiện một yêu cầu HTTP GET tới một ứng dụng khác đang chạy trên cổng 5001.x = requests.get(f'http://127.0.0.1:5001/user/{user}'): Dòng này thực hiện yêu cầu HTTP GET tới địa chỉ http://127.0.0.1:5001/user/{user}, trong đó{user}là giá trị biến user mà bạn đã truyền từ URL. Sau đó, nội dung phản hồi từ ứng dụng khác sẽ được lưu vào biếnx.return x.text: Hàm này trả về nội dung văn bản của phản hồi từ ứng dụng khác, điều này sẽ được hiển thị trên trang web của ứng dụng hiện tại.
if __name__=="__main__":: Điều kiện này kiểm tra xem script này có được chạy trực tiếp (thay vì được import từ một file khác) hay không.app.run(debug=True, host='0.0.0.0', port=5000): Dòng này chạy ứng dụng Flask trên máy chủ. Cụ thể, ứng dụng sẽ chạy trên cổng 5000 và sẽ lắng nghe trên tất cả các địa chỉ IP trên máy chủ (host='0.0.0.0'). Đặtdebug=Trueđể bật chế độ gỡ lỗi, giúp bạn dễ dàng xác định vấn đề trong quá trình phát triển.
Đối với APP2.
File myapp2/app.py bạn mình có nội dung như dưới.
from flask import Flask, redirect, url_for, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
return "<h1>Hello, World</h1>"
@app.route('/user/<name>')
def hello_user(name):
return f"<h1>Hello, {name}!</h1>"
if __name__=="__main__":
app.run(debug=True, host='0.0.0.0', port=5001)from flask import Flask, redirect, url_for, render_template: Dòng này import các module và class từ Flask cần thiết để xây dựng ứng dụng web.app = Flask(__name__): Dòng này tạo một đối tượng ứng dụng Flask. Đối tượng này sẽ được sử dụng để định nghĩa các route và xử lý các yêu cầu HTTP.@app.route('/'): Đây là một route chính của ứng dụng. Khi người dùng truy cập địa chỉ gốc (‘/’), hàmhello_worldsẽ được gọi.def hello_world(): Hàm này trả về một chuỗi HTML là<h1>Hello, World</h1>. Khi người dùng truy cập trang gốc, họ sẽ thấy chữ “Hello, World” được hiển thị với định dạng tiêu đề lớn.
@app.route('/user/<name>'): Đây là một route khác của ứng dụng. Route này chứa một biến động<name>, có nghĩa là bạn có thể truyền một giá trị tên vào URL.def hello_user(name): Hàm này nhận giá trị tên từ URL và sử dụng nó để tạo một chuỗi HTML chào đón dựa trên tên người dùng. Ví dụ: nếu bạn truy cập/user/John, bạn sẽ thấy trang web hiển thị “Hello, John!”.
if __name__=="__main__":: Điều kiện này kiểm tra xem script này có được chạy trực tiếp (thay vì được import từ một file khác) hay không.app.run(debug=True, host='0.0.0.0', port=5001): Dòng này chạy ứng dụng Flask trên máy chủ. Ứng dụng sẽ lắng nghe trên cổng 5001 và sẽ có thể truy cập từ mọi địa chỉ IP trên máy chủ (host='0.0.0.0').debug=Trueđược thiết lập để bật chế độ gỡ lỗi, giúp bạn theo dõi và sửa lỗi dễ dàng khi phát triển ứng dụng.
4. Chạy server.
Đối với myapp1.
$ python /home/myproject/myapp1/render_html.py
* Serving Flask app 'render_html'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on all addresses (0.0.0.0)
* Running on http://127.0.0.1:5000
* Running on http://192.168.13.200:5000
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: 143-370-425Đối với myapp2.
$ python /home/myproject/myapp2/app.py
* Serving Flask app 'app'
* Debug mode: on
WARNING: This is a development server. Do not use it in a production deployment. Use a production WSGI server instead.
* Running on all addresses (0.0.0.0)
* Running on http://127.0.0.1:5001
* Running on http://192.168.13.200:5001
Press CTRL+C to quit
* Restarting with stat
* Debugger is active!
* Debugger PIN: 143-370-4255. Kiểm tra.
Đối với APP1.
Nếu truy cập đường dẫn root http://192.168.13.200:5000/sẽ chuyển hướng qua templates/index.html.
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('index.html')Và đây là kết quả.
Nếu truy cập vào http://192.168.13.200:5000/myapp2/DemoAPP sẽ dùng module requests trong hàm call_app2 để chuyển hướng sang URL của APP2 để thực thi hàm.
@app.route('/myapp2/<user>')
def call_app2(user):
x = requests.get(f'http://127.0.0.1:5001/user/{user}')Với DemoAPP là biến user được truyền vào. Bạn sẽ có kết quả.
Đối với APP2.
Đơn giản với đường dẫn root thì sẽ có nội dung là Hello, World.
@app.route('/')
def hello_world():
return "<h1>Hello, World</h1>"Kết quả.
Nếu chúng ta truyền biến user ví dụ http://192.168.13.200:5001/user/DemoUser.
@app.route('/user/<name>')
def hello_user(name):
return f"<h1>Hello, {name}!</h1>"Kết quả.
5. CSS.
CSS, viết tắt của “Cascading Style Sheets,” là một ngôn ngữ định dạng và kiểu dáng cho trang web và các tài liệu HTML. CSS được sử dụng để điều chỉnh cách hiển thị và bố trí của các phần tử HTML trên trang web, bao gồm màu sắc, font chữ, kích thước, khoảng cách, và nhiều thuộc tính khác.
Các tính năng quan trọng của CSS bao gồm:
- Kiểu dáng: CSS cho phép bạn xác định kiểu dáng cho các phần tử HTML, chẳng hạn như font chữ, màu sắc nền, màu văn bản, biểu đồ đường viền, và các tính năng khác.
- Bố trí: Bạn có thể sử dụng CSS để điều chỉnh bố trí của các phần tử trên trang web, ví dụ như căn giữa, căn lề, đặt độ rộng và chiều cao của các phần tử.
- Phân cấp và ưu tiên: CSS cho phép bạn xác định các quy tắc kiểu dáng theo mức độ ưu tiên và phân cấp. Điều này có nghĩa là bạn có thể ghi đè hoặc kế thừa các kiểu dáng từ các quy tắc khác.
- Tách biệt kiểu dáng và nội dung: CSS tách biệt kiểu dáng từ nội dung của trang web, cho phép bạn thay đổi kiểu dáng mà không cần sửa đổi mã HTML gốc.
- Tích hợp: CSS có thể được tích hợp vào trang web bằng cách sử dụng các tệp CSS riêng biệt hoặc bằng cách bên ngoài thông qua các khối CSS nhúng trong mã HTML.
Ví dụ cơ bản về việc sử dụng CSS trong HTML, dưới đây ta thêm tùy chọn style vào index.html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Pages</title>
</head>
<body>
<h1 style="color: blue;">Demo Render HTML</h1>
</body>
</html>Kết quả.
6. Truyền biến vào HTML.
Thêm {{content}} vào thẻ h1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Pages</title>
</head>
<body>
<h1 style="color: blue;">Demo {{content}}</h1>
{% for name in context %}
<h2 style="color: red;">{{name}}</h2>
{% endfor %}
</body>
</html>Hãy tạo một list context=["GiangNVH", "LuanPM", "HoangHD"] trong myapp1/render_html.py.
from flask import Flask, redirect, url_for, render_template
import requests
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('index.html', content="Flask Project", context=["GiangNVH", "LuanPM", "HoangHD"])
@app.route('/myapp2/<user>')
def call_app2(user):
x = requests.get(f'http://127.0.0.1:5001/user/{user}')
return x.text
if __name__=="__main__":
app.run(debug=True, host='0.0.0.0', port=5000)Chạy server và bạn có kết quả ở myapp1.
Hoặc 1 ví dụ khác hơn sử dụng list và dictionary trong Python. Chỉnh sủa {{content}} vào thẻ h1.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home Pages</title>
</head>
<body>
<h1 style="color: blue;">Demo {{content}}</h1>
{% for name in context.infra_team %}
<h2 style="color: red;">{{name}}</h2>
{% endfor %}
{% for name in context.hosting_team %}
<h2 style="color:cadetblue;">{{name}}</h2>
{% endfor %}
{{context.project}}
</body>
</html>Hãy sửa lại để thêm list và dictionary trong myapp1/render_html.py.
from flask import Flask, redirect, url_for, render_template
import requests
app = Flask(__name__)
@app.route('/')
def hello_world():
context = {
"infra_team": ["GiangNVH", "LuanPM", "HoangHD"],
"hosting_team": ["PhiNH","ThanhNS"],
"project": "flask",
}
return render_template('index.html', content="Flask Project", context=context)
@app.route('/myapp2/<user>')
def call_app2(user):
x = requests.get(f'http://127.0.0.1:5001/user/{user}')
return x.text
if __name__=="__main__":
app.run(debug=True, host='0.0.0.0', port=5000)Và bây giờ bạn có kết quả.
