Matplotlib – osadzenie wykresu w aplikacji

Kod programu można pobrać tutaj.

Okno programu zostało utworzone w bibliotece tkinter. Na wykres została przewidziana osobna ramka tkinter.Frame(). W ramce tej został umieszczony wykres dzięki zastosowaniu obiektu FigureCanvasTkAgg. Obiekt ten jako parametry przyjmuje obiekt Figure oraz kontener – w tym przypadku obiekt Frame.

W oknie programu umieściłem podstawowe widżety tzn. menu programu, pole wprowadzania i przycisk tkinter.Button() umożliwiające zmianę roku, dla którego generowany jest wykres oraz pole statusu, w którym są wyświetlane komunikaty o poprawnym wczytaniu danych lub o braku danych do wygenerowania wykresu dla danego roku.

Domyślnie po uruchomieniu programu wyświetlany jest wykres cen hurtowych dla bieżącego roku.

Okno programu generującego wykres cen hurtowych paliw na podstawie podanego roku.

Matplotlib i parsowanie HTML

W dzisiejszym wpisie przedstawię parsowanie strony Orlenu w celu pobrania danych o zmianach cen hurtowych oleju napędowego i przedstawienia tych zmian na wykresie.

Na wstępie niezbędne jest zaimportowanie bibliotek: requests – w celu obsługi zapytań HTLM, lxml .html do parsowania HTML, matplotlib.pyplot – w celu wyświetlenia wykresu na podstawie sparsowanych danych oraz unicodedata – w celu obsługi unicode.

import requests
from lxml import html
import matplotlib.pyplot as plt
import unicodedata

if __name__ == "__main__":
    main()

def main():
   print_chart(my_parser(2019))    #wyświetla wykres dla 2019 roku

def print_chart(content):
    year = content.get('year')  
    fuel = content.get('fuel')
    dates = content.get('dates') 
    prices = content.get('prices')

    plt.style.use('bmh')

    fig, ax = plt.subplots()

    ax.set_title(f'Cena dla paliwa {fuel} - {year} rok')
    ax.set_xlabel('Data')
    ax.set_ylabel('Cena')
    fig.autofmt_xdate()
    ax.grid(True)
    ax.xaxis.set_major_locator(plt.MaxNLocator(10))
    ax.plot(dates, prices, c='#CA3F62')
    plt.show()

Powyższa funkcja rysuje wykres liniowy zmian cen hurtowych oleju napędowego w danych roku. Argument content przekazywany do funkcji jest słownikiem. Wartości dla kolejnych kluczy słownika są przekazywane do zmiennych year, fuel, dates, i prices. Wartości dates i prices są listami przechowującymi odpowiednio daty i ceny hurtowe Orlenu.

Następnie w wierszu plt.style use(‘bmh’) zostaje użyty styl graficzny dla wykresu w celu poprawy wyglądu wykresu. Listę dostępnych stylów można wyświetlić za pomocą: print(plt.style.available).

Następnie za pomocą jako wynik funkcji plt.subplots() zostaje zwrócona krotka, której wartości są przypisane do zmiennych – odpowiednio fig oraz ax. Zmienna fig przechowuje obiekt Figure, który można utożsamiać z oknem wszystkich wykresów, natomiast ax przechowuje obiekt AxesSubplot, który możemy utożsamiać z poszczególnym wykresem, jednakże na takim obiekcie może być rysowanych kilka wykresów dla różnych danych np. obiekt taki może przechowywać wykres zmian cen oleju napędowego oraz drugi wykres, zawierający cenę etyliny w tym okresie. Jeżeli chcielibyśmy przedstawić oba wykresy w tym samym oknie, w tym samym obiekcie Figure, ale np. w dwóch kolumnach, to należałoby użyć dwóch obiektów ax np. ax1 i ax2 tzn.

fig, (ax1, ax2) = plt.subplots(rows=1, cols=2)

W kolejnych wierszach ustawiany jest tytuł dla wykresu, etykieta dla osi X i etykieta dla osi Y. Następnie wywołuję funkcję autofmt_xdate(), aby poprawić widoczność etykiet dla osi X – etykiety wyświetlane są pod kątem i nie przesłaniają się nawzajem.

Kolejnym krokiem jest wyświetlenie siatki wykresu za pomocą funkcji grid() przekazując parametr True – w celu poprawy wyglądu wykresu.

Można zauważyć, że dane osi X przesłaniają się mimo wszystko. Aby poprawić widoczność wartości na osi x ograniczyłem ilość wyświetlanych wartości na osi X do 10 za pomocą funkcji: ax.xaxis.set_major_locator(plt.MaxNLocator(10))

