How to Laravel create a custom error page

How to Laravel create a custom error page

Soeng Souy

   

How to Laravel create a custom error page





Step 1: Install Laravel 5.7 Project

In the first step, we will install Laravel 7 application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Step 1: Database connection

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=management_system
DB_USERNAME=root
DB_PASSWORD=123456

Step 2: errors/401

View/Errors

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>401 | Unauthorized</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="{{URL::to('src/files/extra-pages/404/1/img/favicon.ico')}}" type="image/x-icon">
	<!-- Google font-->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{URL::to('files/extra-pages/404/1/css/style.css')}}">
	<body>
        <div class="image"></div>
        <!-- Your logo on the top left -->
        <a href="{{url('login')}}" class="logo-link" title="back home">
            <img src="{{URL::to('files/extra-pages/404/1/img/logo.png')}}" class="logo" alt="Soeng Souy" width="250em;">
        </a>
        <div class="content">
            <div class="content-box">
                <div class="big-content">
                    <!-- Main squares for the content logo in the background -->
                    <div class="list-square">
                        <span class="square"></span>
                        <span class="square"></span>
                        <span class="square"></span>
                    </div>
                    <!-- Main lines for the content logo in the background -->
                    <div class="list-line">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                    </div>
                    <!-- The animated searching tool -->
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <!-- div clearing the float -->
                    <div class="clear"></div>
                </div>
                <!-- Your text -->
                <h1>Oops! Error 401 Unauthorized.</h1>
                <p>The page you were looking for doesn't exist.<br>
                    We think the page may have moved.</p>
            </div>
        </div>
        <footer class="light">
            <ul>
                <li><a href="{{route('/')}}">Home</a></li>
                <li><a href="{{route('/')}}">Search</a></li>
                <li><a href="{{route('/')}}">Help</a></li>
                <li><a href="{{route('/')}}">Trust & Safety</a></li>
                <li><a href="{{route('/')}}">Sitemap</a></li>
                <li><a href="https://www.facebook.com/soengsouy.com.kh/"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://www.youtube.com/channel/UC3hmSvBOttz62UEkfHLxu5Q"><i class="fa fa-youtube"></i></a></li>
            </ul>
        </footer>
	    <script src="{{URL::to('files/extra-pages/404/2/js/jquery.min.js')}}"></script>
	    <script src="{{URL::to('files/extra-pages/404/2/js/bootstrap.min.js')}}"></script>
    </body>
</html>

Step 3: errors/403

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>403 | Forbidden</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="{{URL::to('src/files/extra-pages/404/1/img/favicon.ico')}}" type="image/x-icon">
	<!-- Google font-->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{URL::to('files/extra-pages/404/1/css/style.css')}}">
	<body>
        <div class="image"></div>
        <!-- Your logo on the top left -->
        <a href="{{url('login')}}" class="logo-link" title="back home">
            <img src="{{URL::to('files/extra-pages/404/1/img/logo.png')}}" class="logo" alt="Soeng Souy" width="250em;">
        </a>
        <div class="content">
            <div class="content-box">
                <div class="big-content">
                    <!-- Main squares for the content logo in the background -->
                    <div class="list-square">
                        <span class="square"></span>
                        <span class="square"></span>
                        <span class="square"></span>
                    </div>
                    <!-- Main lines for the content logo in the background -->
                    <div class="list-line">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                    </div>

                    <!-- The animated searching tool -->
                    <i class="fa fa-search" aria-hidden="true"></i>

                    <!-- div clearing the float -->
                    <div class="clear"></div>

                </div>
                <!-- Your text -->
                <h1>Oops! Error 403 Forbidden.</h1>
                <p>The page you were looking for doesn't exist.<br>
                    We think the page may have moved.</p>
            </div>
        </div>
        <footer class="light">
            <ul>
                <li><a href="{{url('login')}}">Home</a></li>
                <li><a href="{{url('login')}}">Search</a></li>
                <li><a href="{{url('login')}}">Help</a></li>
                <li><a href="{{url('login')}}">Trust & Safety</a></li>
                <li><a href="{{url('login')}}">Sitemap</a></li>
                <li><a href="https://www.facebook.com/soengsouy.com.kh/"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://www.youtube.com/channel/UC3hmSvBOttz62UEkfHLxu5Q"><i class="fa fa-youtube"></i></a></li>
            </ul>
        </footer>
	    <script src="{{URL::to('files/extra-pages/404/2/js/jquery.min.js')}}"></script>
	    <script src="{{URL::to('files/extra-pages/404/2/js/bootstrap.min.js')}}"></script>
    </body>
</html>

Step 4: errors/404


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>404 | Not Found</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="{{URL::to('src/files/extra-pages/404/1/img/favicon.ico')}}" type="image/x-icon">
	<!-- Google font-->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{URL::to('files/extra-pages/404/1/css/style.css')}}">
	<body>
        <div class="image"></div>
        <!-- Your logo on the top left -->
        <a href="{{url('login')}}" class="logo-link" title="back home">
            <img src="{{URL::to('files/extra-pages/404/1/img/logo.png')}}" class="logo" alt="Soeng Souy" width="250em;">
        </a>
        <div class="content">
            <div class="content-box">
                <div class="big-content">
                    <!-- Main squares for the content logo in the background -->
                    <div class="list-square">
                        <span class="square"></span>
                        <span class="square"></span>
                        <span class="square"></span>
                    </div>
                    <!-- Main lines for the content logo in the background -->
                    <div class="list-line">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                    </div>
                    <!-- The animated searching tool -->
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <!-- div clearing the float -->
                    <div class="clear"></div>
                </div>
                <!-- Your text -->
                <h1>Oops! Error 404 not found.</h1>
                <p>The page you were looking for doesn't exist.<br>
                    We think the page may have moved.</p>
            </div>
        </div>
        <footer class="light">
            <ul>
                <li><a href="{{url('login')}}">Home</a></li>
                <li><a href="{{url('login')}}">Search</a></li>
                <li><a href="{{url('login')}}">Help</a></li>
                <li><a href="{{url('login')}}">Trust & Safety</a></li>
                <li><a href="{{url('login')}}">Sitemap</a></li>
                <li><a href="https://www.facebook.com/soengsouy.com.kh/"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://www.youtube.com/channel/UC3hmSvBOttz62UEkfHLxu5Q"><i class="fa fa-youtube"></i></a></li>
            </ul>
        </footer>
	    <script src="{{URL::to('files/extra-pages/404/2/js/jquery.min.js')}}"></script>
	    <script src="{{URL::to('files/extra-pages/404/2/js/bootstrap.min.js')}}"></script>
    </body>
</html>

Step 4: errors/419


<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>419 | Page Expired</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="{{URL::to('src/files/extra-pages/404/1/img/favicon.ico')}}" type="image/x-icon">
	<!-- Google font-->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{URL::to('files/extra-pages/404/1/css/style.css')}}">
	<body>
        <div class="image"></div>
        <!-- Your logo on the top left -->
        <a href="{{url('login')}}" class="logo-link" title="back home">
            <img src="{{URL::to('files/extra-pages/404/1/img/logo.png')}}" class="logo" alt="Soeng Souy" width="250em;">
        </a>
        <div class="content">
            <div class="content-box">
                <div class="big-content">
                    <!-- Main squares for the content logo in the background -->
                    <div class="list-square">
                        <span class="square"></span>
                        <span class="square"></span>
                        <span class="square"></span>
                    </div>
                    <!-- Main lines for the content logo in the background -->
                    <div class="list-line">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                    </div>
                    <!-- The animated searching tool -->
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <!-- div clearing the float -->
                    <div class="clear"></div>
                </div>
                <!-- Your text -->
                <h1>Oops! Error 419 Page Expired.</h1>
                <p>The page you were looking for doesn't exist.<br>
                    We think the page may have moved.</p>
            </div>
        </div>
        <footer class="light">
            <ul>
                <li><a href="{{url('login')}}">Home</a></li>
                <li><a href="{{url('login')}}">Search</a></li>
                <li><a href="{{url('login')}}">Help</a></li>
                <li><a href="{{url('login')}}">Trust & Safety</a></li>
                <li><a href="{{url('login')}}">Sitemap</a></li>
                <li><a href="{{url('login')}}"><i class="fa fa-facebook"></i></a></li>
                <li><a href="{{url('login')}}"><i class="fa fa-youtube"></i></a></li>
            </ul>
        </footer>
	    <script src="{{URL::to('files/extra-pages/404/2/js/jquery.min.js')}}"></script>
	    <script src="{{URL::to('files/extra-pages/404/2/js/bootstrap.min.js')}}"></script>
    </body>
