Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
August 30, 2021 02:47 pm GMT

Create a very Cool 404/503 Error Page with Laravel!

Hi. This time, let's create a cool 404/503... error page with Laravel.

Error page structure in Laravel

Laravel can display the error page just by placing files in the specified directory without adding any special controller. So it's very easy to support.

All you have to do is to add a file like 400.blade.php to resources->view->errors directory.
In addition, I would like to add base.blade.php to the layout directory to make it a template.

The file tree looks like below.

resources  views    errors           404.blade.php      layouts              base.blade.php

Let's make it!

Now let's actually make it using a template etc.
A sample of the completed site has been uploaded to GitHub.

https://github.com/ichii731/php-examples/tree/main/laravel_error-page

Dev Environment

ubuntu20.04 LTSPHP 7.4.3Laravel Framework 6.20.26Template Engine: Blade

404 page template

This time, I changed a part of the template introduced in DEV Commynity and diverted it. The original template CodePen is here.

It's a cool-looking template that counts up numbers and animates them to 404 and 503.

It may look difficult at first glance, but it's a simple configuration using "for" statements in Javascript. We will use this one.

Customize Template

I did the following changes.

  • Converted SCSS to CSS
  • Changed the file path for loading CSS, JS to be described in the asset helperasset('filepath').
  • Created a base blade to handle various errors, and then modified it to switch the display depending on the error content.

The process of changing the text displayed depending on the error implement using @yield("").

After typing the asset element, the file and directory structure looks like below.
Alt Text

Sample Code

Baseresources/views/errors/layouts/base.blade.php

<!DOCTYPE html><html lang="ja"><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>@yield('title')</title>  <link rel='stylesheet' href='{{ asset('/css/flexgrid.min.css') }}'>  <link rel="stylesheet" href="{{ asset('/css/style.css') }}"></head><body>  <!-- partial:index.partial.html -->  <div class="container">    <div class="row">      <div class="xs-12 md-6 mx-auto">        <div id="countUp">          <div class="number" data-count="@yield('http-request')">0</div>          <div class="text">@yield('title')</div>          <div class="text">@yield('message')</div>          <div class="text">@yield('detail')</div>        </div>      </div>    </div>  </div>  <!-- partial -->  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>  <script src="{{ asset('/js/[email protected]') }}"></script>  <script src="{{ asset('/js/script.js') }}"></script></body></html>

404 Errorresources/views/errors/404.blade.php

@extends('errors.layouts.base')@section('http-request', '404')@section('title', 'Page not found')@section('message', 'This may not mean anything.')@section('detail', "I'm probably working on something that has blown up.")

For other problems like 403 forbidden, 500 Internal Server Error, 503 Service Unavailable, etc, just copy and paste the above file and add something like 500.blade.php.

Let's try it out

Let's start a simple server with the artisan command. The actual behavior is like below GIF Image.

php artisan serve

ezgif-2-ecaa0e6b7f99

Isn't it cool? Please refer to it ...

I'll also post it on the repo on GitHub. Please try it. (GitHub pushes only laravel diff directories / files)

https://github.com/ichii731/php-examples/tree/main/laravel_error-page

Please also check the blog and Twitter@ichii731 if you like :D


Original Link: https://dev.to/ichii731/create-a-very-cool-404-503-error-page-with-laravel-mhf

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To