Python: Tworzenie widoków we Flasku - silnik szablonów Jinja

0:00Udało nam się za pomocą postman przekazać login

0:05i hasło do naszej aplikacji za pomocą metody post teraz

0:09zajmiemy się tym w jaki sposób stworzyć podobną funkcjonalność w naszej

0:13aplikacji aby to zrobić musimy zaznajomić się z czymś

0:17co nazywa się silnikiem szablonów flask ma zaimplementowany

0:21silnik o nazwie jinja który pozwoli nam na wygenerowanie ładnego

0:26szablonu html który zostanie wyświetlony użytkownikowi zacznijmy

0:31od stworzenia folderu templates i

0:41w nim umieścimy plik dotyczący

0:45szablonu naszego formularza pamiętajmy o

0:49rozszerzeniu html teraz

0:53należy utworzyć plik html najprostszy jak tylko się da zawierający

0:58formularz który będzie odpowiednikiem naszych danych przekazywanych

1:04przez aplikację postman mamy

1:09tutaj dwie labelki username i password w username

1:13będziemy przechowywać login użytkownika a za pomocą sekcji

1:17password będziemy w stanie przekazać hasło które

1:21będziemy walidować w naszym route'cie to

1:26co należy tutaj dodać to tak zwany name name

1:30będzie określało jaka jest nazwa konkretnej komórki która

1:35zostanie przekazana do naszego route'a w przypadku username wpiszmy

1:40username i jeżeli chodzi o password standardowo

1:45password o czym warto pamiętać że samo id nie

1:50wystarczy i jest brane pod uwagę jedynie podczas przetwarzania css

1:54ci z was którzy mają już doświadczenie w technologiach frontendowych

1:58na pewno znającą tą różnicę przejdźmy do naszego

2:02piku main w którym będziemy tworzyć kontroler odpowiedzialny

2:07za wyświetlenie naszego formularza tworzymy

2:12nowych route i

2:18tutaj skorzystamy z funkcji która nazywa się render template

2:22dzięki niej będziemy mogli wskazać jaki dokument

2:27html chcemy wyrenderować użytkownikowi co ma się pokazać

2:31na stronie www korzystamy

2:36sobie teraz z niego podajemy

2:43w argumencie nazwę naszego pliku czyli layout form

2:50kropka html i to wszystko sprawdźmy

2:54czy nasza aplikacja wyświetla poprawnie nasz dokument html

3:02mamy username

3:07i password oraz przycisk submit do wysyłania naszych

3:12zapytań jeżeli

3:17chcielibyśmy przekazać jakiekolwiek informacje do naszego layoutu z

3:22metody login form możemy to zrobić za pomocą dodania

3:26tutaj kolejnych argumentów przyjmijmy

3:34że chcemy przekazać domyślne wartości dla username do

3:39naszego widoku kiedy

3:49zapiszemy plik nic jeszcze się nie wyświetliło na naszym ekranie musimy

3:53zmodyfikować plik layout form po to aby

3:58w sekcji value uzyskać

4:02tą informację która zostaje przekazana z naszego route'a w

4:06jinja używamy podwójnego nawiasu klamrowego

4:11żeby powiedzieć że będziemy korzystać z elementów

4:15wygenerowanych lub przekazanych z route'a i

4:19podajemy nazwę własną parametru który przekazujemy po zapisaniu

4:30możemy zobaczyć że w naszej komórce username pojawiło

4:34się pojawiła się przekazywana wartość okej

4:40kiedy klikniemy na nasz submit niestety nic

4:44się jeszcze nie dzieje dlatego też musimy podpiąć akcję

4:49do naszego formularza która będzie wskazywała na route odnośnie

4:54logowania przejdźmy do naszego pliku layout

4:58form i w sekcji action wykorzystajmy

5:07konstrukcję url for

5:12jako argument ta funkcja powinna

5:16przyjąć nazwę metody którą chcemy wywołać

5:20w naszym przypadku będzie to login okej sprawdźmy niestety

5:31zapomnieliśmy o jednym elemencie chodzi o to że przekazywaliśmy

5:35wartość za pomocą geta domyślne w formularzach html przekazywanie

5:40wartości odbywa się za pomocą metody get my będziemy chcieli

5:45sprecyzować że dane mają zostać przesłane za pomocą posta

5:53pamiętajmy o tym żeby odświeżyć

5:57stronę okej

6:02zobaczmy co się stało mamy błąd

6:06nie znaleziono klucza czy widzisz jaki

6:10jest problem zamiast klucza o nazwie name

6:15przekazaliśmy tutaj klucz o nazwie username

6:19dlatego też powinniśmy być konsekwentni i trzymać

6:24się nazw sprawdźmy jeszcze raz odświeżmy

6:31stronę pamiętajmy że jeżeli chodzi o formularze warto odświeżać stronę ponieważ

6:35mogą one zapisywać dane które już wcześniej nie stanowią

6:39cache przeglądarki okej

6:45wprowadziliśmy dane jednak są one nieprawidłowe więc dostaliśmy informację

6:49o niepowodzeniu podajmy prawidłowe

6:53hasło i dostajemy informację success że udało nam się zalogować

6:57do naszej strony internetowej