Skip to content

Flask App Flow

  1. logo Web Browser (Client)

    The user enters a URL or clicks a link. For example, they might click on a link to their account profile:

    View My Profile

    An HTTP Request is sent to the server...

    GET https://somesite.nz/user/123

  2. logo Web Server

    The web server receives the request and passes it on to Flask...

    • Request method: GET
    • Request path: /user/123

  3. logo Flask App

    Flask looks for a routing rule which matches the URL path:

    @app.get("/user/<int:user_id>")

    If it finds a match, it runs the function linked to this route, passing along and route data (in this case, the user ID):

    show_user_profile(123):

  4. logo Flask - Request User Data

    The function will first connect to the database, and request the user record:

    sql = "SELECT name, email FROM users WHERE id=?"
values = [123]
client.execute(sql, values)

  5. logo Database Server

    The database server receives and runs the SQL, finding a matching user record:

    users
    PK id name email
    --- --- ---
    101 Karen kaz@angry.net
    123 !! Jimmy jim@music.org
    150 Bob bob@maths.fun
    167 Sally sal@web.tech

    The database server passes back a data list (in this case, the list only has a single item) with the user data in the form of a 'dictionary' of key/value pairs...

    [ {id:123, name:"Jimmy", email:"jim@music.org"} ]

  6. logo Flask - Pass Data to Template

    The data is received from the database and passed into the Jinja template:

    user = result.rows[0]
render_template("pages/user.jinja", user=user)

  7. logo Jinja Template

    The user data passed into the Jinja template is incorporated into the HTML:

    <article>
    <h3>{{ user.name }}</h3>
    <p>Email: {{ user.email }}</p>
    <a href="/edit/{{ user.id }}">Edit</a>
</article>

  8. logo Web Server

    The web server sends out an HTTP Response containing the HTML:

    • Response code: 200 OK
    • Response content-type: text/html
    • Response body: 
      <!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>User Profile</title>
    </head>
    <body>
        <h2>User Profile</h2>
        <article>
            <h3>Jimmy</h3>
            <p>Email: jim@music.org</p>
            <a href="/edit/123">Edit</a>
        </article>
    </body>
</html>

  9. logo Web Browser

    The browser receives the HTTP response, reads the HTML within it, and then renders the web page:

    <h2>User Profile</h2>

<article>
    <h3>Jimmy</h3>
    <p>Email: <strong>jim@music.org</strong></p>
    <button>Edit</button>
</article>

    body {
    font-family: system-ui, sans-serif;
    padding: 0 0.5rem;
    background-color: rgb(00,33,66);
    color: white;
}

article {
    padding: 1rem;
    border: 1px solid rgb(66,99,132);
    border-radius: 0.5rem;
    background-color: rgb(33,66,99);
}

h3 {
    margin-top: 0;
}