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 :

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

  1. id – (int)5 – auto_increment – primary_key
  2. nama_kategori – (text)

produk

  1. id – (int)5 – auto_increment – primary_key
  2. nama_produk – (text)
  3. 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 :

Sampai disini dan untuk penjelasan selanjutnya, akan saya jelaskan cara membuat dinamyc tabs bootstrap dengan php pada sesi berikutnya, semoga bermanfaat.