Home >>Codeigniter Tutorial >Create Custom 404 Page not found in CodeIgniter
Create Custom 404 Page not found in CodeIgniter
How to Create Custom 404 Page not found in CodeIgniter
A custom 404 error page displayed on your screen when a page not found error occurs. 404 Page Not Found is the most common types of error users facing while accessing website.
In this article, we can see how to create a fully customized 404 error page in CodeIgniter. It makes a web application user-friendly and helps the user to go back to your website. When the user clicks on the broken link or non-existent URL, an error message appears on the screen. A very common cause of this situation is the broken links that point to pages or resources that have been removed (or taken down) by the website administrator, most of the visitors may leave your site, to overcome this problem custom 404 error page gives an opportunity to display a customized message page with homepage redirect link.
Mainly the broken links are responsible for showing the 404(Page not found) error page occurred. You can easily customize the 404 error page as per your needs in CodeIgniter.
In this tutorial, we will see how to create a simple custom 404 error page in CodeIgniter. For this, you need to create an HTML of your 404-error page.
For this, you have to Go to your web application directory and open the file application/views/errors/html/error_404.php file in the editor. replace error_404.php code with given below code.
After customizing error_404.php file, we will see that the custom 404 pages have appeared like this
<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>
<?php
$ci = new CI_Controller();
$ci =& get_instance();
$ci->load->helper('url');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>404 Page Not Found</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Amarante' rel='stylesheet' type='text/css'>
<style type="text/css">
body{
background:url(<?php echo base_url(); ?>assets/front/images/404.png);
margin:0;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div class="container" style="margin-top:200px;margin-left:550px;">
<p><a class="btn btn-warning" href="<?php echo base_url(); ?>">Go Back to Home</a></p>
</div>
</body>
</html>
