Menampilkan Data Perulangan (Looping) Image dari Database dengan Ajax dan PHP

Ajax sangat dinamis dalam penggunaannya. Banyak hal yang bisa dilakukan dengan ajax. Termasuk juga dengan perulangan dimana datanya kita ambil dari database. Contoh kasus seperti ini. Dalam sebuah konten, bisa statis ataupun dinamis, kita ingin menampilkan beberapa data dimana data tersebut otomatis akan bertambah secara dinamis seiring bertambahnya row pada database namun kita tidak ingin mengutak atik konten tersebut lagi. Jadi hanya menambahkan atau mengurangi row pada database saja.

Sederhananyna misalkan kita ingin menambahkan gambar pada konten tersebut. Secara dafault, code menampilkan data adalah sebagai berikut.

 
<img src="path gambar"/>
 

Dan kita menginginkan path tersebut berasal dari database dan kemunculannya berdasarkan database. Kemudian kita akan membuat database sederhananya. Kita buat table dengan nama gambar misalnya.

 
CREATE TABLE `gambar` (
  `gambar_id` bigint(20) NOT NULL AUTO_INCREMENT,
  `gambar_path` text,
  PRIMARY KEY (`gambar_id`)
) ENGINE=MyISAM AUTO_INCREMENT=0 DEFAULT CHARSET=latin1
 

Pada query di atas, kita lihat terdapat 2 field yakni gambar_id dan gambar_path. gambar_id ini berfungsi untuk mendefined suatu row sebagai primary key. Sedangkan gambar_path adalah alamat gambar termasuk nama file gambar yang disimpan nantinya ke dalam database. Kemudian pada database terebut, kita akan insert beberapa data. Misalkan 3 row saja.

 
INSERT INTO gambar (gambar_path) VALUES
	 ('https://www.google.co.id/images/branding/googlelogo/2x/googlelogo_color_160x56dp.png'),
	 ('https://asset.kompas.com/crops/71BqRsoCzXW5dB9ifE4-oNv62N0=/63x100:984x714/750x500/data/photo/2020/01/30/5e32b2b30ce3e.jpeg'),
     ('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpudvBRXnVL9dP2KjBUEn6f2Z9glTqyRJg_A&usqp=CAU');
 

Selanjutkan kita langsung saja beralih pada bagian html untuk menampilkan datanya yang berasal dari pemrosesan ajax. Sebenarnya cukup simple, kita hanya menggunakan tag <span> dan attribut class dengan nilai bebas. Mislakna saja kita membuat tang span dengan nama atribut hasilnya.

 
<span class="hasilnya"></span>
 

Keudian pada bagian bawah, kita tulis code ajaxnya. Owh iya, jangan lupa untuk mengimport file jquerynya juga, agar code ajax dapat terbaca.

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
//code ajaxnya
<script>
    $.ajax({
    url: "code.php",
    method:"POST",
    dataType:"json",
    success:function(data){
      	var html = "";
		  for (var key in data.result) { //loping sesuai data yang diterima
       		if (data.result.hasOwnProperty(key)) {
				    html += "<img src='"+data.result[key].gambar_path+"'/>";
       		}
   		}
      	$('.hasilnya').html(html);//akan ditampilakn pada tag dengan nama atribut hasilnya
    },error:function(){
      alert("data gagal diambil") //apabila gagal, akan muncul notifikasi ini
    }
  });</script>
 

Kembali sedikit menjelaskan ajax di atas :

• URL merupakan path pemrosesan data yang kita ambil. Kali ini kita membuat pada file code.php.
• dataType tipe data yang ingin kita terima berbetuk json.
• var html membuat variabel baru yang bernama html.
• data.result result adalah nama variabel hasil yang didapat dari code.php.
• data.result[key].gambar_path menampilkan value dari kiriman code.php berdaarkan array dengan nama gambar_path.

Sekarang kita buat codingan pada file code.php. Saya anggap untuk membuat koneksi ke database sudah Anda pahami. Apabila belum, akan penulis tulis pada artikel lainnya.

 
$query = mysqli_query('SELECT * FROM gambar');
echo json_encode(mysqli_fetch_array($query));

Pada variabel query diatas, kita dapat lihat merupakan suatu query untuk mengambil data pada table gambar. Kemudian hasil query tersebut akan dikirim kembali dengan bentuk json. Nah, demikianlah bagaimana caranya menampilkan data perulangan yang berasal dari database menggunakan ajax dan php. Selamat mencoba.