15-437 Templates

Model View Controller Thierry Sans

Remember index in the Web Directory Controller def index(request): ...
<html> <head ... Database img name url path Lisa http:// path Bart http:// For each entry in the database ... Templates <html> <head> <title> ... ... create the corresponding HTML entry in the template webdirectory/

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 Client Side Web Browser Server
Side Web Server id=scACRSm... <html><... Database  Server Controller Model View

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 • Cake PHP But also ... • The Windows UI, called Metro in Windows 8

Django - Model Template View (MVT) Model Data Model View
Presentation Template Controller Business Logic View

Django MVT Client Side Web Browser Server Side id=scACRSm... <html><...
Database  Server views.py models.py templates/*

Working with templates

Create the controller index WebDirectory/views.py from django.shortcuts import render from
WebDirectory.models import Entry def index(request): entry_list = Entry.objects.all() return render(request,\ 'WebDirectory/index.html',\ {'entry_list': entry_list}) Fetch all entries in the database 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>

Modularity

Philosophy Reuse as much code as possible ✓ Easier to
maintain ✓ Easier to scale

The index.html 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> This snippet of code can be reused alone (when we will use Ajax actually)

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> <div class="website"> <a href="{{e.webpage}}">{{e.name}}'s website</a> </div> </div>

Using the include tag WebDirectory/templates/WebDirectory/index.html <div id="directory"> {% if entry_list
%} {% for entry in entry_list %} {% include "WebDirectory/entry.html" with e=entry %} {% endfor %} {% else %} <p>No entry.</p> {% endif %} </div> include the external template entry.html 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 directory div

Except ... WebDirectory/templates/WebDirectory/index.html ... <div id="page"> <h1>The Simpson's Family</h1> ...
{% block content %} <div id="directory"> {% if entry_list %} {% for entry in entry_list %} {% include "WebDirectory/entry.html" with e=entry %} {% endfor %} {% else %} <p>No entry.</p> {% endif %} </div> <div id="publisher">Upload a new entry!</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"> <div> Add a new entry:</div> <form enctype="multipart/form-data" action="{% url 'add' %}" method="post"> <div><label for='image'>Image File</label><input id="upload" type="file" name="file"/></div> <div><label for='name'>Name</label><input type="text" name="name"/></div> <div><label for='website'>Website</label><input type="text" name="website"/></div> </form> <div id="publishButton">Publish</div> </div> {% endblock %} Redeﬁning the block content Extending the template index.html

To go further The Django template language https://docs.djangoproject.com/en/1.7/topics/templates/  Built-in template
tags and ﬁlters https://docs.djangoproject.com/en/1.7/ref/templates/builtins/

15-437 Templates

15-437 Templates

ThierrySans

More Decks by ThierrySans

Other Decks in Education

Featured

Transcript

Model View Controller Thierry Sans

Remember index in the Web Directory Controller def index(request): ...

This is actually a good design Good separation between •

Model View Controller (MVC) Model View Controller in Software Engineering

MVC in a web application Client Side Web Browser Server

Advantages of MVC in web programming Separation of duties between

MVC is a core concept of the web Other MVC

Django - Model Template View (MVT) Model Data Model View

Django MVT Client Side Web Browser Server Side id=scACRSm... <html><...

Working with templates

Create the controller index WebDirectory/views.py from django.shortcuts import render from

Create the template WebDirectory/templates/WebDirectory/index.html <div id="directory"> {% if entry_list %}

Modularity

Philosophy Reuse as much code as possible ✓ Easier to

The index.html template WebDirectory/templates/WebDirectory/index.html <div id="directory"> {% if entry_list %}

Create the entry.html template WebDirectory/templates/WebDirectory/entry.html <div class="entry"> <div class="image"><img src="{{e.image}}"/></div>

Using the include tag WebDirectory/templates/WebDirectory/index.html <div id="directory"> {% if entry_list

Different pages - Same skeleton Some pages might share •

Example Let’s separate the index page from the uploader ✓

Except ... WebDirectory/templates/WebDirectory/index.html ... <div id="page"> <h1>The Simpson's Family</h1> ...

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

To go further The Django template language https://docs.djangoproject.com/en/1.7/topics/templates/  Built-in template