Django – Making Pages

In my previous post I showed you how to look at database data in the Django shell. In this post we’re going to create a home page.

Creating a website with Django has three steps:

  1. Define the URL pattern
  2. Write the View
  3. Write the Template

You can do this in any order, but generally it is best practice to follow the order above.

Step 1 – Define the URL

Each URL you make will map to a particular view that you write. The view function will normally use a template you have defined to render the web page.

In the base project folder (mine is called burger_joint), open urls.py. Make it match the code below.

from django.contrib import admin
from django.urls import path, include

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

In the code above, we’ve added include to the second import statement. We’ve also added path to include the URL file in our burgers app. Next we need to create the URL file in our burger app folder. This can be confusing, so make sure you are editing the correct urls.py files.

Create a new python file in the burgers app folder call urls.py. It should look like the code below.

'''Defines the URL patterns for burgers'''
from django.urls import path
from . import views

app_name = 'burgers'
urlpatterns = [
    # Home Page
    path('', views.index, name='index'),
]

This code imports the path and views functions. The path function tells Django how to route URL requests. The view function tells Django how to render the page.

In urlpatterns we call path with three arguments. The first tells Django the URL (in our case localhost:8000), the second tells Django which function to call in views (index), and the third is a handy name to reference in other code.

See the image below to understand that we’ve just edited the “burger_joint” url.py and created the “burgers” url.py. This can get confusing. Make sure you are editing the correct URL file. One is the the project, the other is for the app.

Step 2 – Write the View

You write functions in the app’s views.py that take the request from a browser, processes the data, the sends the processed data back to the browser for rendering. Open the views.py file and make it match the below code.

from django.shortcuts import render

# Create your views here.
def index(request):
    '''The homepage of ThinkTwisted Burger Joint'''
    return render(request, 'burgers/index.html')

Now, when a browser requests a the base URL of our site, Django will call the index function of views.py and render the page based on HTML in the index.html file.

Step 3 – Write the Template

Template might be a bit misleading in this case, what we’re really creating is just a simple HTML file. We’ll turn it into a template in future posts. For larger projects with more complex pages and systems, this allows a web developer to create detailed pages. I’m not a web developer, so I’m keeping it simple.

Create a new folder in your burgers app folder called “templates” in this folder, create another one called “burgers”. In this folder create a file named index.html. The structure should be: burgers/templates/burgers/index.html. The content should be:

<p><b>ThinkTwisted Burgers</b></p>

<p>The Home page for our burgers</p>

Now, save all your files, and restart your Django server – press Ctrl-C in the terminal to stop it, then run “python manage.py runserver”. Navigate your browser to the URL specified in the command line, and you should see your burger homepage.

You’re done! You’ve just created your first “full stack” website using Django. We have a lot more work to do in order to make it functional and useful to the world, but the basics are there.

Stay tuned as we discuss how to create additional pages, pull data from the database, and process data.

John

Leave a Reply

Your email address will not be published. Required fields are marked *