django

ساختن یک گالری تصویر با Django و Bootstrap 5

محمد عزیززاده
محمد عزیززاده
7 دقیقه زمان مطالعه
ساختن یک گالری تصویر با Django و Bootstrap 5
ساختن یک گالری تصویر با Django و Bootstrap 5

در مقاله امروز، ساخت گالری تصاویر با استفاده از جنگو و بوت استرپ 5 را بررسی خواهیم کرد.

Contents
راه اندازی پروژهداده ها را مدل کنیدحذف عملکرداجرای برنامه جنگو

جنگو یک چارچوب وب قوی پایتون است که توسعه سریع و یک رویکرد طراحی واضح و عملی را ترویج می‌کند.

بسیاری از چالش‌های توسعه وب را ساده می‌کند و به شما این امکان را می‌دهد که بدون شروع از ابتدا بر روی ساخت برنامه خود تمرکز کنید.

راه اندازی پروژه

ابتدا باید پروژه جنگو خود را راه اندازی کنیم.

Django را نصب کنید (اگر قبلاً این کار را نکرده اید)، سپس یک پروژه جدید و یک برنامه با نام “گالری” ایجاد کنید:

$ pip install django
$ django-admin startproject ImageGallery
$ cd ImageGallery
$ python manage.py startapp gallery

برای استفاده از ImageField (بعد در مدل) باید بسته Pillow را نیز نصب کنیم:

$ pip install Pillow

داده ها را مدل کنید

در gallery/models.py خود، یک مدل برای ذخیره داده های تصویر ایجاد کنید:

from django.db import models

class Image(models.Model):
    title = models.CharField(max_length=200)
    description = models.TextField()
    image = models.ImageField(upload_to='images/')

این مدل یک تصویر را با عنوان، توضیحات و خود فایل تصویر تعریف می کند.

در مرحله بعد، به یاد داشته باشید که برنامه خود را به INSTALLED_APPS در فایل settings.py خود اضافه کنید و تنظیمات را برای مدیریت فایل های رسانه پیکربندی کنید:

INSTALLED_APPS = [
    ...
    'gallery'
]

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media/')

اکنون مدل خود را در gallery/admin.py ثبت کنید:

from django.contrib import admin
from .models import Image

admin.site.register(Image)

migrations را اجرا کنید:

$ python manage.py makemigrations
$ python manage.py migrate

ImageForm را ایجاد کنید

ابتدا باید یک فایل forms.py در برنامه گالری خود ایجاد کنید.

اگر هنوز وجود ندارد، ادامه دهید و آن را ایجاد کنید.

سپس در gallery/forms.py کد زیر را اضافه کنید:

from django import forms
from .models import Image

class ImageForm(forms.ModelForm):
    class Meta:
        model = Image
        fields = ['title', 'description', 'image']

این کلاس ImageForm از forms.ModelForm ارث می برد و به مدل Image متصل می شود.

ویژگی fields در کلاس Meta مشخص می کند که کدام فیلدها از مدل Image باید در فرم گنجانده شوند.

ایجاد نماها و الگوها

حال، بیایید نماهایی را برای نمایش و آپلود تصاویر ایجاد کنیم.

در gallery/views.py:

from django.shortcuts import render, redirect
from .models import Image
from .forms import ImageForm

def gallery(request):
    images = Image.objects.all()
    return render(request, 'gallery.html', {'images': images})
def upload_image(request):
    if request.method == 'POST':
        form = ImageForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
            return redirect('gallery')
    else:
        form = ImageForm()
    return render(request, 'upload.html', {'form': form})

در کد بالا، نمای گالری تمامی تصاویر را از پایگاه داده بازیابی کرده و به قالب ارسال می کند.

نمای upload_image هم درخواست GET را که فرم را نمایش می دهد و هم درخواست POST را که فرم را پردازش می کند مدیریت می کند.

در مرحله بعد، یک دایرکتوری templates در برنامه گالری خود ایجاد کنید و یک فایل base.html اضافه کنید.

در این فایل فایل های Bootstrap CSS و JS را قرار دهید:

