📌 Giới thiệu.
Trong phần trước, chúng ta đã thiết lập môi trường phát triển và chuẩn bị sẵn sàng cho hành trình xây dựng website bằng Python. Bây giờ, chúng ta sẽ đi sâu vào việc xây dựng một ứng dụng Flask đơn giản, làm nền tảng để phát triển các tính năng phức tạp hơn trong tương lai. Flask là một framework nhẹ nhưng mạnh mẽ, giúp bạn dễ dàng bắt đầu và nhanh chóng thấy kết quả trên website của mình.
🌐 Bước 1: Cài Đặt Flask và Thiết Lập Ứng Dụng Cơ Bản
1.1 Tạo Môi Trường Ảo (Virtual Environment).
Trước khi bắt đầu, việc tạo môi trường ảo (virtual environment) là rất quan trọng. Nó giúp cô lập các thư viện và gói mà bạn sẽ sử dụng trong dự án, tránh xung đột với các dự án khác.
Tạo môi trường ảo:
python -m venv myprojectenv
Kích hoạt môi trường ảo:
Trên Windows:
myprojectenv\Scripts\activate
Trên macOS/Linux:
source myprojectenv/bin/activate
1.2 Cài Đặt Flask
Sau khi môi trường ảo đã được kích hoạt, tiếp theo là cài đặt Flask bằng pip:
pip install Flask
1.3 Tạo Tệp Python Đầu Tiên (app.py)
Trong thư mục dự án, tạo một tệp có tên là app.py và thêm đoạn mã sau:
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return "Hello, Flask!"
if __name__ == '__main__':
app.run(debug=True)
Đoạn mã này thiết lập một ứng dụng Flask cơ bản và tạo một route mặc định (/) trả về chuỗi "Hello, Flask!" khi truy cập vào website.
1.4 Chạy Ứng Dụng Flask
Trên dòng lệnh, chạy lệnh:
python app.py
Khi ứng dụng chạy, bạn có thể truy cập vào địa chỉ http://127.0.0.1:5000/ trên trình duyệt để thấy kết quả.
🌐 Bước 2: Tạo Và Quản Lý Các Route Để Điều Hướng Trong Website
2.1 Hiểu Về Route Trong Flask
Route là đường dẫn cho phép người dùng truy cập vào các trang khác nhau trên website. Mỗi route tương ứng với một URL cụ thể và được định nghĩa trong mã Python.
2.2 Tạo Các Route Mới.
Để tạo thêm các trang như "About" và "Contact", hãy thêm các route sau vào tệp app.py:
@app.route('/about')
def about():
return "This is the About page."
@app.route('/contact')
def contact():
return "This is the Contact page."
2.3 Chạy Lại Ứng Dụng.
Lưu các thay đổi và chạy lại ứng dụng bằng cách nhập python app.py trên dòng lệnh. Sau đó, bạn có thể truy cập các URL http://127.0.0.1:5000/about và http://127.0.0.1:5000/contact để xem nội dung của các trang mới.
🎨 Bước 3: Sử Dụng Template Để Tạo Giao Diện Người Dùng Thân Thiện.
3.1 Tạo Thư Mục Templates
Flask sử dụng thư mục templates để lưu trữ các tệp HTML. Trong thư mục dự án của bạn, tạo một thư mục có tên là templates.
3.2 Tạo Template HTML
Trong thư mục templates, tạo một tệp có tên là index.html với nội dung sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Flask Website</title>
</head>
<body>
<h1>Welcome to My Flask Website!</h1>
<p>This is a simple website built with Flask.</p>
</body>
</html>
3.3 Sử Dụng Template Trong Flask
Thay đổi route home trong app.py để sử dụng template vừa tạo:
from flask import render_template
@app.route('/')
def home():
return render_template('index.html')
3.4 Tối Ưu Hóa UX/UI Design
Bạn có thể sử dụng CSS và JavaScript để tối ưu hóa giao diện người dùng. Các tệp CSS và JS nên được đặt trong thư mục static và liên kết với các template HTML để tăng tính thẩm mỹ và trải nghiệm người dùng tốt hơn.
Mẹo nhỏ: Hãy đảm bảo rằng giao diện của bạn không chỉ thân thiện với người dùng mà còn SEO-friendly, giúp website của bạn xếp hạng cao hơn trên các công cụ tìm kiếm.
📈 Kết Luận
Bằng cách hoàn thành các bước trên, bạn đã xây dựng thành công một ứng dụng Flask cơ bản với các route để điều hướng và giao diện người dùng thân thiện nhờ sử dụng template. Hãy tiếp tục khám phá và mở rộng dự án của bạn, tối ưu hóa layout và UX/UI Design để tạo ra một website hoàn chỉnh và tối ưu cho SEO-friendly Design.
🔜 Đừng bỏ lỡ Phần 3 trong series này, nơi chúng ta sẽ tiếp tục với việc làm việc với cơ sở dữ liệu trong Flask! 📊
