Implementation of Tabview in Laravel
To create a tabbed view in Laravel Blade for “My Organizations” and “All Organizations,” you can use Bootstrap, a popular CSS framework. Below is an example:
Steps:
-
Add Bootstrap CSS and JS:
Include the Bootstrap CSS and JS files in your Blade layout file, e.g.,app.blade.php.<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> -
Create a Blade File with Tabs:
Create a Blade view file, e.g.,organizations.blade.php.<!-- resources/views/organizations.blade.php --><div class="container mt-5"> <ul class="nav nav-tabs" id="organizationTabs" role="tablist"> <!-- Tab Links --> <li class="nav-item" role="presentation"> <button class="nav-link active" id="my-organizations-tab" data-bs-toggle="tab" data-bs-target="#my-organizations" type="button" role="tab" aria-controls="my-organizations" aria-selected="true"> My Organizations </button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="all-organizations-tab" data-bs-toggle="tab" data-bs-target="#all-organizations" type="button" role="tab" aria-controls="all-organizations" aria-selected="false"> All Organizations </button> </li> </ul> <div class="tab-content" id="organizationTabsContent"> <!-- My Organizations Tab --> <div class="tab-pane fade show active" id="my-organizations" role="tabpanel" aria-labelledby="my-organizations-tab"> <h3 class="mt-3">My Organizations</h3> <ul> @foreach ($myOrganizations as $organization) <li>{{ $organization->name }}</li> @endforeach </ul> </div> <!-- All Organizations Tab --> <div class="tab-pane fade" id="all-organizations" role="tabpanel" aria-labelledby="all-organizations-tab"> <h3 class="mt-3">All Organizations</h3> <ul> @foreach ($allOrganizations as $organization) <li>{{ $organization->name }}</li> @endforeach </ul> </div> </div> </div> -
Pass Data to the View:
In your controller, pass themyOrganizationsandallOrganizationscollections to the view.public function showOrganizations(){ $myOrganizations = Organization::where('user_id', auth()->id())->get(); $allOrganizations = Organization::all(); return view('organizations', compact('myOrganizations', 'allOrganizations')); } -
Route to the View:
Add a route for the controller method inweb.php.Route::get('/organizations', [OrganizationController::class, 'showOrganizations'])->name('organizations.index');
Result:
- A tabbed interface where:
- The “My Organizations” tab lists only the organizations related to the logged-in user.
- The “All Organizations” tab lists all organizations in the database.
