Membina Menu Dinamik dan Boleh Diselenggara dalam Laravel

Menguruskan menu navigasi boleh menjadi mencabar dalam aplikasi Laravel apabila ia berkembang, terutamanya dengan elemen dinamik seperti kawalan akses berasaskan peranan. Catatan blog ini meneroka cara untuk memudahkan dan menstruktur menu anda menggunakan sistem Pembina Menu, menjadikannya lebih mudah untuk diselenggara, dilanjutkan dan diskalakan.

---

Masalahnya

Dalam banyak projek Laravel, templat Blade mengendalikan keterlihatan menu menggunakan syarat:

@can('viewAdmin')
    <a href="%7B%7B%20route('administration.index')%20%7D%7D">
        {{ __('Administration') }}
    </a>
@endcan

Walaupun pendekatan ini berfungsi untuk aplikasi mudah, pendekatan ini menjadi bersepah dan tidak terurus apabila bilangan menu bertambah.

---

Penyelesaian

Satu Sistem Pembina Menu merangkum logik menu ke dalam kelas boleh guna semula, menambah baik:

1. Kebolehselenggaraan: Takrif menu berpusat.
2. Skalabiliti: Menjana menu secara dinamik berdasarkan peranan atau kebenaran.
3. Kebolehgunaan semula: Berkongsi menu merentas paparan.

---

Sokong misi saya untuk memperkasakan komuniti pembangun dengan menaja kerja saya—sumbangan anda membantu saya membina dan berkongsi alatan, cerapan dan sumber yang berharga: Ketahui lebih lanjut di sini.

---

Pelaksanaan Langkah demi Langkah

1. Tentukan Gerbang untuk viewAdmin

Untuk mengawal akses kepada menu pentadbiran, tentukan get viewAdmin dalam AuthServiceProvider anda:

use Illuminate\Support\Facades\Gate;
use App\Models\User;

class AuthServiceProvider extends ServiceProvider
{
    public function boot()
    {
        $this->registerPolicies();

        Gate::define('viewAdmin', function (User $user) {
            return $user->hasRole('admin'); // Replace with your app's role-checking logic
        });
    }
}

---

2. Buat Kelas MenuItem

Kelas MenuItem mentakrifkan semua atribut item menu, seperti label, URL, ikon dan keterlihatan:

<?php namespace App\Actions\Builder;

use CleaniqueCoders\Traitify\Contracts\Builder;
use InvalidArgumentException;

class MenuItem implements Builder
{
    private string $label;
    private string $url;
    private string $target = '_self';
    private array $attributes = [];
    private array $children = [];
    private string $icon = 'o-squares-2x2';
    private ?string $description = null;
    private ?string $tooltip = null;
    private $visible = true;
    private array $output = [];

    public function setLabel(string $label): self
    {
        $this->label = $label;

        return $this;
    }

    public function setUrl(string $url): self
    {
        $this->url = $url;

        return $this;
    }

    public function setTarget(string $target): self
    {
        $this->target = $target;

        return $this;
    }

    public function addAttribute(string $key, string $value): self
    {
        $this->attributes[$key] = $value;

        return $this;
    }

    public function addChild(MenuItem $child): self
    {
        $this->children[] = $child;

        return $this;
    }

    public function setIcon(string $icon): self
    {
        $this->icon = $icon;

        return $this;
    }

    public function setDescription(string $description): self
    {
        $this->description = $description;

        return $this;
    }

    public function setTooltip(string $tooltip): self
    {
        $this->tooltip = $tooltip;

        return $this;
    }

    public function setVisible($visible): self
    {
        if (! is_bool($visible) && ! is_callable($visible)) {
            throw new InvalidArgumentException('The visible property must be a boolean or a callable.');
        }

        $this->visible = $visible;

        return $this;
    }

    public function isVisible(): bool
    {
        return is_callable($this->visible) ? call_user_func($this->visible) : $this->visible;
    }

    public function build(): self
    {
        $this->output = [
            'label' => $this->label,
            'url' => $this->url,
            'target' => $this->target,
            'attributes' => $this->attributes,
            'icon' => $this->icon,
            'description' => $this->description,
            'tooltip' => $this->tooltip,
            'children' => array_filter(
                array_map(fn (MenuItem $child) => $child->build()->toArray(), $this->children),
                fn (array $child) => ! empty($child) 
            ),
        ];

        return $this;
    }

    public function toArray(): array
    {
        return $this->output;
    }

    public function toJson(int $options = 0): string
    {
        return json_encode($this->toArray(), $options, 512);
    }
}

---

3. Cipta Pembina Menu

Pembina Menu menyelesaikan dan membina menu secara dinamik:

namespace App\Actions\Builder;

class Menu
{
    public static function make()
    {
        return new self;
    }

    public function build(string $builder)
    {
        $class = match ($builder) {
            'navbar' => Navbar::class,
            'sidebar' => Sidebar::class,
            'administration' => Administration::class,
            default => Navbar::class,
        };

        $builder = new $class;
        return $builder->build();
    }
}

Akses menu menggunakan fungsi pembantu:

<?php use App\Actions\Builder\Menu;

if (! function_exists('menu')) {
    function menu(string $builder)
    {
        return Menu::make()->build($builder)->menus();
    }
}

---

4. Menu Pentadbiran

