Open In App

Django – Creating a Multi-Page Website

Improve
Improve
Like Article
Like
Save
Share
Report

Django is a python based open-source framework used for web development. Django allows the usage of the M-T-V (Model-Templates-View) architectural pattern for the creation and deployment of a functional website. 

This article aims at creating a multipage personal profile website using Django to explain all the main concepts and aspects of the Django framework. 

Note: The HTML and CSS codes in the article below are rudimentary.

Implementation:

Start off by creating a new project in any IDE that supports Python.

  • Open the terminal and start by installing Django with the following command:
pip install django
  •  Create a Django project (Let’s call it profile) with the following command:
django-admin startproject Profile
  • Once the project has been completely created, navigate to the project file:
cd Profile
  • Create an application (Let’s call it base) within the project (this comes in handy for large multi-aspect websites) :
django-admin startapp base

Navigate to the settings.py file in the profile/profile directory and look for a list name INSTALLED_APPS 

  • Add the following element to the end of the list: (This is necessary for the project to be the base app to be linked to the Profile project)
'base.apps.BaseConfig',

Scroll down to a list named TEMPLATED in the settings.py file

  • Add the following element to the ‘DIRS’ list: (This is necessary to add HTML code)
BASE_DIR / 'templates',

Scroll down further and you will find a variable called STATIC_URL.

  • Add the following list on the line after the STATIC_URL variable
STATICFILES_DIRS = [
    BASE_DIR / 'static'
]

This is what your settings.py should look like:

Python3




"""
Django settings for Profile project.
  
Generated by 'django-admin startproject' using Django 4.0.2.
  
For more information on this file, see
  
For the full list of settings and their values, see
"""
  
from pathlib import Path
  
# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
  
  
# Quick-start development settings - unsuitable for production
  
# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-%y9#-d_f74fdq6t6qal(51b4-j1v7f)g+c&7cb1g_wuz_94xq%'
  
# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True
  
ALLOWED_HOSTS = []
  
  
# Application definition
  
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'base.apps.BaseConfig',
]
  
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',
]
  
ROOT_URLCONF = 'Profile.urls'
  
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates',
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
  
WSGI_APPLICATION = 'Profile.wsgi.application'
  
  
# Database
  
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}
  
  
# Password validation
  
AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]
  
  
# Internationalization
  
LANGUAGE_CODE = 'en-us'
  
TIME_ZONE = 'UTC'
  
USE_I18N = True
  
USE_TZ = True
  
  
# Static files (CSS, JavaScript, Images)
  
STATIC_URL = 'static/'
STATICFILES_DIRS = [
    BASE_DIR / 'static'
]
  
# Default primary key field type
  
DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'


Now, navigate to the urls.py file in the Profile/Profile directory.

  • Import an additional function into the file:
from django.urls import include
  • Add an additional element to the urlpatterns list:
path('', include('base.urls')),

This is what your urls.py file should look like:

Python3




