Scribd
Upload
35 views20 pages

CRUD Application Using Python Django Framework Part3

The document discusses Django CRUD application development. It covers creating HTML files and templates, rendering templates and passing context, looping through objects to display data, and details views for individual records.

Uploaded by

Aly
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
35 views20 pages

CRUD Application Using Python Django Framework Part3

The document discusses Django CRUD application development. It covers creating HTML files and templates, rendering templates and passing context, looping through objects to display data, and details views for individual records.

Uploaded by

Aly
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Republic of the Philippines

Western Mindanao State University


COLLEGE OF COMPUTING STUDIES
Zamboanga City

Web Application Development using


Python Django Framework version 4.0
(CRUD Application Development)
Part 3

Django is a Python-based web framework that allows you to rapidly make web
applications without all of the establishment or reliance issues that you just regularly will
discover with other systems. Django is based on MVT Model View Template) architecture.

CRUD Functionality
• Create
o create or add new entries in a table in the database.
• Retrieve
o read, retrieve, search, or view existing entries as a list (List View) or retrieve a
particular entry in detail (Detail View)
• Update
o update or edit existing entries in a table in the database
• Delete
o delete, deactivate, or remove existing entries in a table in the database

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

Creating the HTML files


1. Go to myapp > templates > myapp, inside the myapp directory create the html files.
2. The file structure should look like this:

3. For the development, we will be using online bootstrap for CSS style.
4. Below is the source code that needs to be added to ALL html files.
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet" href=https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous">
<title>Product Information</title>
</head>

<!-- Optional JavaScript; choose one of the two! -->


<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns"
crossorigin="anonymous"></script>

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

5. HTML files must look like this:

In the next following steps, the additional html source code will be inserted in this
area / space provided.

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

Rendering Template, Passing Context and Displaying Data


The "view function" or "view" refers to a Python function that receives a Web request and
returns a Web response.

A context processor has a simple interface: It's a Python function that takes one
argument, an HttpRequest object, and returns a dictionary that gets added to the template
context.

myapp/views.py

myapp/urls.py (URL for products)

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

What does {{ this }} mean in Django?

These are special tokens that appear in django templates. You can read more about the
syntax at the django template language reference in the documentation. {{ foo }} - this is
a placeholder in the template, for the variable foo that is passed to the template from a
view.

Insert the source code inside the body tag.


myapp/templates/myapp/index.html

Run the application using this command: python manage.py runserver

What is the output?

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

Looping Through Objects


What does {% %} mean in Django?
{% extends variable %} uses the value of variable. If the variable evaluates to a string,
Django 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.

Insert the source code inside the body tag.


myapp/templates/myapp/index.html

Run the server and check the output.

Output:

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

CRUD Step 1: Displaying data in the Table (List view)


List View is a view (logic) that lists all or specific instances of a table from the database in
a specific order. It is used to show several sorts of data on a single page or to display
things like items on an eCommerce page.

1. Replace the previous source code to the source code below. Insert it in
the body tag.
myapp/templates/myapp/index.html

Output:

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

CRUD Step 2: Detail View and Creating Links for Product Detail
url template tag accepts the name of a path() function called in your urls.py and the values
for any arguments that the associated view will receive from that function, and returns a
URL that you can use to link to the resource.

1. Modify the details.html file


Insert the source code inside the body tag.

myapp/template/myapp/details.html

2. Details View (View product details function)

Detail View is a view (logic) that uses the database to present a specific instance of a table
along with all the essential information. It is used to show several sorts of data on a single
page or view, such as a product's details.

Add the source code below in the views.py

myapp/views.py

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

3. Set Path

Create a url path to map the view: Namespace

URL namespaces allow you to uniquely reverse named URL patterns even if different
applications use the same URL names.

Namespaced URLs are specified using the ':' operator. For example, the main index page
of the admin application is referenced using 'admin:index'. This indicates a namespace of
'admin', and a named URL of 'index'.

myapp/urls.py (namespace)

myapp/urls.py (URL for details view)

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

4. Modify the index.html file and add the source code inside the red box.
Add the source code below to link the home page (index) to view product details page

myapp/templates/myapp/index.html

Output:

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

CRUD Step 3: Creating A Form to Accept Products

1. Modify the addproduct.html file


Insert the source code inside the body tag.

myapp/template/myapp/addproduct.html

What is csrf_token in Django?


csrf_token. Django has a {% csrf_token %} tag that is implemented to avoid malicious
attacks. It generates a token on the server-side when rendering the page and makes sure
to cross-check this token for any requests coming back in. If the incoming requests do not
contain the token, they are not executed.

myapp/template/myapp/addproduct.html

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

2. Create view (Add product function)


A view (logic) to create a database table instance is referred to as a "create view." It is
comparable to receiving user input and putting it in a specified table.

Add the source code below in the views.py

myapp/views.py

3. Set Path
Create the URL path to map the view function(s). (urls.py)

myapp/urls.py

4. Modify the index.html file and add the source code below.
Add the source code below to link the home page (index) page to add product page

myapp/template/myapp/index.html

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

Output:

Add Product Form Output:

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

CRUD Step 4: Update Form for Modifying Product Details

1. Modify the updateproduct.html file


Insert the source code inside the body tag.

myapp/templates/myapp/updateproduct.html

2. Update View (Update product details function)

Update View refers to a view (logic) to update a particular instance of a table from the
database with some extra details. It is used to update entries in the database for example,
updating a product detail.

Add the source code below in the view.py


myapp/views.py

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

3. Set Path
Create the URL path to map the view function(s). (urls.py)

myapp/urls.py

4. Modify the index.html file and add the source code below.
Add the source code below to link the home page (index) to update page and also to
display the details of the product in the update page.

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

Output:

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

CRUD Step 5: Delete view and page

1. Modify the deleteproduct.html file


Insert the source code inside the body tag.
myapp/templates/myapp/deleteproduct.html

2. Delete View (Delete product details function)


Delete View refers to a view (logic) to delete a particular instance of a table from the
database. It is used to delete entries in the database for example, deleting a product.

Add the source code below in the view.py

myapp/views.py

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

3. Set Path
Create the URL path to map the view function(s). (urls.py)

myapp/urls.py

4. Modify the index.html file and add the source code below.
Add the source code below to link the home page (index) to delete page

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

Output:

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman
Republic of the Philippines
Western Mindanao State University
COLLEGE OF COMPUTING STUDIES
Zamboanga City

Web Application Development using


Python Django Framework version 4.0
CRUD Application Final Output

Version 2.0 Prepared By:


August 08, 2022 Jason A. Catadman

You might also like