Dodanie sekcji o szablonach do scenariusza rozszerzonego Czat

xinulsw · Apr 22, 2015 · 33af8f0 · 33af8f0
1 parent b384e5d
commit 33af8f0
Show file tree

Hide file tree

Showing 21 changed files with 276 additions and 79 deletions.
diff --git a/docs/python/czat/base_z10.html → docs/python/czat/baza_z10.html b/docs/python/czat/base_z10.html → docs/python/czat/baza_z10.html
@@ -1,10 +1,12 @@
-<!-- czat/czat/templates/czat/base.html -->
-<html>
+<!-- czat/czat/templates/czat/baza.html -->
+<!DOCTYPE html>
+<html lang="pl">
+    <meta charset="utf-8" />
     <head>
         <title>{% block tytul %} System wiadomości Czat {% endblock tytul %}</title>
     </head>
     <body>
-        <h1>{% block naglowek %} Witaj w aplikacji Czat! {% endblock naglowek %}</h1>
+        <h1>{% block naglowek %} Witaj w aplikacji Czat! {% endblock %}</h1>
 
         {% block komunikaty %}
         {% if messages %}
@@ -14,17 +16,17 @@ <h1>{% block naglowek %} Witaj w aplikacji Czat! {% endblock naglowek %}</h1>
             {% endfor %}
             </ul>
         {% endif %}
-        {% endblock komunikaty %}
+        {% endblock %}
 
-        {% block tresc %} {% endblock tresc %}
+        {% block tresc %} {% endblock %}
 
         {% if user.is_authenticated %}
-            {% block linkilog %} {% endblock linkilog %}
+            {% block linkilog %} {% endblock %}
             <p><a href="{% url 'wyloguj' %}">Wyloguj się</a></p>
         {% else %}
-            {% block linkizalog %} {% endblock linkizalog %}
+            {% block linkizalog %} {% endblock %}
         {% endif %}
 
-        {% block linki %} {% endblock linki %}
+        {% block linki %} {% endblock %}
     </body>
 </html>
diff --git a/docs/python/czat/baza_z11.html b/docs/python/czat/baza_z11.html
@@ -0,0 +1,39 @@
+<!-- czat/czat/templates/czat/baza.html -->
+{% load staticfiles %}<!DOCTYPE html>
+<html lang="pl">
+    <meta charset="utf-8" />
+    <head>
+        <title>{% block tytul %} System wiadomości Czat {% endblock tytul %}</title>
+
+        <link rel="stylesheet" type="text/css" href="{% static 'czat/css/style.css' %}" />
+    </head>
+    <body>
+        <h1>{% block naglowek %} Witaj w aplikacji Czat! {% endblock %}</h1>
+
+        {% block komunikaty %}
+        {% if messages %}
+            <ul>
+            {% for komunikat in messages %}
+                <li>{{ komunikat|capfirst }}</li>
+            {% endfor %}
+            </ul>
+        {% endif %}
+        {% endblock %}
+
+        {% block tresc %} {% endblock %}
+
+        {% if user.is_authenticated %}
+            {% block linkilog %} {% endblock %}
+            <p><a href="{% url 'wyloguj' %}">Wyloguj się</a></p>
+        {% else %}
+            {% block linkizalog %} {% endblock %}
+        {% endif %}
+
+        {% block linki %} {% endblock %}
+
+        <div id="obrazki">
+            <img src="{% static 'czat/img/python.png' %}" width="300" />
+            <img src="{% static 'czat/img/sqlite.png' %}" width="300" />
+        </div>
+    </body>
+</html>
diff --git a/docs/python/czat/img.zip b/docs/python/czat/img.zip
diff --git a/docs/python/czat/index.rst b/docs/python/czat/index.rst
@@ -929,8 +929,123 @@ Poniższe zrzuty prezentują efekty naszej pracy:
 Szablony
 *****************
 
-[todo]
+Zapewne zauważyłeś, że większość kodu w szablonach, a zatem i w stronach
+HTML, które z nich powstają, się powtarza, albo jest bardzo podobna.
+Biorąc pod uwagę schematyczną budowę stron WWW jest to nieuniknione.
+Django dysponuje wbudowanym silnikiem szablonów, który ułatwia ich tworzenie.
 
+Szablony, jak można było zauważyć, składają się ze zmiennych i tagów.
+Zmienne, które ujmowane są w podwójne nawiasy sześciokątne ``{{ zmienna }}``,
+zastępowane są konkretnymi wartościami. Tagi z kolei, oznaczane notacją
+``{% tag %}`` tworzą mini-język szablonów i pozwalają kontrolować logikę budowania treści.
+Najważniejsze tagi, ``{% if warunek %}``, ``{% for wyrażenie %}``, ``{% url nazwa %}``
+– już stosowaliśmy.
+
+Spróbujmy uprościć i ujednolicić nasze szablony. Zacznijmy od szablonu
+bazowego, który umieścimy w pliku :file:`~/czat/czat/templates/czat/baza.html`:
+
+.. raw:: html
+
+    <div class="code_no">Plik baza.html nr <script>var plik_no = plik_no || 1; document.write(plik_no++);</script></div>
+
+.. highlight:: html
+.. literalinclude:: baza_z10.html
+    :linenos:
+
+Jest to zwykły tekstowy dokument, zawierający schemat strony utworzony z
+wymaganych znaczników HTML oraz bloki zdefiniowane za pomocą tagów mini-języka
+szablonów. W pliku tym umieszczamy stałą i wspólną strukturę stron w serwisie
+(np. nagłówek, menu, sekcja treści, stopka itp.) oraz wydzielamy bloki,
+których treść będzie można zmieniać w szablonach konkretnych stron.
+
+Wykorzystując szablon podstawowy, zmieniamy stronę główną, czyli plik
+:file:`index.html`:
+
+.. raw:: html
+
+    <div class="code_no">Plik index.html nr <script>var plik_no = plik_no || 1; document.write(plik_no++);</script></div>
+
+.. highlight:: html
+.. literalinclude:: index_z10.html
+    :linenos:
+
+Jak widać, szablon dziedziczy z szablonu bazowego. Odpowiada za to tag
+``{% extends plik_bazowy %}``. Dalej pomijamy strukturalne znaczniki HTML
+zdefiniowane w bazie, zastępujemy natomiast zawartość bloków, które
+uznajemy za potrzebne na danej stronie.
+
+Postępując na tej samej zasadzie modyfikujemy szablon rejestracji:
+
+.. raw:: html
+
+    <div class="code_no">Plik rejestruj.html nr <script>var plik_no = plik_no || 1; document.write(plik_no++);</script></div>
+
+.. highlight:: html
+.. literalinclude:: rejestruj_z10.html
+    :linenos:
+
+Ćwiczenie 9
+==============
+
+Wzorując się na podanych przykładach zmień pozostałe szablony tak, aby
+opierały się na szablonnie bazowym.
+
+Style, skrpyty, pliki
+************************
+
+Nasze szablony zyskały na zwięzłości i przejrzystości, ale nadal pozbawione
+są elementarnych dla dzisiejszych stron WWW zasobów, takich jak
+style CSS, skrypty JavaScript czy zwykłe obrazki. Jak je dołączyć?
+
+Przede wszystkim potrzebujemy osobnego katalogu :file:`~czat/czat/static/czat`.
+W terminalu w katalogu projektu (!) wydajemy polecenie:
+
+.. raw:: html
+
+    <div class="code_no">Terminal nr <script>var ter_no = ter_no || 1; document.write(ter_no++);</script></div>
+
+.. code-block:: bash
+
+    ~/czat $ mkdir -p czat/static/czat
+
+W powyższym katalogu tworzy się zazwyczaj podkatalogi dla różnych typów
+zasobów, np. :file:`css`, :file:`js` czy :file:`img`. Sugerujemy, żeby
+je utworzyć. Tworzymy również przykładowy plik :file:`~/czat/czat/static/czat/css/style.css`:
+
+.. raw:: html
+
+    <div class="code_no">Plik style.css nr <script>var plik_no = plik_no || 1; document.write(plik_no++);</script></div>
+
+.. highlight:: css
+.. literalinclude:: style_z11.css
+    :linenos:
+
+Do podkatalogu :file:`~/czat/czat/static/czat/img` wrzucamy obrazki z podanego
+:download:`archiwum <img.zip>`. Wreszcie zmieniamy szablon podstawowy:
+
+.. raw:: html
+
+    <div class="code_no">Plik baza.html nr <script>var plik_no = plik_no || 1; document.write(plik_no++);</script></div>
+
+.. highlight:: html
+.. literalinclude:: baza_z11.html
+    :linenos:
+    :lines: 2, 7-8, 33-37
+
+Kod z linii 1. ``{% load staticfiles %}`` umieszczamy na samym początku
+dokumentu. Konfiguruje on ścieżkę do zasobów. Kod z linii 3. wklejamy
+za znacznikiem ``<title>`` w sekcji ``<head>``. Ilustruje on, jak dołączamy
+style czy skrypty, mianowicie używamy tagu ``{% static plik %}``. Wreszcie
+kod z linii 5-8 zawierający znacznik ``<div>`` z obrazkami wstawiamy
+na końcu pliku przed znacznikiem zamykającym ``</body>``. Widzimy tu,
+jak wstawiać obrazki.
+
+Ćwiczenie 10
+==============
+
+W szablonie bazowym stwórz osobny block umożliwiający zastępowanie wstawionych
+obrazków. Zmień dowolny szablon inny niż strona główna tak, aby wyświetlał
+inne obrazki. Uwaga: musisz je wcześniej umieścić w odpowiednim katalogu!
 
 Materiały
 ***************

