Secara default, Laravel sudah menyediakan halaman error 404 dan lain sebagainya. Namun tampilan atau interface dari halaman-halaman tersebut tentu saja sangat sederhana. Nah, dalam artikel kali ini saya akan menjelaskan bagaimana membuat halaman custom error tersebut agar mempunyai tampilan yang sesuai dengan tema program yang anda buat.
#MENGUBAH FILE Handler.php
Yang pertama perlu dilakukan adalah mengubah isi dari file Handler.php. File ini terletak pada direktori app/Exceptions.
public function render($request, Exception $exception)
{
if($this->isHttpException($exception)){
switch ($exception->getStatusCode()) {
case 404:
//return redirect()->route('404');
return response()->view('errors.404', [], $exception->getStatusCode());
break;
case 405:
return response()->view('errors.405', [], $exception->getStatusCode());
break;
}
}
return parent::render($request, $exception);
}
Ubahlah kode pada public function render di dalam file Handler.php sesuai dengan kode di atas. Pda kode di atas saya hanya memberikan contoh error kode 404 dan 405 saja, anda bisa menambahkan error yang lainnya sesuai dengan kebutuhan program anda. Dan pada bagian return nya saya memberikan 2 contoh return yaitu return redirect yang akan melempar error ke route 404 (untuk cara ini kita perlu mendefinisikan route 404 pada routes.php terlebih dahulu) dan yang kedua yaitu return view.
#MEMBUAT VIEW
Langkah selanjutnya adalah membuat view sesuai dengan view yang kita tulis pada file Handler.php sebelumnya. Buatlah view dengan nama 404.blade.php pada direktori resources/views/errors. Berikut ini adalah contoh kode dari 404.blade.php yang saya buat
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Simple HttpErrorPages | MIT License | https://github.com/AndiDittrich/HttpErrorPages -->
<meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>We've got some trouble | 404 - Resource not found</title>
<style type="text/css">/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}/*! Simple HttpErrorPages | MIT X11 License | https://github.com/AndiDittrich/HttpErrorPages */body,html{width:100%;height:100%;background-color:#21232a}body{color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.5);padding:0;min-height:100%;-webkit-box-shadow:inset 0 0 100px rgba(0,0,0,.8);box-shadow:inset 0 0 100px rgba(0,0,0,.8);display:table;font-family:"Open Sans",Arial,sans-serif}h1{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;font-size:36px}h1 small{font-size:68%;font-weight:400;line-height:1;color:#777}a{text-decoration:none;color:#fff;font-size:inherit;border-bottom:dotted 1px #707070}.lead{color:silver;font-size:21px;line-height:1.4}.cover{display:table-cell;vertical-align:middle;padding:0 20px}footer{position:fixed;width:100%;height:40px;left:0;bottom:0;color:#a0a0a0;font-size:14px}</style>
</head>
<body>
<div class="cover"><h1>Resource not found <small>Error 404</small></h1><p class="lead">The requested resource could not be found but may be available again in the future.
<br/><a href="<?=url('/');?>">Back to home</a>
</p></div>
</body>
</html>
Anda bisa membuat halaman custom sesuai dengan yang anda butuhkan. Kode di atas hanyalah contoh sederhana yang saya buat. Silahkan membuat halaman-halaman error lain seperti error 405 contohnya. Jumlah halaman view yang perlu anda buat harus sesuai dengan jumlah error pada file Handler.php program anda.
Demikianlah penjelasan singkat pada artikel Tutorial Laravel 5.5 - Membuat Custom Error Page ini. Semoga artikel ini dapat membantu dan selamat mencoba.
Tutorial Laravel 5.5 - Membuat Custom Error Page
Reviewed by Donny Winarto
on
September 20, 2018
Rating:
Reviewed by Donny Winarto
on
September 20, 2018
Rating:
No comments: