Menampilkan Preview Data dan Foto pada Popover secara Dinamis dari database PHP

March 19, 2019

6 Comments

Cara Menampilkan data pada Popover secara Dinamis dari database PHP – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan membahas tentang cara menampilkan data dari database MySQL/MariaDB ke dalam Popover bootstrap saat Hover pada elemen tertentu. Karena kita menampilkan data dan foto secara dinamis dari database yang tentunya tidak membutuhkan loading untuk menampilkannya maka kita akan menggunakan Ajax.

Cara ini biasanya digunakan oleh pada developer untuk menampilkan profile dan foto dari pengguna atau penulis saat hover namanya. Langsung saja tidak usah berlama-lama langsung saya jelaskan cara membuatnya.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_karyawan`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_lengkap` varchar(50) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `jenkel` varchar(10) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `jabatan` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `umur` int(11) NOT NULL,
  `foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
)

CREATE TABLE `tbl_karyawan` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`nama_lengkap` varchar(50) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`jenkel` varchar(10) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`jabatan` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`umur` int(11) NOT NULL,

`foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,

PRIMARY KEY (`id`) USING BTREE

)

3. Untuk mencobanya agar sobat tidak memasukkan satu persatu maka sobat eksekusi saja query sql dibawah ini

INSERT INTO `tbl_karyawan` VALUES (1, 'Jono Jondah', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Supir', 36, 'avatar1.png');
INSERT INTO `tbl_karyawan` VALUES (2, 'Tini Skak', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Programmer', 24, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (3, 'Jini oh jini', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Service technician', 262, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (4, 'Slamet', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Office Boy', 32, 'avatar1.png');
INSERT INTO `tbl_karyawan` VALUES (5, 'Sule Rharjo', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Akuntan', 29, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (6, 'Cristiano Ronaldinho', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Systems programmer', 32, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (7, 'Angelina Ozawa', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Sekertaris', 38, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (8, 'Titin', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Konsultan', 2823, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (9, 'Pongki', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Analis', 6413, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (10, 'Budun', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Fotografer', 331, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (1, 'Jono Jondah', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Supir', 36, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (2, 'Tini Skak', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Programmer', 24, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (3, 'Jini oh jini', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Service technician', 262, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (4, 'Slamet', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Office Boy', 32, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (5, 'Sule Rharjo', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Akuntan', 29, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (6, 'Cristiano Ronaldinho', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Systems programmer', 32, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (7, 'Angelina Ozawa', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Sekertaris', 38, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (8, 'Titin', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Konsultan', 2823, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (9, 'Pongki', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Analis', 6413, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (10, 'Budun', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Fotografer', 331, 'avatar1.png');

sobat juga perlu mencari 3 foto/gambar dan rename menjadi avatar1.png, avatar2.png dan avatar3.png dan kemudian membuat folder images/ dan pastekan ketiga file tersebut pada folder images untuk meload gambarnya nanti.

Cara Menampilkan data pada Popover secara Dinamis

1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1 = new mysqli(HOST, USER, PASS, DB1);

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendowload bersama project ini diakhir postingan. Karena kita menggunakan Ajax jadi kita wajib untuk memasukkan jquery.js/jquery.min.js. Dan karena kita menggunakan Popover dari bootstrap maka wajib untuk memasukkan librari bootstrap.

3. Masih di file index.php sobat tambahkan kode dibawah pada tag <body>

<div class="table-responsive">
  <table class="table table-striped table-bordered">
    <thead>
      <tr>
        <th width="10%">No</th>
        <th width="90%">Name</th>
      </tr>
    </thead>
    <tbody>
      <?php
        $no=1;
        $query = "SELECT * FROM tbl_karyawan ORDER BY nama_lengkap ASC";
        $dewan1 = $db1->prepare($query);
        $dewan1->execute();
        $res1 = $dewan1->get_result();
        while ($row = $res1->fetch_assoc()) {
      ?>
        <tr>
          <td><?php echo $no++; ?></td>
          <td><a href="#" class="hover" id="<?php echo $row["id"]; ?>"><?php echo $row["nama_lengkap"]; ?></a></td>
        </tr>
      <?php } ?>
    </tbody>
  </table>  
</div>

<thead>

<tr>

</tr>

</thead>

<tbody>

<?php

$no=1;

$query = "SELECT * FROM tbl_karyawan ORDER BY nama_lengkap ASC";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

while ($row = $res1->fetch_assoc()) {

<tr>

</tr>

<?php } ?>

</tbody>

</table>

</div>

Penjelasan :

Kode diatas kita tampilkan menggunakan cara standar. Untuk metodenya saya menggunakan Object Oriented dengan prepare untuk membiasakan untuk menuliskan kode dengan baik karena walaupun lebih panjang tapi lebih aman ketimbang yang cuman sebaris dua baris.

4. Kemudian masih di tag body paling bawah kita tambahkan kode javascript dibawah untuk mengambil data menggunakan Ajax dan menampilkan pada popover

<script>
  $(document).ready(function(){
     $('.hover').popover({
        title:fetchData,
        html:true,
        placement:'right',
        trigger:'hover'
     });
     function fetchData(){
        var ambil_data = '';
        var element = $(this);
        var id = element.attr("id");
        $.ajax({
           url:"ambil_data.php",
           method:"POST",
           async:false,
           data:{id:id},
           success:function(data){
              ambil_data = data;
           }
        });
        return ambil_data;
     }
  });
 </script>

$(document).ready(function(){

$('.hover').popover({

title:fetchData,

html:true,

placement:'right',

trigger:'hover'

});

function fetchData(){

var ambil_data = '';

var element = $(this);

var id = element.attr("id");

$.ajax({

url:"ambil_data.php",

method:"POST",

async:false,

data:{id:id},

success:function(data){

ambil_data = data;

}

});

return ambil_data;

}

});

</script>

Penjelasan :

Kode diatas merupakan kode javascriptnya yang maka saat elemen dengan class yang bernama .hover sobat letakkan ponter mousernya pada elemen tersebut maka akan memanggil ajax denga url ambil_data.php dan mengirimkan id dari karyawan yang sedang hover.

Sedikit saya percantik dengan menambahkan header dan footer sehingga keseluruhan kode index.php akan menjadi seperti dibawah

<?php include 'koneksi.php'; ?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="icon" href="images/dk.png">
    <title>Dewan Komputer | Menampilkan data pada Popover</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-dark bg-primary">
    <a class="navbar-brand text-white" href="index.php">
      Dewan Komputer
    </a>
  </nav>

  <div class="container">
    <h3 align="center" class="mt-3 mb-3">Menampilkan data dari database pada Popover Bootstrap</h3>

    <div class="table-responsive">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th width="10%">No</th>
            <th width="90%">Name</th>
          </tr>
        </thead>
        <tbody>
          <?php
            $no=1;
            $query = "SELECT * FROM tbl_karyawan ORDER BY nama_lengkap ASC";
            $dewan1 = $db1->prepare($query);
            $dewan1->execute();
            $res1 = $dewan1->get_result();
            while ($row = $res1->fetch_assoc()) {
          ?>
            <tr>
              <td><?php echo $no++; ?></td>
              <td><a href="#" class="hover" id="<?php echo $row["id"]; ?>"><?php echo $row["nama_lengkap"]; ?></a></td>
            </tr>
          <?php } ?>
        </tbody>
      </table>  
    </div>  
  </div>

  <div class="bg-secondary p-2 text-white text-center">© <?php echo date('Y'); ?> Copyright:
      <a href="https://dewankomputer.com/"> Dewan Komputer</a>
  </div>

  <script>
    $(document).ready(function(){
       $('.hover').popover({
          title:fetchData,
          html:true,
          placement:'right',
          trigger:'hover'
       });
       function fetchData(){
          var ambil_data = '';
          var element = $(this);
          var id = element.attr("id");
          $.ajax({
             url:"ambil_data.php",
             method:"POST",
             async:false,
             data:{id:id},
             success:function(data){
                ambil_data = data;
             }
          });
          return ambil_data;
       }
    });
   </script>
</body>  
</html>

<?php include 'koneksi.php'; ?>

<!DOCTYPE html>

<html>

<head>

<title>Dewan Komputer | Menampilkan data pada Popover</title>

</head>

<body>

Dewan Komputer

</a>

</nav>

<h3 align="center" class="mt-3 mb-3">Menampilkan data dari database pada Popover Bootstrap</h3>

<thead>

<tr>

</tr>

</thead>

<tbody>

<?php

$no=1;

$query = "SELECT * FROM tbl_karyawan ORDER BY nama_lengkap ASC";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

while ($row = $res1->fetch_assoc()) {

<tr>

</tr>

<?php } ?>

</tbody>

</table>

</div>

<a href="https://dewankomputer.com/"> Dewan Komputer</a>

</div>

$(document).ready(function(){

$('.hover').popover({

title:fetchData,

html:true,

placement:'right',

trigger:'hover'

});

function fetchData(){

var ambil_data = '';

var element = $(this);

var id = element.attr("id");

$.ajax({

url:"ambil_data.php",

method:"POST",

async:false,

data:{id:id},

success:function(data){

ambil_data = data;

}

});

return ambil_data;

}

});

</script>

</body>

</html>

5. Kemudian kita akan membuat action Ajaxnya yaitu file ambil_data.php dan masukkan dengan kode dibawah

<?php
  include 'koneksi.php';
  if(isset($_POST["id"]))  {
    $output = '';
    $id = $_POST["id"];
    $query = "SELECT * FROM tbl_karyawan WHERE id=?";
    $dewan1 = $db1->prepare($query);
    $dewan1->bind_param('i', $id);
    $dewan1->execute();
    $res1 = $dewan1->get_result();
    while ($row = $res1->fetch_assoc()) {
      $output = '  
        <p><img src="images/'.$row["foto"].'" class="img-responsive img-thumbnail" /></p>
        <p><b>Nama Lengkap : </b><br /> '.$row['nama_lengkap'].'</p>
        <p><b>Alamat : </b><br />'.$row['alamat'].'</p>
        <p><b>Jenis Kelamin : </b>'.$row['jenkel'].'</p>
        <p><b>Jabatan : </b>'.$row['jabatan'].'</p>
        <p><b>Umur : </b>'.$row['umur'].' tahun</p>
      ';  
    }  
    echo $output;  
  }  
?>

<?php

include 'koneksi.php';

if(isset($_POST["id"])) {

$output = '';

$id = $_POST["id"];

$query = "SELECT * FROM tbl_karyawan WHERE id=?";

$dewan1 = $db1->prepare($query);

$dewan1->bind_param('i', $id);

$dewan1->execute();

$res1 = $dewan1->get_result();

while ($row = $res1->fetch_assoc()) {

$output = '

<p><b>Nama Lengkap : </b><br /> '.$row['nama_lengkap'].'</p>

<p><b>Alamat : </b><br />'.$row['alamat'].'</p>

<p><b>Jenis Kelamin : </b>'.$row['jenkel'].'</p>

<p><b>Jabatan : </b>'.$row['jabatan'].'</p>

<p><b>Umur : </b>'.$row['umur'].' tahun</p>

}

echo $output;

}

Penjelasan :

Kode diatas adalah untuk mengambil data dari database berdasarkan id dari nama yang kita hover yang dikirimkan melalui Ajax. Kemudian disimpan pada $output dan kemudian ditampilkan menggunakan ‘echo’.

6. Kemudian kita jalankan projek kita dan akan menghasilkan seperti gambar dibawah

Sekian postingan saya tentang Menampilkan Data dan Foto pada Popover secara Dinamis dari database PHP. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

6 thoughts on “Menampilkan Preview Data dan Foto pada Popover secara Dinamis dari database PHP”

Norma says:

October 8, 2019 at 10:12 am

maaf ka, ko aku ngga bisa tampil popovernya yah?
masalahnya kira2 dimananya yah ka?

Reply
1. dewan says:
  
  October 9, 2019 at 10:19 am
  
  apa bootstrapnya udah ada dan versi yang digunakan apakah ada css popovernya?
  
  Reply
Ginta Wahyudi says:

November 29, 2019 at 8:00 pm

minta contoh buat codeigniter 3 kak,.

Reply
1. dewan says:
  
  November 30, 2019 at 4:13 am
  
  maaf ngga ada contoh buat codeigniter
  intinya sama aja tinggal backendnya aja di controllernya sama ajaxnya ngarah ke routingnya
  
  Reply
budi says:

August 25, 2020 at 7:12 am

Gan knpa ya gambarnya tidak muncul

Reply
1. dewan says:
  
  August 26, 2020 at 3:33 pm
  
  path-nya udah benar atau belum?
  
  Reply