Post Detail

PHP Framework

Cara Membuat Tab Panel Current Active URL

by Admin
22 September 2020
2726 views

Dalam kesempatan kali ini saya akan membuat sebuah tutorial bagaimana caranya membuat menu tab panel yang didalam case kali ini tab panel nya selalu aktif ketika kita reload page juga, dalam kasus kali ini saya menggunakan laravel. Seperti yang terlihat pada tangkapan layar bahwa ketika reload halaman diusakan panel yang kita pilih tetap pada posisinya. Untuk memulai tahapan - tahapan nya kalian harus melakukan tahapan - tahapan yang saya lakukan.

1. Create new project laravel

$ composer create-project --prefer-dist laravel/laravel tab-pane

2. Setelah melakukan new project buat controller baru dengan nama Controller TabPaneController

% php artisan make:controller TabPaneController

3. Setelah membuat Controller baru, ubah default route web.php menjadi seperti ini

Route::get('/', [TabPaneController::class, 'index']);
Route::get('/panel', [TabPaneController::class, 'panel']);

4. Di dalam Controller TabPaneController kita buat dua fungsi tersebut.

    public function panel()
    {
        return view('welcome');
    }

    public function index()
    {
        return redirect()->to('panel#home');
    }

5. Terakhir karena default nya kita menggunakan view welcome laravel silahkan kalian rubah view defaultnya menjadi seperti yang saya buat.

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Laravel</title>

        <!-- Fonts -->
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    </head>
    <body>
        <div class="jumbotron text-center">
            <h1>Example Tab Pane Current Active</h1>
            <p>This Is Example Tab Pane Current Active Laravel !</p>
          </div>
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
                            aria-selected="false">Home</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile"
                            aria-selected="false">Profile</a>
                        </li>
                        <li class="nav-item">
                        <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact"
                            aria-selected="false">Contact</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
                            <h3>HOME</h3>
                        </div>
                        <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
                            <h3>Profile</h3>
                        </div>
                        <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
                            <h3>Contact</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script>
            $(function(){
                var url = document.location.toString();
                if (url.match('#')) {
                    console.log(url.split('#')[1]);
                    $('a[href="#'+url.split('#')[1]+'"]').parent().addClass('active');
                    $('#'+url.split('#')[1]).addClass('active in')
                }
                $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                    window.location.hash = e.target.hash;
                });
            });
        </script>
    </body>
</html>

Harusnya apabila kalian melakukan tahapan - tahapan yang saya jelaskan di atas, resultnya seperti pada gambar yang saya lampirkan. Semoga artikel ini bermanfaat, untuk kalian yang ingin meng clone project nya silahkan kalian lakukan clone project nya di github. Demikianlah, sekali lagi semoga bermanfaat, and keep share brother.

LINKE DEMO : http://tabpanel.asepit.com/