21CS62 | Full Stack Django Development|

Laboratory Components

1. Installation of Python, Django and Visual Studio code editors can be demonstrated.
2. Creation of virtual environment, Django project and App should be demonstrated.
3. Develop a Django app that displays current date and time in server.
4. Develop a Django app that displays date and time four hours ahead and four hours
before as an offset of current date and time in server.
5. Develop a simple Django app that displays an unordered list of fruits and ordered list
of selected students for an event.
6. Develop a layout.html with a suitable header (containing navigation menu) and footer
with copyright and developer information. Inherit this layout.html and create 3
additional pages: contact us, About Us and Home page of any website.
7. Develop a Django app that performs student registration to a course. It should also
display list of students registered for any selected course. Create students and course as
models with enrolment as ManyToMany field.
8. For student and course models created in Lab experiment for Module2, register admin
interfaces, perform migrations and illustrate data entry through admin forms.
9. Develop a model form for student that contains his topic chosen for project, languages
used and duration with a model called project.
10. For students’ enrolment developed in Module 2, create a generic class view which
displays list of students and detail view that displays student details for any selected
student in the list.
11. Develop example Django app that performs CSV and PDF generation for any models
created in previous laboratory component.
12. Develop a registration page for student enrolment as done in Module 2 but without page
refresh using AJAX.
13. Develop a search application in Django using AJAX that displays courses enrolled by
a student being searched.

Search Creators…. Page 1

 21CS62 | Full Stack Django Development|

Experiment-01

Installation of Python, Django and Visual Studio code editors can be demonstrated.

Python

• Python is a popular high-level, general-use programming language.

• Python is a programming language that enables rapid development as well as more
effective system integration.
• Python has two main different versions: Python 2 and Python 3. Both are really different.

Here are the steps you can follow to download Python: Steps to Download & Install Python

Visit the link https://www.python.org to download the latest release of Python.

Search Creators…. Page 2

 21CS62 | Full Stack Django Development|

Step - 1: Select the Python's version to download.

Click on the download button to download the exe file of Python.

If in case you want to download the specific version of Python. Then, you can scroll down further
below to see different versions from 2 and 3 respectively. Click on download button right next to
the version number you want to download.

Search Creators…. Page 3

 21CS62 | Full Stack Django Development|

Step - 2: Click on the Install Now

Double-click the executable file, which is downloaded.

The following window will open. Click on the Add Path check box, it will set the Python path
automatically.

Now, Select Customize installation and proceed. We can also click on the customize installation
to choose desired location and features. Other important thing is installing launcher for the all user
must be checked.

Search Creators…. Page 4

 21CS62 | Full Stack Django Development|

Step - 3 Installation in Process

The set up is in progress. All the python libraries, packages, and other python default files will be
installed in our system. Once the installation is successful, the following page will appear saying
" Setup was successful ".

Search Creators…. Page 5

 21CS62 | Full Stack Django Development|

Step - 4: Verifying the Python Installation

To verify whether the python is installed or not in our system, we have to do the following.

o Go to "Start" button, and search " cmd ".

o Then type, " python - - version ".
o If python is successfully installed, then we can see the version of the python installed.
o If not installed, then it will print the error as " 'python' is not recognized as an internal or
external command, operable program or batch file. ".

We are ready to work with the Python.

Search Creators…. Page 6

 21CS62 | Full Stack Django Development|

Step - 5: Opening idle

Now, to work on our first python program, we will go the interactive interpreter prompt(idle). To
open this, go to "Start" and type idle. Then, click on open to start working on idle.

Search Creators…. Page 7

 21CS62 | Full Stack Django Development|

Here are the steps you can follow: Steps to Download & Install VS Code

Step – 1: Open Google and type Visual Studio Code download in the search bar.

Step – 2: Click on the below highlighted link for any OS.

Search Creators…. Page 8

 21CS62 | Full Stack Django Development|

Step – 3: Now, select the respective OS. In this case we are selecting Windows.

Step – 4: The file will be downloaded onto your system. Open the file and then click on Install.
After downloading the VS Code file, the official site will display a Thanks message for
downloading the file.

Search Creators…. Page 9

 21CS62 | Full Stack Django Development|

Step – 5: Now accept the license agreement.

Search Creators…. Page 10

 21CS62 | Full Stack Django Development|

Step – 6: Then it prompts for the file location, where you want to save the VS Code file.
Browse the location and then click on Next.

Step – 7: Next, you see the prompt for the additional task which we want the VS Code to
perform. At this step, choose the default settings and then click on next.

Search Creators…. Page 11

 21CS62 | Full Stack Django Development|

Step – 8: The next prompt is how you want the VS Code on your startup. Change
according to your convenience and click on Next.

Step – 9: The installation of VS Code will now begin.

Search Creators…. Page 12

 21CS62 | Full Stack Django Development|

Step – 10: At this step, we have completed installing VS Code, click on Finish.

Search Creators…. Page 13

 21CS62 | Full Stack Django Development|

Step – 11: Now that VS Code installation is successful, the page appears as below:

We can change the look as per our choice and continue working on it.

Search Creators…. Page 14

 21CS62 | Full Stack Django Development|

Here are the steps you can follow: Steps to Install Django

To install Django, first visit to Django official site (https://www.djangoproject.com) and

download Django by clicking on the download section.

Search Creators…. Page 15

 21CS62 | Full Stack Django Development|

Experiment-02
Creation of virtual environment, Django project and App should be demonstrated.

Here are the steps you can follow to create virtual environment: Steps to Create Virtual
Environment, Django Project and App

Step-01: Open Visual Studio Code

Step-02: Create a new folder for your project

In VS Code, go to File > Open... and create a new folder or select an existing folder where you
want to create your Django project.

Search Creators…. Page 16

 21CS62 | Full Stack Django Development|

Step-03: Open the integrated terminal

In VS Code, go to View > Terminal or use the keyboard shortcut Ctrl+`` (Windows/Linux) or
Cmd+`' (macOS) to open the integrated terminal.

Step-03: Create a virtual environment

In the terminal, run the following command to create a new virtual environment:

python -m venv env

Search Creators…. Page 17

 21CS62 | Full Stack Django Development|

Step-04: Activate the virtual environment

Step-05: Install Django

With the virtual environment active, install Django by running the following command in the
terminal: pip install django

Search Creators…. Page 18

 21CS62 | Full Stack Django Development|

Step-06: Create a new Django project

Run the following command to create a new Django project:

django-admin startproject myproject [change Project name as You Desired]

Step-07: Create a new Django app

In the VS Code terminal, navigate to your project directory:

cd myproject [change Project name as You Desired]

Search Creators…. Page 19

 21CS62 | Full Stack Django Development|

Create a new Django app by running the following command

python manage.py startapp myapp

[Replace myapp with the name you want to give to your app.]

Step-08: Add the app to the INSTALLED_APPS list

In the VS Code file explorer, locate the settings.py file (usually located in the myproject
directory) and open it.

Locate the INSTALLED_APPS list and add the name of your new app to the list

Search Creators…. Page 20

 21CS62 | Full Stack Django Development|

Here is the Django project structure that you wanted to create

after creating your Django app, the next step is to create database migrations for your app's
models (if you have any defined). Here's how you can do that using the python manage.py
makemigrations command in Visual Studio Code (VS Code)

Search Creators…. Page 21

 21CS62 | Full Stack Django Development|

Step-08: Apply the migrations

Once you've reviewed the migration files and are ready to apply the changes to your database,
run the following command in the terminal:

Step-09: Run Your Project

Here's how you can run the Django development server using the python manage.py runserver
command in Visual Studio Code (VS Code)

Check the server output

The terminal will display the URL where the development server is running, typically
http://127.0.0.1:8000/. It will also show any startup logs or warnings, if any. Open the
development server in your browser Copy the URL from the terminal output (e.g.,
http://127.0.0.1:8000/) and paste it into your web browser's address bar.

Search Creators…. Page 22

 21CS62 | Full Stack Django Development|

Here Displays the Development Server After Running Server

Search Creators…. Page 23

 21CS62 | Full Stack Django Development|

Experiment-03
Develop a Django app that displays current date and time in server.

Step-01: This app will be created in the Django project we made earlier.

Step-02: Add the app to INSTALLED_APPS

Open the settings.py file in your project's directory (e.g., myproject/settings.py).

Locate the INSTALLED_APPS list and add the name of your new app to the list:

Search Creators…. Page 24

 21CS62 | Full Stack Django Development|

Step-03: Create a view function

• Open the views.py file in your Django app's directory (e.g., datetimeapp/views.py).
• Import the necessary modules at the top of the file

• Create a new view function that will handle the request and render the date and time:

def current_datetime(request):

now = datetime.datetime.now ()

context = {'datetime': now}

return render (request, 'current_datetime.html', context)

Search Creators…. Page 25

 21CS62 | Full Stack Django Development|

Step-04: Create a template

• In your app's directory (e.g., datetimeapp), create a new folder named templates.
• Inside the templates folder, create another folder with the same name as your app (e.g.,
myapp).
• Inside the datetimeapp folder, create a new file named current_datetime.html.
• Open current_datetime.html and add the following code to display the current date and
time:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Current Date and Time</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<style>

/* Center content vertically */

html, body {

height: 100%;

display: flex;

justify-content: center;

align-items: center;

</style>

</head>

Search Creators…. Page 26

 21CS62 | Full Stack Django Development|

<body>

<div class="container text-center">

<h1>Current Date and Time on the Server</h1>

<p>{{ datetime }}</p>

</div>

<!-- Bootstrap Bundle with Popper -->

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.min.js"></script>

</body>

</html>

Search Creators…. Page 27

 21CS62 | Full Stack Django Development|

Step-05: Map the view function to a URL

• Open the urls.py file in your Django app's directory (e.g., datetimeapp/urls.py).
• Import the view function at the top of the file
• Add a new URL pattern to the urlpatterns list

from django. urls import path

from. import views

urlpatterns = [

path ('', views. current_datetime, name='current_datetime'),

This maps the current_datetime view function to the root URL (/).

Search Creators…. Page 28

 21CS62 | Full Stack Django Development|

Step-06: Include the app's URLs in the project's URL patterns

• Open the urls.py file in your project's directory (e.g., fullstack_project/urls.py).

• Import the include function from django. urls and the path function from django. urls:

from django.urls import include, path

• Add a new URL pattern to the urlpatterns list

path ('', include ('datetimeapp. urls')),

• This includes the URL patterns from your app's urls.py file.

Search Creators…. Page 29

 21CS62 | Full Stack Django Development|

Step-07: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

Final Output of the Date and Time App

Search Creators…. Page 30

 21CS62 | Full Stack Django Development|

Experiment-04

Develop a Django app that displays date and time four hours ahead and four hours before
as an offset of current date and time in server.

Step-01: This app will be created in the Django project we made earlier.

Step-02: Add the app to INSTALLED_APPS

Open the settings.py file in your project's directory (e.g., myproject/settings.py).

Locate the INSTALLED_APPS list and add the name of your new app to the list:

Search Creators…. Page 31

 21CS62 | Full Stack Django Development|

Step-03: Create a view function

• Open the views.py file in your Django app's directory

(e.g., fourdate_timeapp/views.py).
• Import the necessary modules at the top of the file
• Create a new view function that will handle the request and render the date and time:

from django.shortcuts import render

import datetime

from dateutil import tz

def datetime_offsets(request):

now = datetime.datetime.now()

context = {

'current_datetime': now,

'four_hours_ahead': now + datetime.timedelta(hours=4),

'four_hours_before': now - datetime.timedelta(hours=4),

return render(request, 'datetime_offsets.html', context)

• This view function gets the current date and time using datetime.datetime.now(),
calculates the date and time four hours ahead and four hours before using
datetime.timedelta, and then passes all three values to the template as context variables.

Search Creators…. Page 32

 21CS62 | Full Stack Django Development|

Step-04: Create a new template

• In your app's directory (e.g., fourdate_timeapp), create a new folder named

templates (if it doesn't already exist).
• Inside the templates folder, create another folder with the same name as your app
(e.g., fourdate_timeapp).
• Inside the fourdate_timeapp folder, create a new file named
datetime_offsets.html.
• Open datetime_offsets.html and add the following code to display the current
date and time, along with the offsets:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Search Creators…. Page 33

 21CS62 | Full Stack Django Development|

<title>Date and Time Offsets</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

<style>

/* Center content vertically */

html, body {

height: 100%;

display: flex;

justify-content: center;

align-items: center;

</style>

</head>

<body>

<div class="container text-center">

<h1>Current Date and Time on the Server</h1>

<p>{{ current_datetime }}</p>

<h2>Four Hours Ahead</h2>

<p>{{ four_hours_ahead }}</p>

<h2>Four Hours Before</h2>

Search Creators…. Page 34

 21CS62 | Full Stack Django Development|

<p>{{ four_hours_before }}</p>

</div>

<!-- Bootstrap Bundle with Popper -->

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.min.js"></script>

</body>

</html>

• This template displays the current_datetime, four_hours_ahead, and four_hours_before

variables passed from the view function.

Search Creators…. Page 35

 21CS62 | Full Stack Django Development|

Step-05: Map the view function to a URL

• Open the urls.py file in your Django app's directory (e.g., fourdate_timeapp/urls.py).
• Import the view function at the top of the file
• Add a new URL pattern to the urlpatterns list

from django.urls import path

from . import views

urlpatterns = [

path('datetime-offsets/', views.datetime_offsets, name='datetime_offsets'),

Search Creators…. Page 36

 21CS62 | Full Stack Django Development|

Step-06: Include the app's URLs in the project's URL patterns

• Open the urls.py file in your project's directory (e.g., fullstack_project/urls.py).

• Import the include function from django. urls and the path function from django. urls:

from django.urls import include, path

• Add a new URL pattern to the urlpatterns list

path('', include('fourdate_timeapp.urls')),

• This includes the URL patterns from your app's urls.py file.

Search Creators…. Page 37

 21CS62 | Full Stack Django Development|

Step-07: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/datetime-offsets/

Final Output of the Date and Time App

Search Creators…. Page 38

 21CS62 | Full Stack Django Development|

Experiment-05

Develop a simple Django app that displays an unordered list of fruits and ordered list of

selected students for an event.

Step-01: This app will be created in the Django project we made earlier.

Step-02: Add the app to INSTALLED_APPS

Open the settings.py file in your project's directory (e.g., myproject/settings.py).

Locate the INSTALLED_APPS list and add the name of your new app to the list:

Search Creators…. Page 39

 21CS62 | Full Stack Django Development|

Step-03: Create a view function

• Open the views.py file in your Django app's directory

(e.g., listfruitapp/views.py).
• Create a new view function that will handle the request and render the date and time:
from django.shortcuts import render

def home(request):
fruits = ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple']
students = ['John', 'Jane', 'Mike', 'Sarah', 'Tom']
context = {
'fruits': fruits,
'students': students,
}
return render(request, 'home.html', context)

• Here, we define a view function home that creates two lists: fruits and students. These
lists are then passed to the template as a context dictionary.

Search Creators…. Page 40

 21CS62 | Full Stack Django Development|

Step-04: Create a new template

• In your app's directory (e.g., listfruitapp), create a new folder named templates (if it
doesn't already exist).
• Inside the templates folder, create another folder with the same name as your app (e.g.,
listfruitapp).
• Inside the fourdate_timeapp folder, create a new file named home.html.
• Open home.html and add the following code.

<!DOCTYPE html>

<html>

<head>

<title>Fruits and Students</title>

<!-- Add Bootstrap CSS -->

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">

<style>

/* Center content vertically */

html, body {

height: 100%;

body {

display: flex;

justify-content: center;

align-items: center;

Search Creators…. Page 41

 21CS62 | Full Stack Django Development|

.container {

text-align: center;

/* Style for lists */

.list-container {

display: inline-block;

margin: 0 20px; /* Add space between lists */

</style>

</head>

<body>

<div class="container">

<div class="row">

<div class="col">

<h1>Fruits</h1>

<ul class="list-group list-container">

{% for fruit in fruits %}

<li class="list-group-item">{{ fruit }}</li>

{% endfor %}

</ul>

Search Creators…. Page 42

 21CS62 | Full Stack Django Development|

</div>

<div class="col">

<h1>Selected Students</h1>

<ol class="list-group list-container">

{% for student in students %}

<li class="list-group-item">{{ student }}</li>

{% endfor %}

</ol>

</div>

</div>

</div>

<!-- Bootstrap JS (optional) -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>

Search Creators…. Page 43

 21CS62 | Full Stack Django Development|

• In this template, we use Django's template tags to loop through the fruits and students
lists and render them as an unordered list and an ordered list, respectively.

Step-05: Map the view function to a URL

• Open the urls.py file in your Django app's directory (e.g., listfruitapp/urls.py).
• Import the view function at the top of the file
• Add a new URL pattern to the urlpatterns list

from django.urls import path

from . import views

urlpatterns = [

path('home/', views.home, name='home'),

Search Creators…. Page 44

 21CS62 | Full Stack Django Development|

Step-06: Include the app's URLs in the project's URL patterns

• Open the urls.py file in your project's directory (e.g., fullstack_project/urls.py).

• Import the include function from django. urls and the path function from django. urls:

from django.urls import include, path

• Add a new URL pattern to the urlpatterns list

path('', include(listfruitapp.urls')),

• This includes the URL patterns from your app's urls.py file.

Search Creators…. Page 45

 21CS62 | Full Stack Django Development|

Step-07: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/home/

Final Output of the Unorder list of Fruits and Students

Search Creators…. Page 46

 21CS62 | Full Stack Django Development|

Experiment-06

Develop a layout.html with a suitable header (containing navigation menu) and footer
with copyright and developer information. Inherit this layout.html and create 3 additional
pages: contact us, About Us and Home page of any website.

Step-01: This app will be created in the Django project we made earlier.

Step-02: Add the app to INSTALLED_APPS

Open the settings.py file in your project's directory (e.g., fullstack_project/settings.py).

Locate the INSTALLED_APPS list and add the name of your new app to the list:

Search Creators…. Page 47

 21CS62 | Full Stack Django Development|

Step-03: Create a new template

• Inside the portfolioapp/templates/ portfolio directory, create the following files:

layout.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>{% block title %}{% endblock %}</title>

<!-- Include Bootstrap CSS from CDN -->

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>

/* Add some basic styling */

body {

font-family: Arial, sans-serif;

margin: 0;

padding: 0;

header {

background-color: #333;

color: #fff;

Search Creators…. Page 48

 21CS62 | Full Stack Django Development|

padding: 10px;

text-align: center; /* Center align header content */

nav ul {

list-style-type: none;

margin: 0;

padding: 0;

display: inline-block; /* Display nav items inline-block */

nav ul li {

display: inline;

margin-right: 10px;

nav ul li a {

color: #fff;

text-decoration: none;

footer {

background-color: #333;

color: #fff;

padding: 10px;

Search Creators…. Page 49

 21CS62 | Full Stack Django Development|

text-align: center;

/* Center align content */

.content-wrapper {

display: flex;

justify-content: center;

align-items: center;

min-height: 80vh; /* Set minimum height for content area */

</style>

{% load static %}

</head>

<body>

<header>

<nav>

<ul>

<li><a href="{% url 'main' %}" style="text-decoration:none;">Home</a></li>

<li><a href="{% url 'about' %}" style="text-decoration:none;">About Us</a></li>

<li><a href="{% url 'contact' %}" style="text-decoration:none;">Contact Us</a></li>

</ul>

Search Creators…. Page 50

 21CS62 | Full Stack Django Development|

</nav>

</header>

<div class="content-wrapper">

{% block content %}

{% endblock %}

</div>

<footer>

<p>&copy; 2024 Search Creators. Developed by Hanumanthu.</p>

</footer>

<!-- Include Bootstrap JS from CDN (Optional) -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

</body>

</html>

Search Creators…. Page 51

 21CS62 | Full Stack Django Development|

home.html

{% extends 'portfolio/layout.html' %}

{% block title %}Home{% endblock %}

{% block extra_css %}

<!-- Include Bootstrap CSS from CDN -->

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<style>

/* Custom CSS to center align content */

.center-content {

display: flex;

justify-content: center;

Search Creators…. Page 52

 21CS62 | Full Stack Django Development|

align-items: center;

height: 80vh; /* Set height to viewport height for full page centering */

.center-content > div {

text-align: center;

</style>

{% endblock %}

{% block content %}

<div class="center-content">

<div>

<h1 class="text-center my-3">Welcome to My Website</h1>

<p class="text-center">This is the home page of our website.</p>

<img src="/static/images/1.webp" alt="images" class="img-fluid p-5" width="100%"

height="580">

</div>

</div>

{% endblock %}

{% block extra_js %}

<!-- Include Bootstrap JS from CDN (Optional) -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Search Creators…. Page 53

 21CS62 | Full Stack Django Development|

{% endblock %}

about.html

{% extends 'portfolio/layout.html' %}

{% block title %}About Us{% endblock %}

{% block extra_css %}

<!-- Include Bootstrap CSS from CDN -->

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

{% endblock %}

{% block content %}

<div class="container">

<div class="row justify-content-center">

Search Creators…. Page 54

 21CS62 | Full Stack Django Development|

<div class="col-md-8">

<h1 class="text-center">About Us</h1>

<p class="text-center">We are a company that provides awesome products and

services.</p>

</div>

</div>

<!-- Service Images -->

<div class="row justify-content-center mt-5">

<div class="col-md-3 text-center">

<img src="/static/images/1.webp" alt="Service 1" class="img-fluid">

<p>Web Development</p>

</div>

<div class="col-md-3 text-center">

<img src="/static/images/2.jpeg" alt="Service 2" class="img-fluid">

<p>Boost Your Skill With ChatGPT</p>

</div>

<!-- Add more service images here -->

</div>

</div>

{% endblock %}

{% block extra_js %}

Search Creators…. Page 55

 21CS62 | Full Stack Django Development|

<!-- Include Bootstrap JS from CDN (Optional) -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

{% endblock %}

contact.html

{% extends 'portfolio/layout.html' %}

{% block title %}Contact Us{% endblock %}

{% block extra_css %}

<!-- Include Bootstrap CSS from CDN -->

<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

{% endblock %}

{% block content %}

Search Creators…. Page 56

 21CS62 | Full Stack Django Development|

<div class="container">

<div class="row justify-content-center">

<div class="col-md-6">

<h1 class="text-center">Contact Us</h1>

<p class="text-center">You can reach us at:</p>

<ul class="list-unstyled">

<li class="text-center">Email: [email protected]</li>

<li class="text-center">Phone: 123-456-7890</li>

<li class="text-center">Address: 123 Main Street, City, State</li>

</ul>

</div>

</div>

</div>

{% endblock %}

{% block extra_js %}

<!-- Include Bootstrap JS from CDN (Optional) -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

{% endblock %}

Search Creators…. Page 57

 21CS62 | Full Stack Django Development|

Step-04: Create a view function

• Open the views.py file in your Django app's directory

(e.g., portfolioapp/views.py).

from django.shortcuts import render

def main(request):

return render(request, 'portfolio/home.html')

def about(request):

return render(request, 'portfolio/about.html')

def contact(request):

return render(request, 'portfolio/contact.html')

Search Creators…. Page 58

 21CS62 | Full Stack Django Development|

Step-05: Map the view function to a URL

• Open the urls.py file in your Django app's directory (e.g., listfruitapp/urls.py).
• Import the view function at the top of the file
• Add a new URL pattern to the urlpatterns list

from django.urls import path

from . import views

urlpatterns = [

path('main/', views.main, name='main'),

path('about/', views.about, name='about'),

path('contact/', views.contact, name='contact'),

Search Creators…. Page 59

 21CS62 | Full Stack Django Development|

Step-06: Include the app's URLs in the project's URL patterns

• Open the urls.py file in your project's directory (e.g., fullstack_project/urls.py).

• Import the include function from django. urls and the path function from django. urls:
• Add a new URL pattern to the urlpatterns list

from django.urls import include, path [if does not exits]

path('', include(portfolioapp.urls')),

• This includes the URL patterns from your app's urls.py file.

Search Creators…. Page 60

 21CS62 | Full Stack Django Development|

Step-07: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/main/

Final Output By Clicking Above Navbar Home, About Us, Contact Us Buttons

Fig: Home Page Screen

Search Creators…. Page 61

 21CS62 | Full Stack Django Development|

Fig: About Us Screen

Fig: About Us Screen

Search Creators…. Page 62

 21CS62 | Full Stack Django Development|

Experiment-07

Develop a Django app that performs student registration to a course. It should also
display list of students registered for any selected course. Create students and course as
models with enrolment as ManyToMany field.

Step-01: This app will be created in the Django project we made earlier.

Step-02: Add the app to INSTALLED_APPS

Open the settings.py file in your project's directory (e.g., fullstack_project/settings.py).

Locate the INSTALLED_APPS list and add the name of your new app to the list:

Search Creators…. Page 63

 21CS62 | Full Stack Django Development|

Step-03: Create models

• Open the models.py file inside the student_course_registration_app and define your
models:

from django.db import models

class Course(models.Model):

name = models.CharField(max_length=255)

description = models.TextField(blank=True, null=True)

def __str__(self):

return self.name

class Student(models.Model):

first_name = models.CharField(max_length=255, default='')

last_name = models.CharField(max_length=255, default='')

email = models.EmailField(unique=True, default='')

courses = models.ManyToManyField(Course, related_name='students', blank=True)

def __str__(self):

return f"{self.first_name} {self.last_name}"

Search Creators…. Page 64

 21CS62 | Full Stack Django Development|

Step-04: Register models in the admin site

• Open the admin.py file inside the student_course_registration_app and register your
models:

from django.contrib import admin

from .models import Course, Student

admin.site.register(Course)

admin.site.register(Student)

Search Creators…. Page 65

 21CS62 | Full Stack Django Development|

Step-05: Create forms

• Create a new file called forms.py inside the student_course_registration_app and define
your forms:

from django import forms

from .models import Student, Course

class StudentForm(forms.ModelForm):

class Meta:

model = Student

fields = ['first_name', 'last_name', 'email', 'courses']

widgets = {

'first_name': forms.TextInput(attrs={'class': 'form-control'}),

'last_name': forms.TextInput(attrs={'class': 'form-control'}),

'email': forms.EmailInput(attrs={'class': 'form-control'}),

'courses': forms.SelectMultiple(attrs={'class': 'form-select', 'data-toggle':

'dropdown'}),

class CourseForm(forms.ModelForm):

class Meta:

model = Course

fields = ['name', 'description']

widgets = {

'name': forms.TextInput(attrs={'class': 'form-control'}),

'description': forms.Textarea(attrs={'class': 'form-control', 'rows': 3}),

Search Creators…. Page 66

 21CS62 | Full Stack Django Development|

Step-06: Create views

Open the views.py file inside the student_course_registration_app and define your views:

from django.shortcuts import render, redirect

from .models import Course, Student

from .forms import StudentForm, CourseForm

def index(request):

courses = Course.objects.all()

return render(request, 'registration/index.html', {'courses': courses})

def register_student(request):

if request.method == 'POST':

form = StudentForm(request.POST)

if form.is_valid():

form.save()

return redirect('index')

else:

Search Creators…. Page 67

 21CS62 | Full Stack Django Development|

form = StudentForm()

return render(request, 'registration/register_student.html', {'form': form})

def register_course(request):

if request.method == 'POST':

form = CourseForm(request.POST)

if form.is_valid():

form.save()

return redirect('index')

else:

form = CourseForm()

return render(request, 'registration/register_course.html', {'form': form})

def student_list(request, course_id):

course = Course.objects.get(id=course_id)

students = course.students.all()

return render(request, 'registration/student_list.html', {'students': students, 'course': course})

Search Creators…. Page 68

 21CS62 | Full Stack Django Development|

Step-07: Create templates

• Create a new directory called templates inside your student_course_registration_app, and

create the following template files:

index.html

{% extends 'base.html' %}

{% block content %}

<div class="container">

<h1 class="mt-5">Courses</h1>

<ul class="list-group mt-3">

{% for course in courses %}

<li class="list-group-item"><a href="{% url 'student_list' course.id %}">{{ course.name

}}</a></li>

{% endfor %}

</ul>

<a class="btn btn-primary mt-3" href="{% url 'register_student' %}">Register Student</a>

<a class="btn btn-secondary mt-3" href="{% url 'register_course' %}">Register Course</a>

</div>

{% endblock %}

Search Creators…. Page 69

 21CS62 | Full Stack Django Development|

register_student.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Student Registration</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">

</head>

<body>

<div class="container">

<h1>Register Student</h1>

<form method="post">

{% csrf_token %}

{{ form.as_p }}

<button type="submit" class="btn btn-primary">Register</button>

</form>

</div>

<!-- Bootstrap JavaScript (Optional) -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]
alpha1/dist/js/bootstrap.bundle.min.js"></script>

<!-- Your custom JavaScript to initialize the dropdown (Optional) -->

<script>

// Example JavaScript to initialize the dropdown

Search Creators…. Page 70

 21CS62 | Full Stack Django Development|

var dropdownElementList = [].slice.call(document.querySelectorAll('.dropdown-toggle'))

var dropdownList = dropdownElementList.map(function (dropdownToggleEl) {

return new bootstrap.Dropdown(dropdownToggleEl)

});

</script>

</body>

</html>

register_course.html

{% extends 'base.html' %}

{% load static %}

{% block content %}

<h1>Register Course</h1>

<div class="container">

<div class="row justify-content-center">

Search Creators…. Page 71

 21CS62 | Full Stack Django Development|

<div class="col-md-6">

<form method="post">

{% csrf_token %}

{% for field in form %}

<div class="form-group">

{{ field.label_tag }}

{{ field }}

{% if field.help_text %}

<small class="form-text text-muted">{{ field.help_text }}</small>

{% endif %}

{% for error in field.errors %}

<div class="alert alert-danger">{{ error }}</div>

{% endfor %}

</div>

{% endfor %}

<button type="submit" class="btn btn-primary text-center">Register</button>

</form>

</div>

</div>

</div>

{% endblock %}

Search Creators…. Page 72

 21CS62 | Full Stack Django Development|

student_list.html

{% extends 'base.html' %}

{% block content %}

<h1>Students Registered for {{ course.name }}</h1>

<ul>

{% for student in students %}

<li>{{ student.first_name }} {{ student.last_name }}</li>

{% endfor %}

</ul>

{% endblock %}

Search Creators…. Page 73

 21CS62 | Full Stack Django Development|

Step-08: Create a base template

• Create a base.html file inside the templates directory with the following content:

base.html

<!DOCTYPE html>

<html>

<head>

<title>Student Registration</title>

</head>

<body>

{% block content %}

{% endblock %}

</body>

</html>

Search Creators…. Page 74

 21CS62 | Full Stack Django Development|

Step-09: Configure URLs

• Open the urls.py file inside your student_course_registration_app and define your URLs:

from django.urls import path

from . import views

urlpatterns = [

path('index/', views.index, name='index'),

path('register-student/', views.register_student, name='register_student'),

path('register-course/', views.register_course, name='register_course'),

path('student-list/<int:course_id>/', views.student_list, name='student_list'),

Search Creators…. Page 75

 21CS62 | Full Stack Django Development|

Step-09: Update project URLs

• Open the urls.py file inside your project and include the URLs from the
student_course_registration_app:

Search Creators…. Page 76

 21CS62 | Full Stack Django Development|

Step-10: Make Migration for check Models saved or not into the database

Step-10: Migrate To Save the Models into database

Step-07: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/index/

Final Output By Clicking Register Student and Register Course

Search Creators…. Page 77

 21CS62 | Full Stack Django Development|

Fig: Index Screen

Fig: Student Register Screen

Search Creators…. Page 78

 21CS62 | Full Stack Django Development|

Fig: Course Register Screen

Fig: Students Register Particular Courses Screen [You can Check as You Register
Courses]

Search Creators…. Page 79

 21CS62 | Full Stack Django Development|

Experiment-08

For student and course models created in Lab experiment for Module2, register admin

interfaces, perform migrations and illustrate data entry through admin forms.

Step-01: Register models in the admin site

from django.contrib import admin

from .models import Course, Student

@admin.register(Course)

class CourseAdmin(admin.ModelAdmin):

list_display = ('name', 'description')

@admin.register(Student)

class StudentAdmin(admin.ModelAdmin):

list_display = ('first_name', 'last_name', 'email')

filter_horizontal = ('courses',)

• In this code, we've registered the Course and Student models with the Django admin site.

Search Creators…. Page 80

 21CS62 | Full Stack Django Development|

• We've also specified the fields to be displayed in the list view for each model using the
list_display attribute.
• For the StudentAdmin class, we've added the filter_horizontal attribute to display the
courses field (which is a many-to-many relationship) as a horizontal filter in the admin
interface.

Step-02: Create and apply migrations

python manage.py makemigrations

python manage.py migrate

Step-03: Create a superuser

• If you haven't already created a superuser for your project, you'll need to do so to access
the admin interface.
• In your terminal or command prompt, run the following command

python manage.py createsuperuser

Type Username: admin

Password:1234 [For Simply but your wish to create your own username and password]

Search Creators…. Page 81

 21CS62 | Full Stack Django Development|

Step-03: Access the admin interface

• Start the Django development server by running the following command:

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/admin/

Step-04: Log in to the admin interface

• Back in your web browser, enter the superuser credentials you just created and log in to
the admin interface.

Search Creators…. Page 82

 21CS62 | Full Stack Django Development|

Step-05: Add data through admin forms

Once you're logged in to the admin interface, you'll see the "Courses" and "Students" sections in
the left sidebar. Click on "Courses" to add a new course.

• Click on the "Add course" button in the top-right corner.

• Fill in the "Name" and "Description" fields for the new course.
• Click the "Save" button to create the new course.

Next, click on "Students" in the left sidebar to add a new student.

• Click on the "Add student" button in the top-right corner.

• Fill in the "First name", "Last name", and "Email" fields for the new student.
• In the "Courses" section, select the courses you want to enroll the student in by checking
the appropriate boxes.
• Click the "Save" button to create the new student.

You can repeat these steps to add more courses and students through the admin interface.
Additionally, you can view, edit, and delete existing courses and students from the admin
interface.

Final Output

Fig: Admin Main Screen

Search Creators…. Page 83

 21CS62 | Full Stack Django Development|

Fig: Admin Course Screen

Fig: Admin Student Screen

Search Creators…. Page 84

 21CS62 | Full Stack Django Development|

Experiment-09

Develop a Model form for student that contains his topic chosen for project, languages
used and duration with a model called project.

Step 1: Use an existing app i.e. student_course_registration_app

Step 2: Open the models.py file in the projects app and define the Project model.

class Project(models.Model):

topic = models.CharField(max_length=100, default='') # Added default value for topic

languages_used = models.CharField(max_length=100, default='')

duration = models.IntegerField(default=0)

def __str__(self):

return self.topic

Search Creators…. Page 85

 21CS62 | Full Stack Django Development|

Step 3: Create and apply migrations to create the necessary database tables.

python manage.py makemigrations

python manage.py migrate

Step 4: Create a forms.py file in the projects app and define a ProjectForm based on the
Project model.

class ProjectForm(forms.ModelForm):

class Meta:

model = Project

fields = ('topic', 'languages_used', 'duration')

widgets = {

'topic': forms.TextInput(attrs={'class': 'form-control'}),

'languages_used': forms.TextInput(attrs={'class': 'form-control'}),

'duration': forms.TextInput(attrs={'class': 'form-control'}),

Search Creators…. Page 86

 21CS62 | Full Stack Django Development|

Step 5: In views.py view function, import the ProjectForm and handle the form submission.

from .forms import ProjectForm

def register_project(request):

if request.method == 'POST':

form = ProjectForm(request.POST)

if form.is_valid():

project = form.save()

# Redirect to a success page or another view

return redirect('index')

#return redirect('project_detail', project_id=project.pk)

else:

form = ProjectForm()

return render(request, 'registration/register_project.html', {'form': form})

Search Creators…. Page 87

 21CS62 | Full Stack Django Development|

Step 6: In views.py index function, add the projects Objects for Displaying the Register
Projects .

def index(request):

courses = Course.objects.all()

projects = Project.objects.all()

return render(request, 'registration/index.html', {

'courses': courses,

'projects': projects,

})

Search Creators…. Page 88

 21CS62 | Full Stack Django Development|

Step 7: Create an HTML template file register_project.html in the templates/registration/

directory and render the form.

<!-- create_project.html -->

{% extends 'base.html' %}

{% block content %}

<div class="container my-3">

<h1>Create Project</h1>

<form method="post">

{% csrf_token %}

<div class="form-group">

<label for="id_topic">Topic:</label>

{{ form.topic }}

</div>

<div class="form-group">

<label for="id_languages_used">Languages Used:</label>

{{ form.languages_used }}

</div>

<div class="form-group">

<label for="id_duration">Duration:</label>

{{ form.duration }}

</div>

Search Creators…. Page 89

 21CS62 | Full Stack Django Development|

<button type="submit" class="btn btn-primary">Submit</button>

</form>

</div>

{% endblock %}

Step 8: add the index.html to show the registered projects

<h1 class="mt-5 my-5">Projects</h1>

<ul class="list-group mt-3">

{% for project in projects %}

<li class="list-group-item">

<a href="{% url 'project_student_list' project.id %}">{{ project.topic }}</a>

</li>

{% endfor %}

</ul>

Search Creators…. Page 90

 21CS62 | Full Stack Django Development|

• Add the register_student.html to this is Student can Register the Created Project

<div class="form-group">

{{ form.project.label_tag }}

{{ form.project }}

{{ form.project.errors }}

</div>

Search Creators…. Page 91

 21CS62 | Full Stack Django Development|

Step 9: Add a URL pattern for the register_project in your urls.py file

path('projects_register/', views.register_project, name='register_project'),

Step-10: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/index/

Search Creators…. Page 92

 21CS62 | Full Stack Django Development|

Final Output By Clicking Register Project and Register Student

Fig: Home Page Screen

Search Creators…. Page 93

 21CS62 | Full Stack Django Development|

Fig: Project Creation Screen

Fig: Project Successfully Creation Screen

Search Creators…. Page 94

 21CS62 | Full Stack Django Development|

Fig: Student Register the Project

Fig: Student Registered Particular Projects

Search Creators…. Page 95

 21CS62 | Full Stack Django Development|

Experiment-10
For students enrolment developed in Module 2, create a generic class view which
displays list of students and detail view that displays student details for any selected
student in the list.

Step-1: First, let's create models for Student and Course if you haven't already:

Models.py

class Student(models.Model):
first_name = models.CharField(max_length=255, default='')
last_name = models.CharField(max_length=255, default='')
email = models.EmailField(unique=True, default='')
courses = models.ManyToManyField(Course, related_name='students',
blank=True)
project = models.ManyToManyField('Project', related_name='students',
blank=True)

Search Creators…. Page 96

 21CS62 | Full Stack Django Development|

Step-2: Next, create views for the list and detail views and import necessary packages:

from django.views.generic import ListView, DetailView

class StudentListView(ListView):

model = Student

template_name = 'registration/stu_list.html'

context_object_name = 'students'

class StudentDetailView(DetailView):

model = Student

template_name = 'registration/student_detail.html'

context_object_name = 'student'

• In the StudentListView, we've overridden the get_queryset method to filter

the students based on the course_id parameter in the URL. If the course_id is

Search Creators…. Page 97

 21CS62 | Full Stack Django Development|

provided, it will return the students associated with that course; otherwise, it
will return all students.

Step-3: Now, let's create the templates:

stu_list.html

{% extends 'base.html' %}

{% block content %}

<h1>Students</h1>

<ul>

{% for student in students %}

<li>

<a href="{% url 'student_detail' student.pk %}">{{ student.first_name }} {{

student.last_name }}</a>

</li>

{% endfor %}

</ul>

{% endblock %}

Search Creators…. Page 98

 21CS62 | Full Stack Django Development|

student_detail.html

{% extends 'base.html' %}

{% block content %}

<div class="container my-5">

<div class="row">

<div class="col-md-6 offset-md-3">

<div class="card">

<div class="card-body">

<h1 class="card-title"> Name: {{ student.first_name }} {{ student.last_name }}</h1>

<h1 class="card-title">Email: {{ student.email }}</h1>

</div>

</div>

Search Creators…. Page 99

 21CS62 | Full Stack Django Development|

</div>

</div>

</div>

{% endblock %}

Search Creators…. Page 100

 21CS62 | Full Stack Django Development|

Step-4: add the URL patterns:

path('students/', views.StudentListView.as_view(), name='student_list_all'),

path('students/<int:pk>/', views.StudentDetailView.as_view(), name='student_detail'),

Step-5: add Index.html For showing the Students In Main Page:

Index.html

<h1 class="mt-5 my-5">Students</h1>

<ul class="list-group mt-3">

{% for student in students %}

<li class="list-group-item">

<a href="{% url 'student_detail' student.pk %}">{{ student.first_name }} {{

student.last_name }}</a>

</li>

{% endfor %}

Search Creators…. Page 101

 21CS62 | Full Stack Django Development|

</ul>

Step-6: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/index/

Search Creators…. Page 102

 21CS62 | Full Stack Django Development|

Final Output By Clicking Register Project and Register Student

Fig: Main Screen

Fig: List View of Students Screen

Search Creators…. Page 103

 21CS62 | Full Stack Django Development|

Fig: Detailed View of Student Screen

Search Creators…. Page 104

 21CS62 | Full Stack Django Development|

Experiment-11

Develop example Django app that performs CSV and PDF generation for any models
created in previous laboratory component.

Step-01: This app will be created in the Django project we made earlier.

Step-02: Add the app to INSTALLED_APPS

Open the settings.py file in your project's directory (e.g., fullstack_project/settings.py).

Locate the INSTALLED_APPS list and add the name of your new app to the list:

Search Creators…. Page 105

 21CS62 | Full Stack Django Development|

Step-03: Create models

• Open the models.py file inside the student_course_registration_app and define your
models:

from django.db import models

class Book(models.Model):

title = models.CharField(max_length=200)

author = models.CharField(max_length=200)

publication_date = models.DateField()

def __str__(self):

return self.title

Search Creators…. Page 106

 21CS62 | Full Stack Django Development|

Step-04: Create a views.py file in your books app and define the views for generating CSV
and PDF files

import csv

from django.http import HttpResponse

from django.template.loader import get_template

from xhtml2pdf import pisa

from .models import Book

def export_books_csv(request):

response = HttpResponse(content_type='text/csv')

response['Content-Disposition'] = 'attachment; filename="books.csv"'

writer = csv.writer(response)

writer.writerow(['Title', 'Author', 'Publication Date'])

books = Book.objects.all().values_list('title', 'author', 'publication_date')

for book in books:

writer.writerow(book)

return response

def export_books_pdf(request):

books = Book.objects.all()

template_path = 'book_list.html'

context = {'books': books}

Search Creators…. Page 107

 21CS62 | Full Stack Django Development|

response = HttpResponse(content_type='application/pdf')

response['Content-Disposition'] = 'attachment; filename="books.pdf"'

template = get_template(template_path)

html = template.render(context)

pisa_status = pisa.CreatePDF(

html, dest=response)

if pisa_status.err:

return HttpResponse('We had some errors <pre>' + html + '</pre>')

return response

Search Creators…. Page 108

 21CS62 | Full Stack Django Development|

Step-04: In your books app, create a templates directory and an html file for rendering the
PDF:

books/

templates/

books/

book_list.html

book_list.html

<!DOCTYPE html>

<html>

<head>

<title>Book List</title>

<style>

body {

font-family: Arial, sans-serif;

table {

border-collapse: collapse;

width: 100%;

th, td {

padding: 8px;

Search Creators…. Page 109

 21CS62 | Full Stack Django Development|

text-align: left;

border-bottom: 1px solid #ddd;

</style>

</head>

<body>

<h1>Book List</h1>

<table>

<thead>

<tr>

<th>Title</th>

<th>Author</th>

<th>Publication Date</th>

</tr>

</thead>

<tbody>

{% for book in books %}

<tr>

<td>{{ book.title }}</td>

<td>{{ book.author }}</td>

<td>{{ book.publication_date }}</td>

Search Creators…. Page 110

 21CS62 | Full Stack Django Development|

</tr>

{% endfor %}

</tbody>

</table>

</body>

</html>

Search Creators…. Page 111

 21CS62 | Full Stack Django Development|

Step-05: add the URL patterns and import Necessary Packages:

from django.urls import path

from books.views import export_books_csv, export_books_pdf

urlpatterns = [

path('books/export/csv/', export_books_csv, name='export_books_csv'),

path('books/export/pdf/', export_books_pdf, name='export_books_pdf'),

Step-06: Install the xhtml2pdf library for generating PDF files:

pip install xhtml2pdf

Search Creators…. Page 112

 21CS62 | Full Stack Django Development|

Step-07: Create the book titles and author and publication date

Django Shell

• If you just want to create some sample data for testing or development purposes, you can
run the code in the Django shell as shown in the previous example. This is a quick and
easy way to create objects interactively.

Data Migration

• If you want to include the book data as part of your project's initial data setup, you can
create a data migration. Here's how you can do it

Run the following command to create a new data migration

python manage.py makemigrations books –empty

• This will create a new empty migration file in the books/migrations/ directory.
• Open the newly created migration file (e.g., books/migrations/0002_auto_<...>.py) and
add the code to create the book objects in the operations list of the Migration class.

Search Creators…. Page 113

 21CS62 | Full Stack Django Development|

from django.db import migrations

def create_book_data(apps, schema_editor):

Book = apps.get_model('books', 'Book')

Book.objects.bulk_create([

Book(title='To Kill a Mockingbird', author='Harper Lee', publication_date='1960-07-11'),

Book(title='1984', author='George Orwell', publication_date='1949-06-08'),

Book(title='Pride and Prejudice', author='Jane Austen', publication_date='1813-01-28'),

Book(title='The Great Gatsby', author='F. Scott Fitzgerald', publication_date='1925-04-10'),

Book(title='The Catcher in the Rye', author='J.D. Salinger', publication_date='1951-07-16'),

])

class Migration(migrations.Migration):

dependencies = [

('books', '0001_initial'),

operations = [

migrations.RunPython(create_book_data),

Run the following command to apply the data migration

python manage.py migrate

• This will create the book objects in your database.

Search Creators…. Page 114

 21CS62 | Full Stack Django Development|

Step-08: Custom Script

• If you need to create the book data programmatically (e.g., during deployment or as part
of a data import process), you can create a custom Python script and run it as needed.
• Create a new Python file (e.g., create_book_data.py) in your project's root directory, and
add the code to create the book objects:

import os

os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'fullstack_project.settings')

import django

django.setup()

from books.models import Book

Book.objects.bulk_create([

Book(title='To Kill a Mockingbird', author='Harper Lee', publication_date='1960-07-11'),

Book(title='1984', author='George Orwell', publication_date='1949-06-08'),

Book(title='Pride and Prejudice', author='Jane Austen', publication_date='1813-01-28'),

Book(title='The Great Gatsby', author='F. Scott Fitzgerald', publication_date='1925-04-

10'),

Book(title='The Catcher in the Rye', author='J.D. Salinger', publication_date='1951-07-

16'),

])

Search Creators…. Page 115

 21CS62 | Full Stack Django Development|

Run the script using the following command:

python create_book_data.py

Step-09: Update project URLs

• Open the urls.py file inside your project and include the URLs from the book app:

Search Creators…. Page 116

 21CS62 | Full Stack Django Development|

Step-09: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/books/export/csv/

Final Output By Clicking Register Project and Register Student

Fig: CSV File Download Screen

Search Creators…. Page 117

 21CS62 | Full Stack Django Development|

• Type or copy this http://127.0.0.1:8000/books/export/pdf/

Fig: PDF File Download Screen

Search Creators…. Page 118

 21CS62 | Full Stack Django Development|

Experiment-12

Develop a registration page for student enrolment as done in Module 2 but without page
refresh using AJAX.

Step-01: This app will be created in the Django project we made earlier.

Step-02: Add the app to INSTALLED_APPS

Open the settings.py file in your project's directory (e.g., fullstack_project/settings.py).

Locate the INSTALLED_APPS list and add the name of your new app to the list:

Search Creators…. Page 119

 21CS62 | Full Stack Django Development|

Step-03: Create models

• Open the models.py file inside the registration app and define your models:

from django.db import models

# Create your models here.

class Student(models.Model):

first_name = models.CharField(max_length=255, default='')

last_name = models.CharField(max_length=255, default='')

email = models.EmailField(unique=True, default='')

Search Creators…. Page 120

 21CS62 | Full Stack Django Development|

Step-04: Create a views.py file in your app and define the views

from django.shortcuts import render, redirect

from django.http import JsonResponse

from .forms import StudentForm

def student(request):

if request.method == 'POST':

form = StudentForm(request.POST)

if form.is_valid():

student = form.save()

# You can perform additional operations here, like sending an email, etc.

return JsonResponse({'success': True})

else:

form = StudentForm()

return render(request, 'register_student.html', {'form': form})

Search Creators…. Page 121

 21CS62 | Full Stack Django Development|

Step-05: Create a forms.py file in your app and define the forms

from django import forms

from .models import Student

class StudentForm(forms.ModelForm):

class Meta:

model = Student

fields = ['first_name', 'last_name', 'email']

widgets = {

'first_name': forms.TextInput(attrs={'class': 'form-control'}),

'last_name': forms.TextInput(attrs={'class': 'form-control'}),

'email': forms.EmailInput(attrs={'class': 'form-control'}),

Search Creators…. Page 122

 21CS62 | Full Stack Django Development|

Step-06: In your app, create a templates directory and an html file

register_student.html

{% load static %}

<!DOCTYPE html>

<html>

<head>

<title>Student Registration</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="{% static 'js/jquery.min.js' %}"></script>

</head>

<body>

<div class="container">

<h1>Student Registration</h1>

<form id="student-form" method="post">

{% csrf_token %}

{% for field in form %}

<div class="form-group">

{{ field.label_tag }}

{{ field }}

{% if field.help_text %}

<small class="form-text text-muted">{{ field.help_text }}</small>

{% endif %}

{% for error in field.errors %}

<div class="alert alert-danger">{{ error }}</div>

Search Creators…. Page 123

 21CS62 | Full Stack Django Development|

{% endfor %}

</div>

{% endfor %}

<button type="submit" class="btn btn-primary">Submit</button>

</form>

<div id="response"></div>

</div>

<script>

$(document).ready(function() {

$('#student-form').on('submit', function(e) {

e.preventDefault();

var formData = $(this).serialize();

$.ajax({

type: 'POST',

url: '{% url "student" %}',

data: formData,

success: function(response) {

if (response.success) {

$('#response').html('<div class="alert alert-success">Student registered

successfully.</div>');

$('#student-form')[0].reset();

} else {

$('#response').html('<div class="alert alert-danger">An error occurred. Please

try again.</div>');

},

Search Creators…. Page 124

 21CS62 | Full Stack Django Development|

error: function(xhr, errmsg, err) {

$('#response').html('<div class="alert alert-danger">An error occurred: ' +

xhr.status + ' ' + xhr.responseText + '</div>');

});

});

});

</script>

</body>

</html>

Search Creators…. Page 125

 21CS62 | Full Stack Django Development|

Step-07: Update app URLs

# project/urls.py

from django.urls import path

from books.views import export_books_csv, export_books_pdf

urlpatterns = [

path('books/export/csv/', export_books_csv, name='export_books_csv'),

path('books/export/pdf/', export_books_pdf, name='export_books_pdf'),

Step-08: Update project URLs

• Open the urls.py file inside your project and include the URLs from the registration app:

Search Creators…. Page 126

 21CS62 | Full Stack Django Development|

Step-09: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/student/

Fig: Student Registration Screen

Search Creators…. Page 127

 21CS62 | Full Stack Django Development|

Fig: Student Registration Success Message Screen

Search Creators…. Page 128

 21CS62 | Full Stack Django Development|

Experiment-13

Develop a search application in Django using AJAX that displays courses enrolled by a
student being searched.

Step-01: Use an existing app i.e. student_course_registration_app

Step-02: Create View Function in a student_course_registration_app views.py

def search_students(request):

is_ajax = request.headers.get('X-Requested-With') == 'XMLHttpRequest'

if is_ajax:

query = request.GET.get('query', '')

students = Student.objects.filter(first_name__icontains=query) |
Student.objects.filter(last_name__icontains=query)

results = []

for student in students:

student_data = {

'id': student.id,

'name': f"{student.first_name} {student.last_name}",

'email': student.email,

'courses': [course.name for course in student.courses.all()]

results.append(student_data)

Search Creators…. Page 129

 21CS62 | Full Stack Django Development|

return JsonResponse({'results': results})

return render(request, 'registration/search.html')

Step-02: Create Templates in a student_course_registration_app

Registration/search.html

{% load static %}

<!DOCTYPE html>

<html>

<head>

<title>Search Students</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$.ajaxSetup({

Search Creators…. Page 130

 21CS62 | Full Stack Django Development|

headers: {

'X-CSRFToken': '{{ csrf_token }}'

});

$(document).ready(function() {

$('#search-input').on('input', function() {

var query = $(this).val();

$.ajax({

url: '{% url "search_students" %}',

data: {

'query': query

},

success: function(data) {

var results = data.results;

var html = '';

if (results.length > 0) {

html += '<ul class="list-group">';

for (var i = 0; i < results.length; i++) {

var student = results[i];

html += '<li class="list-group-item">';

html += '<h5>' + student.name + '</h5>';

html += '<p><strong>Email:</strong> ' + student.email + '</p>';

html += '<p><strong>Courses:</strong> ' + student.courses.join(', ') + '</p>';

html += '</li>';

Search Creators…. Page 131

 21CS62 | Full Stack Django Development|

html += '</ul>';

} else {

html += '<p>No students found.</p>';

$('#search-results').html(html);

});

});

});

</script>

</head>

<body>

{% csrf_token %}

<div class="container">

<h1>Search Students</h1>

<input type="text" id="search-input" class="form-control" placeholder="Search for a

student...">

<div id="search-results"></div>

</div>

</body>

</html>

Search Creators…. Page 132

 21CS62 | Full Stack Django Development|

• Very important to add the all The necessary AJAX scripts we provided

Step-03: Update app URLs

• Open the urls.py file inside your app and include the URLs

Search Creators…. Page 133

 21CS62 | Full Stack Django Development|

Step-04: Makemigrations and migrate if any changes are made in your application eg.
Models etc..

Step-05: Run the development server

• In the VS Code terminal, navigate to your Django project's directory (the one containing
manage.py).
• Run the development server

python manage.py runserver

• Open your web browser and visit http://127.0.0.1:8000/.

• Type or copy this http://127.0.0.1:8000/search/

Search Creators…. Page 134

 21CS62 | Full Stack Django Development|

Fig: Before Search Result contains only Search Bar Screen

Fig: Search Screen

Search Creators…. Page 135