Menu

Log in

Sign up

From beginner to master of web design, coding, infrastructure operation, business development and marketing

  • COURSES
  • HTML & CSS Introduction
  • HTML & CSS Coding with AI
  • Linux Introduction
  • Docker Basics
  • Git & GitHub Introduction
  • JavaScript Coding with AI
  • Django Introduction
  • AWS Basics
  • Figma Introduction
  • SEO Tutorial for Beginners
  • SEO with AI
  • OTHERS
  • About
  • Terms of Service
  • Privacy Policy

© 2024 D-Libro. All Rights Reserved

Django IntroductionChapter 4. Create CRUD Web Application

Add Links – {% url %} tag

Add Links – {% url %} tag

Adding Page Links with Django's {% url %} Tag

You can use {% url %} tag to add links to each page. The tag handles reverse URL resolution – it specifies URLs by using the URL name defined in urls.py.

This approach enables you to separate the actual URLs used in browsers from the URL data internally handled in the Django system. When communicating with browsers, urls.py converts the internally used URL names into actual URLs.

Basic URL

Creating links to the list page or the create page is simple as they don't have additional variables for specifying an exact page. You can simply use the URL name from the urls.py file, as shown in the main figure.

URLs with variables

On the other hand, the detail page, update page, and delete page require more specific information as those pages are linked to each record object. For example, each detail page is defined by the id, which is also set as the primary key in the database. To create a link to each detail page, you need to pass pk information as shown in the main figure.

Practice

Objective:
Learn how to add links in Django templates

We'll add links with the {% url %} tags in this practice.

1. Prepare HTML code for links to each page

For efficient operation, prepare a list of links to each page using a text file (any memo app) so that you can copy and paste each code into related document sections.

Use the URL names from the urls.py file under the employee_learning directory.

Text File
link to list page
<a href="{% url 'course_list'%}">List</a>

link to detail page
<a href="{% url 'course_detail' course.pk%}">Go Detail</a>

link to create page
<a href="{% url 'course_create'%}">Create</a>

link to update page
<a href="{% url 'course_update' object.pk%}">Update</a>

link to delete page
<a href="{% url 'course_delete' object.pk%}">Delete</a>

2. Design the link structure

Before pasting the code for links, you need to decide where you want to put them. As the list page and create page are not record-object-specific, you can add the link on any page; however, to make a link to a specific detail, update or delete page, you need to manage how to set a link to them.

Here is the design of the link structure that we apply in this practice.

  • Links to the list page and create page: put them on all pages, assuming these links will be placed in the navigation bar later.
  • A link to the detail page: put the link for each data record on the list page so that users can go to the detail page from the list page.
  • Links to the update and delete page: put them on the detail page so that users can update or delete the data record specific to the detail page.

3. Copy and paste the link code

Based on the link structure design, copy and paste the code.

Links to the list page and create a page in all templates

Paste the code in yellow below in the create page template. Do the same for other templates.

templates/employee_learning/course_create.html
<a href="{% url 'course_list'%}">List</a>
<a href="{% url 'course_create'%}">Create</a>

<h1> CREATE Page </h1>

<form method="post"> {% csrf_token %}
:

Link to the detail page in the list page template

Paste the code in yellow below in the list page template. Make sure that you put the code between the for statement. If you paste the code outside of the for statement, the value for pk won't be correctly defined.

templates/employee_learning/course_list.html
<h1>LIST Page</h1>

{% for course in object_list %}

<p> {{ course.title|upper }}</p>
<p> {{ course.get_level_display }}</p>

<a href="{% url 'course_detail' course.pk%}">Go Detail</a>
<hr>
{% endfor %}

Links to the update and delete page in the detail page template

Paste the code in yellow below in the detail page template.

templates/employee_learning/course_detail.html
 :
<h1> DETAIL Page </h1>
:
{% endfor %}</ul>

<a href="{% url 'course_update' object.pk%}">Update</a>
<a href="{% url 'course_delete' object.pk%}">Delete</a>or %}

4. Check the results in a browser

