Laravel Bootstrap Tabs With Dynamic Content Loading

Hello Artisan

in this example tutorial i am going to show you dynamic bootstrap example in Laravel. If you don't know how to create dynamic tabs in laravel then this tutorial is for you. Just follow from start to finis then you will understand how to dynamic bootstrap tabs in laravel.

Sometimes in many web application like ecommerce website we need to some product respect to some category. That time we need tabs. In this example i also show you exactly same system. 

We have some category and i will show you all the product respect to category. So let's start our dynamic tabs laravel tutorial. 

 

Step 1: Download laravel

To create laravel dynamic tabs, download laravel fresh app using this below command.

composer create-project --prefer-dist laravel/laravel blog

 

Step 2: Create Migration

For this dynamic bootstrap tabs example in laravel tutorial we have to create our category model and product. so run below command.

php artisan make:model Category -m
php artisan make:model Product -m

 

In this step i will use Category model and and Product model to create dynamic bootstrap tabs. So paste this below code to your categories and products table.

database/migrations/create_categories_table.php

 public function up()
    {
        Schema::create('categories', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

 

database/migrations/create_categories_table.php

public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->id();
            $table->foreignId('category_id');
            $table->string('name');
            $table->timestamps();
        });
    }

 

After create "categories" and "products table you should setup Category model and Product model as like below

app/Models/Category.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Category extends Model
{
    use HasFactory;

    public function products()
    {
    	return $this->hasMany(Product::class);
    }
}

 

app/Models/Product.php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Product extends Model
{
    use HasFactory;

    public function products()
    {
    	return $this->belongsTo(Category::class);
    }
}

 

Step 3: Define routes

Now, we need to define the routes inside the routes >> web.php file.

routes/web.php

Route::namespace('App\Http\Controllers')->middleware('guest')->group(function () {
   
    Route::get('/', 'TestController@index');
   
});

 

Step 4: Create Controller

Now we need a controller. So create TestController for laravel dynamic tabs.

Now open test controller and paste this below code

app/Http/Controllers/TestController.php

namespace App\Http\Controllers;
use App\Models\Category;
use Illuminate\Http\Request;

class TestController extends Controller
{
    public function index()
    {   
        $category = Category::with('products')->get();
    	return view()->exists('welcome') ? view('welcome',compact('category')) : '';
    }
}

 

Step 5: Create View File

Now everything is ok. we have to just create our view file. so create view inside the following directory

resources/views/welcome.blade.php

 

Recommended : Advanced Search Filter using Dropdown in Laravel

 

Now you can check. Hope this bootstrap laravel dynamic tabs tutorial will help you.

 

#laravel #laravel-8 #laravel-8x #tabs #bootstrap-tabs