W kolejnym wierszu: ax.plot(dates, prices, c=’#CA3F62′) tworzony jest wykres liniowy na podstawie danych dla osi X – zawartych w liście dates oraz dla danych dla osi Y zawartych w liście prices. Parametr c określa kolor linii wykresu.

Funkcja show() w kolejnej linii wyświetla tak przygotowany wykres.

Słownik content przekazany jako argument do funkcji print_chart() jest zwracany jako wynik funkcji my_parser(), która jako parametr przyjmuje argument year – rok, dla którego chcemy pobrać dane. Kod mojej funkcji my_parser() wygląda następująco:

def my_parser(year):
    page = requests.get(f'https://www.orlen.pl/PL/DlaBiznesu/HurtoweCenyPaliw/Strony/archiwum-cen.aspx?Fuel=ONEkodiesel&Year={year}')
    text = unicodedata.normalize("NFKC", page.text)
    tree = html.fromstring(text)
    table_content = tree.xpath('//tr/td/span/text()')
    table_content = table_content[::-1]
    content = {}
    content['year'] = year
    content['fuel'] = table_content.pop()
    content['dates'] = table_content[1::2]
    prices = table_content[::2]
    prices = [price.replace(' ', '') for price in prices]
    prices = list(map(int, prices))
    content['prices'] = prices
    return content

Najpierw za pomocą funkcji get() z biblioteki requests jest tworzone zapytanie strony Orlenu dla danego roku, podanego jako parametr funkcji my_parser(). W efekcie zmienna page przechowuje zwrócony obiekt Response.

W kolejnym etapie zawartość strony jest normalizowana, aby pozbyć się z tekstu kodów unicode.

W linii tree = html.fromstring(text) tworzona jest zmienna tree, za pomocą której następnie będzie wyszukiwana zawartość tabeli, przechowującej daty i ceny paliwa tzn.:

table_content = tree.xpath(‘//tr/td/span/text()’) # pobranie wartości z tabeli

Pobrana zawartość z tabeli jest listą zawierającą kolejno: nazwę paliwa, a następnie na przemian daty i ceny paliwa. Dane są posortowane od końca roku do początku i aby uzyskać odwrotne wartości należy wpisać:

table_content = table_content[::-1]

Dzięki temu dane z początku roku będą na początku wykresu.

Kolejnym krokiem jest utworzenie słownika content, którego kluczami będą: year, fuel, dates i prices, przechowującymi odpowiednio rok, dla którego chcemy wyświetlić dane; nazwę paliwa; zawierający listę dat i listę cen hurtowych. Wartość year jest przekazywana na podstawie parametru funkcji my_parser(). Wartość fuel jest pobrana za pomocą funkcji pop() z listy table_content – dzięki czemu docelowo lista ma tylko dane zawierające daty i ceny. W liście prices jest są dokonywane czynności porządkowe tzn. usunięcie spacji oddzielających tysiące oraz zrzutowanie tak zmodyfikowanych łańcuchów na typ int.

Tak utworzony słownik jest następnie zwracany jako argument do funkcji print_chart()

W efekcie wykres cen hurtowych dla oleju napędowego dla przykładowego roku 2019 wygląda następująco:

Wykres hurtowych cen oleju napędowego – PKN Orlen w 2019 roku.

W kolejnym wpisie opiszę jak osadzić wykres utworzony z danych pobranych ze strony PKN Orlen we własnej aplikacji na podstawie opisanej już wcześniej biblioteki tkinter.

— c. d. n. —

Mapy kolorów w matplotlib

Aby utworzyć wykres punktowy, korzystający z wybranej palety kolorów należy jako argument cmap podać nazwę wybranego schematu kolorów. Kolory pogrupowane są w grupy >>dokumentacja<< – np. Sequential – różne natężenie jednego koloru, Diverging – różne natężenia dwóch kontrastowych kolorów, Qualitative – kontrastowe różne kolory, ale pasujące do palety np. Pastel1 – zawierający różne kolory pastelowe.

import matplotlib.pyplot as plt

fig, ax = plt.subplots()

ax.set_title('Tytuł wykresu')
ax.set_xlabel('Etykieta osi X')
ax.set_ylabel('Etykieta osi Y')

# x - lista z wartościami osi X np. nazwa produktu
# y - lista z wartościami osi Y np. cena produktu
# intensivity - lista z liczbami odpowiadającymi instensywności danej cechy
# cm - nazwa wybranej palety kolorów

ax.scatter(x, y, c=intensivity,  cmap=cm)  
  # Przykładowo: plt.scatter(x, y, c=intensivity, s=50,  cmap='plasma')

mappable = ax.collections[0]
cbar = fig.colorbar(mappable=mappable)
cbar.set_label('intensivity')

plt.show()

Parametr s odpowiada za wielkość rysowanych znaków.

Aby wyświetlić pasek colorbar, który obrazuje intensywność danej cechy dla wyświetlonego punktu należy jako parametr podać obiekt mappable, który dla wykresu punktowego jest przechowywany jako element listy collections obiektu AxesSubplot.

W efekcie na wykresie, który może przedstawiać np. nazwę produktu i cenę można umieścić dodatkową informację za pomocą koloru np. popularność wśród kupujących lub ilość towaru w magazynie (np. kolor zielony – towar dostępny bez problemu aż po kolor czerwony – brak towaru w magazynie)

Pandas – filtrowanie, grupowanie, eksport do Excela

Na podstawie pliku listy tankowań pobranego w formacie csv przedstawię podstawowe możliwości biblioteki Pandas. We wcześniejszym >>artykule<< opisałem parsowanie za pomocą modułu csv z biblioteki standardowej Pythona.

Plik csv jest plikiem tekstowym, w którym wartości poszczególnych kolumn są oddzielone delimiterem, najczęściej znakiem przecinka. W tym konkretnym przypadku, w pobranym pliku raportu listy tankowań, wartości są oddzielone od siebie znakiem średnika.

Nagłówek danych ma postać: Dane Kontrahenta;Imie;Nazwisko;Numer Korekty;Numer WZ;Data;Godzina;Licznik;Stacja;Numer Rejestracyjny;Numer Karty;Nazwa towaru;VAT procent;Cena bazowa;Cena netto;Cena brutto;Wartość rabatu;Ilość;Netto;VAT;Brutto. Kolejne wiersze zawierają wiersze z danymi dotyczącymi kolejnych tankowań.

Aby wczytać pobrany plik csv o nazwie report.csv musimy utworzyć obiekt ramki danych, gdzie pierwszym argumentem jest ścieżka do pliku, który chcemy wczytać, a argument sep określa rodzaj separatora, tzn.

import pandas as pd

df = pd.read_csv('path/to/report.csv', sep=';')

▣ Na podstawie utworzonego obiektu możemy np. określić ilość poszczególnych wierszy danych np. ilość tankowań z podziałem na różne paliwa tzn.

refuel_amount = df['Nazwa towaru'].value_counts()

Przykładowy wynik :

OLEJ NAPĘDOWY                     466
OPŁATA ZA WYDANIE KARTY FLOTA      1
Name: Nazwa towaru, dtype: int64

▣ Jeśli chcemy np. określić średnią cenę netto dla paliwa zawierającego w nazwie łańcuch: ‘napędowy’ to musimy zastosować filtrowanie tzn.

filter_ = df['Nazwa towaru'].str.lower().str.contains('napędowy')

result = df[filter_]

(Oryginalnie zawartość kolumny Nazwa towaru była pisana dużymi literami, stąd zastosowanie metody lower()). W wyniku zastosowania filtra ramka danych o nazwie result posiada tylko dane związane z wybranym paliwem. Niestety, dane wpisane w kolumnie Cena netto posiadają części dziesiętne oddzielone za pomocą przecinka a nie kropki. Aby dokonać konwersji wszystkich danych z kolumny Cena netto zastosuję metodę replace() a następnie konwersję wartości z kolumny na typ float tzn.

result['Cena netto'] = result['Cena netto'].str.replace(',', '.')

result['Cena netto'] = result['Cena netto'].astype(float)

Średnia cena paliwa dla kolumny Cena netto ramki result utworzonej w efekcie zastosowania filtra:

result['Cena netto'].mean()       # wylicza średnią cenę danego paliwa

Analogicznie stosując funkcje min(), max() możemy wyliczyć najniższą lub najwyższą cenę paliwa w danym okresie dla wybranego paliwa.

▣ Jeśli chcemy obliczyć średnią cenę dla różnych rodzajów paliw z kolumny Nazwa towaru to musimy zastosować grupowanie. Utworzę zmienną fuel przechowującą unikalne wartości z kolumny Nazwa towaru tzn.

fuel = df.groupby(['Nazwa towaru']                # obiekt DataFrameGroupBy

fuel['Cena netto'].mean()        # Zwraca średnią cenę netto dla każdego rodzaju paliwa

W powyższym przykładzie także należy mieć na uwadze, aby kolumna Cena netto zawierała elementy typu float .

▣ Jeśli chcielibyśmy przeszukiwać dane na podstawie daty to można zauważyć, że w pobranym pliku csv mamy dwie kolumny odpowiedzialne za przechowywanie daty i godziny. Są to odpowiednio kolumna Data oraz kolumna Godzina. Dane o wpisach do rejestru tankowań są posortowane, ale jeśli chcielibyśmy znaleźć np. tankowania z określonego zakresu dat lub np. średnią cenę z określonego zakresu dat, to należałoby zamienić wartości z tych obu kolumn na obiekt typu datetime. W poniższym przykładzie utworzę nową kolumnę, która będzie przechowywać wartość typu datetime dla każdego wiersza ramki danych.

df['datetime'] = df['Data'] + ' ' + df['Godzina']    # na razie kolumna z wartościami tekstowymi typu object 

df['datetime'] = df['datetime'].apply(lambda x: datetime.strptime(x, '%Y.%m.%d %H:%M:%S'))

Dla każdej wartości wiersza kolumny datetime zostaje zastosowana funkcja strptime(), która zamienia łańcuch znaków mający postać np. 2020.04.20 22:20:10 w obiekt typu datetime zgodnie z formatem podanym jako drugi argument funkcji.

Wartości z kolumny datetime mogą posłużyć jako index ramki, co ułatwi wyszukiwanie za pomocą wycinków (slices) tzn.

df.set_index('datetime', inplace=True)  # argument inplace=True nadpisuje ramkę df

Jeśli chcemy np. wyświetlić wiersze z kolumn Nazwa towaru oraz Cena netto dla wierszy z zakresu dat np. od 15 do 20 kwietnia 2020 to możemy napisać:

df.loc['2020-04-15':'2020-04-20', ['Nazwa towaru','Cena netto']]

▣ Jeśli chcemy wyświetlić maksymalną i minimalne cenę wszystkich rodzajów paliw z pobranego raportu w tygodniach objętych raportem, to możemy użyć metodę resample():

fuel = df.groupby(['Nazwa towaru'])  # utworzenie grupy
  # z wszystkich rodzajów paliw 
  # występujących w kolumnie 'Nazwa towaru' (unikalne wartości)

fuel['Cena netto'].resample('W').agg(['max', 'min'])  

W powyższym przykładzie utworzyłem najpierw zmienną przechowującą obiekt DataFrameGroupBy, przechowującą unikalne wartości z wierszy tankowań. Następnie dla każdego unikalnego elementu wyświetlam wartości ceny minimalnej i maksymalnej zwracane przez metody min() oraz max(), ale wyniki są wyświetlane dla okresów tygodniowych (argument ‘W’ – week). Analogicznie dla interwałów dwutygodniowych wystarczy jako argument użyć ‘2W’.

Przykładowy wynik :

		                max	min
Nazwa towaru	 datetime		
OLEJ NAPĘDOWY 	2020-04-05	3.39	3.24
                2020-04-19	3.20	2.98
                2020-05-03	2.99	2.87
                2020-05-17	3.11	2.94
                2020-05-31	3.21	3.11
OPŁATA ZA WYDANIE KARTY 2020-05-19 4.07	4.07

▣ Jeśli chcielibyśmy wyświetlić dane dotyczące okresów tygodniowych, ale dla wartości wierszy z kolumny ‘Cena netto’ interesuje nas, jaka w tych tygodniach jest maksymalna i minimalna cena netto, a dla kolumny ‘Ilość’, reprezentującej ilość zatankowanego paliwa chcielibyśmy uzyskać informację o ilości zakupionego paliwa w danym tygodniu:

result = df.resample('W').agg({'Cena netto':['min', 'max'], 'Ilość':'sum'})

W powyższym przykładzie stosujemy funkcję agregującą agg(), która jako argument pobiera słownik, w którym indeksami są nazwy kolumn, a wartościami nazwy funkcji, które chcemy zastosować.

Przykładowy wynik :

	          Cena netto	Ilość
                min	max	sum
datetime			
2020-04-05	3.01	3.11	2969.00
2020-04-12	3.08	3.15	3019.54
2020-04-19	2.88	3.05	3808.03
2020-04-26	2.81	4.02	3902.50
2020-05-03	2.78	2.89	3808.00
2020-05-10	2.74	2.95	4409.00
2020-05-17	2.95	3.05	4008.04
2020-05-24	3.02	3.15	4684.05
2020-05-31	3.12	3.18	4055.00

▣ Zapis lub odczyt z plików Excela:

df = pd.read_excel('path/to/file.xlsx')  # odczyt z pliku file.xlsx

df.to_excel('path/to/file.xlsx')  # zapis do pliku file.xlsx

Aby odczytać/zapisać dane z konkretnego arkusza pliku programu Excel, to jako drugi parametr należy podać argument sheet_name

df.to_excel('path/to/file.xlsx', sheet_name='Arkusz_1')    # zapisuje dane z ramki
 # do pliku file.xlsx w arkuszu o nazwie Arkusz_1

Pandas – wyszukiwanie danych

  • Dwa alternatywne sposoby wyświetlenie danych z konkretnej kolumny i wiersza ramki (w tym przypadku wiersz o indeksie 0 i kolumna o nazwie name)
df.loc[0, "name"]
lub
df.name.loc[0]
  • Wyszukiwanie danych w ramce za pomocą filtra (składnia: df[filtr])
df[df.col_name == "name"]    # zwraca wiersze zawierające wartość name w kolumnie col_name
lub
df[df["col_name"] == "name"] # zwraca wiersze zawierające wartość name w kolumnie col_name

Zawężenie wyniku do wybranych kolumn. Wynikiem są wiersze zawierające wartość name w kolumnie col_name, przy czym wynik jest ograniczony do wyświetlenia wartości z kolumn col_x oraz col_y

df.loc[df.col_name == "name", ["col_x", "col_y"]]
lub
df.loc[df["col_name"] =="name", ["col_x", "col_y"]]

Dekoratory z parametrami – gra Fizz Buzz

Gra Fizz Buzz to klasyczne zadanie – test na odfiltrowanie z ciągu liczb tych, które są podzielne przez zadane liczby bez reszty tzn. jeśli mamy np. ciąg od 0 do 5 i szukamy takich liczb, które dzielą się np. przez 3 i przez 5 bez reszty, to kolejno otrzymujemy: dla 0 łańcuch FIZZBUZZ, dla 1 pusty łańcuch, dla 2 pusty łańcuch, dla 3 otrzymujemy FIZZ, dla 4 mamy pusty łańcuch i dla 5 mamy BUZZ.

Najprościej możemy to rozwiązać w następujący sposób:

def fizzbuzz(start, end, fizz, buzz):
    """ Sample fizzbuzz game"""
    for number in range(start, end + 1):
        if not number % fizz and not number % buzz:
            print(number, 'FIZZBUZZ')
            continue
        elif not number % fizz:
            print(number, 'FIZZ')
            continue
        elif not number % buzz:
            print(number, 'BUZZ')
            continue
        print(number)

Moje rozwiązanie zadania za pomocą dekoratorów wygląda następująco:

def fizz(fizz_number):
    def decor(func):
        def wrapper(*args):
            dict = func(*args)
            for key in dict:
                if not (key % fizz_number):
                    dict[key] += 'FIZZ'
            return dict
        return wrapper
    return decor

Analogicznie funkcja buzz() wygląda następująco:

def buzz(buzz_number):
    def decor(func):
        def wrapper(*args):
            dict = func(*args)
            for key in dict:
                if not (key % buzz_number):
                    dict[key] += 'BUZZ'
            return dict
        return wrapper
    return decor

Utworzę jeszcze funkcję numbers(), która będzie zwracała słownik o kluczach będących liczbami o zakresie podanym jako argumenty tzn.

def numbers(start, end):
    dict = {}
    for number in range(start, end + 1):
        dict[number] = ''
    return dict

Powyższą funkcję możemy zmodyfikować za pomocą utworzonych wcześniej dekoratorów z parametrami tzn.

@buzz(5)
@fizz(3)
def numbers(start, end):
    dict = {}
    for number in range(start, end + 1):
        dict[number] = ''
    return dict

Zmodyfikowany słownik możemy wyświetlić za pomocą wywołania zmodyfikowanej poprzez użycie dekoratorów funkcji numbers() tzn.

print(numbers(0, 15))

Można zauważyć, że obie funkcje dekoratora są bardzo podobne, więc aby uniknąć redundancji kodu możemy obie funkcje zastąpić jedną:

def fizzbuzz(number, message):
    def decor(func):
        def wrapper(*args):
            dict = func(*args)
            for key in dict:
                if not (key % number):
                    dict[key] += message
            return dict
        return wrapper
    return decor

Definicja funkcji numbers() po dodaniu dekoratora będzie wyglądać następująco:

@fizzbuzz(5, 'BUZZ')
@fizzbuzz(3, 'FIZZ')
def numbers(start, end):
    dict = {}
    for number in range(start, end + 1):
        dict[number] = ''
    return dict

Django #3

We wcześniejszych wpisach opisałem zarządzanie użytkownikami w >>aplikacji<< tzn. nowy użytkownik może się zarejestrować – utworzyć konto w witrynie, użytkownik zarejestrowany może się zalogować, wylogować lub zmienić swoje hasło.

Następnie opiszę główną funkcjonalność witryny tzn. ewidencję aut i napraw. W tym celu w pliku urls.py projektu załączę mapowanie adresów związanych z aplikacją cars. Po zmianach plik urls.py projektu będzie wyglądał następująco:

from django.contrib import admin
from django.urls import path, include
from users import views as users_views
from django.contrib.auth import views as auth_views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('cars.urls')),
    path('register-user/', users_views.RegisterUser.as_view(
        template_name='users/register-user.html'), name='register_user'),
    path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name='logout'),
    path('change-password/', users_views.ChangePassword.as_view(
        template_name='users/change-password.html'), name='change_password'),
]