Access to localhost:8000/employee-learning/course-list/. You can see that all the links are in place.

Django List Page Template: Output example with URL links

You can also learn this topic offline. Click AmazonKindle.

More Topics to Explore

Adjusting Social Login for Django Production

Social Login for Production

Setting Up Social Login with Google via Django Allauth

Django Allauth (6) – Social Login with Google

Basics of Django App Deployment

Overview of Django App Deployment (1)

Adjusting Social Login for Django Production

Social Login for Production

Setting Up Social Login with Google via Django Allauth

Django Allauth (6) – Social Login with Google

Basics of Django App Deployment

Overview of Django App Deployment (1)

Tags:

Django Templates

Reverse URL Resolution

Django Template Language

URL name

{% url %}

Django Introduction
Course Content

Chapter 1. Django Key Concepts

Web Framework and Django

Websites vs. Django Web Apps

How Django Handles HTTP Request and HTTP Response

Django's MVT Framework

Django Templates vs. Django APIs

Chapter 2. Django Quick Start Guide

Install Python

Install Visual Studio Code

Create Project Directory

Set Up Virtual Environment

Install Django

Start Django Project

Run Server

Database Migration

URL dispatcher – urls.py

Create Superuser and Log In to Django Admin

Start App

Create HTML Templates

Create Views

Add URL Patterns

Project vs. App

Chapter 3. Django Models and Databases

Create a Database in Django

Relational Database

Create Django Models

Makemigrations and Migrate

Add Models in Django Admin – admin.py

Change Display Name of Record Objects

Django Models – Data Field Type

Django Models – Field Options

Django Models – Help Text Option

Django Models – Choices Option

Django Models – DateField with datetime Module

Django Models – Relationship Fields

Django Models – ID

Django Models – ForeignKey (OneToMany Relationship)

Django Models – OneToOneField

Django Models – ManyToManyField

Chapter 4. Create CRUD Web Application

CRUD Web Application

Basic CRUD Structure in Django

Django Generic Views

How To Write Class-Based Views with Generic Views

Generic View Basic Attributes

URL Dispatcher for CRUD Views

Django Templates for CRUD Views

Django Template Language (DTL)

Template for List Page

get_FOO_display method

Template for Detail Page

Template with Model Relations

Template for Create and Update Page

Template for Delete Page

Add Links – {% url %} tag

Extend Templates – {% extends %} tag

Check Developing App UI on Mobile Device

Django Templates with Bootstrap

Crispy Forms

Customize Views (1) – Change List Order

Customizing Views (2) – Filter Lists

Context

Customize Views (3) – Add Extra Context

Modularize Templates – {% include %} tag

Static Files in Development Environment – {% static %} tag

STATIC_URL and STATICFILES_DIRS

Create Index HTML

Chapter 5. User Management

User Authentication

Overview of User Management Functions

User Management Function Development with Django

Approaches to Building User Management Functions in Django

Django Allauth (1) – Introduction

Django Allauth (2) – Installation and Initial Settings

Django Allauth (3) – Email Verification via Console

Django Allauth (4) – Email Verification via Gmail

Django Allauth (5) – Social Login with GitHub

Django Allauth (6) – Social Login with Google

Django Allauth (7) – Allauth Template File Setup

Django Allauth (8) – Add Basic Styling with Bootstrap and Crispy Forms

Django Allauth (9) – Customize Sign-in and Sign-up Pages

User Models

Login Required – LoginRequiredMixin

User Login Status Icon on Navigation Bar

Chapter 6. Deploy Django App

Overview of Django App Deployment (1)

Overview of Django App Deployment (2)

Key Steps of Django App Deployment

Hosting Service Initial Settings (1) – AWS Lightsail setup

Hosting Service Initial Settings (2) – SSH Remote Connection

Manage Local Computer and Remote Server Simultaneously

Tips for Managing Local Development and Remote Production Environment

Hosting Service Initial Settings (3) – Clone Project Directory with GitHub

Production Database Setup

Django Production Settings (1) – Settings.py for Development and Production

