How to Create a Custom Error(404) page in Laravel 9

How to Create a Custom Error(404) page in Laravel 9

08-Nov-2023
| |
Image Carousel

Table of Contents

S.no Topics-contents
1 What are custom errors ?
2 Creating custom errors
3 Creating 404 custom error page

1:What are custom errors?

 While working on laravel application whenever any error occurs it shows default error page like 404 (not found) , 500 (server error) whcih looks very simple and somtimes doesn't match with out application theme and color and also while in production you want to show some custom error pages which looks similar to theme of your application and matching color and theme , so laravel provides us the feature to make our own custom error pages 404,401,403,419,429,500,503 .

2:Creating custom errors

So when your project comes under production always use error pages to avoid breach of senstive data. so here Laravel comes with beautiful feature to create custom error pages . For creating custom error pages in laravel  , laravel comes with very simple command to create custom error pages.

command for error pages: Copy

php artisan vendor:publish --tag=laravel-errors

 

3:Creating 404 custom error page

After hit the command in the terminal you may see the following error pages has been created resources/views/errors 401,403,404,419,429,500 and 503 . We can build different error pages but here we will show you the 404 error page but you can try with all other pages .

code for 404 page: Copy

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" >
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Arvo" >
    <style>
        /*======================
    404 page
=======================*/
 
        .page_404 {
            padding: 40px 0;
            background: #fff;
            font-family: 'Arvo', serif;
        }
 
        .page_404 img {
            width: 100%;
        }
 
        .four_zero_four_bg {
 
            background-image: url(https://cdn.dribbble.com/users/285475/screenshots/2083086/dribbble_1.gif);
            height: 400px;
            background-position: center;
        }
 
        .four_zero_four_bg h1 {
            font-size: 80px;
        }
 
        .four_zero_four_bg h3 {
            font-size: 80px;
        }
 
        .link_404 {
            color: #fff !important;
            padding: 10px 20px;
            background: #39ac31;
            margin: 20px 0;
            display: inline-block;
        }
 
        .contant_box_404 {
            margin-top: -50px;
        }
    </style>
</head>
 
<body>
    <section class="page_404">
        <div class="container">
            <div class="row">
                <div class="col-sm-12 ">
                    <div class="col-sm-10 col-sm-offset-1  text-center">
                        <div class="four_zero_four_bg">
                            <h1 class="text-center ">404</h1>
 
                        </div>
 
                        <div class="contant_box_404">
                            <h3 class="h2">
                                Look like you're lost
                            </h3>
 
                            <p>the page you are looking for not avaible!</p>
 
                            <a href="https://codepen.io/Navedkhan012/pen/vrWQMY" class="link_404">Credit- Codepen</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>
 
</html>

 

Tags: how to create a custom error page in laravel 9, 404 page in laravel 9 , 419 page in laravel 9,laravel , php ,laravel-php , mvc laravel, advance laravel , bugs in laravel , laravel advance level,
0 Comments (Please let us know your query)
Leave Comment
Leave Comment
Articles from other Categories
Load More

Newsletter