Tutorial Bootstrap

PHP AJAX Bootstrap - Menampilkan Data Record Menggunakan Bootstrap Popover

PHP AJAX Bootstrap - Menampilkan Data Record Menggunakan Bootstrap Popover

Tutorial PHP AJAX Bootstrap - Menampilkan Data Record Menggunakan Bootstrap Popover ini akan menjelaskan bagaimana cara menampilkan data record dari database menggunakan komponen popover bootstrap secara dinamis.Bahasa pemrograman yang di gunakan HTML, PHP dan AJAX dengan template bootstrap.

Dalam tutorial ini kita akan membahas bagaimana cara mengambil data dari tabel mysql dan memuat data ke dalam plugin popover Bootstrap dengan menggunakan PHP dengan Ajax Jquery tanpa event refresh halaman.

Pertama-tama apa itu Popover, dalam pengembangan web, popover sama seperti plugin javascript tooltip Bootstrap yang dapat menampilkan konten jika kita klik pada elemen html mana pun yang telah kita gunakan untuk popover. Perbedaan utama antara tooltips dan popover adalah bahwa di popover kita bisa memuat lebih banyak konten.

Dalam tutorial ini kita bisa menampilkan konten di samping kanan popover saat kita klik pada elemen maka pada saat itu muncul kotak pesan pop up , kotak pesan pop up ini adalah sebuah bootstrap popover dan sudah diinisialisasi oleh jQuery . Dengan menggunakan Ajax kita bisa memuat tipe data ini tanpa refresh event halaman. Dengan bantuan Bootstrap kita bisa menampilkan konten untuk elemen tertentu saat klik pada elemen itu dan dengan menggunakan ini kita juga bisa memuat konten dinamis. Jenis fitur ini akan menambahkan fungsionalitas aplikasi php Anda . Dengan cara ini kita bisa memuat konten tabel mysql dinamis ke dalam bootstrap popover dengan menggunakan script php dengan Jquery dan Ajax.

>> Lihat Hasilnya <<

Ikuti Langkah -langkah berikut ini.

Buat Database dengan nama praktek dan buat tb_siswa. Anda bisa menggunakan source code yang sudah tersedia dan dapat anda download untuk digunakan.

Setelah anda membuat database praktek dan tabel siswa, langkah selanjutnya anda dapat membuat file koneksi.php untuk mengkoneksikan database dengan server.

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

?>


Simpan file dengan nama koneksi.php dan anda dapat menyimpannya di folder yang telah anda buat. selanjutnya

index.php
 

 <!DOCTYPE html>
 <html>
      <head>
           <title>Develindo | PHP AJAX Bootstrap - Menampilkan Data Record Menggunakan Bootstrap Popover</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">PHP AJAX Bootstrap - Menampilkan Data Record Menggunakan Bootstrap Popover</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 tab-index="0" href="javascript:void(0);" class="hover" 
id="<?php echo $a['id_siswa']; ?>" rel="popover" data-placement=""
 data-original-title="" data-content="">
                               <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>
      </body>
 </html>
<script>
/*popover bootstrap*/

$(document).ready(function () {
    $(document).on('click', '.hover', function (e) {
        e.preventDefault();
        $(this).popover({
            title: "Detail Informasi Siswa",
            html: true,
            placement: 'right',
            trigger: 'focus',
            content: function () {
                var fetch_data = '';
                var element = $(this);
                var id = element.prop("id");
                $.ajax({
                    url: "fetch.php",
                    method: "POST",
                    async: false,
                    data: { id: id },
                    success: function (data) {
                        fetch_data = data;
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        alert(thrownError);
                    }
                });
                return fetch_data;
            }

        });
        $(this).popover('show');
    });

});

 </script>



Untuk membuat popover muncul secara dinamis sesuai dengan data yang ada pada tabel maka perlu sorce code tambahan berikut ini.

fetch.php
 

<?php
 include "koneksi.php";
 if(isset($_POST["id"]))
 {
      $output = '';
      $query = "SELECT * FROM tb_siswa WHERE id_siswa='".$_POST["id"]."'";
      $result = mysql_query($query);
      while($row = mysql_fetch_array($result))
      {
          $output = '
                <div style="color:#080808;">
                <p><img src="images/'.$row["foto_siswa"].'" class="img-responsive img-thumbnail" /></p>
                <p><label>NIS : '.$row['id_siswa'].'</label></p>
                <p><label>NISN : '.$row['nisn'].'</label></p>
                <p><label>Nama : '.$row['nama_siswa'].'</label></p>
                <p><label>Gender : '.$row['gender_siswa'].'</label></p>
                </div>
           ';
      }
      echo $output;
 }
 ?>


Setelah semua bagian anda buat, anda dapat mencoba menjalankan melalui localhost.

Source code ini telah diuji coba berhasil dan support berbagai macam browser seperti safari, google chrome, mozilla firefox, UCBrowser, Internet Explorer, Opera, Opera Mini, dll. silahkan anda coba sendiri.

Silahkan download source code untuk anda gunakan sebagai bahan praktek. Terimakasih

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website