Adding Index Page
Resources:
- index.html file
Till now, we have learnt how to render HTML page using Django Template Engine. Now, let us add index page to our project.
I have attached an index.html file in the resources section. Copy the HTML Code and paste it in the index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Book My Vaccine</title>
<!-- Favicon -->
<link rel="icon" type="image/png" href="" />
<!-- Bootstrap 5 CSS CDN Link -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
crossorigin="anonymous" />
<!-- Fontawesome Icon CDN Link-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Custom CSS Link -->
<link rel="stylesheet" href="" />
</head>
<body>
<header class="header_wrapper">
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="/">
<img src="" height="50">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-stream navbar-toggler-icon"></i>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNav">
<ul class="navbar-nav menu-navbar-nav">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="/"><i class="fas fa-home"></i>
Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/login/"><i class="fas fa-sign-in-alt"></i> Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/accounts/signup/"><i class="fas fa-plus"></i> Signup</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container main-content mt-2 p-2">
<!-- Banner Starts Here -->
<section id="home" class="home">
<div class="banner_wrapper wrapper pb-0">
<div class="container">
<div class="row align-items-center">
<div class="col-md-6 order-md-1 order-2 p-5">
<h3>Save Life</h3>
<h2>Get Vaccinated</h2>
<p>Vaccines can lower your chance of getting certain diseases. Vaccines work with your body’snatural defenses to help you safely develop immunity to disease. This lowers your chances of getting certain diseases and suffering from their complications.
</p>
<a href="/accounts/login/"
class="main-btn mt-4 fill-btn">Schedule Vaccination</a>
</div>
<div class="col-md-6 order-md-2 order-1 mb-md-0 b-5">
<div class="top-right-sec">
<div class="banner-img">
<img src="" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="wrapper mt-1 pb-0">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 mb-4">
<div class="card text-center">
<div class="icon-box fs-1 text-success">
<i class="fas fa-syringe"></i>
</div>
<h4>Vaccine</h4>
<p>Get different types of vaccines for various infections or disease like Covid-19, Polio, Chickenpox, Typhoid, Yellow Fever, Rabies etc.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card text-center">
<div class="icon-box fs-1 text-primary">
<i class="fas fa-map-marker-alt"></i>
</div>
<h4>Center</h4>
<p>Book your vaccine from your nearest vaccination center. This saves your time, money and energy for getting vaccinated as soon as possible.
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 mb-4">
<div class="card text-center">
<div class="icon-box fs-1 text-warning">
<i class="fas fa-calendar"></i>
</div>
<h4>Campaign</h4>
<p>Choose your desired campaign and book a slot based on your availabity. There's no need to stay on line and become a part of crowd.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Banner Ends Here -->
<!-- About Starts Here -->
<section id="about" class="about_wrapper wrapper">
<div class="container text-center">
<h2>Our Journey</h2>
<p>We launched this platform on 2020 and so far, we have onboarded various hosiptals, collaborated with various local health authorities for conduction mass vaccination campaign. We are committed to make a healthy society through our platform. Our mission is to help every single organization involved in vaccination drives.
</p>
<div class="row">
<div class="col-md-6 mb-md-0 mb-5">
<div class="postion-relative">
<img src="" alt="" class="about-img img-fluid">
</div>
</div>
<div class="col-md-6 d-flex align-items-center justify-content-center">
<div class="card">
<div class="row text-center">
<div class="col-6">
<h4>50+</h4>
<p>Vaccines Available</p>
</div>
<div class="col-6">
<h4>500+</h4>
<p>Vaccination Center</p>
</div>
</div>
<div class="row text-center mt-4">
<div class="col-6">
<h4>600+</h4>
<p>Campaign Created</p>
</div>
<div class="col-6">
<h4>5000+</h4>
<p>Successful Vaccination</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- About Ends Here -->
</div>
<footer class="text-center">
Copyright © XYZ Privated Limited
</footer>
<!-- Bootstrap 5 JS CDN Link -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous">
</script>
</body>
</html>
After that run the development server and open the index page. You will see something like this.
As you can notice, in this page something is not working.
-
HTML file is rendering properly, but if you view the page source then you can find that the custom css file is not configured.
-
Similarly, there are some images link when is also not configured.
Now, our task is to configure the css and images link.
In Django, we generally treat css and images file as static files.
That means, if you use any sorts of CSS, JavaScript and Images files in Django Template and if these files are not changing frequently then we treat these CSS, JavaScript and Images files as static files.
Therefore, the first task is to configure the static file in our django project.
-
Open the settings.py file and scroll down to the section where there is STATIC_URL.
-
Now, add the following code below the STATIC_URL.
STATIC_ROOT = BASE_DIR / "staticfiles"
STATICFILES_DIRS = [BASE_DIR / "static"]
Here, we have encountered three different terminologies.
- STATIC_URL
- STATIC_ROOT
- STATICFILES_DIRS
We need to understand these three different terminologies properly because these are one of the most confusing topic for every new django developer.
Lets start with the STATIC_URL.
STATIC_URL is simply the term that is prepended to your static file URL.
For example:
-
If you want to serve a CSS file from this URL: static/css/styles.css then, you need to set STATIC_URL value as static.
-
If you want to serve a CSS file from this URL: mystatic/css/styles.css then, you need to set STATIC_URL value as mystatic.
After setting the STATIC URL value in settings.py file, we need to connect this STATIC URL with the URL patterns of our project.
- Open the urls.py file from mysite.
- First of all, import the settings and static function.
from django.conf import settings
from django.conf.urls.static import static
- After that, add this code.
# Static Files Configuration
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
In this way, we have successfully configured the Static URL for CSS, JavaScript and Images files of our django project.
Now, you have to download the static files from this URL. DOWNLOAD ZIP FILE
Download this zip file and extract it.
- There are two different folders named images and css. Copy this two folders.
- Then create static folder in the project root directory.
- After that paste those copied folder in the static folder.
In this way, we have added static files like css and images in our django project and configured the URL through which we can access those static files.
Now, lets discuss about STATIC_ROOT.
STATIC_ROOT is generally used on the production.
-
Whenever we deploy our django project in the server then we need to run
python manage.py collectstaticcommand, this command collects all the static files from the django app and any other third party django app which you have installed and after collecting those static files, it will save it in the staticfiles folder. -
Therefore, in this static_root configuration we are configuring the path for static files that will be collected when we run the collectstatic command in the production.
Now, lets discuss about STATICFILES_DIR.
- The staticfiles_dirs is a list of directories where Django looks for static files.
That means, using this staticfiles_dirs you are telling the django that if you need to render any static files, look in this directory.
Now, I hope you have understood the difference between static url, static root and staticfiles_dir.
In summary,
- The static_url is used to specify the URL prefix that is used to access static files,
- The static_root is the directory on your server where the static files are collected, and
- The staticfiles_dirs is a list of directories where Django look for static files.
Now, we can update the index.html file and configure the static files.
First of all, we need to add load static at the top of our html file if we want to use static file in this html file.
{% load static %}
Now, update the link for custom css file [Line 25]
<link rel="stylesheet" href="{% static 'css/styles.css' %}" />
This is how, you have to use static files in Django template.
[Run the development server and see the changes in index page]
Now, lets update the favicon link [Line 14]
<link rel="icon" type="image/png" href="{% static 'images/favicon.png' %}" />
[Run the development server and see the changes in index page]
Similarly, we will update the logo in the navbar.
<img src="{% static 'images/logo.png' %}" height="50" />
[Run the development server and see the changes in index page]
Now, there are 2 images in the index page whose URL is not configured.
The first image is banner image. Its img tag is somewhere in Line 80.
Update the image with this url.
<img src="{% static 'images/banner-image.png' %}" alt="Docter with Syringe" />
[Run the development server and see the changes in index page]
Similarly, we will update the last image whose img tag is somewhere in line 136.
<img src="{% static 'images/about-image.jpg' %}" alt="Nurse with Syringe" class="about-img img-fluid" />