"""Profile URL Configuration
  
The `urlpatterns` list routes URLs to views. For more information please see:
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from django.urls import include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('base.urls')),
]


Now, navigate to the views.py file in the Profile/base directory:

Here we create the varied pages and assign the respective HTML files (which we’ll create later).

  • Paste the following code to the views.py file:

Python3




from django.shortcuts import render
  
def home(request):
    return render(request, "home.html")
  
def projects(request):
    return render(request, "projects.html")
  
def contact(request):
    return render(request, "contact.html")


Create a new file called urls.py INSIDE THE Profile\base DIRECTORY

This file creates URLs to the respective web addresses mentioned in the views.py file

  • Add the following code to the base/urls.py file:

Python3




from django.urls import path
from . import views
  
urlpatterns = [
    path("", views.home, name="home"),
    path("projects/", views.projects, name="projects"),
    path("contact/", views.contact, name="contact"),
]


Now, for the static file (the file that contains .css files and images).

Create a new directory in the main Profile project file called static. The static file should be at the same hierarchical level as the manage.py file.

Inside this file create 2 more directories called styles and Images

  • Add a style.css file in the styles directory and add the following code to the style.css file:

CSS




    navbar {
      width: 100%;
      margin:0px 0;
    }
        navbar ul{
      width: 100%;
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  
    navbar ul li{
      width: 33%;
      float: left;
    }
        navbar ul li a{
      text-decoration: none;
      color: rgb(0, 0, 0);
      text-align: center;
      padding: 20px 0;
      display: block;
      width: 100%;
      background-color: rgb(160, 236, 145);
    }
  
    navbar ul li a:hover {
      background-color: rgb(11, 221, 29);
    }
  
  .home{
    margin-right: 5%;
    margin-top: 15px;
    margin-left: 15px;
    margin-bottom: 15px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 5px;
    padding-bottom: 15px;
    border-radius: 10px;
    box-shadow: 15px 15px 15px black;
    text-align: justify;
    color: white;
    background-image: linear-gradient(rgb(129, 196, 235), rgb(5, 44, 151));
  }
  
  .project-area {
  
    background-repeat: no-repeat;
    background-position: left;
    box-sizing: border-box;
  }
  
  .project-item {
    width: 75%;
    margin-top:5px;
    margin-bottom:15px;
    margin-left: 5%;
    margin-right: 5%;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 30px;
    padding-right: 30px;
    border-radius: 10px;
    box-shadow: 10px 10px 40px gray;
    text-align: justify;
    color: white;
    background-color: black;
  }
  
  #project {
    border-left: 15px solid;
    border-image: linear-gradient(purple, tomato);
    border-image-slice: 1;
  }
  
  
#contact .contact-item {
  background-color: aquamarine;
  float: left;
    width: 20%;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    padding: 30px;
    margin: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 15px 15px 15px black;
}


Add an image of yourself to the Images directory and rename it to ‘Profile_img’.

For the HTML files, create a new directory in the main Profile project file called templates. The templates file should be at the same hierarchical level as the manage.py file.

  • Create a file called navbar.html for the navigation bar and add the following code to it:

HTML




{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<navbar>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/projects">Projects</a></li>
      <li><a href="/contact">Contact</a></li>
    </ul>
</navbar>
<hr>


The first two lines in the above code are necessary to load the CSS code from the static directory, and to link the code in the CSS file to the HTML file.

  • Create a file called home.html and add the following code to it:

HTML




{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Home</title>
<section class="home">
        <center>
            <font size="6">
                  
<p>ABOUT ME </p>
  
            </font>
            <img src="{% static 'images/Profile_img.png' %}" width="200" height="200">
            <font size="4">
                  
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
  
            </font>
        </center>
</section>


The first line in the above code is used to directly add the navigation bar to the current page.

  • Create a file called projects.html and add the following code to it:

HTML




{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Projects</title>
        <section class="project-area">
            <center>
            <font size="6">
                  
<p>PROJECTS</p>
  
            </font>
                <div id="project" class="project-item">
                    <h2>PROJECT 1 NAME</h2>
                      
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Vestibulum dignissim, sapien et efficitur vulputate,
                         felis blandit metus, vitae eleifend nisl justo sed nunc.
                         Sed ut nunc malesuada, scelerisque mauris sed, hendrerit neque.
                         Morbi eget nisl non tellus posuere iaculis.
                         Nunc ut tincidunt est, a tempus tortor. Mauris lobortis felis elit,
                         quis euismod urna lacinia vitae. Morbi interdum diam in faucibus finibus.
                         Sed pellentesque sem a diam rhoncus, eu semper neque efficitur. </p>
  
                </div>
                <div id="project" class="project-item">
                    <h2>PROJECT 2 NAME </h2>
                      
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                        Vestibulum dignissim, sapien et efficitur vulputate,
                         felis blandit metus, vitae eleifend nisl justo sed nunc.
                         Sed ut nunc malesuada, scelerisque mauris sed, hendrerit neque.
                         Morbi eget nisl non tellus posuere iaculis.
                         Nunc ut tincidunt est, a tempus tortor. Mauris lobortis felis elit,
                         quis euismod urna lacinia vitae. Morbi interdum diam in faucibus finibus.
                         Sed pellentesque sem a diam rhoncus, eu semper neque efficitur. </p>
  
                </div>
            </div>
            </center>
        </section>


  • Create a file called contact.html and add the following code to it:

HTML




{% include 'navbar.html' %}
{% load static %}
<link rel="stylesheet" href="{% static 'styles/style.css' %}">
<title>Contact</title>
  <section id="contact">
    <center>
      <font size="6">
            
<p>CONTACT INFO</p>
  
      </font>
        <div class="contact-item">
            <h1>Phone Number</h1>
            <h2>+xx-xxxxxxxxxx</h2>
          </div>
        </div>
        <div class="contact-item">
            <h1>Email</h1>
            <h2>xyz@example.com</h2>
          </div>
        </div>
        <div class="contact-item">
            <h1>Address</h1>
            <h2>City, State, Country</h2>
          </div>
        </div>
      </div>
    </div>
    </center>
  </section>


Now, for the final step, open up a new terminal and run the following commands:

cd profile
python manage.py runserver

Output:



Last Updated : 01 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads