Nelle View che abbiamo definito, abbiamo fatto riferimento a quattro Template:
index.htmlform.htmldetail.htmlformTelefono.html
Per prima cosa dobbiamo modificare la variabile TEMPLATE_DIRS in primoprogetto/settings.py e inserire il percorso completo della directory che conterrà i nostri Template, ad esempio:
TEMPLATE_DIRS = (
"C:/Documents and Settings/Utente/primoprogetto/rubrica/templates"
)
I Template che utilizzeremo estenderanno tutti un template base.html che descrive la struttura della pagina.
Creiamo quindi la cartella templates/ in rubrica/ e il Template base.html:
base.html
<html>
<head>
<title>{% block title %}{% endblock %}</title>
</head>
<body>
<h1>Rubrica telefonica</h1>
{% block content %}{% endblock %}
</body>
</html>
Nonostante la semplicità di questo template, notiamo che, oltre ad elementi fissi, sono definiti degli elementi (Tag) block con un identificativo (title, content). Tali elementi block saranno ridefiniti nei Template che estendono il Template di base.
Creiamo quindi il template index.html:
index.html
{% extends "base.html" %}
{% block title %} Lista contatti in rubrica {% endblock %}
{% block content %}
{% if lista_contatti %}
<table>
{% for cont in lista_contatti %}
<tr>
<td><a href="/rubrica/{{ cont.id }}/"> {{ cont.nome }}</a></td>
<td><a href="/rubrica/{{ cont.id }}/"> {{ cont.cognome }}</a></td>
</tr>
{% endfor %}
<tr><td><a href="/rubrica/form/">Aggiungi contatto/lt;/a></td></tr>
</table>
{% else %}
<p>Nessun contatto presente in rubrica. <a href="/rubrica/form/">Aggiungi un contatto</a></p>
{% endif %}
{% endblock %}
La prima direttiva indica che il template estende base.html. Notiamo l'utilizzo nel template della variabile lista_contatti, contenente un array di modelli di tipo Contatto, ottenuto interrogando il database.
Nel template accediamo agli attributi pubblici degli oggetti di tipo Contatto mediante la dot-notation. Ricordiamo che i parametri vengono passati al template mediante la funzione built-in render_to_response che accetta due parametri: il Template da utilizzare e un dizionario avente chiavi il nome delle variabili utilizzate nel template. In questo modo possiamo utilizzare nei template variabili di un tipo qualsiasi previsto in Python: oggetti, dizionari, array, tuple, tipi primitivi.
Creiamo ora il template form.html:
form.html
{% extends "base.html" %}
{% block title %} Inserimento/Modifica contatto {% endblock %}
{% block content %}
{% if error_message %}
<p><strong>{{ error_message }}</strong></p>
{% endif %}
<form action="/rubrica/nuovo/" method="post">
<table>
<tr><td>Nome:</td><td><input type="text" name="nome" value=""/></td></tr>
<tr><td>Cognome:</td><td><input type="text" name="cognome" value=""/></td></tr>
<tr><td><input type="submit" value="Salva"/></td></tr>
</table>
</form>
<p>Torna alla <a href="/rubrica/">lista dei contatti</a></p>
{% endblock %}
Creiamo il template detail.html:
detail.html
{% extends "base.html" %}
{% block title %}Dettaglio contatto {{ cont.nome }} {{ cont.cognome }} {% endblock %}
{% block content %}
{% if cont %}
<table>
<tr><td>Nome:</td><td>{{ cont.nome }}</td><td<Cognome:</td><td>{{ cont.cognome }}</td></tr>
{% for tel in lista_telefoni %}
<tr><td>Telefono:</td><td>{{ tel.numero }}</td><td>Tipologia:</td><td>{{ tel.tipologia.descrizione }}</td></tr>
{% endfor %}
</table>
{% else %}
<p>Nessun contatto presente in rubrica.</p>
{% endif %}
<p>Torna alla <a href="/rubrica/">lista dei contatti</a></p>
{% endblock %}
E l'ultimo template, formTelefono.html:
formTelefono.html
{% extends "base.html" %}
{% block title %} Inserimento numeri di telefono per {{ cont.nome }} {{ cont.cognome }} {% endblock %}
{% block content %}
{% if idContatto %}
{% if error_message %}<p><strong>{{ error_message }}</strong></p>{% endif %}
<form action="/rubrica/nuovoNumero/" method="post">
<table>
{% for telefono in lista_telefoni %}
<tr><td>Telefono:</td><td>{{ telefono.numero }}( {{ telefono.tipologia.descrizione }})</td></tr>
{% endfor %}
<tr><td>Telefono:</td>
<td><input type="text" name="numero" value="{{ tel.numero }}" />
<input type="hidden" name="idContatto" value="{{ idContatto }}" /></td>
<td>Tipologia:</td>
<td><select name="tipotelefono">
{% for tipologia in lista_tipologia %}
{% ifequal tel.tipologia_id tipologia.id %}
<option value="{{ tipologia.id}}" selected>{{ tipologia.descrizione }}</option>
{% else %}
<option value="{{ tipologia.id}}">{{ tipologia.descrizione }}</option>
{% endifequal %}
{% endfor %}
</select>
</td>
</tr>
<tr><td><input type="submit" value="Salva"/></td></tr>
</table>
</form>
{% else %}
<p>Si è verificato un errore</p>
{% endif %}
<p>Torna alla <a href="/rubrica/">lista dei contatti</a></p>
{% endblock %}
