Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
May 23, 2021 03:53 pm GMT

Django Photo Gallary | Django Project

Hello Friends, Whatsup? I hope you will fine.
In this blog, I am showing you a amazing project - Photo Gallary in Django Framework.

Demo Video

Source Code

1.) settings.py(Add Code)

#Media FilesMEDIA_ROOT = 'D:\\django_projects\\dj_gallary\\main\\static\\media'MEDIA_URL = 'media/'

2.) project/urls.py

from django.contrib import adminfrom django.urls import path, includefrom django.conf import settingsfrom django.conf.urls.static import staticurlpatterns = [    path('admin/', admin.site.urls),    path('', include('main.urls'))] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

3.) views.py

from django.shortcuts import render, redirectfrom django.http import HttpResponsefrom django.views.generic import TemplateViewfrom .models import Postfrom django.contrib import messages# Create your views here.class IndexView(TemplateView):    template_name = 'index.html'    def get(self, request):        all_posts = Post.objects.all().order_by('-id')        params = {"posts": all_posts}        return render(request, self.template_name, params)class UploadView(TemplateView):    template_name = 'upload.html'    def get(self, request):        return render(request, self.template_name)    def post(self, request):        img_title = request.POST['title']        imgName = request.FILES['img_name']        add_img = Post(title=img_title, img_field=imgName)        add_img.save()        messages.success(request, 'Image Added Succefully.')        # print(imgName, title)        return render(request, self.template_name)class DeleteView(TemplateView):    def get(self, request, id):        delete_post = Post.objects.get(id=id)        delete_post.delete()        messages.success(request, 'Image Deleted Succefully.')        return redirect('/')

4.) app/urls.py

from django.urls import pathfrom . import viewsurlpatterns = [    path('', views.IndexView.as_view(), name='index'),    path('upload/', views.UploadView.as_view(), name='upload'),    path('delete/<int:id>/', views.DeleteView.as_view(), name='delete_img')]

5.) models.py

from django.db import models# Create your models here.class Post(models.Model):    title = models.CharField(max_length=200)    img_field = models.ImageField(upload_to='uploads/')    date = models.DateField(auto_now_add=True)    def __str__(self):        return self.title

6.) admin.py

from django.contrib import adminfrom .models import Post# Register your models here.admin.site.register(Post)

7.) templates/index.html

<!doctype html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    {% load static %}    <!-- Bootstrap CSS -->    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">    <title>Django Photo Gallary</title>  </head>  <body style="background-color: black; color: white;">    <div class="container w-75 text-center py-5">      <h2>Django Photo Gallary</h2>      <div class="container">        <a href="{% url 'upload' %}" class="btn btn-outline-primary">Upload Image</a>      </div>    </div>    <div class="container">        {% if messages %}               <div class="container">                   {% for message in messages %}                   <div class="alert alert-{{ message.tags }}" role="alert">                        {{ message }}                   </div>                   {% endfor%}               </div>            {% endif %}        <div class="row">            {% for post in posts %}                <div class="col">                    <img src="{% static post.img_field.url %}" id="image{{forloop.counter}}" alt="{% static post.img_field.url %}"                        style="width: 300px; height: 300px;">                    <h3>{{post.title}} <a href="{% url 'delete_img' post.id %}" class="btn btn-danger">Delete</a></h3>                    <p class="text-muted">{{post.date}}</p>                </div>            {% endfor %}        </div>    </div>    <!-- Option 1: Bootstrap Bundle with Popper -->    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>  </body></html>

8.) templates/upload.html

<!doctype html><html lang="en">  <head>    <!-- Required meta tags -->    <meta charset="utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1">    {% load static %}    <!-- Bootstrap CSS -->    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">    <title>Django Photo Gallary</title>  </head>  <body style="background-color: black; color: white;">    <div class="container w-75 text-center py-5">      <h2>Django Photo Gallary</h2>    </div>    <div class="mb-3 container w-50">        <div class="row">            {% if messages %}               <div class="container">                   {% for message in messages %}                   <div class="alert alert-{{ message.tags }}" role="alert">                        {{ message }}                   </div>                   {% endfor%}               </div>            {% endif %}            <form action="{% url 'upload' %}" method="post" enctype="multipart/form-data">                {% csrf_token %}                <input type="text" class="form-control my-4" name="title" placeholder="Title for Image">            <div class="col">                <input type="file" class="form-control" name="img_name" id="exampleFormControlInput1">            </div>            <div class="col">                <input type="submit" value="Upload" class="btn btn-success my-4">            </div>            </form>        </div>        <div class="container text-center w-25 my-5">            <a href="{% url 'index' %}" class="btn btn-outline-primary">Back</a>        </div>    </div>    <!-- Option 1: Bootstrap Bundle with Popper -->    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>  </body></html>

Original Link: https://dev.to/madhubankhatri/django-photo-gallary-django-project-10h1

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To