Django

Display Product Details in Table Format using Template Loop

๐Ÿ“Œ Introduction

In Django templates, we can display structured data like:

  • Product lists
  • Student records
  • Reports

๐Ÿ‘‰ using:

  • {% for %} loop
  • HTML tables

๐ŸŽฏ Program Statement

๐Ÿ‘‰ Display product details in table format using template loop.


๐Ÿง  Problem Logic

We will:

  • Create product data (list of dictionaries)
  • Loop through it
  • Display in table

โš™๏ธ Step 1: Create View


๐Ÿ“ File: views.py

๐Ÿ”น Path:

myproject/myapp/views.py

๐Ÿ”น Code:

from django.shortcuts import render

def product_list(request):

products = [
{"name": "Laptop", "price": 50000, "qty": 2},
{"name": "Mobile", "price": 20000, "qty": 5},
{"name": "Tablet", "price": 15000, "qty": 3},
]

return render(request, 'product.html', {
'products': products
})

๐Ÿง  Explanation

  • Each product is a dictionary
  • All products stored in a list
  • Passed as context

โš™๏ธ Step 2: URL Mapping


๐Ÿ“ File: urls.py

๐Ÿ”น Path:

myproject/myproject/urls.py

๐Ÿ”น Code:

from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
path('admin/', admin.site.urls),
path('products/', views.product_list),
]

โš™๏ธ Step 3: Create Template


๐Ÿ“ File: product.html

๐Ÿ”น Path:

myproject/templates/product.html

๐Ÿ”น Code:

<!DOCTYPE html>
<html>
<head>
<title>Product Table</title>
</head>
<body>

<h1>Product Details</h1>

<table border="1" cellpadding="10">
<tr>
<th>S.No</th>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
</tr>

{% for p in products %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ p.name }}</td>
<td>{{ p.price }}</td>
<td>{{ p.qty }}</td>
</tr>
{% endfor %}

</table>

</body>
</html>

๐Ÿง  Special Feature ๐Ÿ”ฅ

forloop.counter

{{ forloop.counter }}

๐Ÿ‘‰ Automatically generates serial number


โš™๏ธ Step 4: Run Server

python manage.py runserver

๐ŸŒ Step 5: Output

๐Ÿ‘‰ http://127.0.0.1:8000/products/


โœ… Output:

S.No   Product   Price   Quantity
1 Laptop 50000 2
2 Mobile 20000 5
3 Tablet 15000 3

๐Ÿง  How It Works

  1. View sends list of products
  2. {% for %} loops through each product
  3. Table rows are generated dynamically
  4. Data displayed in structured format

๐Ÿ”ฅ Key Concepts


Loop:

{% for p in products %}

Access dictionary:

{{ p.name }}
{{ p.price }}

Serial number:

{{ forloop.counter }}

โš ๏ธ Common Errors


โŒ Wrong key name

๐Ÿ‘‰ Must match:

"name"
{{ p.name }}

โŒ Loop not closing

๐Ÿ‘‰ Always:

{% endfor %}

โŒ Empty table

๐Ÿ‘‰ Ensure data is passed:

{'products': products}

๐Ÿงช Practice Questions

  1. Add total column (price ร— qty)
  2. Add grand total
  3. Highlight expensive products
  4. Display table with Bootstrap

๐ŸŽค Viva Questions & Answers


1. What is {% for %} loop in Django?

It is used to iterate over a list or collection and display each element.


2. What is forloop.counter?

It gives the current iteration number starting from 1. It is used for serial numbers.


3. How do we access dictionary values in template?

Using dot notation like {{ p.name }}.


4. What is structured data display?

Displaying data in organized format like tables.


5. Can we use nested loops?

Yes, Django supports nested loops.


6. What happens if list is empty?

Table rows will not be generated.


7. Why use table format?

To display data in rows and columns for better readability.


8. Can we calculate values in template?

Basic operations are possible but complex logic should be in view.


9. What is dynamic table?

A table generated from data instead of static HTML.


10. Where is this used in real life?

Student results, attendance, product listings, admin dashboards.


๐Ÿ”— Navigation

๐Ÿ‘‰ Next Post: Attendance Report with Conditional Status
๐Ÿ‘‰ Back to List: Django Programs (60 Questions with Solutions)


Further Reading

Introduction to Django Framework and its Features

Django Practice Exercise

Examples of Array Functions in PHP

Basic Programs in PHP

Registration Form Using PDO in PHP

Inserting Information from Multiple CheckBox Selection in a Database Table in PHP

programmingempire

princites.com

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *