Class-Based Views in Django
Tags: webdev, python, django, tutorial
Published: 2019-05-28 18:52:46

---
title: Class-Based Views in Django
published: true
tags: webdev,python,django,tutorial
canonical_url: https://medium.com/all-about-django/class-based-views-in-django-89108c1f51fb
---

![](https://cdn-images-1.medium.com/max/960/1*me2JPfmwjMGoLxwTggGKlA.png)

Creating CRUD interfaces with DRY patterns in Django.

In this tutorial, we will learn how to use Class-based views to create CRUD interfaces for any model.

At the end of this tutorial, we will be able to add, list, view, update and delete a particular model(here `Book` and the project is based on `library`). This tutorial can be extended to create CRUD based interfaces for any model.

![](https://cdn-images-1.medium.com/max/1600/1*SXu4Y9dYW5WQsBjbCg6LcQ.gif)<figcaption>Gif showcasing CRUD interfaces for Book model
</figcaption>

Django has 5 [class based views](https://docs.djangoproject.com/en/2.2/topics/class-based-views/)

- ListView — to view the list of objects
- CreateView — to create a particular object
- DetailView — to view a particular object
- UpdateView — to update a particular object
- DeleteView — to delete a particular object

Let’s consider that we are creating a library project. We will have a Book model in an app called `store`.

{% gist https://gist.github.com/taranjeet/c49875d6340a0dc418ac06c0d54a9778 %}

We will create a Django application, which will use Class based Views to create CRUD interfaces around the `Book` model. The complete code for the repo can be found [here](https://github.com/all-about-django/django-cbv-tutorial)

We will start by creating a list of all the `Book` objects stored in the database.

#### ListView

We will use `ListView` to create a new view called `BookListView` which will also have support for pagination.

{% gist https://gist.github.com/taranjeet/82c48daa0946b19a7e0d491bb4d108e5 %}

In the above code, we can see that we are overriding `get_context_data` to add support for pagination, by passing in an additional query parameter called page.

We will add a URL for BookListView in `store/urls.py`

{% gist https://gist.github.com/taranjeet/3c968a7325e1127abdecc4a50f924a40 %}

We need to make sure that the `store` app URLs are included in the project URLs. If not, we will have to include it.

{% gist https://gist.github.com/taranjeet/264d7d722d2dac0708c022c8a67fbb22 %}

We will now write the template code. We are using Bootstrap v4 and have a base template called `__base.html` from which we extend every other template. The `__base.html` looks like

{% gist https://gist.github.com/taranjeet/1b85d8e1f950470bffad2c3f1b514eea %}

We will now create `book/list.html` .

{% gist https://gist.github.com/taranjeet/ad55005f3ee3cb600a99bf903e28d5c3 %}

We can see that `book/list.html` includes a generic template `_pagination.html` .

{% gist https://gist.github.com/taranjeet/6853796a3d974fa4f628250e7f832d37 %}

With this, our first Class-Based View `ListView` is complete.

![](https://cdn-images-1.medium.com/max/1024/1*dvRmXZJ-FE0QvMs3_IOThA.png)<figcaption>Listview for Books</figcaption>

#### CreateView

Next, we will add support for creating a new `Book` by using `CreateView`.

We will add the following code in the views.

{% gist https://gist.github.com/taranjeet/6d9676cdc2de97f88d483b6e1bb692dd %}

We will add a new URL for the above view.

{% gist https://gist.github.com/taranjeet/b17548c76bf195f168d62b0cd5946a77 %}

We will now add a template `book/create.html` .

{% gist https://gist.github.com/taranjeet/d4e40786d9cd4ffd4c429e51480835a8 %}

This completes our second Class based View `CreateView`. We can see that Class-Based Views helps us achieve `DRY` code pattern.

![](https://cdn-images-1.medium.com/max/1024/1*6FpjJTKr8fJzsXR59ZlzsQ.png)<figcaption>CreateView for Book</figcaption>

#### DetailView

We will now create a detail view using `DetailView` class-based view. We will add the following code in views.

{% gist https://gist.github.com/taranjeet/7be394189f943c9b257ddc053876c2aa %}

We will add the following URL to include the above detail view.

{% gist https://gist.github.com/taranjeet/c2467bb0826219cc0ea193101b9f6e3e %}

We will now add a new template `book/detail.html`

{% gist https://gist.github.com/taranjeet/d09ce6cfeebe09f14f95f4d74ae3a337 %}

This completes our detail view.

![](https://cdn-images-1.medium.com/max/1024/1*d0fV3lpCtULXiBOGKuMcJw.png)<figcaption>DetailView for Book</figcaption>

#### UpdateView

Now we will add a `UpdateView` for this.

We will add the following code in the views.

{% gist https://gist.github.com/taranjeet/36eeb5912f3e32367ef25b5c25787d2d %}

We will add a URL for this view.

{% gist https://gist.github.com/taranjeet/7792eec613df90c0ffcd6fab5b246212 %}

We will add `book/update.html` template.

{% gist https://gist.github.com/taranjeet/e2e2324fc1d242c5cc3e176138ffa992 %}

This completes our `UpdateView`.

![](https://cdn-images-1.medium.com/max/1024/1*ES9Fer5L2nR5XcaiT9OMWg.png)<figcaption>UpdateView for Book</figcaption>

#### DeleteView

We will now add the last `DeleteView`.

We will add the following code in the views.

{% gist https://gist.github.com/taranjeet/56ffc0dd1e835b90cbad2b50fbcb441f %}

We will add a URL for the above view

{% gist https://gist.github.com/taranjeet/79fa9a88524c4d1657a4d3c84fba9671 %}

We will add a template `book/delete.html` for the above view

{% gist https://gist.github.com/taranjeet/e433962031967cb44b5b3adb36b5ae13 %}

This completes our `DeleteView`.

![](https://cdn-images-1.medium.com/max/1024/1*L8cRbPYpaWlUC4USkF1hZQ.png)<figcaption>DeleteView for Book</figcaption>

#### Conclusion

In this tutorial, we learned how to use Django Class-Based Views to create CRUD interfaces for a given model. This tutorial touched on the basics and focussed very little on styling and extensibility.

#### Extensions

- A [new repo](https://github.com/all-about-django/django-cbv-using-argon-theme) is created using this tutorial and [Argon Design System](https://www.creative-tim.com/product/argon-design-system). Most of the code changes are in templates only.

* * *