Membuat Menu Dinamic di PHP Menggunakan Jquery Ajax

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

<?php
$conn = mysqli_connect("localhost", "root", "", "test");
$query = "SELECT * FROM tb_blog";
$result = mysqli_query($conn, $query);
?>

<?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:

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Membuat Menu Dynamic di PHP Menggunakan Jquery Ajax</title>

</head>

<body>

<h2 class="text-center my-3">Membuat Menu Dynamic di PHP Menggunakan Jquery Ajax</h2>

<a class="navbar-brand" href="#">Welcome</a>

</button>

<?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>

</div>

</body>

</html>

Untuk bagian menu dibuat looping dari tabel yang sudah dibuat seperti gambar dibawah

Langkah Kedua

<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>

$(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

<?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;
}


?>

<?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

Membuat Menu Dinamic di PHP Menggunakan Jquery Ajax

Langkah pertama

Langkah Kedua

Facebook DUMET School

Konsultasi Gratis

Categories