23CS11E/23IT11E-WEBFRAMEWORKSUSINGPYTHON

NATIONALENGINEERINGCOLLEGE,[Link],KOVILPATTI–628503
(AnAutonomousInstitution,AffiliatedtoAnnaUniversity–Chennai)

DEPARTMENTOFCOMPUTERSCIENCEANDENGINEERING& DEPARTMENT
OF INFORMATION TECHNOLOGY

23CS11E/23IT11E-WEB FRAMEWORKSUSINGPYTHON

Odd Semester-2025-2026
Laboratory Practice - 04
CO3:DesignanddevelopUIfordynamicwebapplicationsusingFlask.(CDL2)
CO6: Develop applications using Flask for real-world scenarios. (PDL2)

LabInstructionSheet
Exercise: 04Design and Implement a Single-Semester and Multiple-Semester CGPA Calculator
using DOM with Flask
ProblemStatement

Students currently in educational institutions often find it difficult to accurately calculate their CGPA,
especially when considering multiple subjects across single or multiple semesters. Manual calculations
are time-consuming, error-prone, and do not provide real-time results. There is a need for an interactive,
web-based solution that allows students to input their subject-wise grades semester-wise and instantly
calculate their CGPA. The system should be user-friendly, efficient, and capable of handling both
single-semester and multiple-semester CGPA calculations.

Objective:

 Enable students to calculate single-semester and multiple-semester CGPA based on

subject-wise grades.
 Provide a dynamic and interactive interface using DOM (Document Object Model) for
real-time input validation and result display.
 Integrate Flask as the backend framework to process data, handle calculations, and manage
application logic.
 Enhance students’ understanding of full-stack web development by combining client-side
scripting (DOM/JavaScript) with server-side processing (Flask/Python).
 Reduce manual calculation errors and improve the efficiency and usability of CGPA
calculation for educational institutions.
 23CS11E/23IT11E-WEBFRAMEWORKSUSINGPYTHON

ExpectedOutcome

Bytheendofthislab,thestudentwillbeableto:
1. Build a Flask application to calculate single-semester and multiple-semester CGPA.
2. Use DOM manipulation for dynamic, real-time input validation and result display.
3. Render templates dynamically using Jinja2.
4. Handle CGPA calculation logic efficiently on the backend with Flask/Python.
5. Provide a user-friendly interface for easy input of subject-wise grades.
6. Reduce manual calculation errors and improve usability for educational institutions.

Concept:
FlaskBasics
URL Routing: The process of connecting a URL to a Python function. In Flask, you define routes using
the @[Link]() decorator. This decorator takes a URL path as an argument. When a user visits that
URL, the associated function is executed.
Request Handling: Flask handles incoming HTTP requests and makes data from them available through
the request object. This object contains data like form data ([Link]), query parameters
([Link]), and uploaded files ([Link]).
Redirects: Redirects send the user to a different URL. The redirect() function is used for this. You often
use it after processing a form submission to prevent the userfrom resubmitting the form if they
refresh the page (this is known as the Post/Redirect/Get pattern).
RenderingTemplates:render_template()Usage
Therender_template()functionis usedto generate HTMLpagesfromtemplates. Ittakesthename of the
template file as its first argument and any additional arguments are passed to the template. This
allows you to dynamically inject data from your Python code into the HTML. For example,
render_template('[Link]', name='web') would make the variable name with the value 'web'
available inside [Link].
Jinja2TemplateEngine
Jinja2 is the template engine used with Flask. It allows developers to embed Python-like expressions
directly in HTML, making it possible to:

 Render pages dynamically.

 Populate data such as semester numbers or subject details from the backend.

 Reuse HTML templates to avoid redundancy.

This helps in creating a dynamic and responsive frontend integrated with Flask.
 23CS11E/23IT11E-WEBFRAMEWORKSUSINGPYTHON

SessionManagement
The session is a dictionary-like object that allows you to store data on the server side for a specific user
across multiple requests. Data stored in the session is encrypted and sent to the user as a cookie.
Flask requires you to set a secret key to enable session management. The secret key is used to sign
the session cookie, ensuring its integrity and security. You can access the session object like a
dictionary to store or retrieve data, for example, session['username'] = 'John'.

