Laravel: Tworzenie głównego layoutu

5.8.x

0:00Nasza strona nabrała już kolory tu dlatego że ładnie się wyświetla.

0:04Nie mniej jednak cały jest to jeden statyczny plik który jest tutaj serwowany

0:08dlatego będę chciał ci pokazać jak możemy podzielić ten plik na

0:13kilka różnych plików i czym jest layout. Na razie wpakowaliśmy

0:17to wszystko pliku index blade php, natomiast mówiłem ci że w

0:21ogóle w katalogu resources tak naprawdę to ty rządzisz. Robisz co chcesz więc

0:25tutaj mamy pełną dowolność w tym katalogu view views jak

0:29chcemy nazywać nasze pliki, jaką tutaj stworzymy strukturę katalogów, więc

0:33ja pokażę ci taką z jaką ja lubię pracować. Nie mniej jednak pamiętaj że możesz ją zrobić

0:37dowolnie. Ja robię tak główny plik nazywam master

0:42czyli będę chciał zrobić rename na tym pliku i będę

0:46chciał zmienić jego nazwę na master blade php. Czy

0:50to jest pierwsza zmiana, natomiast umieszczę go również katalogu layout czyli stworzymy sobie

0:54tutaj nowy folder, nazwę go layouts i ten

0:59plik master będę chciał po prostu przenieść okej

1:03czyli taką będziemy mieli strukturę teraz layout to będzie dla nas coś

1:07co jest jakby takim shell'em, taką skorupą, nie wiem jak to

1:11dokładnie określić, ale całej naszej aplikacji czyli tym co ma head tutaj. Tym

1:16co ma footer i tak dalej. Chociaż można jeszcze footer header podzielić na osobne pliki, ale

1:21nie będzie to nas konieczne, więc layout jest taki główny layout

1:25naszej strony do którego będą można powiedzieć wstrzykiwane poszczególne sekcje

1:29i layout'ów możesz mieć wiele dlatego że możemy mieć na przykład zaplecze administracyjne

1:33i tutaj utworzyć zupełnie inny wygląd, inny layout dla tego zaplecza. My będziemy

1:37mieć tylko jeden i umieściłem go jak widzisz katalogu layouts i teraz

1:42oczywiście nasza strona się zepsuje, bo nie mamy już pliku index

1:46który web php serwowaliśmy. Natomiast co będę teraz chciał zrobić, zobacz, w

1:52layout'cie chodzi o to żeby rzeczy które są wspólne dla wszystkich podstron

1:56zostawić, a to co będzie się zmieniać po prostu powyciągać do osobnych plików, więc u nas wspólne

2:01na pewno będzie to menu, cały ten header i chociaż można go jeszcze do takiego partial'a

2:05czyli do osobnego pliku w wyekstrahować i zrobić tutaj include

2:09to nie będziemy tego robić bo nie ma tutaj wiele kodu html żeby nam

2:13to przeszkadzało. Natomiast jeżeli przejdziemy sobie tutaj do sekcji main

2:17content to to jest właśnie to co będzie się na przestrzeni różnych

2:21podstron zmieniać, dlatego będę chciał wszystko co tutaj jest wyciąć i w

2:26tym miejscu wstawić taką dyrektywę jak yield i napiszemy

2:31tutaj content. Okej, nie stawiamy

2:35tutaj na końcu średnika, bo jeżeli zrobimy to on pojawi na stronie. Jak widzisz mam

2:39tutaj ładne kolorowanie tej składni blade, właśnie przez dodatki o których mówiłem wcześniej do VS Code, ale

2:45co jest istotne to w blade czyli właśnie w tych widokach, mamy

2:49dyrektywy, które właśnie zaczynają się od małpki oraz

2:53będziemy mieli wyrażenia które będziemy za moment również w inny sposób zapisywać

2:58i teraz jeżeli chciałbyś się więcej dowiedzieć na temat samego blade to znajdziesz tutaj

3:02wszystko w tej dokumentacji i jest to ogólnie bardzo proste. Ja ci tym

3:06kursie wiele z tych rzeczy pokażę ale jeżeli chcesz to poczytaj również o tym tutaj i

3:10jeżeli tutaj zrobiliśmy yield content to znaczy że to miejsce będzie

3:14wstawiana sekcja nazwie content z poszczególnych szablonów.

3:18Czyli mamy główny layout i teraz ja będę chciał w views utworzyć sobie nowy plik

