Seri Workshop : Modifikasi Template HTML Siap Pakai.

Halo sobat koding! πŸ‘‹ Kamu lagi belajar PHP native dan pengen bikin website dari template HTML gratis yang keren? Tenang, di artikel ini kita bakal bahas *step-by-step* gimana caranya mengubah template HTML menjadi website PHP native yang dinamis, rapi, dan bisa di-*routing* tanpa ribet!

### πŸ“₯ Langkah 1: Download Template HTML-nya Dulu

Pertama, tentu kita butuh **template HTML**. Di sini aku pakai template gratis dan keren dari GitHub:

πŸ”— [RuangAdmin – Free Bootstrap Admin Template](https://github.com/indrijunanda/RuangAdmin)

Kamu bisa klik tombol β€œCode” β†’ lalu β€œDownload ZIP”. Setelah itu, ekstrak dan buka di editor favorit kamu (misalnya VS Code/Cursor).

Template ini keren banget karena udah pakai Bootstrap, punya banyak komponen siap pakai, dan cocok buat dashboard admin.

### πŸ”§ Langkah 2: Kenapa Harus Dimodifikasi?

Nah, template HTML biasanya bersifat **statik**. Artinya:

  • Setiap file HTML berdiri sendiri
  • Tidak bisa saling “include”
  • Tidak bisa dipanggil dinamis dari URL
  • Gak cocok kalau nanti mau nyambungin ke database

Makanya, kita perlu modifikasi supaya jadi:

  • Modular (bisa potong jadi header, sidebar, footer, dll)
  • Dinamis (tiap halaman bisa dipanggil dari 1 file aja)
  • Mudah dikembangkan (kayak pakai framework, tapi masih PHP native)

### βœ‚οΈ Langkah 3: Potong Template Jadi Bagian-bagian Modular

Biasanya, kita pisahkan template jadi beberapa bagian:

  • header.php β†’ bagian atas, isi tag <head>, navbar, dll
  • sidebar.php (opsional)
  • footer.php β†’ bagian bawah, script JS, penutup HTML
  • Halaman-halaman isi β†’ misal home.php, form.php, dst.

Potong dengan rapi dari file HTML asli, lalu simpan di folder project kalian.

### πŸ›£οΈ Langkah 4: Bikin Router Manual di PHP

Setelah struktur rapi, kita bikin file utama index.php yang jadi pintu masuk website. Di dalamnya, kita ambil parameter hal dari URL untuk menentukan halaman mana yang ditampilkan.

<?php
// Ambil parameter hal dari URL (hal = halaman)
$hal = isset($_GET['hal']) ? $_GET['hal'] : 'home';

// Daftar halaman yang diizinkan (whitelist)
$allowed_pages = [
    'home' => 'home.php',
    'form' => 'form_basics.php'
];

// Tampilkan halaman jika ada di whitelist, kalau tidak arahkan ke 404
if (array_key_exists($hal, $allowed_pages)) {
    include $allowed_pages[$hal];
} else {
    include '404.php';
}
?>

Dengan begini, cukup 1 file saja (index.php) yang dipanggil di browser:

  • index.php?hal=home β†’ menampilkan halaman home.php
  • index.php?hal=form β†’ menampilkan form_basics.php
  • index.php?hal=xyz β†’ tampilkan 404.php

### 🧠 Teknik yang Dipakai

TeknikPenjelasan
Modularisasi FileMemecah template HTML menjadi beberapa file agar lebih reusable (header, footer, dsb)
Routing ManualMenentukan halaman yang ditampilkan berdasarkan parameter di URL (?hal=...)
Validasi HalamanMenangani jika halaman tidak dikenal, diarahkan ke 404.php
Include FileMenggunakan include di PHP untuk memanggil bagian-bagian layout dan konten
PHP NativeTidak menggunakan framework seperti Laravel, hanya murni PHP

### πŸ’‘ Tips Tambahan

  • Gunakan folder seperti pages/ untuk menyimpan file konten agar lebih rapi
  • Tambahkan whitelist halaman agar lebih aman
  • Nanti bisa dikembangkan ke penggunaan session, login, dan koneksi database

### ✨ Penutup

Dengan sedikit usaha, kita bisa sulap template HTML statik menjadi website dinamis berbasis PHP native! Gak perlu .htaccess, gak perlu framework berat, tapi tetap rapi dan bisa dipakai buat project beneran.

Ini langkah awal yang bagus buat kamu yang baru belajar backend development atau bikin project mini.

Semoga tutorial ini bermanfaat! Kalau kamu suka gaya artikel ini, boleh banget dibagikan ke teman-teman atau dipakai buat tugas kuliah πŸ˜„

Categories: , ,

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *