Hallo sahabat, bagaimana kabarnya ? semoga baik-baik dan selalu semangat. Dalam kesempatan kali ini saya akan membahas tentang Membuat Menu Dinamic di PHP Menggunakan Jquery Ajax. Pada kasus ini menu yang dinamic atau secara dinamis tentu sangat memudahkan dalam menampilkan content didalamnya. Bagaimana cara membuatnya yuk simak step by step didalamnya.
Langkah pertama
Sahabat persiapkan terlebih dahulu tabel dalam database seperti yang saya punya:
Jika sudah selanjutnya buat file php seperti dibawah ini
1 2 3 4 5 |
<?php $conn = mysqli_connect("localhost", "root", "", "test"); $query = "SELECT * FROM tb_blog"; $result = mysqli_query($conn, $query); ?> |
code diatas buat sebuah koneksi ke database serta perintah query select data pada tabel.
Selanjutnya buat sebuah template sederhana mengguakan Bootstrap yang lebih mudah seperti code berikut:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>Membuat Menu Dynamic di PHP Menggunakan Jquery Ajax</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" /> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container mt-3"> <h2 class="text-center my-3">Membuat Menu Dynamic di PHP Menggunakan Jquery Ajax</h2> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Welcome</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavDropdown"> <ul class="navbar-nav"> <?php while($row = mysqli_fetch_array($result)) { echo ' <li class="nav-item font-weight-bold mr-2" id="'.$row["id"].'"><a class="nav-link" href="#">'.$row["judul"].'</a></li> '; } ?> </ul> </div> </nav> <span id="page_details"></span> </div> </body> </html> |
Untuk bagian menu dibuat looping dari tabel yang sudah dibuat seperti gambar dibawah
Langkah Kedua
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script> $(document).ready(function(){ function load_page_details(id) { $.ajax({ url:"view_content.php", method:"POST", data:{id:id}, success:function(data) { $('#page_details').html(data); } }); } load_page_details(1); $('.navbar-nav li').click(function(){ var page_id = $(this).attr("id"); load_page_details(page_id); }); }); </script> |
pada script diatas adalah script Jquery dan perintah ajax untuk request ke file view_content.php. Jadi pada file view_content.php akan menampilkan content yang berasal dari database sesuai id nya. Coba sahabat ketikkan code dibawah ini untuk file view_content.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?php if(isset($_POST["id"])) { $conn = mysqli_connect("localhost", "root", "", "test"); $query = "SELECT * FROM tb_blog WHERE id = '".$_POST["id"]."'"; $result = mysqli_query($conn, $query); $output = ''; while($row = mysqli_fetch_array($result)) { $output .= ' <h2 class="font-weight-bolder my-2">'.$row["judul"].'</h2> <p>'.$row["deskripsi"].'</p> '; } echo $output; } ?> |
Jika sudah simpan semua code diatas kemudian jalankan pada browser masing-masing. Apakah syudah benar seperti code-code diatas, oke berikut tampilannya seperti dibawah ini:
Saya kira cukup dalam pembahasan artikel tentang Membuat Menu Dinamic di PHP Menggunakan Jquery Ajax. Semoga bermanfaat dan sampai jumpa dilain pembahasan.
terima kasih