132 lines
4.1 KiB
PHP
132 lines
4.1 KiB
PHP
|
|
|
|
<?php include 'header.php'; ?>
|
|
<style>
|
|
/* CSS styles for better readability and maintainability */
|
|
.tab-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.nav-tabs {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
background-color: #333;
|
|
}
|
|
|
|
.nav-tabs li {
|
|
margin: 0;
|
|
}
|
|
|
|
.nav-tabs a {
|
|
display: block;
|
|
padding: 14px 20px;
|
|
text-decoration: none;
|
|
color: white;
|
|
text-align: center;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
.nav-tabs a.active,
|
|
.nav-tabs a:hover {
|
|
background-color: #4CAF50;
|
|
}
|
|
|
|
.tab-content {
|
|
border-top: 1px solid #ddd;
|
|
padding: 20px;
|
|
}
|
|
|
|
.tab-content-item {
|
|
display: none;
|
|
}
|
|
|
|
.tab-content-item.active {
|
|
display: block;
|
|
}
|
|
|
|
.penyakit-image {
|
|
text-align: center;
|
|
max-width: 100%;
|
|
height: auto;
|
|
margin-bottom: 20px;
|
|
display: block;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
</style>
|
|
|
|
<div class="kontainer-besar halaman-atas jarakbawahatas-5 mb-5 wow fadeIn" data-wow-delay="0.1s">
|
|
<div class="kontainer teks-tengah jarakbawahatas-5">
|
|
<h1 class="tampilan-3 teks-hitam jarakbawah-4 animated slideInDown" style="color:white!important">Penyakit</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="kontainer-xxl jarakbawahatas-5">
|
|
<div class="kontainer">
|
|
<div class="tab-container">
|
|
<ul class="nav-tabs" id="myTab">
|
|
<?php
|
|
$result = $koneksi->query("SELECT idpenyakit, kode_penyakit, namapenyakit, penjelasan, solusi FROM penyakit");
|
|
$first = true;
|
|
while ($row = $result->fetch_assoc()) {
|
|
$id = $row['idpenyakit'];
|
|
$namapenyakit = htmlspecialchars($row['namapenyakit']);
|
|
?>
|
|
<li>
|
|
<a href="#content-<?php echo $id; ?>" class="<?php echo $first ? 'active' : ''; ?>"><?php echo $namapenyakit; ?></a>
|
|
</li>
|
|
<?php
|
|
$first = false;
|
|
}
|
|
?>
|
|
</ul>
|
|
|
|
<div class="tab-content" id="myTabContent">
|
|
<?php
|
|
$result->data_seek(0); // Reset pointer to the beginning of the result set
|
|
$first = true;
|
|
while ($row = $result->fetch_assoc()) {
|
|
$id = $row['idpenyakit'];
|
|
$namapenyakit = htmlspecialchars($row['namapenyakit']);
|
|
$penjelasan = htmlspecialchars($row['penjelasan']);
|
|
$solusi = htmlspecialchars($row['solusi']);
|
|
?>
|
|
<div id="content-<?php echo $id; ?>" class="tab-content-item <?php echo $first ? 'active' : ''; ?>">
|
|
<?php if (!empty($row['foto'])) : ?>
|
|
<img src="foto/<?= $row['foto'] ?>" alt="<?= $namapenyakit ?>" class="penyakit-image">
|
|
<?php endif; ?>
|
|
<h4>Penjelasan</h4>
|
|
<p><?php echo $penjelasan; ?></p>
|
|
<h4>Penanganan</h4>
|
|
<p><?php echo $solusi; ?></p>
|
|
</div>
|
|
<?php
|
|
$first = false;
|
|
}
|
|
?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const tabs = document.querySelectorAll('.nav-tabs li a');
|
|
const contents = document.querySelectorAll('.tab-content-item');
|
|
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', (e) => {
|
|
e.preventDefault();
|
|
tabs.forEach(item => item.classList.remove('active'));
|
|
contents.forEach(content => content.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
document.querySelector(tab.getAttribute('href')).classList.add('active');
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<?php include 'footer.php'; ?>
|