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!

BelajarwithIB

Banner

Menampilkan Data Dari Database Menggunakan AJAX

Tutorial PHP Lanjutan Part 35 : Menampilkan Data Dari Database Menggunakan AJAX

Menampilkan Data Dari Database Menggunakan AJAX

Membuat Database Siswa

Membuat Tampilan

Penjelasan Singkat

Mengambil Data Dari Database

Penjelasan Singkat

Uji Coba Program

Posting Komentar

Cara Mengatasi Perintah DROP DATABASE Menghilang Di PHPMYADMIN

Aplikasi inventaris barang berbasis web - Free source code

Aplikasi E-Voting Pemilihan Digital Berbasis WEB Menggunakan PHP dan MySQL

Generate QR Code Menggunakan PHP

Membuat Auto Search Suggestion/Autocomplete Dengan PHP