Templates and Bootstrap¶

Now, we will use Django’s built in templating to style our home page. Django will look within each app for templates or for a base folder call templates. We will create a folder in the main project to house our templates, and a file called home to place our styling in.

mkdir templates
touch templates/home.html

Now, we will use the settings.py file to establish our template and tell Django where it is located. Adding the line:

TEMPLATES = [
    {
        'DIRS': [os.path.join(BASE_DIR, 'templates')],

},
]

Let’s add some HTML to our home.html file as well.

<h1>Hello again.</h1>

Updating Views¶

There is a built-in TemplateView method that we will use in the views.py file. Here, we follow a similar approach to our last example in terms of mapping urls. In our views.py file we will add

from django.views.generic import TemplateView

class HomePageView(TemplateView):
    template_name = 'home.html'

In the app level urls.py, we just need to change the line in our urlpatterns list:

path('', views.HomePageView.as_view(), name = 'home')

Now, if we restart the server we will have our new home page rendered.

Adding a Page¶

To add a page, we will create a new template, view, and url route just as above. We can call this page our about page.

touch templates/about.html

Add HTML to the about page.

<h1>This is about me.</h1>

We create a view in our views.py file, we will create an aboutpageview class.

class aboutpageview(TemplateView):
    template_name = 'about.html'

In our urls.py file, we add a line to our urlpatterns to direct visitors to the about page.

path('about/', views.aboutpageview.as_view(), name = 'about'),

Extending the Template¶

Now, we will create a base file that we can use to extend a style across multiple pages. To do so, we will create a base file, and then use the Django minimal templating language to pull the formatting in to the additional pages.

touch templates/base.html

Here, we can add a minimal header to see how this can be applied to all pages. In the new base.html file, write the following:

<header>
  <a href="{% url 'home' %}">Home</a> | <a href="{% url 'about' %}">About</a>
</header>

{% block content %}
{% endblock %}

Now, we alter the home.html and about.html files to extend the base.html file. In each, we will add the line

{% extends 'base.html' %}

Finally, we wrap the content of both pages with {% block content %}{% endblock %}. Thus, in our home.html file, we have:

{% extends 'base.html' %}

{% block content %}
<h1>Welcome Home Jacob.</h1>
{% endblock %}

Same thing in our about.html file. Restart the server and you should see the header appear.

Using Bootstrap¶

The bootstrap framework is a way around developing all our own CSS. We can either directly download the files, or use the CDN link. We will follow this approach by copying the CDN information from the Bootstrap getting started page.

https://getbootstrap.com/docs/3.3/getting-started/

Go to our base.html file, and add the link in a <head></head> tag.

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

Fire up the server and you should notice a slight formatting change.

Tests¶

A major part of development in Django is the use of tests to assure everything is working. While our page is extremely simple, we still want to make sure that our home and about pages are functioning to return responses. In the tests.py file, we will place two simple tests that verify these pages are returning a 200 response code.

from django.test import TestCase

# Create your tests here.
from django.test import SimpleTestCase


class SimpleTests(SimpleTestCase):
    def test_home_page_status_code(self):
        response = self.client.get('/')
        self.assertEqual(response.status_code, 200)

    def test_about_page_status_code(self):
        response = self.client.get('/about/')
        self.assertEqual(response.status_code, 200)

Problem¶

Remember that our goal is to put together a website to share our Python Data projects that we’ve been making in Jupyter notebooks. To do so, let’s consider taking a notebook, converting it to an HTML file, and adding this file to a a page called Projects where users can see our different projects for visitors to see.

To create the HTML files of the notebooks, we will use Jupyter’s nbconvert functionality. To start, navigate to the directory where your notebooks are housed with the terminal and cd command. Now, whatever notebook you would like to convert, enter

jupyter nbconvert notebook.ipynb

and you will have a new HTML file in the same folder. If you want, you can enter a directory to place this new file, for example

jupyter nbconvert notebook.ipynb htmls/

assuming we have an htmls directory.

Your goal is to play around with the different bootstrap features to style your home and about pages, and to add a projects page that contains your first Python projects from the Jupyter notebooks. You should explore a nicer navbar that includes a logo image.