PHP AJAX BOOTSTRAP - MENAMPILKAN DATA RECORD MENGGUNAKAN BOOTSTRAP POPOVER
- Dapatkan link
- X
- Aplikasi Lainnya
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.
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.
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
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
- Dapatkan link
- X
- Aplikasi Lainnya
Komentar
Posting Komentar