Django w praktyce. Projektujemy internetowy sklep z koszulkami. Część I

W naszym krótkim wprowadzeniu do Django staraliśmy się udowodnić, że z pomocą tego frameworka można tworzyć złożone rozwiązania, generując jedynie niewielką ilość kodu. O tym, jak bardzo Django potrafi ułatwić pracę dewelopera sieciowych aplikacji, warto się jednak przekonać samemu. Zapraszamy do lektury pierwszego odcinka kursu programowania dla pythonowego frameworka, na przykładzie prostego, ale łatwego do rozbudowy internetowego sklepu z koszulkami.

Spis treści
Podstawowe założenia projektu Przygotowanie środowiska Wygląd strony – pierwsze szablony Projekt, panel administracyjny i strony statyczne Uruchomienie serwera i edycja danych Tworzenie aplikacji i modeli Część publiczna witryny – lista produktów Obsługa koszyka i zamówienia Podsumowanie

Załóżmy, że otrzymaliśmy zlecenie na stworzenie sklepu internetowego od ważnego, ale wybrednego klienta. Ponieważ projekt ma pozwalać na dowolną rozbudowę i modyfikację w przyszłości, zdecydowaliśmy się nie korzystać z gotowych rozwiązań. Nie chcemy też utrudniać sobie życia, wiążąc się z mniej elastycznymi środowiskami pracy, a z drugiej strony zależy nam na wykonaniu podstawowej, funkcjonalnej wersji witryny w czasie niewiele dłuższym od tego, którego potrzebowalibyśmy na konfigurację gotowego skryptu. Z czego więc skorzystamy? Oczywiście z Django!

Zaprezentowana w artykule aplikacja jest rozwiązaniem uproszczonym, pozbawionym wielu przydatnych elementów – w zupełności jednak wystarczy, by pokazać w praktyce zalety pracy z Django. Co ważne, aby zacząć przygodę z programowaniem w środowisku pythonowego frameworka nie trzeba być ekspertem – wystarczy w zasadzie znajomość podstaw HTML i Pythona, choć i inny język dynamiczny (np. PHP 5) powinien także wystarczyć. Całość kodu źródłowego znajduje się w dołączonym pliku ZIP.

Podstawowe założenia projektu

Nasz klient chciałby w pierwszej wersji uwzględnić podstawowe funkcjonalności – gotowe do edycji strony statyczne (strona główna, informacje dotyczące firmy itp.) oraz możliwość samodzielnego dodawania produktów z ceną, opisem i zdjęciem. Do tego przydatne będzie również zastosowanie podziału wszystkich oferowanych towarów na kategorie oraz obsługa koszyka i formularza zamówienia, wraz z opcją wysłania szczegółów zlecenia na adres e-mail. Obok tych kilku wskazówek otrzymamy na wstępie także przygotowany przez grafika szablon HTML z CSS. I tutaj zaczyna się nasza praca – z Django.

Przygotowanie środowiska

Aby rozpocząć projektowanie aplikacji, musimy oczywiście zadbać najpierw o samo środowisko pracy. Jak już wspominaliśmy w naszym wprowadzeniu, nie jest ono szczególnie skomplikowane. Na początek wystarczy nam instalacja Pythona w wersji 2.5 lub 2.6, Django w wersji 1.0 oraz Biblioteki PIL, wspierającej obróbkę obrazów. W tym ostatnim wypadku należy wybrać wersję o numerze odpowiadającym wersji zainstalowanego Pythona (Windows) lub po prostu użyć instalatora pakietów systemowych (Linux).

Czy konieczny jest serwer Apache lub baza danych MySQL?
Aby przygotować aplikację w Django, nie musimy instalować obu wymienionych elementów. Python potrafi symulować serwer WWW, a w wersji 2.5 zawiera także wbudowany system bazodanowy SQLite. Apache lub MySQL będą nam potrzebne dopiero przy produkcyjnym wdrożeniu witryny.

Po pomyślnym przeprowadzeniu instalacji utwórzmy folder koszulki, w którym znajdzie się cały przykładowy projekt.

Wygląd strony – pierwsze szablony

Jak już wspomnieliśmy na wstępie, klient dostarczył nam przygotowany wcześniej szablon strony. Dysponując kodem HTML, rozbijmy go więc na część wspólną, stałą (nagłówek, stopka, itp.) i część zmienną. Django pozwala korzystać z systemu dziedziczenia, w którym to szablony szczegółowe określają, co powinno znaleźć się w szablonie ogólnym, we wcześniej ustalonych miejscach. Te ostatnie określane są za pomocą znaczników {% block %}. Nasz szablon ogólny ma więc następującą postać:

<html>
<head>
    <title>Sklepik z koszulkami</title>
    <link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}main.css" />
