With the rise of AJAX (Asynchronous JavaScript and XML) and the increasing demand for dynamic web applications, developers are constantly seeking ways to simplify the process of building asynchronous functionality. Enter HTMX, a lightweight JavaScript library that allows you to incorporate AJAX, CSS transitions, WebSockets, and Server-Sent Events directly into your HTML using simple HTML attributes. In this article, we will explore how to leverage the power of HTMX in Django applications to create, list, and delete data from the database, all without writing a single line of JavaScript code. Whether you’re a seasoned Django developer or new to web development, this tutorial will equip you with the knowledge to build efficient and interactive web applications with ease.

Table of Contents

• What is HTMX?
• Getting Started with HTMX and Django
• Creating and Listing Data
• Deleting Data
• Conclusion and Next Steps

What is HTMX?

HTMX is a compact JavaScript library that allows you to enhance your web applications by incorporating asynchronous functionality directly into your HTML using simple HTML attributes. With HTMX, you can make AJAX requests, perform server-side form validation, swap HTML components, induce CSS transitions, and much more. Unlike popular frontend frameworks like React or Vue, HTMX doesn’t require you to write any JavaScript code for basic web application functionality.

By leveraging the power of HTMX, you can significantly reduce the complexity of your codebase and improve the overall user experience. HTMX achieves this by simplifying the client-server interaction, eliminating the need for manual DOM manipulation, and providing an intuitive way to build dynamic web applications.

Getting Started with HTMX and Django

Before diving into the specifics of using HTMX with Django, let’s make sure we have all the necessary prerequisites in place. To follow along with this tutorial, you’ll need:

• Python 3.8 or higher installed on your machine.
• Django installed in your Python environment.
• A text editor or integrated development environment (IDE) of your choice.

To install Django, you can use the following pip command:

pip install Django

Once you have Django installed, let’s create a new Django project. Open your terminal or command prompt and navigate to the directory where you want to create your project. Run the following command to create a new Django project named “contactapp”:

django-admin startproject contactapp

Now that we have our Django project set up, let’s move on to integrating HTMX into our application.

Creating and Listing Data

In this section, we will build a simple contact list application using Django and HTMX. The goal is to create a form that allows users to add contacts to the list and display the list of contacts without refreshing the page. To achieve this, we’ll make use of the HTMX attributes hx-post and hx-target.

Step 1: Creating the Contact Model

First, let’s create a model to represent our contact. Open the file contactapp/contactapp/models.py in your text editor and add the following code:

from django.db import models

class Contact(models.Model):
    name = models.CharField(max_length=30)
    email = models.EmailField()
    phone_number = models.CharField(max_length=15)

This defines a basic Contact model with fields for the contact’s name, email, and phone number.

Step 2: Creating the Contact Form

Next, we need to create a form to handle the input from the user. Open the file contactapp/contactapp/forms.py and add the following code:

from django import forms
from .models import Contact

class ContactForm(forms.ModelForm):
    class Meta:
        model = Contact
        fields = '__all__'

This creates a form based on the Contact model we defined earlier. The fields = '__all__' statement tells Django to include all fields from the Contact model in the form.

Step 3: Displaying the Contact Form

Now that we have our model and form defined, let’s move on to creating the views and templates to display the contact form and handle the submission.

Open the file contactapp/contactapp/views.py and add the following code:

from django.shortcuts import render, redirect
from .forms import ContactForm
from .models import Contact

def contact_list(request):
    contacts = Contact.objects.all()
    return render(request, 'contact_list.html', {'contacts': contacts})

def create_contact(request):
    if request.method == 'POST':
        form = ContactForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('contact_list')
    else:
        form = ContactForm()
    return render(request, 'create_contact.html', {'form': form})

In this code, we define two views: contact_list and create_contact. The contact_list view retrieves all contacts from the database using the Contact.objects.all() method and passes them to the contact_list.html template. The create_contact view handles the form submission. If the request method is POST, the view validates the form, saves the contact to the database, and redirects the user to the contact list. Otherwise, it renders the create_contact.html template with an empty form.

Step 4: Creating the Contact and Contact List Templates

Now let’s create the templates to display the contact form and the contact list.

Create a directory named templates within the contactapp directory. Inside the templates directory, create a file named base.html and add the following code:

<!doctype html>
<html>
<head>
    <title>Contact App</title>
    <script src="https://unpkg.com/[email protected]/dist/htmx.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

This is the base HTML template that we will use for all pages of our contact app. It includes the HTMX script and the Bootstrap CSS for styling.

Next, create a file named contact_list.html in the templates directory and add the following code:

{% extends 'base.html' %}

{% block content %}
    <h1>Contact List</h1>
    <ul id="contact-list">
        {% for contact in contacts %}
            <li>{{ contact.name }}</li>
        {% empty %}
            <li>No contacts</li>
        {% endfor %}
    </ul>
{% endblock %}

This template extends the base.html template and displays the contact list using a simple unordered list (<ul>) and a loop. If there are no contacts, it displays a message indicating that there are no contacts.

Finally, create a file named create_contact.html in the templates directory and add the following code:

{% extends 'base.html' %}

{% block content %}
    <h1>Create Contact</h1>
    <form id="create-contact-form" hx-post="{% url 'create_contact' %}" hx-target="#contact-list">
        {% csrf_token %}
        {{ form.as_p }}
        <input type="submit" value="Save">
    </form>
{% endblock %}

