در این مرحله میخواهیم قابلیت اضافه کردن یک آیتم جدید به لیست Todo را فراهم کنیم. برای این کار از فرم HTML و مسیر POST در Flask استفاده میکنیم.
بهروزرسانی app.py
from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)
# دادههای اولیه بدون دیتابیس
todos = [
{"id": 1, "task": "Learn Flask basics", "done": False},
{"id": 2, "task": "Write first Flask app", "done": False},
{"id": 3, "task": "Understand Jinja templates", "done": False}
]
# مسیر اصلی برای نمایش todo ها
@app.route("/")
def index():
return render_template("index.html", todos=todos)
# مسیر برای اضافه کردن آیتم جدید
@app.route("/add", methods=["POST"])
def add_todo():
new_task = request.form.get("task")
if new_task:
# آیتم جدید به لیست اضافه میشود
new_id = todos[-1]["id"] + 1 if todos else 1
todos.append({"id": new_id, "task": new_task, "done": False})
return redirect(url_for("index"))
if __name__ == "__main__":
app.run(debug=True)
بهروزرسانی index.html برای اضافه کردن فرم
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
<!-- فرم اضافه کردن آیتم جدید -->
<form action="{{ url_for('add_todo') }}" method="post">
<input type="text" name="task" placeholder="Add new task" required>
<button type="submit">Add</button>
</form>
<ul>
{% for todo in todos %}
<li>{{ todo.id }} - {{ todo.task }} - {{ "Done" if todo.done else "Pending" }}</li>
{% endfor %}
</ul>
</body>
</html>
حالا میتوانید یک تسک جدید وارد کنید و با زدن دکمه Add، تسک به لیست اضافه شده و دوباره صفحه رفرش میشود تا لیست جدید نمایش داده شود.
در قدم بعدی میرویم سراغ ویرایش یک آیتم موجود در لیست Todo.