#Ajax - #PHP

Membuat CRUD menggunakan Ajax PHP – Menampilkan Data

By Muzanni
4 January 2024
Ajax PHP

Membuat CRUD menggunakan Ajax PHP adalah salah satu materi yang menarik untuk dipelajari. CRUD merupakan singkatan dari Create, Read, Update, Delete. Definisi dari CRUD adalah operasi yang dilakukan dalam pemprosesan data yang disini menggunakan bahasa pemrograman PHP.

Operasi CRUD ini berupa proses pembuatan atau input data, membaca data, meng-update data dan juga menghapus data dari database MySQL. Dalam kasus yang akan kita dibahas pada artikel ini yaitu menggunakan MySQLI.

Membuat CRUD Menggunakan Ajax PHP – Menampilkan Data

Pada artikel sebelumnya sudah pernah dibahas bagaimana membuat CRUD dengan php dan mysqli. Namun artikel ini Kita akan coba menerapkan ajax dalam proses CRUD.

Ajax (Asynchronous JavaScript and XML) adalah salah satu teknik yang sangat bagus untuk membuat aplikasi website dinamis dimana keuntungannya yaitu operasi yang dilakukan tanpa harus menunggu reload dalam pemprosesannya.

Membuat CRUD Ajax PHP dan MySQLI

Untuk membuat crud dengan ajax php ini ada tahapan yang harus dilakukan. Ikuti langkah demi langkah yang dijelaskan di bawah untuk menghindari kesalahan pada pogram yang dibuat. Oke langsung saja Kita bahas tahapan demi tahapan tersebut.

Membuat Database MySQL

Tahapan awal untuk membuat CRUD menggunakan ajax adalah menyiapkan database beserta tabel yang diperlukan. Misalnya disini saya akan membuat sebuah database dengan nama malasngoding dan tabel yang akan Kita implementasikan yaitu tabel user.

Untuk proses pembuatannya sendiri dilakukan dengan langkah-langkah berikut :

Aktifkan apache dan mysql yang ada di XAMPP Control Panel
Akses URL http://localhost/phpmyadmin/
Pilih menu basis data atau database dan buatkan nama database (malasngoding) klik tombol buat
Selanjutnya buat nama tabel dan isikan jumlah kolom pada tabel (disini saya menggunakan nama tabel user dengan jumlah kolom 5)
Isikan nama kolom, tipe data yang digunakan serta ukuran dari tipe data tesebut

membuat crud dengan ajax — Struktur Tabel User

Untuk untuk script database nya bisa dilihat dari script berikut ini

-- phpMyAdmin SQL Dump

-- version 5.1.1

-- https://www.phpmyadmin.net/

-- Host: 127.0.0.1

-- Waktu pembuatan: 04 Jan 2024 pada 14.30

-- Versi server: 10.4.22-MariaDB

-- Versi PHP: 7.4.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: `malasngoding`

-- --------------------------------------------------------

-- Struktur dari tabel `user`

CREATE TABLE `user` (

`user_id` int(11) NOT NULL,

`user_nama` varchar(100) NOT NULL,

`user_kelamin` varchar(100) NOT NULL,

`user_kontak` varchar(100) NOT NULL,

`user_alamat` varchar(100) NOT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

-- Dumping data untuk tabel `user`

INSERT INTO `user` (`user_id`, `user_nama`, `user_kelamin`, `user_kontak`, `user_alamat`) VALUES

(1, 'Muhammad Wali', 'Laki-Laki', '082272242022', 'Banda Aceh'),

(2, 'Isna', 'Laki-Laki', '082272242021', 'Lhokseumawe'),

(3, 'Januar', 'Laki-Laki', '082272242023', 'Langsa');

-- Indexes for dumped tables

-- Indeks untuk tabel `user`

ALTER TABLE `user`

ADD PRIMARY KEY (`user_id`);

-- AUTO_INCREMENT untuk tabel yang dibuang

-- AUTO_INCREMENT untuk tabel `user`

ALTER TABLE `user`

MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

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 */;

Membuat Koneksi Database

Langakh kedua yaitu membuat koneksi antara database yang sudah kita buat sebelumnya dengan project . Sebenarnya membuat koneksi sendiri sudah dibahasa secara detail pada artikel sebelumnya disini.

Buatkan satu file koneksi.php Berikut ini script untuk mengkoneksikan database dengan project Kita.

<?php

$koneksi = mysqli_connect("localhost","root","","malasngoding");

Menampilkan Data Menggunakan Ajax PHP dan MySQLI

Sampai juga ke tahapan inti dari artikel ini yaitu salah satu tahapan operasi CRUD (Menampilkan data menggunakan ajax, php dan mysql). Oke langsung saja kita buatkan di file index.php

<!DOCTYPE html>

<head>

<title>Malasngoding.com - CRUD AJAX PHP MYSQLI </title>

</head>

<body>

<br>

<h2>CRUD AJAX PHP MYSQLI - MENAMPILKAN DATA</h2>

</div>

</body>

integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

$(document).ready(function () {

tampil_data();

});

//fungsi tampil data

function tampil_data() {

$.ajax({

url: 'data.php',

type: 'get',

success: function(data) {

$('#tampil_data').html(data);

}

});

}

</script>

</html>

Adapun penjelasan singkat yang diharapkan dapat membantu pembaca dalam penjelasan script untuk menampilkan data menggunakan ajax php dan mysql.

<head>

<title>Malasngoding.com - CRUD AJAX PHP MYSQLI </title>

</head>

Kode yang berada dalam tag head ini adalah library yang kita gunakan. Disini saya menggunakan library bootstrap.css dan bootstrap.css selain itu juga judul dan meta yang digunakan utnuk aplikasi.

<body>

<br>

<h2>CRUD AJAX PHP MYSQLI - MENAMPILKAN DATA</h2>

</div>

</body>

Script yang berada dala tag body ini adalah tempat dimana data yang akan ditampilkan. Untuk menampilkan data menggunakan ajax akan dipanggil dari id="tampil_data".

1 2	<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Dalam tag script ini adalah library dari jquery dimana dalam library ini si ajax berada.

$(document).ready(function () {

tampil_data();

});

script ini digunakan untuk menampilkan data dengan kata lain script tampil_data pertama kali aja jalankan ketika kita membuka app websitenya. sedangkan isi dari fungsi tampil_data() sendiri adalah fungsi yang Kita buatkan untuk menampilkan data.

function tampil_data() {

$.ajax({

url: 'data.php',

type: 'get',

success: function(data) {

$('#tampil_data').html(data);

}

});

}

fungsi dari tampil_data() ini adalah proses ajax untuk menampilkan data. URL untuk menampilkan sendiri berada pada file data.php dengan type pengiriman data get.

Adapaun file url untuk menampilkan data atau data.php isinya adalah seberiktu :

<thead>

<tr>

<th scope="col">Jenis Kelamin</th>

<th scope="col">Kontak</th>

<th scope="col">Alamat</th>

</tr>

</thead>

<tbody>

<?php

include "koneksi.php";

$no=1;

$data=mysqli_query($koneksi, "SELECT * FROM user");

while ($d=mysqli_fetch_array($data)) {

<tr>

</tr>

<?php

}

</tbody>

</table>

Script pada data.php berisikan tampilan data yang ada pada database. File ini akan ditampilkan pada halaman utama (yang sebelumnya kita buat index.php) dengan teknik ajax.

Jika masih bingung cara menampilkan data Kamu bisa membacanya disini (Cara Menampilkan Data dengan PHP dan MySQLI)

Hasil dari yang kita buat diatas dapat dilihat pada gambar berikut :

Oke sobat malasngoding.com sekian dulu materi membuat CRUD menggunakan Ajax PHP pada proses menampilkan data, Kita akan bahas kembali di materi part selanjutnya untuk operasi lainnya.

List Materi Lengkap Membuat CRUD AJAX JQUERY