• Save
Templates
Upcoming SlideShare
Loading in...5
×
 

Templates

on

  • 358 views

 

Statistics

Views

Total Views
358
Views on SlideShare
358
Embed Views
0

Actions

Likes
0
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Templates Templates Presentation Transcript

  • 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 View slide
  • Model View Controller (MVC)• Model View Controller in Software Engineering ➡ Software architecture based on design patterns Model Data View Presentation Controller Business Logic View slide
  • MVC in a web application Server SideClient 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 SideClient Side views.py models.py id=scACRSm... <html><...Web Browser templates/* Database Server
  • Working with templates
  • 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})
  • Create the controller index WebDirectory/views.py from django.shortcuts import render_to_response from WebDirectory.models import Entry Fetch all entries in the database def index(request): entry_list = Entry.objects.all() return render_to_response(WebDirectory/index.html, {entry_list: entry_list})
  • Create the controller index WebDirectory/views.py from django.shortcuts import render_to_response from WebDirectory.models import Entry Fetch all entries in the database def index(request): entry_list = Entry.objects.all() return render_to_response(WebDirectory/index.html, {entry_list: entry_list}) 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<div id="directory"> WebDirectory/templates/WebDirectory/index.html {% 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>
  • The index.html template<div id="directory"> WebDirectory/templates/WebDirectory/index.html {% 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> 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> <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>
  • 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> include the external template{% endif %} entry.html</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> 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 ... WebDirectory/templates/WebDirectory/index.html...<div id="page"> <h1>The CS Directory</h1> {% block content %} <p>This is ... </p> <div id="directory"> {% if entry_list %} {% for entry in 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 %}
  • Using the extend tag WebDirectory/templates/WebDirectory/uploader.html{% extends "WebDirectory/index.html" %} Extending the template 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 %}
  • Using the extend tag WebDirectory/templates/WebDirectory/uploader.html{% extends "WebDirectory/index.html" %} Extending the template 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 %} Redefining the block content
  • Managing URLs
  • The problem with URLs• We use relative URLs➡ If the URL dispatcher configuration (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 WebDirectory/templates/WebDirectory/index.html<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 file
  • Same here WebDirectory/templates/WebDirectory/uploader.html{% extends "WebDirectory/index.html" %}{% block content %}<div id="publisher"> <form enctype="multipart/form-data" action="{% url WebDirectory.views.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 %}