diff --git a/docs/python/czat/index_z10.html b/docs/python/czat/index_z10.html
@@ -1,16 +1,15 @@
 <!-- czat/czat/templates/czat/index.html -->
-{% extends "czat/base.html" %}
+{% extends "czat/baza.html" %}
 
-    {% block naglowek %}Witaj w aplikacji Czat!{% endblock naglowek %}
+    {% block naglowek %}Witaj w aplikacji Czat!{% endblock %}
 
     {% block linkilog %}
         <p>Jesteś zalogowany jako {{ user.username }}.</p>
         <p><a href="{% url 'wiadomosc' %}">Dodaj wiadomość</a></p>
         <p><a href="{% url 'wiadomosci' %}">Lista wiadomości</a></p>
-    {% endblock linkilog %}
+    {% endblock %}
 
     {% block linkizalog %}
         <p><a href="{% url 'loguj' %}">Zaloguj się</a></p>
         <p><a href="{% url 'rejestruj' %}">Zarejestruj się</a></p>
-    {% endblock linkizalog %}
-
+    {% endblock %}
diff --git a/docs/python/czat/rejestruj_z10.html b/docs/python/czat/rejestruj_z10.html
@@ -1,7 +1,7 @@
 <!-- czat/czat/templates/czat/rejestruj.html -->
-{% extends "czat/base.html" %}
+{% extends "czat/baza.html" %}
 
-    {% block naglowek %}Rejestracja użytkownika{% endblock naglowek %}
+    {% block naglowek %}Rejestracja użytkownika{% endblock %}
 
     {% block tresc %}
         {% if not user.is_authenticated %}
@@ -11,12 +11,12 @@
             <button type="submit">Zarejestruj</button>
         </form>
         {% endif %}
-    {% endblock tresc %}
+    {% endblock %}
 
     {% block linkilog %}
         <p>Jesteś już zarejestrowany jako {{ user.username }}.</p>
-    {% endblock linkilog %}
+    {% endblock %}
 
     {% block linki %}
         <p><a href="{% url 'index' %}">Strona główna</a></p>
