Bagaimana Load Data Dalam Modal Dengan Next Previous Button Dalam Ajax
Jika Anda mencari tutorial tentang Bootstrap Modal dengan data Dinamis, maka dalam posting ini tidak hanya dapat menemukan cara memuat data dinamis ke dalam modal bootstrap pop up tetapi juga dapat menemukan tombol catatan sebelumnya dan berikutnya juga dengan menggunakan Ajax Jquery dengan PHP. Di salah satu posting kami sebelumnya, kami telah membuat diskusi tentang Cara memuat data dinamis ke dalam modal Bootstrap dengan menggunakan Ajax PHP. Tetapi dalam posting ini kami telah menyertakan fitur tombol sebelumnya dan berikutnya juga.
Jika sudah memuat data ke dalam modal Bootstrap, jadi pada saat itu telah melihat satu catatan id kemudian setelah itu jika ingin melihat catatan berikutnya maka harus menutup modal dan klik tombol tampilan catatan berikutnya. Tapi sekarang kami telah membuat tutorial sederhana di mana dapat melihat semua detail catatan pada modal tunggal dengan mengklik tombol sebelumnya dan berikutnya. Jadi pada modal tunggal, dapat melihat semua detail catatan satu per satu dengan sekali klik dan harus pergi ke modal berikutnya.
Jadi ,jika telah mengembangkan aplikasi berbasis web dan dalam aplikasi itu telah menggunakan modal Bootstrap untuk menampilkan data dinamis maka dapat menambahkan fitur ini juga. Jadi pengguna dapat melihat semua detail catatan satu per satu dengan modal tunggal dengan mengklik tombol Catatan sebelumnya atau tombol Catatan berikutnya. Di sini jika memiliki tombol memuat catatan pertama maka pada saat itu tombol sebelumnya akan dinonaktifkan karena jika telah memuat catatan pertama maka tidak ada catatan sebelumnya sehingga tombol sebelumnya akan dinonaktifkan pada saat itu dan dengan cara yang sama jika telah sampai melihat catatan terakhir maka pada waktu itu tombol berikutnya akan dinonaktifkan. Jadi jika telah mengembangkan aplikasi berbasis web apa pun dengan menggunakan PHP Ajax dengan Bootstrap dan jika telah memuat data dinamika ke dalam modal maka dapat menambahkan fitur jenis ini juga untuk melihat rincian catatan sebelumnya dan selanjutnya pada modal yang sama dengan mengklik tombol.
Saya harap telah belajar sesuatu yang baru dari posting ini. Silahkan terus kunjungi website kami. Di sini Anda juga dapat menemukan banyak hal yang menambah skill dan pengetahuan yang berguna-gudangnya segala kebaikan. Jadi tetap nikmati pemrograman PHP.
Source code:
<?php
//index.php
$connect = mysqli_connect("localhost", "root", "", "testing");
$query = "SELECT * FROM tbl_posts ORDER BY post_id ASC";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Modal Dinamis Next dan Provious dengan Ajax PHP</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container">
<h2 align="center">Modal Dinamis Next dan Provious dengan Ajax PHP</h2>
<br />
<div class="table-responsive">
<table class="table table-striped table-bordered">
<tr>
<th>Post</th>
<th>Post Title</th>
<th>Author</th>
<th>View</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
echo '
<tr>
<td>'.$row["post_id"].'</td>
<td>'.$row["post_title"].'</td>
<td>'.$row["post_author"].'</td>
<td><button type="button" name="view" class="btn btn-info view" id="'.$row["post_id"].'" >View</button></td>
</tr>
';
}
?>
</table>
</div>
</div>
</body>
</html>
<div id="post_modal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Post Details</h4>
</div>
<div class="modal-body" id="post_detail">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
function fetch_post_data(post_id)
{
$.ajax({
url:"datamodal.php",
method:"POST",
data:{post_id:post_id},
success:function(data)
{
$('#post_modal').modal('show');
$('#post_detail').html(data);
}
});
}
$(document).on('click', '.view', function(){
var post_id = $(this).attr("id");
fetch_post_data(post_id);
});
$(document).on('click', '.previous', function(){
var post_id = $(this).attr("id");
fetch_post_data(post_id);
});
$(document).on('click', '.next', function(){
var post_id = $(this).attr("id");
fetch_post_data(post_id);
});
});
</script>
datamodal.php:
<?php
//fetch.php
if(isset($_POST["post_id"]))
{
$connect = mysqli_connect("localhost", "root", "", "testing");
$output = '';
$query = "SELECT * FROM tbl_posts WHERE post_id = '".$_POST["post_id"]."'";
$result = mysqli_query($connect, $query);
while($row = mysqli_fetch_array($result))
{
$output .= '
<h2>'.$row["post_title"].'</h2>
<p><label>Author By - '.$row["post_author"].'</label></p>
<p>'.$row["post_description"].'</p>
';
$query_1 = "SELECT post_id FROM tbl_posts WHERE post_id < '".$_POST['post_id']."' ORDER BY post_id DESC LIMIT 1";
$result_1 = mysqli_query($connect, $query_1);
$data_1 = mysqli_fetch_assoc($result_1);
$query_2 = "SELECT post_id FROM tbl_posts WHERE post_id > '".$_POST['post_id']."' ORDER BY post_id ASC LIMIT 1";
$result_2 = mysqli_query($connect, $query_2);
$data_2 = mysqli_fetch_assoc($result_2);
$if_previous_disable = '';
$if_next_disable = '';
if($data_1["post_id"] == "")
{
$if_previous_disable = 'disabled';
}
if($data_2["post_id"] == "")
{
$if_next_disable = 'disabled';
}
$output .= '
<br /><br />
<div align="center">
<button type="button" name="previous" class="btn btn-warning btn-sm previous" id="'.$data_1["post_id"].'" '.$if_previous_disable.'>Previous</button>
<button type="button" name="next" class="btn btn-warning btn-sm next" id="'.$data_2["post_id"].'" '.$if_next_disable.'>Next</button>
</div>
<br /><br />
';
}
echo $output;
}
?>
Sumber Kode: karya Weblesson
