Skip to main content

Tutorial Pembuatan Aplikasi Website dengan Database untuk Pemula: Contoh PHP & MySQL di Localhost

Diperbarui: 4 Desember 2025

Ringkasan cepat:

  • Aplikasi website berbeda dengan sekadar halaman statis: data disimpan di database (misalnya MySQL) sehingga bisa tambah, edit, dan hapus data lewat browser.
  • Untuk pemula, kombinasi paling mudah dipelajari adalah PHP + MySQL yang dijalankan di localhost memakai XAMPP/Laragon sebelum di-upload ke hosting.
  • Langkah besar yang akan kita lakukan: install server lokal, buat database & tabel, tulis file PHP untuk koneksi, buat halaman daftar data, form tambah data, dan proses simpan ke database.
  • Setelah paham dasar PHP + MySQL, kamu bisa naik level ke framework Laravel agar struktur proyek lebih rapi dan aman.
  • Dari sisi syariat, gunakan skill ini untuk hal-hal yang halal: aplikasi administrasi, website usaha, atau sistem informasi yang bermanfaat — bukan untuk penipuan, judi online, atau maksiat lain.

Daftar isi

Kapan sebaiknya mulai belajar membuat aplikasi website dengan database?

Kamu sudah waktunya belajar bikin aplikasi website (bukan sekadar halaman statis) ketika:

  • Sering diminta membuat sistem sederhana: buku tamu digital, CRUD data siswa, catatan stok barang, atau daftar kontak pelanggan.
  • Ingin naik level dari sekadar front-end (HTML/CSS) menjadi full stack pemula yang paham cara menyimpan data ke database.
  • Berencana membuka jasa pembuatan aplikasi/website untuk UMKM dan butuh portofolio nyata.
  • Mahasiswa yang akan mengerjakan tugas akhir berbasis PHP/MySQL atau Laravel.

Belajar di localhost aman dan gratis: tidak perlu beli hosting dulu, dan kalau ada error tinggal diperbaiki tanpa mengganggu orang lain.

Apa itu aplikasi website berbasis database (PHP & MySQL)?

Aplikasi website adalah website yang bisa memproses data, bukan hanya menampilkannya. Data disimpan di database sehingga bisa ditambah, diubah, dan dihapus lewat antarmuka web.

Contoh aplikasi website sederhana:

  • Aplikasi catatan pengunjung masjid (nama, alamat, keperluan).
  • Aplikasi daftar siswa dan nilai.
  • Aplikasi daftar pesanan produk rumahan.

Teknologi dasar yang kita pakai:

  • HTML + CSS: membuat tampilan form dan tabel data.
  • PHP: menjalankan logika (menerima input form, memproses, dan mengirim perintah ke database).
  • MySQL: tempat menyimpan data di server (nama tabel, kolom, dan baris data).

Syarat sebelum membuat aplikasi website (alat, software, dan bekal ilmu)

1. Alat dan software yang dibutuhkan

  • Komputer/laptop dengan sistem operasi Windows, Linux, atau macOS.
  • Browser modern (Chrome, Firefox, Edge, dll.).
  • Code editor, misalnya Visual Studio Code, Sublime Text, atau Notepad++.
  • Server lokal seperti XAMPP atau Laragon (di artikel ini kita contohkan XAMPP).

Kalau kamu belum terbiasa dengan XAMPP dan localhost, wajib baca dulu artikel: Kenapa localhost tidak bisa dibuka? Ini penyebab dan solusinya . Untuk yang ingin mendalami WordPress di XAMPP, ada juga: Cara install WordPress di XAMPP dengan mudah dan cepat .

2. Bekal ilmu pemrograman dasar

  • Sudah tahu dasar HTML (tag, form, tabel) dan sedikit CSS untuk merapikan tampilan.
  • Mengenal variabel dan operator di PHP (lebih bagus lagi kalau sudah pernah print teks dengan echo).
  • Mengerti konsep database: tabel, kolom, dan baris data.

3. Syarat syar’i dalam memanfaatkan aplikasi website

  • Niatkan belajar untuk menambah skill dan memberi manfaat: membuat sistem administrasi masjid, lembaga pendidikan, UMKM, dan sejenisnya.
  • Hindari menggunakan ilmu ini untuk membangun sistem yang jelas-jelas haram (judi online, penipuan, konten maksiat, dan lainnya).
  • Jika kelak menerima proyek, pastikan akad dan jenis usaha klien juga tidak bertentangan dengan syariat.

Langkah-langkah pembuatan aplikasi website sederhana dengan database

Kita akan membuat contoh aplikasi sederhana bernama “Buku Tamu Online” dengan fitur: menyimpan nama, email, dan pesan pengunjung.

