Utiliser l'URL dynamique à l'intérieur du modèle dans Django

Nous allons apprendre, avec cette explication, comment utiliser la balise url dans les templates et ajouter des liens à l’intérieur des templates dans Django.

Utiliser l’URL dynamique à l’intérieur du modèle à l’aide de la balise url dans Django

Commençons par inclure un lien dans notre fichier HTML. Nous devons créer deux fichiers HTML dans le dossier des modèles, que nous avons créés dans notre application Django appelée démo.

Nous allons créer le fichier index.html, et à l’intérieur de ce fichier, nous ajouterons un modèle de démarrage Bootstrap, une source gratuite pour les utilisateurs.

Si vous souhaitez créer un lien vers d’autres pages de votre application, la manière la plus simple de le faire serait quelque chose comme ceci :

<a href='/profile'>User profile</a>

Maintenant, nous allons créer une nouvelle URL pour la page de profil, puis nous allons créer une vue appelée profil.

from django.urls import path
from . import views

urlpatterns = [
    path("", views.INDEX),
    path("profile", views.PROFILE),
]

Maintenant, nous allons créer deux vues, INDEX et PROFILE, à l’intérieur du fichier views.py. Ensuite, nous retournerons deux templates : le premier est index.html, et un autre est profile.html.

from django.shortcuts import render


def INDEX(request):
    return render(request, "index.html")


def PROFILE(request):
    return render(request, "profile.html")

Maintenant, nous allons créer un fichier profile.html dans le dossier des modèles en utilisant le même modèle de démarrage Bootstrap.

Après avoir enregistré ceci et lancé le serveur, nous irons dans /profile. Nous verrons que si nous allons sur le lien que nous avons créé, il nous renvoie à la même page car nous nous y référons directement en utilisant ce code <a href='/profile'>User profile</a> dans le fichier index.html.

Mais si nous changeons l’URL de profile en myprofile dans urlpatterns situé dans l’application demo dans le fichier urls.py :

path("myprofile", views.PROFILE),

Après l’avoir enregistré, lorsque nous allons dans le navigateur et que nous cliquons sur le lien, nous obtenons une Page not found.

La première chose à faire est de corriger l’erreur. Nous pouvons le gérer en utilisant un argument name que nous mettrons à l’intérieur de la fonction path(), qui sera définie sur profile.

Ensuite, à l’intérieur de l’index, au lieu de faire directement référence au profil, nous utiliserons la balise url à l’intérieur des accolades. Et dans ce cas, le nom de l’URL serait profil.

path("myprofile", views.PROFILE, name="profile"),

Lorsque nous revenons à notre navigateur et que nous cliquons sur le lien, il met automatiquement à jour le point de terminaison pour nous.

Nous pouvons tirer un autre avantage de l’utilisation de variables à l’intérieur des points de terminaison pour le transmettre avec une barre oblique. Nous utiliserons str car nous voulons envoyer un type de données de chaîne et ajouter notre nom de variable.

path("myprofile/<str:username>", views.PROFILE, name="profile")

Maintenant, nous allons aller dans views.py, et à l’intérieur de la fonction PROFILE(), nous allons ajouter un paramètre username. Ensuite, nous allons créer un CONTEXT, passer le username comme valeur, et passer cette variable CONTEXT à la fonction render().

Nous accéderons au username en l’écrivant entre les doubles accolades à l’intérieur du fichier index.html.

def PROFILE(request, username):
    CONTEXT = {"username": username}
    return render(request, "profile.html", CONTEXT)

Si nous allons dans notre navigateur et transmettons le nom d’utilisateur au point de terminaison et appuyez sur Enter, nous verrons la page de profil avec le nom d’utilisateur que nous avons transmis au point de terminaison.

Si nous voulons passer le nom d’utilisateur par le lien, nous devrons aller dans views et faire la même chose dans la fonction INDEX() que dans la fonction PROFILE(). Nous allons passer le CONTEXT au fichier index.html.

def INDEX(request):
    CONTEXT = {"name": "John"}
    return render(request, "index.html", CONTEXT)

Maintenant, nous allons passer le name à la balise url, elle prendra donc automatiquement le nom.

<a href="{% url 'profile' name %}"">User profile</a>

Il cherchera un endroit où il pourra l’insérer à l’intérieur du urls.py, qui est ici <str:username>, et il le mettra à jour automatiquement.

Si nous continuons et cliquons sur le lien, nous pouvons voir qu’il a pris le nom que nous lui avons donné et l’a envoyé au profil car il sait que le profil peut gérer un argument supplémentaire.

Si nous avions plusieurs arguments, nous y mettrions simplement un espace, et nous pourrions ajouter plus de choses à passer à la balise url.

Code source complet du fichier views.py :

from django.shortcuts import render


def INDEX(request):
    CONTEXT = {"name": "John"}
    return render(request, "index.html", CONTEXT)


def PROFILE(request, username):
    CONTEXT = {"username": username}
    return render(request, "profile.html", CONTEXT)

Code source complet du fichier index.html :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hi user, this is home page</h1>
    <a href="{% url 'profile' name %}"">User profile</a>


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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

Code source complet du fichier profile.html :

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Profile Section</h1>
    <p>This is a profile section of {{username}}</p>


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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>