Django - Creating a 404 Error Page
Last Updated :
28 Mar, 2023
The 404 error is raised when the URL called upon doesn't exist or has not been defined yet. This is commonly referred to as Page does not exist error. To handle requests from the undefined URLs in a website an error page is created. If these types of URLs are requested by the user then this error page gets executed to reflect the user that the page doesn't exist and you can further redirect them to another URL like the Homepage. Using this technique we can also improve the SEO of our website.
In this article, we will create a simple 404 error page for our application.
Implementation:
Step 1 : Go to settings.py file of your application and change this
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False
ALLOWED_HOSTS = ['*']
Step 2: Go to the urls.py file of your application and put the below code:
Python3
from django.contrib import admin
from django.urls import include, path
# add the following path in the
# url patterns
urlpatterns = [
path('', include('pages.urls'))
]
# add a flag for
# handling the 404 error
handler404 = 'pages.views.error_404_view'
Step 3: After that go to open up the views.py of your app and add the below code:
Python3
from django.conf import settings
from django.shortcuts import redirect
def error_404_view(request, exception):
# we add the path to the 404.html file
# here. The name of our HTML file is 404.html
return render(request, '404.html')
Step 4: Now just need to add the HTML page to your template page and your work is finished.
HTML
{% load static %}
<!DOCTYPE html>
<!--[if IE 8 ]>
<html class="no-js oldie ie8" lang="en">
<![endif]-->
<!--[if IE 9 ]>
<html class="no-js oldie ie9" lang="en">
<![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<!--- basic page needs
================================================== -->
<meta charset="utf-8">
<title>Web Developer</title>
<link href="{% static 'img/Demo/favicon.png' %}" rel="shortcut icon"/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Alphaandroid - Creative Agency of web developers">
<meta name="author" content="Pavan And Romil">
<meta name="keywords" content="Web developer (using coding), Digital Marketing" />
<!-- mobile specific metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="{% static 'css/error404/base.css' %}">
<link rel="stylesheet" href="{% static 'css/error404/main.css' %}">
<link rel="stylesheet" href="{% static 'css/error404/vendor.css' %}">
<!-- script
================================================== -->
<script src="{% static 'js/error404/modernizr.js' %}"></script>
<!-- favicons
================================================== -->
<link rel="icon" type="image/png" href="{% static 'favicon.png' %}">
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-MRJ5QRJ');
</script>
<!-- End Google Tag Manager -->
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MRJ5QRJ"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- header
================================================== -->
{% comment %}
<header class="main-header">
<div class="row">
<div class="logo">
<a href="index.html">Alpha Android</a>
</div>
</div>
<a class="menu-toggle" href="#"><span>Menu</span></a>
</header>
<!-- /header --> {% endcomment %}
<!-- navigation
================================================== -->
{% comment %}
<nav id="menu-nav-wrap">
<h5>Site Pages</h5>
<ul class="nav-list">
<li><a href="/" title="">Home</a></li>
<li><a href="#" title="">About</a></li>
<li><a href="#" title="">Contact</a></li>
</ul>
<h5>Some Text</h5>
<p>Lorem ipsum Non non Duis adipisicing pariatur eu enim Ut in aliqua dolor esse sed est in sit exercitation eiusmod aliquip consequat.</p>
</nav>
{% endcomment %}
<!-- main content
================================================== -->
<main id="main-404-content" class="main-content-particle-js">
<div class="content-wrap">
<div class="shadow-overlay"></div>
<div class="main-content">
<div class="row">
<div class="col-twelve">
<h1 class="kern-this">404 Error.</h1>
<p>
Oooooops! Looks like nothing was found at this location.
Maybe try one of the links below, click on the top menu
or try a search?
</p>
{% comment %}
<div class="search">
<form>
<input type="text" id="s" name="s" class="search-field" placeholder="Type and hit enter …">
</form>
</div>
{% endcomment %}
</div>
<!-- /twelve -->
</div>
<!-- /row -->
</div>
<!-- /main-content -->
<footer>
<div class="row">
<div class="col-seven tab-full social-links pull-right">
<ul>
<li><a href="#"><i class="fa fa-facebook"></i></a></li>
<li><a href="#"><i class="fa fa-behance"></i></a></li>
<li><a href="#"><i class="fa fa-twitter"></i></a></li>
<li><a href="#"><i class="fa fa-dribbble"></i></a></li>
<li><a href="#"><i class="fa fa-instagram"></i></a></li>
</ul>
</div>
<div class="col-five tab-full bottom-links">
<ul class="links">
<li><a href="/">Homepage</a></li>
<li><a href="/about-us/">About Us</a></li>
{% comment %}
<li><a href="/contact-us/">Contact Us</a></li>
{% endcomment %}
<li><a href="mailto:[email protected]">Report Error</a></li>
</ul>
<div class="credits">
<p>Design by <a href="http://www.alphaandroid.com/" title="styleshout">alphaandroid.com</a></p>
</div>
</div>
</div>
<!-- /row -->
</footer>
</div>
<!-- /content-wrap -->
</main>
<!-- /main-404-content -->
<div id="preloader">
<div id="loader"></div>
</div>
<!-- Java Script
================================================== -->
<script src="{% static 'js/error404/jquery-2.1.3.min.js' %}"></script>
<script src="{% static 'js/error404/plugins.js' %}"></script>
<script src="{% static 'js/error404/main.js' %}"></script>
</body>
</html>
Step 5: Lastly whenever the 404 error is raised it will show them the 404.html file.:
Output:
Note: You will be able to see the output of this page only and only when you have made that website live on hosting or when you will set debug mode "False" and set your allowed host.
Similar Reads
Python Django Handling Custom Error Page To handle error reporting in Django, you can utilize Django's built-in form validation mechanisms and Django's error handling capabilities. In this article, I'll demonstrate how to implement error handling. If there are errors in the form submission, the user will be notified of the errors. Required
4 min read
Built-in Error Views in Django Whenever one tries to visit a link that doesn't exist on a website, it gives a 404 Error, that this page is not found. Similarly, there are more error codes such as 500, 403, etc. Django has some default functions to for handle HTTP errors. Let's explore them one-by-one. Built-in Error Views in Djan
3 min read
Joke Application Project Using Django Framework We will create a simple Joke application using Django. By using the pyjokes package, we’ll build a web app that generates and displays random jokes. We’ll go step-by-step to set up the project, configure the views, and render jokes dynamically on the homepage.Install Required PackagesFirst, install
2 min read
How to Fix - Page not found 404 django In the world of web development, handling these errors gracefully is crucial for providing a good user experience. In this article, we'll explore how to handle 404 errors in Django, covering different possibilities and best practices. Understanding the 404 Error in DjangoDjango, a famous Python web
4 min read
Django - Dealing with warnings Django is a powerful web framework that provides a clean, reusable architecture to build robust applications quickly. It embraces the DRY (Don't Repeat Yourself) principle, allowing developers to write minimal, efficient code.Create and setup a Django project:Prerequisite: Django - Creating projectA
2 min read
Django URLResolver error There are many errors that come when we create a project in Django. In this article, we will learn how to resolve such error "URLResolver error". What is URLResolver Error in Django? Url Resolver error in Django pops out when there is a mistake in your URL patterns configurations. This can be caused
4 min read