Panduan Lengkap: Membangun Sistem Input dan Tampilan Data Dinamis dengan PHP API

Ingin menambahkan fitur input formulir yang aman dan menampilkan data real-time pada website Anda? Model ini cocok jika Anda memiliki layanan hosting yang mendukung PHP dan database MySQL. Kami akan menunjukkan cara membuat website statis (HTML/JavaScript) berinteraksi dengan PHP API sebagai jembatan yang aman menuju database.

---

Arsitektur Sistem (Tiga Komponen)

1. Frontend (HTML/JavaScript): Laman website di mana formulir dan tabel berada. Menggunakan JavaScript untuk mengirim data dan menarik balasan.
2. Backend (PHP API): Skrip PHP yang di-host di server. Tugasnya adalah memvalidasi input, berkomunikasi dengan database, dan mengembalikan data dalam format JSON.
3. Database (MySQL): Tempat data input disimpan, termasuk data utama dan pengaman jika ada.

---

Langkah 1: Penyiapan Database (MySQL)

Siapkan tabel untuk menampung data di database.

CREATE TABLE data (
    id INT AUTO_INCREMENT PRIMARY KEY,
    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
    data_field_1 VARCHAR(255) NOT NULL,
    data_field_2 INT NOT NULL
);

---

Langkah 2: Membangun PHP API (Logika Server-Side)

PHP API akan memiliki dua fungsi utama: menerima data (POST) dan mengirim data (GET).

Fungsi Input Data (api_input.php - Metode POST)

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $input_data = json_decode(file_get_contents("php://input"), true);

    // Lakukan INSERT atau UPDATE ke tabel data
    // ...
    // Kirim response sukses
    echo json_encode(['status' => 'success', 'message' => 'Data berhasil disimpan.']);
}

Fungsi Tampilan Data (api_tampil.php - Metode GET):

if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    // 1. Ambil data dari database, misal filter hanya data yang 'publish'
    // ...

    // 2. Kirim data dalam format JSON
    echo json_encode(['status' => 'success', 'data' => $filtered_results]);
}

---

Langkah 3: Mendesain Laman Input (HTML/JavaScript)

Buat laman statis di website Anda yang berisi formulir input dan kode JavaScript untuk komunikasi.

Struktur HTML: Tambahkan formulir yang mencakup data yang dibutuhkan, dan wadah untuk pesan feedback

<!-- Formulir Input Data dengan Kolom PIN -->
<div id="feedback-area"></div>
<form id="dataForm">
  <label for="data1">Data Penting:</label>
  <input type="text" id="data1" name="data1" required>
  
  <button type="submit" id="submitBtn">Kirim Data</button>
</form>

Skrip Pengiriman Data: Gunakan JavaScript fetch untuk mengirim data formulir ke api_input.php

const INPUT_API_URL = 'URL_SERVER_ANDA/api_input.php';

document.getElementById('dataForm').addEventListener('submit', function(e) {
  e.preventDefault();
  
  const formData = new FormData(this);
  const dataObject = Object.fromEntries(formData.entries());
  
  // Kirim data ke PHP API
  fetch(INPUT_API_URL, {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(dataObject)
  })
  .then(response => response.json())
  .then(res => {
    document.getElementById('feedback-area').textContent = res.message;
    // Logika berhasil/gagal
  });
});

---

Langkah 4: Mendesain Laman Tampilan (HTML/JavaScript)

Laman ini berfungsi untuk menarik dan menampilkan data terbaru dari database melalui PHP API.

<div id="tabel-data-dinamis">
  <p>Memuat data...</p>
</div>

<script>
const VIEW_API_URL = 'URL_SERVER_ANDA/api_tampil.php';

function loadDynamicData() {
  fetch(VIEW_API_URL)
    .then(response => response.json())
    .then(res => {
      let htmlContent = '<table>';
      
      if (res.status === 'success' && res.data) {
        // Buat baris tabel dari res.data
        // ...
      }
      
      htmlContent += '</table>';
      document.getElementById('tabel-data-dinamis').innerHTML = htmlContent;
    });
}

loadDynamicData(); // Panggil saat laman dimuat
</script>

Dengan mengikuti kerangka ini, Anda telah berhasil membuat sistem dinamis: laman HTML website Anda akan berkomunikasi dengan PHP API, yang aman dan terpusat di server, untuk mengelola semua data Anda.

Oleh Opan
Dipostkan December 31, 2024
Seorang guru matematika yang hobi ngeblog dan menulis. Dari ketiganya terwujudlah website ini sebagai sarana berbagi pengetahuan yang saya miliki.

Baca Juga