Introduction to Web development using Flask

Flask is a Python web framework used to build web applications and APIs. It is based on the WSGI (Web Server Gateway Interface) standard and uses the Jinja2 template engine for rendering dynamic content. Flask provides core web development features while allowing developers to add components as needed.

Installation

To install Flask (if not already installed), use the following command:

pip install flask

Getting Started With Flask

After installing Flask, one can create a basic web application by defining routes and running a local development server. Below is an example to understand how a Flask app works.

from flask import Flask     
app = Flask(__name__)   # Flask constructor 
  
# A decorator used to map URL to a function 
@app.route('/')       
def hello(): 
    return 'HELLO'
  
if __name__=='__main__': 
   app.run(debug=True) 

Output

Explanation:

• Flask(__name__): Creates the Flask app.
• @app.route('/'): Defines the home route (/).
• def hello(): creates a function that is bound with '/' route and returns "HELLO" when the root page is accessed.
• app.run(debug=True): runs the app in debug mode. It ensure that app is not need to restart manually if any changes are made in code.

Build Routes

Web frameworks provide routing technique so that user can remember the URLs. It is useful to access the web page directly without navigating from the Home page. It is done through the following route() decorator, to bind the URL to a function.

# decorator to route URL 
@app.route('/hello') 

# binding to the function of route 
def hello_world():     
    return 'hello world' 

Explanation: If a user visits http://localhost:5000/hello URL, the output of the hello_world() function will be rendered in the browser.

One alternate way of doing this is by using "add_url_rule()" function of an application object, it can also be used to bind URL with the function similar to the above example.

def hello_world():
    return ‘hello world’
  
app.add_url_rule(‘/’, ‘hello’, hello_world)

Variables

Variables are used to build a URL dynamically by adding the variable parts to the rule parameter. It is passed as keyword argument. Here's an example.

from flask import Flask 
app = Flask(__name__) 

@app.route('/hello/<name>') 
def hello_name(name): 
    return 'Hello %s!' % name 

if __name__ == '__main__': 
    app.run(debug = True) 

Output

Explanation: parameter of route() decorator contains the variable part attached to the URL '/hello' as an argument. Hence, if URL like "http://localhost:5000/hello/GeeksforGeeks" is entered then "GeeksforGeeks" will be passed to the hello() function as an argument.

Besides the default string type, Flask also supports int, float, and path (which allows slashes for directories). Flask's URL rules use Werkzeug’s routing module, ensuring unique URLs following Apache's conventions. Here's an example.

from flask import Flask 

app = Flask(__name__) 

@app.route('/blog/<int:postID>')
def show_blog(postID): 
    return 'Blog Number %d' % postID  

@app.route('/rev/<float:revNo>')
def revision(revNo): 
    return 'Revision Number %f' % revNo  

if __name__ == '__main__': 
    app.run(debug=True)

Run the application and type the following URLs in a browser- http://127.0.0.1:5000/blog/555

http://127.0.0.1:5000/rev/1.1

Explanation:

• /blog/555 captures 555 as an integer and returns "Blog Number 555".
• /rev/1.1 captures 1.1 as a float and returns "Revision Number 1.100000" (default float format).

Build a URL

Dynamic Building of the URL for a specific function is done using url_for() function. The function accepts the name of the function as first argument, and one or more keyword arguments. See this example

from flask import Flask, redirect, url_for
app = Flask(__name__)


@app.route('/admin')  # decorator for route(argument) function
def hello_admin():  # binding to hello_admin call
    return 'Hello Admin'


@app.route('/guest/<guest>')
def hello_guest(guest):  # binding to hello_guest call
    return 'Hello %s as Guest' % guest


@app.route('/user/<name>')
def hello_user(name):
    if name == 'admin':  # dynamic binding of URL to function
        return redirect(url_for('hello_admin'))
    else:
        return redirect(url_for('hello_guest', guest=name))


if __name__ == '__main__':
    app.run(debug=True)

