Zpět na kurz

Lekce 6: Formuláře, validace a práce s obrázky

Vítejte u poslední lekce kurzu! Dnes se naučíme, jak správně pracovat s formuláři a jak validovat data. Zároveň si ukážeme, jak nahrávat a optimalizovat obrázky, což je klíčové pro jakoukoli moderní webovou aplikaci. Tyto dovednosti vám umožní tvořit robustní a bezpečné formuláře, které zvládají nejen textová data, ale i soubory.

Obsah lekce

• Vytvoření formuláře pro nový produkt
• Validace vstupu v controlleru
• Upload obrázku a uložení do databáze
• Intervention Image pro změnu velikosti
• Spatie/image-cache pro optimalizaci
• Shrnutí

---

Vytvoření formuláře pro nový produkt

Pro sběr dat od uživatelů se používají formuláře. Jejich vytvoření v Blade pohledu je jednoduché.

<!-- resources/views/products/create.blade.php -->
<form action="/produkty" method="POST" enctype="multipart/form-data">
    @csrf <!-- Ochrana proti CSRF útoku -->

    <div>
        <label for="name">Název produktu:</label>
        <input type="text" name="name" id="name">
    </div>
    <div>
        <label for="price">Cena:</label>
        <input type="number" name="price" id="price">
    </div>
    <div>
        <label for="image">Obrázek:</label>
        <input type="file" name="image" id="image">
    </div>

    <button type="submit">Uložit produkt</button>
</form>

Validace vstupu v controlleru

Než uložíte data z formuláře, musíte je validovat. Laravel to dělá elegantně přímo v controlleru. Pokud validace selže, uživatel je automaticky přesměrován zpět s chybovými zprávami.

// app/Http/Controllers/ProductController.php

public function store(Request $request)
{
    $validatedData = $request->validate([
        'name' => 'required|max:255',
        'price' => 'required|numeric|min:0',
        'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
    ]);

    // Uložení produktu a obrázku
    // ...
}

Upload obrázku a uložení do databáze

Ukládání souborů je v Laravelu velmi snadné. Stačí použít metodu store na objektu souboru.

$imagePath = $request->file('image')->store('products', 'public');

// Uložení produktu s cestou k obrázku
$product = Product::create([
    'name' => $validatedData['name'],
    'price' => $validatedData['price'],
    'image_path' => $imagePath,
]);

Použití Intervention Image pro změnu velikosti

Pro optimalizaci obrázků je vhodné použít balíček intervention/image, který umí měnit velikost, ořezávat a manipulovat s obrázky.

Instalace balíčku:

composer require intervention/image

Generování náhledů (thumbnails) při nahrání:

use Image;

$image = $request->file('image');
$filename = time() . '.' . $image->getClientOriginalExtension();
$path = public_path('images/thumbnails/' . $filename);
Image::make($image->getRealPath())->resize(200, 200)->save($path);

Instalace Spatie/image-cache pro optimalizaci obrázků

Balíček spatie/image-cache dokáže automaticky generovat a cachovat různé verze obrázků, což výrazně zrychluje načítání stránky.

Instalace balíčku:

composer require spatie/laravel-image-cache

Příklad použití v pohledu:

<!-- Vytvoří a zobrazí náhled obrázku o rozměrech 200x200px -->
<img src="{{ route('imagecache', ['fit', $product->image_path, 200, 200]) }}" alt="Náhled produktu">

Shrnutí

Žák nyní umí vytvořit kompletní formulář pro vkládání dat, správně validovat vstup a chránit aplikaci před CSRF útoky. Zvládl také nahrávat a ukládat soubory, pracovat s balíčkem Intervention Image pro změnu velikosti a používat Spatie/image-cache pro automatickou optimalizaci. S těmito dovednostmi je připraven tvořit robustní a uživatelsky přívětivé aplikace. Gratuluji! 🎉

´