Cara Membuat Dinamyc Tabs Bootstrap Dengan PHP Part2

Melanjutkan dari sesi yang sebelumnya, pada kesempatan kali ini saya akan menjelaskanÂ cara membuat dinamyc tabs bootstrap dengan php part2. Jika sebelumnya teman-teman sudah membuat database dan tabel beserta dengan file koneksi php. Dan pada penjelasan ini saya akan melanjutkan ke tahap selanjutnya, yaitu membuat file index.php yang dimana file index tersebut adalah untuk menyimpan file bootstrap css dan js beserta untuk menampilkan hasil dari tabs dinamyc yang dibuat. Lansung saja, kalian bisa ikuti tahapan selanjutnya dibawah ini.

Berikut Tahapannya :

Buat lagi satu buah file php dengan nama index.php, dan ketikan seperti kode berikut :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cara Membuat Dinamyc Tabs Bootstrap Dengan PHP</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1 class="mb-4">Cara Membuat Dinamyc Tabs Bootstrap Dengan PHP</h1>
<?php include_once("tabsnav.php"); ?>
<ul class="nav nav-tabs">
<?php echo $kategori; ?>
</ul>
<div class="tab-content">
<?php echo $produk; ?>
</div>
</div>
</body>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Cara Membuat Dinamyc Tabs Bootstrap Dengan PHP</title>

</head>

<body>

<h1 class="mb-4">Cara Membuat Dinamyc Tabs Bootstrap Dengan PHP</h1>

<?php include_once("tabsnav.php"); ?>

<?php echo $kategori; ?>

</ul>

<?php echo $produk; ?>

</div>

</body>

</html>

Jika sudah save file tersebut.
Buat lagi satu buah file php dengan nama tabsnav.php, ketika seperti kode berikut :

<?php
require_once("conn.php");
$query_kategori = "SELECT id, nama_kategori FROM kategori LIMIT 10";
$cek_kategori = mysqli_query($conn, $query_kategori) or die("database error:". mysqli_error($conn));
$akttiv = 0 ;
$kategori = '';
$produk = '';

while( $kat = mysqli_fetch_assoc($cek_kategori) ) {
$current_tab = "";
$current_content = "";
if(!$akttiv) {
$akttiv = 1;
$current_tab = 'active';
$current_content = 'in active';
}

$kategori.= '<li class="'.$current_tab.'"><a href="#'.$kat['id'].'" data-toggle="tab">'.
$kat['nama_kategori'].'</a></li>';
$produk .= '<div id="'.$kat["id"].'" class="tab-pane fade '.$current_content.'">';
$query_produk = "SELECT id, nama_produk, kategori_produk FROM produk WHERE kategori_produk = ".$kat["id"];
$cek_produk = mysqli_query($conn, $query_produk) or die("database error:". mysqli_error($conn));

if(!mysqli_num_rows($cek_produk)) {
$produk .= '<br>Belum ada produk!';
}

while( $product = mysqli_fetch_assoc($cek_produk) ) {
$produk .= '<div class="col-md-3 product">';
$produk .= '<h4>'.$product["nama_produk"].'</h4>';
$produk .= '</div>';
}
$produk .= '<div class="clear_both"></div></div>';
}
?>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<?php

require_once("conn.php");

$query_kategori = "SELECT id, nama_kategori FROM kategori LIMIT 10";

$cek_kategori = mysqli_query($conn, $query_kategori) or die("database error:". mysqli_error($conn));

$akttiv = 0 ;

$kategori = '';

$produk = '';

while( $kat = mysqli_fetch_assoc($cek_kategori) ) {

$current_tab = "";

$current_content = "";

if(!$akttiv) {

$akttiv = 1;

$current_tab = 'active';

$current_content = 'in active';

}

$kategori.= '<li class="'.$current_tab.'"><a href="#'.$kat['id'].'" data-toggle="tab">'.

$kat['nama_kategori'].'</a></li>';

$produk .= '<div id="'.$kat["id"].'" class="tab-pane fade '.$current_content.'">';

$query_produk = "SELECT id, nama_produk, kategori_produk FROM produk WHERE kategori_produk = ".$kat["id"];

$cek_produk = mysqli_query($conn, $query_produk) or die("database error:". mysqli_error($conn));

if(!mysqli_num_rows($cek_produk)) {

$produk .= '<br>Belum ada produk!';

}

while( $product = mysqli_fetch_assoc($cek_produk) ) {

$produk .= '<div class="col-md-3 product">';

$produk .= '<h4>'.$product["nama_produk"].'</h4>';

$produk .= '</div>';

}

$produk .= '<div class="clear_both"></div></div>';

}

Jika sudah, save semua file yang sebelumnya sudah dibuat, termasuk file index.php dan juga tabsnav.php
Selanjutnya jalankan file index.php tersebut melalui browser dan web server kalian.

Sampai disini penjelasan saya mengenai cara membuat dinamyc tabs bootstrap dengan php part2, semoga bermanfaat.

Cara Membuat Dinamyc Tabs Bootstrap Dengan PHP Part2

Berikut Tahapannya :

Facebook DUMET School

Konsultasi Gratis

Categories