3:22w katalogu pages i nazwiemy go posts blade

3:26php. Znowu tutaj jest dowolność. Możesz ten katalog nazwać jak chcesz. Ja

3:31ten plik będę chciał zapisać ale uprzednio wklejając do niego wszystko to co wycięliśmy

3:35wcześniej, okej chyba jest to dobrze sformatowane, tak

3:41i powinno nam się to tutaj pojawić odświeżmy jeszcze ten widok, jak

3:45widzisz pages post tutaj się znalazło i teraz

3:49musimy zrobić jedną ważną rzecz. Otóż na samej górze zrobimy coś takiego,

3:53użyjemy dyrektywy extends i napiszemy

3:58tutaj layouts master. Co

4:02to oznacza? Oznacza to że kiedy skierujemy nasz routing na wyświetlanie

4:06widoku posts to oznacza że on chce rozszerzać layouts

4:11master, a więc dokładnie odzwierciedlamy w katalogu view strukturę katalogów layouts

4:15i nazwa master. Tutaj również możesz skorzystać z ukośnika. Ja preferuję

4:20kropkę, jeżeli katalog layouts nazwiesz inaczej, tutaj musisz również to dostosować i

4:24to oznacza że ten layout będzie rozszerzał ten layout i

4:28co to dokładnie oznacza zobaczysz w tym momencie. Chcielibyśmy całość

4:33która tutaj się znajduje wstrzyknąć do głównego layout'u do sekcji content,

4:37czyli tutaj, żeby to zrobić musimy skorzystać z dyrektywy section

4:41i napisać tutaj content. Te nazwy oczywiście są dowolne, natomiast

4:46bardzo ważne jest to żeby taką sekcje domknąć za pomocą takiego zapisu and

4:50section, czyli sekcja się rozpoczyna i kończy wszystko co jest wewnątrz. Powinno

4:54zostać wstawione tutaj i teraz pozostało nam jedynie przejść

4:58do web i w miejscu w którym kierowaliśmy na widok index

5:02to skierujemy na widok pages post, zapisuje

5:07i możemy przejść do przeglądarki, odświeżyć naszą stronę i jak widzisz działa

5:12nam to poprawnie, posty nam się jak najbardziej wczytują, czyli zostały wstawione w to

5:16miejsce dokładnie gdzie chcieliśmy. Na koniec tej lekcji pokażę

5:20ci jeszcze jedną rzecz, otóż sekcja taka jak zdefiniowana tutaj nie musi zawierać

5:24w sobie jakiegoś kodu. Możemy zrobić sekcję w ten sposób, nazwiemy ją

5:29na przykład title i możemy jako drugi parametr pobrać tutaj od jakby zawartość

5:33tej sekcji więc ja będę chciał żeby tytuł tej podstrony to było posts i coś

5:38takiego tutaj zostawimy, to samo w sobie nie zmienia zupełnie nic. Natomiast jeżeli teraz

5:42przejdziemy do layout'u który rozszerzamy to możemy podobnie jak tutaj robiliśmy yield

5:46zrobić taki yield w miejscu gdzie mamy title czyli będziemy chcieli

5:50na każdej podstronie móc zmieniać sobie title. Nie chcę żeby on tutaj bo na sztywno

5:54zapisany jako posts ale żeby był on tutaj wstrzykiwany z poszczególnych

5:59szablonów, więc napiszemy tutaj yield title

6:03i co ważne to yield jako drugi parametr zawsze możemy podawać wartość

6:07domyślną, czyli jeżeli zdarzy się jakiś szablon który nie zdefiniuje takiej sekcji

6:12to chcemy tutaj wstawić jakąś wartość domyślną. Możemy tutaj pisać po prostu home. Zobaczmy

6:17czy nam to zadziała, odświeżam tutaj stronę i po pasku u góry widzimy

6:21że ten tytuł, jak najbardziej jest w tym miejscu.

6:25Okej, jeżeli go zmienimy tutaj czyli dodałbym

6:29jakiś wykrzyknik i tutaj odświeżę to również to się w miejscu zaktualizuje. Jak

6:33zatem widzisz w taki sposób możemy stworzyć sobie layout oraz podwidoki

6:37w których mamy już mniej kodu i będzie to kod do którego później jeszcze będziemy mogli z

6:41kontrolerów przekazywać odpowiednie dane i oczywiście to wszystko

6:46będzie działać dynamicznie.