Można zauważyć, że mapowanie adresów na odpowiednie widoki uwzględnia też plik urls.py utworzony w aplikacji cars. Plik urls.py z aplikacji cars wyglada następująco:

from django.urls import path
from .views import (
    CarsListView,
    AddCarView,
    RepairsListView,
    UpdateCarView,
    DeleteCarView,
    AddRepairView
)
urlpatterns = [
    path('', CarsListView.as_view(), name='cars'),
    path('add-car/', AddCarView.as_view(), name='add_car'),
    path('car/', RepairsListView.as_view(), name='car_detail'),
    path('car/<int:pk>/update/', UpdateCarView.as_view(), name='update_car'),
    path('car/<int:pk>/delete/', DeleteCarView.as_view(), name='delete_car'),
    path('car/<int:pk>/new-repair/', AddRepairView.as_view(), name='add_repair'),
]

Główny widok definiowany w klasie CarListView wyświetla wszystkie auta użytkownika.

Należy pamiętać o dopisaniu aplikacji w pliku settings.py projektu w liście INSTALLED_APPS np. dla aplikacji cars będzie to element: ‘cars.apps.CarsConfig’.

W aplikacji users korzystałem z preinstalowanego modelu użytkownika. W aplikacji cars należy stworzyć modele – obiekty mapujące tabele bazy danych. Modele te będą definiować: pojazd – model Car i naprawę – model Repair. Kod pliku models.py aplikacji cars wygląda następująco:

from django.db import models
from django.contrib.auth.models import User
from django.utils import timezone
from django.core.validators import MaxValueValidator, MinValueValidator


class Car(models.Model):
    make = models.CharField(max_length=10)
    model = models.CharField(max_length=10)
    vrn = models.CharField(max_length=10)
    year = models.IntegerField(default=timezone.now().year,
                               validators=[MinValueValidator(timezone.now().year - 100),
                                           MaxValueValidator(timezone.now().year)])
    user = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
        return f'{self.make} {self.model}'


class Repair(models.Model):
    date = models.DateField(default=timezone.now)
    description = models.TextField()
    car = models.ForeignKey(Car, on_delete=models.CASCADE)

    def __str__(self):
        lead = self.description[:10] + '...'
        return lead

Model Car zawiera atrybuty make, model, vrn, year i user opisujące markę pojazdu, model, nr rejestracyjny pojazdu i rok produkcji, a także klucz obcy, zawierający obiekt użytkownika, który utworzył wpis o pojeździe. Pole year posiada walidatory, uniemożliwiające wpisanie auta o roku produkcji o 100 lat starszym od bieżącej daty i nowszym niż bieżący rok. Opcja on_delete atrybutu user ma wartość domyślną CASCADE tzn. usunięcie użytkownika, który wprowadzić powoduje także usunięcie wszystkich wprowadzonych przez niego aut.

