DEV Community

Cover image for The Social Blog using Django
Madhuban Khatri
Madhuban Khatri

Posted on

The Social Blog using Django

#django #socialblog

The Social Blog is a website where users can create account and login to view others Blogs. They can view their profile where Profile pic and Other settings are available. User can change account password and email in Settings option.
And in this post you can get the Source Code of this project.

You have to follow these steps:-

  1. Create project - social_blog
  2. Create app - main
  3. Intall this app in Settings.py INSTALLED APPS
  4. Create Models in models.py(User, Post, Comment, Contact) and register them to admin.py
  5. Apply Migrations and Migrate them. Create a SuperUser.
  6. Do some settings in settings.py for Image Upload (MEDIA_URL and MEDIA_ROOT)
  7. Create Templates for our website (You can use Bootstrap)
  8. Write Code

models.py 

from django.db import models
from datetime import datetime
# Create your models here.

class User(models.Model):
    first_name = models.CharField(max_length=100)
    last_name = models.CharField(max_length=100)
    email = models.EmailField()
    password = models.CharField(max_length=100)
    bio = models.TextField(default="none")
    profile_pic = models.ImageField(upload_to='pictures', default='default.jpg')
    def __str__(self):
        return self.first_name



class Post(models.Model):
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    title = models.CharField(max_length=100)
    content = models.TextField()
    creation_date = models.DateField()
    likes = models.ManyToManyField(User, related_name='likes')

    def __str__(self):
        return self.title


class Comment(models.Model):
    post = models.ForeignKey(Post, on_delete=models.CASCADE)
    name = models.CharField(default='no name',max_length=50)
    comment = models.CharField(max_length=400)

    def __str__(self):
        return self.name+"=>"+self.comment


class Contact(models.Model):
    name = models.CharField(max_length=50)
    email = models.EmailField(default=None)
    message = models.TextField()

    def __str__(self):
        return self.name
Enter fullscreen mode Exit fullscreen mode

admin.py 

from django.contrib import admin
from .models import User, Post, Comment, Contact

# Register your models here.
admin.site.register(User)
admin.site.register(Post)
admin.site.register(Comment)
admin.site.register(Contact)
Enter fullscreen mode Exit fullscreen mode

main - urls.py 

from django.contrib import admin
from django.urls import path
from . import views

urlpatterns = [
    path('', views.home, name='home'),
    path('post/<post_title>', views.view_post, name='view_post'),
    path('post/<post_title>/like', views.like_post, name='like_post'),
    path('post/<str:post_title>/comment',  views.add_comment, name='add_comment'),
    path('profile/<str:user>', views.view_profile, name='profile'),
    path('profile/<str:user>/settings', views.settings, name='settings'),



    path('search/', views.search, name='search'),
    path('update_profile/<current_user>', views.update_profile, name='update_profile'),
    path('change_image/<user>', views.change_image, name='change_image'),
    path('delete_user/<user>', views.delete_user, name='delete_user'),



    path('write_post/', views.write_post, name='write_post'),
    path('post_created/', views.post_created, name='post_created'),
    path('delete/<post_title>', views.delete_post, name='delete_post'),





    path('login/', views.login, name='login'),
    path('logout/', views.logout, name='logout'),
    path('signup/', views.signup, name='signup'),
    path('contact/', views.contact, name='contact'),
]
Enter fullscreen mode Exit fullscreen mode

main - views.py 

from django.shortcuts import render, redirect
from .models import Contact, Post, User, Comment
from django.contrib import messages
from django.http import HttpResponse, HttpResponseRedirect
from datetime import date
from django.urls import reverse_lazy, reverse
from django.core.exceptions import ObjectDoesNotExist

# Create your views here.
def home(request):
    if 'user' in request.session:
        current_user = request.session['user']
        user_posts = Post.objects.all().order_by('-id')
        param = {'current_user': current_user, 'user_posts': user_posts}
        return render(request, 'blogs.html', param)
    else:
        feature_post =  Post.objects.all().order_by('-id')[:3]
        param = {'feature_post': feature_post}
        return render(request, 'home.html', param)






def view_post(request, post_title):
    get_post = Post.objects.get(title=post_title)
    all_rel_posts = Post.objects.filter(user__first_name=get_post.user)
    post_comments = get_post.comment_set.all().order_by('-id')
    liked = False
    try:
        if get_post.likes.filter(first_name=request.session['user']).exists():
            liked = True
    except:
        return redirect('home')

    param = {'post_data': get_post, 'all_posts':all_rel_posts,'post_comments':post_comments, 'liked':liked}
    return render(request, 'post.html', param)



def like_post(request, post_title):
    user = User.objects.get(first_name=request.session['user'])
    post = Post.objects.get(title=post_title)
    liked = False
    if post.likes.filter(first_name=request.session['user']).exists():
        post.likes.remove(user) 
        liked = False
    else:
        post.likes.add(user)
        liked = True
    return HttpResponseRedirect(reverse('view_post', args=[str(post_title)]))


def delete_post(request, post_title):
    get_post = Post.objects.get(title=post_title)
    get_post.delete()
    messages.success(request, 'Post has been deleted succsfully.')
    return redirect(f'/profile/{get_post.user.first_name}')



def view_profile(request, user):
    try:
        user_obj = User.objects.get(first_name=user)
    except ObjectDoesNotExist:
        return HttpResponse('User does not exists.')

    user_posts = user_obj.post_set.all().order_by('-id')
    lis = []
    for post in user_posts:
        lis.append(post.likes.count())
    total_post_likes = sum(lis)

    param = {'user_posts': user_posts, 'user_data': user_obj, 'total_post_likes': total_post_likes}
    try:
        return render(request, 'profile.html', param)
    except:
        messages.warning(request, f"You have to login before access {user}'s profile.")
        return redirect('home')


def update_profile(request, current_user):
    if request.method == 'POST':
        get_user = User.objects.get(first_name=current_user)

        fname = request.POST.get('fname')
        lname = request.POST.get('lname')
        mail = request.POST.get('mail')
        bio = request.POST.get('bio')


        get_user.first_name = fname
        get_user.last_name = lname
        get_user.email = mail
        get_user.bio = bio
        get_user.save()
        return redirect(f'/profile/{get_user.first_name}')
    else:
        return redirect('profile')


def change_image(request, user):
    get_user = User.objects.get(first_name=user)
    new_pic = request.FILES['image']

    get_user.profile_pic = new_pic
    get_user.save()
    messages.success(request, 'Profile Picture updated succsfully.')
    return redirect(f'/profile/{get_user.first_name}')


def settings(request, user):
    get_user = User.objects.get(first_name=user)


    if request.method == 'POST':
        pwd1 = request.POST['pwd1']
        pwd2 = request.POST['pwd2']
        email = request.POST['mail']


        if (pwd1 and pwd2) and not email:
            if pwd1==pwd2:
                get_user.password = pwd1
                get_user.save()
                messages.success(request, 'Password saved succesfully.')
            else:
                messages.warning(request, 'Password are not same.')
        elif email and not (pwd1 and pwd2):
            get_user.email = email
            get_user.save()
            messages.success(request, 'Email saved succesfully.')
        elif (pwd1 and pwd2) and email:
            if pwd1==pwd2:
                get_user.password = pwd1
                get_user.email = email
                get_user.save()
                messages.success(request, 'Password and Email saved succesfully.')
            else:
                messages.warning(request, 'Password are not same.')

    param = {'user_data': get_user}
    return render(request, 'profile_setting.html', param)



def delete_user(request, user):
    if request.method == 'POST':
        get_user = User.objects.get(first_name=user)

        firstName = request.POST.get('first_name')
        if firstName == get_user.first_name:
            get_user.delete()
            del request.session['user']
            return redirect('home')

    return HttpResponseRedirect(reverse('settings', args=[str(user)]))





def write_post(request):
    return render(request, 'create_post.html')



def post_created(request):
    if request.method == 'POST':
        post_title = request.POST.get('title')
        post_content = request.POST.get('content')
        get_user = User.objects.get(first_name=request.session['user'])
        create_post = Post(user=get_user, title=post_title, content=post_content,creation_date=date.today())
        create_post.save()
        messages.success(request, 'Post has been created succsfully.')
        return render(request, 'create_post.html')
    else:
        return render(request, 'create_post.html')


