Add Link to Details
Creating dynamic links between pages
🔗 What are Detail Links?
Detail links connect list pages to individual item pages using dynamic URLs. Django's URL system allows you to pass parameters like IDs to display specific content.
<!-- Link with dynamic ID -->
<a href="{% url 'details' id=1 %}">View Details</a>
Link Components
List View
Shows all items
def list(request):
items = Item.objects.all()URL Tag
Creates dynamic links
{% url 'details' id %}Detail View
Shows single item
def details(request, id):
item = Item.objects.get(id=id)URL Pattern
Captures parameters
path('<int:id>/', views.details)🔹 Step 1: Create Detail View
The detail view receives an ID parameter from the URL and fetches the corresponding object from the database. It then passes this object to the template for display.
# views.py
from django.shortcuts import render, get_object_or_404
from .models import Product
def product_list(request):
products = Product.objects.all()
return render(request, 'product_list.html', {'products': products})
def product_details(request, id):
product = get_object_or_404(Product, id=id)
context = {'product': product}
return render(request, 'product_details.html', context)get_object_or_404:
This function gets an object or returns a 404 error if not found. It's safer than using .get() directly.
🔹 Step 2: Configure URL Pattern
URL patterns with angle brackets capture values from the URL. The int: converter ensures the parameter is an integer, and the name is passed to the view function.
# urls.py
from django.urls import path
from . import views
urlpatterns = [
path('products/', views.product_list, name='product_list'),
path('products/<int:id>/', views.product_details, name='product_details'),
]URL Parameters:
- <int:id>: Captures integer from URL
- name='...': Used in templates to generate URLs
🔹 Step 3: Create List Template
The list template displays all items with links to their detail pages. The url template tag generates the correct URL by passing the item's ID as a parameter.
<!-- product_list.html -->
<!DOCTYPE html>
<html>
<head>
<title>Products</title>
</head>
<body>
<h1>Our Products</h1>
<ul>
{% for product in products %}
<li>
<a href="{% url 'product_details' id=product.id %}">
{{ product.name }}
</a>
- ${{ product.price }}
</li>
{% endfor %}
</ul>
</body>
</html>🔹 Step 4: Create Detail Template
The detail template displays information about a single item. It receives the product object from the view and can access all its attributes using dot notation.
<!-- product_details.html -->
<!DOCTYPE html>
<html>
<head>
<title>{{ product.name }}</title>
</head>
<body>
<h1>{{ product.name }}</h1>
<p>Price: ${{ product.price }}</p>
<p>{{ product.description }}</p>
<a href="{% url 'product_list' %}">Back to Products</a>
</body>
</html>Output:
🔹 Using Slug Instead of ID
Slugs create SEO-friendly URLs using readable text instead of numbers. They make URLs more descriptive and easier to remember for users and search engines.
# urls.py
path('products/<slug:slug>/', views.product_details, name='product_details')# views.py
def product_details(request, slug):
product = get_object_or_404(Product, slug=slug)
return render(request, 'product_details.html', {'product': product})<!-- Template -->
<a href="{% url 'product_details' slug=product.slug %}">
{{ product.name }}
</a>Example URLs:
- With ID: /products/1/
- With Slug: /products/laptop-pro-2024/