Model Repair zawiera atrybuty date – data naprawy, description – szczegóły naprawy oraz car, będący kluczem obcym – jakiego auta dotyczy dana naprawa. Metoda __str__() wyświetla nagłówek będący początkiem opisu naprawy (10 początkowych znaków).

Aby móc dokonywać edycji wpisów obu modeli z poziomu panelu administracyjnego trzeba dopisać oba modele do pliku admin.py aplikacji cars tzn.

from django.contrib import admin
from .models import Car, Repair

admin.site.register(Car)
admin.site.register(Repair)

W następnej części opiszę widoki definiujące poszczególne funkcjonalności tzn. wyświetlanie aut należących do użytkownika, dodawanie napraw, a także wyszukiwanie aut za pomocą pola wyszukiwania na stronie.

— c. d. n. —

car search
car search

Django #2

Widoki logowania i wylogowania są predefiniowane jako klasy LoginView i LogoutView więc wystarczy tylko umieścić odpowiednie wpisy w pliku urls.py (jak opisałem w części 1) i utworzyć pliki szablonów tzn.

Listing szablonu login.html:

{% extends 'cars/base.html' %}
{% load crispy_forms_tags %}


{% block content %}
  <div class="row justify-content-center">
    <div class="col-4">
      <form method="POST" class="form-control-sm">
       {% csrf_token %}
       <fieldset class="form-group">
         <legend class="border-bottom text-primary">
            Log In
          </legend>
          {{ form|crispy }}
        </fieldset>
        <button class="btn btn-secondary" type="submit">Login</button>
        <p class="text-muted text-small mt-5 ml-2">Need an Account? <a href="{% url 'register_user' %}">Sign up</a></p>
        </form>
      </div>
    </div>
{% endblock %}
Szablon login.html