def search(request):
    query = request.GET.get('query')
    search_user_posts = Post.objects.filter(user__first_name__icontains=query)
    search_title = Post.objects.filter(title__icontains=query)
    search_content = Post.objects.filter(content__icontains=query)
    search_result = search_title.union(search_content,search_user_posts)

    param = {'search_result': search_result, 'search_term':query}
    return render(request, 'search.html', param)



def signup(request):
    if request.method == 'POST':
        fname = request.POST.get('first_name')
        lname = request.POST.get('last_name')
        mail = request.POST.get('mail')
        pwd = request.POST.get('pwd')
        bio = request.POST.get('bio')

        create_user = User(first_name=fname, last_name=lname, email=mail, password=pwd, bio=bio)
        if not User.objects.filter(email=mail).exists():
            create_user.save()
            messages.success(request, 'Your account has been created succsfully.')
            return redirect('home')
        else:
            messages.error(request, 'This User is already exists.')
            return redirect('home')


    else:
        return redirect('home')



def login(request):
    if request.method == 'POST':
        mail = request.POST.get('mail')
        pwd = request.POST.get('pwd')

        check_user = User.objects.filter(email=mail, password=pwd)
        if check_user:
            request.session['user'] = check_user.first().first_name
            return redirect('home')
        else:
            messages.warning(request, 'Invalid User')
            return redirect('home')
    else:
        return redirect('home')



def logout(request):
    try:
        del request.session['user']
    except:
        return redirect('login')
    return redirect('login')









def contact(request):
    if request.method == 'POST':
        full_name = request.POST.get('full_name')
        mail = request.POST.get('mail')
        msg = request.POST.get('msg')


        create_contact = Contact(name=full_name, email=mail, message=msg)
        create_contact.save()
        messages.success(request, 'Your form has been submitted.')
        return redirect("contact")

    else:
        return render(request, 'contact.html')




#Create Comments
def add_comment(request, post_title):
    name = request.session['user']
    comment = request.POST.get('comment')
    post = Post.objects.get(title=post_title)
    if name!="" and comment!="":
        create_comment = Comment(post=post, name=name, comment=comment)
        create_comment.save()
        return HttpResponseRedirect(reverse('view_post', args=[str(post_title)]))
Enter fullscreen mode Exit fullscreen mode

Templates Work

base.html 

{% load static %}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

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

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="{% url 'home' %}">LOGO</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="{% url 'home' %}">Home <span class="sr-only">(current)</span></a>
      </li>

      <li class="nav-item">
        <a class="nav-link" href="{% url 'contact' %}">Contact</a>
      </li>
      <li class="nav-item">
          <form action="{% url 'search' %}" class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" name="query" placeholder="Search" aria-label="Search" required>
            <input class="btn btn-outline-success mx-2 my-2 my-sm-0" type="submit" value="Search">
          </form>

      </li>

    </ul>

    <!--This will show if user in sessions-->
    {% if request.session.user %}
    <ul class="navbar-nav mr-auto" style="margin-left:550px;">
    <li class="nav-item dropdown">
        <div class="btn-group">
            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">

                @{{request.session.user}}
            </button>
            <div class="dropdown-menu dropdown-menu-right dropdown-menu-lg-right">
            <a href="{% url 'profile' request.session.user %}"><button class="dropdown-item" type="button">Profile</button></a>
            <a href="{% url 'write_post' %}"><button class="dropdown-item" type="button">Write a Post</button></a>
            <a href="{% url 'settings' request.session.user %}"><button class="dropdown-item" type="button">Settings</button></a>
            <hr>
            <button class="dropdown-item" type="button"><a class="btn btn-danger" href="{% url 'logout' %}">Logout</a></button>

            </div>
        </div>
      </li>
      </ul>
      {% else %}
      <button type="button" data-toggle="modal" data-target="#loginModal" class="btn btn-success mx-2">Login</button>
      <button type="button" data-toggle="modal" data-target="#signupModal" class="btn btn-success mx-2">Signup</button>

      {% endif %}




  </div>

</nav>

{% if messages %}
      {% for message in messages %}
      <div class="alert alert-{{message.tags}} alert-dismissable fade show" role="alert">
        {{message}}
        <button type="button" class="close" data-dismiss='alert' aria-label='close'>
          <span aria-hidden='true'>&times</span>
        </button>
      </div>
      {% endfor %}
{% endif %}



