Introduction to Software

Engineering
Implementing a Web App Using Git
and GitHub for version control
(Flask)
 Introduction

• What is Web Framework? Web Application Framework or

simply Web Framework represents a collection of libraries and
modules that enables a web application developer to write
applications without having to bother about low-level details
such as protocols, thread management etc.

• What is Flask? Flask is a lightweight web application

framework written in Python.
 Objectives
1. Understand how to set up a Flask environment and install Flask using Python and
pip.

2. Understand the Basic Structure of a Flask Application

3. Learn How to Handle Routing in Flask

4. Discover how Flask uses routing to map URLs to Python functions, allowing users
to navigate between pages.

5. Integrate Flask with HTML Templates

6. Learn how to render HTML templates with Flask using Jinja2, Flask's template
engine.
 Flask Installation
open cmd as Administrator and command :

1- pip install virtualenv

installs virtualenv.
Add sudo before pip on Linux/Mac OS. If you are on Windows, log in as
Administrator.

Once installed, new virtual environment is created in a folder.

2- mkdir newproj
cd newproj
virtualenv venv
 Flask Installation
3- To activate corresponding environment,
On Windows, write the following command :
venv\scripts\activate

on Linux/OS X, write the following command :

venv/bin/activate

We are now ready to install Flask in this environment.

4- pip install Flask

 Flask Installation
In order to test Flask installation,
1- Create new file named Hello.py and type the following code inside :

from flask import Flask

app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World'
if __name__ == '__main__':
app.run()

2- Run the following commands in the newproj directory:

venv\Scripts\activate
Python Hello.py
You should see Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
 Routing
• In Flask, routing is like giving your web app
directions. When someone visits your website, they
go to a specific page by entering a URL. Flask uses
routing to decide what to show on different pages
based on the URL.

• Think of it like this: if your website was a house, the

URL would be the address, and routing tells you
which room to go to!
 Routing
Example

a) Create Flask project as mentioned before and create

a new Python file called app.py.

b)Then inside that file, write the following code:

 Routing
from flask import Flask
# Create a new Flask app app.route(): This tells Flask which URL to listen to.
app = Flask(__name__) Each route is like a different room in your house,
# Route 1: Home Page and each room shows different content.
@app.route('/') /: This is the home page route (like the front door
def home(): of a house). When someone visits your website’s
return 'Welcome to the Home Page!'
homepage, they see what’s in the home()
# Route 2: About Page
@app.route('/about')
function.
def about(): /about: This is another route for the "About
return 'This is the About Page!' Page." It’s like telling the person to go to a
# Route 3: Contact Page different room where they can learn more about
@app.route('/contact') your website.
def contact(): /contact: This route shows the "Contact Page"
return 'Contact us at [email protected]'
with an email address. It’s like a room where you
# Run the Flask app
if __name__ == '__main__':
tell people how to reach you.
app.run()
 Routing
c) Run the app using these commands in the project
directory:

venv\Scripts\activate

Python app.py

• Done, Go to the url shown and try the different

routes (/about, /contact).
 Render HTML files
• you can also open and serve HTML files to
make your web pages look better and more
interactive. Instead of just returning plain
text, you can use HTML templates to display
structured web pages.
 Render HTML files
a) Create Flask project as mentioned before and
create the project structure as :
• app.py
• templates (folder)
• home.html
• about.html
• contact.html
 Render HTML files
b) Create HTML Files and write suitable HTML
content for each to be shown.
c) Inside app.py write the following code :
from flask import Flask, render_template # Route 3: Contact Page (serves
contact.html)
# Create a new Flask app @app.route('/contact')
app = Flask(__name__) def contact():
return
# Route 1: Home Page (serves home.html) render_template('contact.html')
@app.route('/')
def home(): # Run the Flask app
return render_template('home.html') if __name__ == '__main__':
app.run(debug=True)
# Route 2: About Page (serves about.html)
@app.route('/about') render_template(): This is like telling Flask,
def about(): "Please open this HTML file and show it on the
screen." It looks inside the templates folder and
return render_template('about.html')
shows the content from the HTML file.
 Render HTML files
d) Run the app using these commands in the
project directory:
venv\Scripts\activate
Python app.py
 Send data through a form
a) Create Flask project as mentioned before and
create the project structure as :
• app.py
• templates (folder)
• form.html
• result.html
 Send data through a form
b) Create Flask project as mentioned before and
create the project structure as :
• app.py
• templates (folder)
• form.html
• result.html
form.html: The HTML form where users input their data.
result.html: The page that shows the data entered by the user.
app.py: The Python file that contains the Flask code to handle the form
submission and redirect.
 Send data through a form
b) Create the HTML Form (form.html)
<html>
<head>
</head>
<body>
<h1>Fill in the Form</h1>
<!-- Form to collect name and email -->
<form action="/submit" method="POST">
<!-- Input field for name -->
<input type="text" id="name" name="name"><br><br>

<!-- Input field for email -->

<input type="email" id="email" name="email"><br><br>
<!-- Submit button to send the form data -->
<input type="submit" value="Submit">
</form>
</body>
</html>
 Send data through a form
c) Create the HTML Form (form.html)
<html>
<head> • The form collects name and
</head> email from the user.
<body>
<h1>Fill in the Form</h1>
<!-- Form to collect name and email --> • The action="/submit" tells the
<form action="/submit" method="POST"> form to send the data to the
<!-- Input field for name --> /submit route when the
<input type="text" id="name" name="name"><br><br> "Submit" button is clicked.

<!-- Input field for email -->

<input type="email" id="email" name="email"><br><br> • method="POST" means the
<!-- Submit button to send the form data --> form will send the data behind
<input type="submit" value="Submit"> the scenes (not in the URL).
</form>
</body>
</html>
 Send data through a form
d) Create the Result Page (result.html)
<html>
<head> • {{ name }} used to show
</head> variable named name asssumed
<body> to be sent from route.
<h1>Form Submitted Successfully!</h1>
<p>Your name is: {{ name }}</p>
<p>Your email is: {{ email }}</p> • {{ email }} used to show variable
</body> named email asssumed to be
</html> sent from route.
 Send data through a form
e) Create the Flask App (app.py) • @app.route('/'): This is where
from flask import Flask, request, render_template
the form (from form.html) will
# Create the Flask app
app = Flask(__name__) show up. When you visit the
website, you’ll see the form.
# Route 1: Show the form
@app.route('/')
def form():
• @app.route('/submit',
return render_template('form.html') methods=['POST']): This is what
happens when the user clicks
# Route 2: Handle the form submission and show the result
@app.route('/submit', methods=['POST']) "Submit." Flask will Get the data
def submit(): from the form: name =
# Get the data from the form request.form['name'] and email
name = request.form['name']
= request.form['email'].
email = request.form['email']

# Pass the data to the result page

• Send the data to the next page
return render_template('result.html', name=name, email=email) (result.html, name=name,
email=email) using
# Run the app render_template(), This will fill
if __name__ == '__main__':
app.run(debug=True) in the {{ name }} and {{ email }}
placeholders on the result page.
 Send data through a form
d) Run the app using these commands in the
project directory:
venv\Scripts\activate
Python app.py

Open your web browser and go to http://localhost:5000/.

You’ll see the form.