Lecture 07

ITC3304
WEB APPLICATION DEVELOPMENT
H. U. Yakubu - CS Department, BUK. (Lecture 7) 1

Content
 Templates Inheritance and Reusability
 Template Tags and Variables
 CRUD Operations

Templates Inheritance

Template Inheritance
 Django is a popular framework which allows you to achieve
more with less code by providing ready-made apps.
 One of its most powerful features helps you easily use one
template across all your pages in a web app.

Template Inheritance Contd.
 Let’s say that we have a website which comprises of multiple pages
— the ‘home’, ‘departments’, students’, and many other pages.
 The common components between the pages are the header and
the footer. One way of going about this is having separate html
files, one for each page. However, it would be a bad practice to
copy and paste header and footer code to all the pages.
 Furthermore, if we have to make changes to the footer, we will
have to change it in all the files, which is not in accordance with
the DRY (Don’t Repeat Yourself) principle of Django.

Template Inheritance Contd.
 Django allows us to avoid that by creating a ‘base’ template
which contains the common components and inheriting that
template in all our other templates.
 Template inheritance allows you to build a base (skeleton)
template that contains all the common elements of your site
and defines blocks that child templates can override.

Home Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<meta content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="">
<script src=""></script>
</head>
<body>
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
</body>
</html>

Courses Page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Courses</title>
</head>
<body>
<div class="">
<h1>Our Courses</h1>
<p>1. ITC3340</p>
<p>2. CSC3330</p>
</div>
</body>
</html>

Students page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Students</title>
</head>
<body>
<div class="">
<h1>Our Students</h1>
<p>Software Engineering  150 students</p>
<p>Computer Science  200 students</p>
</div>
</body>
</html>

Base HTML File
 The content of the base.html file
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Info</title>
</head>
<body>
{% block content %}
{% endblock content %}
</body>
</html>
Home Page (Updated)
 Edit the content of the home page to this:
{% extends ‘base.html’ %}
{% block content %}
<img src="img_la.jpg" alt="LA" style="width:100%">
<div class="">
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Courses Page (Updated)
Edit the content of the courses page to this:
{% block content %}
<div class="">
<h1>Our Courses</h1>
<p>1. ITC3340</p>
<p>2. CSC3330</p>
</div>

New Students Page (Updated)
Edit the content of the home page to this:
{% block content %}
<div class="">
<h1>Our Students</h1>
<p>Software Engineering  150 students</p>
<p>Computer Science  200 students</p>
</div>

Templates Tags

Tags
 Tags provide arbitrary logic in the rendering process.
 For example, a tag can output content, serve as a control
structure e.g. an “if” statement or a “for” loop, grab content
from a database, or even enable access to other template tags.
 Tags are surrounded by {% and %}
Example
{% csrf_token %}
This tag is used for CSRF (Cross Site Request Forgeries)
protection.

Extends
 This tag signals that this template extends a parent template.
This tag can be used in two ways:
o{% extends "base.html" %} (with quotes) uses the
literal value "base.html" as the name of the parent template
to extend.
o{% extends variable %} uses the value of variable. If the
variable evaluates to a string,
oDjango will use that string as the name of the parent
template. If the variable evaluates to a Template object,
Django will use that object as the parent template.

Tags Examples Contd.
 Defines a block that can be overridden by child templates
{% block %} {% endblock %}

Comments
 Comments in Django look like this:
o Single line comment
{# this won't be rendered #}
o Multi-line comment:
{% comment %}
This line, and
this line won’t be rendered.
They are all commented.
{% endcomment %}
If
 Some Tags require beginning and ending tags:
{% if male %}Dear Mr. {{ user.last_name }},
{% else %}
Dear Mrs.
{% endif %}

for
 Loops over each item in an array, making the item available in a
context variable. For example, to display a list of students
provided in all_students:
<ol>
{% for student in all_students %}
<li>
{{ student.last_name|upper }}, {{
student.first_name }}
</li>
{% endfor %}
</ol>
url
 The url tag is used as a value to the href attribute of an
anchor element for redirect.
{% url ‘name_of_a_path’ %}
Example
<a href = “{% url ‘name_of_a_path’
%}”>Students</a>

Filters
 Filters transform the values of variables and tag arguments.
They look like this:
 {{ student.last_name|upper }}
 {{ student.first_name|title }}
 {{ date_created|date }}

CRUD

CRUD Operations
 CRUD is an acronym that stands for CREATE, READ/RETRIEVE,
UPDATE, DELETE
 We have been carrying out these operations from the admin
site.
 Now, we shall use the client side for the same operations as
not all users should be allowed to access the admin site.

READ/RETRIEVE
 We shall begin with the READ/RETRIEVE operation being the
one of the simplest.
 add the all_courses view as:
From .models import Course
Def all_courses(request):
allcourses = Course.object.all()
context = {‘allcourses’: allcourses}
return render(request, ‘all-courses.html’, context)

READ/RETRIEVE Contd.
 Edit the all-courses.html file as:
{% for course in allcourses %}
{{ course.category }} <br>
{{ course.code }} <br>
{{ course.title }} <br>
{{ course.credit_unit }} <br>
{{ course.description }} <br><hr>
{% endfor %}
DELETE
 Create a new view called course_delete as in the views.py
file follows :
def course_delete(request, id):
course = Course.objects.get(id=id)
course.delete()
 Create the path for the above view in the urls.py file as
follows:
o Import the view
from .views import all_courses, course_delete

DELETE
 urlpatterns = [
…
path(‘<int:id>/delete/’, course_delete name=“course-delete”)
]

Lecture 07

Uploaded by

Copyright:

Available Formats

You might also like

Lecture 07

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 07

Uploaded by

Copyright:

Available Formats

ITC3304

WEB APPLICATION DEVELOPMENT

H. U. Yakubu - CS Department, BUK. (Lecture 7) 1

H. U. Yakubu - CS Department, BUK. (Lecture 7) 2

H. U. Yakubu - CS Department, BUK. (Lecture 7) 3

H. U. Yakubu - CS Department, BUK. (Lecture 7) 4

H. U. Yakubu - CS Department, BUK. (Lecture 7) 5

H. U. Yakubu - CS Department, BUK. (Lecture 7) 6

H. U. Yakubu - CS Department, BUK. (Lecture 7) 7

H. U. Yakubu - CS Department, BUK. (Lecture 7) 8

H. U. Yakubu - CS Department, BUK. (Lecture 7) 9

H. U. Yakubu - CS Department, BUK. (Lecture 7) 12

H. U. Yakubu - CS Department, BUK. (Lecture 7) 13

H. U. Yakubu - CS Department, BUK. (Lecture 7) 14

H. U. Yakubu - CS Department, BUK. (Lecture 7) 15

H. U. Yakubu - CS Department, BUK. (Lecture 7) 16

H. U. Yakubu - CS Department, BUK. (Lecture 7) 17

H. U. Yakubu - CS Department, BUK. (Lecture 7) 19

H. U. Yakubu - CS Department, BUK. (Lecture 7) 21

H. U. Yakubu - CS Department, BUK. (Lecture 7) 22

H. U. Yakubu - CS Department, BUK. (Lecture 7) 23

H. U. Yakubu - CS Department, BUK. (Lecture 7) 24

H. U. Yakubu - CS Department, BUK. (Lecture 7) 25

H. U. Yakubu - CS Department, BUK. (Lecture 7) 27

H. U. Yakubu - CS Department, BUK. (Lecture 7) 28

You might also like