<!--For Login-->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Login</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{% url 'login' %}" method="post">
          {% csrf_token %}
          <div class="form-group">
            <label for="recipient-email" class="col-form-label">Email:</label>
            <input type="email" class="form-control" name="mail" id="recipient-email" placeholder="john@gmail.com" required>
          </div>
          <div class="form-group">
            <label for="recipient-password" class="col-form-label">Password:</label>
            <input type="password" class="form-control" name="pwd" id="recipient-password" placeholder="john2@82" required>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <input type="submit" class="btn btn-primary" value="Login">
         </div>
        </form>
      </div>

    </div>
  </div>
</div>




</div>









<!--For SignUp-->
<div class="modal fade" id="signupModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Sign Up</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>



      <div class="modal-body">
        <form action="{% url 'signup' %}" method="post">
          {% csrf_token %}
          <div class="form-group">
            <label for="recipient-fname" class="col-form-label">First Name:</label>
            <input type="text" class="form-control" name="first_name" id="recipient-fname" placeholder="John" required>
          </div>
          <div class="form-group">
            <label for="recipient-lname" class="col-form-label">Last Name:</label>
            <input type="text" class="form-control" name="last_name" id="recipient-lname" placeholder="Victor" required>
          </div>
          <div class="form-group">
            <label for="recipient-email" class="col-form-label">Email:</label>
            <input type="email" class="form-control" name="mail" id="recipient-email" placeholder="john@gmail.com" required>
          </div>
          <div class="form-group">
            <label for="recipient-password" class="col-form-label">Password:</label>
            <input type="password" class="form-control" name="pwd" id="recipient-password" placeholder="john2@82" required>
          </div>
          <div class="form-group">
            <label for="recipient-email" class="col-form-label">Bio:</label>
            <textarea class="form-control" name="bio" placeholder="eg. A self taught programmer."></textarea>
          </div>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <input type="submit" class="btn btn-primary" value="Signup">
        </form>
      </div>
    </div>
  </div>
</div>
</div>

{% block body %}

{% endblock %}



    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>


  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

home.html 

{% extends 'base.html' %}

{% block title %}
    Home | Social Blog
{% endblock %}


{% block body %}
    <div class="container-fluid" style="position:absolute;">

    <div class="jumbotron jumbotron-fluid">
  <div class="container">
    <h1 class="display-4">The Social Blog</h1>
   <p class="lead" style="display:inline;">Login now and get more posts.</p>
  </div>

  <div class="container">
    <div class="container" style="border-radius: 10px; box-shadow: 1px 1px 10px 1px black; background:white; padding-bottom:10px; margin-top:-130px;margin-left:500px; border: 1px solid white; width: 600px;">
      <form action="{% url 'login' %}" method="post">
        {% csrf_token %}
  <div class="form-group">
    <h1 class="display-6">Login</h1>
    <hr>
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" name="mail" placeholder="eg. john@gmail.com" style="width:500px;" id="exampleInputEmail1" aria-describedby="emailHelp" required>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" name="pwd" placeholder="eg. john2@85" style="width:500px;" id="exampleInputPassword1" required>
  </div>

  <input type="submit" class="btn btn-primary" value="Login">
</form>
</div>
  </div>
</div>

<div class="container">
  <h3 style="color: dodgerblue;">Popular Posts: </h3>
</div>
<hr>
{% for post in feature_post %}
<div class="container">
  <h2>{{post.title}}</h2>
  <span class="text-muted">{{post.creation_date}}</span>
  <span class="text-muted"> || By {{post.user.first_name}}</span>
  <span class="text-muted"> || {{post.likes.count}} Likes</span>
  <hr>
  <p>{{post.content}}</p>
</div>
{% endfor %}


{% endblock %}
Enter fullscreen mode Exit fullscreen mode

contact.html 

{% extends 'base.html' %}

{% block title %}Contact | Social Blogs{% endblock %}


{% block body %}