</html>

Step 4: errors/429

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>429 | Too Many Requests</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="{{URL::to('src/files/extra-pages/404/1/img/favicon.ico')}}" type="image/x-icon">
	<!-- Google font-->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{URL::to('files/extra-pages/404/1/css/style.css')}}">
	<body>
        <div class="image"></div>
        <!-- Your logo on the top left -->
        <a href="{{url('login')}}" class="logo-link" title="back home">
            <img src="{{URL::to('files/extra-pages/404/1/img/logo.png')}}" class="logo" alt="Soeng Souy" width="250em;">
        </a>
        <div class="content">
            <div class="content-box">
                <div class="big-content">
                    <!-- Main squares for the content logo in the background -->
                    <div class="list-square">
                        <span class="square"></span>
                        <span class="square"></span>
                        <span class="square"></span>
                    </div>
                    <!-- Main lines for the content logo in the background -->
                    <div class="list-line">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                    </div>
                    <!-- The animated searching tool -->
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <!-- div clearing the float -->
                    <div class="clear"></div>
                </div>
                <!-- Your text -->
                <h1>Oops! Error 429 Too Many Requests.</h1>
                <p>The page you were looking for doesn't exist.<br>
                    We think the page may have moved.</p>
            </div>
        </div>
        <footer class="light">
            <ul>
                <li><a href="{{url('login')}}">Home</a></li>
                <li><a href="{{url('login')}}">Search</a></li>
                <li><a href="{{url('login')}}">Help</a></li>
                <li><a href="{{url('login')}}">Trust & Safety</a></li>
                <li><a href="{{url('login')}}">Sitemap</a></li>
                <li><a href="https://www.facebook.com/soengsouy.com.kh/"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://www.youtube.com/channel/UC3hmSvBOttz62UEkfHLxu5Q"><i class="fa fa-youtube"></i></a></li>
            </ul>
        </footer>
	    <script src="{{URL::to('files/extra-pages/404/2/js/jquery.min.js')}}"></script>
	    <script src="{{URL::to('files/extra-pages/404/2/js/bootstrap.min.js')}}"></script>
    </body>
</html>

