Halaman sudah selesai ditulis, form tampak rapi, tapi tombol simpan tidak bereaksi apa pun. Setelah diperiksa, ternyata nama field di PHP tidak cocok dengan yang dikirim form. Kesalahan kode PHP, JS, dan CSS yang sering terjadi biasanya bukan soal logika rumit, melainkan detail kecil yang terlewat. Daftar berikut merangkum yang paling sering muncul beserta cara mengeceknya.
1. Nama Field Form Tidak Cocok antara HTML dan PHP
Atribut name di input HTML menentukan kunci array di $_POST atau $_GET. Kalau kamu menulis name="email" tetapi membaca $_POST['e_mail'], nilainya akan kosong tanpa error apa pun.
Cetak isi array saat pertama kali memproses form:
var_dump($_POST);Kalau kunci yang muncul tidak sesuai harapan, periksa lagi atribut name di HTML. Cara menangani form HTML dengan PHP secara lengkap bisa jadi rujukan kalau kamu ingin menstandarkan alur pemrosesan.
2. Menganggap Data JSON dari JavaScript Sudah Berbentuk Array
Data yang dikirim dengan fetch berformat JSON, dan di sisi PHP isinya masih berupa string sampai kamu memanggil json_decode. Tanpa langkah itu, $_POST['data'] akan berisi teks JSON mentah, bukan array yang bisa diakses per kunci.
$data = json_decode(file_get_contents('php://input'), true);Parameter true membuat hasilnya array asosiatif, sehingga $data['nama'] bisa langsung dipakai. Tanpa parameter itu, kamu akan bekerja dengan objek stdClass dan harus memakai tanda panah.
3. Variabel JavaScript Bernilai Undefined di Halaman
Nilai dari PHP yang disisipkan ke JavaScript sering hilang karena salah penempatan tanda kutip. Contoh yang gagal:
var nama = <?php echo $nama; ?>;Kalau $nama berisi teks, hasilnya di browser menjadi variabel tanpa tanda kutip dan memicu error sintaks. Bungkus dengan json_encode supaya tipe data dan tanda kutipnya ikut terjaga:
var nama = <?php echo json_encode($nama); ?>;Masalah serupa juga dibahas di artikel mengapa array PHP kadang tidak muncul di JavaScript, terutama ketika data berisi karakter khusus.
4. Selector CSS Kalah Spesifisitas
Aturan CSS sudah ditulis, tetapi tampilan tidak berubah. Cek dulu apakah ada aturan lain dengan selector lebih spesifik, seperti .card .judul atau #konten p, yang menimpa gayamu. Urutan file juga berpengaruh: aturan yang dimuat belakangan menang bila spesifisitasnya sama.
- Buka panel inspektur elemen dan lihat aturan mana yang dicoret.
- Hindari
!importantsebagai jalan pintas, karena akan menyulitkan perubahan berikutnya. - Simpan urutan import stylesheet di satu tempat agar mudah dilacak.
Gunakan selector yang cukup spesifik sejak awal, misalnya .form-daftar input[type="text"], daripada menambah !important di sana-sini.
5. Query Database Dijalankan Tanpa Menangkap Error
Query yang gagal sering lewat begitu saja karena hasilnya tidak diperiksa. Di PDO, aktifkan mode exception supaya kesalahan langsung terlihat:
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);Setelah itu, bungkus eksekusi dalam blok try dan catch untuk menampilkan pesan yang bisa dibaca saat pengembangan. Matikan tampilan error detail ketika kode sudah berjalan di server produksi.
6. Lupa Memeriksa Nilai Null sebelum Memakai Data
Fungsi yang mengambil satu baris data bisa mengembalikan null kalau tidak ada hasil. Memanggil properti dari nilai null di JavaScript langsung memicu TypeError, dan di PHP memunculkan peringatan.
Biasakan memeriksa hasil sebelum dipakai:
const user = await ambilUser(id);
if (!user) {
tampilkanPesan('Data tidak ditemukan');
return;
}Pola ini mencegah halaman berhenti di tengah jalan hanya karena satu data kosong.
7. Menyisipkan Data Pengguna Langsung ke HTML
Menulis innerHTML = komentar dengan isi dari pengguna membuka celah penyisipan tag atau skrip. Di sisi PHP, mencetak input ke halaman tanpa htmlspecialchars memberi masalah yang sama.
echo htmlspecialchars($komentar, ENT_QUOTES, 'UTF-8');Di JavaScript, pakai textContent bila yang ditampilkan hanya teks. Kalau memang perlu HTML, saring dulu isinya. Untuk query database, gunakan prepared statement seperti yang dijelaskan di panduan mencegah SQL injection di PHP.
8. Path File Salah karena Perbedaan Folder
Gambar tampil di halaman utama tetapi hilang saat membuka halaman di subfolder. Penyebabnya path relatif yang dihitung dari lokasi file HTML, bukan dari root situs. Kesalahan yang sama sering muncul pada include di PHP.
Gunakan __DIR__ untuk include dan path absolut dari root untuk aset:
require __DIR__ . '/../config/koneksi.php';Dengan cara ini, file tetap ditemukan meskipun skrip dipanggil dari folder berbeda.
9. Cache Browser Menyimpan CSS atau JS Lama
Perubahan tidak terlihat di browser padahal file di server sudah diperbarui. Cache sering jadi tersangka pertama. Lakukan hard reload, atau tambahkan parameter versi di URL aset:
<link rel="stylesheet" href="/assets/style.css?v=3">Naikkan angka versi setiap kali file berubah. Cara ini lebih andal daripada meminta pengguna membersihkan cache sendiri.
10. Satu File Berisi PHP, HTML, dan JavaScript Sekaligus
File campuran cepat membingungkan saat mencari sumber bug. Tanda kutip di JavaScript bisa bentrok dengan string PHP, dan kesalahan kecil sulit dilacak. Pisahkan logika: PHP menyiapkan data, JavaScript mengurus interaksi, CSS mengatur tampilan.
Kalau proyek mulai membesar, aturan penamaan dan struktur folder yang konsisten akan menghemat banyak waktu. Tips menulis kode PHP, JS, dan CSS tetap rapi saat proyek bertambah membahas pola yang bisa kamu terapkan.
Sebagian besar bug di daftar ini muncul karena satu nilai tidak sampai ke tempat yang seharusnya, atau karena dua bagian kode memakai asumsi berbeda. Mulai dari memeriksa data yang dikirim form, memastikan tipe data sesuai, lalu menelusuri selector dan path file. Kebiasaan mencetak nilai di titik krusial akan mempercepat proses menemukan penyebabnya.
Pertanyaan yang Sering Diajukan
Kenapa form PHP tidak menerima data meski tombol submit sudah ditekan?
Periksa atribut method dan action pada tag form, lalu pastikan nama field sesuai dengan kunci yang dibaca di PHP. Kalau form mengirim file, tambahkan enctype="multipart/form-data". Cetak $_POST dan $_FILES untuk memastikan data benar-benar sampai.
Bagaimana cara cepat tahu CSS mana yang menimpa gaya saya?
Buka inspektur elemen di browser, pilih elemen yang bermasalah, lalu lihat panel styles. Aturan yang dicoret berarti kalah oleh aturan lain. Nama file dan nomor baris pada panel itu menunjukkan letak aturan yang menang, sehingga kamu bisa langsung memperbaikinya.
Apakah error JavaScript bisa membuat seluruh halaman berhenti?
Bisa, kalau error terjadi saat skrip dimuat dan tidak ditangani. Skrip setelah baris yang error tidak akan dijalankan. Cek tab console di browser untuk melihat pesan dan lokasi kesalahannya, lalu perbaiki satu per satu dari error paling atas.