Django — Basic Page Setup

Django is a fantastic web framework that allows you to create an entire back-end with little limit to the size and complexity of the database involved.

The setup process is very straight-forward and can be implemented using the official guide here.

This small guide below will help you to understand the basics behind rendering a functional webpage (having the necessary components ‘click’ in the back-end).

You will need to have open the following to complete this:

1. urls.py (from main project directory)
2. urls.py (which you will create in the app directory)
3. views.py (app directory)

As part of the setup it is good practice to open the settings.py file and under ‘installed apps’ insert the name of your application here.

~ settings.py
INSTALLED_APPS = [

    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',

    'MY_APP',
]

We will now sync the urls.py (app) file into the project urls.py file.

~ project/urls.py
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('', include('MY_APP.urls')),
    path('admin/', admin.site.urls),    
    
]

Ensure that ‘include’ is imported. The bold line states that our app urls will now be configured with the blank (‘ ‘) prefix. All urls that we now define will simply begin with the server url (http://127.0.0.1:8000/) and be affixed ahead of the trailing slash here.

Now switch over to the application urls.py file. We will now create a basic contact url. Here we import ‘path’ and the contact ‘view’ that we will define in the next step. The path line can be explained as follows:

• ‘contact/’ = the url extension we define. We will input http://127.0.0.1:8000/contact to access this page.
• contact = the view function from views.py (this will control what is rendered specifically).
• name=’contact’ = This is less important for now, it is useful for advanced cases where we implement reverse URL’s.

~ MY_APP/urls.py
from django.urls import path
from .views import contact


urlpatterns = [

    path('contact/', contact, name='contact'),
]

We’ll now switch to the views.py file in the app folder. Here we will ensure that ‘render’ is imported as shown below. The contact function takes in ‘request’ as an argument and we will render a html file which we will now create.

Remember that the name of the function needs to be the exact same as to what we type into the urls.py file.

Note - ensure the files are saved along the way to enable seamless rendering.

~views.py
from django.shortcuts import render

def contact(request):
    return render(request, 'contact.html')

It’s good practice to now zoom out in the directory and create a new folder that sits alongside the project and apps folders. Name this ‘templates’.

Inside this folder create a HTML file called ‘contact’. See how this connects with the ‘contact.html’ bold line above.

For this example, we will simply write a <h1> tag inside the html file just for test purposes.

~ contact.html

<h1> THIS IS OUR CONTACT PAGE </h1>

You should now be ready to go. The project urls.py recognises the application urls.py. The view is connected to the url and the template has been created.

The last step is to run the server. Open the command prompt. CD into the project directory (where you see the file manage.py) and then type:

‘python manage.py runserver’

You should now see something similar to this below in your CMD.

Watching for file changes with StatReloader
Performing system checks…
System check identified no issues (0 silenced).
Django version 3.1.2, using settings 'DJANGO1.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

Use the link above and affix the name of the url (contact) to the end and press enter. You’ve now created your first webpage!

If you encounter any errors, make it a habit to read what the CMD spits out. Usually it will state what page the error is located at. Typically a spelling error or the view/url not matching exactly is a cause.

More information can be found in the official documentation here.