Session handling in Flask allows storing temporary data for a user while navigating through multiple
pages.

 Storing previous semester grades.

 Maintaining state for multi-semester calculations.

It helps in tracking user data across different interactions.

DOM-Document Object Model) Manipulation

The DOM is an interface that represents HTML elements of a webpage in a hierarchical structure,
allowing programming languages like JavaScript to interact with them. In this project, DOM
manipulation is used to:

 Dynamically create input fields for subjects and semesters based on user selection.

 Validate user inputs in real-time to prevent errors.

 Display CGPA results instantly without reloading the page.

This makes the application interactive and user-friendly.

Frontend Technologies
 HTML: Provides the structure of the web application, including input fields, buttons, and containers
for displaying results.
 CSS: Styles the webpage to make it visually appealing, adding colors, margins, and spacing for
better readability.
 JavaScript: Handles interactivity, communicates with the backend using asynchronous requests, and
manipulates the DOM to update input fields and results dynamically

Backend Logic
The backend, implemented in Python with Flask, handles all CGPA calculation logic:
 Receives grades and credits from the frontend.
 23CS11E/23IT11E-WEBFRAMEWORKSUSINGPYTHON
 Calculates total grade points by multiplying grades with credits.
 Divides total points by total credits to find the CGPA.
 Sends the calculated CGPA back to the frontend for display.
This ensures accurate, efficient, and reliable computation.
 23CS11E/23IT11E-WEBFRAMEWORKSUSINGPYTHON

ToolsRequired
 Python (v3.8+) – Programming language for backend development
 Flask (pip install flask) – Lightweight Python web framework for backend and routing.
 Openpyxl (pip install openpyxl) – For handling Excel worksheets (optional for exporting
results.
 Any Text Editor – VS Code, PyCharm, Sublime Text for writing code

Project Structure

CGPA_Calculator/
│── [Link]
│── templates/
│ ├── [Link]
│ └── [Link]
│── static/
│ └── [Link]
│── [Link]
Implementation:
Steps:
1. CreateafolderFlaskLabtokeepallyourflasklabworksandCreateavirtualenvironmentby
D:\FlaskLab>python –m venvenv_siteD:\
FlaskLab> .\env_stie\Scripts\activate
(env_site) D:\FlaskLab>
Ifalreadyhavethefolderandenvironmentthenjustactivate.

2. Create a Flask project folder Lab2_faulty_choice.

(env_site)D:\FlaskLab>mkdircgpa_calculator
(env_site) D:\FlaskLab>cdcgpa_calculator
(env_site) D:\FlaskLab\cgpa_calculator

3. InstallFlaskusing/oralreadyexistignore pip
install flask
andinstallopenpyxl
pipinstallflaskopenpyxl
 23CS11E/23IT11E-WEBFRAMEWORKSUSINGPYTHON

4) Create a project folder CGPA_Calculator, add [Link] as the backend, initialize Flask,
define '/' to render [Link] for input, define '/calculate' to receive grades and credits
and return the CGPA as JSON, and write logic to validate inputs and compute the overall
CGPA.

5) Create a folder named templates inside the project folder to store HTML files, and within it, add
[Link] for the single-semester CGPA calculator and [Link] for the multi-semester CGPA
calculator where students can input multiple semesters, subjects, grades, and credits dynamically.

In [Link], use JavaScript to dynamically generate semester blocks and input fields for grades and
credits based on the number of semesters, use dropdowns to ensure valid inputs, collect all data and send
it as a JSON POST request to the Flask backend, calculate the CGPA in the backend by dividing total
points by total credits and return it as JSON, and display the result dynamically in a div without
reloading the page for real-time feedback.
23CS11E/23IT11E-WEBFRAMEWORKSUSINGPYTHON
 23CS11E/23IT11E-WEBFRAMEWORKSUSINGPYTHON
6) Create a folder static to store CSS and images, add [Link] to style the pages, link it
in HTML using Flask’s url_for, run the Flask app with python [Link], and open
[Link] in a browser to test the single- and multiple-semester CGPA
calculator.

ExpectedOutput: