Build a Python Web Server with Flask

From Sensors in Schools
Jump to navigation Jump to search

Build a Python Web Server using Flask

References

Install Flask

  • Open the Terminal
  • Enter the command pip3 install flask

  • Make a new directory named webapp using the Terminal command mkdir webapp
  • Enter the new directory with the command cd webapp

First web application

  • Open up Thonny.
  • Paste the following code into Thonny.
  • Save the file as app.py in the webapp directory.

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello world'

if __name__ == '__main__':
    app.run(debug=True, port=80, host='0.0.0.0')

Run Flask from Terminal

  • Open the Terminal
  • To run the app.py program enter the command sudo python3 app.py from within the /home/pi/webapp directory
  • You should see a similar response.

  • Now open your web browser and enter the IP address of your Raspberry Pi.
  • You can find the IP address of your Pi by hovering your mouse over the WiFi symbol.
    • Or by entering the URL localhost in the browser search bar.
    • Or entering the command ifconfig in a new Terminal window.
  • You should see this response.

Local Network Web site access

  • Any computer on the same local network can access your Flask web server.
  • On my local network the IP address of the Raspberry Pi is 192.168.1.118
  • My Mac computer can also access the Flash web server running on the Raspberry Pi by entering the IP address of the Pi in a web browser.
  • The result is shown below.

Add a New Page

  • Now we are going to add a new page to your web app by creating a new route.
  • In web applications, a route is a specific path into a website.
  • It is determined by the URL.
  • Each route can lead to a different page in a web site.

In the code you already have in app.py, there is a single route: 

@app.route('/')
def index():
    return 'Hello world'

This route is made up of three parts:

  • @app.route('/'): this determines the entry point; the / means the root of the website, so https://localhost/
  • def index(): this is the name you give the route, in this case index. index is the homepage of the website
  • return 'Hello world' : this is the content of the web page, which is returned when the user goes to this URL


The lower half of the app.py code runs the web server and your app: 

if __name__ == '__main__':
    app.run(debug=True, port=80, host='0.0.0.0')
  • port=80 - is the normal web page port on a computer. This is where HTTP requests are server. Other ports are used for different services.
  • host='0.0.0.0' means the web app is accessible to any computer on the local network.

To add a new page add a route to your existing code.

  • Follow the example below to create a new page named greenhouse

Full code

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello world'

@app.route('/greenhouse')
def greenhouse():
    return 'Greenhouse page'

if __name__ == '__main__':
    app.run(debug=True, port=80, host='0.0.0.0')
  • To navigate to the new page (route) enter the URL localhost/greenhouse

Create a Dynamic index.html web page

  • From the Raspberry Pi Programming menu open Geany
  • Geany is an Integrated Development Environment (IDE) that will allow us to work with many other file types, such as python, HTML and CSS.

  • In this first example we will change the program to return an HTML page, rather than just a print statement.
  • Create a templates directory in the webapp directory.
  • Create the templates directory using the File Manager or open a new Terminal and enter the command mkdir templates
  • In Geany copy and paste the following code.
  • Save the file as index.html in the templates directory.
<html>
<body>
<h1>My website</h1>
</body>
</html>

  • Return to your app.py file in Thonny.
  • Modify the first line of your code to import the render_template function from the flask module.
  • Modify the index() function to return the index.html HTML template instead of the normal text.
  • Your code should look like this:

from flask import Flask, render_template

app = Flask(__name__)

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

@app.route('/greenhouse')
def greenhouse():
    return 'Greenhouse page'

if __name__ == '__main__':
    app.run(debug=True, port=80, host='0.0.0.0')
  • In the Web browser load the localhost page in the web browser and the new HTML page should be displayed.
  • Make sure the app.py program is still running in the Terminal. Restart it if not.

Create a Dynamic greenhouse.html web page

  • Create a greenhouse.html template.
<html>
<body>
<h1>Greenhouse page</h1>
</body>
</html>
  • Then modify the greenhouse() function in the app.py to use the render_template

from flask import Flask, render_template

app = Flask(__name__)

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

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

if __name__ == '__main__':
    app.run(debug=True, port=80, host='0.0.0.0')
  • Go to the URL localhost/greenhouse and you will see the following:

Add Colour to Web Pages with Cascading Style Sheets

  • Typical web pages are very simple.
  • Cascading Style Sheets are a set of rules that give a browser more information about the display HTML content.
  • It allows text and background colours and fonts to be altered.
  • This gives the web developer more artistic licence.
  • Go back to the webapp directory.
  • Create a new directory named static

  • Style.css

body {
   background: blue;
   color: yellow;
}
  • Tree

  • Index.html with CSS

<html>
<head>
<link rel="stylesheet" href='/static/style.css' />
</head>
<body>
<h1>My website</h1>
</body>
</html>
  • Colourful web site

Adding Dynamic content to Web Pages

Reference

Retrieved from "http://www.waterwaysinwhittlesea.org/index.php?title=Build_a_Python_Web_Server_with_Flask&oldid=8472"