Dummies Introduction to Django. Part 2 – Simple Web Forms

Now we’ve got a blank Django app to play with, we can start creating web pages.

Hello World

An introduction in computing wouldn’t be the same without the famous quote.

Open up the file project/urls.py. Ignoring the comment at the start of the file, at the bottom we have:

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

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

We need to add one import and change that path(…) statement, so the file looks:

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

from main import views

urlpatterns = [
    path("",views.homepage, name="homepage"),
]

Next, we want to edit the file main/views.py. Currently, it looks like:

from django.shortcuts import render

# Create your views here.

Add the following two lines after the comment line:

def homepage(request):
  return render(request, 'index.html')

Next, make a directory called “templates” in the main application folder:

$ mkdir main/templates

And in that new directory, create the file called “index.html” and put some basic HTML in there:

<!DOCTYPE html>
<html>
  <head>
  <title>Hello World</title>
 </head>
 <body>
  <h1>Hello World</h1>
 </body>
</html>

Save this file and run the Django app (“python manage.py runserver”) and go to http://127.0.0.1:8000/ and instead of the pretty picture of a rocket, you should see the exciting output:Hello World

So what have we done here?

  1. We’ve imported the views file from the main application
  2. We’ve told Django that the URL “” (the root or “/” URL) should be passed to the view function “homepage” in the  views file. We’ve also called this mapping “homepage”. Naming mappings is optional but has some benefits further down the line.
  3. In the views.py file, we defined the function “homepage” and told it to render the file “index.html”
  4. In the index.html file we put our basic HTML.

We could have merged steps 3 & 4, but it’s probably more likely you’ll be wanting to render something more complex than “Hello World” which is easier to do in a HTML file than putting the HTML in the middle of python code.

Ask and ye shall…

A web application isn’t much good if it can’t take user input. First, edit the index.html file so that it looks like:

<!DOCTYPE html>
<html>
  <head>
  <title>Hello World</title>
 </head>
 <body>
  <h1>Hello World</h1>
  <form method="get">
    <input type="text" name="question" />
    <input type="submit" value="Speak" />
  </form>
  {%  if answer is not None %}
    <p>{{ answer }}</p>
  {%  endif %}
 </body>
</html>

Next, edit the homepage function in views.py so it looks like:

def homepage(request):
  queryString = request.GET.get('question')
  context = {
        'answer': queryString,
  }

  return render(request, 'index.html', context)

If you reload the page (note, I didn’t say you needed to stop and restart the Django runserver process!) You should see the following:Hello World Blank Form

In the text box, enter some text and then press “Speak”

Hello World Woof

So what have we achieved here?

First, our html file can take more than HTML: It can take code!

Second, we’ve shown the homepage function taking a request parameter and outputting a variable to the template.

These are the first steps to writing web applications in Django. The next stage is to get our application talking to a database.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s