Forums
Kustomisasi Halaman 404 - Printable Version

+- Forums (https://bb.nurfachmi.com)
+-- Forum: My Category (https://bb.nurfachmi.com/forum-1.html)
+--- Forum: My Forum (https://bb.nurfachmi.com/forum-2.html)
+--- Thread: Kustomisasi Halaman 404 (/thread-18.html)

Kustomisasi Halaman 404 - admin - 05-02-2026

Berangkat dari ribut-ribut di Twitter (kini X) mengenai halaman 404 yang tampilannya itu standar masih bawaan web server engine-nya itu sendiri. Kode 404 sendiri merujuk ke salah satu dari HTTP response status codes yang artinya Not Found atau halaman tidak ditemukan karena kesalahan pengguna dalam menuliskan alamat websitenya.

Quote:[Image: 404-NotFound.png]


Berikut tampilan halaman 404 default pada beberapa web server terkenal.

NGINX default 404
[Image: 404-nginx.png?resize=640%2C409&ssl=1]

LiteSpeed default 404
[Image: 404-litespeed.jpg?resize=640%2C391&ssl=1]

Apache default 404
[Image: 404-apache.png?resize=640%2C334&ssl=1]

Nah, namanya juga tampilan standar, pastilah agak kurang cantik terlihatnya. Jadi, bagaimana kalau kita bikin sendiri atau kustom halaman 404 tersebut? Yuk bismillah.

---

Daftar Isi

Insyaallah kita akan membahas beberapa hal seputar kustomisasi halaman 404 ini, antara lain:
  •     Shared Hosting
  •     Laravel PHP (framework)
  •     WordPress (CMS)
  •     nginx
  •     LiteSpeed
  •     Apache

Sebelum kita mulai satu per satu pembahasannya, kami ingin menyampaikan sesuatu.

Blog nurfachmi.com hadir untuk berbagi ilmu dan pengalaman seputar teknologi, pemrograman, dan pengembangan karier di dunia IT. Semua konten yang ada di sini dibuat dengan penuh dedikasi agar bisa membantu lebih banyak orang memahami teknologi dengan cara yang lebih mudah dan praktis.

Jika Anda merasa blog ini bermanfaat, Anda bisa mendukung operasional kami dengan memberikan donasi. Setiap kontribusi yang Anda berikan akan digunakan untuk:

    ✅ Biaya server dan domain agar blog tetap online
    ✅ Pengembangan fitur baru, termasuk platform LMS dengan kelas gratis dan berbayar
    ✅ Pembuatan konten berkualitas yang lebih beragam

Dukungan Anda, sekecil apa pun, sangat berarti bagi keberlangsungan blog ini. Mari bersama-sama membangun komunitas belajar yang lebih baik!

Klik tombol donasi di bawah ini untuk berkontribusi.
Terima kasih! ?

Sekali lagi terima kasih atas dukungannya. Sekarang, mari kita belajar!

---

Shared Hosting

Pada umumnya jika kita menyewa shared hosting, biasanya sudah include dengan cPanel. Untuk memodifikasi halaman error 404, silahkan cari di menu pencarian dengan keyword Error Pages atau scroll sedikit tetikusnya sampai ketemu submenu Advanced dan klik ikon Error Pages.

[Image: image-11.png?resize=640%2C174&ssl=1]

Akan muncul kira-kira seperti ini pilihannya:

[Image: image-12.png?resize=640%2C468&ssl=1]

Nah kalau di cPanel, kita gak hanya bisa modifikasi halaman 404. Halaman error lainnya juga bisa dikustom kok.

Selanjutnya kita klik saja menu 404 (Not found) dahulu dan kita akan diarahkan ke sebuah editor seperti ini:

[Image: image-13.png?resize=640%2C533&ssl=1]

Yowis, silahkan taruh kode HTML sesuai keinginan kita sendiri di text editor tersebut. Pastikan klik tombol Save kalau sudah selesai ya.

Etapi untuk memperkaya informasi mengenai error-nya, kita bisa menambahkan beberapa tag spesial, antara lain:
  •     Referring URL: alamat asal sebelum sampai ke halaman 404 tersebut.
  •     Server Name: url server saat ini.
  •     Visitor's IP Address: IP Address pengunjung.
  •     Visitor's Browser: detail browser yang dipakai.
  •     Requested URL: url yang ingin diakses tetapi tidak ditemukan.
  •     Redirect Status Code: status kode redirect, biasanya sekitar 3xx.

Berikut contoh kodenya:
PHP Code:
<!DOCTYPE html>
<html lang="id">
<head><meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404 Not Found</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="d-flex align-items-center justify-content-center vh-100 bg-light">
    <div class="text-center">
        <h1 class="display-1 text-danger">404</h1>
        <p class="lead">Halaman yang Anda cari tidak ditemukan.</p>
        <p class="lead">Referring URL: <!--#echo var="HTTP_REFERER" --></p>
        <p class="lead">Server Name: <!--#echo var="HTTP_HOST" --></p>
        <p class="lead">Visitor IP Address: <!--#echo var="REMOTE_ADDR" --></p>
        <p class="lead">Browser: <!--#echo var="HTTP_USER_AGENT" --></p>
        <p class="lead">Requested URL: <!--#echo var="REQUEST_URI" --></p>
        <p class="lead">Redirect Status Code: <!--#echo var="REDIRECT_STATUS" --></p>
        <a href="/" class="btn btn-primary">Kembali ke Beranda</a>
    </div>
</body>
</html> 

Hasilnya kira-kira seperti ini:
[Image: image-14.png?resize=640%2C386&ssl=1]

Nah begitu cara mengubah atau memodifikasi atau kustomisasi halaman 404 di shared hosting alias cPanel. Gampang, kan?

---

Laravel PHP (Framework)

Jika kita memakai sebuah web framework, apapun itu, biasanya halaman 404 dan lainnya sudah disediakan oleh si framework itu sendiri. Tugas kita hanya melakukan modifikasi terhadap file tersebut.

Nah, pada praktek kali ini kita akan belajar bagaimana melakukan kustomisasi terhadap file atau halaman 404.

Pertama, kita harus mem-publish file-filenya terlebih dahulu dengan perintah ini di Terminal atau CMD.
PHP Code:
php artisan vendor:publish --tag=laravel-errors 

Maka akan muncul beberapa file baru di dalam folder resources/views/errors seperti berikut:
  •     401.blade.php
  •     402.blade.php
  •     403.blade.php
  •     404.blade.php
  •     419.blade.php
  •     429.blade.php
  •     500.blade.php
  •     503.blade.php
  •     layout.blade.php
  •     minimal.blade.php

Bagi kamu yang belum familiar dengan framework Laravel, setiap file yang mewakili view atau yang tampil di browser akan selalu berarkhiran .blade.php agar ia support templating yang disediakan oleh Laravel.

Etapi itu kan gak cuma 404, ya? Kira-kira apa aja artinya?

Untuk yang format 4xx itu menandakan error karena ulah si user. Sedangkan format 5xx itu menandakan error dari server web milik kita.

Keterangan:
  • 401 Berkenaan dengan authentication atau hanya yang memiliki akses bisa melihat halaman tersebut
  • 402 Berkenaan dengan payment atau halaman ini bisa diakses jika telah melakukan pembayaran tertentu
  • 403 Berkenaan dengan authorization atau halaman ini bisa diakses dengan level user tertentu
  • 404 Nah ini yang dibahas, yakni halamannya tidak ditemukan karena kamu salah nulis alamat
  • 419 Berkenaan dengan page expired atau biasa terjadi karena token CSRF-nya sudah tidak valid karena terlalu lama atau tidak disediakan sama sekali
  • 429 Berkenaan dengan rate limiting atau kamu terlalu banyak mengakses halaman ini. Lagi war ticket, ya?
  • 500 Pesan error umum ketika server tidak tau bagaimana meresponse request dari user
  • 503 Pesan error dari server ketika sedang down dan ini saatnya kamu puk-puk dia sebagai web administrator

Nah silahkan deh edit masing-masing file dengan desain yang sesuai, dengan keinginan kamu maupun dengan skenarionya.

---

WordPress

To be or not to be

---

nginx

Mulai sekarang langkah-langkahnya akan lebih sederhana karena sudah agak menyentuh low level, yakni ke layer sistem operasi yang biasanya hanya terminal seperti Ubuntu Server dan lainnya.

Buat Halaman 404 Kustom

Langkah pertama, kita buat dulu halaman 404 yang kita inginkan. Supaya lebih enak, kita kumpulkan saja pada lokasi document root-nya, yakni di /var/www/html. Jadi kita buat dulu filenya dengan:
Code:
nano /var/www/html/404.html

Oh iya, silahkan ganti editor nano dengan editor favorit masing-masing ya. Kemudian silahkan isi dengan desain halaman 404 yang diinginkan. Misalnya seperti ini:
PHP Code:
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Tidak Ditemukan</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>Oops! Halaman yang Anda cari tidak ditemukan.</p>
    <a href="/">Kembali ke Beranda</a>
</body>
</html> 

Simpan filenya, lalu restart nginx-nya.
Code:
sudo systemctl restart nginx

Begitu deh, lebih sulit atau malah lebih mudah?

---

LiteSpeed

Sebenarnya saya memakai OpenLiteSpeed untuk demo ini. Karena OpenLiteSpeed adalah gratis dan open source, sedangkan LiteSpeed itu produk premium berbayar. Mohon maklum. Hehe.

Namun, beda nginx, beda pula dengan OpenLiteSpeed ini.

Kalau nginx belum ada file 404 sehingga harus bikin sendiri, sedangkan si OpenLiteSpeed ini sudah ada. Sehingga kita diberi pilihan ingin mengubah file 404 default atau bikin baru. Ya mending bikin baru supaya file lamanya tetap terarsip dengan baik.

Buat Halaman 404 Kustom

Baiklah, pertama kita buat file barunya di lokasi document root standar.
Code:
sudo nano /usr/local/lsws/Example/html/404.html

Kemudian silahkan isi dengan desain halaman 404 milik kamu sendiri atau pakai seperti di bawah ini.
PHP Code:
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Halaman Tidak Ditemukan</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 50px; }
        h1 { font-size: 50px; }
        p { font-size: 20px; }
    </style>
</head>
<body>
    <h1>404</h1>
    <p>Oops! Halaman yang Anda cari tidak ditemukan.</p>
    <a href="/">Kembali ke Beranda</a>
</body>
</html> 

Edit Konfigurasi Virtual Host Secara Manual

Lalu kita ubah juga file konfigurasinya agar setiap aksi 404 selalu mengarah ke halaman yang telah kita buat tadi.
Code:
sudo nano /usr/local/lsws/conf/vhosts/Example/vhconf.conf

Tambahkan atau ubah bagian berikut:
Code:
errorPage 404 /404.html

Restart OpenLiteSpeed

Setelah mengedit file konfigurasi, restart OpenLiteSpeed agar perubahan diterapkan:
Code:
sudo systemctl restart lsws

Silahkan tes lagi dengan alamat asal deh.

---

Apache

to be or not to be

---

Penutup

Masih banyak kekurangan dan mungkin saja cara-cara di atas bukan yang terbaik, ter-efektif dan ter-efisien, tetapi semoga menjadi khazanah baru bagi manteman pembaca sekalian.

Akhir kata, mohon koreksi jika ada kekeliruan dalam artikel ini.