Langkah 1: Install dan jalankan XAMPP

  1. Download XAMPP dari situs resminya sesuai sistem operasi kamu.
  2. Install seperti aplikasi biasa.
  3. Buka XAMPP Control Panel, lalu klik Start pada Apache dan MySQL.
  4. Buka browser, ketik http://localhost/. Kalau halaman XAMPP muncul, berarti server lokal siap dipakai.

Langkah 2: Buat folder proyek di htdocs

  1. Buka folder instalasi XAMPP, cari folder htdocs.
  2. Buat folder baru, misalnya bukutamu.
  3. Di dalam folder bukutamu ini, kita akan menyimpan semua file PHP dan aset lainnya.

Langkah 3: Buat database & tabel di phpMyAdmin

  1. Buka browser dan kunjungi http://localhost/phpmyadmin.
  2. Klik menu Databases, di kolom nama database ketik: db_bukutamu, lalu klik Create.
  3. Setelah database dibuat, klik database tersebut > tab SQL dan jalankan perintah ini:
CREATE TABLE tamu (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  nama VARCHAR(100) NOT NULL,
  email VARCHAR(100) NOT NULL,
  pesan TEXT NOT NULL,
  dibuat_pada TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB;

Sekarang database dan tabel siap diisi dari aplikasi web.

Langkah 4: Buat file koneksi ke database (koneksi.php)

  1. Di folder bukutamu, buat file baru koneksi.php.
  2. Isi dengan kode berikut (contoh sederhana, tanpa PDO):
<?php
$host   = "localhost";
$user   = "root";
$pass   = "";
$dbname = "db_bukutamu";

$conn = mysqli_connect($host, $user, $pass, $dbname);

if (! $conn) {
  die("Koneksi gagal: " . mysqli_connect_error());
}
?>

File ini akan dipanggil di tiap halaman yang butuh akses database. Di server produksi, jangan lupa mengganti user, password, dan nama database yang benar.

Langkah 5: Buat halaman daftar tamu (index.php)

  1. Buat file index.php di folder yang sama.
  2. Isi dengan kode dasar seperti ini:
<?php include 'koneksi.php'; ?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Buku Tamu Online</title>
  <style>
    body { font-family: Arial, sans-serif; }
    table { border-collapse: collapse; width: 100%; margin-top: 1rem; }
    th, td { border: 1px solid #ddd; padding: 8px; }
    th { background: #f3f4f6; }
  </style>
</head>
<body>
  <h1>Buku Tamu Online</h1>
  <p><a href="tambah.php">Tambah Tamu Baru</a></p>

  <table>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Email</th>
      <th>Pesan</th>
      <th>Dibuat</th>
    </tr>
    <?php
    $no  = 1;
    $sql = "SELECT * FROM tamu ORDER BY dibuat_pada DESC";
    $result = mysqli_query($conn, $sql);
    while ($row = mysqli_fetch_assoc($result)) :
    ?>
      <tr>
        <td><?= $no++; ?></td>
        <td><?= htmlspecialchars($row['nama']); ?></td>
        <td><?= htmlspecialchars($row['email']); ?></td>
        <td><?= nl2br(htmlspecialchars($row['pesan'])); ?></td>
        <td><?= $row['dibuat_pada']; ?></td>
      </tr>
    <?php endwhile; ?>
  </table>
</body>
</html>

Kode di atas menampilkan semua tamu yang sudah tersimpan. Perhatikan penggunaan htmlspecialchars() untuk mengurangi risiko XSS.

Langkah 6: Buat form tambah tamu (tambah.php)

  1. Buat file tambah.php.
  2. Isi dengan form sederhana seperti berikut:
<?php include 'koneksi.php'; ?>
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Tambah Tamu</title>
</head>
<body>
  <h1>Tambah Tamu</h1>
  <form action="proses_tambah.php" method="post">
    <p>
      <label>Nama:<br>
        <input type="text" name="nama" required>
      </label>
    </p>
    <p>
      <label>Email:<br>
        <input type="email" name="email" required>
      </label>
    </p>
    <p>
      <label>Pesan:<br>
        <textarea name="pesan" rows="4" required></textarea>
      </label>
    </p>
    <button type="submit">Simpan</button>
  </form>

  <p><a href="index.php">Kembali ke daftar</a></p>
</body>
</html>

Langkah 7: Proses simpan data (proses_tambah.php)

  1. Buat file proses_tambah.php.
  2. Isi dengan kode proses berikut:
<?php
include 'koneksi.php';

$nama  = $_POST['nama'] ?? '';
$email = $_POST['email'] ?? '';
$pesan = $_POST['pesan'] ?? '';

$nama  = trim($nama);
$email = trim($email);
$pesan = trim($pesan);

if ($nama === '' || $email === '' || $pesan === '') {
  die('Data tidak lengkap.');
}

$sql = "INSERT INTO tamu (nama, email, pesan) VALUES (?, ?, ?)";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, "sss", $nama, $email, $pesan);

if (mysqli_stmt_execute($stmt)) {
  header('Location: index.php');
  exit;
} else {
  echo "Gagal menyimpan data: " . mysqli_error($conn);
}

Di sini kita memakai prepared statement sederhana untuk mengurangi risiko SQL Injection.

Langkah 8 (opsional): Tambah fitur edit dan hapus

Setelah fitur tambah dan list berjalan, kamu bisa menambah:

  • Halaman edit.php untuk mengubah data tertentu.
  • Halaman hapus.php untuk menghapus data berdasarkan id.

Prinsipnya sama: ambil id, tampilkan data lama di form, lalu proses dengan query UPDATE atau DELETE yang aman.

Langkah 9: Uji aplikasi di browser

  1. Buka http://localhost/bukutamu/index.php.
  2. Tambahkan beberapa data tamu lewat form.
  3. Cek di phpMyAdmin apakah data benar-benar masuk ke tabel tamu.

Jika semua berjalan lancar, selamat! Kamu sudah berhasil membuat aplikasi website sederhana dengan database.

Tips pengembangan lanjutan: struktur rapi, keamanan, dan Laravel

  • Rapikan struktur folder: pisahkan folder includes/ untuk file koneksi, views/ untuk tampilan, dan assets/ untuk CSS/JS.
  • Validasi input secara konsisten: jangan hanya mengandalkan required di HTML; selalu validasi di PHP.
  • Belajar dasar keamanan web: XSS, CSRF, dan SQL Injection. Biasakan pakai prepared statement dan filter output.
  • Naik level ke Laravel: setelah nyaman dengan PHP mentah, pelajari Laravel untuk struktur MVC, migrasi database, dan fitur keamanan bawaan.
  • Siapkan untuk online: ketika ingin di-hosting, kamu bisa mempelajari panel hosting seperti EHCP di artikel pengertian EHCP dan cara kerjanya.
  • Pasang analitik: kalau sudah online dan dipakai publik, gunakan Google Analytics 4 untuk memantau pengguna aplikasi.

Risiko dan kesalahan umum saat membuat aplikasi website

  • Menggunakan script bajakan: tema atau plugin nulled mengandung risiko malware dan hukumnya bermasalah karena melanggar hak cipta.
  • Tidak memisahkan file konfigurasi: menyimpan password database tersebar di banyak file, sehingga sulit dikelola saat pindah server.
  • Tidak pernah backup database: kalau server rusak atau file terhapus, semua data pengguna bisa hilang.
  • Mengabaikan keamanan: input tidak difilter, password tidak di-hash, dan akses admin tidak dibatasi.
  • Langsung ke Laravel tanpa paham dasar: membuat kamu hanya “copy-paste tutorial” tanpa mengerti apa yang terjadi di belakang.

FAQ seputar pembuatan aplikasi website dengan database

1. Apakah harus mulai dari PHP & MySQL? Bagaimana dengan Node.js atau lainnya?

Tidak wajib, tapi PHP & MySQL adalah kombinasi yang paling umum untuk pemula di Indonesia karena dokumentasi dan hostingnya melimpah. Setelah paham konsep CRUD di PHP, pindah ke teknologi lain akan lebih mudah.

2. Kapan saya perlu memakai Laravel?

Ketika proyek sudah mulai besar, banyak fitur, dan butuh struktur kode rapi. Jika masih aplikasi kecil untuk belajar, PHP murni sudah cukup. Laravel membantu soal routing, struktur folder, keamanan, dan manajemen database.

3. Apakah aplikasi di localhost bisa langsung di-online-kan?

Bisa. Kamu perlu membeli hosting & domain, mengupload file aplikasi ke server, membuat database di hosting, lalu mengatur ulang konfigurasi koneksi. Konsepnya mirip dengan saat memakai XAMPP, hanya alamat servernya yang berbeda.

4. Bagaimana jika localhost saya tidak bisa diakses?

Periksa apakah Apache dan MySQL sudah berjalan. Jika masih error, baca panduan khusus tentang masalah localhost di Beginisob, misalnya port bentrok atau service tidak bisa start.

5. Apa aplikasi semacam ini boleh dijual ke klien menurut Islam?

InsyaAllah boleh selama objek pekerjaannya halal (bukan untuk maksiat), akadnya jelas, tidak ada penipuan, dan kamu tidak mengambil hak orang lain (misalnya menjual script bajakan atau hasil curian).

Baca juga di Beginisob.com

Comments

Edukasi Terpopuler

Connect With Us

Copyright @ 2023 beginisob.com, All right reserved