</head>
<body>
    <div id="content">
        <h1>Sklepik z koszulkami</h1>
        <div id="basket"><a href="/sklep/koszyk/">Koszyk (0)</a></div>
        <div id="menu"><a href="/">Strona główna</a> | <a href="sklep/produkty/">Produkty</a></div>
        <div id="main">
            {% block main_box %}{% endblock %}
        </div>
        <div id="footer"><a href="/o-firmie/">O firmie</a></div>
    </div>
</body>
</html>

Listing 1 – Szablon ogólny

Jak widać, poszczególne bloki mają identyfikatory (np. main_box) i mogą zawierać domyślną treść, która będzie użyta, jeśli szablon szczegółowy jej nie zmieni. Element {{ MEDIA_URL }} zostanie w trakcie renderowania zastąpiony adresem URL folderu z plikami statycznymi. Szablony szczegółowe będziemy tworzyli w miarę potrzeb, przejdźmy więc teraz od razu do generowania szkieletu projektu.

Projekt, panel administracyjny i strony statyczne

W utworzonym wcześniej folderze koszulki powinniśmy wykonać z poziomu powłoki polecenie: django-admin startproject sklepik. Dzięki temu utworzymy nowy projekt wraz z kilkoma niezbędnymi plikami. Jeśli przyjrzymy się strukturze katalogów, zobaczymy między innymi folder sklepik. Musimy w nim utworzyć trzy kolejne zbiory: templates, templates/flatpages oraz webroot. Następnie w katalogu templates umieszczamy plik base.html, o treści przedstawionej na listingu nr 1. Podstawowy arkusz stylów main.css (dostępny w archiwum z przykładem), skopiujmy do folderu webroot – docelowego miejsca dla plików statycznych.

Aby skonfigurować środowisko pracy, należy jeszcze wprowadzić zmiany w dwóch plikach. Na początku settings.py. Tutaj umieścimy podstawowe dane projektu – silnik bazy danych, kod języka czy oznaczenia katalogów:

DATABASE_ENGINE = 'sqlite3'
DATABASE_NAME = 'sklepik.db'
TIME_ZONE = 'Europe/Warsaw'
LANGUAGE_CODE = 'pl'
MEDIA_ROOT = 'webroot'
MEDIA_URL = '/files/'
MIDDLEWARE_CLASSES = (
    ...
# Dodaj poniższy wpis wewnątrz...
    'django.contrib.flatpages.middleware.FlatpageFallbackMiddleware',

)

TEMPLATE_DIRS = ('templates',)
INSTALLED_APPS = (

    ...
# Dodaj poniższy wpis wewnątrz...
    'django.contrib.flatpages',
    'django.contrib.admin',
)

Listing 2 – Kod, który należy uwzględnić w pliku settings.py.

Polecenia przedstawione na listingu nr 3 należy z kolei umieścić w pliku urls.py:

from django.conf.urls.defaults import *
from django.conf import settings

from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
    (r'^admin/(.*)', admin.site.root),
)

if settings.DEBUG:
    urlpatterns += patterns('',

        (r'^files/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT}),

    )

Listing 3 – Zawartość pliku urls.py.

W folderze templates/flatpages powinniśmy jeszcze utworzyć plik default.html. Będzie on pełnił funkcję szczegółowego szablonu stron statycznych. W związku z tym wypełnijmy go odpowiednimi znacznikami, przedstawionymi na poniższym listingu:

{% extends "base.html" %}

{% block main_box %}

<h2>{{ flatpage.title }}</h2>

{{ flatpage.content }}

{% endblock %}

Listing 4 – Plik default.html

Przedstawiony szablon rozszerza utworzony wcześniej schemat z pliku base.html, a także informuje system, co powinno znaleźć się w bloku szablonu głównego. Wpisy typu {{ flatpage.title }} powodują oczywiście wstawienie w danym miejscu wartości właściwości title obiektu flatpage.

Teraz powinniśmy jeszcze zadbać o wsparcie bazy danych. Z poziomu powłoki wykonajmy więc w folderze sklepik polecenie python manage.py syncdb, które pozwoli nam utworzyć niezbędne tabele. Gdy system zapyta Would you like to create one now?, wpiszmy yes i odpowiedzmy na dalsze pytania. Dzięki temu, szybko i sprawnie, wygenerowane zostanie konto użytkownika administracyjnego ze wszystkimi uprawnieniami.

Na tym zakończymy konfigurację pierwszej części systemu. Teraz możemy już przystąpić do pierwszego uruchomienia.

«poprzednia 1 2 3 4 ... 5 następna »

Podoba Ci się ten tekst? Powiedz o tym innym na Fb: lub na G+:

publikuj:

wydrukuj

21 skomentuj »

Komentarze

#1 sl00d 2009-05-18 12:49:22 0
pomysl na kurs genialny, wykonanie tez, tylko czy mi sie wydaje czy wszystkie ilustracje sa identyczne? ;)
IP: 77.253.205.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/530.9 (KHTML, like Gecko) Chrome/2.0.180.0 Safari/530.9
#2 dAREuS^® 2009-05-18 12:52:07 0
Ilustracje otwierające tak. One mają m.in. spajać te artykuły.
IP: 217.98.20.[...] Opera/9.64 (Windows NT 6.0; U; pl) Presto/2.1.1
#3 Jan Koprowski^® 2009-05-18 14:25:13 0
Chodzi o to, że wszystkie wstawione screeny to ten sam widok panelu administracyjnego Django.
IP: 89.79.166.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/530.9 (KHTML, like Gecko) Chrome/2.0.180.0 Safari/530.9
#4 01neuro 2009-05-18 15:07:01 0
zasadniczo ciekawy tutorial.

