Build a Web App using Python’s Flask — For Beginners

Getting started with Python’s Flask

4 min readApr 11, 2019

Working with Flask (a micro web framework written in python) was one of the things that I really wanted to try but was never able to 😕

But finally!! I did it….yaaay!! and am really excited to share it with ya all… It’s super easy and super cool.

I’ll help you with the basics of creating a website using HTML and to add a route through the flask.

First, install the Flask package: pip install Flask

Create a new folder and inside your project folder, create a static folder and templates folder.

The static folder will have your CSS and images while templates will hold your HTML files. This is important as initially when I tried working on Flask while having no clue about the directory tree, I was not able to run the file that's when I found out that flask looks for templates for views where the HTML files lie. And api.py is the main file which you will have to run to make your HTML file work!

So your directory tree will look like:

confusing? no worries just go with the flow… or clone the repository from Github: https://github.com/pemagrg1/flask-for-beginners

So api.py file will contain all the routes that will link your HTML and your python codes.

Let’s create one!

create an HTML file and name it as home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Flask App</title>
</head>
<body>
    <p>
        Hello!! Testing if it works on web! :p
    </p>
</body>
</html>

Create a simple HTML page to display text.

And in your api.py

from flask import Flask, render_templateapp = Flask(__name__)
@app.route('/')
def home():
    return render_template('home.html')
if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

create a route ”/” and return home.html from the function. Then run your api.py file and click on the link that it provides after running. If it doesnt show you any link, open your browser and on the url box, type http://0.0.0.0:5000/.

Easy?

Now let’s take the input from the web to flask and print it back!

Now copy paste this in you api.py

from flask import Flask, request, render_template,jsonifyapp = Flask(__name__)def do_something(text1,text2):
   text1 = text1.upper()
   text2 = text2.upper()
   combine = text1 + text2
   return combine@app.route('/')
def home():
    return render_template('home.html')@app.route('/join', methods=['GET','POST'])
def my_form_post():
    text1 = request.form['text1']
    word = request.args.get('text1')
    text2 = request.form['text2']
    combine = do_something(text1,text2)
    result = {
        "output": combine
    }
    result = {str(key): value for key, value in result.items()}
    return jsonify(result=result)if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

create a new route “/join” with “get and post” methods. Take the input from the web input box through request.form[<'name'>] . Do some text manipulations in the function and return the value as a JSON format to the web.

Copy this to home.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Flask App</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script></head><script>function myFunction() {
var text1= $('#text1').val();
var text2= $('#text2').val();
  $.ajax({
              url: "/join",
              type: "POST",
              data: {text1:text1,
              text2:text2}          }).done(function(response) {            var html= "<br><br><br><p> <b> RESULT : <b><p>";            response =response.result;
                 $.each(response,function(key,val){
                 console.log(val);
                    html+="<p>"+val+"<p>"                });
                html +="<br>";
                $(".show-data").append(html);
            });
};  </script>
<body>
    <p>
        Taking input from web<br><br>            Text_Value1<input type="text" id="text1" name="text1"><br><br>
            Text_Value2<input type="text" id="text2" name="text2"><br><br>
            <button id="clicked" onclick="myFunction()">Submit</button>
        </p>
    <div class="show-data" >    </div>
</body>
</html>