Cara Menampilkan Data dari Database ke HTML dengan PHP

Menampilkan data dari database ke halaman web adalah salah satu tugas paling umum dalam pengembangan aplikasi web. Jika kamu baru mulai belajar PHP dan MySQL, contoh sederhana seperti menampilkan daftar produk atau data pengguna bisa menjadi latihan yang berguna. Panduan ini membahas cara menampilkan data dari database ke HTML dengan PHP, mulai dari menyiapkan database hingga menampilkan data dalam tabel HTML.

Persiapan: Membuat Database dan Tabel

Sebelum menulis kode PHP, kamu perlu menyiapkan database MySQL. Misalkan kita akan menampilkan daftar produk dari tabel produk. Buat database dengan nama toko dan tabel produk seperti berikut:

CREATE DATABASE toko;
USE toko;
CREATE TABLE produk (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nama VARCHAR(100) NOT NULL,
  harga DECIMAL(10,2) NOT NULL
);
INSERT INTO produk (nama, harga) VALUES ('Kaos Polos', 75000), ('Topi', 50000);

Pastikan server MySQL berjalan dan kamu memiliki akses untuk membuat database. Jika menggunakan XAMPP, kamu bisa mengakses phpMyAdmin untuk menjalankan perintah SQL di atas.

Membuat Koneksi ke Database dengan PHP

Langkah pertama dalam kode PHP adalah membuat koneksi ke database. Gunakan ekstensi mysqli atau PDO. Contoh di bawah ini menggunakan mysqli karena lebih sederhana untuk pemula.

Buat file koneksi.php:

<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$db   = 'toko';

$conn = new mysqli($host, $user, $pass, $db);

if ($conn->connect_error) {
    die('Koneksi gagal: ' . $conn->connect_error);
}
?>

Ganti $user dan $pass sesuai pengaturan server MySQL kamu. Jika koneksi berhasil, tidak ada pesan error yang muncul.

Menjalankan Query untuk Mengambil Data

Setelah koneksi berhasil, kamu bisa menjalankan query SELECT untuk mengambil data dari tabel. Simpan hasilnya dalam variabel untuk diproses lebih lanjut.

Buat file index.php dan tambahkan kode berikut:

<?php
require 'koneksi.php';

$sql = 'SELECT id, nama, harga FROM produk';
$result = $conn->query($sql);
?>

Variabel $result sekarang berisi hasil query. Jika query gagal, $result akan bernilai false, jadi sebaiknya periksa hal ini sebelum menampilkan data.

Menampilkan Data ke dalam Tabel HTML

Gunakan loop while untuk mengambil setiap baris data dan menampilkannya dalam elemen tabel HTML. Berikut contoh lengkapnya:

<!DOCTYPE html>
<html>
<head>
    <title>Daftar Produk</title>
</head>
<body>
    <h1>Daftar Produk</h1>
    <table border="1" cellpadding="8">
        <tr>
            <th>ID</th>
            <th>Nama</th>
            <th>Harga</th>
        </tr>
        <?php if ($result && $result->num_rows > 0): ?>
            <?php while($row = $result->fetch_assoc()): ?>
                <tr>
                    <td><?= htmlspecialchars($row['id']) ?></td>
                    <td><?= htmlspecialchars($row['nama']) ?></td>
                    <td><?= htmlspecialchars($row['harga']) ?></td>
                </tr>
            <?php endwhile; ?>
        <?php else: ?>
            <tr><td colspan="3">Tidak ada data.</td></tr>
        <?php endif; ?>
    </table>
</body>
</html>

Fungsi htmlspecialchars() penting untuk mencegah serangan XSS jika data berasal dari input pengguna. Selalu gunakan fungsi ini saat menampilkan data ke HTML.

Menangani Error dan Membersihkan Sumber Daya

Setelah selesai menggunakan hasil query, tutup koneksi untuk membebaskan memori. Tambahkan kode berikut di akhir file:

<?php
$result->free();
$conn->close();
?>

Jika terjadi error pada query, kamu bisa menampilkan pesan yang lebih informatif dengan memeriksa $conn->error. Namun, hindari menampilkan detail error ke pengguna umum karena bisa membocorkan informasi sensitif.

Tips Keamanan dan Praktik Terbaik

Gunakan prepared statement jika query melibatkan input dari pengguna untuk mencegah SQL injection.
Selalu validasi dan sanitasi data sebelum menampilkannya di HTML.
Pisahkan logika koneksi dan tampilan ke dalam file terpisah agar kode lebih rapi.
Gunakan PDO jika kamu membutuhkan dukungan untuk berbagai jenis database.

Dengan mengikuti langkah-langkah di atas, kamu sudah bisa menampilkan data dari database ke halaman HTML menggunakan PHP. Latihan ini menjadi dasar untuk membangun aplikasi web yang lebih kompleks.

Pertanyaan yang Sering Diajukan

Bagaimana jika data yang ditampilkan kosong?

Periksa apakah query berhasil dijalankan dan tabel memiliki data. Gunakan var_dump($result) untuk melihat hasil query. Pastikan juga koneksi database tidak error.

Apakah boleh menggunakan `mysql_*`?

Tidak. Fungsi mysql_* sudah dihapus sejak PHP 7. Gunakan mysqli atau PDO yang lebih aman dan mendukung fitur modern.

Bagaimana cara menampilkan data dengan format tanggal atau angka?

Gunakan fungsi PHP seperti number_format() untuk format angka, atau date() untuk format tanggal. Sesuaikan dengan jenis data yang disimpan di database.