Etykiety

sobota, 2 grudnia 2017

Laravel od Podstaw: kompozytor widoku

W poprzedniej części szkolenia p.t. Szablony widoków i style CSS nauczyliśmy się pracować ze złożonymi szablonami widoków. Zobaczyliśmy jak uprościć sobie pracę w przypadku widoków złożonych z wielu sekcji, takich jak menu nawigacyjne, boczna kolumna, stopka, zawartość główna. W tej części szkolenia zaprezentuję kolejną ważną ciekawostkę ułatwiającą pracę z widokami, a mowa będzie o Laravel View Composer, czyli o kompozytorze widoków.

Czym jest Laravel View Compser? Otóż wyobraźmy sobie że zawartość naszej szkoleniowej prawej kolumny widoku powinna być dynamiczna. Niech to będzie przykładowo lista najnowszych postów. Załóżmy, że taka lista powinna się wyświetlać w prawej kolumnie w każdym widoku witryny. Pamiętając część szkolenia dotyczącą sposobu przekazywania wartości zmiennych do widoków, teoretycznie moglibyśmy do każdego z widoków, który zawiera prawą boczną kolumnę, przekazać tego typu listę postów, uzyskaną za pomocą przygotowanej w tym celu metody naszej klasy Post. To by zadziałało, ale nie było by to najlepsze rozwiązanie zadania, ponieważ powielanie kodu nie należy do dobrych praktyk programistycznych. W rzeczywistości wyglądało by to paskudnie, gdyby w każdej z funkcji zwracającej widok mielibyśmy się powtarzać:
 public function index() {

   $posts = Post::all();

   $newest = Post::newest(5);

   return view('posts.index', compact('posts', 'newest'));

 }

public function create() {

    $newest = Post::newest(5);

    return view('posts.create', compact('newest'));

}

Na szczęście jest na to lepsze rozwiązanie, a kod powyższych metod można uprościć:
 public function index() {

   $posts = Post::all();

   return view('posts.index', compact('posts'));

 }

public function create() {

    return view('posts.create');

}

Zanim jednak przejdę do najważniejszej części tego tematu, przedstawię metodę Post::newest(), czyli funkcję zwracającą żądaną ilość najnowszych postów. Metoda znajdująca się wewnątrz ciała klasy Post, czyli w pliku app/Post.php wygląda następująco:
 public static function newest($n) {

    return static::latest('created_at')->take($n)->get();

 }

Powyższa funkcja typu static zwraca listę postów uporządkowanych malejąco według ich czasu utworzenia, czyli na samej górze listy znajdują się najnowsze posty. Lista zawiera ostatnie $n postów. W parametrze $n możemy zapodać limit listy postów.

Zakładając, że w miejscu :n wstawimy wartość $n, efekt zastosowanych w naszej funkcji metod Eloquent'a jest taki sam jak w przypadku zapytania SQL:
SELECT * from posts order by created_at desc limit :n

Gdy projektujemy tego typu metodę warto ją sobie przetestować interaktywnie w php artisan tinker. Zobaczmy jak działa metoda Post::newest():



Modyfikujemy szablon widoku prawej kolumny


Aby lista najnowszych postów mogła się prawidłowo wyświetlać w prawej kolumnie widoku, należy odpowiednio dopasować nasz szkoleniowy szablon widoku. Dostosujmy więc omówiony w poprzednim szkoleniu szablon kolumny bocznej do następującego stanu:
<aside class="col-sm-3 ml-sm-auto blog-sidebar">

  <div class="sidebar-module">

        <h4>Najnowsze posty</h4>

        <ol class="list-unstyled">

                @foreach ($newest as $post)

                <li><a href="{{asset('/posty/'.$post->id)}}">{{$post->title}}</a></li>

                @endforeach

        </ol>

  </div>

</aside><!-- /.blog-sidebar -->

Kompozytor widoku


Funkcje kompozytora widoku to wywołania zwrotne lub metody klasy wywoływane podczas renderowania widoku. Jeśli masz dane, które chcesz powiązać z widokiem za każdym razem, gdy widok jest renderowany, kompozytor widoku może pomóc uporządkować tę logikę w jednym miejscu. Aby w naszym szkoleniowym przykładzie wywoływanie metody Post::newest() nie było konieczne z osobna dla każdego widoku w skład którego wchodzi nasza szkoleniowa lista postów, z pomocą przychodzi nam Laravel View Composer. Zobaczmy jak to działa w praktyce! Wewnątrz metody boot() w pliku
app/Providers/AppServiceProvider.php
należy umieścić następującą funkcję, która ma za zadanie przekazać do widoku bocznej kolumny listę najnowszych pięciu postów, uzyskaną poprzez metodę Post::newest():
view()->composer('layouts.aside', function($view) {

    $view->with('newest', Post::newest(5));

 });

Nie zapomnijmy na samej górze pliku, przed deklaracją klasy, umieścić
use App\Post;

Zobaczmy teraz jakie efekty przyniosła nasza praca:

Nasz szkoleniowy widok listy postów
Nasz szkoleniowy widok listy postów


Nasz szkoleniowy widok zawartości posta
Nasz szkoleniowy widok zawartości posta


Nasz szkoleniowy widok tworzenia nowego posta

Nasz szkoleniowy widok tworzenia nowego posta


Podsumowanie


W tej części szkolenia poznaliśmy kompozytor widoku, którego stosowanie ułatwia nam pisanie czystego i niepowielającego się kodu. W kolejnej części szkolenia mam zamiar opisać podstawowe mechanizmy uwierzytelniania w Laravel.

Brak komentarzy:

Prześlij komentarz

Dodaj komentarz