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 !