Cara Membuat Tab Dinamis, Biar Bisa Kembali ke Tab Sebelumnya Dengan Bootstrap dan Php

Share:

Halo semuanya, kembali lagi di sahretech. Baiklah pada kesempatan yang berbahagia kali ini saya akan berbagi tutorial cara membuat tab dinamis dengan menggunakan bootstrap dan bahasa php, biar sewaktu melakukan aksi tertentu tetap kembali ke tab sebelumnya. Seperti apa maksud dan tujuannya?, silahkan ikuti pembahasannya berikut ini.



Tab Dinamis Vs Tab Statis

Jika kalian menggunakan versi tab bootstrap tanpa dimodifikasi, maka kalian akan menemukan beberapa permasalahan. Misalnya ada 3 buah tab, tab yang saat ini kalian kunjungi adalah tab c, kemudian kalian melakukan aksi CRUD, maka setelah proses selesai kalian akan diarahkan kembali dengan membuka tab a. Padahal dan seharsunya yang diinginkan tab c tetap terbuka, inilah yang saya maksud dengan tab statis.

Selain itu, jika 3 buah tab tersebut berisi ribuan data dan harus diload semuanya, maka hasilnya sama dengan kalian membuat 3 halaman tapi digabung jadi 1 halaman. Nggak kebayang kan berapa lama waktu website untuk meload halaman tersebut?.

Nah itulah penjelasan singkat yang saya maksud tentang tab dinamis dan tab statis. Pada tutorial kali ini kita akan memanfaatkan fungsi php yang saya rasa kalian semua sudah tahu, tapi ternyata fungsi ini cukup berguna untuk mengatasi masalah seperti ini. Caranya mudah, ayo siapkan web editor kalian.


Cara Membuat Tab Dinamis Denan Bootstrap dan Php

1. Buatlah sebuah folder baru di dalam htdocs dengan nama tab_dinamis, lalu buat sebuah file baru di dalamnya dengan nama index.php. 

2. Buatlah sturuktur html sederhana dengan mengimport library bootstrap cdn seperti script di bawah ini.



<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> </head> <body> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"> </script> </body> </html>



3. Copy script di bawah ini untuk membuat 3 buah tab(tab home, tab profile, tab contact), lalu pastekan di bawah tag   <body>  . Coba kalian jalankan di web browser dan klik tiap tab-tab yang ada dan rasakan hasilnya.


<div class="container mt-4"> <div class="alert alert-success"> <h1>Belajar Membuat Tab Dinamis</h1> </div> <ul class="nav nav-tabs" id="myTab" role="tablist"> <?php $p = @$_GET['p']; ?> <li class="nav-item" role="presentation"> <a class="nav-link <?php echo $p == '' || $p == 'home' ? 'active' : ''; ?>" href="index.php?p=home">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link <?php echo $p == 'profile' ? 'active' : ''; ?>" href="index.php?p=profile">Profile</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link <?php echo $p == 'contact' ? 'active' : ''; ?>" href="index.php?p=contact">Contact</a> </li> </ul> </div>



Penjelasan

Pertama kita tampung data inisial tab saat ini dengan menggunakan variabel  $p . Tanda  @  digunakan untuk menghindari error saat method  $_GET  tidak ditemukan. Buat class active secara dinamis, dengan memasukkan script php, salah satu contohnya adalah seperti ini



<?php echo $p == 'profile' ? 'active' : ''; ?>

Script tersebut artinya jika   $p   sama dengan profile maka tampilkan   active   atau jika tidak maka kosongkan.

Lalu buatlah link href di tiap tab dengan menyertakan tanda   ?p=home   pada home,   ?p=profile   pada profile, dan   ?p=contact   pada contact.


4. Copy script di bawah ini untuk membuat 3 konten yang berbeda, lalu pastekan di bawah tag   </ul>  . Coba kalian jalankan di web browser untuk melihat hasilnya.

        
        
    <div class="tab-content" id="myTabContent"> <?php if($p == '' || $p == 'home'){ ?> <div class="tab-pane fade show active">Home</div> <?php }elseif($p == 'profile'){ ?> <div class="tab-pane fade show active">Profile </div> <?php }else{ ?> <div class="tab-pane fade show active">Contact</div> <?php } ?> </div>


Penjelasan

Kita menggunakan fungsi if untuk menampilkan hasil sesuai tab. jika variabel   $p   sama dengan kosong atau home maka menampilkan konten home. Jika variabel   $p   sama dengan profile maka akan menampilkan konten profile. Dan jika semua kondisi di atas tidak terpenuhi maka tampilkan konten conctact.

Jika berhasil maka tampilan akhirnya akan tampak seperti gambar di bawah ini. Selanjutnya tinggal kalian sempurnakan dengan project yang kalian punya.

sahretech
Hasil tab dinamis




Gampang kan?, ternyata sangat mudah. Ternyatan, fungsi yang selama ini kita gunakan dalam kodingan php ternyata sangat berguna untuk membuat meneylesaikan masalah ini. Oh iya, berikut ini saya perlihatkan script lengkapnya kepada kalian

            

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> </head> <body> <div class="container mt-4"> <div class="alert alert-success"> <h1>Belajar Membuat Tab Dinamis</h1> </div> <ul class="nav nav-tabs" id="myTab" role="tablist"> <?php $p = @$_GET['p']; ?> <li class="nav-item" role="presentation"> <a class="nav-link <?php echo $p == '' || $p == 'home' ? 'active' : ''; ?>" href="index.php?p=home">Home</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link <?php echo $p == 'profile' ? 'active' : ''; ?>" href="index.php?p=profile">Profile</a> </li> <li class="nav-item" role="presentation"> <a class="nav-link <?php echo $p == 'contact' ? 'active' : ''; ?>" href="index.php?p=contact">Contact</a> </li> </ul> <div class="tab-content" id="myTabContent"> <?php if($p == '' || $p == 'home'){ ?> <div class="tab-pane fade show active">Home</div> <?php }elseif($p == 'profile'){ ?> <div class="tab-pane fade show active">Profile </div> <?php }else{ ?> <div class="tab-pane fade show active">Contact</div> <?php } ?> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"> </script> </body> </html>


Sekian tutorial cara membuat tab dinamis dengan bootstrap dan php. Semoga artikel ini bermanfaat bagi kalian semua. Kurang lebihnya saya mohon maaf, apabila ada pertanyaan silahkan tinggalkan di kolom komentar di bawah ini dan mari kita diskusikan bersama. Terima kasih, sampai jumpa di tutorial pemrograman keren lainnya. Happy Coding.


2 comments:

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik

Tidak boleh menyertakan link atau promosi produk saat berkomentar. Komentar tidak akan ditampilkan. Hubungi 081271449921(WA) untuk dapat menyertakan link dan promosi