How to create a class-based view in Django

Overview

In this shot, we will learn how to create a class-based view in Django by creating a full CRUDcreate, read, update, and delete web app.

Django is an open-source, high-level Python web framework that encourages clean, pragmatic design and rapid development.

How to install

Step 1

pip install pipenv
pipenv shell
pipenv install django

Step 2

django-admin startproject CRUD./

python manage.py startapp codebase

Step 3

python manage.py migrate
python manage.py runserver

Step 4

Once the settings are initialized, we should make the following changes inside the settings.py file:

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'codebase'
]

Note: settings.py helps register the application and packages that are installed. It also writes the rules.

Step 5

We add the following code to the models.py file located inside the app folder:

from django.db import models
from django.urls import reverse

class CRUD(models.Model):
    name = models.CharField(max_length=30)
    age = models.IntegerField()
    level = models.CharField(max_length=30)
    date = models.DateTimeField(auto_now_add=True)

    def __str__(self):
        return self.name

Note: models.py is responsible for creating the model for the database.

Step 6

We write the following code inside the admin.py file:

from django.contrib import admin
from .models import CRUD

admin.site.register(CRUD)

Note: In the admin.py file, we import and register our created model. By doing so, we can view the model when we are logged in as administrator.

Step 7

With the configuration complete, we can create a file for the form. In our case, the file is named forms.py. Add the following code inside forms.py file:

from django import forms
from .models import CRUD


class CRUDFORM(forms.ModelForm):
    name = forms.CharField(widget=forms.TextInput(attrs={
        "class": "form-control",
        "placeholder": "name"
    }))
    age= forms.CharField(widget=forms.TextInput(attrs={
        'type': "number",
        "class": "form-control",
        "placeholder": "age"
    }))
    
    level = forms.CharField(widget=forms.TextInput(attrs={
        "class": "form-control",
        "placeholder": "level"
    }))
    class Meta:
        model = CRUD
        fields = [
            'name', 'age','level'
        ]

Note: The forms.py file is responsible for creating Django forms, which are like HTML forms, but dynamic.

Step 8

We can now create a view for our project with the form we just created. The corresponding views.py file is as follows:

from django.shortcuts import redirect, render, get_object_or_404, reverse
from django.views.generic.edit import UpdateView
from .models import CRUD
from .forms import CRUDFORM
from django.views.generic import ListView, CreateView, DeleteView, DetailView


# home view
class Home(ListView):
    model = CRUD
    template_name = 'app/base.html'
 
# create view
class Create(CreateView):
    model = CRUD
    template_name = 'app/create.html'
    form_class = CRUDFORM

    # if the form, submits, to go back to the homepage automatically
    def get_success_url(self):
        return reverse('home')

# detail view
class Detail(DetailView):
    model = CRUD
    template_name = 'app/detail.html'

# update view
class Update(UpdateView):
    model = CRUD
    template_name = 'app/create.html'
    form_class = CRUDFORM

    # if the form, submits, to go back to the homepage automatically
    def get_success_url(self):
        return reverse('home')

# delete view
class Delete(DeleteView):
    model = CRUD
    template_name = 'app/delete.html'
    # if the form, submits, to go back to the homepage automatically
    def get_success_url(self):
        return reverse('home')

Note: The views.py file is used to create functions or classes that visualize how a route will operate.

Step 9

• We create a folder and name it templates in the codebase.
• We create another folder and name it app inside the templates folder.
• We create base.html, create.html, detail.html, and delete.html files inside the app folder.

Add the following code inside base.html:

Add the following code inside create.html:

Add the following code inside detail.html:

Add the following code inside delete.html:

Step 10

Go to the CRUD folder and make the following amends in the urls.py file:

from django.contrib import admin
from django.urls import path, include
# importing from app folder, the view file
from app.views import Home, Create, Detail,Update, Delete

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',Home.as_view(), name="home" ),
    path('create/', Create.as_view(), name='create'),
    path('<pk>/', Detail.as_view(), name='detail'),
    path('update/<pk>/', Update.as_view(), name='update'),
    path('delete/<pk>/', Delete.as_view(), name='delete'),   
]

Note: The urls.py file is used to create a different URL route.

Step 11

Now we’re ready to run the following commands to make migrations to the code:

python manage.py makemigrations

python manage.py migrate

Step 12

To create a super-user, run the following command:

python manage.py createsuperuser

Step 13

To start the server, run:

python manage.py runserver

Note: To access the admin panel, visit https://127.0.0.1:8000/admin on your local machine. To access the homepage, visit https://127.0.0.1:8000 on your local machine.