Laravel Menus – Menu management

Managing menus in Laravel can enhance the user experience by providing a structured way to navigate your application. You can implement a menu management system using either a package or a custom solution.

Step 1: Set Up Your Laravel Project

If you haven’t created a Laravel project yet, start by setting one up:

bash

composer create-project --prefer-dist laravel/laravel laravel-menu-management
cd laravel-menu-management

1 2	composer create-project --prefer-dist laravel/laravel laravel-menu-management cd laravel-menu-management

Step 2: Create the Menu Model and Migration

Create the Menu Model:

bash

php artisan make:model Menu -m

1	php artisan make:model Menu -m

Define the Migration:

In the migration file, create a menus table:

php

public function up()
{
    Schema::create('menus', function (Blueprint $table) {
        $table->id();
        $table->string('name'); // Name of the menu item
        $table->string('url'); // URL of the menu item
        $table->unsignedInteger('parent_id')->nullable(); // For nested menus
        $table->unsignedInteger('order')->default(0); // For sorting
        $table->timestamps();
    });
}

public function up()

{

Schema::create('menus', function (Blueprint $table) {

$table->id();

$table->string('name'); // Name of the menu item

$table->string('url'); // URL of the menu item

$table->unsignedInteger('parent_id')->nullable(); // For nested menus

$table->unsignedInteger('order')->default(0); // For sorting

$table->timestamps();

});

}

Step 3: Run the Migration

Run the migration to create the menus table:

bash

php artisan migrate

1	php artisan migrate

Step 4: Seed Some Menu Items

You can seed some initial menu items for testing.

Create a Seeder:

bash

php artisan make:seeder MenuSeeder

1	php artisan make:seeder MenuSeeder

Define the Seeder:

In MenuSeeder.php, add some sample menu items:

php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use App\Models\Menu;

class MenuSeeder extends Seeder
{
    public function run()
    {
        Menu::create(['name' => 'Home', 'url' => '/', 'order' => 1]);
        Menu::create(['name' => 'About', 'url' => '/about', 'order' => 2]);
        Menu::create(['name' => 'Contact', 'url' => '/contact', 'order' => 3]);
        Menu::create(['name' => 'Blog', 'url' => '/blog', 'order' => 4]);
    }
}

namespace Database\Seeders;

use Illuminate\Database\Seeder;

use App\Models\Menu;

class MenuSeeder extends Seeder

{

public function run()

{

Menu::create(['name' => 'Home', 'url' => '/', 'order' => 1]);

Menu::create(['name' => 'About', 'url' => '/about', 'order' => 2]);

Menu::create(['name' => 'Contact', 'url' => '/contact', 'order' => 3]);

Menu::create(['name' => 'Blog', 'url' => '/blog', 'order' => 4]);

}

Run the Seeder:

In DatabaseSeeder.php, call the MenuSeeder:

php

public function run()
{
    $this->call(MenuSeeder::class);
}

public function run()

{

$this->call(MenuSeeder::class);

}

Then run:

bash

php artisan db:seed

1	php artisan db:seed

Step 5: Create a Menu Management Controller

Create the Controller:

bash

php artisan make:controller MenuController

1	php artisan make:controller MenuController

Define the Controller Methods:

In MenuController.php, implement basic CRUD operations:

php

namespace App\Http\Controllers;

use App\Models\Menu;
use Illuminate\Http\Request;

class MenuController extends Controller
{
    public function index()
    {
        $menus = Menu::orderBy('order')->get();
        return view('menus.index', compact('menus'));
    }

    public function create()
    {
        return view('menus.create');
    }

    public function store(Request $request)
    {
        $request->validate([
            'name' => 'required|string',
            'url' => 'required|url',
            'order' => 'integer|nullable',
        ]);

        Menu::create($request->all());
        return redirect()->route('menus.index');
    }

    public function edit(Menu $menu)
    {
        return view('menus.edit', compact('menu'));
    }

    public function update(Request $request, Menu $menu)
    {
        $request->validate([
            'name' => 'required|string',
            'url' => 'required|url',
            'order' => 'integer|nullable',
        ]);

        $menu->update($request->all());
        return redirect()->route('menus.index');
    }

    public function destroy(Menu $menu)
    {
        $menu->delete();
        return redirect()->route('menus.index');
    }
}

namespace App\Http\Controllers;

use App\Models\Menu;

use Illuminate\Http\Request;

class MenuController extends Controller

{

public function index()

{

$menus = Menu::orderBy('order')->get();

return view('menus.index', compact('menus'));

}

public function create()

{

return view('menus.create');

}

public function store(Request $request)

{

$request->validate([

'name' => 'required|string',

'url' => 'required|url',

'order' => 'integer|nullable',

]);

Menu::create($request->all());

return redirect()->route('menus.index');

}

public function edit(Menu $menu)

{

return view('menus.edit', compact('menu'));

}

public function update(Request $request, Menu $menu)

{

$request->validate([

'name' => 'required|string',

'url' => 'required|url',

'order' => 'integer|nullable',

]);

$menu->update($request->all());

return redirect()->route('menus.index');

}

public function destroy(Menu $menu)

{

$menu->delete();

return redirect()->route('menus.index');

}

Step 6: Set Up Routes

Define routes for the menu management in routes/web.php:

php

use App\Http\Controllers\MenuController;

Route::resource('menus', MenuController::class);

use App\Http\Controllers\MenuController;

Route::resource('menus', MenuController::class);

Step 7: Create Views

Create views for listing, creating, and editing menus.

Create the Index View: resources/views/menus/index.blade.php

blade

@extends('layouts.app')

@section('content')
    <h1>Menus</h1>
    <a href="{{ route('menus.create') }}">Create Menu</a>
    <ul>
        @foreach ($menus as $menu)
            <li>
                {{ $menu->name }} - <a href="{{ $menu->url }}">{{ $menu->url }}</a>
                <a href="{{ route('menus.edit', $menu) }}">Edit</a>
                <form action="{{ route('menus.destroy', $menu) }}" method="POST" style="display:inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit">Delete</button>
                </form>
            </li>
        @endforeach
    </ul>
@endsection

@extends('layouts.app')

@section('content')

<h1>Menus</h1>

<a href="{{ route('menus.create') }}">Create Menu</a>

<ul>

@foreach ($menus as $menu)

<li>

{{ $menu->name }} - <a href="{{ $menu->url }}">{{ $menu->url }}</a>

@csrf

@method('DELETE')

<button type="submit">Delete</button>

</form>

</li>

@endforeach

</ul>

@endsection

Create the Create View: resources/views/menus/create.blade.php

blade

@extends('layouts.app')

@section('content')
    <h1>Create Menu</h1>
    <form action="{{ route('menus.store') }}" method="POST">
        @csrf
        <label>Name:</label>
        <input type="text" name="name" required>
        <label>URL:</label>
        <input type="text" name="url" required>
        <label>Order:</label>
        <input type="number" name="order" value="0">
        <button type="submit">Create</button>
    </form>
@endsection

@extends('layouts.app')

@section('content')

<h1>Create Menu</h1>

@csrf

<label>Order:</label>

<button type="submit">Create</button>

</form>

@endsection

Create the Edit View: resources/views/menus/edit.blade.php

blade

@extends('layouts.app')

@section('content')
    <h1>Edit Menu</h1>
    <form action="{{ route('menus.update', $menu) }}" method="POST">
        @csrf
        @method('PUT')
        <label>Name:</label>
        <input type="text" name="name" value="{{ $menu->name }}" required>
        <label>URL:</label>
        <input type="text" name="url" value="{{ $menu->url }}" required>
        <label>Order:</label>
        <input type="number" name="order" value="{{ $menu->order }}">
        <button type="submit">Update</button>
    </form>
@endsection

@extends('layouts.app')

@section('content')

@csrf

@method('PUT')

<input type="text" name="name" value="{{ $menu->name }}" required>

<input type="text" name="url" value="{{ $menu->url }}" required>

<label>Order:</label>

<input type="number" name="order" value="{{ $menu->order }}">

<button type="submit">Update</button>

</form>

@endsection

Step 8: Display the Menu in Your Application

You can display the menu in your application by fetching it from the database. For example, in your main layout file:

blade

<ul>
    @foreach (\App\Models\Menu::orderBy('order')->get() as $menu)
        <li><a href="{{ $menu->url }}">{{ $menu->name }}</a></li>
    @endforeach
</ul>

<ul>

@foreach (\App\Models\Menu::orderBy('order')->get() as $menu)

@endforeach

</ul>

Conclusion

With this setup, you have implemented a basic menu management system in Laravel. Users can create, edit, and delete menu items, and the menus can be displayed throughout the application. You can further enhance this system by adding features like nesting menus, user permissions, and styling the menu output. For more advanced functionality, consider using a package like laravel-menu, which provides additional features for managing menus.

Laravel Menus – Menu management

Step 1: Set Up Your Laravel Project

Step 2: Create the Menu Model and Migration

Step 3: Run the Migration

Step 4: Seed Some Menu Items

Step 5: Create a Menu Management Controller

Step 6: Set Up Routes

Step 7: Create Views

Step 8: Display the Menu in Your Application

Conclusion

Related Posts:

Leave a Comment Cancel Reply