Mencipta aplikasi Tugasan dengan Django dan HTMX - Bahagian Mencipta bahagian hadapan dan menambah HTMX

Selamat datang ke bahagian 3 siri kami! Dalam siri artikel ini, saya mendokumentasikan pembelajaran saya sendiri tentang HTMX, menggunakan Django untuk bahagian belakang.
Jika anda baru tiba dalam siri ini, anda mungkin mahu menyemak bahagian satu dan dua terlebih dahulu.

Mencipta templat dan pandangan

Kami akan bermula dengan mencipta templat asas, dan templat indeks yang menghala ke paparan indeks, yang akan menyenaraikan Todos yang kami ada dalam pangkalan data. Kami akan menggunakan DaisyUI yang merupakan lanjutan daripada Tailwind CSS, untuk menjadikan Todos kelihatan baik.

Beginilah rupa halaman setelah paparan ditetapkan, dan sebelum kami menambah HTMX:

Menambah pandangan dan URL

Mula-mula kami perlu mengemas kini fail urls.py dalam akar projek, untuk memasukkan url yang akan kami tentukan dalam apl "teras" kami:

# todomx/urls.py

from django.contrib import admin
from django.urls import include, path # 



<p>Kemudian, kami mentakrifkan URL baharu untuk apl, meletakkan penambahan teras fail baharu/urls.py:<br>
</p>

<pre class="brush:php;toolbar:false"># core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
]

Kini kita boleh mencipta paparan yang sepadan, dalam core/views.py

# core/views.py

from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required


def index(request):
    return redirect("tasks/")


def get_user_todos(user: UserProfile) -> list[Todo]:
    return user.todos.all().order_by("created_at")


@login_required
def tasks(request):
    context = {
        "todos": get_user_todos(request.user),
        "fullname": request.user.get_full_name() or request.user.username,
    }

    return render(request, "tasks.html", context)

Beberapa perkara menarik di sini: laluan indeks kami (halaman utama) hanya akan mengubah hala ke URL dan paparan tugasan. Ini akan memberi kami kebebasan untuk melaksanakan beberapa jenis halaman pendaratan untuk apl pada masa hadapan.

Paparan tugas memerlukan log masuk dan mengembalikan dua atribut dalam konteks: nama penuh pengguna, yang digabungkan dengan nama pengguna mereka jika perlu, dan item todo, diisih mengikut tarikh penciptaan (kita boleh menambah beberapa pilihan pengisihan untuk pengguna dalam masa depan).

Sekarang mari tambah templat. Kami akan mempunyai templat asas untuk keseluruhan apl, yang akan merangkumi Tailwind CSS dan DaisyUI serta templat untuk paparan tugasan.

<!-- core/templates/_base.html -->



  
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    {% block header %}
    {% endblock %}
  
  



<p>Note that we're adding Tailwind and DaisyUI from a CDN, to keep these articles simpler. For production-quality code, they should be  bundled in your app.</p>

<p>We're using the beta version of DaisyUI 5.0, which includes a new list component which suits our todo items fine.<br>
</p>

<pre class="brush:php;toolbar:false"><!-- core/templates/tasks.html -->

{% extends "_base.html" %}

{% block content %}
<div>



<p>We can now add some Todo items with the admin interface, and run the server, to see the Todos similarly to the previous screenshot. </p>

<p>We're now ready to add some HTMX to the app, to toggle the completion of the item</p>

<h2>
  
  
  Add inline partial templates
</h2>

<p>In case you're new to HTMX, it's a JavaScript library that makes it easy to create dynamic web pages by replacing and updating parts of the page with fresh content from the server. Unlike client-side libraries like React, HTMX focuses on <strong>server-driven</strong> updates, leveraging <strong>hypermedia</strong> (HTML) to fetch and manipulate page content on the server, which is responsible for rendering the updated content, rather than relying on complex client-side rendering and rehydration, and saving us from the toil of serializing to and from JSON just to provide data to client-side libraries.</p>

