Django - Tetum - List no Search uza HTMX iha Projetu Django
Saida mak HTMX?
HTMX mak biblioteka ida-ne'ebé fó dalan ba ita atu asesu ba funsaun navegador modernu sira diretamente husi HTML, duke uza JavaScript.
Prerekezitu - Oinsá ita bele halo List no search uza HTMX iha projetu Django?
- Kria projetu Django ida
- Instala HTMX ka download (htmx.min.js)
- Hatama htmx.min.js package iha temlates/base.html
1. Kria projetu Django
Atu kria ita-nia projetu ida uza Django favor vizita blog ne'e https://onydev.pykafe.org/tet/detail/kria-projetu-uza-django/ kona-bá oinsá ita bele kria projetu/website ida.
2. Instala ka download package HTMX (htmx.min.js)
Download script package (htmx.min.js) direitamente iha ofisial htmx nia website https://unpkg.com/browse/htmx.org@1.8.6/dist/.
Ita mos bele instala htmx uza npm liu husi terminal. Ezekuta kódigu tuir mai hodi instala.
npm install htmx.org --save
3. Hatama script htmx.min.js
Loke base.html no hatama script htmx hanesan ezemplu hatudu iha kódigu tuir mai ne'ebé indika ba file htmx.min.js file iha folder/directory laran
templates/base.html
<!DOCTYPE html> {% load static %} <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link type="text/css" rel="stylesheet" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" /> <link type="text/css" rel="stylesheet" href="{% static 'css/site.css' %}" /> <script type="text/javascript" src="{% static 'bootstrap/dist/js/bootstrap.bundle.min.js' %}"></script> <script type="text/javascript" src="{% static 'jquery/dist/jquery.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/htmx.min.js' %}"></script> <title> {% block title %} {% endblock %} </title> </head> <body> <div class="container"> <div> {% block header %} {% endblock %} </div> <div> {% block content %} {% endblock %} </div> <div> {% block footer %} {% endblock %} </div> </div> <!-- HTMX Support --> <script> document.body.addEventListener('htmx:configRequest', (event) => { event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}'; }) </script> </body> </html>
Iha ita-nia views.py, indika ba ita nia models ou tabela nia naran ne'ebé ita define ona iha models.py nia laran. Ezemplu iha ne'e hau nia tabela baze dedadus nia naran mak StoreProfile
store_profile/views.py
from django.db.models import Q from django.shortcuts import render from django.core.paginator import Paginator, EmptyPage, PageNotAnInteger from .models import StoreProfile STORES_PER_PAGE = 3 def list_view(request): stores, search_store = _search_stores(request) context = { "stores": stores, "search_store": search_store, } return render(request, 'store_profile/store_list.html', context) def list_search_view(request): stores, search_store = _search_stores(request) context = { "stores": stores, "search_store": search_store } return render(request, 'store_profile/search_results.html', context) def _search_stores(request): search_store = request.GET.get("search") page = request.GET.get("page") stores = StoreProfile.objects.all() if search_store: stores = stores.filter(Q(name__icontains=search_store) | Q(category__name__icontains=search_store) | Q(abbreviation__icontains=search_store)) paginator = Paginator(stores, STORES_PER_PAGE) try: stores = paginator.page(page) except PageNotAnInteger: stores = paginator.page(1) except EmptyPage: stores = paginator.page(paginator.num_pages) return stores, search_store or ""
Tuir mai iha baze URL iha directory projetu nia laran ita sei indika ba funsaun view rua ne'ebé ita define ona iha views.py nia laran, list_view ho list_search_view.
store_profile/urls.py
from django.urls import path from django.conf import settings from django.conf.urls.static import static from . import views urlpatterns = [ path('', views.list_view, name='store_list'), path("store_search/", views.list_search_view, name="store_search"), ] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Kria template foun ida fo naran search_results.html komforme naran ne'ebé ita hakarak. Iha ita nia template search_results.html nia laran ita sei looping ba viriable data ne'ebé ita define ona iha funsaun views nian hodi hatudu valor sira iha template
store_profile/templates/store_profile/search_results.html
{% load i18n %} <!-- Stores Entries Column --> {% if stores %} {% for store in stores %} <strong>{{ store.name }}</strong> </br> {% endfor %} {% else %} <p>{% trans 'Your search term returned no item, please try another search!' %}</p> {% endif %} <!-- End of Stores Entries Column --> <div id="load-more-store"> {% if stores.has_next %} <nav class="content-center"> <ul class="pagination"> <button class="btn btn-default" hx-get="{% url 'store_search' %}" hx-vals='{"page": "{{ stores.next_page_number }}", "search": "{{ search }}"}' hx-target="#load-more-store" hx-swap="outerHTML" > {% trans 'Load more ...' %} </button> </ul> </nav> {% endif %} </div>
Iha store_list.html nia laran ita mos iha form ida ne'ebé kompletamente ho field hodi hatama ka hakerek liafuan sira ne'ebé ita atu search, inklui mos template search_results.html iha ne'e hodi hatudu resultadu sira
store_profile/templates/store_profile/store_list.html
{% extends 'base_site.html' %} {% load i18n %} {% block content %} <h1>All Stores</h1> <form hx-get="{% url 'store_search' %}" hx-target="#search-results" hx-trigger="submit, input delay:0.3s" > <div class="filter-link"> <input name="search" type="text" placeholder="{% trans 'Search store...' %}" value="{{ search }}"> </div> </form> <div id="search-results"> {% include 'store_profile/search_results.html' %} </div> {% endblock %
Ezekuta/run server no vizita ita-nia website hodi koko search ba ita nia store data, no ita sei nota katak ita-nia browser sei la reload/refresh.
Kompletu liu tan bele hare'e video tutorial tuir mai ne'ebé desenvolve husi Mr. MattSegal.
Good luck...!