Faster and Better Front-ends with Django-Admin

Django is a Great Tool

Being one of the most powerful automatic interfaces, Django-admin can read metadata from models, and it allows trusted users to manage and manipulate content. One of the only issues that takes place is time. As you already know, time is crucial when data needs maintenance and when data needs to be updated on the fly and across teams. Django-admin frontends are great, but they take a long time to spin up, they are hard to customize, update, and reuse across teams. Sometimes it is also hard to make them work for more complicated applications.

So, is it possible to save time when spinning front-ends?

Yes.

And it is possible by using Django-admin itself.

How do You Save Time with Django-Admin?

Creating front-ends with Django-admin can take a long time to spin up. Usually this is accomplished by spinning up an admin by using Django on top of an existing database or data sources, as opposed to writing raw database queries. Doing it this way means you need a proper UI with validation. This is effective, but very time consuming.

So what are you supposed to do when you don't have time to build an entire user interface (UI), but you need to have an easy way for your operation teams to manipulate data? You build CRUD panels.

CRUD stands for: Create, Read, Update, and Delete.

These CRUD panels allow you to spin up custom front-ends for data entry and manipulation. Not only are these panels faster than a full django admin UI development, but they are easier to use.

Benefits of using CRUD Panels in Django-Admin

By using django-admin to create a CRUD panel, it is easier to manipulate data. Our solution makes it easy to spin up custom front-ends for data entry and manipulation. This is like Django-admin but faster, more maintainable, and easier to update. These panels can even allow you to upgrade and share across teams. By getting access to teams faster, progress can be made faster and more intently.

Simple CRUD Panel's

To create a simple CRUD admin panel, you would typically you would follow the checklist below.

1. Install Django & start new project
2. Create an App
3. Create the Model
4. Create the Admin Interface (optional)
5. Create the View
6. Define the URLs (URL to View mapping)
7. Create the Templates

Instructions courtesy of Rayed.com

Step 1: Install Django and start new project

First we need to install Django and start new Django project, I’ll name it my_proj:

pip install django
django-admin startproject hello_world
cd hello_world

Step 2 Create new App: From the Django project directory we will create the new app called “customers” to store our customers list

./manage.py startapp customers

We will also need to register the new app in our Django project, add the app “customers” to the INSTALLED_APPS in your hello_world/settings.py:

INSTALLED_APPS = (
   :
   'customers'
)

Step 3 Create the Model: The model file would becustomers/models.py:

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

class Customer(models.Model):
    first_name = models.CharField(max_length=200)
    last_name = models.CharField(max_length=200)
    email = models.EmailField()

After defining the model you need to provision it to the database:

./manage.py makemigrations
./manage.py migrate

To create the table for the new model.

Step 4 Admin Interface (optional): Django will give you free CRUD interface from the admin site, just define the file customers/admin.py as:

from django.contrib import admin
from customers.models import Customer

admin.site.register(Customer)

Step 5 The views: We will use Django Class-based views to create our app pages, the file customer/views.py would look like:

from django.http import HttpResponse
from django.views.generic import ListView, DetailView
from django.views.generic.edit import CreateView, UpdateView, DeleteView
from django.urls import reverse_lazy

from customers.models import Customer

class CustomerList(ListView):
    model = Customer
   
class CustomerView(DetailView):
    model = Customer
   
class CustomerCreate(CreateView):
    model = Customer
    fields = ['first_name', 'last_name', 'email']
   
class CustomerUpdate(UpdateView):
    model = Customer
    fields = ['first_name', 'last_name', 'email']

class CustomerDelete(DeleteView):
    model = Customer

Step 6 Define the URLs:We need to define app URLs in the file customers/urls.py (create the file):

from django.urls import path

from . import views 

urlpatterns = [
	path('', views.CustomerList.as_view(), name='customer_list'),
    path('view/<int:pk>', views.CustomerView.as_view(), name='customer_view'),
    path('create', views.CustomerCreate.as_view(), name='customer_create'),
    path('edit/<int:pk>', views.CustomerEdit.as_view(), name='customer_edit'),
    path('delete/<int:pk>', views.CustomerDelete.as_view(), name='customer_delete')
]