Listing szablonu logout.html:

{% extends 'cars/base.html' %}

{% block content %}
 <div class="row justify-content-center mb-5">
    <div class="col-4">
	   <h4 class="border-bottom text-primary mt-2">You're logged out now</h4>	
  <div class="text-muted text-small ml-2 mt-5">Back to: <a href="{% url 'login' %}">login page</a></div>
  </div>
 </div>
{% endblock %}
Szablon logout.html

Pozostało jeszcze utworzenie widoku odpowiedzialnego za zmianę hasła. Klasa widoku będzie dziedziczyć po klasie CreateView jak również po klasie LoginRequiredMixin. Klasa LoginRequiredMixin dodaje funkcjonalność polegającą na tym, że zmiany hasła może dokonać tylko zalogowany użytkownik.

Kod klasy widoku ChangePassword():

class ChangePassword(LoginRequiredMixin, CreateView):
    form_class = PasswordChangeForm

    def get(self, request, *args, **kwargs):
        form = PasswordChangeForm(request.user)
        return render(request, 'users/change-password.html', {'form': form})

    def post(self, request, *args, **kwargs):
        form = PasswordChangeForm(request.user, request.POST)
        if form.is_valid():
            user = form.save()
            update_session_auth_hash(request, user)
            messages.success(request, 'Password changed!')
            return redirect('cars')
        return render(request, 'users/change-password.html', {'form': form})

