Análisis multifactorial

To give Rango a much needed facelift, we can replace the content of the existingbase.htmlwith the

HTML template code inbase_bootstrap.html. You might want to first comment out the existing

code inbase.htmland then cut-and-paste in thebase_bootstrap.htmlcode.

Now reload your application. Pretty nice, hey!

You should notice that your application looks about a hundred times better already. Below we have some screen shots of the about page showing the before and after.

Flip through the different pages. Since they all inherit from base, they will all be looking pretty good, but not perfect! In the remainder of this chapter, we will go through a number of changes to the templates and use various Bootstrap classes to improve the look and feel of Rango.

A screenshot of the About page with Bootstrap Styling applied.

The Index Page

For the index page it would be nice to show the top categories and top pages in two separate columns. Looking at the Bootstrap examples, we can see that in theNarrow Jumbotronthey have an example with two columns. If you inspect the source, you can see the following HTML which is responsible for the columns.

<div class="row marketing"> <div class="col-lg-6">

<h4>Subheading</h4>

<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> <h4>Subheading</h4>

</div>

<div class="col-lg-6"> <h4>Subheading</h4>

<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p> </div>

</div>

Inside the<div class="row marketing">, we can see that it contains two<div>’s with classescol- lg-6. Bootstrap is based on a grid layout, where each container is conceptually broken up into 12

units. Thecol-lg-6class denotes a column that is of size 6, i.e. half the size of its container,<div class="row marketing">.

Given this example, we can create columns inindex.htmlby updating the template as follows. {% extends 'rango/base.html' %} {% load staticfiles %} {% block title_block %} Index {% endblock %} {% block body_block %} <div class="jumbotron">

<h1 class="display-3">Rango says...</h1> {% if user.is_authenticated %}

<h1>hey there {{ user.username }}!</h1> {% else %}

<h1>hey there partner! </h1> {% endif %}

</div>

<div class="row marketing"> <div class="col-lg-6">

<h4>Most Liked Categories</h4> <p>

{% if categories %} <ul>

{% for category in categories %}

<li><a href="{% url 'show_category' category.slug %}"> {{ category.name }}</a></li>

{% endfor %} </ul>

{% else %}

<strong>There are no categories present.</strong> {% endif %}

</p> </div>

<h4>Most Viewed Pages</h4> <p>

{% if pages %} <ul>

{% for page in pages %}

<li><a href="{{ page.url }}">{{ page.title }}</a></li> {% endfor %}

</ul> {% else %}

<strong>There are no categories present.</strong> {% endif %}

</p> </div> </div>

<img src="{% static "images/rango.jpg" %}" alt="Picture of Rango" /> {% endblock %}

We have also used thejumbotronclass to make the heading in the page more evident by wrapping

the title in a<div class="jumbotron">. Reload the page - it should look a lot better now, but the

way the list items are presented is pretty horrible.

Let’s use thelist group styles provided by Bootstrapto improve how they look. We can do this quite easily by changing the<ul> elements to<ul class="list-group"> and the <li>elements to <li class="list-group-item">.

A screenshot of the Index page with a Jumbotron and Columns.

The Login Page

Now let’s turn our attention to the login page. On the Bootstrap website you can see they have already made anice login form. If you take a look at the source, you’ll notice that there are a number of classes that we need to include to pimp out the basic login form. Update thebody_blockin the login.htmltemplate as follows:

{% block body_block %}

<link href="http://v4-alpha.getbootstrap.com/examples/signin/signin.css"

rel="stylesheet"> <div class="jumbotron">

<h1 class="display-3">Login</h1> </div>

<form class="form-signin" role="form" method="post" action="."> {% csrf_token %}

<h2 class="form-signin-heading">Please sign in</h2>

<label for="inputUsername" class="sr-only">Username</label> <input type="text" id="id_username" class="form-control"

placeholder="Username" required autofocus>

<label for="inputPassword" class="sr-only">Password</label> <input type="password" id="id_password" class="form-control"

placeholder="Password" required>

<button class="btn btn-lg btn-primary btn-block" type="submit"

value="Submit" />Sign in</button> </form>

{% endblock %}

Besides adding in a link to the bootstrapsignin.css, and a series of changes to the classes associated

with elements, we have removed the code that automatically generates the login form, i.e.form.as_- p. Instead, we took the elements, and importantly the id of the elements generated and associated

them with the elements in this bootstrapped form.

In the button, we have set the class tobtnandbtn-primary. If you check out theBootstrap section on buttonsyou can see there are lots of different colours that can be assigned to buttons.

A screenshot of the login page with customised Bootstrap Styling.

Other Form-based Templates

You can apply similar changes toadd_cagegory.htmlandadd_page.htmltemplates. For theadd_- page.htmltemplate, we can set it up as follows.

{% extends 'base.html' %}

{% block title %}Add Page{% endblock %} {% block body_block %}

{% if category %}

<form role="form" id="page_form" method="post"

action="/rango/category/{{category.slug}}/add_page/"> <h2 class="form-signin-heading"> Add a Page to

<a href="/rango/category/{{category.slug}}/"> {{ category.name }}</a></h2>

{% csrf_token %}

{% for hidden in form.hidden_fields %} {{ hidden }}

{% endfor %}

{% for field in form.visible_fields %} {{ field.errors }}

{{ field.help_text }}<br/> {{ field }}<br/>

{% endfor %} <br/>

<button class="btn btn-primary"

type="submit" name="submit"> Add Page</button> </form>

{% else %}

<p>This is category does not exist.</p> {% endif %}

{% endblock %}

Exercise

• Create a similar template for the Add Category page calledadd_category.html_.

The Registration Template

{% extends "base.html" %} {% block body_block %}

<form role="form" method="post" action="."> {% csrf_token %}

<h2 class="form-signin-heading">Sign Up Here</h2> <div class="form-group" >

<p class="required">

<label for="id_username">Username:</label>

<input class="form-control" id="id_username" maxlength="30"

name="username" type="text"

placeholder="Enter username"/></p> </div>

<div class="form-group"> <p class="required">

<label for="id_email">E-mail:</label> <input class="form-control" id="id_email"

name="email" type="email"

placeholder="Enter email" /></p> </div>

<div class="form-group"> <p class="required">

<label for="id_password1">Password:</label> <input class="form-control" id="id_password1"

name="password1" type="password"

placeholder="Enter password" /></p> </div>

<div class="form-group"> <p class="required">

<label for="id_password2">Password (again):</label> <input class="form-control" id="id_password2"

name="password2" type="password"

placeholder="Enter password again" /></p> </div>

<button type="submit" class="btn btn-default">Submit</button> </form>

{% endblock %}

Again we have manually transformed the form created by the{{ form.as_p }}template tag, and

Bootstrap, HTML and Django Kludge

This is not the best solution - we have kind of kludged it together. It would be much nicer and cleaner if we could instruct Django when building the HTML for the form to insert the appropriate classes.