Programming

custom page 404 ใน Codeigniter 4

page404 คือ หน้าที่แสดงว่าเว็บเรานั้นไม่มีหน้าที่ผู้ใช้ request มา

ขอบคุณข้อมูลจาก : Link

page404 คือ หน้าที่แสดงว่าเว็บเรานั้นไม่มีหน้าที่ผู้ใช้ request มา ซึ่งเป็นสิ่งจำเป็นเพราะมันจะดูไม่ดีเท่าไหร่ ถ้าผู้ใช้เห็นหน้าที่เป็น default และไม่มีประสิทธิภาพในด้านของการทำ UX

สำหรับ Codeigniter 4 นั้น การตั้งค่าหน้าห 404 นั้นจะอยู่ที่ไฟล์ /app/Config/Routes.php ที่บรรทัด

$routes->set404Override();

view default ของ 404 จะอยู่ที่ไฟล์

/app/Views/errors/html/error_404.php

วิธี Custom หน้า 404

ทำการ Config ที่ไฟล์ /app/Config/Routes.php

สามารถทำได้ 2 แบบ คือ Static และ View Template

แบบ Static

คือ การเขียน code ที่ไฟล์ Routes.php ตรงๆ เลย เช่น

$routes->set404Override(function() {
        echo "<h3>บ่หน้านี้ ในระบบเด้อ</h3>";
});
แบบ View Template

เป็นการสร้างไฟล์ view ขึ้นมา แล้วทำการเรียกใช้ด้วยการ Config ที่ไฟล์ /app/Config/Routes.php เช่นเคย

$routes->set404Override(function() {
        return view("page404");
});

จากตัวอย่างโค้ด ไฟล์ view จะอยู่ที่ /app/Views/page404.php

สร้างไฟล์ /app/Views/page404.php และ Custom ได้ตามที่ใจคุณปรารถนา เช่น

<!doctype html>
<html>

<head>
    <title>404 Page Not Found</title>
    <style>
        body {
            width: 99%;
            height: 100%;
            background-color: #d1486894;
            color: #fff;
            font-family: sans-serif;
        }

        div {
            position: absolute;
            width: 400px;
            height: 300px;
            z-index: 15;
            top: 45%;
            left: 50%;
            margin: -100px 0 0 -200px;
            text-align: center;
        }

        h1,
        h2 {
            text-align: center;
        }

        h1 {
            font-size: 60px;
            margin-bottom: 10px;
            border-bottom: 1px solid white;
            padding-bottom: 10px;
        }

        h2 {
            margin-bottom: 40px;
        }

        a {
            margin-top: 10px;
            text-decoration: none;
            padding: 10px 25px;
            background-color: #fff;
            color: black;
            margin-top: 20px;
            border-radius: 10px;
        }
    </style>
</head>

<body>
    <div>
        <h1>404</h1>
        <h2>Page not found</h2>
        <a href='<?= base_url() ?>'>กลับหน้าหลัก</a>
    </div>
</body>

</html>