<div class="jumbotron jumbotron-fluid">
    <div class="container-fluid" style="margin-top:30px; background: white; box-shadow: 1px 1px 10px 1px black; padding: 10px; width: 600px;">
        <form method="post" action="{% url 'contact' %}">
            {% csrf_token %}
        <h1>Contact Form</h1>
        <hr>

         <div class="form-group">
            <label for="exampleInputEmail1">Full Name</label>
            <input type="text" class="form-control" name="full_name" style="width: 400px;" id="exampleInputEmail1" aria-describedby="emailHelp" required>
        </div>

        <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" name="mail" style="width: 400px;" id="exampleInputEmail1" aria-describedby="emailHelp" required>
        </div>

        <div class="form-group">
          <label for="exampleInputPassword1">Message</label>
          <textarea class="form-control" name="msg" required></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Send</button>
        </form>
    </div>

</div>



{% endblock %}
Enter fullscreen mode Exit fullscreen mode

blogs.html 

{% extends 'base.html' %}
{% load static %}
{% block title %}
    Blogs | Social Blog
{% endblock %}


{% block body %}

    <div class="container my-2">


    {% for post in user_posts %}
    <div class="card w-75 my-3" style="border: 2px solid;">
  <div class="card-body">
    <a href="{% url 'view_post' post.title %}"><h5 class="card-title">{{post.title}}</h5></a>
    <span class="text-muted">{{post.creation_date}}</span>

    <span class="text-muted"> · By <img src="{% static post.user.profile_pic.url %}" width='30',height='30' style="border-radius:50%;"><a href="{% url 'profile' post.user.first_name %}">{{post.user.first_name}} {{post.user.last_name}}</a></span>
    <span class="text-muted"> · {{post.likes.count }} Likes</span>
    <hr>
    <p class="card-text">{{post.content | truncatewords:50}}</p>
    <a href="{% url 'view_post' post.title %}" class="btn btn-primary">Read More</a>
  </div>
  </div>
  {% endfor %}

</div>




{% endblock %}
Enter fullscreen mode Exit fullscreen mode

create_post.html 

{% extends 'base.html' %}
{% block title %} Write a Post | Social Blogs {% endblock %}



{% block body %}


<div class="jumbotron jumbotron-fluid">
    <div class="container-fluid" style="margin-top: -40px; background: white; box-shadow: 1px 1px 10px 1px black; padding: 10px; width: 800px;">
        <form action="{% url 'post_created' %}" method="post">
            {% csrf_token %}
        <h1>Write a Post</h1>
        <hr>

         <div class="form-group">
            <label for="exampleInputEmail1">Title</label>
            <input type="text" style="border:1px solid;" name="title" class="form-control" style="width: 400px;" id="exampleInputEmail1" aria-describedby="emailHelp" required>
        </div>

        <div class="form-group">
          <label for="exampleInputPassword1">Content</label>
          <textarea style="height: 300px; border: 1px solid;" name="content" class="form-control" required></textarea>
        </div>

        <button type="submit" class="btn btn-primary">Publish</button>
        </form>
    </div>

</div>



{% endblock %}
Enter fullscreen mode Exit fullscreen mode

post.html 

{% extends 'base.html' %}

{% block title %}View_Post | Social Blog{% endblock %}


{% block body %}

<div class="container">
<div class="container my-2">
    <div class="card w-75 my-3" style="border: 2px solid;">
  <div class="card-body" style="word-wrap: break-word;">
    <h1 class="card-title display-3">{{post_data.title}}</h1>
    <span class="text-muted">{{post_data.creation_date}}</span>&nbsp &nbsp
    <span class="text-muted">By <a href="{% url 'profile' post_data.user.first_name %}">{{post_data.user.first_name}} {{post_data.user.last_name}}</a></span>
    <hr>
    <pre style="font-family:tahoma;"><p class="card-text">{{post_data.content}}</p></pre>

    <form action="{% url 'like_post' post_data.title %}">
      {% if liked %}
        <button type="submit" class="btn btn-danger" name="post_id">UnLike</button>
      {% else %}
        <button type="submit" class="btn btn-info" name="post_id">Like</button>
      {% endif %}
      {{post_data.likes.count }}  Likes

    </form>

  </div>

</div>
</div>


{% if request.session.user %}

