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. 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. Model View Controller (MVC)
• Model View Controller in Software Engineering
➡ Software architecture based on design patterns
Model Data
View Presentation
Controller Business Logic
5. MVC in a web application
Server Side
Client Side
Controller Model
id=scACRSm...
<html><...
Web Browser View
Database
Server
Web Server
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. 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. Django - Model Template View (MVT)
Model Data Model
View Presentation Template
Controller Business Logic View
9. Django MVT
Server Side
Client Side
views.py models.py
id=scACRSm...
<html><...
Web Browser templates/*
Database
Server
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. 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. 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
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. 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. 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. Different pages - Same skeleton
• Some pages might share
• headers (title, JS and CSS)
• page organization (div tags structuring the page)
• footers (if any)
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. 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
...
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. 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
