Etykiety

piątek, 1 grudnia 2017

Laravel od podstaw: szablony widoków i style CSS

W poprzednich częściach szkolenia nauczyliśmy się, między innymi, jak tworzyć trasy, widoki i kontrolery zasobów. Dowiedzieliśmy się jak odczytywać dane z tabeli bazy danych i przekazywać je do widoków oraz jak zapisywać w tabeli bazy danych informacje wprowadzane przez użytkowników do formularza HTML. Omówiłem również walidację formularzy oraz zabezpieczenia przed atakami CSRF – Cross-SIte Request Forgery.

Moje przykłady były bardzo uproszczone, szczególnie jeśli chodzi o elementy HTML oraz stylizację CSS widoków. Sądzę, że nadszedł już czas aby zająć się i tym aspektem frameworka Laravel.

W niniejszej części szkolenia wprowadzę temat widoków z szablonami oraz arkuszy CSS w Laravel. Zademonstruję te podstawowe front-endowe aspekty Laravel korzystając z szablonu HTML udostępnionego w witrynie https://getbootstrap.com/, który postaramy się razem odtworzyć w Laravel, zachowując podobne zasady strukturalne, czyli menu nawigacyjne, prawą kolumnę, zawartość główną oraz stopkę.

Dla celów niniejszej części szkolenia wykorzystam szablon Bootstrap'a, który wygląda tak:

Przykładowy szablon Bootstrap
Przykładowy szablon Bootstrap

Zachęcam do zapoznania się ze strukturą tego szablonu. W tym celu warto podejrzeć i przeanalizować jego kod HTML.

Złożone widoki i szablony w Laravel


Załóżmy, że projektujemy witrynę internetową, wizualnie złożoną z menu, zawartości głównej, prawej kolumny bocznej oraz stopki. Załóżmy w celach szkoleniowych, że menu, prawa kolumna oraz stopka mają mieć zawsze taką samą zawartość, niezależnie od podstrony, natomiast zawartość główna ma się zmieniać w zależności od otwieranej podstrony. Oczywiście, że nie ma sensu powielać kodu HTML menu, prawej kolumny, bądź stopki na każdej z podstron. Jak do tej kwestii podejść w środowisku Laravel? Przejdźmy teraz do praktyki.

Do dzieła


Aby rozpocząć stwórzmy sobie w przestrzeni naszej aplikacji szkoleniowej katalog zawierający tak zwane szablony widoków aplikacji. Osobiście chętnie umieszczam szablony pod resources/views/layouts względem głównego katalogu aplikacji. Tworzymy katalog szablonów:
resources/views/layouts

Następnie stwórzmy nasz główny szablon, na którym będą się opierały wszystkie widoki naszej aplikacji. Można tego typu szablon nazwać przykładowo master.blade.php, a następnie zapiszmy nasz szablon w katalogu szablonów, czyli:
resources/views/layouts/master.blade.php

Zakładam, że czytelnicy śledzili poprzednie części szkolenia i wiedzą co oznacza w Laravel i jaką pełni funkcję rozszerzenie .blade. Jeśli nie, zachęcam do zapoznania się z tym tematem.

Ponieważ nasza szkoleniowa struktura witryny ma się opierać na szablonie Bootstrap'a, warto załączyć główne style CSS Bootstrap'a korzystając z udostępnianego w tym celu przez Bootstrapa CDN'a, a następnie style CSS konkretnego szablonu zapisać lokalnie na serwerze aplikacji.

W celach związanych z niniejszym tematem szkolenia, kod html naszego przykładowego szablonu Bootstrap'a dzielę na kilka części i zapisuję je w katalogu resources/views/layouts:
  • master.blade.php - szablon główny
  • nav.blade.php - menu nawigacyjne
  • aside.blade.php - prawa kolumna boczna
  • footer.blade.php - stopka

Style CSS Bootstrap'a załączam jako odnośnik CDN w master.blade.php i dodaję odnośnik do lokalnego arkusza CSS ze stylami wybranego szablonu, który zachowuję w pliku public/css/blog.css

Kod naszego szablonu głównego master.blade.php, czyli podstawowego szablonu naszej aplikacji web, wygląda następująco:
<!doctype html>

<html lang="en">

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="">

    <meta name="author" content="">

    <title>Szablon Bootstrap w Laravel</title>

    <!-- Główne style CSS Bootstrap - CDN -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-           beta.2/css/bootstrap.min.css"
          integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb"
          crossorigin="anonymous">

     <!-- Style CSS tego szablonu Bootstrap -->
     <link rel="stylesheet" href="{{ asset('css/blog.css') }}">

  </head>

  <body>

  {{-- W tym miejscu szablon menu --}}

   @include('layouts.nav')

    <main role="main" class="container">

      <div class="row">

        <div class="col-sm-8 blog-main">

        {{-- To jest miejsce na dynamiczną zawartość główną --}}

        {{-- Tu pojawia się zawartość bloku o nazwie 'content' --}}

        @yield('content')

        </div><!-- /.blog-main -->

        @include('layouts.aside')
 
      </div><!-- /.row -->

    </main><!-- /.container -->

     {{-- Tutaj szablon stopki --}}

     @include('layouts.footer')

 </body>

