DEV Community: Suman

Adding Comments In Your Django Project

Suman — Mon, 25 Aug 2025 09:10:33 +0000

Utilizing Bootstrap Accordion for adding comments in the UI

In post_view.html:

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Comments : {{post.cmt_count}}
  </a>

</p>
<div class="collapse" id="collapseExample">
 {% for comment in post.comment_set.all %}
  <div class="card card-body">
    {{comment.content}}
  </div>
{% endfor % }
</div>
 <form method="POST">
        {% csrf_token %}
<div class="col-md-8">
              {{ c_form }}
            </div>
 <input type="submit" class="btn btn-secondary" value="Comment"/>
 </form>

Create a model to link user and post to the comment :

class Comments(models.Model):
    user = models.ForeignKey(User,on_delete=models.CASCADE)
    post = models.ForeignKey(UserPost,on_delete=models.CASCADE)
    content = models.CharField(max_length=500)

    def __str__(self):
        return self.content

*Register your model to the admin site *

from django.contrib import admin
from .models import UserPost,Comments

admin.site.register(Comments)

*Make Migrations : *

python manage.py makemigrations
python manage.py migrate

In case you face operational error delere all migraions folder to restart your database

delete respectively :

db.sqlite3
in your app/migrations
delete all files except init

make migrations again, that's it.

Go to the Django admin panel and add some data in them models

Reverse Relationship to get number of comments on a post :

class UserPost(models.Model):
    title = models.CharField(max_length=150,null=False)
    content = models.TextField()
    author = models.ForeignKey(User,on_delete=models.CASCADE)
    created_at = models.DateTimeField(auto_now_add=True)
    image = models.ImageField(upload_to=get_image_path )

    class Meta:
        ordering = ('-created_at',)

    def cmnt_count(self):
        return self.comments_set.all().count()

    def __str__(self):
        return self.title

views.py to render post:

from .forms import PostForm

def post_view(request,pk):
    post = get_object_or_404(UserPost,id=pk)

    context={
        'post':post,
    }
    return render(request,'post_view.html',context)

Include the count as well as Comments on the UI using this reverse mapping

<p>Comments : {{post.cmt_count}}</p>
{% for comment in post.comment_set.all %}
  <div class="card card-body">
    {{comment.content}}
  </div>
{% endfor % }

** Now to let users comment on the post :**

in app/forms.py

from .models import Comments


class CommentForm(forms.ModelForm):
    content = forms.CharField(label="", widget=forms.TextInput(attrs={'placeholder': 'Write Your Thoughts on This Blog','class':'mt-2 focus:ring-1 focus:ring-blue-500'}))

    class Meta:
        model = Comments
        fields = ['content']

in views.py

from .forms import PostForm,CommentForm

def post_view(request,pk):
    post = get_object_or_404(UserPost,id=pk)
    if request.method == "POST":
        if not request.user.is_authenticated:
            messages.warning(request, "Please log in to send a message.")
            login_url = f"{redirect('new_login').url}?{urlencode({'next': request.path})}"  # Preserve return URL
            return redirect(login_url)

        c_form = CommentForm(request.POST)
        if c_form.is_valid():
            instance = c_form.save(commit=False)
            instance.user = request.user
            instance.post = post
            instance.save()
            return redirect('post_view',pk=post.id)
    else:
        c_form = CommentForm()


    context={
        'post':post,
        'c_form':c_form
    }
    return render(request,'post_view.html',context)

Render this form in the UI :

<form method="POST">
        {% csrf_token %}
<div class="col-md-8">
              {{ c_form }}
            </div>
 <input type="submit" class="btn btn-secondary" value="Comment"/>
 </form>

That's it, Happy Coding you all :)

Django Registration,Login Logout and Profile Easy Setup

Suman — Sun, 24 Aug 2025 10:20:45 +0000

Registration Setup

Create a new app User
-- to seperate the logic of registeration,login and logout and create a module that can be integrated in any Django application

In main app urls.py :

urlpatterns = [
    path('users/', include('users.urls'))
]

in User urls.py :

from django.urls import path
from .import views

