DEV Community

Cover image for Django model + Frontend CRUD + pagination + API REST and filters by Example
Ricardo
Ricardo

Posted on

Django model + Frontend CRUD + pagination + API REST and filters by Example

#django #crud #pagination #api

Table Of Contents

Create model

We type in base dir:

python manage.py startapp stocks
Enter fullscreen mode Exit fullscreen mode

Register app in settings.py:

INSTALLED_APPS = [
    ...
    'stocks',
]
Enter fullscreen mode Exit fullscreen mode

We write initial model in "models.py":

from django.db import models

class Stock(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=128)
    price = models.FloatField()
    created = models.DateTimeField(auto_now_add=True)
    update = models.DateTimeField(auto_now=True)

    class Meta:
        verbose_name = "stock"
        verbose_name_plural = "stocks"
        ordering = ['-id', ]

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

Apply migrations:

python manage.py makemigrations
python manage.py migrate
Enter fullscreen mode Exit fullscreen mode

Create your ModelAdmin:

from django.contrib import admin
from django.contrib.admin import register
from stocks.models import Stock


@register(Stock)
class StockAdmin(admin.ModelAdmin):
    list_display = ['id', 'name', 'price', 'update']
Enter fullscreen mode Exit fullscreen mode

Then you should be see something like this in your django admin:

Alt Text

Create frontend

Create a ModelForm for after render it. Create new file "forms.py".

from django import forms
from .models import Stock

class StockForm(forms.ModelForm):
    class Meta:
        model = Stock
        fields = ['name', 'price']
Enter fullscreen mode Exit fullscreen mode

Now, we should create a CRUD views in file "views.py" (note , i add staff authentication required in update, create and delete but not is list amd not in detail):

from django.urls import reverse_lazy
from django.views.generic import ListView, DetailView, CreateView, UpdateView, DeleteView
from .models import Stock
from .forms import StockForm
from django.utils.decorators import method_decorator
from django.contrib.admin.views.decorators import staff_member_required


class StockListView(ListView):
    model = Stock
    paginate_by = 2  # change it, is page size

    def get_queryset(self):
        query = self.request.GET.get('q')
        if query:
            object_list = self.model.objects.filter(name__icontains=query)
        else:
            object_list = self.model.objects.all()
        return object_list


class StockDetailView(DetailView):
    model = Stock


@method_decorator(staff_member_required, name='dispatch')
class StockCreate(CreateView):
    model = Stock
    form_class = StockForm
    template_name_suffix = '_create_form'
    success_url = reverse_lazy('stocks:list')


@method_decorator(staff_member_required, name='dispatch')
class StockUpdate(UpdateView):
    model = Stock
    form_class = StockForm
    template_name_suffix = '_update_form'

    def get_success_url(self):
        return reverse_lazy('stocks:update', args=(self.object.id, )) + '?ok'


@method_decorator(staff_member_required, name='dispatch')
class StockDelete(DeleteView):
    model = Stock
    success_url = reverse_lazy('stocks:list')
Enter fullscreen mode Exit fullscreen mode

We connect this views to url paths (create "urls.py"):

from django.urls import path
from .views import StockListView, StockDetailView, StockCreate, StockUpdate, StockDelete


stocks_patterns = ([
    path('', StockListView.as_view(), name='list'),
    path('<int:pk>/<slug:slug>/', StockDetailView.as_view(), name='detail'),
    path('create/', StockCreate.as_view(), name='create'),
    path('update/<int:pk>', StockUpdate.as_view(), name='update'),
    path('delete/<int:pk>', StockDelete.as_view(), name='delete'),
], 'stocks')
Enter fullscreen mode Exit fullscreen mode

In settings.urls we add:

...
from stocks.urls import stocks_patterns
...

urlpatterns = [
    ...
    path('stocks/', include(stocks_patterns)),
    ...
]
Enter fullscreen mode Exit fullscreen mode

This CRUD views need next 5 templates:

  • stocks/templates/stocks/stock_list.html
  • stocks/templates/stocks/stock_detail.html
  • stocks/templates/stocks/stock_create_form.html (custom prefix)
  • stocks/templates/stocks/stock_update_form.html (custom prefix)
  • stocks/templates/stocks/stock_confirm_delete.html

stocks/templates/stocks/stock_list.html:

{% extends 'core/base.html' %}
{% load static %}