Tentukan item menu khusus pentadbiran dalam kelas Pentadbiran:

<?php namespace App\Actions\Builder\Menu;

use App\Actions\Builder\MenuItem;
use CleaniqueCoders\Traitify\Contracts\Builder;
use CleaniqueCoders\Traitify\Contracts\Menu;
use Illuminate\Support\Collection;
use Illuminate\Support\Facades\Gate;

class Administration implements Builder, Menu
{
    private Collection $menus;

    public function menus(): Collection
    {
        return $this->menus;
    }

    public function build(): self
    {
        $this->menus = collect([
            (new MenuItem)
                ->setLabel(__('Issues'))
                ->setUrl(url(config('telescope.path')))
                ->setTarget('_blank')
                ->setVisible(fn () => Gate::allows('viewTelescope'))
                ->setTooltip(__('View Telescope issues'))
                ->setDescription(__('Access application issues using Laravel Telescope'))
                ->setIcon('o-bug'), // Heroicon outline for a bug

            (new MenuItem)
                ->setLabel(__('Queues'))
                ->setUrl(url(config('horizon.path')))
                ->setTarget('_blank')
                ->setVisible(fn () => Gate::allows('viewHorizon'))
                ->setTooltip(__('Manage queues'))
                ->setDescription(__('Access Laravel Horizon to monitor and manage queues'))
                ->setIcon('o-cog'), // Heroicon outline for settings/tasks

            (new MenuItem)
                ->setLabel(__('Access Control'))
                ->setUrl(route('security.access-control.index'))
                ->setVisible(fn () => Gate::allows('viewAccessControl'))
                ->setTooltip(__('Manage access control'))
                ->setDescription(__('Define and manage access control rules'))
                ->setIcon('o-lock-closed'), 

            (new MenuItem)
                ->setLabel(__('Users'))
                ->setUrl(route('security.users.index'))
                ->setVisible(fn () => Gate::allows('viewUser'))
                ->setTooltip(__('Manage users'))
                ->setDescription(__('View and manage user accounts'))
                ->setIcon('o-user-group'), 

            (new MenuItem)
                ->setLabel(__('Audit Trail'))
                ->setUrl(route('security.audit-trail.index'))
                ->setVisible(fn () => Gate::allows('viewAudit'))
                ->setTooltip(__('View audit trails'))
                ->setDescription(__('Audit logs for security and activity tracking'))
                ->setIcon('o-document-text'), 
        ])->reject(fn (MenuItem $menu) => ! $menu->isVisible())
            ->map(fn (MenuItem $menu) => $menu->build()->toArray());

        return $this;
    }
}

---

5. Tentukan Laluan

Tambah konfigurasi laluan berikut untuk halaman pentadbiran:

<?php use Illuminate\Support\Facades\Route;

Route::middleware(['auth:sanctum', 'verified', 'can:viewAdmin'])
    ->as('administration.')
    ->prefix('administration')
    ->group(function () {

        Route::view('/', 'administration.index')->name('index');

    });

---

6. Penggunaan dalam Templat Blade

Menu Navigasi (navigation-menu.blade.php):

@can('viewAdmin')
    <a href="%7B%7B%20route('administration.index')%20%7D%7D">
        <x-icon name="o-computer-desktop"></x-icon>
        {{ __('Administration') }}
    </a>
@endcan

Menu Pentadbiran (administration/index.blade.php):

<x-app-layout>
    <x-slot name="header">{{ __('Pentadbiran') }}</x-slot>
    <div>




<hr>

<p><strong>Output</strong></p>

<p>Di sini output akhir yang anda boleh miliki:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173418649412401.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Building Dynamic and Maintainable Menus in Laravel"></p>
<blockquote>
<p>Sokong misi saya untuk memperkasakan komuniti pembangun dengan menaja kerja saya—sumbangan anda membantu saya membina dan berkongsi alatan, cerapan dan sumber yang berharga: Ketahui lebih lanjut di sini.</p>
</blockquote>


<hr>

<h3>
  
  
  <strong>Kesimpulan</strong>
</h3>

<p>Ini <strong>Sistem Pembina Menu</strong> memudahkan pengurusan navigasi dalam Laravel dengan:</p>

<ol>
<li>Memusatkan definisi menu untuk kebolehselenggaraan yang lebih baik.</li>
<li>Mengawal keterlihatan menu secara dinamik menggunakan peranan atau kebenaran.</li>
<li>Menggunakan semula logik menu merentas paparan dan reka letak.</li>
</ol>

<p>Dengan menggunakan pendekatan ini, anda boleh menskalakan sistem navigasi anda dengan lancar, walaupun dalam aplikasi yang rumit. </p>

<p>Anda mungkin mahu memuatkan butiran menu anda daripada pangkalan data dan membina menu yang anda mahu. Tetapi bagi saya, ini sudah cukup bagus. Saya tidak mempunyai projek memerlukan saya menggunakan konfigurasi menu dipacu pangkalan data.</p>

<p>Kod boleh didapati di sini. </p>

<p>Cubalah dan kongsi pendapat anda! ?</p>


<hr>

<p>Foto oleh LinedPhoto di Unsplash</p>


          </div>

            
  

            
        </x-app-layout>

Atas ialah kandungan terperinci Membina Menu Dinamik dan Boleh Diselenggara dalam Laravel. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!