Tutorial AJAX PHP
Menampilkan Data pada Modal bootstrap dengan tombol Next & Previous - AJAX PHP Bootstrap
Ajax PHP - Menampilkan Data pada Modal bootstrap dengan tombol Next & Previous
Tutorial Ajax PHP - Menampilkan Data pada Modal bootstrap dengan tombol Next & Previous ini akan membahas bagaimana cara menampilkan data menggunakan modal pop up dan ditambahkan tombol next dan previous untuk beralih ke record selanjutnya atau sebelumnya. Develindo.com
Ikuti langkah berikut ini.
>> Lihat Hasilnya <<
Buat database praktek dan buat tabel dengan nama tb_siswa
buat file koneksi.php untuk menghubungkan script ke database
koneksi.php
<?php
//set time zone location sesuai negara, jadikan Asia Jakarta
date_default_timezone_set('Asia/Jakarta');
//set koneksi ke server sesuai host, user, password dan database
$server="localhost";
$user="root";
$pass="";
$database="praktek";
mysql_connect($server,$user,$pass)
or die('Koneksi Ke database Error'); //mengkoneksikan dengan server
jika tidak akan muncul pesan error
mysql_select_db($database) or
die('Database Tidak Ditemukan'); //mengkoneksikan dengan database jika
tidak akan muncul pesan database tidak ada ?>
buat file index.php untuk menampilkan data dari tb_siswa
index.php
<!DOCTYPE html>
<html>
<head>
<title>Develindo | Ajax PHP - Menampilkan Data pada Modal
bootstrap dengan tombol Next & Previous</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Bootstrap core JavaScript-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:800px;">
<h2 align="center">Ajax PHP - Menampilkan Data pada Modal
bootstrap dengan tombol Next & Previous</h2>
<h3 align="center">Data Seluruh Siswa</h3>
<br /><br />
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>NIS</th>
<th>NISN</th>
<th>Nama Lengkap</th>
<th>Gender</th>
</tr>
<?php
//panggil fungsi koneksi.php
include "koneksi.php";
//ambil data dari tb_siswa dan lakukan perulangan dengan while
$ambildata=mysql_query("select*from tb_siswa order by id_siswa");
while($a = mysql_fetch_array($ambildata))
{
?>
<tr>
<td>
<a href="javascript:void(0);" class="view" id="<?php echo $a['id_siswa']; ?>">
<strong><?php echo $a['id_siswa']; ?></strong>
</a>
</td>
<td><?php echo $a['nisn'];?></td>
<td><?php echo $a['nama_siswa'];?></td>
<td><?php echo $a['gender_siswa'];?></td>
</tr>
<?php
}
?>
</table>
</div>
</div>
<div id="post_modal" class="modal fade">
<div class="modal-dialog modal-md">
<div class="modal-content" id="post_detail">
</div>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function () {
function fetch_post_data(post_id) {
$.ajax({
url: "post.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).prop("id");
fetch_post_data(post_id);
});
$(document).on('click', '.previous', function () {
var post_id = $(this).prop("id");
fetch_post_data(post_id);
});
$(document).on('click', '.next', function () {
var post_id = $(this).prop("id");
fetch_post_data(post_id);
});
});
</script>
Simpan file index.php pada folder yang anda buat. selanjutnya buat file berikut
post.php
<?php
include "koneksi.php";
if(isset($_POST["post_id"]))
{
$output = '';
$query = "SELECT * FROM tb_siswa WHERE id_siswa = '".$_POST["post_id"]."'";
$result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
$output .= '<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Nama Siswa : '.$row['nama_siswa'].'</h4>
</div>
<div class="modal-body">
<label>Data Siswa</label>
<table class="table table-bordered">
<tbody>
<tr>
<td width="30%">NIS</td><td width="50px">:</td><td>'.$row['id_siswa'].'</td>
</tr>
<tr>
<td>NISN</td><td>:</td><td>'.$row['nisn'].'</td>
</tr>
<tr>
<td>Jenis Kelamin</td><td>:</td><td>'.$row['gender_siswa'].'</td>
</tr>
<tr>
<td>Dokumen</td><td>:</td><td><img
src="images/'.$row['foto_siswa'].'" class="img-thumbnail"
style="width:70px; height:70px;"></td>
</tr>
</tbody>
</table>
';
$query_1 = "SELECT id_siswa FROM tb_siswa WHERE id_siswa < '".$_POST['post_id']."' ORDER BY id_siswa DESC LIMIT 1";
$result_1 = mysql_query($query_1);
$data_1 = mysql_fetch_array($result_1);
$query_2 = "SELECT id_siswa FROM tb_siswa WHERE id_siswa > '".$_POST['post_id']."' ORDER BY id_siswa ASC LIMIT 1";
$result_2 = mysql_query($query_2);
$data_2 = mysql_fetch_array($result_2);
$if_previous_disable = '';
$if_next_disable = '';
if($data_1["id_siswa"] == "")
{
$if_previous_disable = 'disabled';
}
if($data_2["id_siswa"] == "")
{
$if_next_disable = 'disabled';
}
$output .= '
<div align="center">
<button type="button" name="previous" class="btn btn-default btn-sm
previous" style="float:left;" id="'.$data_1['id_siswa'].'"
'.$if_previous_disable.'><i class="ti ti-arrow-left"></i>
Sebelumnya</button>
<button type="button" name="next"
class="btn btn-default btn-sm next" style="float:right;"
id="'.$data_2['id_siswa'].'" '.$if_next_disable.'>Selanjutnya <i
class="ti ti-arrow-right"></i></button>
</div>
<br /><br /></div>
';
}
echo $output;
}
?>
simpan file post.php sama seperti anda menyimpan file index.php jadikan 1 folder.
Setelah selesai anda dapat mejalankan source code tersebut di localhost.
Terimakasih
Ade Suryadi
Selalu Berusaha, Hasil Tuhan yang menentukan. Jangan menyerah dengan kegagalan. Lets do it !