Templates

Model View Controller

Thierry Sans

Remember index in the Web Directory

... create the corresponding HTML entry in the template

Templates

<html>
<head>
<title> ...
webdirectory/
def index(request):
<html>
...
<head ... img name url

Controller http:// Khaled http://

http:// Kemal http://

For each entry in the database ...
Database

This is actually a good design

• Good separation between

• The Data Access Model (DAO)

• The presentation generating HTTP responses

• The business logic handling HTTP requests

Model View Controller (MVC)

• Model View Controller in Software Engineering

➡ Software architecture based on design patterns

Model Data

View Presentation

Controller Business Logic

MVC in a web application

Server Side
Client Side

Controller Model
id=scACRSm...

<html><...

Web Browser View

Database
Server
Web Server

Advantages of MVC in web programming

• Separation of duties between different experts

Model Data The database programmer

View Presentation The web designer

Controller Business Logic The web programmer

MVC is a core concept of the web

• Other MVC web frameworks

• Java Servlet and JSP

• Ruby on Rails (design principle)

• But also ...

• The new UI, called Metro in Windows 8

Django - Model Template View (MVT)

Model Data Model

View Presentation Template

Controller Business Logic View

Django MVT

Server Side
Client Side

views.py models.py
id=scACRSm...

<html><...

Web Browser templates/*

Database
Server

Create the controller index

WebDirectory/views.py
from django.shortcuts import render_to_response
from WebDirectory.models import Entry

def index(request):
entry_list = Entry.objects.all()
return render_to_response('WebDirectory/index.html',
{'entry_list': entry_list})


Fetch all entries in the database

def index(request):


Fetch all entries in the database

def index(request):

Call the template index.html with the list of all entries as argument

Create the template WebDirectory/templates/WebDirectory/index.html
<div id="directory">
{% if entry_list %}
{% for entry in entry_list %}
<div class="entry">
<div class="image"><img src="{{entry.image}}"/>
</div>
<div class="name">{{entry.name}}</div>
<div class="website">
<a href="{{entry.webpage}}">{{entry.name}}'s website</a>
</div>
</div>
{% endfor %}
{% else %}
<p>No entry.</p>
{% endif %}
</div>

Philosophy

• Reuse as much code as possible

✓ Easier to maintain

✓ Easier to scale

The index.html template
<div id="directory"> WebDirectory/templates/WebDirectory/index.html
{% if entry_list %}
<div class="entry">
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>No entry.</p>
{% endif %}
</div>

The index.html template
<div id="directory"> WebDirectory/templates/WebDirectory/index.html
{% if entry_list %}
<div class="entry">
</div>
</div>
</div>
{% endfor %}
{% else %}
<p>No entry.</p> This snippet of code can be reused alone
{% endif %}
(when we will use Ajax actually)
</div>

Create the entry.html template

WebDirectory/templates/WebDirectory/entry.html

<div class="entry">
<div class="image"><img src="{{e.image}}"/>
</div>
<div class="name">{{e.name}}</div>
<a href="{{e.webpage}}">{{e.name}}'s website</a>
</div>
</div>

Using the include tag

WebDirectory/templates/WebDirectory/index.html
{% if entry_list %}
{% include "WebDirectory/entry.html" with e=entry %}
{% endfor %}
{% else %}
<p>No entry.</p>
{% endif %}
</div>


{% if entry_list %}
{% endfor %}
{% else %}
<p>No entry.</p> include the external template
{% endif %} entry.html
</div>


{% if entry_list %}
{% endfor %}
{% else %}
<p>No entry.</p> include the external template
{% endif %} entry.html
</div>

parameters (the context is passed by default)

Different pages - Same skeleton

• Some pages might share

• headers (title, JS and CSS)

• page organization (div tags structuring the page)

• footers (if any)

Example

• Let’s separate the index page from the uploader

✓ index.html and uploader.html shares the same structure

headers
page div

content div

Except ...
...
<div id="page">
<h1>The CS Directory</h1>
{% block content %}
<p>This is ... </p>
{% if entry_list %}
{% include "WebDirectory/entry.html" %}
{% endfor %}
{% else %}
<p>No entry.</p>
{% endif %}
</div>
{% endblock %}
</div> Only this part will be different
...

Using the extend tag
WebDirectory/templates/WebDirectory/uploader.html
{% extends "WebDirectory/index.html" %}

{% block content %}
<div id="publisher">
<form enctype="multipart/form-data" action="add/" method="post">
<input id="upload" type="file" name="file"/>
<input type="text" name="name"/>
<input type="text" name="webpage"/>
</form>
<a href="#" onclick="publish();return false;">Publish</a>
</div>
{% endblock %}


Extending the template index.html
{% block content %}
</form>
</div>
{% endblock %}


Extending the template index.html
{% block content %}
</form>
</div>
{% endblock %}
Redeﬁning the block content

The problem with URLs

• We use relative URLs

➡ If the URL dispatcher conﬁguration (urls.py) changes

๏ we must changes the corresponding URLs in our templates

✓ Instead, we should refer to the URL provided by the URL
dispatcher in our templates

Using the url tag


<html>
<head>
<title>The CS Directory</title>
<link href="{% url WebDirectory.views.index %}css/style.css"
rel="stylesheet" type="text/css" />
<script src="{% url WebDirectory.views.index %}js/script.js"
type="text/javascript"></script>

Returns the url /WebDirectory/
according to Webdirectory/urls.py ﬁle

Same here


{% block content %}
<form enctype="multipart/form-data"
action="{% url WebDirectory.views.add %}" method="post">
</form>
</div>
{% endblock %}

Templates

More Related Content

What's hot (20)

Similar to Templates (20)

More from soon (6)

Recently uploaded (20)

Templates

Editor's Notes