A "Site Under Construction" page is a temporary page that is displayed on a website when it is undergoing updates, changes, or improvements. The purpose of this page is to inform visitors that the site is currently unavailable or undergoing changes and to provide a timeline or estimated date for when the site will be back up and running.
By using a "Site Under Construction" page, website owners can provide a professional and user-friendly way of communicating that the site is temporarily unavailable, while also maintaining the website's branding and image. This can help to manage visitor expectations, minimize confusion, and reduce the number of abandoned visits to the site.
Additionally, a "Site Under Construction" page can also provide website owners with an opportunity to engage with their audience and build anticipation for upcoming changes or improvements to the site. This can include information about the nature of the changes, what visitors can expect when the site is back up and running, and a way for visitors to stay informed and up-to-date with the latest developments.
Without delay, let me tell you how you will create Site Under Construction Project in Django.
You will need middleware for this. I assume you have a django project If not then create your Django project. For this, I am doing my music player project. You have to create middlewares.py file inside your application.
middlewares.py
from django.shortcuts import render
class UnderConstructionMiddleware:
def __init__(self, get_response):
self.get_response = get_response
def __call__(self, request):
print("Call From Middleware Before View")
response = render(request, "player/siteunderconstruction.html")
print("Call From Middleware After View ")
return response
This middleware has to be registered in your project's settings
settings.py
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
"django.contrib.sessions.middleware.SessionMiddleware",
"django.middleware.common.CommonMiddleware",
"django.middleware.csrf.CsrfViewMiddleware",
"django.contrib.auth.middleware.AuthenticationMiddleware",
"django.contrib.messages.middleware.MessageMiddleware",
"django.middleware.clickjacking.XFrameOptionsMiddleware",
"player.middlewares.UnderConstructionMiddleware", # new
]
In this player is the name of my application, middlewares is my file inside which is the code of the middleware and UnderConstructionMiddleware is my middleware name
Now I will create templates which I have given in middleware a folder named Templates has been created inside the folder named Player inside the application.
player/siteunderconstruction.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Site</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
</head>
<style>
h1{
font-family: 'Pacifico';
}
body,html {
height: 100%;
}
</style>
<body class="bg-dark">
<div class="container d-flex align-items-center justify-content-center h-100">
<h1 class="text-warning display-2">
Back After: <span id="demo" class="text-white"></span><br>
<p style="font-size: 30px; color: rgb(126, 126, 126); font-family: cursive;">This Site Under Construction</p>
</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
<script>
// Set the date we're counting down to
var countDownDate = new Date("Feb 14, 2023 15:37:25").getTime();
// Update the count down every 1 second
var x = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Output the result in an element with id="demo"
document.getElementById("demo").innerHTML = days + "d " + hours + "h "
+ minutes + "m " + seconds + "s ";
// If the count down is over, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("demo").innerHTML = "EXPIRED";
}
}, 1000);
</script>
</html>
You can customize this template as per your requirement.
Now the project is ready If you want to remove it, you can simply go to settings and comment out the middleware.
MIDDLEWARE = [
"django.middleware.security.SecurityMiddleware",
"django.contrib.sessions.middleware.SessionMiddleware",
"django.middleware.common.CommonMiddleware",
"django.middleware.csrf.CsrfViewMiddleware",
"django.contrib.auth.middleware.AuthenticationMiddleware",
"django.contrib.messages.middleware.MessageMiddleware",
"django.middleware.clickjacking.XFrameOptionsMiddleware",
# "player.middlewares.UnderConstructionMiddleware", # new
]
If you have any problem, then you can tell by commenting or you can also message me. this is my profile Abdulla Fajal.
