Jednoduchý e-shop Laravel 5.1 část 3
UPDATE: Začala jsem novy seriál Jednoduchý e-shop Laravel 5.3
A jedeme dál močálem černým kolem bílých skal. Takže máme připravenou databázi a teď by to chtělo konečně aspoň něco rozjet. Upravíme si routes na
|
1 2 |
<?php Route::get('/', 'HomeController@getIndex'); |
v konzoli si připravíme HomeController
|
1 |
php artisan make:controller HomeController --plain |
a vytvoří se nám HomeController
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Http\Requests; use App\Http\Controllers\Controller; class HomeController extends Controller { } |
, který si upravíme o vytažení produktů z databáze na a pošleme je do view
|
1 2 3 4 5 6 7 8 |
class HomeController extends Controller { public function getIndex() { $products = Product::all(); return view('home', ['products' => $products]); } } |
v resources/views si vytvoříme home.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
@extends('layouts.master') @section('title','HomePage'); @section('content') @foreach($products->chunk(4) as $set) <div class="row"> @foreach ($set as $product) <div class="col-md-3"> <div class="product"> <div class="image"><img src="http://placehold.it/180x240" alt=""></div> <div class="description"> <h3>{{ $product->name }}</h3> <p>{{ $product->description }}</p> </div> <div class="price">{{ $product->price }} Kč</div> <div class="buy"> <form method="POST" action="{{ URL::to('addcart') }}" class="form-inline" role="form"> {{ csrf_field() }} <input type="hidden" name="product_id" value="{{ $product->id }}"> <div class="form-group"> <input type="text" class="form-control" name="qty" value="1"> </div> <button type="submit" class="btn btn-primary">Koupit</a> </form> </div> </div> </div> @endforeach </div> @endforeach @stop |
jak jistě bystří poznali pro zobrazení použiji framework Boostrap a kromě toho potřebuji ještě vytvořit master layout v layouts/master.blade.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="Mamusha"> <link rel="icon" href="../../favicon.ico"> <title>@yield('title', 'Jednoduchý˝ shop Lravel 5.1')</title> <!-- Bootstrap core CSS --> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="{{ URL::asset('style.css') }}" rel="stylesheet"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- Fixed navbar --> <nav class="navbar navbar-default navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">MaMusha shop</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">O nás</a></li> <li><a href="#contact">Kontakt</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Kategorie <span class="caret"></span></a> <ul class="dropdown-menu"> @foreach($category as $cat) <li><a href="{{ URL::to('category/'. $cat->slug) }}">{{ $cat->name }}</a></li> @endforeach </ul> </li> </ul> <ul class="nav navbar-nav navbar-right"> <li><a href="{{ URL::to('cart') }}"><i class="glyphicon glyphicon-shopping-cart"> </i> Košík </a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> @yield('content') </div> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> </body> </html> |
takže view bychom měli připravené akdyž si tedy náš obchod pustíme budeme nemile překvapení ale on nefunguje. Laravel nám hlásí chybu Undefined variable: category. No samozřejmě v master layoutu chceme vypsat seznam kategoriií, ale v našem view jsme si žádnou proměnou pro kategorie nevytvořili. Co s tím, jelikož master layout budeme používat na téměř všech stránkách bylo by zbytečné v každém controlleru znovu z databáze vytahovat všechny kategorie a posílat je do view. Použijeme vychytávku view composer takže v app/providers/AppServiceProviders.php upravíme funkci boot.
|
1 2 3 4 5 6 7 |
public function boot() { View::composer('*', function($view) { $view->with('category', Category::all()); }); } |
Nyní by se nám již měl náš minishop zobrazit. Ale ještě drobnost navigace nám překrývá obraázky našich produktů ještě drobná úprava v css public/styles.css si přidáme
|
1 2 3 |
body { padding-top:70px; } |
No ne opravdu nádhera už se nám zobrazuje úvodní stránka shopu. To je nádhera