How to make CMS with Django ?

Yasser Cherfaoui — Tue, 01 Feb 2022 13:22:41 +0000

Hello all dev.to community,
I hope that you receive my post in a good health in a good conditions.
Today we are going to make a CMS(Content Management System) with Django and that covers all the CRUD(Create, Read, Update, Delete) operations and how to do them with Django, and you will see how easy it is.

If you don't like reading, check my video on my YouTube Channel : https://youtu.be/H_iW3Z2ozYE

You can find the final code for this project here : https://github.com/yassercher/CRUD-Django

Enough talk, let's start coding...
First of all we create our project and let's name it crud:

django-admin startproject crud

Then we create our first app:

cd crud

py manage.py startapp main

Now as you see I have named our app main, then we should go to crud/settings.py and declare it inside INSTALLED_APPS list variable like this:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'main' #add this line 
]

Now our projects knows that we have an app called main and it should call it whenever we run the server.
First of all we create our first model Post:
crud/main/models.py

from django.db import models

# Create your models here.


class Post(models.Model):
    title = models.CharField(max_length=255, blank=False, null=False)
    content = models.TextField(blank=False, null=False)

    def __str__(self):
        return self.title

And then we make our URL paths,
_crud/main/urls.py _

from django.urls import path
from .views import index, read, create, delete, update
app_name = 'main'


urlpatterns = [
    path('', index, name='index'),
    path('create/', create, name='create'),
    path('update/<int:post_id>', update, name='update'),
    path('read/<int:post_id>', read, name='read'),
    path('delete/<int:post_id>', delete, name='delete'),
]

Then we need to include them in crud/urls.py:

from django.contrib import admin
from django.urls import path, include

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

For now we code the views:
crud/main/views.py

from django.http import HttpResponse
from django.shortcuts import redirect, render
from .models import Post
# Create your views here.


def index(request):
    data = Post.objects.all()
    return render(request=request, template_name='main/index.html', context={'data': data})


def read(request, post_id):
    if post_id:
        post = Post.objects.filter(pk=post_id)

    return render(request=request, template_name='main/read.html', context={'post': post.get()})


def update(request, post_id):
    if post_id:
        post = Post.objects.filter(pk=post_id)
    if request.POST:
        n_t = request.POST['title']
        n_c = request.POST['content']
        post.update(title=n_t, content=n_c)
        return redirect('/')
    return render(request=request, template_name='main/update.html', context={'post': post.get()})


def delete(request, post_id):
    if post_id:
        p = Post.objects.filter(pk=post_id)
        p.delete()
        return HttpResponse('Post has been successfully deleted')
    return HttpResponse('insert a post id to delete')


def create(request):
    if request.POST:
        title = request.POST['title']
        content = request.POST['content']
        Post.objects.create(title=title, content=content)
        return redirect('/')
    return render(request=request, template_name='main/create.html', context={})

So far we have worked only on the backend, we should make our frontend now:

Create a directory on /main/ with the name templates.
Create a subdirectory with the name main.
Create four HTML files: index.html, create.html, read.html, update.html Now paste the code there: crud/main/templates/main/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
    <title>CRUD Project</title>
  </head>
  <body>
    <h1 class="title is-2">Welcome to the CRUD Project</h1>
    {% for post in data %}
    <div class="card">
      <header class="card-header">
        <p class="card-header-title">{{post.title}}</p>
        <button class="card-header-icon" aria-label="more options">
          <span class="icon">
            <i class="fas fa-angle-down" aria-hidden="true"></i>
          </span>
        </button>
      </header>
      <div class="card-content">
        <div class="content">{{post.content}}</div>
      </div>
      <footer class="card-footer">
        <a href="{% url 'main:read' post.id %}" class="card-footer-item"
          >Read</a
        >
        <a href="{% url 'main:update' post.id %}" class="card-footer-item"
          >Update</a
        >
        <a href="{% url 'main:delete' post.id %}" class="card-footer-item"
          >Delete</a
        >
      </footer>
    </div>
    {% endfor %}
  </body>
</html>

crud/main/templates/main/create.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
    <title>Create a new Post</title>
  </head>
  <body>
    <h1 class="title is-3">Create a new post</h1>
    <form method="POST">
      {% csrf_token %}
      <div class="field">
        <label class="label">Title</label>
        <div class="control">
          <input
            class="input"
            type="text"
            placeholder="Text input"
            name="title"
          />
        </div>
      </div>

      <div class="field">
        <label class="label">Content</label>
        <div class="control">
          <textarea
            class="textarea"
            placeholder="Textarea"
            name="content"
          ></textarea>
        </div>
      </div>

      <div class="field is-grouped">
        <div class="control">
          <button class="button is-link">Submit</button>
        </div>
        <div class="control">
          <button class="button is-link is-light">Cancel</button>
        </div>
      </div>
    </form>
  </body>
</html>

crud/main/templates/main/update.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"
    />
    <title>Update Post</title>
  </head>
  <body>
    <h1 class="title is-3">Update Post</h1>
    <form method="POST">
      {% csrf_token %}
      <div class="field">
        <label class="label">Title</label>
        <div class="control">
          <input
            class="input"
            type="text"
            placeholder="Text input"
            name="title"
            value="{{post.title}}"
          />
        </div>
      </div>

      <div class="field">
        <label class="label">Content</label>
        <div class="control">
          <textarea class="textarea" placeholder="Textarea" name="content">
{{post.content}}
        </textarea
          >
        </div>
      </div>

      <div class="field is-grouped">
        <div class="control">
          <button class="button is-link" type="submit">Update</button>
        </div>
        <div class="control">
          <button class="button is-link is-light">Cancel</button>
        </div>
      </div>
    </form>
  </body>
</html>

crud/main/templates/main/read.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Read Post {{post.id}}</title>
  </head>
  <body>
    <h1>{{post.title}}</h1>
    <p>{{post.content}}</p>
  </body>
</html>

Now all what we have to do is to make migrations so that the database creates new tables for our models, and then apply them:

py manage.py makemigrations

py manage.py migrate

Finally run the server and that's it :)

py manage.py runserver

That was everything for today, thank you so much for your time if you like the post, give it a like and follow me for more content like this.

DEV Community: Yasser Cherfaoui

How to make CMS with Django ?