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 adminfrom django.urls import include, path# add the following path in the# url patternsurlpatterns = [ path('', include('pages.urls'))]# add a flag for# handling the 404 errorhandler404 = '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 settingsfrom django.shortcuts import redirectdef 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) --> 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:Contact@alphaandroid.com">Report Error</a></li> </ul> <div class="credits"> </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.
