HTTP i API: Wysyłanie danych z formularza

0:02Cześć! Witaj w kolejnej lekcji.

0:03W poprzedniej wysyłaliśmy zapytanie z formularza na StackOverflow, ale to

0:08zapytanie było wysyłane GET, ponieważ zwracało dla nas wyniki wyszukiwania.

0:12Najczęściej jednak takie wysyłanie danych z formularza np.

0:16jeżeli korzystamy z formularza kontaktowego na stronie, która ma wysłać

0:20do nas email będzie wysyłane do serwera postem, no bo powinno coś na tym serwerze się

0:25wydarzyć, jakoś serwer powinien te dane przetworzyć i np.

0:29wysłać maila albo przykładowo złożyć zamówienie.

0:32Jeśli wejdziesz na httpbin.org tutaj na dole znajduje się coś takiego jak HTMLform

0:36i spróbujmy teraz przejść do narzędzi inspekcji, żeby od razu w zakładce Network

0:41zobaczyć jak wygląda zapytanie, które zaraz wyślemy,

0:45a to co będziemy robić, to zamawiać pizzę.

0:47Więc jeśli jeszcze nie zgodnieliście albo

0:48nie jedliście lunchu, to wpisuję tutaj nazwę klienta,

0:52numer telefonu, adres email, możemy go zamarkować

0:57i teraz jaką chcemy pizzę zamówić?

0:58Średnią,

1:00weźmy taką z bekonem i jeszcze z cebulą

1:02a następnie wpiszmy tutaj czas dostawy np.

1:06na godzinę piętnastą i możemy jakieś dać

1:09dodatkowe info, dodatkowe instrukcje o dostarczeniu.

1:12Teraz jeżeli jak kliknę Submit order powinno pójść zapytanie do serwera,

1:16natomiast zanim to zrobię jeszcze kliknę

1:18sobie prawym przyciskiem i zobaczę z pomocą funkcji inspekcji jak to jest

1:22skonstruowane w HTML. Tak jakbyśmy się spodziewali

1:25mamy różne akapity, mamy button,

1:27jeżeli button nie ma żadnych dodatkowych atrybutów, tutaj będzie on automatycznie

1:31wysyłał to, co znajduje się w całym formularzu.

1:33Zobacz, że cały ten znacznik form obejmuje cały formularz i wszystkie jego pola, wszystkie input,

1:39no i jego metodą jest metoda POST, czyli będziemy wysyłać dane do serwera po to,

1:43żeby gdzieś tam je sobie pewnie zapisał czy stworzył nowego użytkownika, czy w tym

1:47przypadku nowe zamówienie i akcją, czyli URI, na który będziemy wysyłać jest post.

1:52Już wszystko rozumiesz

1:53w związku z tym możemy kliknąć teraz Submit.

1:56Przenieśmy się jednak wcześniej do

1:57zakładki Network, żebyśmy zobaczyli co tutaj się dzieje.

2:00No i został wysłany ten nasz post.

2:02Zobacz, że w odpowiedzi z serwera dostaliśmy

2:05ok, przyjąłem, wszystko jest w porządku,

2:08natomiast dodatkowa odpowiedź, którą dostaliśmy od serwera to

2:12poza tymi nagłówkami, które tutaj mamy,

2:15sama treść odpowiedzi to wszystkie te dane, które do niego przesłaliśmy.

2:19Odpowiedzią, które możemy dostawać od serwera wysyłając takie zapytanie, na

2:22przykład zamówienie albo powiedzmy rejestrując klienta w serwisie mogą być

2:26różne. Od prostego OK, czyli dwóch liter do tak naprawdę skonstruowania odpowiedzi

2:32dla nas w taki sposób, że hej, przyjąłem zamówienie dla tego i tego klienta na tą i

2:37na tą godzinę, taka i taka pizza, czyli w sumie lepiej, no bo

2:41my widzimy w tej odpowiedzi i jesteśmy pewni, że dane, które przekazaliśmy

2:45zostały przekazane prawidłowo. I tak tutaj nam serwer odpowiedział.

2:48Jeśli chodzi o httpbin to dodatkowo nawet

2:50w samej treści strony nam wyświetli całą tą odpowiedź,

2:54no ale tak naprawdę normalnie jakbyśmy zamawiali pizzę na stronie pizzerii dostalibyśmy po

2:58prostu tutaj ładny komunikat Twoje zamówienie zostało złożone.

3:02No i co się dzieje z tym dalej?

3:03Ale konkretnie co my tutaj mamy?

3:05Zobacz, że argumentów nie mamy.

3:08Mamy za to, nie mamy też takiej sekcji data, ale mamy przekazany

3:13przez serwer cały taki schemat danych, który obejmuje

3:19informacje z naszego formularza, czyli Customer email, customer length itd.

3:22Te dane dotarły w takiej formie do serwera

3:25i np. w serwerze mogą być teraz zapisane powiedzmy w bazie danych MySQL,

3:31czyli zostały zapisane mój adres email, moje imię i nazwisko

3:34i teraz jeżeli np. dostawca pizzy ma jakąś

3:36aplikację mobilną, która pokazuje mu wyświetla te dane, no to jeśli one są

3:40zapisane na serwerze z tej bazy danych ta kolejna aplikacja może teraz to sobie

3:43wyciągnąć i wie taki dostawca gdzie mi tą pizzę dostarczyć.