Step 4: errors/500

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>500 | Server Error</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="{{URL::to('src/files/extra-pages/404/1/img/favicon.ico')}}" type="image/x-icon">
	<!-- Google font-->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{URL::to('files/extra-pages/404/1/css/style.css')}}">
	<body>
        <div class="image"></div>
        <!-- Your logo on the top left -->
        <a href="{{url('login')}}" class="logo-link" title="back home">
            <img src="{{URL::to('files/extra-pages/404/1/img/logo.png')}}" class="logo" alt="Soeng Souy" width="250em;">
        </a>
        <div class="content">
            <div class="content-box">
                <div class="big-content">
                    <!-- Main squares for the content logo in the background -->
                    <div class="list-square">
                        <span class="square"></span>
                        <span class="square"></span>
                        <span class="square"></span>
                    </div>
                    <!-- Main lines for the content logo in the background -->
                    <div class="list-line">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                    </div>
                    <!-- The animated searching tool -->
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <!-- div clearing the float -->
                    <div class="clear"></div>
                </div>
                <!-- Your text -->
                <h1>Oops! Error 500 Server Error.</h1>
                <p>The page you were looking for doesn't exist.<br>
                    We think the page may have moved.</p>
            </div>
        </div>
        <footer class="light">
            <ul>
                <li><a href="{{url('login')}}">Home</a></li>
                <li><a href="{{url('login')}}">Search</a></li>
                <li><a href="{{url('login')}}">Help</a></li>
                <li><a href="{{url('login')}}">Trust & Safety</a></li>
                <li><a href="{{url('login')}}">Sitemap</a></li>
                <li><a href="https://www.facebook.com/soengsouy.com.kh/"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://www.youtube.com/channel/UC3hmSvBOttz62UEkfHLxu5Q"><i class="fa fa-youtube"></i></a></li>
            </ul>
        </footer>
	    <script src="{{URL::to('files/extra-pages/404/2/js/jquery.min.js')}}"></script>
	    <script src="{{URL::to('files/extra-pages/404/2/js/bootstrap.min.js')}}"></script>
    </body>
</html>

Step 4: errors/503

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>503 | Service Unavailable</title>
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	<link rel="icon" href="{{URL::to('src/files/extra-pages/404/1/img/favicon.ico')}}" type="image/x-icon">
	<!-- Google font-->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="{{URL::to('files/extra-pages/404/1/css/style.css')}}">
	<body>
        <div class="image"></div>
        <!-- Your logo on the top left -->
        <a href="{{url('login')}}" class="logo-link" title="back home">
            <img src="{{URL::to('files/extra-pages/404/1/img/logo.png')}}" class="logo" alt="Soeng Souy" width="250em;">
        </a>
        <div class="content">
            <div class="content-box">
                <div class="big-content">
                    <!-- Main squares for the content logo in the background -->
                    <div class="list-square">
                        <span class="square"></span>
                        <span class="square"></span>
                        <span class="square"></span>
                    </div>
                    <!-- Main lines for the content logo in the background -->
                    <div class="list-line">
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                        <span class="line"></span>
                    </div>
                    <!-- The animated searching tool -->
                    <i class="fa fa-search" aria-hidden="true"></i>
                    <!-- div clearing the float -->
                    <div class="clear"></div>
                </div>
                <!-- Your text -->
                <h1>Oops! Error 503 Service Unavailable.</h1>
                <p>The page you were looking for doesn't exist.<br>
                    We think the page may have moved.</p>
            </div>
        </div>
        <footer class="light">
            <ul>
                <li><a href="{{url('login')}}">Home</a></li>
                <li><a href="{{url('login')}}">Search</a></li>
                <li><a href="{{url('login')}}">Help</a></li>
                <li><a href="{{url('login')}}">Trust & Safety</a></li>
                <li><a href="{{url('login')}}">Sitemap</a></li>
                <li><a href="https://www.facebook.com/soengsouy.com.kh/"><i class="fa fa-facebook"></i></a></li>
                <li><a href="https://www.youtube.com/channel/UC3hmSvBOttz62UEkfHLxu5Q"><i class="fa fa-youtube"></i></a></li>
            </ul>
        </footer>
	    <script src="{{URL::to('files/extra-pages/404/2/js/jquery.min.js')}}"></script>
	    <script src="{{URL::to('files/extra-pages/404/2/js/bootstrap.min.js')}}"></script>
    </body>
</html>

Reactions
Soeng Souy

Posted by Soeng Souy

Website that learns and reads, PHP, Framework Laravel, How to and download Admin template sample source code free.

Post a Comment

0 Comments

CAN FEEDBACK

Emoji
(y)
:)
:(
hihi
:-)
:D
=D
:-d
;(
;-(
@-)
:P
:o
:>)
(o)
:p
(p)
:-s
(m)
8-)
:-t
:-b
b-(
:-#
=p~
x-)
(k)
close