We will start this section of the Taskbuster tutorial by finishing template inheritance between the base and the home page.
Next, we’ll talk about how to configure files that are used in normal websites.
The file robots.txt is very important at the beginning of a project, because you don’t want that Google indexes any of your pages. Imagine what would happen if a user gets into your website while looking for something in Google and finds your site in development, with bad CSS styles and nonsense text!
Moreover, you will learn how to implement Coverage in your tests. As you might know, this tool gives you a measure of how much your code is covered by tests.
This is the outline of this part:
Before starting with this post, have you checked that all the tests we wrote pass? 😉
Template Inheritance
In the last part of this tutorial, we set index.html to inherit from base.html. However, the only content that was different between these two files was the title.
Let’s prepare our base.html template to be more flexible. You can find the final version of these files here: base.html and index.html.
We will add two blocks at the end of the head tag in the base.html file:
{% block head_css %}{% endblock %}
{% block head_javascript %}{% endblock %}
to be able to include more css or javascript files on our templates. Next, we’ll add a navbar block that wraps the navbar element:
{% block navbar %}
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
...
</nav>
{% endblock %}
This way, we can substitute the contents of the navbar in our templates, but if we don’t specify any, this navbar will appear by default.
The main contents have to be in a separate content block, named block content. However, as we don’t need any value by default, we’ll cut all the content inside the jumbotron and container divs and paste it into the index.html file. The index.html file becomes:
{% extends "base.html" %}
{% block head_title %}TaskBuster Django Tutorial{% endblock %}
{% block content %}
<div class="jumbotron">
...
</div>
<div class="container">
...
</div>
{% endblock %}
And in the base.html you just need to add this replacing missing content:
{% block content %}{% endblock %}
In some versions of the HTML boilerplate, the <footer> element is inside the <container>. You might want to preserve this element into the base.html file.
Finally, sometimes we need to add scripts at the end of the html document, so before the </body> tag, add the line:
{% block footer_javascript %}{% endblock %}
Save both files and run the tests. The home page should look exactly the same, so all tests should pass!
Robots.txt and humans.txt files
Usually search engines look for these files at:
- /robots.txt
- /humans.txt
So let’s make them available at those urls. Before, as you may have guessed, we will create a functional test for them 😉
Inside the same functional_tests/test_all_users.py define the next method on the HomeNewVisitorTest class:
def test_home_files(self):
self.browser.get(self.live_server_url + "/robots.txt")
self.assertNotIn("Not Found", self.browser.title)
self.browser.get(self.live_server_url + "/humans.txt")
self.assertNotIn("Not Found", self.browser.title)
which checks that when going to the corresponding url we don’t see the Not Found 404 page (If your browser displays a different message when a page is not found, you should change the test text accordingly).
Run the test and see it fail. Next, update your urls.py file with:
from .views import home, home_files
and
urlpatterns = patterns( ... url(r'^(?P<filename>(robots.txt)|(humans.txt))$', home_files, name='home-files'), ... )
which is a regular expression that takes the desired urls and passes as an argument the filename, i.e. robots.txt or humans.txt.
Next, edit the views.py and add the corresponding home_files view:
def home_files(request, filename):
return render(request, filename, {}, content_type="text/plain")
Run the tests again, they should pass now! 😉
But, what should these files contain?
While I am developing a website, I don’t want that Google indexes any of my pages. Therefore, I write the following on my robots.txt file:
User-agent: * Disallow: /
On the other hand, on humans.txt you should write information about your Team. For example,
# humanstxt.org/ # The humans responsible & technology colophon # TEAM Marina Mele -- Developer -- @marina_mele # THANKS Thanks to all my Blog readers, who encouraged me to write the TaskBuster Django Tutorial # TECHNOLOGY COLOPHON Django HTML5 Boilerplate Twitter Bootstrap
When your page is live, you have to remember to edit again the robots.txt and let Google index your pages. Otherwise, people won’t be able to find your website when looking for something on the search engines!
The favicon.ico image
If you don’t know what’s the favicon image, look for the spherical cow icon of this website at the top of your browser 🙂
You’ve probably seen that even we have a favicon.ico file inside taskbuster/static folder, it’s not visible on our home page. This is because we forgot to include it on the template!
So, go to the base.html template and add the following line after the title tag:
<link rel="shortcut icon" href="{% static 'favicon.ico' %}"
type="image/x-icon">
Reload your page and you’ll see your icon on the page tag of your browser.
Testing with Coverage
Coverage is a useful tool for testing. It tells you which parts of your code are covered by some test. It’s important that before going into production, your code has a big percentage of coverage.
We will only install it in the testing environment, so activate tb_test and run:
$ pip install coverage
check the version installed with pip freeze and add it into the requirements/testing.txt file.
Next, run your tests with coverage using:
$ coverage run --source='.' manage.py test
which will run both unittests and functional tests. You can see the coverage report with:
$ coverage report
If you want a nicer representation in html, use:
$ coverage html
And then, you can see the results in htmlcov/index.html, where you’ll see which lines have been covered by a test, in each file! Nice!
However, these commands have created files that we don’t want to keep in version control. So type:
$ echo ".coverage" >> .gitignore $ echo "htmlcov" >> .gitignore
That’s all for this part of the tutorial!
On the next part, we’ll talk about Internationalization. We’ll configure two different languages and make our website to work with both.
Go to the next part – Internationalization and Localization. Multiple languages and Time zones.
Do you like the Taskbuster tutorial? Share it with your friends! 🙂