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.
- Install Django & start new project
- Create an App
- Create the Model
- Create the Admin Interface (optional)
- Create the View
- Define the URLs (URL to View mapping)
- 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