1. Giới thiệu.
Flash messages là một khái niệm trong phát triển web được sử dụng để hiển thị các thông báo tạm thời cho người dùng sau một tương tác trên trang web. Chúng thường được sử dụng để cung cấp phản hồi ngắn gọn về các hành động mà người dùng vừa thực hiện, chẳng hạn như đăng nhập thành công, đăng ký thành công, lỗi trong quá trình thực hiện một biểu mẫu, hoặc bất kỳ tương tác nào khác trên trang web.
Một số đặc điểm của flash messages bao gồm:
- Tạm thời: Flash messages thường chỉ tồn tại trong một khoảng thời gian ngắn và biến mất sau khi người dùng xem chúng hoặc sau khi họ thực hiện một tương tác khác trên trang web.
- Hiển thị một lần: Flash messages thường chỉ hiển thị một lần duy nhất sau một tương tác. Sau khi người dùng đã xem chúng, chúng thường không xuất hiện lại khi người dùng làm mới trang hoặc thực hiện các tương tác khác.
- Thông báo trạng thái: Flash messages thường được sử dụng để thông báo về trạng thái của một tương tác, chẳng hạn như thành công, thất bại hoặc lỗi. Chúng giúp người dùng biết được kết quả của hành động mà họ vừa thực hiện.
- Thường xuất hiện ở cạnh hoặc đầu trang: Flash messages thường được hiển thị ở cạnh hoặc đầu trang của trang web để thu hút sự chú ý của người dùng và dễ dàng nhận biết.
- Có thể tùy chỉnh nội dung và màu sắc: Flash messages thường có thể được tùy chỉnh về nội dung và màu sắc để phù hợp với thiết kế và phong cách của trang web.
Trong các ứng dụng web, Flash messages thường được sử dụng để cung cấp thông tin quan trọng cho người dùng và tạo trải nghiệm tương tác tốt hơn.
2. Thực hành.
Xây dựng một cấu trúc file và thư mục như sau.
../myapp/
├── flash-messages.py
└── templates
├── base.html
├── home.html
├── login.html
└── user.html
1 directory, 5 filesNội dung file home.html sẽ giữ nguyên như bài trước.
{% extends "base.html" %}
{% block title %} Home Page {% endblock %}
{% block content %}
<h2>This is Home Pages</h2>
{% endblock %}– File base.html bỏ bớt li, form search và chỉnh sửa lại chút xíu với 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>{% block title %} {% endblock %}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<h1>My website</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/home">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/login">Login </a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/logout">Logout</a>
</li>
</ul>
</div>
</nav>
{% block content %} {% endblock %}
</body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</html>– Với file flash-messages.py chúng ta import thêm module flash.
from flask import Flask, redirect, url_for, render_template, request, session, flash
from datetime import timedelta
app = Flask(__name__)
app.config["SECRET_KEY"] = "hoanghd-secret-key"
app.permanent_session_lifetime = timedelta(minutes=1)
@app.route('/home')
def hello_world():
return render_template("home.html")
@app.route('/login', methods=["POST", "GET"])
def login():
if request.method == "POST":
user_name = request.form["name"]
session.permanent = True
if user_name:
session["user"] = user_name
flash("You logged in successfully!", "info")
return render_template("user.html", user=user_name)
if "user" in session:
flash("You have already logged in!", "info")
name = session["user"]
return render_template("user.html", user=name)
return render_template('login.html')
@app.route('/user')
def hello_user():
if "user" in session:
name = session["user"]
return render_template("user.html", user=name)
else:
flash("You haven't logged in!", "info")
return redirect(url_for("login"))
@app.route('/logout')
def logout():
flash("You logged out!", "info")
session.pop("user", None)
return redirect(url_for("login"))
if __name__ == "__main__":
app.run(debug=True, host='0.0.0.0', port=5000)Những flash message này được tạo để cung cấp thông tin cho người dùng về trạng thái và kết quả của các hành động như đăng nhập, đăng xuất và quyền truy cập vào các trang. Chúng sẽ được hiển thị lên trên trang web để thông báo cho người dùng và giúp họ hiểu trạng thái của phiên làm việc của họ.
flash("You logged in successfully!", "info"): Dòng này tạo một flash message với nội dung “You logged in successfully!” và loại (“info”). Flash message này thông báo rằng người dùng đã đăng nhập thành công. Loại “info” thường được sử dụng để biểu thị thông tin bình thường hoặc thành công.flash("You have already logged in!", "info"): Dòng này tạo một flash message khác với nội dung “You have already logged in!” và loại “info”. Flash message này thông báo rằng người dùng đã đăng nhập trước đó và không cần phải đăng nhập lại.flash("You haven't logged in!", "info"): Dòng này tạo một flash message với nội dung “You haven’t logged in!” và loại “info”. Flash message này được sử dụng khi người dùng truy cập một trang yêu cầu đăng nhập mà họ chưa đăng nhập. Nó thông báo rằng người dùng cần phải đăng nhập trước.flash("You logged out!", "info"): Dòng này tạo một flash message với nội dung “You logged out!” và loại “info”. Flash message này thông báo rằng người dùng đã đăng xuất khỏi hệ thống.
– Tiếp theo thêm đoạn code dưới vào 2 file user.html và login.html.
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for m in messages %}
<p>{{m}}</p>
{% endfor %}
{% endif %}
{% endwith %}Đoạn code trên là một mẫu (template) được sử dụng để hiển thị flash messages trên trang web.
{% with messages = get_flashed_messages() %}: Đoạn này bắt đầu một khốiwith, nơi một biến tạm thờimessagesđược khởi tạo bằng kết quả của hàmget_flashed_messages(). Hàm này là một hàm trong Flask được sử dụng để lấy danh sách các flash messages đã được tạo trước đó trong phiên làm việc hiện tại.{% if messages %}: Đoạn code kiểm tra xem có flash messages nào trong biếnmessageskhông. Nếu có ít nhất một flash message, điều kiện này là đúng.{% for m in messages %}: Nếu có flash messages, đoạn code này bắt đầu một vòng lặp để lặp qua danh sách các flash messages trong biếnmessages. Mỗi flash message được lặp qua lần lượt và được lưu trong biếnm.<p>{{m}}</p>: Trong mỗi vòng lặp, đoạn code này hiển thị nội dung của flash messagembằng cách đặt nó trong một thẻ<p>. Điều này sẽ tạo ra một đoạn văn bản trong thẻ<p>trên trang web với nội dung của flash message.{% endfor %}: Khi tất cả các flash messages đã được lặp qua và hiển thị, vòng lặp kết thúc.{% endif %}: Đoạn code này đánh dấu kết thúc của điều kiện. Nếu không có flash messages, thì khối{% if messages %}sẽ không được thực hiện.{% endwith %}: Đoạn này đánh dấu kết thúc của khốiwith. Mọi thứ bên trong khốiwithđã hoàn thành.
Kết quả của đoạn code này là hiển thị tất cả các flash messages có trong biến messages dưới dạng các đoạn văn bản được đặt trong thẻ <p> trên trang web. Điều này cho phép người dùng thấy các thông báo tạm thời sau khi thực hiện các hành động như đăng nhập, đăng xuất hoặc thao tác trên trang web.
– File user.html.
{% extends "base.html" %}
{% block title %} Login Page {% endblock %}
{% block content %}
<h2>Hello {{user}}</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for m in messages %}
<p>{{m}}</p>
{% endfor %}
{% endif %}
{% endwith %}
{% endblock %}– Nội dung trang login.html.
{% extends "base.html" %}
{% block title %} Login Page {% endblock %}
{% block content %}
<h2>This is Login Pages</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for m in messages %}
<p>{{m}}</p>
{% endfor %}
{% endif %}
{% endwith %}
<div style="margin-left: 50px;">
<form action="/login" method="post">
<label for="name">Name</label>
<input type="text" name="name" id="name"></input>
<button style="background-color: rgb(155, 19, 132); color: white;" type="submit">Login</button>
</form>
</div>
{% endblock %}3. Kiểm tra kết quả.
Hãy dùng trình duyệt login vào http://192.168.13.200:5000/home và xem kết quả của mình ở dưới nhé.