This template also extends the base.html template and displays the contact form. The form includes the hx-post attribute, which specifies the URL to which the form should be submitted ({% url 'create_contact' %}) and the hx-target attribute, which specifies where the server’s response should be loaded (#contact-list).

Step 5: Configuring URLs

To complete our application, we need to configure the URLs to map the views we created to their corresponding URLs.

Open the file contactapp/contactapp/urls.py and replace the existing code with the following:

from django.urls import path
from .views import contact_list, create_contact

urlpatterns = [
    path('contacts/', contact_list, name='contact_list'),
    path('contacts/create', create_contact, name='create_contact'),
]

This code maps the contact_list and create_contact views to the URLs /contacts/ and /contacts/create, respectively.

Step 6: Running the Application

Finally, let’s test our contact app locally. Run the following command from the root directory of your Django project:

python manage.py runserver

This starts the Django development server, and you should see output similar to the following:

Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.

Open your web browser and visit http://127.0.0.1:8000/contacts/ to see the contact list. Initially, the list will be empty, but as you submit contacts through the form, they will appear in the list without the page refreshing.

Congratulations! You have successfully built a contact list application using Django and HTMX. By utilizing HTMX’s simplicity and power, you were able to create an asynchronous web application without writing any JavaScript code.

Deleting Data

In addition to creating and listing data, HTMX also provides an easy way to handle delete operations. Let’s add the ability to delete contacts from our contact list application.

Step 1: Updating the Views

Open the file contactapp/contactapp/views.py and add the following code below the create_contact function:

def delete_contact(request, contact_id):
    contact = Contact.objects.get(id=contact_id)
    contact.delete()
    return redirect('contact_list')

This code defines a new view named delete_contact that takes the contact_id as a parameter. Inside the view, we retrieve the contact from the database using Contact.objects.get(id=contact_id), delete it, and redirect the user back to the contact list.

Step 2: Updating the URLs

Open the file contactapp/contactapp/urls.py and add the following line below the existing URLs:

path('contacts/delete/<int:contact_id>', delete_contact, name='delete_contact'),

This new URL pattern maps the delete_contact view to the URL /contacts/delete/<int:contact_id>, where <int:contact_id> is the ID of the contact that we want to delete.

Step 3: Updating the Contact List Template

Open the file contactapp/contact_list.html and replace the line that displays each contact with the following code:

<li>{{ contact.name }} <button hx-delete="{% url 'delete_contact' contact.id %}" hx-target=".contact" hx-confirm="Are you sure you want to delete this contact?">Delete</button></li>

This code adds a delete button after each contact in the list. The hx-delete attribute specifies the URL to which the delete request should be sent, and the hx-target attribute specifies the element(s) that should be updated with the response.

Step 4: Updating the Contact Model

Open the file contactapp/contactapp/models.py and update the Contact model definition as follows:

class Contact(models.Model):
    name = models.CharField(max_length=30)
    email = models.EmailField()
    phone_number = models.CharField(max_length=15)

    def __str__(self):
        return self.name

This change adds a __str__ method to the Contact model to provide a more user-friendly representation of each contact when it is deleted.

Step 5: Updating the Contact List Template

Open the file contactapp/contact_list.html and add the following code above the list of contacts:

{% if contacts %}
    <ul id="contact-list">
        {% for contact in contacts %}
            <li class="contact">{{ contact.name }} <button hx-delete="{% url 'delete_contact' contact.id %}" hx-target=".contact" hx-confirm="Are you sure you want to delete this contact?">Delete</button></li>
        {% empty %}
            <li>No contacts</li>
        {% endfor %}
    </ul>
{% else %}
    <p>No contacts</p>
{% endif %}

This code checks if there are any contacts in the list using an if statement. If there are contacts, it displays them as before, but with the addition of the delete button. If there are no contacts, it displays a message indicating that there are no contacts.

Step 6: Restarting the Server and Testing

To apply the changes we made, stop the Django development server by pressing Ctrl + C in your terminal or command prompt. Then, restart the server using the following command:

python manage.py runserver

Visit http://127.0.0.1:8000/contacts/ in your browser and you should see the contact list with the delete buttons. Clicking the delete button for each contact will remove it from the list without refreshing the page.

Conclusion and Next Steps

In this tutorial, we explored the power of HTMX and how it can be seamlessly integrated into Django applications. By using HTMX, we were able to build a contact list application that performs asynchronous operations, such as creating, listing, and deleting contacts, without writing any JavaScript code.

HTMX offers a simple and elegant solution for building interactive web applications without the need for complex frontend frameworks. Its lightweight nature and ease of use make it a great choice for developers looking to enhance their Django projects with asynchronous functionality. By leveraging HTMX’s abilities, you can create dynamic, efficient, and user-friendly web applications with ease.

Now that you have a solid understanding of HTMX and its integration with Django, take your newfound knowledge and apply it to your own projects. Experiment with different HTMX features, such as swapping HTML or CSS components and inducing transitions, to add even more interactivity to your applications. Happy coding!

---

Key Takeaways:

• HTMX is a lightweight JavaScript library that simplifies web application development by incorporating AJAX, CSS transitions, WebSockets, and Server-Sent Events directly into HTML using simple HTML attributes.
• With HTMX, you can build dynamic web applications without writing any JavaScript code, making it a great choice for Django developers who are not familiar with JavaScript or prefer to avoid complex frontend frameworks.
• In this tutorial, we built a contact list application with HTMX and Django, demonstrating how to create, list, and delete contacts without refreshing the page.
• To get started with HTMX in Django, you need to attach the HTMX CDN to your HTML and use the HTMX attributes hx-post, hx-target, and hx-delete to handle AJAX requests, display server responses, and perform delete operations, respectively.