To test this, save the above code and run through python shell and then open browser and enter the following URLs-http://localhost:5000/user/admin

http://localhost:5000/user/ABC

Explanation: The code has a function named user(name), accepts the value through input URL. It checks that the received argument matches the 'admin' argument or not. If it matches, then the function hello_admin() is called else the hello_guest() is called.

HTTP methods

Python Web Framework Flask support various HTTP protocols for data retrieval from the specified URL, these can be defined as

Serve HTML and Static Files

A web application often requires a static file such as javascript or a CSS file to render the display of the web page in browser. Usually, the web server is configured to set them, but during development, these files are served as static folder in your package or next to the module. See the example in JavaScript given below:

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == '__main__':
app.run(debug=True)

HTML File (index.html)

Create a Template folder "templates" in your project directory. This Template folder will contain all the HTML files of the project and they will be rendered through our flask app using render_template method.

<html> 

<head> 
    <script type = "text/javascript"
        src = "{{ url_for('static', filename = 'hello.js') }}" ></script> 
</head> 
    
<body> 
    <input type = "button" onclick = "sayHello()" value = "Say Hello" /> 
</body> 
    
</html> 

JavaScript file (hello.js)

Create a static folder that will contain all the javascript and CSS files. It will be sibling of the templates folder.

function sayHello() { 
    alert("Hello World") 
    } 

To serve this javascript code in a flask app, link it with a HTML file (index.html in this case) in the template folder using this line of code in the head section:

<script type = "text/javascript" src = "{{ url_for('static', filename = 'hello.js') }}" ></script>

Run the application by executing "python app.py" in the terminal and visit the development URL- http://127.0.0.1:5000

Output

Cookies

Cookie is a form of text file which is stored on a client's computer, whose purpose is to remember and track data pertaining to client's usage in order to improve the website according to the user's experience and statistic of webpage.

The Request object contains cookie's attribute. It is the dictionary object of all the cookie variables and their corresponding values. It also contains expiry time of itself. In Flask, cookie are set on response object.

app.py code

from flask import Flask, request, render_template, make_response

app = Flask(__name__) 
@app.route('/') 

def index(): 
    return render_template('index.html') 

@app.route('/setcookie', methods = ['POST', 'GET']) 
def setcookie(): 
    if request.method == 'POST': 
        user = request.form['nm'] 
        resp = make_response(render_template('cookie.html')) 
        resp.set_cookie('userID', user) 
        return resp 

@app.route('/getcookie') 
def getcookie(): 
    name = request.cookies.get('userID') 
    return '<h1>welcome '+name+'</h1>'
if __name__ == "__main__":
    app.run()

HTML code ( index.html )

<html> 
<body> 
    
    <form action = "/setcookie" method = "POST"> 
        <p><h3>Enter userID</h3></p> 
        <p><input type = 'text' name = 'nm'/></p> 
        <p><input type = 'submit' value = 'Login'/></p> 
    </form> 
        
</body> 
</html> 

HTML code ( cookie.html )

<html> 
    <body> 
        <a href="/getcookie">Click me to get Cookie</a> 
</body> 
</html> 

Run the application and visit http://127.0.0.1:5000 in your browser. The form submits to '/setcookie', where the set function stores a cookie named userID. The cookie.html page includes a link to the getcookie() function, which retrieves and displays the cookie value in the browser. Output snippets are below:

Enter user ID into the form and click "Login".

Click on "Click me to get Cookie"

"/getcookie" route takes the User ID from cookies and renders welcome along with it.

Sessions

Session is the time between a user logging in and logging out of a server. Session data is stored on the server in a temporary folder, and each user is assigned a unique session ID.

Session ID

The Session object is a dictionary that contains the key-value pair of the variables associated with the session. A SECRET_KEY is used to store the encrypted data on the cookies.

Example:

Session[key] = value // stores the session value
Session.pop(key, None) // releases a session variable

Other Important Flask Functions

1. redirect: used to return the response of an object and redirects the user to another target location with specified status code.

