Zpět na kurz

Lekce 3: Blade, překlady a frontend (Vite + NPM)

Vítejte u třetí lekce kurzu, která se zaměřuje na Blade, výkonný šablonovací systém Laravelu, a na správu frontendu pomocí Vite. Naučíte se, jak efektivně vytvářet a organizovat pohledy, spravovat překlady a integrovat moderní nástroje pro práci s CSS a JavaScriptem.

Obsah lekce

Vysvětlení Blade templating enginu

Blade je jednoduchý, ale velmi výkonný šablonovací engine, který vám umožňuje používat čistý PHP kód v pohledech (views). Na rozdíl od jiných enginů vám Blade nebrání v používání PHP kódu přímo v šablonách.

<!-- Blade pohled -->
<h1>Ahoj, {{ $name }}</h1>
<!-- Můžete používat i podmínky -->
@if ($user->isAdmin)
    <p>Vítejte, administrátore!</p>
@endif

Vytvoření hlavního layoutu

Pro udržení konzistence a zjednodušení práce s pohledy je ideální vytvořit hlavní layout. V něm nadefinujete společné prvky jako hlavička, patička a navigace. Soubor se obvykle ukládá do resources/views/layouts/app.blade.php.

<!-- resources/views/layouts/app.blade.php -->
<!DOCTYPE html>
<html lang="cs">
<head>
    <title>@yield('title') | Moje aplikace</title>
</head>
<body>
    <div class="container">
        @yield('content')
    </div>
</body>
</html>

Použití direktiv @yield, @section, @include a @if, @foreach

Blade používá speciální direktivy, které začínají znakem @. Díky nim můžete snadno pracovat se šablonami.

  • @yield('sekce'): Zástupný symbol v layoutu, kam se vloží obsah z pohledu.
  • @section('sekce'): Definice obsahu pro danou sekci v pohledu, který se pak vloží do layoutu.
  • @include('cesta.k.pohledu'): Vložení obsahu jiného pohledu. Skvělé pro opakované části kódu.
  • @if, @foreach: Struktury pro podmínky a cykly.
<!-- resources/views/stranka.blade.php -->
@extends('layouts.app')

@section('title', 'Domovská stránka')

@section('content')
    <h1>Vítejte na domovské stránce</h1>
    @if (Auth::check())
        <p>Jste přihlášený.</p>
    @else
        <p>Jste odhlášený.</p>
    @endif
</body>
</html>

Překlady – vytvoření jazykového souboru a použití ve view

Pro podporu více jazyků v aplikaci můžete použít vestavěné funkce Laravelu pro lokalizaci. Překlady se ukládají v PHP souborech ve složce resources/lang/cs/.

Vytvoření souboru resources/lang/cs/messages.php:

<?php

return [
    'welcome' => 'Vítejte v naší aplikaci!',
];

Použití v pohledu:

<p>{{ __('messages.welcome') }}</p>

Instalace Node.js a NPM balíčků (npm install)

Laravel používá **Vite** pro správu a kompilaci front-end assetů. Nejprve musíte mít nainstalovaný **Node.js** a **NPM**.

// V terminálu spusťte v kořenovém adresáři projektu
npm install

Tento příkaz nainstaluje všechny balíčky definované v souboru package.json.

Spuštění Vite dev serveru a přidání CSS/JS

Vite dev server automaticky kompiluje a aktualizuje vaše front-end soubory.

// Spuštění Vite dev serveru
npm run dev

Pro přidání CSS a JavaScript souborů do vašeho hlavního layoutu použijte Blade direktivu @vite.

<!-- resources/views/layouts/app.blade.php -->
<head>
    ...
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>

Shrnutí

Žák nyní umí efektivně pracovat s Blade šablonami pro vytváření a organizaci pohledů. Zná principy vytváření hlavního layoutu a jeho použití. Navíc má nástroje pro práci s front-endem, včetně instalace NPM balíčků a spuštění Vite pro kompilaci a správu CSS a JavaScriptu. Žák nyní umí pracovat s překlady, což je zásadní pro lokalizaci. 🎉

David Kojecký

David Kojecký

Programátor ve společnosti Codefit a vývojář pro Mobilní lékárna CZ

´