3:48Czyli nie mogłoby to polegać na tej komunikacji takiej jednokierunkowej GET.

3:53Tutaj musimy zapisać jakieś dane na

3:54serwerze i powiedzmy ten dostawca w swojej aplikacji musi je zobaczyć.

3:58To jaki format tutaj jest nam przekazywany to format JSON.

4:02Możemy to zobaczyć też w nagłówku.

4:04Zobaczmy na nagłówek.

4:06I tutaj mamy coś takiego jak application/json.

4:08Ten JSON

4:10jest formatowany u mnie akurat w przeglądarce, ale to tylko dlatego,

4:14że mam zainstalowany taki dodatek, który się nazywa JSON Viewer.

4:18Polecam Ci go sobie zainstalować.

4:20Gdyby tego nie było po prostu dostalibyśmy taki kod niesformatowany

4:25i ponieważ JSON to nie jest coś, co przeglądarka interpretuje tak jak HTML,

4:29gdybyśmy tu dostali HTMLa, no to dostajemy to w takiej, a nie innej formie.

4:33Jeśli chodzi o JSON, jest to bardzo ważny format, ponieważ jest to podstawowy

4:37w zasadzie model tworzenia danych, przesyłania ich właśnie

4:41do serwera jako zapytania czy zwracania i w związku z tym warto go znać.

4:46Ja jestem na stronie Object Generator

4:48JSON i tutaj możemy wygenerować sobie taki model.

4:51Czyli gdybyśmy chcieli sami wysłać takie

4:53zapytanie powiedzmy z konsoli, tak jak to robiliśmy wcześniej,

4:57to możemy w jego treści przygotować sobie taki model danych do wysłania,

5:00czyli np. będzie to

5:01pizza, którą ktoś zamawia i wpisujemy np.

5:04hawajska.

5:07Następnie składniki.

5:10I teraz właśnie jeśli mielibyśmy takie proste zapytanie, czyli klucz wartość, to

5:14tak naprawdę ono do serwera mogłoby zostać przekazane po prostu w takiej formie query

5:19stringu, pizza hawajska i już też serwer dostałby te dane,

5:22natomiast my możemy w JSON

5:25przekazać te dane trochę lepiej ustrukturyzowane i trochę ich więcej.

5:28Czyli np. gdybyśmy chcieli przekazać składniki, to

5:30nie robilibyśmy tego w taki łopatologiczny sposób.

5:33Składnik 1 równa się pieczarki, składnik 2 równa się cebula

5:37tylko zrobilibyśmy sobie składniki

5:39jako tablicę, a następnie przekazali do jej cebula i pieczarki.

5:47I zobacz, że to, jak formatuje nam się

5:48teraz ładnie JSON, to mamy taką tablicę.

5:51Mamy składniki i w nawiasie kwadratowym

5:54mamy cebula i pieczarki i wtedy już serwer może sobie to ładniej

5:58zinterpretować, lepiej odebrać, wstawić do odpowiednich tabelek itd.

6:01To co możemy jeszcze tutaj zrobić to np.

6:03przekazać obiekt.

6:05Jeśli mamy tutaj klienta,

6:07który składa zamówienie to możemy powiedzieć, że klient ma imię Grzegorz,

6:14nazwisko Róg i numer telefonu itd itd i zobaczysz, że

6:19też jest to sformatowane w trochę inny sposób

6:21w JSON.

6:22Mamy podobnie jak tablica, ale tym razem jest to obiekt więc są nawiasy klamrowe

6:25i znów pary klucz wartość, imię nazwisko

6:28i wtedy serwer może bardzo łatwo te

6:30informacje wszystkie ładnie poukładane zinterpretować

6:33a to, co ja zrobiłem tutaj definiując sobie

6:35ten model to tak naprawdę tylko zrobiłem to po to, żeby JSON mi się sam stworzył.

6:40W nim jest sporo nawiasów klamrowych, sporo przecinków, dwukropkó,

6:43ta składnia musi zostać zachowana

6:45w związku z tym czasem łatwo się tutaj pomylić.

6:48Lepiej czasem na początku korzystać sobie z takiego generatora.

6:51No i gdybyśmy wysyłali zapytanie

6:55przez terminal, moglibyśmy wysłać je postem właśnie na ten adres,

6:59a następnie w treści zapytania przekazać ten kawałek JSON, który stworzyłem i

7:04zamówienie zostałoby złożone na identycznej zasadzie.

7:07Tak, w związku z tym to działa.

7:09Jeśli chodzi o popularne formaty danych, które tutaj wykorzystujemy, jest to JSON,

7:13taki najbardziej nowoczesny

7:15format, ta składnia do prezentowania danych z napisami klamrowymi,

7:19ale mamy także często korzysta się teraz już trochę mniej, ale

7:23kiedyś korzystało się często z XML, którego pokazywałem Ci też wcześniej.

7:28Był to po prostu trochę inny zapis z pomocą tych nawiasów ostrych,

7:31ale generalnie proponuję Ci już skoncentrować się na tej JSON.

7:34Jeśli będziesz w ten sposób tworzył, przesyłał dane czy formatował je,

7:39no i wiesz już jak działa ta komunikacja

7:42przynajmniej z formularza, który wysyła się do naszego serwera.

7:46Teraz te dane na serwerze mogą zostać w pewien sposób zinterpretowane

7:49a o tym porozmawiamy sobie już w kolejnych lekcjach.

7:52Do usłyszenia.