<p>In short: when we toggle one of our todo items, we will get a new fragment of HTML from the server (the todo item) with its new state.</p>

<p>To help us achieve this we will first install a Django plugin called django-template-partials, which adds support to inline partials in our template, the same partials that we will later return for specific todo items.<br>
</p>

<pre class="brush:php;toolbar:false">❯ uv add django-template-partials
Resolved 24 packages in 435ms
Installed 1 package in 10ms
 + django-template-partials==24.4

Mengikut arahan pemasangan, kami harus mengemas kini fail settings.py kami sedemikian

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "core",
    "template_partials",  # 



<p>Dalam templat tugasan kami, kami akan mentakrifkan setiap item tugasan sebagai templat separa sebaris. Jika kami memuatkan semula halaman tersebut, halaman tersebut sepatutnya tidak mempunyai sebarang perbezaan visual.<br>
</p>

<pre class="brush:php;toolbar:false"><!-- core/templates/tasks.html -->

{% extends "_base.html" %}
{% load partials %} <!-- NEW -->

{% block content %}
<div>



<p>The two attributes added are important: the name of the partial, todo-item-partial, will be used to refer to it in our view and other templates, and the inline attribute indicates that we want to keep rendering the partial within the context of its parent template.</p>

<p>With inline partials, you can see the template within the context it lives in, making it easier to understand and maintain your codebase by preserving locality of behavior, when compared to including separate template files.</p>

<h2>
  
  
  Toggling todo items on and off with HTMX
</h2>

<p>To mark items as complete and incomplete, we will implement a new URL and View for todo items, using the PUT method. The view will return the updated todo item rendered within a partial template.</p>

<p>First of all we need to add HTMX to our base template. Again, we're adding straight from a CDN for the sake of simplicity, but for real production apps you should serve them from the application itself, or as part of a bundle. Let's add it in the HEAD section of _base.html, right after Tailwind:<br>
</p>

<pre class="brush:php;toolbar:false">    <link href="https://cdn.jsdelivr.net/npm/daisyui@5.0.0-beta.1/daisyui.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.tailwindcss.com?plugins=typography"></script>
    <script src="https://unpkg.com/htmx.org@2.0.4"></script> <!-- NEW -->
    {% block header %}
    {% endblock %}

Pada core/urls.py kami akan menambah laluan baharu kami:

# core/urls.py

from django.urls import path
from . import views

urlpatterns = [
    path("", views.index, name="index"),
    path("tasks/", views.tasks, name="tasks"),
    path("tasks/<task_id>/", views.toggle_todo, name="toggle_todo"), # 



<p>Kemudian, pada core/views.py, kami akan menambah paparan yang sepadan:<br>
</p>

<pre class="brush:php;toolbar:false"># core/views.py

from django.shortcuts import redirect, render
from .models import UserProfile, Todo
from django.contrib.auth.decorators import login_required
from django.views.decorators.http import require_http_methods # 



<p>Dalam pernyataan pemulangan, kita dapat melihat cara kita boleh memanfaatkan separa templat: kita hanya mengembalikan separa, dengan merujuk pada namanya todo-item-partial dan konteks yang sepadan dengan nama item yang kita gunakan lelaran dalam gelung dalam tasks.html.</p>

<p>Kami kini boleh menguji menghidupkan dan mematikan item:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284449958.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Nampaknya kami hanya melakukan beberapa kerja pihak pelanggan, tetapi memeriksa alat Rangkaian dalam penyemak imbas menunjukkan kepada kami cara kami menghantar permintaan PUT dan mengembalikan sebahagian HTML:</p><p>LETAKKAN permintaan </p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284544580.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Jawapan</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173609284614077.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Creating a To-Do app with Django and HTMX - Part Creating the frontend and adding HTMX"></p>

<p>Apl kami kini HTMX-fied! Anda boleh menyemak kod akhir di sini. Dalam bahagian 4, kami akan menambah keupayaan untuk menambah dan memadam tugasan.</p>