Cara Membuat Dinamyc Tabs Bootstrap Dengan PHP Part2

Melanjutkan dari sesi yang sebelumnya, di kesempatan kali ini saya akan menjelaskanÂ cara membangun dinamyc tabs bootstrap dengan php part2. Sekiranya sebelumnya teman-teman telah membangun database dan tabel dan juga dengan file koneksi php. Dan di penjelasan ini saya akan melanjutkan ke tahap berikutnya, yaitu membangun file index.php yang dimana file index tersebut yakni bagi menyimpan file bootstrap css dan js dan juga bagi menampilkan hasil dari tabs dinamyc yang dibangun. Lansung saja, kalian dapat ikuti tahapan berikutnya dibawah ini.

Berikut Tahapannya :

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

<!DOCTYPE html><br />
<html lang=”en”><br />
<head><br />
	<meta charset=”UTF-8″><br />
	<title>Cara Merancang Dinamyc Tabs Bootstrap Dengan PHP</title></p>
<p><link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css” integrity=”sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u” crossorigin=”anonymous”><br />
</head><br />
<body><br />
<div class=”container”><br />
<h1 class=”mb-4″>Cara Merancang Dinamyc Tabs Bootstrap Dengan PHP</h1><br />
<?php include_once(“tabsnav.php”); ?><br />
<ul class=”nav nav-tabs”><br />
<?php echo $kategori; ?><br />
</ul><br />
<div class=”tab-content”><br />
<?php echo $produk; ?><br />
</div><br />
</div><br />
</body></p>
<p><script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js” integrity=”sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa” crossorigin=”anonymous”></script><br />
<script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script><br />
</html>

<!DOCTYPE html>

<head>

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

</head>

<body>

<h1 class=“mb-4”>Cara Merancang Dinamyc Tabs Bootstrap Dengan PHP</h1>

<?php include_once(“tabsnav.php”); ?>

<?php echo $kategori; ?>

</ul>

<?php echo $produk; ?>

</div>

</body>

</html>

Sekiranya telah save file tersebut.
Bikin lagi satu buah file php dengan nama tabsnav.php, ketika seperti kode berikut :

<?php<br />
require_once(“conn.php”);<br />
$query_kategori = “SELECT id, nama_kategori FROM kategori LIMIT 10”;<br />
$cek_kategori = mysqli_query($conn, $query_kategori) or die(“database error:”. mysqli_error($conn));<br />
$akttiv = 0 ;<br />
$kategori = ”;<br />
$produk = ”;</p>
<p>while( $kat = mysqli_fetch_assoc($cek_kategori) ) {<br />
$current_tab = “”;<br />
$current_content = “”;<br />
if(!$akttiv) {<br />
$akttiv = 1;<br />
$current_tab = ‘active’;<br />
$current_content = ‘in active’;<br />
}</p>
<p>$kategori.= ‘<li class=”‘.$current_tab.'”><a href=”#’.$kat[‘id’].'” data-toggle=”tab”>’.<br />
$kat[‘nama_kategori’].'</a></li>’;<br />
$produk .= ‘<div id=”‘.$kat[“id”].'” class=”tab-pane fade ‘.$current_content.'”>’;<br />
$query_produk = “SELECT id, nama_produk, kategori_produk FROM produk WHERE kategori_produk = “.$kat[“id”];<br />
$cek_produk = mysqli_query($conn, $query_produk) or die(“database error:”. mysqli_error($conn));</p>
<p>if(!mysqli_num_rows($cek_produk)) {<br />
$produk .= ‘<br>Belum ada produk!’;<br />
}</p>
<p>while( $product = mysqli_fetch_assoc($cek_produk) ) {<br />
$produk .= ‘<div class=”col-md-3 product”>’;<br />
$produk .= ‘<h4>’.$product[“nama_produk”].'</h4>’;<br />
$produk .= ‘</div>’;<br />
}<br />
$produk .= ‘<div class=”clear_both”></div></div>’;<br />
}<br />
?></p>
<p><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>’;

}

Sekiranya telah, save segala file yang sebelumnya telah dibangun, termasuk file index.php dan pun tabsnav.php
Berikutnya jalankan file index.php ter
sumber :kursuswebprogramming.com/blog/

(Visited 5 times, 1 visits today)

Berikut Tahapannya :

Leave a Reply Cancel reply