<!doctype html>
<html lang="en">
<head>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Image App</title>
</head>
<body>
    <div class="container mt-5">
        {% block content %}
        {% endblock %}
    </div>
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>

سپس، gallery.html را ایجاد کنید:

{% extends 'base.html' %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <a href="{% url 'upload' %}" class="btn btn-primary">Upload Image</a>
    </div>
</div>
<div class="row pt-5">
    {% for image in images %}
    <div class="col-md-4">
        <div class="card mb-4 shadow-sm">
            <img src="{{ image.image.url }}" class="card-img-top" alt="{{ image.title }}">
            <div class="card-body">
                <h5 class="card-title">{{ image.title }}</h5>
                <p class="card-text">{{ image.description }}</p>
                <a href="{% url 'delete_image' image.id %}" class="btn btn-danger">Delete</a>
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

و upload.html:

{% extends 'base.html' %}

{% block content %}
<form method="post" enctype="multipart/form-data" class="my-4">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" class="btn btn-primary">Upload</button>
</form>
{% endblock %}

در نهایت، gallery/urls.py خود را به‌روزرسانی کنید تا مسیرهای جدید را شامل شود، اگر فایلی هنوز وجود ندارد، آن را ایجاد کنید:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.gallery, name='gallery'),
    path('upload/', views.upload_image, name='upload'),
]

و urls.py سطح پروژه خود را به‌روزرسانی کنید تا نشانی‌های اینترنتی گالری و الگوهای url رسانه را برای ارائه فایل‌های رسانه در بر گیرد:

from django.conf import settings
from django.conf.urls.static import static
from django.contrib import admin
from django.urls import include, path

urlpatterns = [
    path('gallery/', include('gallery.urls')),
    ...
]
if settings.DEBUG:  # Only serve media files in development, not in production
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

حذف عملکرد

برای اینکه کاربران بتوانند تصاویر را حذف کنند، باید یک نمای حذف و یک الگوی مربوطه ایجاد کنیم.

در gallery/views.py:

from django.shortcuts import render, redirect, get_object_or_404

...

def delete_image(request, pk):
    image = get_object_or_404(Image, pk=pk)
    if request.method == 'POST':
        image.delete()
        return redirect('gallery')
    return render(request, 'confirm_delete.html', {'image': image})

gallery/urls.py خود را به‌روزرسانی کنید تا مسیر جدید را در بر بگیرد:

from django.urls import path
from . import views

urlpatterns = [
    path('', views.gallery, name='gallery'),
    path('upload/', views.upload_image, name='upload'),
    path('delete/<int:pk>/', views.delete_image, name='delete_image'),
]

سپس، confirm_delete.html را ایجاد کنید:

{% extends 'base.html' %}

{% block content %}
<div class="alert alert-danger" role="alert">
    Are you sure you want to delete "{{ image.title }}"?
</div>
<form method="POST" class="my-4">
    {% csrf_token %}
    <button type="submit" class="btn btn-danger">Yes, delete</button>
</form>
<a href="{% url 'gallery' %}" class="btn btn-primary">No, take me back</a>
{% endblock %}

اجرای برنامه جنگو

برای اجرای برنامه جنگو از دستور زیر استفاده می کنیم:

$ python manage.py runserver

اکنون می توانیم به برنامه خود در http://127.0.0.1:8000/gallery/ دسترسی داشته باشیم:

نتیجه

با Django و Bootstrap 5، می توانید یک گالری تصاویر شیک با قابلیت های آپلود و حذف ایجاد کنید.

جنگو یک فریمورک قدرتمند است که می تواند کارهای پیچیده را انجام دهد، اما برای برنامه های ساده ای مانند این نیز عالی است.

از طرف دیگر، بوت استرپ ظاهری شیک و مدرن را از جعبه ارائه می دهد.

منبع مطلب

این مقاله را به اشتراک بگذارید
مقاله قبلی لاگ نویسی در fast api لاگ نویسی در fast api
مقاله بعدی چگونه یک ویجت فرم سفارشی برای Django بسازیم چگونه یک ویجت فرم سفارشی برای Django بسازیم
پیام بگذارید