Nowe funkcjonalności panelu Administracyjnego w sklepie

W poprzedniej części kursu utworzyliśmy layout panelu Administracyjnego dla naszego sklepu. Ten panel przeznaczony będzie dla właściciela tworzonej aplikacji (Admina). W tej części utworzymy podstrony panelu oraz dodamy brakujące funkcje.

Pamiętaj, aby przed rozpoczęciem pracy z projektem użyć komendy „npm run dev” w katalogu projektu – bez tego polecenia nie zostaną skompilowane tzw. assety aplikacji, czy style css i skrypty js

Podstrona dashboard

Utworzymy teraz dashboard, aby zastąpić białą stronę pod nawigacją jakąkolwiek treścią. Przypominam, że dashboard znajduje się pod adresem /admin/dashboard. Dane potrzebne do zalogowania się do panelu zarządzania to:

Login: admin@example.com

Hasło: 12345678

Kontener dla dashboard i podstron w panelu zarządzania

Musimy mieć jakikolwiek kontener, który będzie ujmował każdą podstronę w panelu zarządzania sklepem. Będzie to pewnego rodzaju opakowanie, które dla każdej rozdzielczości doda odpowiednie marginesy do podstron. Otwórz teraz plik:

resources/views/layouts/admin.blade.php

Jest to plik layoutu blade, czyli w tym przypadku jest to plik layoutu panelu zarządzania. Oznacza to, że każda podstrona dodana do panelu będzie dodawana do tego pliku jako tzw. content.

Inaczej mówiąc, ten layout jest częścią wspólną wszystkich podstron w panelu, a wymienne będą tylko treści podstron.

Pamiętajmy, że layout na razie zawiera tylko nawigację:

To właśnie ta nawigacja, będąc częścią layoutu, będzie widoczna na podstronach. Jest to dość sprytne rozwiązanie, ponieważ musieliśmy dodać ten nagłówek tylko w jednym pliku, czyli w:

resources/views/layouts/admin.blade.php

Zamiast więc dodawać nawigację do każdej podstrony (do każdego pliku blade z podstroną), możemy dodać ją tylko raz i wymieniać tylko treść. Poniżej zobaczysz jak możemy zrobić taką wymienną treść.

Umieść we wspomnianym pliku następujący kod (zastąp obecny kod, tym który umieściłem poniżej):

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.bunny.net">
    <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased">
    <div class="h-screen overflow-hidden">
        <livewire:layout.admin.header />
        <div class="p-4 container mx-auto">
            {{ $slot }}
        </div>
    </div>
</body>
</html>

Użycie zmiennej $slot w kontekście komponentów blade

Jeśli porównasz wersje pliku – tą sprzed zmiany i tą po wklejeniu powyższego kodu to zauważysz, że dodaliśmy właśnie element <div> z wyświetleniem wewnątrz niego tajemniczej zmiennej $slot. Ta zmienna to właśnie wymienna treść, która w naszym przypadku będzie określana na każdej podstronie panelu. Jako przykład podam użycie naszego layoutu dla podstrony dashboard, w pliku:

resources/views/livewire/pages/admin/dashboard/index.blade.php

Zastąp teraz kod w tym pliku poniższym kodem:

<?php

use Livewire\Attributes\Layout;
use Livewire\Volt\Component;

new #[Layout('layouts.admin')] class extends Component {
    //
}; ?>

<div>
    <div class="grid grid-flow-col grid-rows-2 gap-4">
        <div class="col-span-1 grid grid-flow-col gap-4">
            <x-admin.card title="Klienci" body="122"/>
            <x-admin.card title="Zamówienia" body="432"/>
        </div>
        <div class="col-span-1">
            <x-admin.card title="Sprzedaż miesięczna" body="+ 29%"/>
        </div>
        <div class="row-span-2 col-span-2">
            <x-admin.card title="Cele na ten miesiąc" body="Sprzedaż - 500"/>
        </div>
    </div>
</div>

Teraz chciałbym wyjaśnić w jaki sposób użyłem tu layoutu admin.blade.php:

Po pierwsze, w linijce 6. użyliśmy atrybutu PHP o nazwie Layout, a jako jego argument dodaliśmy nazwę layoutu. Od teraz cała zawartość HTML pliku resources/views/livewire/pages/admin/dashboard/index.blade.php będzie wstawiana w miejscu zmiennej $slot w layoucie.

Po drugie, widzimy nietypowe tagi HTML o nazwie: <x-admin.card>. Jeśli widzisz taki tag, który zaczyna się od ciągu znaków 'x-’ to znaczy, że został użyty komponent blade. Komponenty szablonów blade to sposób na wyodrębnienie porcji kodu HTML do osobnych plików. Takie porcje kody, czyli komponenty, możemy potem umieścić w innych plikach.

Tworzenie komponentów Laravel blade

Powyższa zasada jest nieco podobna do użycia podstron w jednym szablonie blade. Utwórzmy teraz komponent <x-admin.card>, aby poprawnie wyświetlał się na podstronie Dashboard’u.

Komponent utworzymy za pomocą komendy artisan:

php artisan make:component Admin/Card

Po wydaniu tej komendy pojawią się dwa nowe pliki w projekcie:

app/View/Components/Admin/Card.php

oraz

resources/views/components/admin/card.blade.php

Plik: app/View/Components/Admin/Card.php znajduje się w dedykowanej komponentom blade przestrzeni nazw: App\View\Components. To właśnie tam przechowywane są klasy komponentów. Uzupełnij plik następującym kodem:

<?php

namespace App\View\Components\Admin;

use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;

class Card extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct(
        public string $title,
        public string $body
    )
    {
        //
    }

    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('components.admin.card');
    }
}

Konstruktor tej klasy zawiera dane o nazwie 'title’ oraz 'body’. W naszym przypadku będzie to tytuł oraz treść karty, którą reprezentuje komponent. Dążymy do wyświetlenia czegoś takiego:

Tytuł „Zamówienia” oraz ilość zamówień jako treść karty. Za pomocą kart możemy też ująć inne dane sklepu, dlatego właśnie tworzymy komponent, aby wykorzystać go jako szablon dla wielokrotnego wyświetlania informacji. Zaraz przejdziemy do umieszczania kart na stronie głównej panelu administracyjnego.

Na razie dokończmy przygotowywać nasz komponent. Skoro mamy już klasę, to czas przejść do wygenerowanego pliku card.blade.php.

Otwórz ten plik, który jest w ścieżce: resources/views/components/admin/card.blade.php

Uzupełnij ten plik kodem:

<div class="border rounded-md overflow-hidden">
    <div class="text-center bg-gray-100 text-gray-500 text-sm py-1">{{ $title }}</div>
    <div class="mt-2 p-3 font-bold">{{ $body }}</div>
</div>

Teraz widzimy jak użyte zostały dane 'title’ oraz 'body’, Zwyczajnie wyświetliliśmy je za pomocą dyrektywy {{ }} laravela. Możemy więc podstawić różne tytuły i treści, w różnych kartach.

Zobaczmy to teraz w pliku resources/views/livewire/pages/admin/dashboard/index.blade.php, czyli na podstronie głównej panelu administracyjnego.

Wcześniej dodaliśmy taki kod na podstronie index.blade.php:

 <div class="grid grid-flow-col grid-rows-2 gap-4">
    <div class="col-span-1 grid grid-flow-col gap-4">
        <x-admin.card title="Klienci" body="122"/>
        <x-admin.card title="Zamówienia" body="432"/>
    </div>
    <div class="col-span-1">
        <x-admin.card title="Sprzedaż miesięczna" body="+ 29%"/>
    </div>
    <div class="row-span-2 col-span-2">
        <x-admin.card title="Cele na ten miesiąc" body="Sprzedaż - 500"/>
    </div>
</div>

Teraz możemy zobaczyć zmianę w przeglądarce:

Podsumowanie tej części kursu

Myślę, że korzystając z komponentów Laravel blade możemy w dużym stopniu ułatwić sobie pracę przy budowaniu interfejsu użytkownika.

Odpowiednio rozdzielając interfejs naszej aplikacji na komponenty oraz odpowiednio parametryzując komponenty za pomocą atrybutów możemy zbudować bazę elementów do ponownego wykorzystania.