Dopo aver analizzato la parte di progetto relativa al controller, in questo secondo capitolo dedicato a come realizzare la home page del nostro e-commerce introduciamo gli argomenti riguardanti i template della view e route.
Gestione dei template della view
Blade supporta l'ereditarietà dei template. Per sfruttare questa caratteristica creiamo la directory layouts in resources/views. Al suo interno salviamo il file site.blade.php che definisce il template di base.
<!DOCTYPE html>
<html>
<head>
<title>{{ $title }}</title>
<meta charset="utf-8">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" type="text/css" media="screen" href="{{asset('assets/css/bootstrap/css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" media="screen" href="{{asset('assets/css/font-awesome/css/all.css')}}">
<link rel="stylesheet" type="text/css" media="screen" href="{{asset('assets/css/style.css')}}">
<link rel="shortcut icon" href="{{asset('favicon.png')}}" type="image/x-icon">
</head>
<body>
<header id="site-header">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="/">PHP Ecommerce</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/shop">Negozio</a>
</li>
</ul>
</div>
</nav>
</header>
<div id="site" class="container">
@yield('content')
</div>
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script src="{{asset('assets/js/validator.min.js')}}"></script>
<script src="{{asset('assets/js/typeahead.js')}}"></script>
<script src="{{asset('assets/js/ecommerce.js')}}"></script>
</body>
</html>content è un segnaposto con cui indicare a Blade dove andrà inserita una @section omonima definita in un template che estende (@extends) il template di base.
Il template della home page (views/home.blade.php) avrà allora questa struttura.
@extends('layouts.site')
@section('content')
<section class="row products">
@foreach($products as $product)
@include('product', ['product' => $product])
@endforeach
{{ $products->links() }}
</section>
@endsectionBlade usa il punto come separatore delle directory e non lo slash, quindi il file layouts/site.blade.php verrà richiamato come layouts.site.
Il metodo links() genera la struttura HTML della paginazione dei prodotti che è già compatibile con Bootstrap.
@include serve a includere un blocco specifico, ossia un sottotemplate Blade che gestisce un particolare frammento HTML. Questa direttiva accetta come secondo parametro eventuali variabili da passare al template usando un array associativo.
Ecco quindi views/product.blade.php.
<article class="col-md-6 product">
<header>
<h3>{{ $product['title'] }}</h3>
</header>
<figure>
<a href="{{ url('/') }}/prodotti/{{ $product['slug'] }}">
<img src="{{ url('assets/images') }}/{{ $product['image'] }}" class="img-fluid" alt="">
</a>
</figure>
<p class="text-muted text-truncate">{{ $product['description'] }}</p>
<footer class="row">
<div class="col-md-6">€ {{ $product['price'] }}</div>
<div class="text-right col-md-6">
<a href="{{ url('/') }}/add-to-cart/{{ $product['id'] }}" class="btn btn-success">Aggiungi</a>
</div>
</footer>
</article>Creazione della route
Le route vanno aggiunte nel file routes/web.php e collegano un percorso ad uno specifico metodo di uno specifico controller.
Route::get('/', 'HomeController@index')->name('home');Il metodo name(), facoltativo, assegna un nome interno alla route. Si tratta di una pratica molto utile in vari contesti. Ad esempio se dovessimo effettuare un redirect HTTP, potremmo usare semplicemente il nome della route senza bisogno di dover specificare il percorso che è già stato associato a quel nome.
Conclusione
Nei prossimi capitoli vedremo in dettaglio le altre sezioni dell'e-commerce e ci concentreremo in particolare sulla procedura di acquisto.
