Postingan lainnya
Memberikan efek terpilih (class="active")?
Bagaimana memberikan efek terpilih pada menu, atau dalam bahasa pemrograman adalah menambahkan active pada class yang digunakan, jika menu memiliki dropdown menu dan menggunakan fungsi switch menu pada link ? Sebagai contoh yang seharusnya (dengan efek menu terpilih) adalah sebagai berikut :
<div class="main-sidebar sidebar-style-2">
<aside id="sidebar-wrapper">
<div class="sidebar-brand">
<a href="?page=dashboard">Sarpras</a>
</div>
<div class="sidebar-brand sidebar-brand-sm">
<a href="?page=dashboard">SMAI</a>
</div>
// halalam Menu
<?php include 'menu.php'
?>
</aside>
</div>
// Halaman Content
<div class="main-content">
<?php include 'konten.php' ?>
</div>
// halaman menu.php
<ul class="sidebar-menu">
<li class="menu-header">Dashboard</li>
<li>
<a href="?page=dashboard" class="nav-link"><i class="fas fa-fire"></i><span>Dashboard</span></a>
</li>
<?php if (cek_status($_SESSION['user']) == 0) : ?>
<li class="menu-header">Data</li>
<li class="dropdown">
<a href="javascript:void(0)" class="nav-link has-dropdown" data-toggle="dropdown"><i class="fas fa-database"></i> <span>Data Master</span></a>
<ul class="dropdown-menu">
<li>
<a class="nav-link" href="?page=guru">Data Guru</a>
</li>
<li>
<a class="nav-link" href="?page=kelas">Data Kelas</a>
</li>
<li>
<a class="nav-link" href="?page=siswa">Data Siswa</a>
</li>
<!-- <li><a class="nav-link" href="">Data Tahun Ajaran</a></li> -->
<li>
<a class="nav-link" href="?page=mapel">Data Mapel</a>
</li>
<li>
<a class="nav-link" href="?page=profile">Data Peminjam</a>
</li>
<!-- <li><a class="nav-link" href="">Lokasi</a></li> -->
</ul>
</li>
<li>
<a href="?page=sarpras"><i class="fas fa-toolbox"></i><span>Data Sarpras</span></a>
</li>
<li>
<a href="?page=jadwal"><i class="fas fa-clipboard-list"></i><span>Jadwal</span></a>
</li>
<li class="menu-header">Peminjaman</li>
<l>
<a class="nav-link" href="?page=pkbm"><i class="fas fa-user-graduate"></i> <span>Pinjaman KBM</span></a>
</li>
<li>
<a class="nav-link" href="?page=pinjaman"><i class="fas fa-book"></i> <span>Pinjaman</span></a>
</li>
<li class="menu-header">Pengembalian</li>
<li ><a class="nav-link" href="?page=kembalikbm"><i class="fas fa-user-graduate"></i> <span>Pinjaman KBM</span></a></li>
<li><a class="nav-link" href="?page=kembali"><i class="fas fa-book"></i> <span>Pinjaman</span></a></li>
<?php endif ?>
<!-- ============================Pimpinan=========================== -->
<?php if (cek_status($_SESSION['user']) == 1) : ?>
<li class="menu-header">Setujui Pinjaman</li>
<li>
<a href="?page=persetujuan"><i class="fas fa-check"></i><span>Disposisi Peminjaman</span></a>
</li>
<li class="menu-header">Laporan Sarana Prasarana</li>
<li>
<a href="?page=lapsarpras"><i class="fas fa-toolbox"></i><span>Sarana Prasarana</span></a>
</li>
<!-- ================== -->
<li class="menu-header">Laporan Pinjaman</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="far fa-file-pdf"></i> <span>Peminjaman</span></a>
<ul class="dropdown-menu">
<li>
<a class="nav-link" href="?page=lappinjamankbm">Pinjaman KBM</a>
</li>
<li>
<a class="nav-link" href="?page=lappinjaman">Pinjaman</a>
</li>
</ul>
</li>
<!-- ===---=== -->
<li class="menu-header">Laporan Pengembalian</li>
<li class="dropdown">
<a href="#" class="nav-link has-dropdown" data-toggle="dropdown"><i class="far fa-file-pdf"></i> <span>Pengembalian</span></a>
<ul class="dropdown-menu">
<li>
<a class="nav-link" href="?page=kembalikbm">Pinjaman KBM</a>
</li>
<li>
<a class="nav-link" href="?page=lapkembali">Pinjaman</a>
</li>
</ul>
</li>
<?php endif ?>
</ul>
// halaman content.php
<?php
switch ($_GET['page']) {
case 'dashboard':
include 'page/dashboard.php';
break;
//================= Page data guru =================
case 'guru':
include 'page/guru/guru.php';
break;
case 'addguru':
include 'page/guru/addguru.php';
break;
case 'editguru':
include 'page/guru/editguru.php';
break;
case 'delguru':
include 'page/guru/delguru.php';
break;
//================= Page/admin data kelas =================
case 'kelas':
include 'page/kelas/kelas.php';
break;
case 'addkelas':
include 'page/kelas/addkelas.php';
break;
case 'editkelas':
include 'page/kelas/editkelas.php';
break;
case 'delkelas':
include 'page/kelas/delkelas.php';
break;
// ================= Page/admin data mapel =================
case 'mapel':
include 'page/mapel/mapel.php';
break;
case 'addmapel':
include 'page/mapel/addmapel.php';
break;
case 'editmapel':
include 'page/mapel/editmapel.php';
break;
case 'delmapel':
include 'page/mapel/delmapel.php';
break;
//================= Page/admin data siswa =================
case 'siswa':
include 'page/siswa/siswa.php';
break;
case 'addsiswa':
include 'page/siswa/addsiswa.php';
break;
case 'editsiswa':
include 'page/siswa/editsiswa.php';
break;
case 'delsiswa':
include 'page/siswa/delsiswa.php';
break;
//================= Page/admin data jadwal =================
case 'jadwal':
include 'page/jadwal/jadwal.php';
break;
case 'addjadwal':
include 'page/jadwal/addjadwal.php';
break;
case 'editjadwal':
include 'page/jadwal/editjadwal.php';
break;
case 'deljadwal':
include 'page/jadwal/deljadwal.php';
break;
//================= Page/admin data sarpras =================
case 'sarpras':
include 'page/sarpras/sarpras.php';
break;
case 'addsarpras':
include 'page/sarpras/addsarpras.php';
break;
case 'editsarpras':
include 'page/sarpras/editsarpras.php';
break;
case 'delsarpras':
include 'page/sarpras/delsarpras.php';
break;
case 'cetaksarpras':
include 'page/sarpras/cetaksarpras.php';
break;
case 'barcode':
include 'page/sarpras/barcode.php';
break;
//================= Page/admin Pkbm =================
case 'pkbm':
include 'page/pkbm/pkbm.php';
break;
case 'addpkbm':
include 'page/pkbm/addpkbm.php';
break;
case 'editpkbm':
include 'page/pkbm/editpkbm.php';
break;
case 'delpkbm':
include 'page/pkbm/delpkbm.php';
break;
// ================= page pinjman =================
case 'pinjaman':
include 'page/pinjaman/pinjaman.php';
break;
case 'exsexusi':
include 'page/pinjaman/exsexusi.php';
break;
case 'detailpinjaman':
include 'page/pinjaman/detailpinjaman.php';
break;
case 'cetakpinjaman':
include 'page/pinjaman/cetakpinjaman.php';
break;
case 'delpinjaman':
include 'page/pinjaman/delpinjaman.php';
break;
// case 'barcode':
// include 'page/pinjaman/barcode.php';
// break;
// ==========================================
case 'kembali':
include 'page/kembali/kembali.php';
break;
// ================= page pinjman =================
// ================= Page Pimpinan =================
case 'lapsarpras':
include 'page/pimpinan/lapsarpras.php';
break;
case 'lappinjamankbm':
include 'page/pimpinan/lappinjamankbm.php';
break;
case 'lapkembali':
include 'page/pimpinan/lapkembali.php';
break;
case 'persetujuan':
include 'page/pimpinan/persetujuan.php';
break;
case 'lappinjaman':
include 'page/pimpinan/lappinjaman.php';
break;
// ============================================= //
case 'error':
include 'page/error/error.php';
break;
// ============================ //
case 'profile':
include 'page/user/profile.php';
break;
case 'delmember':
include 'page/user/delmember.php';
break;
default:
include 'page/dashboard.php';
break;
}
0
1 Jawaban:
Jawaban Terpilih
<div>Mungkin kalau menggunakan PHP dari menu.php nya langsung.<br><br>Caranya di dalam tiap atrribute class tambahin inline php script. Kayak gini</div><pre>class="nav-link <?php echo $_GET['page'] == 'guru' ? 'active' : ''; ?>"</pre><div><br>Dan seterusnya disesuaiakan aja.<br><br><br>Atau mungkin bisa lewat javascript dalam sekali jalan.</div><pre><script> let halaman = "<?php echo $_GET['page']; ?>";
//Jika DOM document.querySelector("a[href='?page="+halaman+"']").classList.add("active");
//Jika Jquery $("a[href='?page="+halaman+"']").addClass("active");
</script></pre><div><br>Bukan cara yang menawan tapi setidaknya menurut ku bekerja aja 😂😂</div>
0
Tanggapan
untuk caranya di dalam tiap atrribute class tambahin inline php script ini bisa dugunakan.... Terima Kasih Jazakumullah Khairan