</html> 

Zawartość nav.blade.php:
<header>
   <div class="blog-masthead">
     <div class="container">
       <nav class="nav">
         <a class="nav-link active" href="#">Home</a>
         <a class="nav-link" href="#">About</a>
       </nav>
     </div>
   </div>

   <div class="blog-header">
     <div class="container">
       <h1 class="blog-title">The Bootstrap Blog</h1>
       <p class="lead blog-description">An example blog template</p>
     </div>
   </div>
</header>

Zawartość aside.blade.php:
<aside class="col-sm-3 ml-sm-auto blog-sidebar">
  <div class="sidebar-module sidebar-module-inset">
        <h4>About</h4>
        <p>Etiam porta <em>sem malesuada magna</em> mollis euismod.</p>
  </div>
  <div class="sidebar-module">
        <h4>Archives</h4>
        <ol class="list-unstyled">
          <li><a href="#">March 2014</a></li>
          <li><a href="#">February 2014</a></li>
          <li><a href="#">January 2014</a></li>
        </ol>
  </div>
  <div class="sidebar-module">
        <h4>Elsewhere</h4>
        <ol class="list-unstyled">
          <li><a href="#">GitHub</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Facebook</a></li>
        </ol>
  </div>
</aside><!-- /.blog-sidebar -->

Zawartość footer.blade.php:
<footer class="blog-footer">
      <p>Blog template built for <a href="https://getbootstrap.com/">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
      <p>
        <a href="#">Back to top</a>
      </p>
 </footer>

Następnie, aby wykorzystać stworzony system szablonów w naszej szkoleniowej aplikacji, zmieniam zawartość wszystkich widoków - nad którymi pracowaliśmy w poprzednich częściach szkolenia - w przedstawiony poniżej sposób.

Widok listy postów index.blade.php:
@extends('layouts.master')

 @section('content')

  <h1>Lista postów</h1>

  <ul>

   @foreach ($posts as $post)

    <li><a href="posty/{{ $post->id }}">{{ $post->title  }}</a></li>

   @endforeach

 </ul>

 @endsection


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

Widok zawartości posta show.blade.php:
@extends('layouts.master')

@section('content')


 <h1>{{$post->title}}</h1>

  <hr>

  <p>{{ $post->body }}</p>

@endsection


Nasz nowy widok zawartości posta
Nasz nowy widok zawartości posta

Widok formularza nowego posta:
@extends('layouts.master')

@section('content')

 <form method="POST" action=" {{asset('/posty')}} ">

   {{ csrf_field() }}

  <div class="form-group">
    <label for="title">Tytuł:</label>
    <input type="text" class="form-control" id="title" name="title">
  </div>

  <br />

  <div class="form-group">
    <label for="body">Treść:</label>
    <textarea id="body" class="form-control" name="body"></textarea>
  </div>

  <br />

  <div class="form-group">
    <button type="submit" class="btn btn-primary">Zapisz</button>
  </div>

 </form>

        <ul>

                @foreach ($errors->all() as $error)

                        <li>{{$error}}</li>

                @endforeach


        </ul>

@endsection



Nasz nowy widok tworzenia posta
Nasz nowy widok tworzenia posta


Jak to działa?


W widoku głównym umieściłem kilka funkcji PHP. Funkcja include() ma standardowy efekt PHP include(), czyli załącza określoną zawartość w miejscu jej wywołania. Ciekawym rozwiązaniem Laravel'a jest natomiast funkcja yield(), która określa miejsce wstawienia do szablonu zawartości obecnej w określonym bloku kodu, oznaczonym funkcjami section() i endsection() w pliku widoku, który rozszerza zawartość szablonu funkcją extends().

Podsumowanie


W tej części szkolenia pokazałem jak korzystać z szablonów w przypadku nieco złożonej struktury witryn internetowych. Na przykładzie szablonu HTML Bootstrap'a zbudowałem szkoleniowy przykładowy szablon, opatrzony w arkusze CSS Bootstrap'a oraz zastosowałem w jego widokach odpowiednie klasy CSS. Efektem jest przykład widoków, ze strukturą złożoną z sekcji stałych oraz dynamicznej zawartości głównej, która się zmienia w zależności od otwieranej podstrony. Jest to oczywiście przykład szkoleniowy, lecz można go swobodnie dostosować do własych potrzeb.

W kolejnych częściach szkolenia powrócę do spraw back-endowych i bardziej złożonych zagadnień Laravel'a.

Serdecznie zapraszam do kolejnej części szkolenia Laravel od podstaw, p.t. Kompozytor widoku

Brak komentarzy:

Prześlij komentarz

Dodaj komentarz