Building Web Applications 2020/2021 PDF

Building Web Applications A.Y 2020/2021 Goal Create simple web applications in Python For interactive interfaces For server-side components Learn a simple framework – Start simple Extensible with modules Summary Flask Case studies First Flask basic application Jin...

Building Web Applications A.Y 2020/2021 Goal Create simple web applications in Python For interactive interfaces For server-side components Learn a simple framework – Start simple Extensible with modules Summary Flask Case studies First Flask basic application Jinja2 Templates User interaction Flask - what it is Flask is a lightweight WSGI web application framework. It is designed to make getting started quick and easy, with the ability to scale up to complex applications. It began as a simple wrapper around Werkzeug and Jinja2 and has become one of the most popular Python web application frameworks. WSGI (pronounced whiskey) - The Web Server Gateway Interface is a simple calling convention for web servers to forward requests to web applications or frameworks written in the Python programming language Flask offers suggestions, but doesn't enforce any dependencies or project layout. It is up to the developer to choose the tools and libraries they want to use. There are many extensions provided by the community that make adding new functionality easy. 1. https://pypi.org/project/Werkzeug/ 2. https://www.palletsprojects.com/p/jinja/ Werkzeug Werkzeug is a comprehensive WSGI web application library. It began as a simple collection of various utilities for WSGI applications and has become one of the most advanced WSGI utility libraries. Flask wraps Werkzeug, using it to handle the details of WSGI while providing more structure and patterns for defining powerful applications. Jinja2 Jinja2 is a full-featured template engine for Python. Flask wraps Jinja2, using it to handle templates. {% extends "layout.html" %} {% block body %} {% for user in users %} {{ user.username }} {% endfor %} {% endblock %} Flask installation Install Flask, Werkzeug and Jinja2 in a single step (system-wide installation) $> sudo pip install Flask $> … $> … $> Successfully installed Flask-1.1.0 Flask applications One ‘Flask’ object represents the whole application from flask import Flask app = Flask(__name__) ## __name__ is the application name Running the application starts the web server (running until you kill it) if __name__ == '__main__': app.run() The web server By default, Flask runs a web server on: http://127.0.0.1:5000/ Accessible by localhost, only Running on port 5000 Can be customized with parameters to the.run method # syntax: app.run(host=None, port=None, debug=None, **options) app.run(host='0.0.0.0', port=80) # public app.run(debug=True) # for development Web pages Each page is implemented by a method: @app.route('/') def index(): return "Hello, web world!" Must specify The (local) URL at which the page will be visible: '/' in the @app.route decorator The name of the page: index The (HTML) content of the page: return statement Case study 1: First Flask Application Route: / Route: /slides Softare Applications Slides 2020/2021 - Introduction - What is Software? This is the web page of the course The slides are available here. Back to home. Solution: HTML Software Applications 2020/2021 This is the web page of the course Route: / The slides are available here. SA 2020/2021 Slides Route: /slides Introduction What is Software? Back to home.  Solution: Flask from flask import Flask app = Flask(__name__) @app.route('/') def index(): return """SA 2020/2021Software Applications 2019/2020 This is the web page of the courseThe slides are available here. """ @app.route('/slides') def slides(): return """SA 2020/2021Slides IntroductionWhat is Software?Back to home. """ if __name__ == '__main__': app.run() https://github.com/anuzzolese/genomics-unibo/blob/master/2020-2021/exercises/flask/basic_app/basic_app.py HTML templating with Jinja2 Embedding HTML in Python strings is Ugly Error prone Complex (i.e., must follow HTML escaping rules and Python quoting rules) Did I say Ugly? Templating: separating the (fixed) structure of the HTML text (template) from the variable parts (interpolated variables) Flask supports the Jinja2 templating engine Jinja2 basics Templates should be in the./templates subfolder Templates are HTML files, with.html extension Templates can interpolate passed-by values: {{ parameter }} {{ expression }} Templates can include programming statements: {% statement %} Templates can access some implicit objects request, session Templates are processed when requested by the Flask page return render_template(‘slides.html', name=name)  Case study 2: revised solution with templating from flask import Flask from flask import render_template app = Flask(__name__) @app.route('/') def index(): return render_template('index.html') @app.route('/slides') def slides(): return render_template(‘slides.html’) if __name__ == '__main__': app.run(debug=True) https://github.com/anuzzolese/genomics-unibo/blob/master/2020-2021/exercises/flask/basic_templating/basic_templating.py  Revised solution with templating: HTML https://github.com/anuzzolese/genomics-unibo/blob/master/2020-2021/exercises/flask/basic_templating/templates/index.html SA 2020/2021 Route: / Located in: templates/index.html Software Applications 2020/2021 This is the web page of the course The slides are available here. SA 2020/2021 Route: /slides Slides Located in: templates/slides.html Introduction What is Software? Back to home. https://github.com/anuzzolese/genomics-unibo/blob/master/2020-2021/exercises/flask/basic_templating/templates/slides.html Main Jinja2 {% statements %} {% for var in list %}... {% endfor %} {% if condition %}... {% elif cond %}... {% else %}... {% endif %} Statements Vs. Expressions A {% statement %} controls the flow of execution in a template http://jinja.pocoo.org/docs/dev/templates/#list-of-control- structures An {{ expression }} evalutates the variable (or the expression) and «prints» the results in the HTML file http://jinja.pocoo.org/docs/dev/templates/#expressions  Route: / Case study 3 Softare Applications 2020/2021 Route: / Route: /login This is the web page of the course Softare Applications Softare Applications Welcome name! 2020/2021 2020/2021 This is the web page of the course Your nane: name Enter username [________] [Submit] Continue The slides are available. Logout Route: /slides Slides - Introduction - What is Software? Back to home. Querying request parameters All FORM variable are sent with the HTTP request Flask packs all FORM variables in the ‘request.form’ object (a dictionary) ‘request’ is a global implicit object, and must be imported from flask import request user = request.form['user'] Using parameters in templates Specify name=value of all needed parameters in the render_template call Within the template, use the {{ name }} syntax Template parameters need not be the same as FORM parameters (they are independent concepts, independent values) myuser = 'Andrea' Flask return render_template('index.html', user=myuser) Welcome {{ user }}. Template Remembering values Values in request.form expire immediately We may «remember» values for a longer time By storing them in «session» containers – Based on HTTP cookies – Kept in memory in the web server – Valid until browser disconnection or timeout, only – http://flask.pocoo.org/docs/0.10/quickstart/#sessions Implementing sessions in Flask Sessions are automatically initialised and managed by Flask Session data is encrypted. For that we must define a secret key app.secret_key = 'softwareapplicationssecret' The ‘session’ object is a global shared dictionary that stores attribute-value pairs myuser = 'Andrea' Flask session['user'] = myuser Welcome {{ session['user'] }}. Template Automatic redirects In some cases, a user action doesn’t need to generate a response page – E.g., the Logout action needs to destroy the session, but will just bring you to the normal ‘index’ page You may use a ‘redirect’ method to instruct the browser that the current response is empty, and it must load the new page (HTTP 302) return redirect('/index'))  Exercise solution from flask import Flask, render_template, request, session, redirect app = Flask(__name__) app.secret_key = 'softwareapplicationssecret' @app.route('/') def index(): return render_template('index2.html') @app.route('/slides') def slides(): user = session['user'] topics = ["Introduction", "What is Software?"] return render_template('slides2.html', user=user, slides=topics) @app.route('/login', methods=['POST']) def login(): user = request.form['user'] session['user'] = user return render_template('welcome.html', user=user) @app.route('/logout') def logout(): del session['user'] return redirect('/') if __name__ == '__main__': app.run(debug=True) https://github.com/anuzzolese/genomics-unibo/blob/master/2020-2021/exercises/flask/advanced_templating/advanced_templating.py  HTML solution: index2.html SA 2020/2021 Software Applications 2020/2021 This is the web page of the course {% if session.user %} Welcome {{ session['user'] }}! Route: / Logout Located in: templates/index2.html {% else %} Enter name: {% endif %} https://github.com/anuzzolese/genomics-unibo/blob/master/2020-2021/exercises/flask/advanced_templating/advanced_templating.py  HTML solution: welcome.html SA 2020/2021 Route: /login Located in: templates/welcome.html Welcome Welcome {{ user }}. Continue https://github.com/anuzzolese/genomics-unibo/blob/master/2020-2021/exercises/flask/advanced_templating/advanced_templating.py  HTML solution: slides2.html SA 2020/2021 Slides Route: / Located in: templates/slides2.html {% for topic in slides %} {{ topic }} {% endfor %} Back to home. https://github.com/anuzzolese/genomics-unibo/blob/master/2020-2021/exercises/flask/advanced_templating/advanced_templating.py Exercise Process with Pandas the Auto.csv dataset contained into the GitHub repo of the course then: 1. compute the average number of cylinders into the dataset 2. compute the maximum number of cylinders into the dataset 3. compute the minimum number of cylinders into the dataset 4. present the information about average, maximum, and minimum number of cylinders into a Web page published by a Flask application you implement 5. The Flask application uses the templating mechanism in order to keep separate the HTML presentation from the Python logics.