{% block title %}Stocks{% endblock %}
{% block content %}
    <form method='GET'>
      <div class="columns is-centered mb-1">
        <div class="column is-11">
            <p class="control has-icons-left">
              <input class='input' type='text' name='q' value='{{ request.GET.q }}' placeholder="Search">
              <span class="icon is-left">
                <i class="fas fa-search" aria-hidden="true"></i>
              </span>
            </p>
        </div>

        <div class="column">
          <input class="button is-primary" type='submit' value="Search">
        </div>

      </div>

    </form>

    {% if stock_list|length == 0 %}
        No se han encontrado resultados.
        <a href="{% url 'stocks:create' %}" class="card-footer-item">Create</a>
    {% endif %}

    {% for stock in stock_list %}

      <div class="card">
        <header class="card-header">
          <p class="card-header-title">
            {{ stock.name }}
          </p>
          <a href="#" class="card-header-icon" aria-label="more options">
            <span class="icon">
              <i class="fas fa-angle-down" aria-hidden="true"></i>
            </span>
          </a>
        </header>
        <div class="card-content">
          <div class="content">
            {{stock.name|striptags|safe|truncatechars:"200"}} {{stock.price}}
            <br />
            <time datetime="2016-1-1">{{stock.updated}}</time>
          </div>
        </div>
        <footer class="card-footer">

          {% if request.user.is_staff %}
            <a href="{% url 'stocks:create' %}" class="card-footer-item">Create</a>
            <a href="{% url 'stocks:delete' stock.id %}" class="card-footer-item">Delete</a>
            <a href="{% url 'stocks:update' stock.id %}" class="card-footer-item">Edit</a>
          {% endif %}
          <a href="{% url 'stocks:detail' stock.id stock.name|slugify %}" class="card-footer-item">Read more ...</a>
        </footer>
      </div>

    <br />

    {% endfor %}



    {% if stock_obj.paginator.num_pages > 1 %}
    <nav class="pagination" role="navigation" aria-label="pagination">
      {% if stock_obj.has_previous %}
          <a class="pagination-previous" href="?page={{ stock_obj.previous_page_number }}&q={{ request.GET.q }}">Previous</a>
      {% endif %}
      {% if stock_obj.has_next %}
          <a class="pagination-next" href="?page={{ stock_obj.next_page_number }}&q={{ request.GET.q }}">Next page</a>
      {% endif %}
      <ul class="pagination-list">
        {% if stock_obj.number > 3 %}
          <li>
            <a class="pagination-link" aria-label="Goto page 1" href="?page=1&q={{ request.GET.q }}">1</a>
          </li>
          {% if stock_obj.number > 4 %}
            <li>
              <span class="pagination-ellipsis">&hellip;</span>
            </li>
          {% endif %}
        {% endif %}

        {% for i in stock_obj.paginator.page_range %}
        <li>
          {% with leftmax=stock_obj.number|add:"-3" %}
            {% with rightmax=stock_obj.number|add:"+3" %}
              {% if leftmax < i %}
                {% if i < rightmax %}

                  {% if i == stock_obj.number %}
                    <a class="pagination-link is-current" aria-label="Goto page {{ i }}" href="?page={{ i }}&q={{ request.GET.q }}" aria-current="page">{{ i }}</a>
                  {% else %}
                    <a class="pagination-link" aria-label="Goto page {{ i }}" href="?page={{ i }}&q={{ request.GET.q }}">{{ i }}</a>
                  {% endif %}

                {% endif %}
              {% endif %}
            {% endwith %}
          {% endwith %}
        </li>
        {% endfor %}

        {% with rightdistance=stock_obj.paginator.num_pages|add:"-2" %}
          {% with rightdistanceplus=stock_obj.paginator.num_pages|add:"-3" %}
            {% if stock_obj.number < rightdistance %}
              {% if stock_obj.number < rightdistanceplus %}
                <li>
                  <span class="pagination-ellipsis">&hellip;</span>
                </li>
              {% endif %}
              <li>
                <a class="pagination-link" aria-label="Goto page {{ stock_obj.paginator.num_pages }}" href="?page={{ stock_obj.paginator.num_pages }}&q={{ request.GET.q }}">{{ stock_obj.paginator.num_pages }}</a>
              </li>
            {% endif %}
          {% endwith %}
        {% endwith %}

      </ul>
    </nav>
    {% endif %}

{% endblock %}
Enter fullscreen mode Exit fullscreen mode

stocks/templates/stocks/stock_detail.html:

{% extends 'core/base.html' %}
{% load static %}
{% block title %}{{object.name}}{% endblock %}
{% block content %}
<main role="main">
  <div class="container">
    <div class="row mt-3">
      <div class="col-md-9 mx-auto">
        <h2 class="title">{{object.name}}</h2>
        <div>
          name: {{object.name|safe}}<br />
          price: {{object.price}}<br />
          {% if request.user.is_staff %}
          <br />
            <p><a href="{% url 'stocks:list' %}">Volver</a></p>
            <p><a href="{% url 'stocks:update' object.id %}">Editar</a></p>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

stocks/templates/stocks/stock_create_form.html:

{% extends 'core/base.html' %}
{% load bulma_tags %}
{% load static %}

{% block title %}Create{% endblock title %}

{% block content %}
<form method="post">
   {% csrf_token %}
   {{ form | bulma }}
   <div class="field">
     <button type="submit" class="button is-primary">Create</button>
   </div>
   <input type="hidden" name="next" value="{{ next }}"/>