W powyższej klasie przesłaniam metody get() i post(). Gdy strona jest wyświetlana za pomocą metody get() to wyświetlany jest pusty formularz zmiany hasła dla zalogowanego użytkownika. Gdy strona jest wyświetlana za pomocą metody post(), to dokonywana jest walidacja przesłanych danych i jeśli są one poprawne następuje zapisanie zmienionego hasła, wyświetlenie komunikatu o zmianie hasła i przekierowanie na stronę o nazwie cars.

Pozostaje dodać plik szablonu tzn. change-password.html:

{% extends 'cars/base.html' %}
{% load crispy_forms_tags %}


{% block content %}
  <div class="row justify-content-center">
   <div class="col-4">
	  <form method="POST" class="form-control-sm">
      {% csrf_token %}
      <fieldset class="form-group">
        <legend class="border-bottom text-primary">
            New Password Settings
        </legend>
        {{ form|crispy }}
      </fieldset>
      <button class="btn btn-secondary" type="submit">Save</button>
    </form>
   </div>
  </div>
{% endblock %}
Szablon change-password.html

>>część 3<<

Django #1

We >>wstępie<< opisałem główne założenia projektu.

Poniżej zamieszczam listing wymaganych pakietów do projektu (wygenerowany przez pip freeze):

asgiref==3.2.5
Django==3.0.4
django-crispy-forms==1.9.0
pytz==2019.3
sqlparse==0.3.1

Polecam utworzyć osobne środowisko wirtualne dla projektu (jak stworzyć wirtualne środowisko opisałem >>tutaj<<).

Wszystkie pakiety oprócz django-crispy-forms instalowane są podczas instalacji pakietu django.

W katalogu zawierającym również podkatalog venv tworzymy projekt za pomocą komendy: django-admin startproject nazwa_projektu

Startproject tworzy główny katalog projektu oraz plik manage.py, dzięki któremu można będzie zarządzać projektem.

Następnie można utworzyć administratora projektu, czyli użytkownika o maksymalnych uprawnieniach administracyjnych, dzięki czemu będzie można używać webowego panelu administracyjnego. Jednak najpierw należy przeprowadzić migracje: python manage.py migrate dzięki czemu zostają utworzone odpowiednie tabele w bazie danych np. admin, auth itd. Po przeprowadzonej migracji można utworzyć konto administracyjne za pomocą komendy: python manage.py createsuperuser

Katalog projektu zawiera następujące pliki i katalogi:
├── nazwa_projektu
│   ├── asgi.py
│   ├── init.py
│   ├── pycache
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── db.sqlite3
└── manage.py

Domyślnie dane umieszczane zostają w bazie sqlite3 (standardowo plik db.sqlite3), co jest dobrym rozwiązaniem podczas tworzenia projektu, a finalnie można użyć innej bazy (Django zawiera wsparcie dla PostgreSQL, MySQL i wielu innych). Zmiana domyślnej bazy wymaga tylko modyfikacji danych z sekcji DATABASES pliku settings.py projektu.

Aby odseparować poszczególne elementy składowe projektu wydzieliłem dwie części składowe tzn. odpowiedzialną za zarządzanie użytkownikami – users oraz za zarządzanie pojazdami – cars. W Django są to tzw. aplikacje. Aby je utworzyć należy wpisać: python manage.py startapp users oraz python manage.py startapp cars

Zacznę od aplikacji users, w której nowi użytkownicy będą mogli tworzyć konta, oraz logować się, wylogowywać, a także zmieniać swoje hasło dostępowe.

Aby określić mapowanie adresów URL na konkretne klasy widoków modyfikuję plik urls.py projektu tzn.

