Custom "404 NOT FOUND" page
Publicado: Mié Feb 17, 2021 1:31 am
Hey everybody!
Sometimes it's important to create a custom "404 NOT FOUND" page, because the default one shows some informations about our server and ports where our application is located, and that's definitely not a good practice.
Example of a default 404 page:
So I'm here to show you how to create it and redirect your server to it to the user (in this case I'm using Apache).
All you gotta do is:
STEP 1: create an HTML file for your custom page and save it at your application's directory (ex: xampp/htdocs/application/404.html)
STEP 2: Add this line in your .htaccess file
*"ErrorDocument" is a default param
*"404" is the error code which you are redirecting (you can add other codes as well)
*"/application/404.html" is the directory of your custom page
And that's it.
Now our new 404 page will show only the information we want it to show:
*no more server and ports information
Sometimes it's important to create a custom "404 NOT FOUND" page, because the default one shows some informations about our server and ports where our application is located, and that's definitely not a good practice.
Example of a default 404 page:
Código: Seleccionar todo
Not Found
The requested URL was not found on this server.
Apache/2.4.46 (Win64) OpenSSL/1.1.1g PHP/8.0.1 Server at localhost Port 80
All you gotta do is:
STEP 1: create an HTML file for your custom page and save it at your application's directory (ex: xampp/htdocs/application/404.html)
Código: Seleccionar todo
<!doctype html>
<html lang="en">
<head>
[...]
</head>
<body>
<!-- CONTENT -->
<section class="py-12">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 col-lg-8 col-xl-6 text-center">
<!-- Heading -->
<h2 class="mb-5">404. Page not found.</h2>
<!-- Text -->
<p class="mb-7 text-gray-500">
Sorry, we couldn't find the page you where looking for.
We suggest that you return to home page.
</p>
<!-- Button -->
<a class="btn btn-dark" href="http://www.teste.com">
Go to Homepage
</a>
</div>
</div>
</div>
</section>
</body>
</html>
Código: Seleccionar todo
ErrorDocument 404 /application/404.html
*"404" is the error code which you are redirecting (you can add other codes as well)
*"/application/404.html" is the directory of your custom page
And that's it.
Now our new 404 page will show only the information we want it to show:
Código: Seleccionar todo
404. Page not found.
Sorry, we couldn't find the page you where looking for. We suggest that you return to home page.