Django Production Settings (2) – Production Settings

Django Production Settings (3) – django-environ and .env file

Static File Settings

Django and Dependency Installation on Production Server

Web Server and Application Server in Django

Application Server Setup – Gunicorn

Web Server Setup – Nginx

Domain Setup

SSL Setup – Certbot

Email Setting – SendGrid

Social Login for Production

Manage Local Development and Remote Production Environment

Chapter 1. Django Key Concepts

Web Framework and Django

Websites vs. Django Web Apps

How Django Handles HTTP Request and HTTP Response

Django's MVT Framework

Django Templates vs. Django APIs

Chapter 2. Django Quick Start Guide

Install Python

Install Visual Studio Code

Create Project Directory

Set Up Virtual Environment

Install Django

Start Django Project

Run Server

Database Migration

URL dispatcher – urls.py

Create Superuser and Log In to Django Admin

Start App

Create HTML Templates

Create Views

Add URL Patterns

Project vs. App

Chapter 3. Django Models and Databases

Create a Database in Django

Relational Database

Create Django Models

Makemigrations and Migrate

Add Models in Django Admin – admin.py

Change Display Name of Record Objects

Django Models – Data Field Type

Django Models – Field Options

Django Models – Help Text Option

Django Models – Choices Option

Django Models – DateField with datetime Module

Django Models – Relationship Fields

Django Models – ID

Django Models – ForeignKey (OneToMany Relationship)

Django Models – OneToOneField

Django Models – ManyToManyField

Chapter 4. Create CRUD Web Application

CRUD Web Application

Basic CRUD Structure in Django

Django Generic Views

How To Write Class-Based Views with Generic Views

Generic View Basic Attributes

URL Dispatcher for CRUD Views

Django Templates for CRUD Views

Django Template Language (DTL)

Template for List Page

get_FOO_display method

Template for Detail Page

Template with Model Relations

Template for Create and Update Page

Template for Delete Page

Add Links – {% url %} tag

Extend Templates – {% extends %} tag

Check Developing App UI on Mobile Device

Django Templates with Bootstrap

Crispy Forms

Customize Views (1) – Change List Order

Customizing Views (2) – Filter Lists

Context

Customize Views (3) – Add Extra Context

Modularize Templates – {% include %} tag

Static Files in Development Environment – {% static %} tag

STATIC_URL and STATICFILES_DIRS

Create Index HTML

Chapter 5. User Management

User Authentication

Overview of User Management Functions

User Management Function Development with Django

Approaches to Building User Management Functions in Django

Django Allauth (1) – Introduction

Django Allauth (2) – Installation and Initial Settings

Django Allauth (3) – Email Verification via Console

Django Allauth (4) – Email Verification via Gmail

Django Allauth (5) – Social Login with GitHub

Django Allauth (6) – Social Login with Google

Django Allauth (7) – Allauth Template File Setup

Django Allauth (8) – Add Basic Styling with Bootstrap and Crispy Forms

Django Allauth (9) – Customize Sign-in and Sign-up Pages

User Models

Login Required – LoginRequiredMixin

User Login Status Icon on Navigation Bar

Chapter 6. Deploy Django App

Overview of Django App Deployment (1)

Overview of Django App Deployment (2)

Key Steps of Django App Deployment

Hosting Service Initial Settings (1) – AWS Lightsail setup

Hosting Service Initial Settings (2) – SSH Remote Connection

Manage Local Computer and Remote Server Simultaneously

Tips for Managing Local Development and Remote Production Environment

Hosting Service Initial Settings (3) – Clone Project Directory with GitHub

Production Database Setup

Django Production Settings (1) – Settings.py for Development and Production

Django Production Settings (2) – Production Settings

Django Production Settings (3) – django-environ and .env file

Static File Settings

Django and Dependency Installation on Production Server

Web Server and Application Server in Django

Application Server Setup – Gunicorn

Web Server Setup – Nginx

Domain Setup

SSL Setup – Certbot

Email Setting – SendGrid

Social Login for Production

Manage Local Development and Remote Production Environment