Intégration de Bootstrap 5

Pour visualiser le code relatif à ce chapitre : git diff v1.8.6..v1.9.0.

1. Installer Bootstrap 5 et les icônes

Pour commencer, nous allons installer deux modules qui automatisent une partie du travail : django-bootstrap5 et django-bootstrap-icons.

La première technique impose de démarrer une console, puis taper la commande :

$ make bash 
$ poetry add django-bootstrap5  django-bootstrap-icons

Normalement, le fichier pyproject.toml ainsi que le fichier poetry.lock sont tous deux mis à jour.

La seconde technique consiste à rajouter directement les deux lignes suivantes dans pyproject.toml :

django-bootstrap5 = "^25.2" 
django-bootstrap-icons = "^0.9.0"

Puis, il faut utiliser la commande suivante pour générer un fichier poetry.lock cohérent avec ce dernier :

$ make lock

Une fois ceci fait, quelle que soit la méthode, il faut reconstruire le conteneur :

$ make build

Il faut maintenant configurer ces deux modules simplement en allant modifier le fichier project/settings.py :

INSTALLED_APPS = [ 
    ... 
    'jazzmin', 
    'django_bootstrap5', 
    'django_bootstrap_icons', 
... 
]

Nous prendrons soin de les placer sous jazzmin afin que ce dernier conserve la précédence en cas de conflit.

2. Gabarit maître

Nous allons maintenant adapter nos vues pour utiliser la bibliothèque que nous venons d’installer, en commençant par le gabarit maître :

{# Load the tag library #} 
{% load django_bootstrap5 i18n %} 
<!DOCTYPE html> 
<html lang="fr"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>{{ page_title }}</title> 
        {# Load CSS and JavaScript #} 
        {% bootstrap_css %} 
        {% bootstrap_javascript %} 
    </head> 
    <body> ...

Listes dynamiques

Pour visualiser le code relatif à ce chapitre : git diff v1.9.0..v1.9.1.

1. Installer un outil

Il existe plusieurs outils pour intégrer datatables.net à Django. Le plus récent et celui qui semble le plus à jour est : django-datatable-view.

Pour l’installer, soit il faut démarrer une console, puis taper la commande :

$ make bash 
$ poetry add django-datatable-view

Cela mettra à jour à la fois le fichier pyproject.toml et le fichier poetry.lock.

Il est également possible d’ajouter directement la ligne suivante dans pyproject.toml :

django-datatable-view = "^2.1.6"

Puis, dans un second temps, il faut utiliser la commande suivante pour générer un fichier poetry.lock cohérent avec ce dernier :

$ make lock

Une fois ceci fait, recréer le conteneur :

$ make build

Puis rajouter ceci au fichier settings.py :

INSTALLED_APPS = [ 
    ... 
    'datatableview', 
    ... 
]

Et la configuration est terminée.

2. Création de la vue

La vue en question se paramètre exactement comme une vue classique, avec les mêmes attributs et les mêmes surcharges.

La voici :

from datatableview.views import DatatableView 
  
from .models import Genre 
  
  
class GenreDatatableView(DatatableView): 
    queryset = Genre.objects.all()

Cette vue reste...

Éditeur avancé

Pour visualiser le code relatif à ce chapitre : git diff v1.9.1..v1.9.2.

1. Installer le module externe

Pour commencer, nous allons installer ce module externe : martor.

Nous pouvons démarrer une console, puis saisir la commande :

$ make bash 
$ poetry add martor

Cette commande modifie en conséquence les fichiers pyproject.toml et poetry.lock.

Nous pouvons également ajouter directement la ligne suivante dans pyproject.toml :

martor = "^1.7.15"

Puis, générer un fichier poetry.lock cohérent avec ce dernier avec cette commande :

$ make lock

Dans les deux cas, il faut reconstruire le conteneur :

$ make build

Il faut maintenant configurer le fichier project/settings.py en ajoutant ceci :

INSTALLED_APPS = [ 
    ... 
    'martor', 
    ... 
]

Ainsi que le fichier project/urls.py :

urlpatterns = [ 
     ... 
    path('martor/', include('martor.urls')), 
]

2. Utiliser le champ dans un modèle

Dans le modèle jeu, nous allons rajouter un champ description :

from martor.models import MartorField 
  
  
class Game(TrackingMixin, models.Model): 
    … 
    description = MartorField( 
        verbose_name=gettext("description"), 
    ) 
    …

Il faut ensuite penser à générer la migration, l’appliquer et vérifier que tout va bien.

Cela peut se faire par la requête suivante :

$ make update

Au passage, cette requête va également collecter les fichiers statiques, ce qu’il fallait faire après l’installation du projet.

Nous pouvons maintenant sauvegarder les données afin d’ajouter le nouveau champ aux fichiers JSON :

$ make...

Template tags

Pour visualiser le code relatif à ce chapitre : git diff v1.9.2..v1.9.3.

1. Créer un tag simple

Dans la documentation de Django, il y a un certain nombre d’exemples permettant de créer un tag simple. Le nôtre utilisera la même syntaxe, mais aura aussi quelques difficultés supplémentaires.

Pour créer un template tag, il suffit de créer un package Python nommé templatetags, c’est-à-dire un répertoire contenant un fichier __init__.py, même vide.

Puis, il faut créer dans ce répertoire un nouveau module Python, c’est-à-dire un nouveau fichier nommé app_utils.py. Le nom est important, car il servira de référence lors du chargement dans le gabarit, afin de permettre l’utilisation de son contenu.

L’objectif est de supprimer le code HTML répétitif utilisé pour générer les icônes. Ce code est verbeux, favorise les copier-coller et augmente le risque d’erreurs ; il rend donc le projet plus difficile à maintenir.

Centraliser ce code à un seul endroit corrigera ces défauts.

Voici notre objectif, remplacer cela :

<a href="{% url 'game:list' %}" class="border">{% bs_icon 
'list-columns-reverse' %}</a> 
<a href="{% url 'game:create' %}" class="border">{% bs_icon 
'plus' %}</a> 
<a href="{% url 'game:detail' game.pk %}" 
class="border">{% bs_icon 'eye' %}</a> 
<a href="{% url 'game:update' game.pk %}" 
class="border">{% bs_icon 'pencil' %}</i></a> 
<a href="{% url 'game:delete' game.pk %}" 
class="border">{% bs_icon 'trash' %}</a>

Par cela :

{% icon_action 'list' %} 
{% icon_action 'create' %} 
{% icon_action 'detail'...

Notions avancées sur les vues