FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF COMPUTER SCIENCE AND
ENGINEERING
FULLSTACK DEVELOPMENT
LABORATORY MANUAL
21CS62
For
B.E IN COMPUTER SCIENCE AND
ENGINEERING (CSE)
FULLSTACK DEVELOPMENT
DEPARTMENT OF CSE Page 1
FULLSTACK DEVELOPMENT 21CS62
Course Code 21CS62 CIE Marks 50
Teaching Hours/Week (L:T:P: S) 3:0:2:0 SEE Marks 50
Total Hours of Pedagogy 40 T + 20 P Total Marks 100
Credits 04 Exam Hours 03
Course Learning Objectives:
CLO 1.Explain the use of learning full stack web development.
CLO 2.Make use of rapid application development in the design of responsive web pages.
CLO 3.Illustrate Models, Views and Templates with their connectivity in Django for full
stack web development.
CLO 4.Demonstrate the use of state management and admin interfaces automation in
Django.
CLO 5.Design and implement Django apps containing dynamic pages with SQL databases.
Teaching-Learning Process (General Instructions)
These are sample Strategies, which teachers can use to accelerate the attainment of the
various course outcomes.
1. Lecturer method (L) does not mean only traditional lecture method, but different type
of teaching methods may be adopted to develop the outcomes.
2. Show Video/animation films to explain functioning of various concepts.
3. Encourage collaborative (Group Learning) Learning in the class.
4. Ask at least three HOT (Higher order Thinking) questions in the class, which promotes
critical thinking.
5. Adopt Problem Based Learning (PBL), which fosters students’ Analytical skills, develop
thinking skills such as the ability to evaluate, generalize, and analyze information
rather than simply recall it.
6. Topics will be introduced in a multiple representation.
7. Show the different ways to solve the same problem and encourage the students to
come up with their own creative ways to solve them.
8. Discuss how every concept can be applied to the real world - and when that's possible,
it helps
improve the students' understanding.
Module-1: MVC based Web Designing
Web framework, MVC Design Pattern, Django Evolution, Views, Mapping URL to Views,
Working of Django URL Confs and Loose Coupling, Errors in Django, Wild Card patterns in
URLS.
Textbook 1: Chapter 1 and Chapter 3
Laboratory Component:
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
DEPARTMENT OF CSE Page 2
FULLSTACK DEVELOPMENT 21CS62
before as an offset of current date and time in server.
Teaching-Learning 1. Demonstration using Visual Studio Code
Process 2. PPT/Prezi Presentation for Architecture and Design
Patterns
3. Live coding of all concepts with simple examples
Module-2: Django Templates and Models
Template System Basics, Using Django Template System, Basic Template Tags and
Filters, MVT
Development Pattern, Template Loading, Template Inheritance, MVT Development Pattern.
Configuring Databases, Defining and Implementing Models, Basic Data Access, Adding
Model String Representations, Inserting/Updating data, Selecting and deleting objects,
Schema Evolution
Textbook 1: Chapter 4 and Chapter 5
Laboratory Component:
1. Develop a simple Django app that displays an unordered list of fruits and ordered list
of selected students for an event
2. 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.
3. 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.
Teaching-Learning 1. Demonstration using Visual Studio Code
Process 2. PPT/Prezi Presentation for Architecture and Design
Patterns
3. Live coding of all concepts with simple examples
4. Case Study: Apply concepts learnt for an Online Ticket
Booking System
Module-3: Django Admin Interfaces and Model Forms
Activating Admin Interfaces, Using Admin Interfaces, Customizing Admin Interfaces, Reasons
to use Admin Interfaces.
Form Processing, Creating Feedback forms, Form submissions, custom validation, creating
Model Forms, URLConf Ticks, Including Other URLConfs.
Textbook 1: Chapters 6, 7 and 8
Laboratory Component:
1. For student and course models created in Lab experiment for Module2, register
DEPARTMENT OF CSE Page 3
FULLSTACK DEVELOPMENT 21CS62
admin interfaces, perform migrations and illustrate data entry through admin forms.
2. Develop a Model form for student that contains his topic chosen for project, languages
used and
duration with a model called project.
Teaching-Learning 1. Demonstration using Visual Studio Code
Process 2. PPT/Prezi Presentation for Architecture and Design
Patterns
3. Live coding of all concepts with simple examples
Module-4: Generic Views and Django State Persistence
Using Generic Views, Generic Views of Objects, Extending Generic Views of objects, Extending
Generic Views.
MIME Types, Generating Non-HTML contents like CSV and PDF, Syndication Feed
Framework, Sitemap framework, Cookies, Sessions, Users and Authentication.
Textbook 1: Chapters 9, 11 and 12
Laboratory Component:
1. For students enrolment developed in Module 2, create a generic class view which
displays list of students and detailview that displays student details for any selected
student in the list.
2. Develop example Django app that performs CSV and PDF generation for any models
created in
previous laboratory component.
Teaching-Learning 1. Demonstration using Visual Studio Code
Process 2. PPT/Prezi Presentation for Architecture and Design
Patterns
3. Live coding of all concepts with simple examples
4. Project Work: Implement all concepts learnt for Student
Admission Management.
Module-5: jQuery and AJAX Integration in Django
Ajax Solution, Java Script, XHTMLHttpRequest and Response, HTML, CSS, JSON, iFrames,
Settings of Java Script in Django, jQuery and Basic AJAX, jQuery AJAX Facilities, Using jQuery
UI Autocomplete in Django
Textbook 2: Chapters 1, 2 and 7.
Laboratory Component:
1. Develop a registration page for student enrolment as done in Module 2 but without
page refresh using AJAX.
2. Develop a search application in Django using AJAX that displays courses enrolled by a
student
being searched.
DEPARTMENT OF CSE Page 4
FULLSTACK DEVELOPMENT 21CS62
Teaching-Learning 1. Demonstration using Visual Studio Code
Process PPT/Prezi Presentation for Architecture and Design
2.
Patterns
3. Live coding of all concepts with simple examples
4. Case Study: Apply the use of AJAX and jQuery for
development of EMI calculator.
Course outcome (Course Skill Set)
At the end of the course the student will be able to:
CO 1. Understand the working of MVT based full stack web development with Django. CO 2.
Designing of Models and Forms for rapid development of web pages.
CO 3. Analyze the role of Template Inheritance and Generic views for developing full stack
web applications.
CO 4. Apply the Django framework libraries to render nonHTML contents like CSV and PDF.
CO 5. Perform jQuery based AJAX integration to Django Apps to build responsive full stack
web applications,
Assessment Details (both CIE and SEE)
The weightage of Continuous Internal Evaluation (CIE) is 50% and for Semester End Exam
(SEE) is 50%. The minimum passing mark for the CIE is 40% of the maximum marks (20
marks). A student shall be deemed to have satisfied the academic requirements and earned
the credits allotted to each subject/ course if the student secures not less than 35% (18
Marks out of 50) in the semester-end examination (SEE), and a minimum of 40% (40 marks
out of 100) in the sum total of the CIE (Continuous Internal Evaluation) and SEE (Semester
End Examination) taken together
Continuous Internal Evaluation:
Three Unit Tests each of 20 Marks (duration 01 hour)
1. First test at the end of 5th week of the semester
2. Second test at the end of the 10th week of the semester
3. Third test at the end of the 15th week of the semester Two assignments each of 10
Marks
4. First assignment at the end of 4th week of the semester
5. Second assignment at the end of 9th week of the semester
DEPARTMENT OF CSE Page 5
FULLSTACK DEVELOPMENT 21CS62
Practical Sessions need to be assessed by appropriate rubrics and viva-voce method. This will
contribute to 20 marks.
Rubrics for each Experiment taken average for all Lab components – 15 Marks.
Viva-Voce– 5 Marks (more emphasized on demonstration topics)
The sum of three tests, two assignments, and practical sessions will be out of 100 marks and
will be
scaled down to 50 marks
(to have a less stressed CIE, the portion of the syllabus should not be common /repeated for
any of the methods of the CIE. Each method of CIE should have a different syllabus portion of
the course).
CIE methods /question paper has to be designed to attain the different levels of
Bloom’s taxonomy as per the outcome defined for the course.
Semester End Examination:
Theory SEE will be conducted by University as per the scheduled timetable, with common
question papers for the subject (duration 03 hours)
1. The question paper will have ten questions. Each question is set for 20 marks. Marks
scored shall be proportionally reduced to 50 marks
2. There will be 2 questions from each module. Each of the two questions under a
module (with a maximum of 3 sub-questions), should have a mix of topics under that
module.
The students have to answer 5 full questions, selecting one full question from each module
Suggested Learning Resources:
Textbooks
1. Adrian Holovaty, Jacob Kaplan Moss, The Definitive Guide to Django: Web
Development Done Right, Second Edition, Springer-Verlag Berlin and Heidelberg
GmbH & Co. KG Publishers, 2009
2. Jonathan Hayward, Django Java Script Integration: AJAX and jQuery, First Edition, Pack
Publishing, 2011
Reference Books
1. Aidas Bendroraitis, Jake Kronika, Django 3 Web Development Cookbook, Fourth
Edition, Packt Publishing, 2020
2. William Vincent, Django for Beginners: Build websites with Python and Django, First
Edition, Amazon Digital Services, 2018
3. Antonio Mele, Django3 by Example, 3rd Edition, Pack Publishers, 2020
4. Arun Ravindran, Django Design Patterns and Best Practices, 2nd Edition, Pack
Publishers, 2020.
DEPARTMENT OF CSE Page 6
FULLSTACK DEVELOPMENT 21CS62
5.Julia Elman, Mark Lavin, Light weight Django, David A. Bell, 1st Edition, Oreily
Publications, 2014
Weblinks and Video Lectures (e-Resources):
1. MVT architecture with Django: https://freevideolectures.com/course/3700/django-
tutorials
2. Using Python in Django: https://www.youtube.com/watch?v=2BqoLiMT3Ao
3. Model Forms with Django: https://www.youtube.com/watch?v=gMM1rtTwKxE
4. Real time Interactions in Django: https://www.youtube.com/watch?v=3gHmfoeZ45k
5. AJAX with Django for beginners: https://www.youtube.com/watch?v=3VaKNyjlxAU
Activity Based Learning (Suggested Activities in Class)/ Practical Based learning
Real world problem solving - applying the Django framework concepts and its integration
with AJAX to develop any shopping website with admin and user dashboards.
Laboratory Component:
1. Installation of Python, Django and Visual Studio code editors can be
DEPARTMENT OF CSE Page 7
FULLSTACK DEVELOPMENT 21CS62
demonstrated.
Installation of Python, Django and Visual Studio code editors:
Install Python:
Visit the official Python website and download the latest version of Python for Windows.
Run the installer and make sure to check the box that says "Add Python {version} to
PATH" during the installation process.
Follow the installation wizard instructions to complete the installation.
Install Visual Studio Code (VS Code):
Visit the official Visual Studio Code website and download the installer for Windows.
Run the installer and follow the installation wizard instructions.
After installation, launch VS Code.
Install the Python extension for Visual Studio Code:
Open Visual Studio Code.
Go to the Extensions view by clicking on the square icon on the sidebar or pressing
Ctrl+Shift+X.
Search for "Python" in the Extensions Marketplace.
Click on the "Install" button for the "Python" extension provided by Microsoft.
Install Django:
Installing PIP:
>>curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py
>>python get-pip.py
>>pip --version
Open a command prompt or PowerShell window.Install Django using pip, Python's
package manager, by running the following command
pip install Django
Verify installations:
To verify the installation of Python, open a command prompt or PowerShell window and
type
python --version
This should display the installed Python version.
DEPARTMENT OF CSE Page 8
FULLSTACK DEVELOPMENT 21CS62
To verify the installation of Django, type
django-admin –version
2. Creation of virtual environment, Django project and App should be
demonstrated.
DEPARTMENT OF CSE Page 9
FULLSTACK DEVELOPMENT 21CS62
Creation of virtual environment, Django project and App:
Create a Virtual Environment:
Open a command prompt or PowerShell window.
Navigate to the directory where you want to create your Django project.
Run the following command to create a virtual environment named "myenv" (you can
replace "myenv" with any name you prefer):
python -m venvmyenv
Activate the virtual environment by running:
myenv\Scripts\activate
Create a Django Project:
django-admin startprojectmyproject
Navigate into the project directory:
cd myproject
Create a Django App:
python manage.py startappmyapp
Configure Django Settings:
Open the settings.py file located inside the myproject folder.
Add the newly created app to the INSTALLED_APPS list
INSTALLED_APPS = [
...
'myapp',
]
Run Migrations:
While still in the myproject directory, run the following command to apply migrations to
your database:
python manage.py migrate
Verify Installation:
You can verify that everything is set up correctly by running the development server.
While in the myproject directory, run:
python manage.py runserver
DEPARTMENT OF CSE Page 10
FULLSTACK DEVELOPMENT 21CS62
Open a web browser and go to http://127.0.0.1:8000/. You should see the Django
welcome page, indicating that your project is set up correctly.
After creating a virtual environment, a Django project, and an app within that project. You
can now start building your Django web application.
3. Develop a Django app that displays current date and time in server.
django-admin startproject datetime_project
cd datetime_project
DEPARTMENT OF CSE Page 11
FULLSTACK DEVELOPMENT 21CS62
python manage.py startapp datetime_app
datetime_app /views.py:
from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.
from datetime import datetime
def current_datetime(request):
now = datetime.now()
ht="<html><body>It is now %s </body></html>"%now
return HttpResponse(ht)
datetime_app /urls.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.current_datetime,
name='current_datetime'),
]
datetime_project /urls.py:
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('datetime_app.urls')),
]
python manage.py runserver
http://localhost:8000/
OUTPUT:
DEPARTMENT OF CSE Page 12
FULLSTACK DEVELOPMENT 21CS62
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.
django-admin startproject datetime_offset_project
cd datetime_offset_project
DEPARTMENT OF CSE Page 13
FULLSTACK DEVELOPMENT 21CS62
python manage.py startapp datetime_offset
datetime_offset/views.py:
from django.http import HttpResponse
import datetime
def offset_datetime(request):
current_datetime = datetime.datetime.now()
offset_hours = 4
datetime_before_offset = current_datetime-
datetime.timedelta(hours=offset_hours)
datetime_after_offset = current_datetime +
datetime.timedelta(hours=offset_hours)
context = {
'current_datetime': current_datetime,
'datetime_before_offset': datetime_before_offset,
'datetime_after_offset': datetime_after_offset,
}
html="<html><body>
<h1>Current Date and Time:<p>%s</p></h1>
<h1>Date and Time Four Hours Before:<p>%s</p></h1>
<h1>Date and Time Four Hours Ahead: <p>%s</p></h1>
</body></html>"%
(current_datetime,datetime_before_offset,datetime_after_o
ffset)
return HttpResponse(html)
datetime_offset/urls.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.offset_datetime,
name='offset_datetime'),
]
datetime_offset_project/urls.py:
DEPARTMENT OF CSE Page 14
FULLSTACK DEVELOPMENT 21CS62
from django.contrib import admin
from django.urls import path,include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('datetime_offset.urls')),
]
python manage.py runserver
http://localhost:8000/
OUTPUT:
5. Develop a simple Django app that displays an unordered list of fruits and
ordered list of selected students for an event.
django-admin startproject event_project
DEPARTMENT OF CSE Page 15
FULLSTACK DEVELOPMENT 21CS62
cd event_project
python manage.py startapp event_app
event_app/views.py:
from django.shortcuts import render
defdisplay_lists(request):
fruits = ['Apple', 'Banana', 'Orange', 'Grapes', 'Pineapple']
selected_students = ['John', 'Emily', 'Michael', 'Sophia', 'Daniel']
context = {
'fruits': fruits,
'selected_students': selected_students,
}
return render(request, 'event_app/display_lists.html', context)
event_app/templates/event_app/display_lists.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fruits and Selected Students</title>
</head>
<body>
<h1>List of Fruits</h1>
<ul>
{% for fruit in fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>
<h1>List of Selected Students for Event</h1>
<ol>
{% for student in selected_students %}
<li>{{ student }}</li>
{% endfor %}
</ol>
</body>
</html>
event_app/urls.py:
from django.urls import path
from . import views
urlpatterns = [
path('', views.display_lists, name='display_lists'),
DEPARTMENT OF CSE Page 16
FULLSTACK DEVELOPMENT 21CS62
event_project/urls.py:
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('', include('event_app.urls')),
]
python manage.py runserver
http://localhost:8000/
OUTPUT:
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.
DEPARTMENT OF CSE Page 17
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 18
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 19
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 20
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 21
FULLSTACK DEVELOPMENT 21CS62
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.
DEPARTMENT OF CSE Page 22
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 23
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 24
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 25
FULLSTACK DEVELOPMENT 21CS62
OUTPUT:
DEPARTMENT OF CSE Page 26
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 27
FULLSTACK DEVELOPMENT 21CS62
8. For student and course models created in Lab experiment for Module2,
register admin interfaces, perform migrations and illustrate data entry
through admin forms.
DEPARTMENT OF CSE Page 28
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 29
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 30
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 31
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 32
FULLSTACK DEVELOPMENT 21CS62
9. Develop a Model form for student that contains his topic chosen for
project, languages used and duration with a model called project.
DEPARTMENT OF CSE Page 33
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 34
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 35
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 36
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 37
FULLSTACK DEVELOPMENT 21CS62
10. For students enrolment developed in Module 2, create a generic class view
which displays list of students and detailview that displays student details
for any selected student in the list.
DEPARTMENT OF CSE Page 38
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 39
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 40
FULLSTACK DEVELOPMENT 21CS62
11. Develop example Django app that performs CSV and PDF generation for
any models created in previous laboratory component.
CSV:
DEPARTMENT OF CSE Page 41
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 42
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 43
FULLSTACK DEVELOPMENT 21CS62
PDF:
DEPARTMENT OF CSE Page 44
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 45
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 46
FULLSTACK DEVELOPMENT 21CS62
12. Develop a registration page for student enrolment as done in Module 2 but
without page refresh using AJAX.
DEPARTMENT OF CSE Page 47
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 48
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 49
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 50
FULLSTACK DEVELOPMENT 21CS62
13. Develop a search application in Django using AJAX that displays courses
enrolled by a student being searched.
DEPARTMENT OF CSE Page 51
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 52
FULLSTACK DEVELOPMENT 21CS62
DEPARTMENT OF CSE Page 53