This URLs wouldn’t work unless you include the customers/urls.py in the main URLs file hello_world/urls.py:

Step 7 Templates:customers/templates/customers/customer_list.html This file will be used by the ListView:

<h1>Customers</h1>

<table>
    <thead>
        <tr>
            <th> First Name </th>
            <th> Last Name </th>
            <th> Email </th>
        </tr>
    </thead>
    <tbody>
        {% for customer in object_list %}
        <tr>
            <td> {{customer.first_name}} </td>
            <td> {{customer.last_name}} </td>
            <td> {{customer.email}} </td>
            <td><a href="{% url "customer_view" customer.id %}">view</a></td>
            <td><a href="{% url "customer_edit" customer.id %}">edit</a></td>
            <td><a href="{% url "customer_delete" customer.id %}">delete</a></td>
        </tr>
    </tbody>
</table>

customers/templates/customers/customer_detail.html This file will be used by detail views:

<h1>Customer Details</h1>

<h2>First Name: {{object.last_name}}</h2>
<h2>Last Name: {{object.last_name}}</h2>
<h2>Email: {{object.email}}</h2>

customers/templates/customers/customer_delete.html This file will be used by DeleteView:

<h1>Customer Delete</h1>

<form method="post">{% csrf_token %}
    Are you sure you want to delete "{{ object }}" ?
    <input type="submit" value="Submit" />
</form>

Step 8 Test It: So everything in place, now we can run the development web server:

./manage.py runserver

Then access it through a web browser http://localhost:8000/customers/ To test the admin interface we need to create a user first:

./manage.py createsuperuser

and access it http://localhost:8000/admin/

Function Based View Version

The example above uses Class Based Views (or CBV for short) to implement the views, what I will cover now is how to implement the same functionality but with Function Based Views i.e. using functions instead of classes, we will be using the same templates:

customer/views.py:

from django.shortcuts import render, redirect, get_object_or_404
from django.forms import ModelForm

from customers.models import Customer

class CustomerForm(modelForm):
    class Meta:
        model = Customer
        fields = ['first_name', 'last_name', 'email']

def customer_list(request, template_name='customers/customer_list.html'
    customer = Customer.objects.all()
    data = {'customer_list': customer}
    return render(request, template_name, data)

def customer_view(request, pk, template_name='customers/customer_detail.html'):
    customer = get_object_or_404(Customer, pk=pk)
    return render(request, template_name, {'object': customer})
    
def customer_create(request, template_name='customers/customer_form.html'):
    form = CustomerForm(request.POST or None)
    if form.is_valid():
        form.save()
        return redirect('customer_list')
    return render(request, template_name, {'form': form})
    
def customer_update(request, pk, template_name='customers/customer_form.html'):
    customer = get_object_or_404(Customer, pk=pk)
    customer = CustomerForm(request.POST or None, instance=customer)
    if form.is_valid():
        form.save()
        return redirect('customer_list')
    return render(request, template_name, {'form': form})
    
def customer_delete(request, pk, template_name='customers/customer_delete.html'):
    customer = get_object_or_404(Customer, pk)
    if request.method == 'POST':
        customer.delete()
        return redirect('customer_list')
    return render(request, template_name, {'object': Customer})

While this is a great way to create simple CRUD panels, it is still not the fastest way to do so. In our system at DataSiv, you can create SQL CRUD admin panels with custom tables and powerful interfaces (sorting, selection, filtering, paging) out of the box.

DataSiv also provides integrations and read/writing capabilities across multiple sources. These kinds of CRUD panels will allow you to read from your database and push to Google Sheets, without having to write SQL queries or Google Sheets API calls.

Now that is a lot more time efficient.

You can view all of these CRUD options at https://docs.datasiv.io/docs/database-admin-dashboard

Or just click here to be redirected : DataSiv