Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Model View Controller      Thierry Sans
Remember index in the Web Directory                   ... create the corresponding HTML entry in the template             ...
This is actually a good design•   Good separation between    •   The Data Access Model (DAO)    •   The presentation gener...
Model View Controller (MVC)•   Model View Controller in Software Engineering    ➡   Software architecture based on design ...
MVC in a web application                                                      Server SideClient Side                      ...
Advantages of MVC in web programming•   Separation of duties between different experts    Model                    Data   ...
MVC is a core concept of the web•   Other MVC web frameworks    •   Java Servlet and JSP    •   Ruby on Rails (design prin...
Django - Model Template View (MVT)     Model           Data          Model      View       Presentation     Template    Co...
Django MVT                                                        Server SideClient Side                               vie...
Working with templates
Create the controller index                                               WebDirectory/views.py  from django.shortcuts imp...
Create the controller index                                               WebDirectory/views.py  from django.shortcuts imp...
Create the controller index                                                                     WebDirectory/views.py  fro...
Create the template                WebDirectory/templates/WebDirectory/index.html<div id="directory"> {% if entry_list %} ...
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 ...
The index.html template<div id="directory">                WebDirectory/templates/WebDirectory/index.html {% if entry_list...
Create the entry.html template                             WebDirectory/templates/WebDirectory/entry.html   <div class="en...
Using the include tag                                   WebDirectory/templates/WebDirectory/index.html<div id="directory">...
Using the include tag                                       WebDirectory/templates/WebDirectory/index.html<div id="directo...
Using the include tag                                       WebDirectory/templates/WebDirectory/index.html<div id="directo...
Different pages - Same skeleton•   Some pages might share    •   headers (title, JS and CSS)    •   page organization (div...
Example•   Let’s separate the index page from the uploader✓   index.html and uploader.html shares the same structure      ...
Except ...                                  WebDirectory/templates/WebDirectory/index.html...<div id="page">      <h1>The ...
Using the extend tag                             WebDirectory/templates/WebDirectory/uploader.html{% extends "WebDirectory...
Using the extend tag                             WebDirectory/templates/WebDirectory/uploader.html{% extends "WebDirectory...
Using the extend tag                             WebDirectory/templates/WebDirectory/uploader.html{% extends "WebDirectory...
Managing URLs
The problem with URLs•   We use relative URLs➡   If the URL dispatcher configuration (urls.py) changes๏   we must changes t...
Using the url tag                                WebDirectory/templates/WebDirectory/index.html<html><head>   <title>The C...
Same here                             WebDirectory/templates/WebDirectory/uploader.html{% extends "WebDirectory/index.html...
Upcoming SlideShare
Loading in …5
×

Templates

495 views

Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Templates

  1. 1. Model View Controller Thierry Sans
  2. 2. 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
  3. 3. 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
  4. 4. Model View Controller (MVC)• Model View Controller in Software Engineering ➡ Software architecture based on design patterns Model Data View Presentation Controller Business Logic
  5. 5. MVC in a web application Server SideClient Side Controller Model id=scACRSm... <html><...Web Browser View Database Server Web Server
  6. 6. 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
  7. 7. 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
  8. 8. Django - Model Template View (MVT) Model Data Model View Presentation Template Controller Business Logic View
  9. 9. Django MVT Server SideClient Side views.py models.py id=scACRSm... <html><...Web Browser templates/* Database Server
  10. 10. Working with templates
  11. 11. 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})
  12. 12. 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})
  13. 13. 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
  14. 14. 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>
  15. 15. Modularity
  16. 16. Philosophy• Reuse as much code as possible✓ Easier to maintain✓ Easier to scale
  17. 17. 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>
  18. 18. 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>
  19. 19. 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>
  20. 20. 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>
  21. 21. 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>
  22. 22. 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)
  23. 23. Different pages - Same skeleton• Some pages might share • headers (title, JS and CSS) • page organization (div tags structuring the page) • footers (if any)
  24. 24. Example• Let’s separate the index page from the uploader✓ index.html and uploader.html shares the same structure headers page div content div
  25. 25. 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...
  26. 26. 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 %}
  27. 27. 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 %}
  28. 28. 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
  29. 29. Managing URLs
  30. 30. 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
  31. 31. 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
  32. 32. 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 %}

×