ساخت سیستم مدیریت تصاویر با پایتون و Flask

ساخت سیستم مدیریت تصاویر با پایتون و Flask

در این مقاله، به آموزش گام به گام ساخت یک سیستم مدیریت تصاویر (Image Management System) ساده با استفاده از پایتون و فریم‌ورک Flask خواهیم پرداخت. این سیستم به کاربران امکان آپلود، نمایش، حذف و سازماندهی تصاویر را می‌دهد. این پروژه یک مثال عملی عالی برای توسعه وب با پایتون است و مفاهیم کلیدی مانند مدیریت فایل‌ها، کار با فرم‌ها، و استفاده از کتابخانه‌های پایتون را پوشش می‌دهد.

پیش‌نیازها

قبل از شروع، اطمینان حاصل کنید که موارد زیر را نصب کرده‌اید:

  • پایتون (نسخه 3.6 یا بالاتر)
  • Flask: pip install Flask
  • Werkzeug: pip install Werkzeug (معمولاً همراه Flask نصب می‌شود، اما در صورت نیاز جداگانه نصب کنید)
  • Pillow (PIL): pip install Pillow (برای پردازش تصویر)

ساختار پروژه

ساختار پروژه ما به شکل زیر خواهد بود:

  • app.py: فایل اصلی برنامه Flask
  • templates/: پوشه‌ای برای فایل‌های HTML
  • static/images/: پوشه‌ای برای ذخیره تصاویر آپلود شده

مرحله اول: ایجاد فایل اصلی برنامه (app.py)

فایل app.py را با محتوای زیر ایجاد کنید:

from flask import Flask, render_template, request, redirect, url_for
from werkzeug.utils import secure_filename
from PIL import Image
import os

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = 'static/images'
app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'gif'}

def allowed_file(filename):
    return '.' in filename and filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']

@app.route('/')
def index():
    images = os.listdir(app.config['UPLOAD_FOLDER'])
    return render_template('index.html', images=images)

@app.route('/upload', methods=['POST'])
def upload_file():
    if 'file' not in request.files:
        return redirect(url_for('index'))

    file = request.files['file']

    if file.filename == '':
        return redirect(url_for('index'))

    if file and allowed_file(file.filename):
        filename = secure_filename(file.filename)
        try:
            img = Image.open(file)
            img.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
        except Exception as e:
            return "مشکل در پردازش تصویر: " + str(e)
        return redirect(url_for('index'))
    else:
        return "فرمت فایل مجاز نیست."

@app.route('/delete/')
def delete_file(filename):
    file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
    try:
        os.remove(file_path)
    except OSError as e:
        return "خطا در حذف فایل: " + str(e)
    return redirect(url_for('index'))

if __name__ == '__main__':
    os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
    app.run(debug=True)

در این کد:

  • UPLOAD_FOLDER: مسیری که تصاویر در آن ذخیره می‌شوند.
  • ALLOWED_EXTENSIONS: لیست فرمت‌های مجاز برای آپلود.
  • allowed_file: تابعی برای بررسی اینکه آیا فایل آپلود شده فرمت مجاز دارد یا خیر.
  • index: مسیری که لیست تصاویر را نمایش می‌دهد.
  • upload_file: مسیری که فایل آپلود شده را پردازش و ذخیره می‌کند.
  • delete_file: مسیری که فایل را حذف می‌کند.

مرحله دوم: ایجاد فایل HTML (index.html)

فایل 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>سیستم مدیریت تصاویر</title>
</head>
<body>
    <h1>سیستم مدیریت تصاویر</h1>

    <form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data">
        <input type="file" name="file">
        <button type="submit">آپلود تصویر</button>
    </form>

    <h2>لیست تصاویر</h2>
    <ul>
        {% for image in images %}
            <li>
                <img src="{{ url_for('static', filename='images/' + image) }}" alt="{{ image }}" width="200">
                <a href="{{ url_for('delete_file', filename=image) }}">حذف</a>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

در این کد HTML:

  • یک فرم برای آپلود فایل وجود دارد.
  • یک لیست از تصاویر آپلود شده نمایش داده می‌شود.
  • برای هر تصویر، یک لینک برای حذف آن وجود دارد.

مرحله سوم: اجرای برنامه

در ترمینال، به دایرکتوری پروژه بروید و دستور زیر را اجرا کنید:

python app.py

سپس، مرورگر خود را به آدرس http://127.0.0.1:5000/ باز کنید. اکنون می‌توانید تصاویر را آپلود، نمایش و حذف کنید.

توضیحات تکمیلی و بهبودها

  • امنیت: این سیستم یک مثال ساده است و فاقد ویژگی‌های امنیتی پیشرفته است. در یک برنامه واقعی، باید اقدامات امنیتی مانند اعتبارسنجی ورودی، محافظت در برابر حملات CSRF و محدود کردن اندازه فایل را در نظر بگیرید.
  • مدیریت خطا: مدیریت خطا در این سیستم بسیار ساده است. در یک برنامه واقعی، باید خطاها را به طور مناسب مدیریت کنید و پیام‌های خطای مناسبی را به کاربر نمایش دهید.
  • صفحه‌بندی: اگر تعداد تصاویر زیاد باشد، لیست تصاویر می‌تواند بسیار طولانی شود. برای بهبود تجربه کاربری، می‌توانید از صفحه‌بندی استفاده کنید.
  • پردازش تصویر: می‌توانید از کتابخانه Pillow برای پردازش تصاویر، مانند تغییر اندازه، برش و اعمال فیلترها، استفاده کنید.
  • پایگاه داده: برای ذخیره اطلاعات مربوط به تصاویر، مانند نام فایل، تاریخ آپلود و توضیحات، می‌توانید از یک پایگاه داده استفاده کنید.
  • رابط کاربری: می‌توانید از CSS و JavaScript برای بهبود رابط کاربری سیستم استفاده کنید.

نتیجه‌گیری

در این مقاله، یک سیستم مدیریت تصاویر ساده با استفاده از پایتون و Flask ساختیم. این پروژه یک نقطه شروع عالی برای یادگیری توسعه وب با پایتون است و می‌تواند به عنوان پایه‌ای برای ساخت سیستم‌های پیچیده‌تر مورد استفاده قرار گیرد. با افزودن ویژگی‌های امنیتی، مدیریت خطا و رابط کاربری بهتر، می‌توانید یک سیستم مدیریت تصاویر قدرتمند و کاربردی ایجاد کنید.

توسعه وب با پایتون

فیسبوکXپینترستلینکدینایمیل

نوشته های مرتبط ...

بدون دیدگاه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *