Gyakorlat – Sablonok létrehozása
Hozzunk létre két sablont a menedékhelyek listájának és az egyes menedékhelyek részletes oldalának megjelenítéséhez. Emellett létrehozunk egy alapsablont is, amely biztosítja az alkalmazás konzisztenciáját.
Az alapsablon létrehozása
Az alapsablonok minden Django-projekt esetében gyakoriak. Először hozzunk létre egyet.
A Visual Studio Code-ban hozzon létre egy új mappát dog_shelters elnevezett sablonokon belül.
Hozzon létre egy új fájlt a base.html nevű sablonokban.
Adja hozzá a következő HTML-t a base.html fájlhoz:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}Dog shelter site{% endblock %}</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> </head> <body> <article class="container"> <section class="jumbotron"> <h3>Dog shelter application</h3> </section> {% block content %} {% endblock %} </article> </body> </html>Megjegyzés:
A bootstrap 4.6-os verzióját használjuk webhelyünkhöz. Itt azonban nincs szükségünk Bootstrap-ismeretekre. Csak egy osztályt használunk, jumbotron. Ellenkező esetben az alapvető HTML-t használjuk.
Figyelje meg a két {% block %} utasítást, az egyiket a címhez, a másikat pedig a gyermekoldalak által biztosított tartalomhoz. Megadunk egy alapértelmezett értéket title, amely biztosítja, hogy mindig legyen címünk, ha egy gyermeklap nem állítja be.
A menedéklistasablon létrehozása
Most létrehozunk egy másik sablont az összes menedékhely felsorolásához. Végigvezetjük a menedékhelyek listáját, és hivatkozásokat hozunk létre az összes menedékhely részleteire.
A dog_shelters/sablonokban hozzon létre egy shelter_list.html nevű új fájlt.
Adja hozzá a következő kódot a menedéklista sablonjának létrehozásához:
{% extends 'base.html' %} {% block title %} Shelter list {% endblock %} {% block content %} <h2>Shelter list</h2> <div>Here is the list of registered shelters</div> {% for shelter in shelters %} <div> <a href="{% url 'shelter_detail' shelter.id %}"> {{shelter.name}} </a> </div> {% endfor %} </div> {% endblock %}
A címkékkel block jelezzük, hogy hová szeretnénk helyezni az információinkat. Megadunk egy title értéket Shelter list, és az content elemek lesznek az összes menedék listája.
Új címkét is használunk. url A url címke dinamikusan generál egy URL-címet. Az URL-címeink regisztrálva vannak az URLconfban, így potenciálisan változhatnak. A címke használatával url meg tudjuk mondani Django-nak, hogy a megfelelő URL-címet kérje le az URLconftól ahelyett, hogy az elérési úton történő kemény kódolást használnánk.
A url címke a mi esetünkben az elérési út shelter_detail nevét, majd a várt paraméterek listáját keresi. shelter_detail van egy paramétere, pk. Ez a menedék elsődleges kulcsa vagy azonosítója. Az azonosítót a következővel shelter.idadhatja meg: .
A menedékhely részletes sablonjának létrehozása
A listasablon létrehozásával most már létrehozhatjuk a részletes sablont.
A dog_shelters/sablonokban hozzon létre egy shelter_detail.html nevű új fájlt.
Adja hozzá a következő kódot a sablon létrehozásához:
{% extends 'base.html' %} {% block title %} Shelter list {% endblock %} {% block content %} <h2>{{ shelter.name }}</h2> <div>Located in {{ shelter.location }}</div> {% if shelter.dog_set.all %} <div>Here is the list of available dogs</div> {% for dog in shelter.dog_set.all %} <div> <a href=""> {{dog.name}} </a> </div> {% endfor %} </div> {% else %} <div>This shelter has no dogs available for adoption</div> {% endif %} {% endblock %}
Figyelje meg, hogy a testben ellenőrizzük, hogy vannak-e kutyák a menhelyen if shelter.dog_set.all. Ha vannak kutyák, akkor a listát for úgy jelenítjük meg, hogy végighalad az összes kutyán. Ellenkező esetben egy olyan üzenetet jelenítünk meg, amely szerint nincs elérhető kutya. A hivatkozást egy későbbi leckében frissítjük.
Megjegyzés:
Észreveheti, hogy két hívást indítunk.shelter.dog_set.all Ha adatbázisokkal és ORM-ekkel rendelkezik, előfordulhat, hogy két hívást indítunk az adatbázishoz. Két hívás általában teljesítménybeli találat lenne. A Django beépített gyorsítótárazással rendelkezik, amely biztosítja, hogy csak egy hívás legyen az adatbázishoz.
A webhely tesztelése
A sablonjaink létrehozásával működés közben láthatjuk webhelyünket!
Mentse az összes fájlt.
Nyissa meg a böngészőt, és nyissa meg a kívánt elemet http://localhost:8000.
Most meg kell jelennie a menedékhelyek listájának.
Válassza a Contoso lehetőséget.
Megjelenik a Contoso menedékhely kutyáinak listája.
