# Simplifier le développement web dynamique avec Django et HTMX (Partie 3) : Intégration avec Django Avec sa philosophie des « batteries incluses », **[[Django]]** constitue un backend robuste, tandis que **[[HTMX]]** excelle à exploiter intelligemment les fragments HTML fraîchement préparés par ce backend. C'est une combinaison vraiment parfaite. Dans cet article, troisième partie de notre série **Simplifier le développement web dynamique avec Django et HTMX**, nous explorerons deux méthodes concrètes pour intégrer HTMX dans un projet Django existant. ![Image de l'intégration de Django et HTMX](/media/whitedec/blog_img/cd6a017531894572b0123aa2e403ef4b.webp) ----- ## 1. Utilisation directe sans package tiers {#sec-ca790606f6d7} C'est la méthode la plus pure et la plus légère. Sans processus d'installation complexe, il suffit d'ajouter une ligne de script dans votre template HTML pour utiliser immédiatement les fonctionnalités de HTMX. ### Méthode d'installation {#sec-1b32901b18e3} La documentation officielle de HTMX propose plusieurs méthodes d'installation, mais la plus rapide reste l'utilisation d'un **CDN**. * **Utilisation du CDN (le plus rapide) :** Il suffit d'insérer le code suivant à l'intérieur de la balise `` de votre `base.html`. ```html ``` * **Téléchargement direct :** Si la sécurité ou un environnement hors ligne est crucial, vous pouvez télécharger [htmx.min.js](https://www.google.com/search?q=https://unpkg.com/htmx.org/dist/htmx.min.js), le placer dans le dossier `static` de votre projet et spécifier son chemin. * **npm :** Si vous utilisez un système de build, vous pouvez l'installer avec la commande `npm install htmx.org`. [Accéder à la documentation officielle d'installation de HTMX](https://htmx.org/docs/#installing) ----- ## 2. Utilisation du package django-htmx {#sec-e127afe305db} Dans l'écosystème Django, il existe une bibliothèque dédiée pour utiliser **[[HTMX]]** de manière plus « à la Django ». Il s'agit de **django-htmx**. ### Installation et configuration {#sec-1fad40addfc9} Suivez les étapes ci-dessous, conformément à la [documentation officielle de django-htmx](https://django-htmx.readthedocs.io/en/latest/installation.html). 1. **Installation du package** ```bash python -m pip install django-htmx ``` 2. **Enregistrement dans INSTALLED_APPS** ```python INSTALLED_APPS = [ ..., "django_htmx", ..., ] ``` 3. **Ajout du middleware** ```python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ] ``` ----- ### Quelle est la commodité de django-htmx ? {#sec-9b3f39c88466} **[[HTMX]]** est un outil si simple qu'on peut se demander s'il est vraiment nécessaire d'ajouter un package supplémentaire comme **django-htmx**. En effet, il est tout à fait possible d'implémenter les fonctionnalités essentielles sans ce package. Cependant, en examinant les fonctionnalités pratiques qu'il offre, on comprend pourquoi de nombreux développeurs choisissent de l'adopter. Selon la documentation officielle de **django-htmx**, la principale caractéristique de ce package est qu'il **étend l'objet `request` via un middleware**. Une fois le middleware enregistré, un attribut `request.htmx` est créé, permettant d'accéder très facilement aux informations détaillées suivantes : * **Vérification des informations de requête :** `boosted`, `current_url`, `current_url_abs_path`, `history_restore_request`, `prompt` * **Contrôle de la cible et du déclencheur :** `target`, `trigger`, `trigger_name`, `triggering_event` De plus, il prend en charge **deux balises dédiées** pour faciliter le travail avec les templates. * `{% htmx_script %}` : La balise principale qui insère le script de la bibliothèque HTMX. * `{% django_htmx_script %}` : Une balise auxiliaire qui insère uniquement le script d'extension pour le débogage, lorsque HTMX est inclus directement via CDN ou des fichiers statiques. Ce qui est particulièrement impressionnant, ce sont les **11 méthodes utiles** incluses dans le module `django_htmx.http`. Parmi elles, `trigger_client_event()` se distingue. Elle permet de configurer facilement l'en-tête `HX-Trigger` côté serveur et de l'envoyer avec la réponse, offrant ainsi la possibilité de **contrôler directement les événements côté client depuis le serveur**. Une fois maîtrisée, c'est un outil puissant que vous utiliserez très fréquemment. Bien sûr, toutes ces fonctionnalités peuvent être implémentées manuellement en créant votre propre middleware ou en manipulant les en-têtes. Par conséquent, si vous avez une préférence pour le développement manuel, ce package ne vous semblera pas indispensable. En conclusion, **django-htmx** n'est pas un « must-have », mais il est incontestablement un package qui **« rend le développement plus agréable »**. La documentation officielle n'étant pas très volumineuse, une ou deux heures suffisent pour en comprendre les bases. N'hésitez pas à décider de son adoption en fonction des spécificités de votre projet. ----- ## Pour conclure {#sec-2c0be77e7e31} Si vous envisagez d'implémenter de simples boutons à bascule ou quelques fonctionnalités de « j'aime », l'**utilisation directe (CDN)** est amplement suffisante. Ne pas augmenter les dépendances inutiles peut s'avérer la solution la plus économique. Cependant, si la taille de votre projet augmente et que vous vous retrouvez souvent à devoir gérer simultanément des pages complètes et des fragments de page depuis une seule vue, alors **django-htmx** mérite d'être envisagé. Quelle approche vous séduit le plus ? En réalité, django-htmx n'est pas un package lourd ; il est même plutôt léger. Il pourrait donc être judicieux de l'installer sans trop y réfléchir. Au final, tout dépend de l'humeur et de la personnalité du développeur. Je pense que le choix est souvent dicté par la préférence du développeur : « Je veux minimiser les dépendances » ou « Je préfère tout faire moi-même ». Cependant, quel que soit votre choix, avec **[[HTMX]]**, vous retrouverez le plaisir de vous éloigner de **[[JavaScript]]** pour revenir à la simplicité de HTML. **Articles connexes** : - [Simplifier le développement web dynamique avec Django et HTMX (Partie 1)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification/) - [Simplifier le développement web dynamique avec Django et HTMX - Ajax (Partie 2)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-2/) - [Simplifier le développement web dynamique avec Django et HTMX (Partie 4)](/ko/whitedec/2025/1/27/django-htmx-csrf-token-integration/) - [Simplifier le développement web dynamique avec Django et HTMX (Partie 5)](/ko/whitedec/2025/1/27/django-htmx-advanced-features/) - [Simplifier le développement web dynamique avec Django et HTMX (Partie 6) : Méthode de retour HTML](/ko/whitedec/2025/1/27/django-htmx-html-response/) - [Simplifier le développement web dynamique avec Django et HTMX (Partie 7) : Méthode de retour JSON](/ko/whitedec/2025/1/27/django-htmx-json-response/)