Open In App

Blogging Platform using Django

Last Updated : 20 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Our task is to build a simple blogging platform using Django. We will learn how to create, display, edit, and delete blog posts with images using Django’s models, views, templates, and admin panel. Step-by-step, we’ll set up the project, connect it to a database, and run it locally.

Project Setup

Prerequisites:

Start by creating your Django project and app:

django-admin startproject blogsite
cd blogsite
python manage.py startapp gallery

Create the Product Model

The Product model represents a blog post with an image and timestamps.

gallery/models.py:

Python 
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=255)
    description = models.TextField()
    image = models.ImageField(upload_to='products/')
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name

    def edit(self, name, description, image):
        self.name = name
        self.description = description
        self.image = image
        self.save()


    def short_description(self):
        # Split the description into words
        words = self.description.split()
        if len(words) > 50:
            # Join the first 50 words and add "..." at the end
            return ' '.join(words[:30]) + '...'
        else:
            # If the description is already less than 50 words, return it as is
            return self.description

Register Model in Admin

gallery/admin.py:

Python 
from django.contrib import admin
from .models import Product

# Register your models here.
admin.site.register(Product)

Create a Form

gallery/forms.py:

Python 
from django import forms
from .models import Product

class ProductForm(forms.ModelForm):
    class Meta:
        model = Product
        fields = ['name', 'description', 'image']

Define Views

gallery/views.py:

Python 
from django.shortcuts import render
from .models import Product
from django.http import HttpResponse
from django.shortcuts import render, redirect, get_object_or_404
from .models import Product
from .forms import ProductForm  


def product_list(request):
    products = Product.objects.all()
    return render(request, 'myapp/index.html', {'products': products})

def product_detail(request, pk):
    product = Product.objects.get(pk=pk)
    return render(request, 'myapp/index2.html', {'product': product})


def edit_product(request, pk):
    product = get_object_or_404(Product, pk=pk)
    if request.method == 'POST':
        form = ProductForm(request.POST, instance=product)
        if form.is_valid():
            form.save()
            return redirect('product_list')
    else:
        form = ProductForm(instance=product)
    return render(request, 'myapp/edit.html', {'form': form})

def delete_product(request, pk):
    product = get_object_or_404(Product, pk=pk)
    if request.method == 'POST':
        product.delete()
        return redirect('product_list')
    return render(request, 'myapp/delete.html', {'product': product})


def home(request):
    return HttpResponse('Hello, World!')

URL Configuration

gallery/urls.py:

Python 
from django.urls import path
from . import views

urlpatterns = [
    path('home/', views.home, name='home'),
    path('', views.product_list, name='product_list'),
    path('<int:pk>/', views.product_detail, name='product_detail'),
    path('<int:pk>/edit/', views.edit_product, name='edit_product'),
    path('<int:pk>/delete/', views.delete_product, name='delete_product'),
]

blogsite/urls.py:

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

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('gallery.urls')),
]

if settings.DEBUG:
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Configure Media Settings

In blogsite/settings.py, add:

Python 
import os

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

HTML Templates

Create a templates/myapp/ directory inside the gallery app and add the following:

edit.html: HTML file to edit the Blog.

HTML 
<h2>Edit Blog Post</h2>
<form method="post">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit">Save Changes</button>
</form>

delete.html: HTML file to delete the Blog.

HTML 
<h2>Delete Blog Post</h2>
<p>Are you sure you want to delete "{{ product.name }}"?</p>
<form method="post">
    {% csrf_token %}
    <button type="submit">Yes, Delete</button>
</form>


index.html: HTML file to show all the list of the Blog.

Python 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blog Website</title>
    <!-- Add Bootstrap CSS link here -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container mt-5">
        <h1>Today's New Blogs</h1>
        <div class="row">
            {% for product in products %}
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <a href="{% url 'product_detail' product.pk %}">
                            <img src="{{ product.image.url }}" alt="{{ product.created_name }}" class="card-img-top">
                        </a>
                        <div class="card-body">
                            <h5 class="card-title">{{ product.name }}</h5>
                            <p class="card-text">{{ product.short_description }}</p>
                            <a href="{% url 'edit_product' product.pk %}">Edit</a>
                            <a href="{% url 'delete_product' product.pk %}">Delete</a> <br>
                            <small class="card-text">Created at: {{ product.created_at }}</small> <br>
                            <small class="card-text">Updated at: {{ product.updated_at }}</small>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>

    <!-- Add Bootstrap JS and jQuery scripts here (if needed) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>


index2.html: HTML file to show the full details of the Blog.

Python 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ product.name }} - Blog Detail</title>
</head>
<body>
    <h1>{{ product.name }} - Blog </h1>
    
    <div>
        <img src="{{ product.image.url }}" alt="{{ product.name }}" width="200">
    </div>
    <h2>{{ product.name }}</h2>
    <p>{{ product.description }}</p>
    <a href="{% url 'edit_product' product.pk %}">Edit</a>
    <a href="{% url 'delete_product' product.pk %}">Delete</a> <br>
    
    <a href="{% url 'product_list' %}">Back to Blogs Home Page</a>
</body>
</html>

Install Required Packages

Make sure to install Pillow for image handling:

pip install Pillow

Database Setup and Superuser Creation

Apply Migrations

python manage.py makemigrations
python manage.py migrate

Create a Superuser

python manage.py createsuperuser

You will be prompted to enter a username, email, and password.

Once done, run:

python manage.py runserver

Visit: http://127.0.0.1:8000/admin/

Login using the superuser credentials and add blog entries with images via the admin interface.

Screenshot-from-2023-10-01-14-26-49

Output:

Screenshot-from-2023-10-02-17-09-25-(1)

Screenshot-from-2023-10-02-17-10-22


Screenshot-from-2023-10-02-17-11-44


Screenshot-from-2023-10-02-17-10-44


Next Article
Blog Post Recommendation using Django

A
amitgupm1wy
Improve
Article Tags :
Practice Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox