Membuat Menu Dinamic di PHP Menggunakan Jquery Ajax

Hallo sobat, bagaimana kabarnya ? semoga baik-baik dan selalu semangat. Pada kesempatan kali ini saya akan membahas mengenai Merancang Fitur Dinamic di PHP Menggunakan Jquery Ajax. Di kasus ini fitur yang dinamic atau secara dinamis tentu benar-benar mempermudah pada menampilkan content didalamnya. Bagaimana cara membuatnya yuk simak step by step didalamnya.

Langkah pertama-tama

Rekan rekan persiapkan terlebih dahulu tabel pada database seperti yang saya punya:

Apabila telah berikutnya bikin file php seperti dibawah ini

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

<?php

$conn = mysqli_connect(“localhost”, “root”, “”, “test”);

$query = “SELECT * FROM tb_blog”;

$result = mysqli_query($conn, $query);

code diatas bikin sebuah koneksi ke database serta petunjuk query select data di tabel.

Berikutnya bikin sebuah theme sederhana mengguakan Bootstrap yang lebih gampang seperti code berikut:

<!DOCTYPE html><br />
<html><br />
 <head><br />
  <title>Merancang Fitur Dynamic di PHP Menggunakan Jquery Ajax</title><br />
  <script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script><br />
  <link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” /><br />
  <script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js”></script> </p>
<p> </head><br />
 <body><br />
  <div class=”container mt-3″><br />
   <h2 class=”text-center my-3″>Merancang Fitur Dynamic di PHP Menggunakan Jquery Ajax</h2><br />
    <nav class=”navbar navbar-expand-lg navbar-light bg-light”><br />
      <a class=”navbar-brand” href=”#”>Welcome</a><br />
      <button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNavDropdown” aria-controls=”navbarNavDropdown” aria-expanded=”false” aria-label=”Toggle navigation”><br />
        <span class=”navbar-toggler-icon”></span><br />
      </button><br />
      <div class=”collapse navbar-collapse” id=”navbarNavDropdown”><br />
        <ul class=”navbar-nav”><br />
          <?php<br />
          while($row = mysqli_fetch_array($result))<br />
          {<br />
           echo ‘<br />
           <li class=”nav-item font-weight-bold mr-2″ id=”‘.$row[“id”].'”><a class=”nav-link” href=”#”>’.$row[“judul”].'</a></li><br />
           ‘;<br />
          }<br />
          ?><br />
        </ul><br />
      </div><br />
    </nav><br />
    <span id=”page_details”></span><br />
  </div><br />
 </body><br />
</html>

<!DOCTYPE html>

<html>

<head>

<title>Merancang Fitur Dynamic di PHP Menggunakan Jquery Ajax</title>

</head>

<body>

<h2 class=“text-center my-3”>Merancang Fitur 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>

Bagi bagian fitur dikerjakan looping dari tabel yang telah dikerjakan seperti gambar dibawah

Langkah Kedua

<script><br />
$(document).ready(function(){</p>
<p> function load_page_details(id)<br />
 {<br />
  $.ajax({<br />
   url:”view_content.php”,<br />
   method:”POST”,<br />
   data:{id:id},<br />
   success:function(data)<br />
   {<br />
    $(‘#page_details’).html(data);<br />
   }<br />
  });<br />
 }</p>
<p> load_page_details(1);</p>
<p> $(‘.navbar-nav li’).click(function(){<br />
  var page_id = $(this).attr(“id”);<br />
  load_page_details(page_id);<br />
 });</p>
<p>});<br />
</script>

$(document).ready(function(){

function load_page_details(id)

{

(Visited 2 times, 1 visits today)

Langkah pertama-tama

Langkah Kedua

Leave a Reply Cancel reply