4.

Run the application

🔹 What is Flask?  Use the command:

 python app.py
 Flask is a micro web framework for
Python. 5. Code to make the application run
 It follows the WSGI (Web Server
Gateway Interface) standard. if __name__ == '__main__':
 Provides tools, libraries, and patterns app.run(debug=True)
to help build web applications quickly and
easily. 6. Access the application via

 http://127.0.0.1:5000/
 Port is always 5000
🔹 Environment Setup

 Setting up a virtual environment helps

isolate dependencies. 🔹 Steps in Creating a Flask Application
 Install virtualenv using pip if not already
installed. Step 1: Importing Flask Modules

Activate a virtual environment:  Flask – Core class to create the Flask web
application.
 For macOS/Linux:  render_template – Loads and displays
 source venv/bin/activate HTML files from the templates folder.
 For Windows:
 venv\Scripts\activate Step 2: Creating a Flask App

Install Flask using pip:  Flask(__name__) initializes a Flask

application.
pip install flask
Step 3: Defining Routes

🔹 Hello World Application Example  @app.route('/') – When the user visits /,

the index() function runs.
1. Create a Python file (e.g., app.py) and  @app.route('/index') – Same function
import Flask runs when the user visits /index.
 render_template('index.html') – Loads
from flask import Flask and displays the index.html file from the
templates folder.
2. Initialize the Flask app

app = Flask(__name__)
🔹 How Flask Routes Work

3. Define a route and view function  A route connects a URL to a Python

function that returns a response (HTML
@app.route('/') pages).
def home():
return "Hello, World!"
Example route connections:  A function can have multiple routes
assigned to it.
http://localhost:5000/ → Loads index.html  Passing variables in URLs:
http://localhost:5000/index → Also loads
index.html Pass the name inputted:
http://localhost:5000/about → Loads
about.html @app.route('/user/<name>')
def greet(name):
return f"Hello, {name}!"
🔹 Route Functions
Pass the username:
def home():
return render_template('index.html') # View @app.route('/user/<username>')
function for home page (/ and /index routes) def show_user_profile(username):
return f'User: {username}'
def about():
return render_template('about.html') # View
function for about page (/about route) 🔹 URL Building

 The url_for() function builds URLs

🔹 Flask Project Folder Structure dynamically, avoiding hardcoded URLs.

📂 Project Folder
📄 app.py – Main Python file
📂 templates/ – Folder for HTML files 🔹 Views in Flask
📄 index.html
📄 about.html  Views are functions that handle
requests and generate responses.
 Flask looks for HTML files inside the
templates folder by default.

🔹 HTTP Methods in Flask

🔹 Summary of Flask Basics  Routes in Flask default to GET requests.

 Specify methods using methods
✔ Import Flask and create a web application. argument:
✔ Define routes to serve different HTML pages.
✔ Run the Flask app and access it via a browser. @app.route('/login', methods=['GET', 'POST'])

🔹 Static Files Handling in Flask

Routing in Flask
 Static files include CSS, JavaScript,
 Routes are URL patterns that define images, and fonts.
which functions execute when accessed.  These files are placed in the static/ folder.
 Defined using @app.route() decorator.

Serving Static Files

Multiple Routes & Dynamic URL Parameters
  Flask automatically serves static files  Use double curly braces {{ ... }} to render
stored in static/. variables in templates.
 Use {% ... %} for control structures like
📂 Example file structure: loops and conditionals.

static/
├── css/
│ ├── styles.css 🔹 Passing Data to Templates
├── img/
│ ├── logo.png Pass variables using render_template():
├── js/
│ ├── script.js @app.route('/')
def home():
Linking Static Files in HTML return render_template('index.html',
title="Welcome")
<link rel="stylesheet" href="{{ url_for('static',
filename='css/styles.css') }}"> Inside index.html:
<img src="{{ url_for('static',
filename='img/logo.png') }}" alt="Logo"> <h1>{{ title }}</h1>

🔹 Templates in Flask 🔹 Template Inheritance in Flask

Rendering Templates in Flask Base Template: base.html

 Templates are HTML files with  Contains reusable elements like

placeholders for dynamic content. navigation, footer, etc.
 Flask uses Jinja2 for template rendering.  Use the {% block ... %} and {% endblock
%} tags to define the dynamic content
Setting Up a Templates Directory block

 Flask looks for HTML files inside the <!DOCTYPE html>

templates/ folder. <html>
<head>
Rendering Templates Example <title>{% block title %}My Site{% endblock
%}</title>
Example usage in app.py: </head>
<body>
from flask import Flask, render_template <header>My Website Header</header>
<main>{% block content %}{% endblock
app = Flask(__name__) %}</main>
<footer>Footer Information</footer>
@app.route('/') </body>
def home(): </html>
return render_template('index.html')

if __name__ == '__main__': Extending Base Template in Another Page

app.run(debug=True) (index.html)

{% extends "base.html" %}
🔹 Jinja2 Template Syntax
{% block title %}Home Page{% endblock %}

{% block content %}
<h1>Welcome to My Website</h1>
{% endblock %}

🔹 Summary of Flask Features

✔ Flask is a micro web framework used for

building web applications in Python.
✔ Routes define how URLs map to functions in
Flask applications.
✔ Flask serves static files (CSS, JS, images) from
the static/ folder.
✔ Templates use Jinja2 for rendering HTML
with dynamic data.
✔ Template inheritance helps create modular
and maintainable applications.