ساخت یک To-Do List ساده با فریم‌ورک Flask

در این مقاله، قصد داریم یک برنامه To-Do List ساده را با استفاده از فریم‌ورک Flask ایجاد کنیم. این آموزش به صورت قدم‌به‌قدم خواهد بود، تا شما بتوانید با ساختار کلی یک برنامه وب با Flask آشنا شوید.

پیش‌نیازها

قبل از شروع، مطمئن شوید که پایتون روی سیستم شما نصب است. همچنین، یک محیط مجازی ایجاد کنید و Flask را نصب کنید.

قدم 1: ایجاد محیط مجازی و نصب فلسک

هدف: ایجاد یک محیط ایزوله برای پروژه و نصب Flask.

مراحل:

یک پوشه جدید برای پروژه ایجاد کنید و وارد آن شوید:

				
					mkdir flask_todo && cd flask_todo

2. یک محیط مجازی بسازید:

				
					python -m venv venv

3. محیط مجازی را فعال کنید:

- در ویندوز:

				
					venv\Scripts\activate

در لینوکس/مک:

				
					source venv/bin/activate

4. Flask را نصب کنید:

				
					pip install flask

قدم 2: ایجاد فایل اصلی برنامه

هدف: ایجاد فایل اصلی برای اجرای برنامه Flask.

مراحل:

در پوشه پروژه، یک فایل جدید به نام app.py ایجاد کنید.
کد زیر را در app.py قرار دهید:

				
					from flask import Flask

app = Flask(__name__)

@app.route('/')
def home():
    return "Hello, Flask!"

if __name__ == '__main__':
    app.run(debug=True)

3. برنامه را اجرا کنید:

				
					   python app.py

4. در مرورگر http://127.0.0.1:5000 را باز کنید. اگر پیام “Hello, Flask!” را دیدید، یعنی Flask به درستی اجرا شده است.

قدم 3: افزودن قالب HTML برای نمایش وظایف

هدف: نمایش لیست وظایف در یک صفحه HTML.

مراحل:
1. یک پوشه به نام templates در پوشه پروژه ایجاد کنید.
2. درون templates یک فایل به نام index.html بسازید و کد زیر را در آن قرار دهید:

				
					<!DOCTYPE html>
<html lang="fa">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My TODO</title>
</head>
<body data-rsssl=1>
    <h1>Tasks:</h1>
    <ul>
        {% for task in tasks %}
            <li>{{ task }}</li>
        {% endfor %}
    </ul>
</body>
</html>

3. app.py را به‌روزرسانی کنید تا از این قالب استفاده کند:

				
					from flask import Flask, render_template

app = Flask(__name__)

tasks = ['task1', 'task2', 'task3']

@app.route('/')
def home():
    return render_template('index.html', tasks=tasks)

if __name__ == '__main__':
    app.run(debug=True)

4. برنامه را اجرا کنید و صفحه اصلی را در مرورگر باز کنید. حالا لیست وظایف نمایش داده می‌شود.

قدم 4: افزودن فرم برای اضافه کردن وظایف جدید

هدف: امکان افزودن وظایف جدید از طریق فرم HTML.

مراحل:

index.html را به‌روزرسانی کنید تا یک فرم برای اضافه کردن وظایف داشته باشد:

				
					<form action="/add" method="post">
    <input type="text" name="task" required>
    <button type="submit">ADD</button>
</form>

2. در app.py یک مسیر جدید برای دریافت و ذخیره وظایف اضافه کنید:

				
					from flask import Flask, render_template, request, redirect

app = Flask(__name__)

tasks = []

@app.route('/')
def home():
    return render_template('index.html', tasks=tasks)

@app.route('/add', methods=['POST'])
def add_task():
    task = request.form.get('task')
    if task:
        tasks.append(task)
    return redirect('/')

if __name__ == '__main__':
    app.run(debug=True)

3. حالا می‌توانید وظایف جدید را از طریق فرم اضافه کنید.

قدم 5: افزودن دکمه حذف وظایف

هدف: امکان حذف وظایف از لیست.

مراحل:

index.html را ویرایش کنید و دکمه حذف به هر وظیفه اضافه کنید:

				
					<ul>
    {% for task in tasks %}
        <li>
            {{ task }}
            <form action="/delete" method="post" style="display:inline;">
                <input type="hidden" name="task" value="{{ task }}">
                <button type="submit">Delete</button>
            </form>
        </li>
    {% endfor %}
</ul>

2. در app.py یک مسیر جدید برای حذف وظایف اضافه کنید:

				
					@app.route('/delete', methods=['POST'])
def delete_task():
    task = request.form.get('task')
    if task in tasks:
        tasks.remove(task)
    return redirect('/')

3. برنامه را اجرا کنید و تست کنید که آیا می‌توان وظایف را حذف کرد یا خیر.

نتیجه‌گیری

در این مقاله، یاد گرفتیم چگونه یک To-Do List ساده را با Flask پیاده‌سازی کنیم. مراحل شامل ایجاد محیط مجازی، راه‌اندازی سرور، نمایش لیست وظایف، افزودن فرم و امکان حذف وظایف بودند. می‌توانید این پروژه را گسترش دهید و وظایف را در یک پایگاه داده ذخیره کنید تا اطلاعات بعد از راه‌اندازی مجدد برنامه حفظ شوند.

همچنین بخوانید: برنامه دانلود از اینستاگرام با پایتون