Com o aumento do AJAX (JavaScript e XML Assíncronos) e a crescente demanda por aplicativos web dinâmicos, os desenvolvedores estão constantemente buscando maneiras de simplificar o processo de construção de funcionalidades assíncronas. Aí entra o HTMX, uma biblioteca JavaScript leve que permite incorporar AJAX, transições CSS, WebSockets e Eventos Enviados pelo Servidor diretamente em seu HTML usando simples atributos HTML. Neste artigo, exploraremos como aproveitar o poder do HTMX em aplicações Django para criar, listar e excluir dados do banco de dados, tudo sem escrever uma única linha de código JavaScript. Seja você um desenvolvedor experiente em Django ou novo no desenvolvimento web, este tutorial irá capacitá-lo com o conhecimento necessário para construir aplicações web eficientes e interativas com facilidade.
O que é o HTMX?
HTMX é uma biblioteca JavaScript compacta que permite aprimorar suas aplicações web incorporando funcionalidades assíncronas diretamente em seu HTML usando atributos HTML simples. Com o HTMX, é possível realizar solicitações AJAX, realizar validação de formulários no lado do servidor, trocar componentes HTML, induzir transições CSS e muito mais. Ao contrário de frameworks frontend populares como React ou Vue, o HTMX não exige que você escreva qualquer código JavaScript para funcionalidades básicas de aplicativos web.
Ao aproveitar o poder do HTMX, é possível reduzir significativamente a complexidade de sua base de código e melhorar a experiência geral do usuário. O HTMX alcança isso simplificando a interação cliente-servidor, eliminando a necessidade de manipulação manual do DOM e fornecendo uma maneira intuitiva de construir aplicações web dinâmicas.
Iniciando com HTMX e Django
Antes de entrar nos detalhes de como usar o HTMX com o Django, vamos garantir que tenhamos todos os pré-requisitos necessários em vigor. Para acompanhar este tutorial, você precisará de:
- Python 3.8 ou superior instalado em sua máquina.
- Django instalado em seu ambiente Python.
- Um editor de texto ou ambiente de desenvolvimento integrado (IDE) de sua escolha.
Para instalar o Django, você pode usar o seguinte comando pip:
pip install Django
Assim que tiver o Django instalado, vamos criar um novo projeto Django. Abra o seu terminal ou prompt de comando e navegue até o diretório onde deseja criar o projeto. Execute o seguinte comando para criar um novo projeto Django chamado "contactapp":
django-admin startproject contactapp
Agora que temos nosso projeto Django configurado, vamos prosseguir com a integração do HTMX em nossa aplicação.
Criando e Listando Dados
Nesta seção, iremos construir uma aplicação simples de lista de contatos usando Django e HTMX. O objetivo é criar um formulário que permita aos usuários adicionar contatos à lista e exibir a lista de contatos sem atualizar a página. Para alcançar isso, faremos uso dos atributos HTMX hx-post e hx-target.
Passo 1: Criando o Modelo de Contato
Primeiro, vamos criar um modelo para representar nosso contato. Abra o arquivo contactapp/contactapp/models.py no seu editor de texto e adicione o seguinte código:
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)Isso define um modelo básico de Contato com campos para o nome, e-mail e número de telefone do contato.
Passo 2: Criando o Formulário de Contato
A seguir, precisamos criar um formulário para lidar com a entrada do usuário. Abra o arquivo contactapp/contactapp/forms.py e adicione o seguinte código:
from django import forms
from .models import Contact
class ContactForm(forms.ModelForm):
class Meta:
model = Contact
fields = '__all__'Isso cria um formulário com base no modelo de Contato que definimos anteriormente. A declaração fields = '__all__' informa ao Django para incluir todos os campos do modelo de Contato no formulário.
Passo 3: Exibindo o Formulário de Contato
Agora que temos nosso modelo e formulário definidos, vamos passar para a criação das views e templates para exibir o formulário de contato e lidar com a submissão.
Abra o arquivo contactapp/contactapp/views.py e adicione o seguinte código:
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})Neste código, definimos duas views: contact_list e create_contact. A view contact_list recupera todos os contatos do banco de dados usando o método Contact.objects.all() e os passa para o template contact_list.html. A view create_contact lida com a submissão do formulário. Se o método da requisição for POST, a view valida o formulário, salva o contato no banco de dados e redireciona o usuário para a lista de contatos. Caso contrário, renderiza o template create_contact.html com um formulário vazio.
Passo 4: Criando os Templates de Contato e Lista de Contatos
Agora vamos criar os templates para exibir o formulário de contato e a lista de contatos.
Crie um diretório chamado templates dentro do diretório contactapp. Dentro do diretório templates, crie um arquivo chamado base.html e adicione o seguinte código:
<!doctype html>
<html>
<head>
<title>Contact App</title>
<script src="https://unpkg.com/htmx.org@1.3.1/dist/htmx.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.13.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
{% block content %}
{% endblock %}
</div>
</body>
</html>Este é o template HTML base que usaremos para todas as páginas da nossa aplicação de contatos. Ele inclui o script HTMX e o CSS do Bootstrap para estilização.
A seguir, crie um arquivo chamado contact_list.html no diretório templates e adicione o seguinte código:
{% 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 %}Este template estende o template base.html e exibe a lista de contatos usando uma lista não ordenada (<ul>) e um loop. Se não houver contatos, ele exibe uma mensagem indicando que não há contatos.
Por fim, crie um arquivo chamado create_contact.html no diretório templates e adicione o seguinte código:
{% 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 %}Este template também estende o template base.html e exibe o formulário de contato. O formulário inclui o atributo hx-post, que especifica a URL para a qual o formulário deve ser enviado ({% url 'create_contact' %}), e o atributo hx-target, que especifica onde a resposta do servidor deve ser carregada (#contact-list).
Passo 5: Configurando URLs Para concluir nossa aplicação, precisamos configurar as URLs para mapear as views que criamos para suas URLs correspondentes.
Abra o arquivo contactapp/contactapp/urls.py e substitua o código existente pelo seguinte:
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'),
]Este código mapeia as views contact_list e create_contact para as URLs /contacts/ e /contacts/create, respectivamente.
Passo 6: Executando a Aplicação
Finalmente, vamos testar nossa aplicação de contatos localmente. Execute o seguinte comando a partir do diretório raiz do seu projeto Django:
python manage.py runserver
Isso inicia o servidor de desenvolvimento do Django, e você deverá ver uma saída semelhante à seguinte:
Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C.
Abra o seu navegador web e visite http://127.0.0.1:8000/contacts/ para ver a lista de contatos. Inicialmente, a lista estará vazia, mas ao enviar contatos através do formulário, eles aparecerão na lista sem a página.
Excluindo Dados
Além de criar e listar dados, o HTMX também oferece uma maneira fácil de lidar com operações de exclusão. Vamos adicionar a capacidade de excluir contatos de nossa aplicação de lista de contatos.
Passo 1: Atualizando as Views
Abra o arquivo contactapp/contactapp/views.py e adicione o seguinte código abaixo da função create_contact:
def delete_contact(request, contact_id):
contact = Contact.objects.get(id=contact_id)
contact.delete()
return redirect('contact_list')Esse código define uma nova view chamada delete_contact que recebe o contact_id como parâmetro. Dentro da view, recuperamos o contato do banco de dados usando Contact.objects.get(id=contact_id), excluímos e redirecionamos o usuário de volta para a lista de contatos.
Passo 2: Atualizando as URLs
Abra o arquivo contactapp/contactapp/urls.py e adicione a seguinte linha abaixo das URLs existentes:
path('contacts/delete/<int:contact_id>', delete_contact, name='delete_contact'),Esse novo padrão de URL mapeia a view delete_contact para a URL /contacts/delete/int:contact_id, onde int:contact_id é o ID do contato que queremos excluir.
Passo 3: Atualizando o Template de Lista de Contatos
Abra o arquivo contactapp/contact_list.html e substitua a linha que exibe cada contato pelo seguinte código:
<li>{{ contact.name }} <button hx-delete="{% url 'delete_contact' contact.id %}" hx-target=".contact" hx-confirm="Tem certeza de que deseja excluir este contato?">Excluir</button></li>Esse código adiciona um botão de exclusão após cada contato na lista. O atributo hx-delete especifica a URL para a qual a solicitação de exclusão deve ser enviada, e o atributo hx-target especifica o(s) elemento(s) que devem ser atualizados com a resposta.
Passo 4: Atualizando o Modelo de Contato
Abra o arquivo contactapp/contactapp/models.py e atualize a definição do modelo Contact da seguinte forma:
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.nameEssa alteração adiciona um método str ao modelo Contact para fornecer uma representação mais amigável do contato quando ele é excluído.
Passo 5: Atualizando o Template de Lista de Contatos
Abra o arquivo contactapp/contact_list.html e adicione o seguinte código acima da lista de contatos:
{% 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="Tem certeza de que deseja excluir este contato?">Excluir</button></li>
{% empty %}
<li>Sem contatos</li>
{% endfor %}
</ul>
{% else %}
<p>Sem contatos</p>
{% endif %}Esse código verifica se há contatos na lista usando uma instrução if. Se houver contatos, os exibe como antes, mas com a adição do botão de exclusão. Se não houver contatos, exibe uma mensagem indicando que não há contatos.
Passo 6: Reiniciando o Servidor e Testando
Para aplicar as alterações que fizemos, pare o servidor de desenvolvimento do Django pressionando Ctrl + C em seu terminal ou prompt de comando. Em seguida, reinicie o servidor usando o seguinte comando:
python manage.py runserver
Visite http://127.0.0.1:8000/contacts/ em seu navegador e você deverá ver a lista de contatos com os botões de exclusão. Clicar no botão de exclusão para cada contato irá removê-lo da lista sem atualizar a página.
Conclusão e Próximos Passos
Neste tutorial, exploramos o poder do HTMX e como ele pode ser integrado perfeitamente em aplicações Django. Ao usar o HTMX, conseguimos construir uma aplicação de lista de contatos que realiza operações assíncronas, como criar, listar e excluir contatos, sem escrever qualquer código JavaScript.
O HTMX oferece uma solução simples e elegante para construir aplicações web interativas sem a necessidade de frameworks frontend complexos. Sua natureza leve e facilidade de uso o tornam uma ótima escolha para desenvolvedores que desejam aprimorar seus projetos Django com funcionalidades assíncronas. Ao aproveitar as habilidades do HTMX, é possível criar aplicações web dinâmicas, eficientes e amigáveis ao usuário com facilidade.
Agora que você tem uma compreensão sólida do HTMX e sua integração com o Django, leve seu novo conhecimento e aplique-o aos seus próprios projetos. Experimente diferentes recursos do HTMX, como a troca de componentes HTML ou CSS e a indução de transições, para adicionar ainda mais interatividade às suas aplicações. Feliz codificação!
Sugestão de Cursos
Descubra o caminho para se tornar um especialista em programação web. Aprenda HTML, CSS, JavaScript e os principais frameworks nesta jornada emocionante. Com instrutores experientes e materiais práticos, você desenvolverá habilidades práticas para criar sites impressionantes e aplicativos interativos. Impulsione sua carreira na indústria de tecnologia e abra portas para oportunidades de emprego lucrativas. Garanta sua vaga hoje mesmo e inicie sua jornada para se tornar um desenvolvedor web de sucesso.
Método Para Aprender a Programar do Absoluto ZERO com Node.js, React e React Native.
As tecnologias ensinadas no curso são responsáveis por muitas vagas no mercado de trabalho.
Além da alta demanda, os salários vão de R$47.000,00 até R$197.000,00 anuais tendo empresas que possibilitam o trabalho remoto e até vagas Internacionais.
Para que você possa estar apto a preencher uma dessas vagas eu vou te apresentar o passo a passo para você se tornar um verdadeiro expert nessas tecnologias.
O curso te dará o passo a passo de como criar estruturar de um sistema do zero com Node.js, React e React Native.