urlpatterns = [
    path('sign_up/', views.index, name='users-sign-up')
]

Create forms.py in User app and write the following:

from django.contrib.auth.forms import UserCreationForm
from django import forms
from django.contrib.auth.models import User

class SignUpForm(UserCreationForm):
    email = forms.EmailField(required=True)
    class Meta:
        model = User
        fields = ['username','email','password1','password2'] 

        def __init__(self, *args, **kwargs):
            super(SignUpForm, self).__init__(*args, **kwargs)

            for fieldname in ['password1','password2']:
                self.fields[fieldname].help_text = None

In views (User) :

from django.shortcuts import render,redirect
from .forms import SignUpForm

def index(request):
    if request.method == "POST":
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('login')
    else:
        form = SignUpForm()
    context = {
        'form':form
    }
    return render(request,'User/sign_up.html',context)

In Sign_up.html :

<title>{% block title %}Sign Up{% endblock %}</title>
<form method="POST">
    {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" value="Register" class="btn btn-primary">
</form>

Add this to base.html to show title dynamically:

<title>{% block title %}{% endblock %}</title>

Login Setup

In the same urls.py:

from django.contrib.auth import views as auth_view

path('login/', auth_view.LoginView.as_view(template_name='User/login.html'), name='login'),

In Sign_in.html :

<title>{% block title %}Sign In{% endblock %}</title>
<form method="POST">
    {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" value="Login" class="btn btn-primary">
</form>

In settings.py

LOGIN_REDIRECT_URL = 'home'

Optimize your navbar :

<div class="collapse navbar-collapse" id="navbarNav">
  <ul class="navbar-nav ms-auto">
    {% if request.user.is_authenticated %}
      <li class="nav-item">
        <a class="nav-link" href="{% url 'blog:create' %}">New BlogPost</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'logout' %}">Logout</a>
      </li>
    {% else %}
      <li class="nav-item">
        <a class="nav-link" href="{% url 'login' %}">Login</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="{% url 'register' %}">Register</a>
      </li>
    {% endif %}
  </ul>
</div>

Logout Setup

In the same urls.py:

path('logout/', views.LogoutView.as_view(next_page='home'), name='logout'),

In Logout.html : (only for the flow of execution)

<title>{% block title %}Logout{% endblock %}</title>
<form method="POST">
    {% csrf_token %}
    {{ form|crispy }}
    <input type="submit" value="Login" class="btn btn-primary">
</form>
<hr>
<div class="alert alert-info">
  You have been logged out.
</div>

Use this url template tag wherever required in navbar:

{% url 'logout' %}

Profile Setup

In forms.py

from django.contrib.auth.forms import UserCreationForm
from django import forms
from django.contrib.auth.models import User
from .models import Profile

class SignUpForm(UserCreationForm):
    email = forms.EmailField(required=True)
    class Meta:
        model = User
        fields = ['username','email','password1','password2']

class EditProfile(forms.ModelForm):
    class Meta:
        model = User
        fields = ['username','email']

    def __init__(self, *args, **kwargs):
        super(EditProfile, self).__init__(*args, **kwargs)

        for fieldname in ['username', 'email']:
                self.fields[fieldname].help_text = None

class EditPro(forms.ModelForm):
    class Meta:
        model = Profile
        fields = ['bio','pic']

        widgets = {
                'bio': forms.Textarea(attrs={'class': 'form-control', 'rows': 5, 'placeholder': 'Write about yourself...'}),
                'pic': forms.ClearableFileInput(attrs={'class': 'form-control'}),
            }

    def __init__(self, *args, **kwargs):
        super(EditPro, self).__init__(*args, **kwargs)

        for fieldname in ['bio', 'pic']:
                self.fields[fieldname].help_text = None

In views.py

from django.shortcuts import render,redirect
from .forms import SignUpForm,EditProfile,EditPro
from django.contrib import messages
from django.contrib.auth.views import LogoutView
from myBlog.models import UserPost,Category
from django.contrib.auth.decorators import login_required
# Create your views here.

def index(request):
    if request.method == "POST":
        form = SignUpForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('new_login')
    else:
        form = SignUpForm()
    context = {
        'form':form
    }
    return render(request,'User/sign_up.html',context)

@login_required
def userProfile(request):
    if request.method == "POST":
        u_form = EditProfile(request.POST or None,instance=request.user)
        p_form = EditPro(request.POST or None,request.FILES or None,instance=request.user.profile)
        if u_form.is_valid() and p_form.is_valid():
            u_form.save()
            p_form.save()
            return redirect('profile')
    else:
        u_form = EditProfile(instance=request.user)
        p_form = EditPro(instance=request.user.profile)

    blog_count = UserPost.objects.filter(author=request.user).count()
    category = Category.objects.filter(status = 0)
    context = {
        'u_form':u_form,
        'p_form':p_form,
        'blog_count':blog_count,
        'category':category

    }
    return render(request,'User/profile.html',context)

*In urls.py *

path('profile/',views.profile, name='user-profile'),

In navbar.html

<a href="{% url 'user-profile' %}">Profile</a>

In User/profile.html

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block title %}Profile Page{% endblock %}

