Django Small Business Website Template
By Krystal Ruwoldt
Updated 12/9/2020
See the source code for this project:
This project is a generic Django template I made for quickly creating any new small business or organization website for where the client wants to be able to manage their own website content. It has common data structures for types of content that generally appear on these sorts of websites - such as service pages, about sections, blogs and portfolios, plus contact and 'get consultation/quote' forms. The front end is based off a generic HTML template, as using a HTML template and simply customizing it to reflect the branding or image of the client significantly reduces design time, which can save a client a lot of money!
Table of Contents
Design & Planning
Purpose
The main purpose of this project is to establish a 'boilerplate' template that I can use to setup a client's new website efficiently. The template is based on a client that just wants a web presence to advertise their business. If a client wanted a eCommerce website or some other web API, I'd be more inclined to build in ASP.NET Core (of which I have another 'boilerplate' project for this purpose!). I recommend ASP.NET Core over Django for larger and more complex projects as these benefit greatly from ASP.NET Core's performance and scalability.
I like the Django framework for basic websites because it can be built very quickly using the automatic admin interface. So this template's main goal was to make this process even faster, as from browsing many small service and organization websites, I've noted the common components that make up these sites.
Initial Planning
First I needed to do a bit of research into the components I wanted to include in this template and work out the data structure. I made notes from browsing many different business and organizations websites in my local area, and even plugged their domains into Mozilla's Observatory to get an idea on the frameworks they were running on. I found most were using PHP (not surprising!) and many were based on Wordpress or other CMS platforms (probably in use because programming knowledge is not necessary to use these website builders). I also noted a lot of web design and development agencies in Western Australia build these sites as their cheapest option for clients, but these sites don't feature great security, are at risk of plugin breaks and in some cases, are 'buggy' from the end-user's standpoint.
So armed with this research, I began writing a lot of my 'scribbly' notes to design the components and data structure for this Django project. I knew that I'd probably use a HTML template for the basis of the front-end design, as these are either free or very cheap and can be quickly customized to reflect a client's branding and image. Most are based using Bootstrap with various Javascript plugins that are used to jazz up the UI. I also knew I would probably want to use some sort of Content Delivery Network (CDN) so the client has the benefits of a fast loading site.
The components that ended up in this template from the planning included a blog, portfolio, services section, about section, pricing section and features such as newsletter subscription, contact form and get a quote/consultation form. From this I began planning the database schema to begin development on the project.
Very first notes (represented here much neater than my original 'scribbly' notepaper!)
Development
Reverse Engineering a HTML Template
The first task was to find a free HTML template that included the kind of components I wanted in my template. I used the Eterna Bootstrap template I found at BootstrapMade.com as a starting point for the HTML. Of course a few of the Javascript plugins broke as soon as I started wiring the template into the Django app, but that was to be expected! The focus was more about how the back-end would work at this stage.
Eterna BootstrapMade.com free HTML template
This template features a few carousels and sliders - and if you know already from reading My Website project article that I'm not a fan of carousels, sliders and any controls that move about without user input (at least on my own site!) - but I decided to include SOME of these automated controls, as I know they have a purpose from an aspect of marketing to the consumer.
Models and Model Managers
As I already had a rough idea on how the database schema would be from my 'scribbly' plan I began creating the models for the project. As I did this, I added these models into Admin.py and tested out Django MPTT and Nested Admin packages. A lot of Django developers have probably heard or used Model Preorder Tree Traversal (MPTT), as it's very popular for implementing hierarchical data storage in Django models. I'm using it for the purpose of nesting blog post comments in this project.
models.py : Comment Model
...
from django.db import models
from mptt.models import MPTTModel, TreeForeignKey
...
class Comment(MPTTModel):
post = models.ForeignKey(Post, on_delete=models.CASCADE, related_name='comments_posts')
parent = TreeForeignKey('self', on_delete=models.CASCADE, null=True, blank=True, related_name='children')
display_name = models.CharField(max_length=50)
email = models.EmailField()
content = models.TextField()
published = models.DateTimeField(auto_now_add=True)
...
class MPTTMeta:
order_insertion_by = ['published']
def __str__(self):
return 'Comment by {}'.format(self.display_name)
...
Nested Admin is a great package for extending the Django Admin Inline Forms so that child data can be displayed on the page for the selected parent, when the selected parent is the child of another parent. Sound complicated? Have a look at how the Order Items and Orders are displayed on a Client page. This is a feature I definitely wanted in the Admin so the end-user can easily see related data. The Admin Interface definitely needed more refinements and design for end-user usability, but I always focus on the functionality of a project before getting carried away with design!
Nested Admin in action on my update client admin page
Another step I take very early on in a Django project is to move custom Model Managers into their own managers.py file, create classes for generating query sets and then classes for functions that return these sets. This organizes the code by helping to keep one function in each definition (KISS), especially important in functional programming. Setting up the project like this from the beginning makes it easy to scale as views and forms are created. It also makes it much easier to do unit testing!
This example is the Client Manager and a custom query set defined for an AND statement. It gets only the clients that can be displayed on the public website AND excludes those clients that do not have a company name.
managers.py
...
from django.db import models
...
class ClientQuerySet(models.QuerySet):
def display_website(self):
return self.filter(show_website=True).exclude(company__isnull=True)
class ClientManager(models.Manager):
def get_queryset(self):
return ClientQuerySet(self.model, using=self._db)
def all(self):
return self.get_queryset()
def all_count(self):
return self.get_queryset().count()
def display_website(self):
return self.get_queryset().display_website()
...
The largest task was to wire up the public views (and forms where necessary) with the models. Working on one component at a time, I extended the Model Managers as necessary to get or create the data that needed to be displayed, added the Views (and Forms) and defined the URLs. As I developed each section in this manner, I removed parts of the HTML template that were completely unnecessary and added other parts as needed.
I also began a Trello board (my favourite planning tool) as I identified areas where I wanted to introduce additional features and small potential issues that I would need to resolve. This kept my focus on the task at hand rather than getting side-tracked! I was able to then work through the to-do list once the 'bones' of the website were developed.
Development Tasks in Progress
Restyling and Django Admin Makeover
Currently I am working on the design of the website. I am using SASS to create a Bootstrap Theme which I can use to reduce the amount of additional CSS in the site.css. I will need to go through page by page to refine the style and fix broken Javascript plugins that came with the HTML template. I suspect I will complete rewrite the navigation bar as the original code is buggy on dynamically generated pages which is basically the whole site!
The Django Admin interface also will need some serious work to make it more user-friendly and reflect the design of the public interface. Luckily, Django has fantastic documentation on the Admin Interface! I plan to create two admin sites - a 'basic' and an 'advanced' site. The Advanced Admin will be the default Django Admin with a few customisations for the display of data, while the Basic Admin will use overidden templates to simplify and beautify the user interface. It is intended the developer (ie. myself!) would only use the Advanced Admin (for tasks such as initial upload of website data and debugging), while the Basic Admin would be targeted for client use, as they may not be necessarily technology-savvy.
I also have had the idea to create a draft instruction manual for using the Basic Admin, of which a 'final' version would be something I would give to a client so that they could edit their website with confidence.
Final Development Tasks
These tasks I have penciled in to complete post design:
- Set up unit tests;
- Test publishing locally with PostgreSQL;
- Look into CDNs (Content Delivery Networks) and good options for Django site hosting, setting up boilerplate code for the same; and
- Review the overall template to identify features or functionality I could improve or extend.
I have also written a cheat sheet blog post about using Visual Studio 2019 for Django projects while developing this project. I will update this article as development progresses on this project!