-    {% endblock linki %}
+    {% endblock %}
diff --git a/docs/python/czat/style_z11.css b/docs/python/czat/style_z11.css
@@ -0,0 +1,17 @@
+body {
+	margin: 1em;
+	padding: 0;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 12pt;
+	background: lightgreen url('../img/django.png') no-repeat fixed top right;
+}
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+a:visited { text-decoration: none; }
+.clearfix {
+	clear: both;
+}
+h1 { font-size: 1.8em; font-weight: bold; margin-top: 20px;}
+h2 { font-size: 1.4em; font-weight: bold; margin-top: 20px;}
+p { font-szie: 1em; font-family: Arial, sans-serif; }
+.fr { float: right; }
diff --git a/python/czat/czat/static/czat/css/style.css b/python/czat/czat/static/czat/css/style.css
@@ -0,0 +1,17 @@
+body {
+	margin: 1em;
+	padding: 0;
+	font-family: Helvetica, Arial, sans-serif;
+	font-size: 12pt;
+	background: lightgreen url('../img/django.png') no-repeat fixed top right;
+}
+a { text-decoration: none; }
+a:hover { text-decoration: underline; }
+a:visited { text-decoration: none; }
+.clearfix {
+	clear: both;
+}
+h1 { font-size: 1.8em; font-weight: bold; margin-top: 20px;}
+h2 { font-size: 1.4em; font-weight: bold; margin-top: 20px;}
+p { font-szie: 1em; font-family: Arial, sans-serif; }
+.fr { float: right; }
diff --git a/python/czat/czat/static/czat/img/django.png b/python/czat/czat/static/czat/img/django.png
diff --git a/python/czat/czat/static/czat/img/python.png b/python/czat/czat/static/czat/img/python.png
diff --git a/python/czat/czat/static/czat/img/sqlite.png b/python/czat/czat/static/czat/img/sqlite.png
diff --git a/python/czat/czat/templates/czat/base.html b/python/czat/czat/templates/czat/base.html
diff --git a/python/czat/czat/templates/czat/baza.html b/python/czat/czat/templates/czat/baza.html
@@ -0,0 +1,39 @@
+<!-- czat/czat/templates/czat/baza.html -->
+{% load staticfiles %}<!DOCTYPE html>
+<html lang="pl">
+    <meta charset="utf-8" />
+    <head>
+        <title>{% block tytul %} System wiadomości Czat {% endblock tytul %}</title>
+
+        <link rel="stylesheet" type="text/css" href="{% static 'czat/css/style.css' %}" />
+    </head>
+    <body>
+        <h1>{% block naglowek %} Witaj w aplikacji Czat! {% endblock %}</h1>
+
+        {% block komunikaty %}
+        {% if messages %}
+            <ul>
+            {% for komunikat in messages %}
+                <li>{{ komunikat|capfirst }}</li>
+            {% endfor %}
+            </ul>
+        {% endif %}
+        {% endblock %}
+
+        {% block tresc %} {% endblock %}
+
+        {% if user.is_authenticated %}
+            {% block linkilog %} {% endblock %}
+            <p><a href="{% url 'wyloguj' %}">Wyloguj się</a></p>
+        {% else %}
+            {% block linkizalog %} {% endblock %}
+        {% endif %}
+
+        {% block linki %} {% endblock %}
+
+        <div class="fr">
+            <img src="{% static 'czat/img/python.png' %}" width="280" />
+            <img src="{% static 'czat/img/sqlite.png' %}" width="280" />
+        </div>
+    </body>
+</html>
diff --git a/python/czat/czat/templates/czat/index.html b/python/czat/czat/templates/czat/index.html
@@ -1,16 +1,15 @@
 <!-- czat/czat/templates/czat/index.html -->
-{% extends "czat/base.html" %}
+{% extends "czat/baza.html" %}
 
-    {% block naglowek %}Witaj w aplikacji Czat!{% endblock naglowek %}
+    {% block naglowek %}Witaj w aplikacji Czat!{% endblock %}
 
     {% block linkilog %}
         <p>Jesteś zalogowany jako {{ user.username }}.</p>
         <p><a href="{% url 'wiadomosc' %}">Dodaj wiadomość</a></p>
         <p><a href="{% url 'wiadomosci' %}">Lista wiadomości</a></p>
-    {% endblock linkilog %}
+    {% endblock %}
 
     {% block linkizalog %}
         <p><a href="{% url 'loguj' %}">Zaloguj się</a></p>
         <p><a href="{% url 'rejestruj' %}">Zarejestruj się</a></p>
-    {% endblock linkizalog %}
-
+    {% endblock %}
diff --git a/python/czat/czat/templates/czat/loguj.html b/python/czat/czat/templates/czat/loguj.html
@@ -1,7 +1,7 @@
 <!-- czat/czat/templates/czat/loguj.html -->
-{% extends "czat/base.html" %}
+{% extends "czat/baza.html" %}
 
-    {% block naglowek %}Logowanie użytkownika{% endblock naglowek %}
+    {% block naglowek %}Logowanie użytkownika{% endblock %}
 
     {% block tresc %}
         {% if user.is_authenticated %}
@@ -14,8 +14,8 @@
             <button type="submit">Zaloguj</button>
         </form>
         {% endif %}
-    {% endblock tresc %}
+    {% endblock %}
 
     {% block linki %}
         <p><a href="{% url 'index' %}">Strona główna</a></p>
-    {% endblock linki %}
+    {% endblock %}