Templates

348
-1

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
348
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \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

    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 %}

    ×