</form>
<p><a href="{% url 'stocks:list' %}">Volver</a></p>
{% endblock content %}
Enter fullscreen mode Exit fullscreen mode

stocks/templates/stocks/stock_update_form.html:

{% extends 'core/base.html' %}
{% load bulma_tags %}
{% load static %}

{% block title %}Update{% endblock title %}

{% block content %}
{% if 'ok' in request.GET %}
    <article class="message is-primary">
      <div class="message-header">
        <p>Actualizado</p>
        <button class="delete" aria-label="delete"></button>
      </div>
      <div class="message-body">
          Updated. <a href="{% url 'stocks:detail' stock.id stock.name|slugify %}">more details here.</a>
      </div>
    </article>
{% endif %}
<form method="post">
   {% csrf_token %}
   {{ form|bulma }}
   <div class="field">
     <button type="submit" class="button is-primary">Update</button>
   </div>
   <input type="hidden" name="next" value="{{ next }}"/>
</form>
<p><a href="{% url 'stocks:list' %}">Volver</a></p>
{% endblock content %}
Enter fullscreen mode Exit fullscreen mode

stocks/templates/stocks/stock_confirm_delete.html:

{% extends 'core/base.html' %}
{% load static %}
{% block title %}{{object.name}}{% endblock %}
{% block content %}
<div class="box has-text-centered">
  <form action="" method="post">{% csrf_token %}
      <p class="mb-3">¿Estás seguro de que quieres borrar <b>"{{ object }}"</b>?</p>
      <input class="button is-primary" type="submit" value="Sí, borrar la página" />
      <input class="button is-danger" onclick="history.go(-1); return false;" value="Cancelar" />
  </form>
</div>
{% endblock %}
Enter fullscreen mode Exit fullscreen mode

I use 'core/base.html' from django-bulma. Here the result:

Alt Text

We have search, pagination, edit form, create form and delete. All this, with minimal code and very customizable.

Create API

For expose this model to API REST, we use django restframework and django-filter:

$ pip install djangorestframework
$ pip install django-filter
Enter fullscreen mode Exit fullscreen mode

And register it in settings:

INSTALLED_APPS = [
    ...
    'rest_framework',
    'django_filters',
]
Enter fullscreen mode Exit fullscreen mode

For convert model to json, or json to model we need create "serializers.py" file, and type:

from rest_framework import serializers
from .models import Stock


class StockSerializer(serializers.ModelSerializer):
    class Meta:
        model = Stock
        fields = '__all__'
Enter fullscreen mode Exit fullscreen mode

For create a API Rest that let "filter" and "order" for someone field of model. We create "filters.py" and type:

import django_filters
from .models import Stock


class StockFilter(django_filters.FilterSet):
    id = django_filters.NumberFilter()
    name = django_filters.CharFilter(lookup_expr='iexact')
    price = django_filters.CharFilter(lookup_expr='eq')
    order = django_filters.OrderingFilter(fields=('name', 'price', ))

    class Meta:
        model = Stock
        fields = '__all__'
Enter fullscreen mode Exit fullscreen mode

Finally, we need create a API View using your serializer and your filter. We create "viewsets.py" and type:

from rest_framework import viewsets
from .models import Stock
from .serializers import StockSerializer
from .filters import StockFilter


class StockViewSet(viewsets.ModelViewSet):
    queryset = Stock.objects.all()
    serializer_class = StockSerializer
    filterset_class = StockFilter
Enter fullscreen mode Exit fullscreen mode

Now, we are registering this viewset in settings.router:

from rest_framework import routers
from stocks.viewsets import StockViewSet

router = routers.DefaultRouter()
router.register('stocks', StockViewSet)

urlpatterns = [
    ...
    path('api/v1/', include(router.urls)),
    ...
]
Enter fullscreen mode Exit fullscreen mode

Maybe you need a good config for restframework.auth. Using JWT, Cookies, or whatever you want.

The API (is full CRUD + filters) is available in: http://localhost:8000/api/v1/stocks/

I recommend "drf-spectacular" for generate API documentation in swagger, or redoc format.

I hope this is useful for someone.

Greats. Ricardo.
Follow me for more content.

Ricardo's DEV Community Profile

Top comments (0)

Read next

nausaf profile image

An Attempt to return meaningful Problem Details responses for model binding errors in an ASP.NET Core Minimal API

nausaf -

ifeanyi_idiaye_3f6d81ed8a profile image

Transcription & Translation App Powered by Assembly AI & Google Gemini

Ifeanyi Idiaye -

3kb-dev profile image

Hanashi (話) AI | Turn Every Customer Support Call into Actionable Intelligence

3kb-dev -

balrajola profile image

20 Free APIs to Kickstart Your Side Projects

Balraj Singh -