<div class="container">
    <div class="container my-2">
        <h2>Comments</h2>
        <div class="w-75">
        <hr>
        </div>
        <ul class="list-unstyled">
          {% if post_comments %}
          {% for comment in post_comments %}
            <li class="media">
            <div class="w-75" style="display:inline-block">
              <h5 class="mt-0 mb-1">{{comment.name}}</h5>
          <p>{{comment.comment}} </p>
            </div>
        </li>
          {% endfor %}

          {% else %}
            <h5>No Comments Yet.</h5>
          {% endif %}

        </ul>
        <div class="w-75">
        <hr>
        </div>
        <form action="{% url 'add_comment' post_data.title %}" method="post">
          {% csrf_token %}
            <textarea style="width:300px;" name="comment" placeholder="Add Comment..."></textarea>
            <br><br>
            <input type="submit" name="" class="btn btn-primary" value="Add Comment">
        </form>

    </div>
</div>
{% endif %}



<!--Related Posts-->
<div class="container w-25" style="inline-block; position:absolute; top:70px; left:1000px;">
<div class="list-group">
  <p class="list-group-item list-group-item-action active">
    Related Posts
  </p>
  {% for post in all_posts %}
    <button type="button" class="list-group-item list-group-item-action"><a href="{{post.title}}">{{post.title}}</a></button>
  {% endfor %}
</div>
</div>


{% endblock %}
Enter fullscreen mode Exit fullscreen mode

search.html 

{% extends 'base.html' %}

{% block title %} Search | Social Blogs{% endblock %}

{% block body %}

<div class="container my-2">

    {% if search_result %}
    <h1 style="display:inline-block;">Search Results for: </h1>&nbsp &nbsp &nbsp
    <span class="display-4" style="color:red">{{search_term}}</span>
    <hr>
    {% for result in search_result %}
    <div class="card w-75 my-3" style="border: 2px solid;">
  <div class="card-body">
    <a href="{% url 'view_post' result.title %}"><h5 class="card-title">{{result.title}}</h5></a>
    <span class="text-muted">{{result.creation_date}}</span>
    <span class="text-muted"> · By <a href="{% url 'profile' result.user.first_name %}">{{result.user.first_name}} {{result.user.last_name}}</a></span>
    <hr>
    <p class="card-text">{{result.content | truncatewords:50}}</p>
    <a href="{% url 'view_post' result.title %}" class="btn btn-primary">Read More</a>
  </div>
  </div>
  {% endfor %}

  {% else %}
    <h1>No results found: <span class="display-4" style="color:red">{{search_term}}</span></h1>
    {% endif %}




</div>






{% endblock %}
Enter fullscreen mode Exit fullscreen mode

profile.html 

{% extends 'base.html' %}

<!--{% load static %}-->
{% block title %}
  Profile | Social Blogs
{% endblock %}}

{% block body %}

<div class="card text-center">
  <div class="card-header">

   <img src="{% static user_data.profile_pic.url %}" width="180" height="180" class="img-thumbnail" alt="profile_image" style="border-radius:50%;">
   <br>

   {% if request.session.user == user_data.first_name %}
   <a href="#"><label for="image_name" style="cursor:pointer;">Change Profile Picture</label></a>
   ​<form action="{% url 'change_image' user_data.first_name %}" method="post" enctype="multipart/form-data">
    {% csrf_token %}
     <input type="file" id="image_name" name="image" style="display:none;">
     <input type="submit" value="Change"class="btn btn-warning">
   </form>
   {% endif %}

  </div>
  <div class="card-body">
    <h2 class="card-title">{{user_data.first_name}} {{user_data.last_name}}</h2>

    <div class="my-4" style="display:inline-block;">
      <pre style="text-align: left;"><p class="card-text" style="font-size:22px;">{{user_data.bio}}</p></pre>
    </div>

    <br>


    {% if request.session.user == user_data.first_name %}
    <button type="button" data-toggle="modal" data-target="#editModal" class="btn btn-primary mx-2">Edit Profile</button>
    {% endif %}

  </div>
</div>


