Budujemy przykładową aplikację w Laravel – część 2, instalacja szablonu

Rozbudowując mój poprzedni wpis na temat szybkiego startu w Frameworku Laravel Szybki start z Laravel 5.4 chciałbym zaproponować kolejny cykl, w którym zbudujemy od podstaw konkretną aplikację – wypożyczalnię sprzętu wodnego. Aplikacja opierać się będzie na Laravel 5.4, przy czym panel zarządzający spróbujemy wykonać w Angular 5 – w tym celu potrzebować będziemy chociaż szczątkowego API. Zaczniemy jednak od tego, co widzieć będą nasi klienci., a sam panel administracyjny zostawimy na koniec. Do dzieła!

W celu przyjemniejszego korzystania z systemu, spróbujmy dodać do naszego kodu przykładowy szablon html. Dzięki temu od razu będziemy mogli ewentualne widoki dopasowywać do generalnego layoutu. Przykładowym szablonem niech będzie ten z linka poniżej:

http://www.free-css.com/free-css-templates/page194/yacht-club

Jest to prosty, darmowy szablon w HTML. Nie czekająć ściągamy go na dysk i rozpakowujemy. Od razu rzuci nam się w oczy plik index.html a także podkatalogi css, fonts, img i js, które przenosimy do naszej aplikacji do katalogu public. Pliki z zdjęciami sprzętu wodnego (pic1.jpg, pic2,jpg i pic3.jpg) przenosimy do katalogu img/vehicles i nadajemy kolejno nazwy 1.jpg, 2.jpg, 3.jpg. Po tych czynnościach katalog public będzie  wyglądał następująco:

Mając przekopiowane pliki możemy przejść do edycji naszego widoku. Domyślnie Laravel stworzył jeden plik będący szablonem całej aplikacji. Plik ten znajduje się w katalogu resources/views/layouts/app.blade.php.

Gdy go otworzymy, ujrzymy sporo wygenerowanego kodu, jednakże dla nas najważniejsza będzie informacja o umiejscowieniu elementów:

  • tytułu strony
  • plików css i js
  • zawartości danego widoku, czyli miejsca gdzie w szablonie ma być osadzany kod wygenerowany przez widoki. Miejsce to oznaczone będzie znacznikiem @yield(‚content’). Widzimy więc, że do naszego szablonu musimy przekazywać zmienną content, której zawartość będzie wypełniała wyznaczone miejsce. Dzięki temu możemy raz zdefiniowany szablon wykorzystywać w wielu miejscach aplikacji, zmieniając jedynie wyświetlaną zawartość.
  • ustawienia języka strony (pierwsza linijka)

Wszystkie te powyższe zmienne musimy umiejscowić w naszym nowym szablonie, najprościej więc będzie przekopiować całą zawartość pliku index.html do pliku app.blade.php i wszystkie powyższe miejsca zaktualizować, czyli:

  • ustawić język – <html lang=”{{ app()->getLocale() }}”>
  • poprawić wszelkie ścieżki do plików css i js odwołaniami względnymi, np: <link href=”{{ asset(‚css/bootstrap.css’) }}” rel=”stylesheet”>
    <script src=”{{ asset(‚js/jquery.js’) }}”></script>
  • po komentarzu <!– Content –> wstawić nasz znacznik zawartości @yield(‚content’)

Tak by całość prezentowała się następująco:

Pozostaje nam tylko uruchomić stronę (pamiętamy o uruchomieniu serwera poprzez php artisan serve):
http://127.0.0.1:8000/login

zalogować się i zobaczyć nasz komunikat powitalny:

Widok po zalogowaniu:

Widzimy również, iż generalnie cały frontend opiera się na naszym nowym szablonie graficznym, włączając w to formularze rejestracji i logowania.

W tym miejscu warto zmienić naszą stronę główną. Przejdźy do pliku routes/web.php i w linijce 20stej zaktualizujmy nasz routing z:

na

W następnym odcinku spróbujemy dodać nowy model maszyny, stworzymy odpowiednie rekordy w bazie, a także zamienimy statyczne obrazki jachtów na dane dynamicznie pobierane z bazy. Stay tuned!

 

2 thoughts on “Budujemy przykładową aplikację w Laravel – część 2, instalacja szablonu

  1. drobny błąd zamiast:

    Route::get(‚/’, ‚HomeController@index’)->name(‚home’);

    powinno być:

    Route::get(‚/’, ‚HomeController@index’)->name(‚home’);

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

This site uses Akismet to reduce spam. Learn how your comment data is processed.