This shows you the differences between two versions of the page.
|
ii:labs:s2:02 [2023/04/01 18:29] florin.stancu |
ii:labs:s2:02 [2024/03/17 17:06] (current) florin.stancu |
||
|---|---|---|---|
| Line 7: | Line 7: | ||
| * Basic Web frontend coding (HTML + CSS) | * Basic Web frontend coding (HTML + CSS) | ||
| * Browser Development Tools (i.e., Web Inspector) | * Browser Development Tools (i.e., Web Inspector) | ||
| - | * Backend: Python + Flask | + | * Backend: Basic Flask request & response concepts |
| - | * Forms and authentication (user sessions) | + | |
| - | * Advanced HTTP: file uploading | + | |
| ===== Contents ===== | ===== Contents ===== | ||
| Line 104: | Line 102: | ||
| Check [[https://flask.palletsprojects.com/en/2.2.x/api/#response-objects|Flask's Response object documentation]] for all available options. | Check [[https://flask.palletsprojects.com/en/2.2.x/api/#response-objects|Flask's Response object documentation]] for all available options. | ||
| - | |||
| - | === Template Engines === | ||
| - | |||
| - | A typical website has a common HTML design, with only portions of its code changing on a per-page basis with specific content. | ||
| - | In order to prevent needless code duplication, a **template engine** is usually employed to obtain HTML documents from common layouts. A template is, basically, a HTML page interleaved with specific code blocks used to insert dynamically generated content from variables; many engines feature full programming languages that support loops and conditionals. | ||
| - | |||
| - | Flask readily integrates with the [[https://jinja.palletsprojects.com/en/3.1.x/templates/|Jinja templating engine]] which uses Python-like statements to enrich a HTML page with programmatic content: | ||
| - | <code html> | ||
| - | <!-- ... --> | ||
| - | <body> | ||
| - | <h1>My Webpage is {{ awesome_variable }}</h1> | ||
| - | |||
| - | <ul id="main-menu"> | ||
| - | {% for item in navigation %} | ||
| - | <li><a href="{{ item.href }}">{{ item.caption }}</a></li> | ||
| - | {% endfor %} | ||
| - | </ul> | ||
| - | |||
| - | {# a comment #} | ||
| - | </body> | ||
| - | </code> | ||
| - | |||
| - | The Jinja templates usually reside inside the project's ''templates/'' directory (check the [[https://flask.palletsprojects.com/en/2.2.x/api/#application-object|Flask documentation]] if you want to change it) and can be rendered using the ''[[https://flask.palletsprojects.com/en/2.2.x/api/#template-rendering|render_template]]'' utility function. | ||
| === Accessing HTTP request data === | === Accessing HTTP request data === | ||
| Line 161: | Line 136: | ||
| Thus, it becomes the server's responsibility to use browser-assisted persistence mechanisms such as cookies to associate a HTTP request with a specific user, also called a **Session**. For security reasons, the server must specifically validate any data received from the user, often through cryptographic means. | Thus, it becomes the server's responsibility to use browser-assisted persistence mechanisms such as cookies to associate a HTTP request with a specific user, also called a **Session**. For security reasons, the server must specifically validate any data received from the user, often through cryptographic means. | ||
| - | |||
| ===== Preparation ===== | ===== Preparation ===== | ||
| - | In order to solve the tasks, you will need a modern browser (//duh//), a code editor supporting HTML, CSS and Python (e.g., [[https://code.visualstudio.com/|Visual Studio Code]] / [[lunarvim.org/|LunarVim]]), a [[https://www.python.org/downloads/|Python 3]] distribution (you must also have ''pip'' installed). | + | In order to solve the tasks, you will need a modern browser (//duh//), a code editor supporting HTML, CSS and Python (e.g., [[https://code.visualstudio.com/|Visual Studio Code]] / [[https://lunarvim.org/|LunarVim]]), a [[https://www.python.org/downloads/|Python 3]] distribution (you must also have ''pip'' installed). |
| Next, we will need to install the ''Flask'' Python package using the PIP package manager: | Next, we will need to install the ''Flask'' Python package using the PIP package manager: | ||
| Line 171: | Line 145: | ||
| # NOTE: choose the most appropriate command: | # NOTE: choose the most appropriate command: | ||
| # Option 1: install globally (requires root / admin) | # Option 1: install globally (requires root / admin) | ||
| - | python3 -mpip install flask | + | python3 -m pip install flask |
| # Option 2: install for the current user only (inside ~/.local/lib/python/ on Linux) | # Option 2: install for the current user only (inside ~/.local/lib/python/ on Linux) | ||
| - | python3 -mpip install --user flask | + | python3 -m pip install --user flask |
| # (this has the advantage of not polluting the Python's system packages) | # (this has the advantage of not polluting the Python's system packages) | ||