Cara Membuat Website dengan PHP (Native) untuk Pemula + Template & Menu
Oleh
Mila Rosyida
Laravel bagus. Tapi kalau fondasi PHP nativenya belum ada, waktu error kamu cuma bisa bengong.
Di sini kamu akan belajar cara membuat website dengan PHP native dari nol. Struktur foldernya rapi, header-footer nya bisa dipakai ulang, menu navigasinya tahu halaman mana yang aktif. Semuanya jalan di localhost pakai XAMPP.
Kalau mau lihat gambaran besarnya dulu sebelum mulai coding, bisa baca di sini.
PHP Native vs Framework (Laravel/CodeIgniter): Pilih yang Mana?
Kenapa tidak langsung pakai Laravel aja?
Laravel dan CodeIgniter memang menyediakan banyak hal siap pakai, routing, struktur MVC, koneksi database, fitur keamanan dasar. Untuk tim atau aplikasi besar, masuk akal.
Tapi framework menyembunyikan cara kerja sebenarnya. Routing error? Tidak tahu harus cek dari mana. Include file gagal? Bingung kenapa. Belajar framework tanpa fondasi PHP native itu seperti nyetir mobil matik tanpa tahu cara kerja kopling, jalan sih, tapi pas mogok, angkat tangan.
PHP native pas untuk pemula yang ingin tahu cara kerja website PHP dari dalam, atau untuk latihan dan mini project. Setelah ini solid, naik ke framework akan jauh lebih masuk akal, karena kamu tahu apa yang sebetulnya dikerjakan framework di balik layar.
Selain lewat coding PHP, kamu juga bisa cek panduan cara buat website versi umum sebagai perbandingan.
Yang Perlu Dipahami Sebelum Coding (Fondasi Web)
Dua hal yang perlu kamu pegang sebelum mulai menulis kode.
Struktur Halaman Web
Header di atas, menu navigasi, area konten, footer di bawah. Sesederhana itu. Yang akan kamu lakukan nanti adalah memisahkan tiap bagian ke file PHP sendiri-sendiri, jadi kalau mau ganti header, cukup edit satu file, bukan tiap halaman satu-satu.
Belum terlalu pede dengan HTML dan CSSnya? Pelajari dulu cara membuat website dengan HTML dan CSS di sini.
Sintaks PHP
File PHP ditulis di antara <?php dan ?>. Kodenya dieksekusi di server, bukan di browser, makanya tidak bisa dibuka dengan double click. Harus lewat XAMPP.
Contohnya:
|
1 2 3 |
<?php echo "Halo, ini PHP!"; ?> |
Simpan dengan ekstensi .php. Bukan .html, bukan .txt.
Persiapan Membuat Website dengan PHP di Localhost (XAMPP)
Tiga tools yang kamu butuhkan sebelum mulai.
PHP Editor
Pakai Visual Studio Code. Gratis, ringan, dan syntax highlightingnya langsung warna-warni sesuai fungsi PHP yang kamu tulis, jauh lebih mudah dibaca dibanding Notepad biasa. Download di code.visualstudio.com.
Web Browser
Pakai browser apapun yang sudah ada di komputermu. Chrome, Edge, Firefox, semuanya bisa. Yang penting kamu nyaman, karena browser ini yang akan kamu pakai terus buat ngecek tampilan website setiap kali ada perubahan kode. Satu tips kecil: buka Developer Tools (F12) dari awal, tab Consolenya berguna banget waktu ada error yang tidak muncul di halaman.
Web Server (XAMPP)
XAMPP menyediakan Apache dan PHP sekaligus dalam satu instalasi. Setelah install, buka XAMPP Control Panel dan klik Start pada Apache.
Buat folder project di:
C:\xampp\htdocs\myphpwebsite
Folder ini yang nanti kamu buka lewat browser dengan alamat http://localhost/myphpwebsite/. Nama foldernya harus sama persis dengan yang ada di htdocs.
Kalau nanti website PHPmu sudah siap dipublish online, kamu butuh hosting yang support PHP dan bisa menjalankan file .php dengan stabil.
Cek Paket Hosting yang Support PHP
Struktur Folder Project
Versi paling sederhana dari cara membuat website dengan PHP cuma butuh satu folder dan beberapa file .php di dalamnya. Tapi kalau filenya mulai banyak, semua ditaruh di satu tempat jadi berantakan cepat.
Struktur di bawah ini yang akan dipakai, semua file punya tempat yang jelas dari awal.
|
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 |
pages/ untuk isi konten tiap halaman. includes/ untuk header dan footer yang dipakai ulang. assets/css/ untuk styling. index.php tetap di root, dia yang mengatur semua routing.
Mini Project: Website Multi-Page dengan PHP Native
Lima file yang akan kamu buat: index.php sebagai router, tiga halaman konten di folder pages/, dan header-footer di includes/, yang terakhir dibahas di section berikutnya.
Buat index.php (Routing Sederhana)
Semua request masuk lewat index.php. Parameter page di URL yang menentukan halaman mana yang ditampilkan.
|
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 |
<!DOCTYPE html> <html lang="id"> <head> <title>My PHP Website</title> <meta charset="UTF-8"> <meta name="description" content="My PHP Website"> <link rel="stylesheet" href="assets/css/style.css" type="text/css"> </head> <body> <?php include 'includes/header.php'; ?> <div id="contents"> <?php $allowed_pages = ['home', 'about', 'contact']; $page = $_GET['page'] ?? 'home'; if (!in_array($page, $allowed_pages, true)) { $page = 'home'; } include __DIR__ . "/pages/$page.php"; ?> </div> <?php include 'includes/footer.php'; ?> </body> </html> |
Perhatikan dua hal di kode ini. meta name="description" content="...", bukan contents. Typo satu huruf itu bikin meta descriptionnya tidak terbaca search engine sama sekali. Dan routingnya pakai whitelist $allowed_pages, kalau parameter page diisi nilai yang tidak ada di daftar, sistem fallback ke home. Tanpa whitelist, pola include $_GET['page'] bisa jadi celah file inclusion.
Buat pages/home.php
|
1 2 3 4 |
<div class="page"> <h2>Selamat Datang di My PHP Website</h2> <p>Ini halaman utama. Isi konten utama kamu di sini.</p> </div> |
Buat pages/about.php
|
1 2 3 4 |
<div class="page"> <h2>Tentang Website Ini</h2> <p>Ceritakan siapa kamu atau tujuan website ini dibuat.</p> </div> |
Untuk contact.php, strukturnya sama, tinggal ganti heading dan isi kontaknya.
|
1 2 3 4 5 |
<div class="page"> <h2>Hubungi Kami</h2> <p>Email: hello@example.com<br> Senin–Jumat, 09.00–17.00 WIB</p> </div> |
Kalau kamu ingin contoh ide pengembangan website sederhana selain Home/About/Contact, bisa lanjut baca di sini.
Tanpa template, setiap halaman baru berarti menulis ulang header dan footer dari awal. Kalau nanti mau ganti warna navbar, kamu harus buka dan edit tiap file satu-satu. Tidak efisien.
Solusinya sederhana: pisahkan header dan footer ke file sendiri di folder includes/, lalu panggil dengan include dari mana saja.
Buat includes/header.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<header> <h1 class="title">My PHP Website</h1> <h3 class="desc">Website Sederhana dengan PHP Native</h3> <nav id="navigation"> <ul> <li><a href="index.php?page=home">Home</a></li> <li><a href="index.php?page=about">About</a></li> <li><a href="index.php?page=contact">Contact</a></li> </ul> </nav> </header> |
|
1 2 3 |
<footer> <p>© <?php echo date('Y'); ?> My PHP Website</p> </footer> |
Satu detail kecil: <?php echo date('Y'); ?> otomatis menampilkan tahun sekarang. Tidak perlu ganti manual tiap ganti tahun.
Panggil dari index.php
Keduanya sudah dipanggil di index.php yang tadi kamu buat.
|
1 2 3 |
<?php include 'includes/header.php'; ?> <?php include 'includes/footer.php'; ?> |
Mau tambah item menu? Edit header.php sekali, semua halaman ikut.
Menu yang cuma jalan belum cukup. Pengunjung perlu tahu sedang ada di halaman mana dan kamu perlu pastikan routingnya tidak bisa dieksploitasi. Tiga hal di bawah ini yang menyelesaikan keduanya.
Menu Dasar
Menu sudah ada di includes/header.php yang tadi dibuat, tiga link ke Home, About, dan Contact. Coba buka halaman About, lalu perhatikan menunya. Semua item tampilannya identik. Tidak ada penanda visual halaman mana yang sedang aktif.
Active State Berdasarkan Page
Tambahkan logika di header.php untuk membandingkan nilai $current dengan nama tiap menu. Kalau cocok, class active ditempel ke elemen <a> nya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php $current = $_GET['page'] ?? 'home'; $allowed_pages = ['home', 'about', 'contact']; if (!in_array($current, $allowed_pages, true)) { $current = 'home'; } ?> <header> <h1 class="title">My PHP Website</h1> <nav id="navigation"> <ul> <li><a href="index.php?page=home" <?php echo $current === 'home' ? 'class="active"' : ''; ?>>Home</a></li> <li><a href="index.php?page=about" <?php echo $current === 'about' ? 'class="active"' : ''; ?>>About</a></li> <li><a href="index.php?page=contact" <?php echo $current === 'contact' ? 'class="active"' : ''; ?>>Contact</a></li> </ul> </nav> </header> |
Tambahkan rule ini di style.css supaya menu aktif kelihatan berbeda secara visual:
|
1 2 3 4 5 |
li a.active { background-color: rgb(0, 150, 100); color: white; font-weight: bold; } |
Routing Aman (Whitelist)
Banyak tutorial mengajarkan pola ini:
|
1 |
phpinclude $_GET['page'] . '.php'; |
Satu baris, ringkas. Masalahnya, parameter page bisa diisi nilai apa saja dari URL, termasuk path ke file konfigurasi atau file lain yang tidak seharusnya dibuka. PHP akan coba include file itu juga.
Whitelist menutup celah itu sepenuhnya:
|
1 2 3 4 5 6 7 8 |
$allowed_pages = ['home', 'about', 'contact']; $page = $_GET['page'] ?? 'home'; if (!in_array($page, $allowed_pages, true)) { $page = 'home'; } include __DIR__ . "/pages/$page.php"; |
Hanya nilai yang ada di $allowed_pages yang diproses. Input lain fallback ke home. Tambah halaman baru? Cukup tambahkan namanya ke array.
Styling dengan CSS (style.css)
Websitenya sudah jalan, tapi tampilannya masih polos. CSS yang rapi bukan cuma soal estetika, struktur visual yang jelas membantu pengunjung navigasi lebih cepat. Ini file style.css yang dipakai di project ini.
Hubungkan CSS dari Template
Tag <link> di index.php sudah mengarah ke assets/css/style.css:
|
1 |
<link rel="stylesheet" href="assets/css/style.css" type="text/css"> |
Kalau tampilannya masih polos setelah CSS ditulis, buka Developer Tools (F12) tab Network, cari file style.css, dan lihat statusnya. 404 berarti pathnya keliru.
CSS untuk Layout
Beberapa hal yang perlu dipahami sebelum lihat kodenya.
body diset width: 70% dan margin: 0 auto supaya konten tidak mepet ke tepi layar dan posisinya center. font-family: sans-serif di body berlaku ke seluruh halaman, lebih efisien daripada set font satu-satu di tiap elemen.
Navbar pakai float: left di li supaya item menu berjejer horizontal. Tanpa ini, tiap <li> akan tampil vertikal ke bawah karena defaultnya block element. Dan satu hal yang perlu diperhatikan: float: center bukan CSS valid. float hanya menerima left, right, atau none, untuk centering konten, pakai margin: 20px 0 di #contents.
|
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 |
body { width: 70%; margin: 0 auto; font-family: sans-serif; } header h1.title, header h3.desc { text-align: center; } ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: rgb(13, 207, 143); } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } li a:hover { background-color: rgb(0, 212, 250); } li a.active { background-color: rgb(0, 150, 100); color: white; font-weight: bold; } #contents { margin: 20px 0; } p { font-size: 110%; color: black; } footer { text-align: center; padding: 20px 0; border-top: 1px solid #ddd; } a:link { color: gray; } a:visited { color: rgb(119, 0, 255); } a:hover { color: rebeccapurple; } a:active { color: teal; } |
Warna navbar, ukuran font, dan padding bebas diubah sesuai selera. Class active dari section navigasi sudah masuk di sini, kalau belum ada di header.php, styling active state nya tidak akan muncul.
Supaya tampilan website kamu nyaman dibuka di HP, lanjutkan dengan panduan cara membuat website responsive.
Menjalankan Website di Browser + Troubleshooting
Semua file sudah dibuat. Sekarang waktunya cek apakah semuanya berjalan.
Cara Akses localhost/myphpwebsite
Buka XAMPP Control Panel, klik Start pada Apache. Tunggu sampai indikatornya hijau. Buka browser, ketik:
|
1 |
http://localhost/myphpwebsite/ |
Kalau index.php ada di folder yang benar, halaman Home langsung muncul. Coba klik menu About dan Contact, pastikan kontennya berganti dan menu aktifnya ikut berubah.
Masalah Umum dan Solusinya
Empat masalah yang paling sering bikin pemula mentok:
- Apache tidak bisa Start, biasanya karena port 80 atau 443 sudah dipakai aplikasi lain, Skype, IIS, atau aplikasi lain yang jalan di background. Cek di XAMPP Control Panel, klik tombol “Logs” di baris Apache untuk lihat error spesifiknya. Solusi tercepat: matikan aplikasi yang bentrok, atau ubah port Apache ke 8080 lewat menu Config → httpd.conf, cari
Listen 80dan ganti jadiListen 8080. Akses lewathttp://localhost:8080/myphpwebsite/. - Folder project tidak ditemukan, muncul error “Object not found” di browser. Cek dua hal: nama folder di htdocs harus sama persis dengan yang diketik di URL, case-sensitive di beberapa sistem. Dan pastikan foldernya ada di
C:\xampp\htdocs\, bukan di Desktop atau Downloads. - Blank page, halaman putih kosong tanpa pesan error biasanya berarti ada error PHP yang disembunyikan. Buka file
php.inidiC:\xampp\php\php.ini, caridisplay_errors, pastikan nilainyaOn. Restart Apache, reload halaman, errornya akan muncul. - Halaman tidak berganti saat klik menu, cek URL di browser setelah klik menu. Kalau parameter
?page=abouttidak muncul, ada masalah dihreflinknya diheader.php. Kalau parameter muncul tapi konten tidak berubah, cek path include diindex.php, pastikan mengarah kepages/about.php, bukanabout.phplangsung.
Kalau websitenya sudah berjalan di localhost, langkah berikutnya adalah mempublish supaya bisa diakses lewat domain dan online 24/7.
Publish Website PHPmu ke Hosting
Lanjutan Belajar (Next Step)
Project ini sudah cukup untuk paham cara kerja website PHP dari dalam. Tiga arah yang bisa kamu ambil setelah ini.
Form + POST + Validasi
Halaman Contact yang tadi dibuat masih statis, pengunjung belum bisa kirim apapun. Tambahkan form HTML, proses inputnya dengan $_POST, validasi datanya sebelum dipakai.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { $nama = trim($_POST['nama'] ?? ''); $pesan = trim($_POST['pesan'] ?? ''); if ($nama === '' || $pesan === '') { echo "Nama dan pesan wajib diisi."; } else { echo "Pesan dari $nama berhasil dikirim."; } } ?> |
Minimal cek dulu apakah field kosong atau tidak. Dari sini bisa lanjut ke pengiriman email dengan mail() atau simpan pesannya ke database.
Simpan ke MySQL — CRUD
MySQL sudah ada di XAMPP sejak awal, cuma belum disentuh. CRUD atau Create, Read, Update, Delete adalah operasi yang hampir semua aplikasi web butuhkan. Simpan data form kontak, tampilkan daftar artikel, kelola produk, semuanya butuh koneksi database.
Kalau tujuanmu membangun profil bisnis, lihat dulu struktur kontennya. Atau kalau mau naik ke project jualan setelah ini? Mulai dari cara membuat toko online. Untuk gambaran lengkap fitur e-commerce, katalog, checkout, pembayaran.
Upload/Deploy ke Hosting
File di C:\xampp\htdocs cuma bisa diakses dari komputer sendiri. Supaya bisa dibuka siapa saja lewat internet, kamu butuh hosting dan domain. Upload file project lewat File Manager atau FTP, import database kalau sudah ada, sesuaikan konfigurasi koneksi database dengan kredensial hosting yang baru.
Untuk upload project dari localhost ke internet, kamu perlu hosting yang mendukung versi PHP dan database.
Mulai Hosting untuk Website PHP
Sudah Sampai di Mana?
Website multi-page sudah jalan di localhost, struktur foldernya rapi, header-footer reusable, menu navigasi dengan active state, routing aman pakai whitelist. Bukan cuma copy-paste, kamu tahu kenapa tiap bagian ditulis seperti itu.
Langkah berikutnya terserah kamu. Tambah form di halaman Contact, koneksikan ke MySQL, buat CRUD sederhana. Atau langsung kenalan dengan Laravel, fondasinya sudah ada, nggak akan bingung seperti kalau loncat dari nol.
Kalau traffic mulai tumbuh dan localhost sudah nggak relevan lagi, saatnya project ini pindah ke hosting sungguhan.
Pilih Hosting untuk Website PHP Pemula
FAQ
Apa bedanya PHP native dengan framework seperti Laravel atau CodeIgniter?
PHP native artinya kamu sendiri yang atur semuanya, struktur folder, routing, template header-footer, koneksi database, keamanan dasar. Framework seperti Laravel atau CodeIgniter sudah menyediakan semua itu dari awal, lengkap dengan helper, sistem routing, dan fitur keamanan built-in.
Untuk pemula yang ingin paham cara kerja website PHP dari dalam, mulai dari native dulu. Framework akan jauh lebih masuk akal setelah kamu tahu apa yang sebetulnya mereka kerjakan di balik layar.
Kenapa file PHP tidak bisa dibuka dengan double click?
Kode PHP harus dieksekusi oleh PHP interpreter di server dulu, hasilnya baru dikirim ke browser dalam bentuk HTML. Double click langsung di file manager? Yang terbuka cuma teksnya. <?php ... ?> nggak diproses sama sekali, jadi yang muncul di browser bisa berantakan atau kosong.
XAMPP menyediakan Apache sebagai server lokal yang memproses file PHP sebelum hasilnya sampai ke browser. Tanpa itu, file .php nggak bisa jalan.
Folder project PHP harus ditaruh di mana supaya bisa diakses dari localhost?
Taruh di C:\xampp\htdocs\nama-project. Kalau foldernya bernama myphpwebsite, aksesnya:
|
1 |
http://localhost/myphpwebsite/ |
Satu hal yang sering kelewat: nama folder di URL harus sama persis dengan nama folder di htdocs. Di beberapa sistem, MyPHPWebsite dan myphpwebsite dianggap dua folder berbeda.
Kenapa localhost/myphpwebsite tidak bisa dibuka?
Cek Apache dulu, buka XAMPP Control Panel, pastikan statusnya hijau. Kalau Apache gagal start, buka Logs nya, biasanya ada keterangan port mana yang bentrok. Port 80 sering dipakai Skype atau IIS tanpa disadari, ganti ke 8080 lewat httpd.conf kalau perlu.
Kalau Apache sudah jalan tapi halaman tetap nggak muncul, cek dua hal: lokasi folder (C:\xampp\htdocs\myphpwebsite, bukan Desktop atau Downloads) dan pastikan index.php ada di dalamnya. Browser butuh file default untuk ditampilkan.
Apakah routing index.php?page=... aman?
include $_GET['page'] . '.php' tanpa filter, ini celah nyata. Parameter page bisa diisi path ke file konfigurasi atau file lain yang tidak seharusnya dibuka, dan PHP akan coba include file itu juga.
|
1 2 3 4 5 6 7 8 |
$allowed_pages = ['home', 'about', 'contact']; $page = $_GET['page'] ?? 'home'; if (!in_array($page, $allowed_pages, true)) { $page = 'home'; } include __DIR__ . "/pages/$page.php"; |
Whitelist di atas memastikan hanya nilai yang kamu izinkan yang bisa diproses. Input di luar daftar itu nggak akan pernah sampai ke include.
Mila Rosyida
Halo ! I'm a Technical Content Specialist in DomaiNesia. I love learn anything about Technical, Data, Machine Learning, and more Technology.