<!--Edit Profile Form-->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Edit</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>



      <div class="modal-body">
        <form action="{% url 'update_profile' request.session.user %}" method="post" enctype="multipart/form-data">
          {% csrf_token %}
           <div class="form-group">
            <label for="recipient-text" class="col-form-label">First Name:</label>
            <input type="text" class="form-control" name="fname" id="recipient-text" value="{{user_data.first_name}}" required>
          </div>
          <div class="form-group">
            <label for="recipient-text" class="col-form-label">Last Name:</label>
            <input type="text" class="form-control" name="lname" id="recipient-text" value="{{user_data.last_name}}" required>
          </div>
          <div class="form-group">
            <label for="recipient-email" class="col-form-label">Email:</label>
            <input type="email" class="form-control" name="mail" id="recipient-email" value="{{user_data.email}}" required>
          </div>
          <div class="form-group">
            <label for="recipient-email" class="col-form-label">Bio:</label>
            <textarea class="form-control" name="bio" style="height: 300px;">{{user_data.bio}}</textarea>
          </div>

          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <input type="submit" class="btn btn-primary" value="Change">
         </div>
        </form>
      </div>

    </div>
  </div>
</div>




<div class="card mx-5 my-3" style="display: inline-grid;" >
  <h3>Posts({{user_posts.count }})</h3>
  <span>Total Posts Likes: {{total_post_likes}}</span>
  {% if user_posts %}
    {% for post in user_posts %}

  <div class="card" style="border: 2px solid; width: 800px; margin-bottom:10px;">
  <div class="card-body">
    <h5 class="card-title"><a href="{% url 'view_post' post.title %}">{{post.title}}</a></h5>
    <span class="text-muted">{{post.creation_date}}</span>
    <span class="text-muted"> · {{post.likes.count}} Likes</span>
    <p class="card-text">{{post.content | truncatewords:50}}</p>
    <a href="{% url 'view_post' post.title %}" class="btn btn-primary">Read More>></a>
    {% if request.session.user == user_data.first_name %}
      <a href="{% url 'delete_post' post.title %}" class="btn btn-danger float-right">Delete</a>
    {% endif %}
  </div>
</div>

  {% endfor %}

  {% else %}
    <div class="card-body">
      <h1 class="display-4">No Posts Yet</h1>
    </div>
  {% endif %}


</div>


{% endblock %}
Enter fullscreen mode Exit fullscreen mode

profile_setting.html 

{% extends 'base.html' %}
{% block title %}Settings | Social Blogs {% endblock %}

{% block body %}

<div class="container">
    <h1>Settings: </h1>
    <hr>
    <div class="container mx-3 rounded" style="border: 1px solid grey; padding:15px;">
        <h4>Change Password: </h4>
        <hr>
        <form action="{% url 'settings' request.session.user %}" method="post">
            {% csrf_token %}
            <h5>New Password: </h5>
            <input type="text" name="pwd1" placeholder="eg. john123" class="form-control">
            <br>
            <h5>Confirm Password: </h5>
            <input type="text" name="pwd2" placeholder="eg. john123" class="form-control">
            <br>
            <hr>
            <h5>New Email: </h5>
            <input type="email" name="mail" placeholder="eg. john123@gmail.com" class="form-control">
            <br>

            <hr>
            <input type="submit" value="Confirm" class="btn btn-primary">
        </form>
        <hr>
            <p style="color:#dc3545; cursor:pointer;" class="my-3" data-toggle="modal" data-target="#deleteModal">Delete Account</p>


    </div>




</div>


<!--Delete Pop Over window-->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Delete Account:</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form action="{% url 'delete_user' request.session.user %}" method="post">
          {% csrf_token %}
          <div class="form-group">
            <label for="recipient-email" class="col-form-label">Enter your First Name to Confirm:</label>
            <input type="text" class="form-control" name="first_name" id="recipient-email" placeholder="eg. John" required>
          </div>

          <div class="form-group">
            <input type="submit" class="form-control btn-danger" value="Confirm">
          </div>

        </form>
      </div>

    </div>
  </div>
</div>

{% endblock %}
Enter fullscreen mode Exit fullscreen mode

All the Code Files are here. You can use them and edit them to make your own Code.

Thank You

Top comments (0)

Read next

epakconsultant profile image

How to write a Tradingview breakout scanner.

sajjad hussain -

kingbino profile image

New to the dev community

Kingbino -

zhenhan profile image

Do adjustable kettlebell sets work?

Jasmine -

muzsthafa profile image

First Hands-On Experience with Angular 17

Muhammed Musthafa -