1.

Lab Objectives:
• Gain a general understanding of web development concepts and technolo-
gies.
• Learn the basics of the Flask framework for Python.
• Build a simple web application using Flask.
• Using Git and GitHub for version control

2. Introduction:
Web development encompasses the creation and maintenance of websites and
web applications. It involves a variety of technologies and disciplines, including
HTML, CSS, JavaScript for the front end, and various backend languages and
frameworks like Flask & Django (Python), Laravel (PHP), Node (Javascript),
.Net(C#), and Spring Boot (Java).
• Front End vs. Back End: The front end refers to the parts of a website
or application that users interact with directly, while the back end involves
the server-side operations that process and manage data.
• Why Web Development? Understanding web development is essential
for creating interactive and dynamic websites, making it a critical skill in
today’s digital world.
• What is Flask?: Flask is a lightweight web application framework in
Python. It’s designed to make getting started quick and easy, with the
ability to scale up to complex applications.
• Key Features of Flask: Simple and easy to learn, minimalistic design,
extensible with a wide variety of extensions.

3. Tools Required:
• Python 3.x installed on your machine. Download from Python.org
• A text editor or IDE of your choice (e.g., VS Code, PyCharm).

4. Lab Outline:
4.0 Quick overview on web development
4.1 Setting Up Your Flask Environment
• Create a new Python virtual environment and activate it.
1. install virtualenv tool: pip install virtualenv
2. create a virtual environment: virtualenv env
3. activate the virtual environment.
– For Mac: source env/bin/activate

1
 – For Windows: source \env\scripts\activate.bat
• Install Flask using pip: pip install flask ### 4.2 Creating Your
First Flask Application
• Initialize a Flask app in a new file named app.py
• Define a simple route for the homepage (/) that returns “Hello, World!”.
from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
return "<p>Hello, World!</p>"

4.3 Expanding Your Application

5. Further Reading/Resources:
• Simple blog app with Flask
• The Flask Mega-Tutorial
• Real Python
• How To Make a Web Application Using Flask in Python 3
• Book: Flask Web Development

6. Exercises:
Exercise 1: Develop a Flask application that displays a per-
sonalized greeting message to the user. The user’s name
should be dynamically obtained from the URL, and the
greeting message should randomly vary among several op-
tions.
Implementation steps:
1. Setup: Initialize a new Flask application.
2. Routing: Configure a dynamic route that accepts a username as a pa-
rameter from the URL (e.g., /greet/<username>).
3. Greeting Selection: Implement logic to randomly select a greeting mes-
sage from the following options: - “Hello username” - “Hey username” -
“Hi username”
4. Response Rendering: Display the personalized greeting message on the
web page.

2
Exercise 2: Create a web application with an HTML form
where users can submit their data. Use Flask to process the
form submission and display a customized response based
on the submitted data.
Implementation steps:
1. Form Creation: Design an HTML form that captures user information
(e.g., name, age, email).
2. Flask Handling: Set up Flask to handle the form’s POST request and
extract the submitted data.
3. Response Generation: Display a confirmation message or a summary
of the submitted information to the user after the form submission.

7. Assignment:
Simple Flask Calculator: Build a straightforward calculator
web application using Flask. The application should per-
form basic arithmetic operations like addition, subtraction,
multiplication, and division.
Requirements:
1. Functionality: Ensure the calculator can handle basic operations: addi-
tion, subtraction, multiplication, and division.
2. User Interface: Develop a user-friendly interface with input fields for
numbers and operation selection.
3. Result Display: Show the calculation result on the same page or a new
one upon submission.
4. Code Repository: Push your complete application code to a public
GitHub repository.
5. Documentation: Include a README.md file in your repository with:
• A brief description of the application.
• A screenshot showcasing the application interface.
6. Demonstration: Add a link to a video in the README.md file demon-
strating the application’s functionality. This video should provide a clear
walkthrough of the app in action, including inputting numbers, selecting
an operation, and displaying the result.

Submission Guidelines:
Ensure your GitHub repository is public and contains all the necessary files for
running the application. The README.md should be well-structured, providing
clear instructions on how to set up and use the calculator app, along with the
required screenshot and demonstration video link.