from django.contrib import admin
from django.urls import path
from users import views as users_views
from django.contrib.auth import views as auth_views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('register-user/', users_views.RegisterUser.as_view(
        template_name='users/register-user.html'), name='register_user'),
    path('login/', auth_views.LoginView.as_view(template_name='users/login.html'), name='login'),
    path('logout/', auth_views.LogoutView.as_view(template_name='users/logout.html'), name='logout'),
    path('change-password/', users_views.ChangePassword.as_view(
        template_name='users/change-password.html'), name='change_password'),
]

Przykładowo po wpisaniu adresu kończącego się na: register-user/ zostaje wywołana klasa RegisterUser() z pliku views.py oraz do tego przypisania zostaje nadana nazwa, której będziemy mogli używać w szablonach. Aby klasa mogła być użyta jako widok, należy wywołać jej metodę as_view(). Jako argument podałem argument template_name, w którym podaję nazwę szablonu, który wyświetla podaną stronę. Równie dobrze można by podać ten argument jako atrybut klasy w widoku, ale aby zachować spójność z pozostałymi widokami umieściłem go w tym miejscu.

kod klasy RegisterUser() z pliku views.py aplikacji users wygląda następująco (na początku umieściłem wymagane importy)

from django.shortcuts import render, redirect
from django.contrib.auth.forms import UserCreationForm, PasswordChangeForm
from django.contrib.auth import login, authenticate
from django.views.generic import CreateView
from django.contrib import messages

class RegisterUser(CreateView):
    form_class = UserCreationForm

    def get(self, request, *args, **kwargs):
        return render(request, 'users/register-user.html', {'form': UserCreationForm()})

    def post(self, request, *args, **kwargs):
        form = UserCreationForm(request.POST)
        if form.is_valid():
            form.save()
            username = form.cleaned_data.get('username')
            password = form.cleaned_data.get('password1')
            user = authenticate(username=username, password=password)
            login(request, user)
            messages.success(request, f'Welcome, {username}!')
            return redirect('cars')
        return render(request, 'users/register-user.html', {'form': form})

Klasa RegisterUser() dziedziczy po klasie CreateView, a formularz jest definiowany przez klasę UserCreationForm. Gdy strona zostaje wyświetlona za pomocą metody GET to pojawia się pusty formularz, gdy natomiast podane są już jakieś dane w formularzu, to są one przekazane za pomocą metody POST. Aby obsłużyć GET i POST przesłaniam odpowiednio metody get() i post() klasy RegisterUser(). W metodzie post() sprawdzana jest poprawność formularza i jeśli formularz jest poprawny to następuje zapisanie danych z formularza tzn. utworzenie użytkownika za pomocą metody save(). Domyślnie jest to użytkownik pozbawiony przywilejów administracyjnych. Zostaje on zalogowany przy użyciu podanych przy rejestracji danych. Nowa wiadomość z tagiem Success zostanie wyświetlona po przekierowaniu na adres o nazwie cars. Wiadomość wyświetla się tylko jednokrotnie na stronie.

Pozostaje jeszcze utworzyć szablon register-user.html dla RegisterUser(). W tym celu tworzę katalog szablonów w aplikacji users zgodnie z konwencją – w katalogu templates należy utworzyć kolejny katalog z nazwą zgodną z nazwą aplikacji tzn.

nazwa_projektu/users/templates/users/register-user.html

Kod pliku register-user.html jest częścią większej całości, a ściślej nie utworzonego na razie pliku base.html z aplikacji cars. Aplikacje mogą korzystać ze swoich szablonów, a dzięki temu wygląd zdefiniowany w aplikacji cars w szablonie base.html jest zachowany w szablonie register-user. W szablonie jest też włączone korzystanie z tagów crispy_forms, dzięki którym formularz wygląda lepiej. Każdy formularz musi zawierać csrf_token, dzięki czemu strona jest automatycznie odporna na pewne formy ataków (szczegóły >>tutaj<<).

Listing pliku register-user.html wygląda następująco:

{% extends 'cars/base.html' %}
{% load crispy_forms_tags %}

{% block content %}
  <div class="row justify-content-center">
    <div class="col-4">
      <form method="POST" class="form-control-sm">
        {% csrf_token %}
        <fieldset class="form-group">
          <legend class="border-bottom text-primary">
            Registration
          </legend>
            {{ form|crispy }}
        </fieldset>
          <button class="btn btn-secondary" type="submit">Register</button>
      </form>
    </div>
  </div>
{% endblock %}
Szablon register-user.html

>>część 2<<

Django – framework webowy

W tej serii opiszę podstawy frameworka Django na przykładzie aplikacji do notowania napraw związanych z posiadanymi autami.

Możesz utworzyć własne konto i zalogować się tutaj.

Kod projektu jest do pobrania tutaj.

Aplikacja jest podobna do tej opisanej we  >>wpisie<<, ale zastosowanie frameworku webowego wymusiło dodatkowe funkcjonalności, np. obsługę kont użytkowników.

>>część 1<<