Cara Membuat Website dengan PHP Native untuk Pemula
Oleh
Mila Rosyida
Membuat website dengan PHP native adalah salah satu cara sederhana untuk memahami bagaimana halaman web diproses di sisi server sebelum mulai menggunakan framework seperti Laravel atau CodeIgniter.
Pada tutorial ini, kamu akan membuat website PHP sederhana dengan tiga halaman: Home, About, dan Contact. Website akan memiliki template header dan footer yang bisa digunakan ulang, menu dengan active state, serta routing sederhana menggunakan parameter URL.
Semuanya akan dijalankan terlebih dahulu di localhost menggunakan XAMPP.
Kenapa Belajar PHP Native?
Framework seperti Laravel dan CodeIgniter menyediakan routing, struktur aplikasi, koneksi database, serta berbagai fitur lain yang membantu mempercepat pengembangan.
Namun, untuk pemula, PHP native bisa menjadi tempat yang baik untuk memahami fondasinya.
Melalui project sederhana ini, kamu akan melihat langsung bagaimana PHP:
- menerima parameter dari URL,
- menentukan halaman yang akan ditampilkan,
- menggunakan kembali template,
- memproses file di server,
- dan menghasilkan HTML untuk browser.
Setelah memahami alur tersebut, konsep routing dan templating pada framework akan lebih mudah dipahami.
PHP native bukan satu-satunya cara untuk membuat website. Jika ingin mempelajari struktur website statis terlebih dahulu, kamu bisa mulai dari panduan cara membuat website dengan HTML dan CSS. Sementara itu, jika tidak ingin membangun seluruh struktur website melalui coding, kamu juga bisa menggunakan CMS seperti WordPress atau website builder.
Pada tutorial ini, kita tetap menggunakan PHP native supaya kamu bisa memahami proses website dari sisi coding dan server.
Fondasi yang Perlu Dipahami Sebelum Coding
Sebelum mulai membuat project, setidaknya kamu perlu mengenal HTML, CSS, dan sintaks dasar PHP.
HTML dan CSS
HTML digunakan untuk membuat struktur halaman, sedangkan CSS mengatur tampilannya.
Dalam project ini, struktur website akan terdiri dari:
- header,
- menu navigasi,
- konten utama,
- dan footer.
Kalau kedua bagian tersebut masih terasa asing, pelajari dahulu dasar HTML dan CSS sebelum melanjutkan ke bagian PHP.
PHP
Berbeda dari HTML yang langsung dibaca browser, kode PHP diproses terlebih dahulu oleh PHP interpreter di server.
Contoh sintaks PHP sederhana:
|
1 2 3 |
<?php echo "Halo, ini PHP!"; ?> |
File tersebut harus disimpan menggunakan ekstensi .php.
Karena kode PHP membutuhkan PHP interpreter untuk diproses, file .php tidak cukup dibuka dengan double click seperti file HTML. Pada tutorial ini kita akan menjalankannya melalui web server lokal menggunakan XAMPP.
Persiapan Membuat Website PHP di Localhost
Ada tiga tools utama yang akan digunakan.
1. Code Editor
Kamu bisa menggunakan Visual Studio Code atau code editor lain yang mendukung syntax highlighting PHP.
Syntax highlighting membantu membedakan variabel, fungsi, string, dan struktur kode sehingga file PHP lebih mudah dibaca.
2. Browser
Chrome, Firefox, Edge, atau browser modern lainnya dapat digunakan untuk melihat hasil website.
Developer Tools pada browser juga berguna untuk mengecek request, status HTTP, CSS, dan HTML yang dihasilkan.
3. XAMPP
XAMPP menyediakan lingkungan pengembangan lokal yang mencakup Apache, PHP, dan MariaDB.
Setelah XAMPP terpasang, buka XAMPP Control Panel, kemudian jalankan Apache.
Selanjutnya buat folder project:
C:\xampp\htdocs\myphpwebsite
Website nantinya dapat dibuka melalui:
http://localhost/myphpwebsite/
Selama tahap belajar, project masih berjalan di komputer lokal. Jika nantinya ingin diakses melalui internet, project PHP perlu dipindahkan ke web hosting.
Kalau kamu ingin langsung menyiapkan tempat untuk deploy setelah project selesai, kamu bisa menggunakan Web Hosting DomaiNesia yang mendukung PHP agar file website dapat dijalankan secara online.
Struktur Folder Website PHP
Supaya project tetap mudah dikelola, gunakan struktur berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
myphpwebsite/ │ ├── index.php │ ├── pages/ │ ├── home.php │ ├── about.php │ └── contact.php │ ├── includes/ │ ├── header.php │ └── footer.php │ └── assets/ └── css/ └── style.css |
Project ini memiliki tujuh file utama.
Folder pages/ berisi konten masing-masing halaman. Folder includes/ menyimpan bagian website yang digunakan berulang kali, sedangkan assets/css/ digunakan untuk stylesheet.
File index.php akan menjadi titik masuk utama sekaligus menangani routing sederhana.
Langkah 1: Membuat Routing di index.php
Pertama, buat file index.php pada root folder project.
Gunakan kode berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php $routes = [ 'home' => [ 'file' => __DIR__ . '/pages/home.php', 'title' => 'Home', ], 'about' => [ 'file' => __DIR__ . '/pages/about.php', 'title' => 'About', ], 'contact' => [ 'file' => __DIR__ . '/pages/contact.php', 'title' => 'Contact', ], ]; $page = $_GET['page'] ?? 'home'; if (!array_key_exists($page, $routes)) { $page = 'home'; } $currentPage = $page; $pageTitle = $routes[$page]['title'] . ' | My PHP Website'; ?> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title><?php echo htmlspecialchars($pageTitle, ENT_QUOTES, 'UTF-8'); ?></title> <meta name="description" content="Website sederhana dengan PHP native untuk belajar routing, template, dan navigasi." > <link rel="stylesheet" href="assets/css/style.css"> </head> <body> <?php require __DIR__ . '/includes/header.php'; ?> <main id="contents"> <?php require $routes[$page]['file']; ?> </main> <?php require __DIR__ . '/includes/footer.php'; ?> </body> </html> |
Bagian berikut mengambil nilai page dari URL:
$page = $_GET['page'] ?? 'home';
Jika parameter tidak tersedia, halaman default yang digunakan adalah home.
Misalnya:
index.php?page=about
akan menghasilkan nilai:
$page = 'about';
Namun, nilai tersebut tidak langsung digunakan sebagai nama file.
Kode terlebih dahulu mengecek apakah halaman tersedia di dalam $routes:
|
1 2 3 |
if (!array_key_exists($page, $routes)) { $page = 'home'; } |
Dengan begitu, hanya halaman yang sudah didefinisikan di route map yang dapat dipanggil.
Langkah 2: Membuat Halaman Website
Selanjutnya buat tiga file di folder pages.
pages/home.php
|
1 2 3 4 5 6 |
<div class="page"> <h2>Selamat Datang di My PHP Website</h2> <p> Ini adalah halaman utama website PHP sederhana yang sedang kamu buat. </p> </div> |
pages/about.php
|
1 2 3 4 5 6 |
<div class="page"> <h2>Tentang Website Ini</h2> <p> Website ini dibuat sebagai latihan memahami dasar PHP native. </p> </div> |
pages/contact.php
|
1 2 3 4 5 6 7 |
<div class="page"> <h2>Hubungi Kami</h2> <p> Email: hello@example.com<br> Senin–Jumat, 09.00–17.00 WIB </p> </div> |
Sekarang konten masing-masing halaman sudah dipisahkan dari index.php.
Jika header dan footer ditulis ulang di setiap halaman, perubahan kecil seperti mengganti menu akan mengharuskan kamu mengedit banyak file.
Karena itu, kedua elemen tersebut akan dipisahkan ke folder includes.
Membuat includes/header.php
Tambahkan kode:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<header> <h1 class="title">My PHP Website</h1> <p class="desc"> Website Sederhana dengan PHP Native </p> <nav id="navigation" aria-label="Navigasi utama"> <ul> <li> <a href="index.php?page=home" <?php echo $currentPage === 'home' ? 'class="active"' : ''; ?> > Home </a> </li> <li> <a href="index.php?page=about" <?php echo $currentPage === 'about' ? 'class="active"' : ''; ?> > About </a> </li> <li> <a href="index.php?page=contact" <?php echo $currentPage === 'contact' ? 'class="active"' : ''; ?> > Contact </a> </li> </ul> </nav> </header> |
Variabel $currentPage sudah ditentukan sebelumnya di index.php.
Karena header.php dipanggil setelah variabel tersebut dibuat, file header dapat menggunakannya untuk mengetahui halaman yang sedang aktif.
Gunakan kode:
|
1 2 3 4 5 |
<footer> <p> © <?php echo date('Y'); ?> My PHP Website </p> </footer> |
Fungsi:
date('Y')
akan menghasilkan tahun saat ini sehingga kamu tidak perlu menggantinya secara manual setiap tahun.
Langkah 4: Membuat Active State pada Menu
Perhatikan kembali bagian ini:
<?php echo $currentPage === 'home' ? 'class="active"' : ''; ?>
PHP membandingkan halaman yang sedang dibuka dengan nama menu.
Jika halaman saat ini adalah home, hasil HTML-nya menjadi:
<a href="index.php?page=home" class="active">
Jika bukan, atribut class=”active” tidak ditambahkan.
Class tersebut nantinya digunakan CSS untuk memberikan penanda visual pada halaman yang sedang dibuka.
Kenapa Routing Tidak Langsung Menggunakan $_GET?
Hindari pola seperti berikut:
include $_GET['page'] . '.php';
Kode tersebut menggunakan input dari URL secara langsung sebagai nama file.
Untuk project sederhana ini, lebih baik definisikan halaman yang memang diperbolehkan:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
$routes = [ 'home' => [ 'file' => __DIR__ . '/pages/home.php', 'title' => 'Home', ], 'about' => [ 'file' => __DIR__ . '/pages/about.php', 'title' => 'About', ], 'contact' => [ 'file' => __DIR__ . '/pages/contact.php', 'title' => 'Contact', ], ]; |
Dengan pendekatan tersebut, parameter URL hanya digunakan untuk memilih key yang sudah tersedia.
Cara ini lebih terkontrol dan sekaligus mengenalkan konsep routing sebelum nantinya menggunakan router milik framework.
Langkah 5: Membuat Tampilan dengan CSS
Sekarang buat file:
assets/css/style.css
Isi dengan CSS berikut:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
* { box-sizing: border-box; } body { max-width: 960px; margin: 0 auto; padding: 0 20px; font-family: Arial, sans-serif; line-height: 1.6; color: #222; } header { padding: 32px 0 0; } header .title, header .desc { text-align: center; } header .desc { margin-top: -8px; color: #666; } #navigation ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 24px 0 0; padding: 8px; background-color: rgb(13, 207, 143); border-radius: 8px; } #navigation a { display: block; padding: 10px 16px; color: white; text-decoration: none; border-radius: 6px; } #navigation a:hover, #navigation a.active { background-color: rgb(0, 150, 100); } #navigation a.active { font-weight: bold; } #contents { min-height: 300px; padding: 32px 0; } .page h2 { margin-top: 0; } .page a { color: #0566c6; } footer { padding: 20px 0; text-align: center; border-top: 1px solid #ddd; color: #666; } @media (max-width: 600px) { #navigation ul { flex-direction: column; } #navigation a { text-align: center; } } |
Pada versi ini, navigasi menggunakan Flexbox sehingga lebih mudah diatur daripada menggunakan float.
CSS juga menggunakan max-width dan media query agar layout tidak terlalu lebar pada desktop serta tetap nyaman pada layar kecil.
Menjalankan Website PHP di Localhost
Setelah seluruh file selesai dibuat, kembali ke XAMPP Control Panel.
Pastikan Apache sudah berjalan.
Kemudian buka:
http://localhost/myphpwebsite/
Halaman Home seharusnya muncul secara default.
Selanjutnya coba buka:
http://localhost/myphpwebsite/index.php?page=about
dan:
http://localhost/myphpwebsite/index.php?page=contact
Pastikan tiga hal berikut berjalan:
- konten halaman berubah,
- header dan footer tetap sama,
- menu aktif berpindah mengikuti halaman.
Troubleshooting Website PHP di XAMPP
Kalau website belum berjalan, cek beberapa masalah berikut.
Apache Tidak Bisa Berjalan
Jika Apache gagal start, kemungkinan port yang dibutuhkan sedang digunakan aplikasi atau service lain.
Buka log Apache melalui XAMPP Control Panel untuk melihat penyebabnya.
Jika memang terjadi konflik port, kamu dapat mengubah konfigurasi Apache, misalnya menggunakan port 8080.
Setelah itu URL localhost menjadi:
http://localhost:8080/myphpwebsite/
Website Menampilkan 404 atau Object Not Found
Pastikan folder project berada di:
C:\xampp\htdocs\myphpwebsite
dan terdapat file:
index.php
di dalamnya.
Halaman Kosong
Halaman kosong bisa terjadi karena error PHP tidak sedang ditampilkan.
Untuk lingkungan development lokal, kamu bisa memeriksa konfigurasi display_errors pada php.ini atau melihat log PHP/Apache.
Jika mengubah konfigurasi PHP, restart Apache sebelum mencoba kembali.
Pengaturan untuk menampilkan error sebaiknya digunakan ketika development saja, bukan pada website production.
CSS Tidak Muncul
Buka Developer Tools dan masuk ke tab Network.
Cari request:
style.css
Jika statusnya 404, cek kembali path:
<link rel="stylesheet" href="assets/css/style.css">
Menu Tidak Mengganti Halaman
Perhatikan URL setelah menu diklik.
Misalnya tombol About seharusnya menuju:
index.php?page=about
Kalau parameter tersebut sudah benar tetapi halaman tetap tidak berubah, cek kembali key pada array $routes.
Alternatif Membuat Website Tanpa PHP Native
Setelah mencoba PHP native, kamu akan lebih mudah melihat perbedaan antara membuat website melalui coding dan menggunakan tools yang sudah menyediakan sistem pengelolaan website.
Jika tujuanmu adalah membuat website yang kontennya mudah dikelola tanpa menulis seluruh fungsi dari awal, kamu bisa mengikuti panduan cara membuat website dengan WordPress. WordPress menyediakan dashboard, pengelolaan halaman, tema, dan plugin sehingga proses membangun website berbeda dengan project PHP native yang kita buat di sini.
Pilihan lainnya adalah menggunakan website builder. Misalnya, kamu bisa mengikuti panduan cara membuat website dengan Sitejet di cPanel jika ingin membangun halaman secara visual tanpa harus membuat struktur PHP sendiri.
PHP native tetap lebih cocok untuk tutorial ini karena tujuan utamanya bukan sekadar menghasilkan website, melainkan memahami bagaimana file PHP, routing, template, dan request bekerja.
Mengembangkan Website PHP Lebih Lanjut
Website yang dibuat sejauh ini masih sederhana. Namun, struktur tersebut sudah cukup untuk mulai mempelajari beberapa fitur PHP berikutnya.
Membuat Form dengan POST
Halaman Contact saat ini baru menampilkan informasi statis.
Langkah selanjutnya, kamu dapat mencoba menerima input melalui form dan $_POST.
Contoh sederhana:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { $nama = trim($_POST['nama'] ?? ''); $pesan = trim($_POST['pesan'] ?? ''); if ($nama === '' || $pesan === '') { echo 'Nama dan pesan wajib diisi.'; } else { $namaAman = htmlspecialchars( $nama, ENT_QUOTES, 'UTF-8' ); echo "Pesan dari {$namaAman} berhasil diterima."; } } ?> |
Pada contoh tersebut terdapat dua proses yang berbeda.
Pertama, program mengecek apakah input kosong. Kedua, htmlspecialchars() digunakan sebelum nilai nama ditampilkan kembali sebagai HTML.
Untuk aplikasi nyata, validasi perlu disesuaikan dengan jenis data yang diterima.
Menyimpan Data ke Database
XAMPP menyertakan MariaDB yang dapat digunakan untuk belajar database bersama PHP.
Setelah memahami form, kamu dapat melanjutkan dengan operasi CRUD:
- Create untuk menambah data,
- Read untuk membaca data,
- Update untuk mengubah data,
- Delete untuk menghapus data.
Contohnya, pesan dari form Contact dapat disimpan ke database lalu ditampilkan melalui halaman admin.
Untuk koneksi database pada project PHP baru, kamu juga dapat mulai mempelajari PDO dan prepared statement.
Memindahkan Website dari Localhost ke Hosting
Selama website masih berada di:
C:\xampp\htdocs
website hanya berjalan pada lingkungan lokal.
Supaya bisa diakses melalui internet, file project perlu dipindahkan ke web hosting.
Secara umum prosesnya meliputi:
- menyiapkan domain dan hosting,
- membuka File Manager,
- mengunggah file project,
- meletakkannya pada document root seperti public_html,
- membuat dan mengimpor database jika project sudah menggunakan database,
- menyesuaikan konfigurasi database,
- kemudian menguji website melalui domain.
🚀
Siap Go Online? Hosting PHP Terbaik untuk Website Kamu
Saatnya membawa website kamu ke level berikutnya. Upload ke Web Hosting DomaiNesia dan nikmati kemudahan mengelola website langsung dengan domain sendiri, lebih profesional, lebih cepat, dan siap diakses dari mana saja tanpa bergantung pada komputer lokal.
Kesimpulan
Sekarang kamu sudah mengetahui cara membuat website dengan PHP native mulai dari struktur folder hingga menjalankannya di localhost.
Project ini sudah memiliki:
- routing sederhana,
- halaman Home, About, dan Contact,
- header dan footer reusable,
- menu dengan active state,
- styling CSS responsive,
- serta route map untuk membatasi halaman yang dapat dimuat.
Selanjutnya kamu bisa memperluas project dengan form, validasi, database, authentication, atau CRUD.
Setelah konsep PHP native mulai terasa familiar, kamu dapat membandingkan struktur tersebut dengan framework seperti Laravel atau CodeIgniter. Dengan begitu, kamu tidak hanya menggunakan framework, tetapi juga memahami konsep dasar yang dikerjakan di baliknya.
FAQ Cara Membuat Website dengan PHP
Mila Rosyida
Halo ! I'm a Technical Content Specialist in DomaiNesia. I love learn anything about Technical, Data, Machine Learning, and more Technology.
