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 PIN, berkomunikasi dengan database, dan mengembalikan data dalam format JSON.
3. Database (MySQL): Tempat data input disimpan, termasuk data utama dan catatan PIN harian.

---

Langkah 1: Penyiapan Database (MySQL)

Anda memerlukan dua tabel utama di database Anda.

-- Tabel 1: Untuk menyimpan data utama yang diinput
CREATE TABLE data_utama (
    id INT AUTO_INCREMENT PRIMARY KEY,
    timestamp DATETIME DEFAULT CURRENT_TIMESTAMP,
    data_field_1 VARCHAR(255) NOT NULL,
    data_field_2 INT NOT NULL
);

-- Tabel 2: Untuk menyimpan PIN harian sebagai pengaman
CREATE TABLE pin_harian (
    id INT AUTO_INCREMENT PRIMARY KEY,
    tanggal DATE NOT NULL UNIQUE,
    pin_kode 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).

1. Fungsi Utility PIN (PIN Generator): Buat skrip (misalnya, pin_generator.php) yang memeriksa tabel pin_harian. Jika PIN hari ini belum ada, skrip akan membuat PIN acak 4 digit, menyimpannya, dan mengirimkan notifikasi (misalnya, via email) kepada admin.
2. Fungisi Input Data (api_input.php - Metode POST):

// Skrip PHP untuk menerima input data via POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 1. Ambil data dari input dan sanitasi
    $input_data = json_decode(file_get_contents("php://input"), true);
    $pin_input = $input_data['pin'];

    // 2. Cek Validasi PIN (panggil fungsi dari pin_generator.php)
    if (getDailyPin() !== $pin_input) {
        // Kirim response error jika PIN salah
        echo json_encode(['status' => 'error', 'message' => 'Kode PIN salah atau kedaluarsa.']);
        exit;
    }

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

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

// Skrip PHP untuk menyediakan data yang difilter via GET
if ($_SERVER['REQUEST_METHOD'] === 'GET') {
    // 1. Ambil data dari database, filter hanya data hari ini atau yang 'publish'
    // ...

    // 2. Hitung total data yang difilter (misalnya total kehadiran)
    // $total_filtered = ...

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

---

Langkah 3: Mendesain Laman Input (HTML/JavaScript)

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

1. Struktur HTML: Tambahkan formulir yang mencakup kolom PIN, data yang dibutuhkan, dan wadah untuk pesan feedback.
2. Kode Keamanan (PIN Input): Pastikan ada kolom untuk PIN rahasia.

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

3. 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
        // ...
        // Tampilkan juga total di bagian bawah tabel
        htmlContent += `<tr><td colspan="2">Total Data: </td><td>${res.total}</td></tr>`;
      }
      
      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.