Pada kesempatan kali ini saya akan menjelaskan cara membuat dinamyc tabs bootstrap dengan php part1. Perlu teman-teman ketahui sebelumnya, tabs konten di bootstrap banyak sekali manfaatnya, tidak hanya untuk menampung konten saja, tabs tersebut bisa juga diterapkan untuk menampung katalog produk. Struktur dari tabs tersebut menggunakan under list beserta dengan list html nya, namun kesulitan yang biasa ditemukan ketika ingin diterapkan dengan php untuk menampilkan data berdasarkan kategori tabs yang diambil dari database. Dikarenakan masing-masing dari konten tersebut mengacu terhadap list tabs berdasarkan kategori konten tersebut nantinya. Namun kalian tidak perlu khawatir, karena disini saya akan memberikan cara menggunakannya dengan php dan mysql.
Berikut struktur pure HTML nya :
|
1 2 3 4 5 6 7 8 |
<div class="container"> <h1 class="mb-4">Cara Membuat Dinamyc Tabs Bootstrap Dengan PHP</h1> <ul class="nav nav-tabs"> <li class="active"><a href="#1" data-toggle="tab" aria-expanded="true">Sepatu</a></li><li class=""><a href="#2" data-toggle="tab" aria-expanded="false">Sandal</a></li><li class=""><a href="#3" data-toggle="tab" aria-expanded="false">Celana</a></li><li class=""><a href="#4" data-toggle="tab" aria-expanded="false">Baju</a></li></ul> <div class="tab-content"> <div id="1" class="tab-pane fade active in"><div class="col-md-3 product"><h4>Sepatu Nike ORI</h4></div><div class="col-md-3 product"><h4>Sepatu Sniker </h4></div><div class="clear_both"></div></div><div id="2" class="tab-pane fade"><div class="col-md-3 product"><h4>Sandal Gunung Boogie</h4></div><div class="col-md-3 product"><h4>Sandal Gunung Nike</h4></div><div class="col-md-3 product"><h4>Sandal Gunung KW</h4></div><div class="clear_both"></div></div><div id="3" class="tab-pane fade"><div class="col-md-3 product"><h4>Celana Cargo Pendek</h4></div><div class="col-md-3 product"><h4>Celana Chino Panjang</h4></div><div class="col-md-3 product"><h4>Celana Slim Fit</h4></div><div class="col-md-3 product"><h4>Celana Bahan Kantor</h4></div><div class="clear_both"></div></div><div id="4" class="tab-pane fade"><br>Belum ada produk!<div class="clear_both"></div></div></div> </div> |
Seperti yang terlihat dari struktur html tersebut, dimana struktur yang saya berikan masih dalam bentuk HTML statis dan data dari masing-masing tabs beserta dengan konten tabsnya masih statis atau belum diambil dari database. Apabila ingin menampilkannya secara dinamyc dari database, maka kalian bisa ikuti tahapan yang saya berikan dibawah ini.
Berikut Tahapannya :
- Buat database terlebih dahulu dengan nama produk
- Buat lagi dua buah tabel database dengan nama (kategori dan produk)
- Dengan spesifikasi sebagai berikut:
kategori
- id – (int)5 – auto_increment – primary_key
- nama_kategori – (text)
produk
- id – (int)5 – auto_increment – primary_key
- nama_produk – (text)
- kategori_produk (int)5
- Selanjutnya isi masing-masing tabel tersebut dengan record dummy (hanya untuk contoh)
- Selanjutnya buat lagi satu buah file koneksi php dengan nama conn.php, dan ketikan kode seperti berikut :
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php $server = "localhost"; $user = "root"; // sesuaikan dengan username mysql $pass = ""; // sesuaikan dengan password mysql $dbname = "produk"; // nama databasenya $conn = mysqli_connect($server, $user, $pass, $dbname); if(!$conn){ die ("Connection failed: ".mysqli_connect_error()); } |
Sampai disini dan untuk penjelasan selanjutnya, akan saya jelaskan cara membuat dinamyc tabs bootstrap dengan php pada sesi berikutnya, semoga bermanfaat.