Hello world!

Introduction to Flask ===================== What is flask? -------------- `Flask `_ is a web framework. This means flask provides you with tools, libraries and technologies that allow you to build a web application. This web application can be some web pages, a blog, a wiki or go as big as a web-based calendar application or a commercial website. Flask is part of the categories of the micro-framework. Micro-framework are normally framework with little to no dependencies to external libraries. This has pros and cons. Pros would be that the framework is light, there are little dependency to update and watch for security bugs, cons is that some time you will have to do more work by yourself or increase yourself the list of dependencies by adding plugins. In the case of Flask, its dependencies are: * `Werkzeug `_ a WSGI utility library * `jinja2 `_ which is its template engine .. note:: WSGI is basically a protocol defined so that Python application can communicate with a web-server and thus be used as web-application outside of CGI. What are template engines? -------------------------- Have you ever built a website? Did you face the problem that to keep the style of the website consistent, you have had to write multiple times the same text? Did you ever tried to change the style of such website? If your website contains only few pages, changing its style will take you some time but is doable. However, if you have a lot of pages (for example the list of items you sell in your store), this task become overwhelming. Using templates you are able to set a basic layout for your pages and mention which element will change. This way to can define your header and keept it consistent over all the pages of your website, and if you need to change your header, you will only have to update it in one place. Using a template engine will save you a lot of time when creating your application but also when updating and maintaining it. An "Hello world" application in flask ------------------------------------- We are going to perform a very basic application with flask. * Create the structure of the project :: mkdir -p hello_flask/{templates,static} This is the basic structure of your web application:: $ tree hello_flask/ hello_flask/ |-- static `-- templates The ``templates`` folder is the place where the templates will be put. The ``static`` folder is the place where any files (images, css, javascript) needed by the web application will be put. * Create the application file :: cd hello_flask vim hello_flask.py Put the following code in this file:: #!/usr/bin/env python import flask # Create the application. APP = flask.Flask(__name__) @APP.route('/') def index(): """ Displays the index page accessible at '/' """ return flask.render_template('index.html') if __name__ == '__main__': APP.debug=True APP.run() * Create the template ``index.html`` :: vim templates/index.html Put the following code in this file .. code-block:: html Hello world! It works! * Run the flask application :: python hello_flask.py Access `http://127.0.0.1:5000/ `_ this should simply show you in black on white the text "It works!" (see Figure below). .. figure:: img/hello_flask_Index.png :width: 600 px :target: img/hello_flask_Index.png :align: center Using arguments in Flask ------------------------ In this section we are going to see how to use a page according to the URL used by the user. For this we will update ``hello_flask.py``. * Add the following entry in ``hello_flask.py`` :: @APP.route('/hello//') def hello(name): """ Displays the page greats who ever comes to visit it. """ return flask.render_template('hello.html', name=name) * Create the following template ``hello.html`` .. code-block:: html Hello Hello {{name}} * Run the flask application :: python hello_flask.py Access `http://127.0.0.1:5000/ `_ this should simply show you in black on white the text "It works!". Access `http://127.0.0.1:5000/hello/you `_ this should return you the text "Hello you" (see Figure below). .. figure:: img/hello_flask_hello.png :width: 600 px :target: img/hello_flask_hello.png :align: center Whatever you put behind ``/hello/`` in the URL will be returned to you in the page. This is your first use of the template, we set up a variable ``name`` in ``hello_flask.py`` (see the return line of the function ``hello``). This variable is then displayed in the page itself using the syntax ``{{name}}``. Additional work ---------------- Make use of the templates At the moment for each page we have created a template, this is actually bad practice, what we should do is create a ``master`` template and have each page use it. * Create the template ``master.html`` .. code-block:: html {% block title %}{% endblock %} - Hello Flask! {% block body %}{% endblock %} * Adjust the template ``index.html`` .. code-block:: html {% extends "master.html" %} {% block title %}Home{% endblock %} {% block body %} It works! {% endblock %} As you can see, in the ``master.html`` template we have defined two sections, blocks which are named ``title`` and ``body``. In the template ``index.html`` we say that this template relies on the template ``master.html``, then we define the content to put in these two sections (blocks). In the first block ``title`` we say to put the word `Home`, In the second block we define what we want to have in the body of the page. * As an exercise, transform the other template ``hello.html`` to use the ``master.html`` template as well. * Add link to the front page from the hello page Flask uses a specific syntax to create links from a page to another. This is fact generates the link dynamically according to the decorator set to the function linked to. In addition it takes care of where the application is deployed. For example, if you website is deployed at: ``/myapp/`` flask will automatically happend ``/myapp/`` to all links without the need for you to specify it. To create a link in a template, flask relies on the function ``url_for()``. This function takes as first argument the function you want to call (link to). The following arguments are the arguments of function itself (for example the argument ``name`` of the function ``hello``. Adjust the template ``hello.html`` to add a link to the front page :: * As an assignment add a link in the front page to the hello page for `you`.