Syntax: Flask.redirect(location, statuscode, response)

Parameters:

• location: The URL to redirect to.
• statuscode (optional): HTTP status code (default is 302, which means "Found" or temporary redirect).
• response (optional): Used to modify the response before sending.

2. abort: used to handle the error in the code.

Syntax: Flask.abort(code)

The code parameter can take the following values to handle the error accordingly:

• 400: For Bad Request
• 401: For Unauthenticated
• 403: For Forbidden request
• 404: For Not Found
• 406: For Not acceptable
• 425: For Unsupported Media
• 429: Too many Requests

File Uploading

File Uploading needs an HTML form with enctype attribute and URL handler, that fetches file and saves the object to the desired location. Files are temporary stored on server and then on the desired location.

The HTML Syntax that handle the uploading URL is:

form action="http://localhost:5000/uploader" method="POST" enctype="multipart/form-data"

from flask import Flask, render_template, request
from werkzeug.utils import secure_filename

app = Flask(__name__)

@app.route('/upload')
def upload_file():
    return render_template('upload.html')

@app.route('/uploader', methods=['GET', 'POST'])
def upload_file():
    if request.method == 'POST':
      f = request.files['file'] 
      f.save(secure_filename(f.filename)) 
      return 'file uploaded successfully'
        
if __name__ == '__main__': 
    app.run(debug = True)

Sending Form Data to the HTML File of Server

A Form in HTML is used to collect the information of required entries which are then forwarded and stored on the server. These can be requested to read or modify the form.

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route('/')
def student():
    return render_template('student.html')

@app.route('/result', methods=['POST', 'GET'])
def result():
    if request.method == 'POST':
        result = request.form
        return render_template("result.html", result=result)

if __name__ == '__main__':
app.run(debug=True)

Explanation:

• '/' URL loads student.html, which contains a form.
• form submits data to /result.
• result() function: Retrieves form data from request.form, stores it in a dictionary and sends it to result.html for rendering.

HTML Code (result.html)

<!doctype html> 
<html> 
<body> 
    
    <table border = 1> 
        {% for key, value in result.items() %} 
        
            <tr> 
            <th> {{ key }} </th> 
            <td> {{ value }} </td> 
            </tr> 
            
        {% endfor %} 
    </table> 
        
</body> 
</html> 

HTML Code ( student.html )

<html> 
<body> 
    
    <form action = "http://localhost:5000/result" method = "POST"> 
        <p>Name <input type = "text" name = "Name" /></p> 
        <p>Physics <input type = "text" name = "Physics" /></p> 
        <p>Chemistry <input type = "text" name = "chemistry" /></p> 
        <p>Maths <input type ="text" name = "Maths" /></p> 
        <p><input type = "submit" value = "submit" /></p> 
    </form> 
</body> 
</html> 

Output

Alert messages

Alert can be defined as a pop-up or a dialog box that appears on the web-page or like alert in JavaScript, which are used to inform the user. This in flask can be done by using the method flash() in Flask. It passes the message to the next template.

Syntax: flash(message, category)

Parameters:

• message- actual text to be displayed
• category(optional)- to render any error or info.

from flask import Flask, request, redirect, url_for, flash, render_template
app = Flask(__name__)

# /login display login form

@app.route('/login', methods=['GET', 'POST'])
# login function verify username and password
def login():
    error = None

    if request.method == 'POST':
        if request.form['username'] != 'admin' or \
                request.form['password'] != 'admin':
            error = 'Invalid username or password. Please try again !'
        else:

            # flashes on successful login
            flash('You were successfully logged in')
            return redirect(url_for('index'))
    return render_template('login.html', error=error)

Advantages

• Lightweight backend with minimal dependencies, reducing unnecessary overhead.
• Beginner-friendly API with a clear and simple structure.
• Highly flexible and extensible, allowing customization as per requirements.
• Supports multiple databases (SQL, NoSQL) and works with frontend technologies like React or Angular.
• Suitable for small to medium-scale applications where full-stack frameworks are not needed.