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">&times;</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

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website