How to build a Django App - Part 5: Finishing the Django App

Up until now, we haven’t really given any consideration to the user of this application. As it stands, they can’t actually use the app for themselves. We will finish the app by addressing this and creating a web page that allows users to add To-dos for their own personal use.

Now, we could add the full markup to this HTML file but that’s not going to work very well if we have a lot of templates. Instead, we want to create a “partial” and then we can include those in our templates. So, let’s go to our templates folder and create another folder inside called “partials”. Then, inside this folder, let’s create two files inside this folder called header.html and footer.html.

Now, go to the index.html file and copy the markup down to the closing </header> tag. Then, paste it in the header.html file. Now, in the footer.html file, paste the closing </body> and </html> tags from index.html. You can now save and close the “header” and “footer” files.

Now, go back to index.html and delete the code that has been copied to the other two .html files. Then, type the following code at the top of the file.

{% include 'partials/header.html' %}

Next, add the following code to the bottom of the file.

{% include 'partials/footer.html' %}

The entire file should now look like this.

{% include 'partials/header.html' %}    <ul>        {% for todo in todos %}            <li><a href="/todos/details/{{todo.id}}">{{todo.title}}</a>: {{todo.text}}</li>        {% endfor %}    </ul>{% include 'partials/footer.html' %}

Hit save and open up the header.html file again. We are going to give it a title, something like “TodoList” will do. Enter the text between the <title> tags, like this.

<title>TodoList</title>

This won’t appear on the webpage as only the markup inside the <body> tags is shown there.

Now we need to do the same to our details.html file. The code for this file should now look like this.

{% include 'partials/header.html' %}    <h1>{{todo.title}}</h1>    <p>{{todo.text}}</p>    <br>    Created on {{todo.created_at}}{% include 'partials/footer.html' %}

Now, if you click on one of your to-dos you will see that it has the same header as the main page. It should look something like this.

At this point, we now have a complete front-end application with a back-end that includes an admin login. If you want to create resources from the front-end, we can now do that as well. Let’s start by going to our “header” file and creating a link to add a to-do on our homepage. Inside our header tags, underneath <h1>, enter the following code.

<a href="todos/add">Add Todo</a>

Now, as it stands, that link isn’t going to work. To change that, we need to go to our todos/urls.py file and add another path to our urlpatterns, like so.

urlpatterns = [    re_path(r'^$', views.index, name='index'), re_path(r'^details/(?P<id>\w{0,50})/$', views.details),    re_path(r'^add/', views.add),]

Now, let’s go to our templates folder and create a new file called add.html. Inside this file, we first want to add our “partials”. Then, we want to add a form. Enter the following code so that the file now looks like this.

{% include 'partials/header.html' %}    <form action="{% url 'add' %}" method="post">    {% csrf_token %}        <label for="title">Title</label>        <input type="text" name="title" id="title">        <br>        <label for="text">Text</label><br />        <textarea name="text" id="text"></textarea>        <br><br>        <input type="submit" value="Submit" />    </form>    <br>    <a href="/">Go Back</a>{% include 'partials/footer.html' %}

There’s quite a lot happening here, so let’s break it down a bit. First of all, form action is set to url ‘add’ as that is the function we are calling. We are then making a “post” request as stated by the method. csrf prevents cross-site forgeries. We then have an input, with the name and id of “title” as well as a textarea with the name and id of “text”. We have also added a submit button and a “Go Back" link.

Now, let’s save that file and go back to views.py and create the function for “add”. Since we are going to use our “add” function to load our form as well as submit to it as a post request we can write a test to see if it’s a “GET” request or a “POST” request. To do this, we need to write an if-statement. This statement will check the type of request and if it isn’t a “POST” request, it will return the add.html template. Add the following code to views.py file.

def add(request):    if(request.method == 'POST'):    returnelse:    return render(request, 'add.html')

Now, save the file and refresh the webpage. You should see that the page is now displaying the form, like this.

As it is a "GET" request, it is just loading our view when we go to that URL. When we submit it, however, it is going to make the "POST" request. So now, we need to go back to our add function and make some changes.

Firstly, we need to grab our form fields or “values” and put them in variables so that we can get them from the “request” object. Edit the function so that it looks like the one below.

def add(request):    if(request.method == 'POST'):        title = request.POST['title']        text = request.POST['text']        todo = Todo(title=title, text=text)        todo.save()        return redirect('/todos')    else:        return render(request, 'add.html')

We also need to import redirect. This comes from shortcuts. Edit the shortcuts import statement to look like the following.

from django.shortcuts import render, redirect

Now, save the file and return to the browser, refresh the page and enter some text into the form. For example:

Click the "Submit" button and you should return to localhost:8000/todos. You should also see that “Test Todo” has been added to the list of “todos”, like so.

We have now created a functioning To-do app!

If you wish to continue working on this app, a good place to start is by adding some CSS to give the app a better user interface. You might also want to change the admin panel. This can be done by creating a new folder called admin inside of the templates folder and then creating a file called base_site.html. Now if you visit the admin panel, you will see that it is just a blank page. It’s up to you how you go about editing the admin panel, just remember that it is there to be easy to use and serve a purpose more than anything else.

You might also be interested in adding more apps to the site, which you can do following the same guidelines.