Wy też macie zrobione www w django? (webhosting.pl?)
IP: 212.106.24.[...] Mozilla/5.0 (Windows; U; Windows NT 6.0; pl; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
#5 dAREuS^® 2009-05-18 15:11:14 0
Obrazki będą poprawione. Nasza strona jest na Pylons :).
IP: 217.98.20.[...] Opera/9.64 (Windows NT 6.0; U; pl) Presto/2.1.1
#6 Jan Koprowski^® 2009-05-18 16:49:14 0
Czepiam się, ale:

"W bazie danych Django automatycznie umieści również kolumnę id z kluczem głównym, nie musimy jej więc definiować jawnie."

The Zen of Python: Explicit is better than implicit.
IP: 89.79.166.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/530.9 (KHTML, like Gecko) Chrome/2.0.180.0 Safari/530.9
#7 SFA 2009-05-19 20:49:50 0
Kto zaczyna kurs django od ciecia szablonu??? Przecież szablon moze powstac miesiace po tym jak zaczelismy pisac projekt :D
IP: 213.134.186.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.65 Safari/525.19
#8 Jan Koprowski^® 2009-05-19 21:38:31 0
Kurs zaczął się odcinek wcześniej gdzie było wyjaśnione jakie są taktyki programowania. Proponuję poczytać kurs od początku bo jasno wynika z niego iż autor zna problem i zdecydował się pomimo tego na opublikowanie szablonów już w pierwszej części - zapewne ku polepszeniu walorów dydaktycznych.
IP: 89.79.166.[...] Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/530.9 (KHTML, like Gecko) Chrome/2.0.180.0 Safari/530.9
#9 Rafał Jońca 2009-05-27 20:31:40 0
Szablony pojawiają się w ćwiczeniu dosyć wcześnie, bo:

1. nie widziałem jeszcze projektu, który design (i cięcie na HTML) miał robiony po strukturze bazy w przypadku skepu internetowego lub innych podobnych prac zaczynanych od zera;

2. jeśli pierwsze, co zostaje pokazane to aplikacja flatpages i użycie admina, poza konfiguracją to szablon grają pierwsze skrzypce;

3. są projekty, w których na etapie szablonu i konfiguracji znajomość Django może się zakończyć (szczególnie, jeśli stosujesz jakieś aplikację zewnętrzne Django).
IP: 88.156.98.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.0.10) Gecko/2009042523 Ubuntu/9.04 (jaunty) Firefox/3.0.10
#10 Axi 2009-11-22 23:56:09 0
gdzie tu niby jest tworzenie konta administratora bo nie moge si zalogowac?
IP: 89.75.197.[...] Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; pl; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5
#11 majmo 2010-04-20 22:12:56 0
Dotarłem do ostatniego akapitu 3 strony turtoriala i się wyłożyłem :(

Należy jednak pamiętać o wcześniejszym usunięciu generowania adresu URL koszyka, w przeciwnym bowiem wypadku Django zgłosi błąd.

Niestety, ale nie rozumiem tego polecenia, tzn. nie wiem, w którym miejscu usunąć generowanie adresu URL koszyka.

Nie zrobiłem więc tego, i chyba dlatego na szablonie nie pojawiają się informacje dotyczące produktu, ani kategorie...??

ktoś może coś podpowiedzieć?
IP: 78.8.14.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.5 (KHTML, like Gecko) Chrome/4.1.249.1045 Safari/532.5
#12 Krison 2010-08-24 18:52:49 0
Nie czaje.. Polecenie django-admin startproject sklepiek zadziałało, ale rzadne wiecej juz nie. W ogole co to znaczy ze mam wykonac jakies polecenie w jakims folderze np. w folderze sklepiek?
IP: 83.20.81.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.11) Gecko/20100701 Firefox/3.5.11 ( .NET CLR 3.5.30729)
#13 Zelo 2010-09-22 02:34:50 0
To znaczy, że musisz wejść do danego folderu i dopiero wykonać polecenie. Jeżeli robisz to w terminalu to prawdopodobnie musisz wykonać komendę "cd ".
IP: 89.76.134.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.2.10) Gecko/20100915 Ubuntu/10.04 (lucid) Firefox/3.6.10
#14 Zelo 2010-09-22 02:36:19 0
To znaczy, że musisz wejść do danego folderu i dopiero wykonać polecenie. Jeżeli robisz to w terminalu to prawdopodobnie musisz wykonać komendę "cd `nazwa folderu do którego chesz przejść/bądź ścieżka`".

