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:

1. 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>
   

2. 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>
   

3. Pass Data to the View:
   In your controller, pass the myOrganizations and allOrganizations collections to the view.

   public function showOrganizations()
   {
       $myOrganizations = Organization::where('user_id', auth()->id())->get();
       $allOrganizations = Organization::all();
   
       return view('organizations', compact('myOrganizations', 'allOrganizations'));
   }
   

4. Route to the View:
   Add a route for the controller method in web.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.