{% block content %}
<div class="container">
    <div class="row mt-5 pt-3">
        <div class="col-md-6 offset-md-3">
            <div class="card my-3 shadow">
                <div class="card-body">
                    <div class="row">
                        <!-- Profile Image -->
                        <div class="col-md-4 text-center">
                            {% if user.profile.pic %}
                                <img src="{{ user.profile.pic.url }}" 
                                     class="img-fluid rounded-circle mb-3 shadow-sm" 
                                     alt="{{ user.username }}">
                            {% else %}
                                <img src="https://via.placeholder.com/150" 
                                     class="img-fluid rounded-circle mb-3 shadow-sm" 
                                     alt="Default Profile">
                            {% endif %}
                            <h5 class="mt-2">{{ user.username }}</h5>
                        </div>

                        <!-- Profile Form -->
                        <div class="col-md-8">
                            <form method="POST" enctype="multipart/form-data">
                                {% csrf_token %}
                                {{ form|crispy }}
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary">
                                        Update Profile
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

Bootstrap Modal Example (optional)

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Edit Profile
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="exampleModalLabel">Edit Profile</h1>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <div class="row">
            <div class="col-md-4 text-center">
              <img src="{{ user.profile.pic.url }}" alt="Profile Picture" class="img-fluid rounded">
            </div>
            <div class="col-md-8">
              {{ u_form|crispy }}
              {{ p_form|crispy }}
            </div>
          </div>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

In User/models.py

from django.db import models
from django.contrib.auth.models import User
import os,datetime
from django.core.validators import FileExtensionValidator

class Profile(models.Model):
    user = models.OneToOneField(User,on_delete=models.CASCADE)
    pic = models.ImageField(default='default.png',upload_to='avatars/',validators=[FileExtensionValidator(['png','jpg','jpeg','webp'])])
    bio = models.TextField(blank=True,null=True)

    def __str__(self):
        return self.user.username

Serve Media Files

pip install pillow

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

# urls.py
from django.conf import settings
from django.conf.urls.static import static

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

Dump your all Static files for production

STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / "staticfiles"

python manage.py collectstatic

admins.py

from django.contrib import admin
from .models import Profile

admin.site.register(Profile)

In template

<form method="post" enctype="multipart/form-data">
  {% csrf_token %}
  {{ form.as_p }}
  <button type="submit">Upload</button>
</form>

Also Add default.jpg/png in media folder to show default pic
Use Django Signals to create profile automatically after user sign up

from .models import Profile
from django.contrib.auth.models import User
from django.db.models.signals import post_save
from django.dispatch import receiver

@receiver(post_save,sender = User)
def create_profile(sender,instance,created,*args, **kwargs):
    if created:
        Profile.objects.create(user=instance)

@receiver(post_save, sender=User)
def save_profile(sender, instance, **kwargs):
    instance.profile.save()

apps.py

from django.apps import AppConfig

class UserConfig(AppConfig):
    default_auto_field = 'django.db.models.BigAutoField'
    name = 'user'

    def ready(self):
        import user.signals

That's it :) Happy Coding you all.