W wcześniejszym komentarzu wycięło mi fragment.
IP: 89.76.134.[...] Mozilla/5.0 (X11; U; Linux i686; pl-PL; rv:1.9.2.10) Gecko/20100915 Ubuntu/10.04 (lucid) Firefox/3.6.10
#15 Bartosz Sosna^® 2010-10-14 02:27:09 0
"Dotarłem do ostatniego akapitu 3 strony turtoriala i się wyłożyłem :(

Należy jednak pamiętać o wcześniejszym usunięciu generowania adresu URL koszyka, w przeciwnym bowiem wypadku Django zgłosi błąd.

Niestety, ale nie rozumiem tego polecenia, tzn. nie wiem, w którym miejscu usunąć generowanie adresu URL koszyka.

Nie zrobiłem więc tego, i chyba dlatego na szablonie nie pojawiają się informacje dotyczące produktu, ani kategorie...??

ktoś może coś podpowiedzieć?"

Django szuka szablonów, w /sklepik/templates/sklep/ .Wrzuć tam pliki z /sklepik/sklep/templates/sklep/ i bedzie grało.

pozdrawiam

Bartek
IP: 188.33.46.[...] Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.10) Gecko/20100915 Linux Mint/9 (Isadora) Firefox/3.6.10
#16 Dare_fgh 2011-02-20 17:15:29 0
Po utworzeniu pierwszej statycznej strony probuje zobaczyc efekt w przegldarce i otrzymuje od django taki blad:

Page not found (404)

Request Method: GET

Request URL: http://localhost:8000/

Using the URLconf defined in sklepik.urls, Django tried these URL patterns, in this order:

^admin/(.*)

^files/(?P.*)$

The current URL, , didn't match any of these.

Nie wiem gdzie tkwi blad - ktos moze pomoc?
IP: 91.94.52.[...] Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/534.13 (KHTML, like Gecko) Chrome/9.0.597.98 Safari/534.13
#17 Luke_1 2011-03-07 22:38:45 0
Mam ten sam błąd co kolega wyżej, ktoś wie dlaczego tak się dzieje ?
IP: 83.21.174.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0b12) Gecko/20100101 Firefox/4.0b12
#18 rrrogal.com 2011-05-16 21:49:57 0
@Dare_fgh i @Luke_1 musicie dodac pelny adres url we flatpage'u (przy dodawaniu z panelu admina) z http:// jaki dostajecie przy odpaleniu serwera, np "http://127.0.0.1:8000/" (plusik przy example.com, ew przy localhost:8000 na screenie z kursu, potem zaznaczyc go i kliknac save)
IP: 83.12.208.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
#19 Sunpietro 2011-06-16 09:43:24 0
mam ten sam problem co @Luke_1 i @Dare_fgh ale sugestia @rrrogal.com nie pomogła mi wyrzuca mi błąd przekierowania (taki sam jak wyżej)
IP: 91.217.152.[...] Mozilla/5.0 (Windows NT 6.1; rv:2.0.1) Gecko/20100101 Firefox/4.0.1
#20 Jaszczur 2011-08-25 18:09:28 0
W trakcie przechodzenia tego tutoriala, natknąłem się na kilka błędów, których tutaj nie ma wyjaśnionych...
IP: 109.243.228.[...] Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/535.1 (KHTML, like Gecko) Chrome/13.0.782.112 Safari/535.1
#21 rrrogal.com 2011-11-28 19:12:56 0
settings.py,

SITE_ID = 1 2/
IP: 83.12.208.[...] Mozilla/5.0 (Windows NT 6.1; WOW64; rv:8.0) Gecko/20100101 Firefox/8.0

Aby dodać komentarz, musisz podać swój nick, treść komentarza oraz poprawnie przepisać oba słowa z obrazka (słowa muszą być rozdzielone spacją).
W treści komentarza można używać języka formatowania BBcode.