In earlier posts (Part 1 here, Part 2 here and Part 3 here) I have set about building a "Hello World" Python/Django application. In this post I want to configure the first screen. So let's get started... 
I have already added a home module to the apps folder. The contents are:
models.py
tests.py
views.py
Nothing complicated I just want to add a routine to present an html page.
The Home page will be a subroutine - home. Here is the addition to the views.py file:
#!/usr/bin/env python
# -*- coding: utf-8 -*-
# vim: ai ts=4 sts=4 et sw=4 nu
from django.shortcuts import render_to_response
from django.template import RequestContext
def home(request):
context = {}
return render_to_response('home/index.html',
context,
RequestContext(request))
When we run localhost:8000 we get an error (totally expected!):
Let's fix that by updating urls.py:
url(r'^$', 'apps.home.views.home'),
Another expected error (but it is progress). We are getting to the view.py file in the apps.home module because we are getting the error that no html file exists:
In the Templates folder I create a home folder and create index.html in there:
cd templates
mkdir home
When I launch http://localhost:8000 I now get the index.html file loaded. Success!
Yes - we have a basic page but there is no formatting and we are not using any of the Django template features.
Let's setup the base template. While we are at it we will probably need a set of include files so let's create a folder for them.
cd templates
mkdir include
I then create a base.html file that will contain placeholders.
<!doctype html>
<html class="no-js" lang="en">
<head>
<title>{% block pretitle %}{% endblock %}{% block title %}Hello World! {% endblock %}{% block posttitle %}{% endblock %}</title>
<meta charset="utf-8">
{% block head %}
{% endblock %}
{% block extra_head %}
{% endblock %}
</head>
<body class="{% block active_nav_tab %}{% endblock %}" {% block body_load_trigger %}{% endblock %}>
{% include "include/top-nav.html" %}
<div id="page">
{% include "include/messages.html" %}
{%block featureBox %}
{% endblock %}
{%block extra_body %}
{% endblock%}
</div>
{% include "include/footer.html" %}
</body>
</html>
Note the use of block and endblock tags like these {% block block_name %}{% endblock %} in the code. These will be used in the application to insert customized code.
Now that we have a template we need to go back and update our index.html file to use this template.
We can include other template elements using the {% include "include/filename.html" %} tag. This allows us to break the template in to manageable chunks of code. It also makes it easier to produce variations of the basic template design.
With the base template in place we now need to edit the index.html home page to make use of the template.
First let's take note of some of the sections in the template.
{% block pretitle %}{% endblock %}{% block title %}Hello World! {% endblock %}{% block posttitle %}{% endblock %}
This section allows us to insert a custom title for a page. If we want to replace the default Hello World! we need to use the {%block title}{{% endblock %} in our html file.
To add content to the main body of the page we can use the
{%block featureBox %}
{% endblock %}
section.
Let's change Index.html so it still performs the same function but uses the base.html template. Here is the updated version:
{% extends "base.html" %}
{% block title %} Welcome to My World!{% endblock %}
{% block featureBox %}
{%load get_settings %}
<p>Welcome to my voyage of discovery in Python/Django</p>
@ekivemark
<p>Can we print the STATIC_URL SETTING: [ {{ STATIC_URL }} ]</p>
{% endblock %}
When we run this we get an error. This is because we didn't create all of the include files. in this case
{% include "include/top-nav.html" %}
and
{% include "include/messages.html" %}
are the culprits. I create basic placeholders for those files and re-run the application and success!
We now have a simple template operational. At this stage with only a single page the template add a little overhead since we could code everything in a single file. But, when the application grows to tens or hundreds of pages the templates really shine because you can incorporate all the standard design elements in to the templates and your individual pages contain just the individualized elements. When you couple this with Cascading Stylesheets and the use of some standard design classes and you can quickly and easily modify the design of your application by making changes to your CSS files or to the template files.
Let's demonstrate that by adding a simple horizontal line <hr /> to the top-nav and footer include files.
Well that was easy!
So now we have a working application that is using the Django Template features. It may be time to check this code in to github.
Let's do that!
I navigate to the helloworld folder on my Mac (the one that contains manage.py).
git init
git status
git status tells me what files are being tracked.
git add README.md
git add *.py
git add apps
git add config
git add mainstatic
git add templates
git add .gitignore
run git status again to see that we haven't missed anything. No - looks good.
Now let's commit this to github:
git commit -m 'first commit'
git remote add origin https://github.com/ekivemark/helloworld.git git push -u origin master
Remember - you need to have an account on github. You will be prompted for your userid and password.
There we have the first stage completed. We have a do nothing application that uses Django templates and we have it stored in GitHub.
We aren't finished yet. The next step is to make sure Compass / SASS and Bootstrap are working. We will start out on that journey in the next post in this series.
