# Django en HTMX: Dynamische webontwikkeling vereenvoudigen (Deel 3): Integratie met Django De robuuste backend **[[Django]]**, met zijn 'Batteries Included'-filosofie, en **[[HTMX]]**, dat slim gebruikmaakt van de vers gebakken HTML-fragmenten die de backend serveert, vormen een perfecte combinatie. In dit derde deel van onze serie over **het vereenvoudigen van dynamische webontwikkeling met Django en HTMX** bouwen we voort op de vorige delen en bespreken we twee concrete methoden om HTMX in een bestaand Django-project te integreren. ![Afbeelding van de combinatie van Django en HTMX](/media/whitedec/blog_img/cd6a017531894572b0123aa2e403ef4b.webp) ----- ## 1. Direct gebruik zonder externe pakketten {#sec-ca790606f6d7} Dit is de meest pure en lichtgewicht methode. Zonder complexe installatieprocessen kunt u de functionaliteit van HTMX direct gebruiken door simpelweg één scriptregel toe te voegen aan uw HTML-template. ### Installatiemethode {#sec-1b32901b18e3} De officiële HTMX-documentatie stelt verschillende installatiemethoden voor, maar de snelste manier is ongetwijfeld het gebruik van een **CDN**. * **CDN gebruiken (het snelst):** Voeg de onderstaande code toe binnen de ``-tag van uw `base.html`. ```html ``` * **Direct downloaden:** Als beveiliging of offline omgevingen belangrijk zijn, kunt u [htmx.min.js](https://www.google.com/search?q=https://unpkg.com/htmx.org/dist/htmx.min.js) downloaden, in de `static`-map van uw project plaatsen en het pad ernaartoe specificeren. * **npm:** Als u een buildsysteem gebruikt, kunt u het installeren met het commando `npm install htmx.org`. [Ga direct naar de officiële HTMX installatiedocumentatie](https://htmx.org/docs/#installing) ----- ## 2. De `django-htmx` package gebruiken {#sec-e127afe305db} Binnen het Django-ecosysteem bestaat er een specifieke bibliotheek die helpt om [[HTMX]] nog meer 'op zijn Django's' te gebruiken: **django-htmx**. ### Installatie en configuratie {#sec-1fad40addfc9} Volg de onderstaande stappen volgens de [officiële django-htmx documentatie](https://django-htmx.readthedocs.io/en/latest/installation.html). 1. **Pakket installeren** ```bash python -m pip install django-htmx ``` 2. **`INSTALLED_APPS` registreren** ```python INSTALLED_APPS = [ ..., "django_htmx", ..., ] ``` 3. **Middleware toevoegen** ```python MIDDLEWARE = [ ..., "django_htmx.middleware.HtmxMiddleware", ..., ] ``` ----- ### Hoe handig is django-htmx? {#sec-9b3f39c88466} Het is begrijpelijk dat men zich afvraagt of het nodig is om een extra pakket zoals **django-htmx** te installeren, aangezien [[HTMX]] op zichzelf al een zeer eenvoudig hulpmiddel is. Inderdaad, de kernfunctionaliteit kan zonder dit pakket worden geïmplementeerd. Echter, door de handige functies die dit pakket biedt, wordt duidelijk waarom veel ontwikkelaars hiervoor kiezen. Volgens de officiële documentatie van **django-htmx** is het belangrijkste kenmerk dat het de `request`-object **uitbreidt via middleware**. Door de middleware te registreren, wordt een `request.htmx`-attribuut toegevoegd, waardoor u eenvoudig toegang krijgt tot gedetailleerde informatie zoals: * **Verzoekinformatie controleren:** `boosted`, `current_url`, `current_url_abs_path`, `history_restore_request`, `prompt` * **Target en trigger beheren:** `target`, `trigger`, `trigger_name`, `triggering_event` Daarnaast ondersteunt het **twee speciale tags** die het werken met templates vergemakkelijken. * `{% htmx_script %}`: Dit is de hoofdtag die het HTMX-bibliotheekscript invoegt. * `{% django_htmx_script %}`: Dit is een hulptag die alleen de uitbreidingsscripts voor debugging toevoegt wanneer HTMX rechtstreeks via CDN of als statisch bestand is geïmplementeerd. Bijzonder indrukwekkend zijn de **11 nuttige methoden** die in de `django_htmx.http`-module zijn opgenomen. Onder deze methoden valt `trigger_client_event()` er absoluut uit. Hiermee kunt u aan serverzijde eenvoudig de `HX-Trigger`-header configureren en meesturen met de respons, waardoor **client-side events rechtstreeks vanaf de server kunnen worden aangestuurd**. Zodra u er vertrouwd mee bent, zult u merken dat het een krachtig en veelgebruikt hulpmiddel is. Natuurlijk kunnen al deze functionaliteiten ook door de ontwikkelaar zelf worden geïmplementeerd, bijvoorbeeld door middleware te schrijven of headers handmatig te manipuleren. Voor degenen die, net als ik, de voorkeur geven aan zelf implementeren, zal het misschien niet als een essentieel pakket aanvoelen. Kortom, **django-htmx** is geen 'must-have', maar wel degelijk een pakket dat 'de ontwikkeling aanzienlijk prettiger maakt'. De omvang van de officiële documentatie is beperkt, dus met één of twee uur studie heeft u het voldoende onder de knie. Beslis zelf of u het wilt implementeren, afhankelijk van de aard van uw project. ----- ## Afronding {#sec-2c0be77e7e31} Als u alleen van plan bent om een paar eenvoudige toggle-knoppen of 'like'-functionaliteiten te implementeren, is **direct gebruik (via CDN)** ruimschoots voldoende. Het niet onnodig vergroten van afhankelijkheden kan immers de meest economische keuze zijn. Echter, als de projectomvang toeneemt en u zich vaker in situaties bevindt waarin één view zowel volledige pagina's als gedeeltelijke pagina's moet afhandelen, dan is **django-htmx** zeker het overwegen waard. Welke aanpak spreekt u het meest aan? Feit is dat django-htmx geen zwaar pakket is; het is vrij lichtgewicht, dus het kan zelfs de juiste keuze zijn om het gewoon zonder veel nadenken te installeren en te gebruiken. Uiteindelijk hangt alles af van de voorkeuren en het karakter van de ontwikkelaar. 'Ik wil zo min mogelijk afhankelijkheden.' of 'Ik doe het liefst zoveel mogelijk zelf.' Het zijn dit soort ontwikkelvoorkeuren die de beslissing bepalen, denk ik. Maar welke keuze u ook maakt, met [[HTMX]] kunt u het plezier ervaren om los te komen van [[JavaScript]] en terug te keren naar de eenvoud van HTML. **Gerelateerde artikelen:** - [Django en HTMX: Dynamische webontwikkeling vereenvoudigen (Deel 1)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification/) - [Django en HTMX: Dynamische webontwikkeling vereenvoudigen - Ajax (Deel 2)](/ko/whitedec/2025/1/27/django-htmx-dynamic-web-simplification-2/) - [Django en HTMX: Dynamische webontwikkeling vereenvoudigen (Deel 4)](/ko/whitedec/2025/1/27/django-htmx-csrf-token-integration/) - [Django en HTMX: Dynamische webontwikkeling vereenvoudigen (Deel 5)](/ko/whitedec/2025/1/27/django-htmx-advanced-features/) - [Django en HTMX: Dynamische webontwikkeling vereenvoudigen (Deel 6): HTML-retourmethode](/ko/whitedec/2025/1/27/django-htmx-html-response/) - [Django en HTMX: Dynamische webontwikkeling vereenvoudigen (Deel 7): JSON-retourmethode](/ko/whitedec/2025/1/27/django-htmx-json-response/)