Building Flask web application— Part 2
Missed previous article ? — Click here
Prerequisite : First you need to install VS code.
In this tutorial, we will try to create two routes and accept inputs from user and display the output on the webpage itself.
Here will learn about post method used in flask to send the data filled in HTML form to server and use those values to perform some operation and then produce output.
Step 1 :
Similar to previous tutorial, create a folder on the desktop. Open it and hit right click inside it to open it using VS code as given below.
Step 2 :
Create main.py file in this folder as given below.
Open VS code terminal and install flask in it by running following command :
pip install flaskWrite the code given below in main.py file
from flask import Flask, request, render_templateapp = Flask(__name__)
@app.route('/')def home(): return render_template('index.html')# Flask's render_template() helper function is used to serve an HTML template as the response# so home page will render the form produced by index.html template# POST method in flask is Used to send HTML form data to the server.@app.route('/sum', methods=['POST'])def summation(): numbers_list = [float(x) for x in request.form.values()]#if above line does not fetch expected output, try code given below:
# numbers_list = [float(x) for x in list(request.form.values())]# requeting all the values from HTML form and converting them into float using list comprehension summation = 0 for num in numbers_list: summation = summation + num # addition using for loop return render_template('index.html', output=f"Total sum of numbers is {summation}")# Flask's render_template() helper function is used to serve an HTML template as the responseif __name__ == "__main__": app.run()
After writing code in main.py, DO NOT forget to save the code by clicking (Ctrl + S).
Step 3 :
Create a folder and it must be named as “templates”. (Remember lowercase “t”). Create a html file inside it “index.html” and write code given below inside it.
<html><body><h1>This is my flask API for summation</h1><div><!-- after submitting the form second route "/sum" from main.py will be activated --><form action="/sum" method="POST"><!-- accepting uswer input for first number --><label for="first_number">Number 1 :</label><input type="text" id="first_number" name="first_number"><br><!-- accepting uswer input for second number --><label for="second_number">Number 2 :</label><input type="text" id="second_number" name="second_number"><br><!-- submit button --><input type="submit" value="Submit"></form><br><!-- output is obtained from main.py after submitting the form-->{{ output }}</body></div></html>
Folder structure must be as given below, otherwise it will throw error.
Step 4 :
Now run following command in the terminal :
python main.pyOR if above code doesn’t work, try :
python3 main.pyThis will generate URL in the terminal, as shown below.
Copy and paste this URL in web browser and you can see the webpage as :
Hit submit button after passing the values for number 1 and 2 and you will get the output as given below.
Congratulations !!!
You have created more advanced flask API which accepts user input from API, performs simple mathematical operation and produces output on the webpage itself.
Now you can learn how to build Flask API for Machine Learning Model from scratch here.
