Tutorial PHP Lanjutan Part 35 : Menampilkan Data Dari Database Menggunakan AJAX
Tutorial PHP Lanjutan Part 35 : Menampilkan Data Dari Database Menggunakan AJAX
- Hello everyone selamat datang
kembali diwebsite saya belajarwithib.my.id, pada seri kali ini kita akan masih
mempelajari Menampilkan Data
Dari Database Menggunakan AJAX.
Mungkin
kalian selama ini menggunakan PHP biasa untuk menampilkan data dari database,
nah pada tutorial kali ini agak sedikit mirip tapi kita menampilkan data menggunakan
AJAX. Artikel ini sangat singkat mungkin kalian sudah tahu mengenai AJAX jadi
kita lanjut saja.
Menampilkan Data Dari Database Menggunakan AJAX
Membuat Database Siswa
Langkah
pertama sudah pasti kita buat dulu database untuk menampung data-data yang
diperlukan.
Buatlah
database dengan nama “belajarwithib” setelah itu buat juga table didalam
database tersebut dengan nama “siswa” lalu buat field didalam table tersebut
seperti dibawah ini :
Field Dalam Table:
- Id_siswa = int
- Siswa_nama = varchar 70
- Siswa_kelas = varchar 70
- Siswa_alamat = text
Atau kamu
dapat mencopy perintah SQL dibawah agar lebih cepat :
-- phpMyAdmin SQL Dump
-- version 5.0.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Waktu pembuatan: 03 Jul 2021 pada 16.52
-- Versi server: 10.4.17-MariaDB
-- Versi PHP: 7.3.26
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
START TRANSACTION;
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `belajarwithib`
--
-- --------------------------------------------------------
--
-- Struktur dari tabel `siswa`
--
CREATE TABLE `siswa` (
`id_siswa` int(11) NOT NULL,
`siswa_nama` varchar(70) NOT NULL,
`siswa_kelas` varchar(70) NOT NULL,
`siswa_alamat` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
--
-- Dumping data untuk tabel `siswa`
--
INSERT INTO `siswa` (`id_siswa`, `siswa_nama`, `siswa_kelas`, `siswa_alamat`) VALUES
(23, 'Ilham Budiawan Sitorus', 'XII RPL', 'Perdamean'),
(24, 'Bambang', 'XII TKJ', 'Sigambal'),
(25, 'Samsul', 'XII AK', 'Labura'),
(26, 'Budi', 'XII MP', 'Aek nabara'),
(27, 'Ibnu', 'XII RPL', 'Perdamean');
--
-- Indexes for dumped tables
--
--
-- Indeks untuk tabel `siswa`
--
ALTER TABLE `siswa`
ADD PRIMARY KEY (`id_siswa`);
--
-- AUTO_INCREMENT untuk tabel yang dibuang
--
--
-- AUTO_INCREMENT untuk tabel `siswa`
--
ALTER TABLE `siswa`
MODIFY `id_siswa` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=28;
COMMIT;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Untuk
masalah database sepertinya sudah selesai, sekarang mari kita lanjut.
Membuat Tampilan
Kita
memerlukan tampilan yang sederhana untuk menampilkan data ke layar PC/Laptop
kamu, disini saya menggunakan Bootstrap untuk memperbagus tampilan saja.
Sekarang
buatlah file dengan nama “index.php” lalu ketikan code seperti dibawah:
Index.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Menampilkan Data Dari Database Menggunakan AJAX</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="card mt-5">
<div class="card-header">
Menampilkan Data Dari Database Menggunakan AJAX
</div>
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th width="1%">No</th>
<th>Nama</th>
<th>Kelas</th>
<th>Alamat</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"get_data.php",
type: "GET",
dataType: "JSON",
success: function(data){
var nomor = 0;
for(i=0; i<data.length; i++){
nomor++;
$('tbody').append('<tr><td>'+nomor+'</td><td>'+data[i].siswa_nama+'</td><td>'+data[i].siswa_kelas+'</td><td>'+data[i].siswa_alamat+'</td></tr>');
}
},
error: function(data){
alert("Terjadi Kesalahan!");
}
});
});
</script>
</body>
</html>
Penjelasan Singkat
Pada code
dibawah kita menargetkan tag <tbody> untuk ditambahkan tag <tr> dan tag
<rd> yang berasal dari database yang dipanggil dengan ajax. File ajax
akan memanggil get_data.php dengan method: GET dan tipe data yang didapatkan
adalah JSON. Yang kemudian data tadi disusun di dalam perulangan for seperti
pada kode di bawah ini:
<script type="text/javascript">
$(function(){
$.ajax({
url:"get_data.php",
type: "GET",
dataType: "JSON",
success: function(data){
var nomor = 0;
for(i=0; i<data.length; i++){
nomor++;
$('tbody').append('<tr><td>'+nomor+'</td><td>'+data[i].siswa_nama+'</td><td>'+data[i].siswa_kelas+'</td><td>'+data[i].siswa_alamat+'</td></tr>');
}
},
error: function(data){
alert("Terjadi Kesalahan!");
}
});
});
</script>
Mengambil Data Dari Database
Seperti
yang kita ketahui diatas bahwa AJAX akan mengambil data dari file lain yang
hasil dari file itu adalah JSON.
Sekarang
buat file dengan nama “get_data.php” lalu ketikan code seperti dibawah:
get_data.php
<?php
$koneksi = mysqli_connect("localhost", "root", "", "belajarwithib");
$get_data = mysqli_query($koneksi, "SELECT * FROM siswa");
while($data = mysqli_fetch_array($get_data)){
$data_siswa[] = $data;
}
echo json_encode($data_siswa);
?>
Penjelasan Singkat
Kode
dibawah ini merupakan fungsi untuk memberikan hubungan atau koneksi kepada file
tersebut, jadi file tersebut atau file get_data.php akan mendapatkan akses
untuk mengambil data kedalam database.
$koneksi = mysqli_connect("localhost", "root", "", "belajarwithib");
Kalau code
dibawah berfungsi sebagai mengambil data dari database, setelah data berhasil
diambil maka ada akan langsung diconvert menjadi array.
$get_data = mysqli_query($koneksi, "SELECT * FROM siswa");
while($data = mysqli_fetch_array($get_data)){
$data_siswa[] = $data;
}
Setelah
berhasil diubah menjadi array lalu systemnya akan mengubah data array menjadi
JSON agar datanya bisa dibaca oleh AJAX.
echo json_encode($data_siswa);
Hasil dari kode diatas kurang lebih seperti dibawah :
Uji Coba Program
Untuk
hasilnya sama seperti kalian menggunakan PHP biasa untuk menampilkan datanya.
Untuk lebih
bagus lagi, silahkan kembang kode didalam tutorial ini agar bisa menjadi jaul
lebih bagus dan jauh lebih kompleks lagi. Pada tutorial ini saya hanya memberi
gambaran bagaimana cara menampilkan data menggunakan AJAX.
Semoga Bermanfaat!