0% found this document useful (0 votes)
42 views

Lab2 - Web Development

Uploaded by

s-tasneem.attia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
42 views

Lab2 - Web Development

Uploaded by

s-tasneem.attia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

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


• Let’s build a blog app with SQLite database

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.

You might also like