MAD1 week 1: How the web works: clients, servers, URLs and HTTP

Official syllabus line: Basic terminologies of Web

The one-minute story

By the end of this week you can:

• explain what happens between typing a URL and seeing a page;
• split any URL into scheme, host, port, path, query string and fragment;
• read an HTTP request and response and name the method, headers, body and status code;
• choose the right HTTP method and status code for a situation;
• calculate requests per second, bandwidth (Mbps) and RAM needs, which the papers love;
• predict what a tiny Flask route returns for a given URL (200, 404, 405 or 400).

Words you need

Idea 1: Internet, web, clients and servers

The internet is the physical and logical network (cables, routers, IP). The web is one service that runs on it. Email and file transfer also use the internet but are not "the web".

A client starts the conversation and a server answers. These are roles, not machines: your laptop can run a Flask server and a browser at the same time, and then talk to itself.

What happens when you type http://example.com/hello and press Enter?

1. The browser asks DNS for the IP address of example.com.
2. It opens a connection to that IP address on the right port (80 for http, 443 for https).
3. It sends an HTTP request: "GET /hello".
4. The server runs some code (or reads a file) and sends an HTTP response: status, headers, body.
5. The browser reads the HTML body, finds more files it needs (CSS, images, JavaScript), requests those too, and renders the page.

Web server versus web application. A web server (Apache, Nginx) accepts connections and serves files. A web application (your Flask code) decides what to send. Flask ships with a small development server so you can test locally; real sites put it behind a stronger one.

Static versus dynamic.

You can serve static files with one command in a folder that has index.html:

python -m http.server 8000

Now open http://localhost:8000/ in the browser. Python sends index.html for /, and any other file by its path. Press Ctrl+C to stop. The server prints one line per request, for example "GET /index.html HTTP/1.1" 200 -.

Idea 2: Anatomy of a URL

Take this URL:

https://shop.example.com:8443/books/list?genre=sci-fi&page=2#reviews

Python can split a URL for you, which is a safe way to check your answer:

from urllib.parse import urlparse, parse_qs

u = urlparse("https://shop.example.com:8443/books/list?genre=sci-fi&page=2#reviews")
print(u.scheme, u.hostname, u.port)
print(u.path)
print(parse_qs(u.query))
print(u.fragment)

Output:

https shop.example.com 8443
/books/list
{'genre': ['sci-fi'], 'page': ['2']}
reviews

Notice that every query value is a string ('2', not 2), and a key can repeat (?tag=a&tag=b), so parse_qs gives lists.

Path parameter versus query parameter. These are two different ways to send a value, and the exam tests the difference constantly. In Flask:

from flask import Flask, request
app = Flask(__name__)

@app.route("/greet/<name>")          # value lives in the PATH
def greet(name):
    return f"Hi {name}"

@app.route("/search")                # value lives in the QUERY STRING
def search():
    return "q=" + request.args.get("q", "nothing")

I ran this app. The results:

Idea 3: HTTP request and response

An HTTP message is plain text. A request has a start line, headers, an empty line, and an optional body:

POST /login HTTP/1.1
Host: example.com
Content-Type: application/x-www-form-urlencoded
Cookie: session=abc123

uname=ria&pwd=secret

A response looks similar, with a status line first:

HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Set-Cookie: theme=dark; Path=/
Content-Length: 31

<h1>Welcome, ria</h1>

Content-Type is the label on the parcel. text/html means "show it as a page"; application/json means "this is data". Flask's jsonify(...) returns status 200 and the mimetype application/json, which is a favourite exam fact.

Try it with curl, a command-line client (-i shows the headers, -X picks the method, -H adds a header, -d sends a body):

curl -i http://127.0.0.1:5000/api/courses
curl -X POST http://127.0.0.1:5000/api/course -H "Content-Type: application/json" -d '{"id": "CS1001"}'

HTTP methods

Status code families

I checked these in Flask: redirect(url_for("home")) gives 302 with a Location: / header; abort(403) gives 403; a missing route gives 404; calling a POST-only route with GET gives 405; returning "saved", 201 gives 201.

from flask import Flask, abort

app = Flask(__name__)
users = ["admin", "user_1"]

@app.route("/home/<username>", methods=["POST"])
def home(username):
    if username in users:
        return f"Hello {username}"
    abort(407)

@app.errorhandler(404)
def nf(e):
    return "The user you are looking for is invalid."

@app.errorhandler(405)
def bad_method(e):
    return "Please check the web request."

abort and errorhandler. abort(400, "message") stops the function and sends that error. @app.errorhandler(404) replaces the default error page for that code. When the argument is missing, Flask raises 400 for request.args["uid"] (dictionary-style access) but returns None for request.args.get("uid").

from flask import Flask, request
valid = [{"uid": "student", "pwd": "12345"},
         {"uid": "professor", "pwd": "54321"}]
app = Flask(__name__)

@app.route("/signin")
def login():
    args = request.args
    for vu in valid:
        if vu["uid"] == args["uid"] and vu["pwd"] == args["pwd"]:
            return "You are authorized!!"
        else:
            return "You are unauthorized!!"

Idea 4: Stateless HTTP and cookies

Each request is independent: the server does not remember that you logged in one second ago. To fake memory, the server sends a cookie in a Set-Cookie response header. The browser stores it and sends it back in a Cookie header on every later request to that site. The cookie usually holds a short session id, and the real data stays on the server.

from flask import Flask, make_response, request
app = Flask(__name__)

@app.route("/set")
def set_it():
    r = make_response("ok")
    r.set_cookie("theme", "dark")
    return r

@app.route("/get")
def get_it():
    return request.cookies.get("theme", "none")

The first route sends Set-Cookie: theme=dark; Path=/. After the browser has that cookie, /get shows dark; in a fresh browser it shows none.

Idea 5: How a browser renders and what developer tools show

After the HTML arrives the browser parses it into a tree called the DOM (Document Object Model), applies the CSS to each node, works out the layout and paints the pixels. Each new file it discovers (image, stylesheet, script) is another request.

Press F12 (or right-click, Inspect) to open the developer tools:

• Elements tab: the live DOM and the CSS applied to the selected element. You can edit text and styles to experiment; the change lives only in your browser and vanishes on reload.
• Network tab: one row per request, with method, URL, status code, type, size and time. Click a row to see request and response headers. This is where you check that your form sent POST and what status came back.
• Console tab: JavaScript messages and errors.

View Source (Ctrl+U) shows the HTML the server sent; Elements shows the page after the browser and JavaScript have worked on it.

Server-side versus client-side rendering. With Jinja2 (week 3) the server builds the full HTML and the browser just shows it. That gives a fast first view and works well with search engines. In client-side rendering the server sends data (JSON) and JavaScript builds the page in the browser (that is the MAD2 way, with Vue). Jinja2 server-side rendering does not remove the need for later fetches when the user interacts; it just makes the first load simple.

Idea 6: Bandwidth, latency and counting requests

Papers set small arithmetic problems. Memorise these facts and units.

Memory and concurrency. If each connected viewer needs 3 GB and at most 1,900 viewers are online at the busiest minute, the server must hold 3 GB x 1,900 = 5,700 GB = 5.7 TB (the real paper reads the peak from a graph and asks exactly this; use the highest point, not the average, because everyone may be there at once). Watch the unit: 1,900 x 3 GB is in GB, so convert before choosing GB or TB.

Scale up versus scale out. Scale up (vertical) means a stronger machine. Scale out (horizontal) means more machines behind a load balancer. Scale out when one machine's CPU, memory or network is the bottleneck; scale up when one machine has room and a bigger one is simpler. Caching (keeping a copy of a response near the client) reduces load and latency; it never "degrades service quality".

Cloud service models (a small recurring question): IaaS gives you raw machines and networks; PaaS gives a ready platform (language runtime, web server, database) so you only bring your code; SaaS gives a finished application (Gmail). A developer who wants a ready environment without managing servers wants PaaS.

Idea 7: MVC in one page

Most web apps split their code in three, so each part has one job:

A request flows: browser, controller (route), model (data), back to the controller, view (template), response. Keep SQL out of templates and HTML out of models.

Exam radar

Quick quiz

Viva: say it out loud

Recap

MAD1 week 2: HTML and CSS: building and styling pages

Official syllabus line: Webpages written in HTML and CSS

The one-minute story

By the end of this week you can:

• write a complete HTML page with headings, lists, links, images, tables and forms;
• tell block elements from inline elements and use semantic tags;
• write CSS with the right selector and predict which rule wins (specificity, order);
• calculate the size of a box (content, padding, border, margin);
• build a simple layout with display: flex;
• use Bootstrap through its CDN link, with grid and utility classes.

Words you need

Idea 1: Creating and serving an HTML document

An HTML file is plain text. Save this as index.html in a new folder:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
</head>
<body>
  <h1>Hello, web</h1>
  <p>This is my first page.</p>
</body>
</html>

Open a terminal in that folder and serve it:

python -m http.server 8000

Visit http://localhost:8000/. The server sends index.html for /. You can also just double-click the file, but then the address starts with file:// and no server is involved.

Elements can be nested (a list inside a body) but must close in reverse order: <p><b>Hi</b></p>, never <p><b>Hi</p></b>. Some tags have no content and no closing tag (void elements): <br>, <hr>, <img>, <input>, <meta>, <link>.

Idea 2: Text, lists, links, images and tables

<h1>Main title</h1>            <!-- h1 to h6, h1 is biggest -->
<h2>Section</h2>
<p>A paragraph with <b>bold</b>, <i>italic</i> and <br> a line break.</p>
<hr>                           <!-- a horizontal line -->

<ul>                           <!-- unordered: bullets, order does not matter -->
  <li>Rice</li>
  <li>Dal</li>
</ul>
<ol>                           <!-- ordered: numbers, order matters -->
  <li>Wash</li>
  <li>Boil</li>
</ol>

<a href="https://example.com">An external link</a>
<a href="page2.html">A link to another file</a>
<a href="#reviews">Jump to the element with id reviews</a>

<img src="cat.png" alt="A sleeping cat" width="200">

• Lists. ul has bullets, ol has numbers, and both hold li items. A recipe needs ul for ingredients (order irrelevant) and ol for the steps (order matters). This exact choice appeared in a past paper.
• Links. The href value can be a full URL, a relative file path, or #id to jump inside the page (that is the fragment from week 1).
• Images. src is the file, alt is the text for screen readers and for when the image fails to load.

Tables

<table border="1">
  <thead>
    <tr><th>Course</th><th>Credits</th></tr>
  </thead>
  <tbody>
    <tr><td>MAD1</td><td>4</td></tr>
    <tr><td>DBMS</td><td>4</td></tr>
  </tbody>
</table>

tr is a row, th a header cell, td a data cell. A cell can span several columns with colspan="2" or rows with rowspan="2".

Block and inline elements

Use div (block) and span (inline) as neutral containers that carry no meaning of their own.

Semantic tags

header, nav, main, section, article, aside, footer. They look like plain boxes but say what the content is, which helps search engines, screen readers, and your own reading.

<body>
  <header><h1>Study Hub</h1></header>
  <nav><a href="/">Home</a> <a href="/about">About</a></nav>
  <main>
    <article><h2>Post</h2><p>Text...</p></article>
  </main>
  <footer>Copyright 2026</footer>
</body>

<h1>Menu</h1>
<ul>
  <li>Idli</li>
  <li>Dosa</li>
</ul>
<a href="index.html">Home</a>

Idea 3: Forms and input types

A form is how a browser sends data to the server. The action is the URL to send to, and method is GET or POST (week 1).

<form action="/signup" method="post">
  <label for="u">Name</label>
  <input type="text" id="u" name="uname" required>

  <input type="email" name="mail" placeholder="you@example.com">
  <input type="password" name="pwd" minlength="6">
  <input type="number" name="age" min="5" max="99">
  <input type="date" name="dob">

  <input type="radio" name="level" value="fd"> Foundation
  <input type="radio" name="level" value="dip"> Diploma
  <input type="checkbox" name="agree" value="yes"> I agree

  <select name="city">
    <option value="che">Chennai</option>
    <option value="blr">Bengaluru</option>
  </select>

  <textarea name="note" rows="3"></textarea>
  <button type="submit">Send</button>
</form>

HTML5 validation. Attributes such as required, type="email", min, max, minlength and pattern make the browser check the data before sending. This is client-side validation. It improves the experience but a user (or a script) can bypass it, so the server must validate again (week 3).

:valid / :invalid in CSS. A field with required and no text is invalid, so a rule like input:valid { border: 2px solid red; } does not colour an empty required field, and does colour a correctly filled one. Past papers have asked this.

Idea 4: Adding CSS: inline, internal, external

A CSS rule has a selector and declarations:

p {
  color: darkblue;
  font-size: 18px;
}

Three ways to attach CSS:

<!-- 1. Inline: on one element -->
<p style="color: red;">Red text</p>

<!-- 2. Internal: a style tag in head -->
<style>
  p { color: blue; }
</style>

<!-- 3. External: a separate file, linked in head (best for real projects) -->
<link rel="stylesheet" href="style.css">

External CSS is shared by many pages and is cached by the browser. In Flask the file lives in the static folder and is linked with url_for('static', filename='style.css') (week 3).

The cascade: who wins?

When several rules target one element, the browser decides in this order:

1. !important beats everything else (use rarely).
2. Higher specificity wins.
3. If specificity ties, the rule that comes later wins.
4. Some properties (colour, font) are inherited from the parent when no rule applies.

Specificity score, compare the columns from left to right:

<style>
  p            { color: blue; }
  .note        { color: green; }
  #first       { color: red; }
  p.note       { color: orange; }
</style>
<p id="first" class="note">Hello</p>
<p class="note">World</p>

Idea 5: Selectors, all kinds

h1 { }                    /* type: every h1 */
.note { }                 /* class: class="note" */
#main { }                 /* id: id="main" (unique) */
* { }                     /* universal: every element */
h1, h2 { }                /* group: either */

div p { }                 /* descendant: any p anywhere inside a div */
div > p { }               /* child: p directly inside a div */
h1 + p { }                /* adjacent sibling: the p right after an h1 */
h1 ~ p { }                /* general sibling: all later p siblings of an h1 */

a:hover { }               /* pseudo-class: mouse is over */
li:nth-child(2) { }       /* li that is the 2nd child of its parent */
li:nth-child(odd) { }     /* 1st, 3rd, 5th ... (even: 2nd, 4th ...) */
li:first-child { }
input:focus { }
input:valid { }

p::before { content: "Note: "; }   /* pseudo-element: injected text before */
p::first-line { }

input[type="text"] { }    /* attribute equals */
[class~="out"] { }        /* attribute contains the WORD "out" in a space-separated list */
a[href^="https"] { }      /* attribute starts with */
a[href$=".pdf"] { }       /* attribute ends with */
a[href*="example"] { }    /* attribute contains the text anywhere */

• One colon : is a pseudo-class (a state), two colons :: is a pseudo-element (a part).
• div p goes at any depth; div > p only one level down.
• [class~=out] matches an element whose class list contains the word out. [id~=out] does the same for id, so it matches id="out".

<style>
  ul > li:nth-child(even) { color: red; }
  li ~ li:last-child      { font-weight: bold; }
</style>
<ul>
  <li>A</li><li>B</li><li>C</li><li>D</li><li>E</li>
</ul>

<style>
  [id~=out]    { border: 10px solid red; }
  [class~=out] { border: 5px solid yellow; }
</style>
<p id="out">One</p>
<p class="out">Two</p>
<p class="outer">Three</p>

Idea 6: Box model, units and colours

Every element is a box made of four layers, from the inside out: content, padding (inside space), border, margin (outside space).

.card {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}

With the default box-sizing: content-box, width is the content width:

• Visible box width = 200 + 20 + 20 (padding) + 5 + 5 (border) = 250px.
• Space taken in the row = 250 + 10 + 10 (margin) = 270px.

With box-sizing: border-box the 200px already includes padding and border: visible width 200px; content shrinks to 150px. Bootstrap sets border-box everywhere.

Shorthand: margin: 10px 20px; means top/bottom 10, left/right 20. Four values go clockwise: top, right, bottom, left.

Colours: names (red), hex (#ff0000, #f00), rgb(255, 0, 0), rgba(255, 0, 0, 0.5) (the last number is opacity) and hsl(0, 100%, 50%).

Display and position

• display: block | inline | inline-block | none | flex. none removes the element entirely. (visibility: hidden hides it but keeps the space.)
• position: static (default, normal flow), relative (shift from its normal place), absolute (placed against the nearest positioned ancestor), fixed (stays on the screen when scrolling), sticky (sticks after scrolling to a point). Offsets use top, left, right, bottom.

Flexbox basics

<style>
  .row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
  .row div { flex: 1; }
</style>
<div class="row">
  <div>One</div><div>Two</div><div>Three</div>
</div>

Setting display: flex on the parent makes the children flex items laid out in a row.

On a child, flex: 1 makes children share the free space equally. Above, three equal columns.

Idea 7: Bootstrap

Bootstrap gives ready classes. No install is needed: link it from a CDN in the head (and, only if you use components such as dropdowns or modals, add the script before the closing body).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <h1 class="text-center mt-4">Courses</h1>
    <div class="row">
      <div class="col-12 col-md-6">
        <div class="alert alert-info">Left half on medium screens and up</div>
      </div>
      <div class="col-12 col-md-6">
        <button class="btn btn-primary">Enrol</button>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

• Containers. container is centred with a maximum width; container-fluid spans the whole width.
• Grid. A row holds 12 columns per line. col-md-6 means "take 6 of 12 columns (half) from the medium breakpoint upward; below that stack full width". Breakpoints: sm 576px, md 768px, lg 992px, xl 1200px. col-4 col-4 col-4 makes three equal columns.
• Utilities. Small single-purpose classes: spacing m-3, mt-2, px-4, p-0 (scale 0 to 5, where 3 is 1rem), text text-center, fw-bold, colour text-danger, bg-light, display d-flex, d-none, justify-content-between, border, rounded.
• Components. btn btn-primary, card, navbar, table table-striped, form-control, alert alert-success, list-group.

Exam radar

Quick quiz

Viva: say it out loud

Recap

MAD1 week 3: Views: Jinja2 templates, Bootstrap and forms

Official syllabus line: Presentation layer - View

The one-minute story

By the end of this week you can:

• write a string with variables using f-strings and string.Template, and say how Jinja2 differs;
• predict the output of a Jinja2 template with variables, filters, loops, conditions and set;
• build a base layout with extends, block, super(), include and a macro;
• render a template from Flask with render_template and link CSS with url_for('static', ...);
• read form data with request.form and request.args and validate it on the server;
• explain why Jinja2 escapes HTML and what |safe does.

Words you need

Idea 1: Strings with blanks, the stepping stone

Before templates, Python itself can fill blanks. Compare three ways:

name, price = "Ria", 49.5

print(f"{name:>6}|{price:.2f}")             # f-string
print("{} owes {:.1f}".format(name, price)) # str.format
print("%s owes %d" % (name, 3))             # old % style

from string import Template
t = Template("The $color car is in $place.")
print(t.substitute(color="red", place="Goa"))
print(t.safe_substitute(color="red"))
try:
    t.substitute(color="red")
except KeyError as e:
    print("KeyError", e)

Output:

   Ria|49.50
Ria owes 49.5
Ria owes 3
The red car is in Goa.
The red car is in $place.
KeyError 'place'

• f-string: f"..." with {expression} and a format spec after a colon: .2f two decimals, >6 right-align in width 6, , thousands separator.
• string.Template: placeholders are written $name. substitute raises KeyError if a value is missing; safe_substitute leaves the placeholder as it is.
• The Template from string and the Template from jinja2 are different tools with different syntax. string.Template only substitutes simple $names: no loops, no conditions, no filters.

from string import Template as T1
from jinja2 import Template as T2

temp = "A student needs to complete $c1 level to get to the {{c2}} level."
out = T1(temp).substitute({'c1': 'foundation', 'c2': 'diploma'})
print(out)
print(T2(out).render({'c2': 'diploma'}))

PyHTML is a third way: build HTML with Python calls, for example html(head(title("Quiz 2")), body(h2("Heading"), p("Text"))) and .render() gives the nested HTML in the same order as the calls. Jinja2 is the one used in this course for real pages.

Idea 2: Jinja2 basics: variables, expressions, filters

Jinja2 works without Flask too, which is a good way to test a template:

from jinja2 import Template

t = Template("Hi {{ name }}, 2 x 3 = {{ 2 * 3 }}, you have {{ items|length }} items. {{ missing }}|")
print(t.render(name="Ria", items=[1, 2, 3]))

Output: Hi Ria, 2 x 3 = 6, you have 3 items. |

The missing variable printed nothing.

Passing data. render(name="Ria") and render({'name': 'Ria'}) are the same. Values may be strings, numbers, lists, dictionaries or objects. Inside the template, d.k and d['k'] both read a dictionary key, l[0] reads a list item, and methods can be called: if loan1.get_loan_details() returns (101, 45900, 5) then {{ l1.get_loan_details() }} prints (101, 45900, 5).

Expressions work like Python: {{ 7 // 2 }} is 3, {{ 7 / 2 }} is 3.5, {{ 'a' ~ 1 }} is a1 (~ joins text), {{ 'ab' * 2 }} is abab, {{ 'yes' if n > 1 else 'no' }}.

Filters go after a pipe and can be chained:

• {{ name|upper }} gives RIA, {{ 'ria dev'|title }} gives Ria Dev
• {{ name|default('guest') }} gives guest when name is not defined
• {{ items|length }} is the size (the paper's right answer; len(items) and items|len are wrong)
• {{ items|join(' / ') }}, {{ items|first }}, {{ items|last }}, {{ items|sort }}
• {{ price|round(1) }}: 3.14159 becomes 3.1
• {{ items|sum }}, {{ items|max }}, {{ s|trim }}, {{ s|replace('a','z') }}

Chain: {{ ['b','a']|sort|reverse|list }} gives ['b', 'a'].

Autoescaping and |safe

If a user types <script> as their name, printing it raw would run their script on every visitor's page (an attack called XSS). So Flask turns autoescape on for .html templates: < becomes <, the browser shows the characters instead of treating them as a tag.

from flask import render_template_string
render_template_string("{{ s }} | {{ s|safe }}", s="<b>hi</b>")

Result: &lt;b&gt;hi&lt;/b&gt; | <b>hi</b>. The first shows the literal text <b>hi</b> in the browser; the second makes real bold text.

from jinja2 import Template

template = '''
Welcome to {{Degree}} DEGREE
First level to clear is {{level}}
'''
print(Template(template).render(Degree="IITM BS"))

(blank line)
Welcome to IITM BS DEGREE
First level to clear is

Idea 3: Control flow: for, if, set, whitespace

{% for c in courses %}
  <li>{{ loop.index }}. {{ c }}{% if loop.last %} (last){% endif %}</li>
{% else %}
  <li>No courses</li>
{% endfor %}

With courses = ["MAD1", "MAD2", "DBMS"] the items are 1. MAD1, 2. MAD2, 3. DBMS (last). The else of a for runs only when the list is empty.

Loop over a dictionary with {% for k, v in d.items() %}{{ k }}={{ v }};{% endfor %}, which prints a=1;b=2; for d = {"a": 1, "b": 2}. Use range: {% for i in range(3) %} runs for 0, 1, 2.

Conditions: {% if n > 10 %}big{% elif n > 5 %}mid{% else %}small{% endif %}; with n = 7 this prints mid. You can use and, or, not, in, and tests such as is defined, is even.

{% set %} and its scope. set makes a variable. A set inside a for loop is local to that loop and is gone afterwards.

from jinja2 import Template
t = Template("""
{% for i in range(3) %}
  {% set x = i %}
{% endfor %}
[{{ x }}]
""")
print(t.render())

The output contains []: the x outside the loop is undefined, so it prints nothing (not 0, not 2). A past paper asked exactly this twice, once with range(3) and once with [1, 2, 3] in a Flask template (answer: "Output is:" and nothing after it). To add up values across a loop, use namespace:

{% set ns = namespace(t=0) %}{% for i in [1,2,3] %}{% set ns.t = ns.t + i %}{% endfor %}{{ ns.t }}

This prints 6. A set outside any loop works normally: {% set x = 5 %}[{{ x }}] prints [5].

Whitespace. Jinja2 keeps the newlines around your tags. A minus sign next to the tag brackets trims the whitespace on that side:

A = "<ul>\n{% for x in c %}\n<li>{{ x }}</li>\n{% endfor %}\n</ul>"
B = "<ul>\n{% for x in c -%}\n<li>{{ x }}</li>\n{%- endfor %}\n</ul>"
# c = ["a", "b"]
# A renders to '<ul>\n\n<li>a</li>\n\n<li>b</li>\n\n</ul>'
# B renders to '<ul>\n<li>a</li><li>b</li>\n</ul>'

The extra blank lines in A are harmless in HTML (the browser ignores them), so you will rarely need -. A past paper question puts groupby in a template:

temp = """
{% for vid, members in interfaces|groupby(attribute='lan') %}
 Interfaces in lan {{ vid }}: {{ members|map(attribute='name') | join(', ') }}
{% endfor %}
"""

With interfaces Ethernet1 (50), Ethernet2 (40), Ethernet3 (50), Ethernet4 (60) the output is three lines: lan 40: Ethernet2, lan 50: Ethernet1, Ethernet3, lan 60: Ethernet4. groupby sorts by the key and groups equal keys together; map(attribute='name') takes each item's name.

Idea 4: Templates in Flask

myapp/
  app.py
  templates/
    base.html
    index.html
    form.html
  static/
    style.css

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html", courses=["MAD1", "MAD2"], user="Ria")

• render_template looks in a folder named templates next to app.py, and extra arguments become variables. If you create the app with Flask(__name__, template_folder='my_templates') Flask looks only in my_templates, so a file in templates/ fails with TemplateNotFound. (This was the 5-mark question in a recent paper: routes using paths inside my_templates work, those asking for index.html or page.html that live elsewhere raise TemplateNotFound.) Subfolders are named in the call: render_template('public/home.html').
• Static files (CSS, images, JS) go in static/. Link them with url_for:

<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<img src="{{ url_for('static', filename='logo.png') }}" alt="logo">

which renders as /static/style.css.

url_for(function_name, **values) builds a URL from the name of the view function, so changing the route later does not break your links:

@app.route("/home")
def index(): ...

@app.route("/student/<student_name>/<int:student_id>")
def profile(student_name, student_id): ...

with app.test_request_context():
    print(url_for("index"))                                       # /home
    print(url_for("profile", student_name="John", student_id=101))# /student/John/101
    print(url_for("index", page=2))                               # /home?page=2

Values that are part of the route fill the path; extra values become the query string. The argument is the function name profile, not the path. redirect(url_for("index")) sends the browser a 302 and a Location header, and the browser then makes a new GET (as in the 2022 paper's index2 route).

Idea 5: Reuse: inheritance, include, macros

Inheritance. Put the common page frame in one base file and fill the gaps in each page.

<!-- templates/base.html -->
<!doctype html>
<html>
<head>
  <title>{% block title %}Study Hub{% endblock %}</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
  {% block content %}{% endblock %}
  {% block foot %}(c) Hub{% endblock %}
</body>
</html>

<!-- templates/page.html -->
{% extends "base.html" %}
{% block title %}Home - {{ super() }}{% endblock %}
{% block content %}<h1>Hello</h1>{% endblock %}

Rendering page.html: the title becomes Home - Study Hub (super() pulls in the parent's block text), the content is <h1>Hello</h1>, and foot is not overridden so the parent's (c) Hub appears. I rendered a small version of this.

Include inserts another file at that spot, as is: {% include "navbar.html" %}. It sees the same variables. Use it for small repeated pieces (navbar, footer).

Macros are functions in a template:

{% macro box(text, kind='info') %}
  <div class="alert alert-{{ kind }}">{{ text }}</div>
{% endmacro %}

{{ box('Saved') }}
{{ box('Failed', 'danger') }}

Output: <div class="alert alert-info">Saved</div> and <div class="alert alert-danger">Failed</div> (default argument used for the first). In the 2022 paper a macro with a for loop printed the courses as page text, one after another, App1 App2 python Data science Database machine learning, not as a Python list with brackets and quotes. A macro must be called ({{ display(list) }}) or nothing shows.

Idea 6: Forms: GET and POST into Flask

Template form.html:

{% extends "base.html" %}
{% block content %}
<form action="{{ url_for('signup') }}" method="post">
  <input type="text" name="uname" required>
  <input type="number" name="age" min="5">
  <button type="submit">Send</button>
</form>
{% if error %}<p class="text-danger">{{ error }}</p>{% endif %}
{% endblock %}

Route:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/signup", methods=["GET", "POST"])
def signup():
    if request.method == "POST":
        name = request.form.get("uname", "").strip()
        age = request.form.get("age", "")
        if not name:
            return render_template("form.html", error="Name is required"), 400
        if not age.isdigit():
            return render_template("form.html", error="Age must be a number"), 400
        return f"Welcome {name}, age {int(age)}"
    return render_template("form.html")

Test results (I posted these with Flask's test client): uname=Ria, age=20 returns Welcome Ria, age 20; an empty name returns the form again with the error and status 400; age=x returns the second error. A plain GET to /signup shows the form.

• A route accepts only GET unless you list others in methods=[...]. Forgetting "POST" makes the form submit fail with 405.
• request.form["k"] raises 400 Bad Request if the key is missing; request.form.get("k") returns None.
• A form with method="get" puts the fields in the query string, so you read them with request.args. Reading request.form for a GET form gives nothing.
• request.args.getlist("tag") returns all values for a repeated key: ?tag=a&tag=b gives ['a', 'b'].
• Good practice: after a successful POST, do return redirect(url_for(...)) so a page refresh does not submit the form again.

Client-side versus server-side validation

• Client-side: HTML5 attributes (required, type="email", min, pattern) in the browser. Fast and friendly, but anyone can bypass it (edit the HTML, use curl).
• Server-side: your Python checks. Required for security and correctness. The form above has both: the browser blocks an empty name, and signup re-checks.

Flask-WTF (with WTForms) is an extension that defines forms as Python classes and adds validators and CSRF protection; know its name and purpose, but plain request.form is what the course shows first.

Idea 7: Bootstrap inside templates

Put the CDN link once in base.html, and every page that extends it gets the styles. A loop turns data into a styled table:

<table class="table table-striped">
  <thead><tr><th>#</th><th>Course</th></tr></thead>
  <tbody>
  {% for c in courses %}
    <tr><td>{{ loop.index }}</td><td>{{ c }}</td></tr>
  {% endfor %}
  </tbody>
</table>

With two courses this produces two tr rows, numbered 1 and 2, inside a Bootstrap-striped table. Other useful pieces: a form field is <input class="form-control" ...> in a <div class="mb-3">, a submit button is class="btn btn-primary", messages are alert alert-danger, and a top bar is a navbar (put it in its own file and include it).

Server-side rendering (what you do this week) sends finished HTML: fast first load and easy for search engines. In client-side rendering (MAD2) the server sends JSON and JavaScript builds the page. Neither removes the need for requests after the page loads.

@app.route("/hello/<name>")
def hello(name):
    return render_template("hello.html", n=name, tags=["a", "b"])

<p>Hi {{ n|upper }}!</p>
<ul>{% for t in tags %}<li>{{ t }}</li>{% endfor %}</ul>

Exam radar

Quick quiz

Viva: say it out loud

Recap

MAD1 week 4: Models: databases, SQL, ER diagrams and SQLAlchemy

Official syllabus line: Models - Introduction to databases

The one-minute story

By the end of this week you can:

• draw a small ER diagram and turn it into tables with primary and foreign keys;
• write SQL with WHERE, GROUP BY, HAVING, ORDER BY, LIMIT and joins, and predict the output of a query on a small table;
• explain NULL, constraints, normalisation, transactions and ACID;
• write SQLAlchemy and Flask-SQLAlchemy models and predict what query, filter_by, commit and rollback do;
• fix classic ORM mistakes (forgetting commit, using and in a filter, positional constructor arguments).

Words you need

Idea 1: Why a database, and the relational model

Why not just keep data in a text file or a Python list? Because files give you no help with searching fast, sharing between many users, avoiding duplicates, protecting against half-finished writes, and access control. A DBMS gives all of these. (A question in the papers asks which database fits a university with enrolments, prerequisites, grades, fee payments and refunds: the answer is an RDBMS, because the data is structured, linked, and needs transactions.)

In the relational model all data lives in tables.

Each row is one student, each column has one type, and the order of rows has no meaning.

A few more words the exam uses: redundancy (the same fact stored in many places) wastes space and causes mistakes, while replication (deliberate copies on different servers) protects against loss and helps reads. One real question gave "redundancy improves performance and reduces server load" and "replication ensures data is not lost if a copy is destroyed" as a pair, and the right call was that both statements were false as written, so read such statements slowly. An index is an extra lookup structure (like the index at the back of a book) whose job is to speed up searching; it does not encrypt or replicate anything.

Idea 2: ER diagrams and turning them into tables

An ER (entity-relationship) diagram is a plan drawn before any table is made. Entities are rectangles (Student, Course), attributes are ovals or a list inside the box, and relationships are lines (often a diamond) between entities, labelled with a verb ("enrols in").

How to read it. Read the line from each side: "One channel has many videos. One video belongs to one channel." That is one-to-many. Check both directions before you answer.

CREATE TABLE student(
  id    INTEGER PRIMARY KEY,
  name  TEXT NOT NULL,
  email TEXT UNIQUE
);
CREATE TABLE course(
  code    TEXT PRIMARY KEY,
  title   TEXT NOT NULL,
  credits INTEGER DEFAULT 4
);
CREATE TABLE enrolment(
  student_id  INTEGER REFERENCES student(id),
  course_code TEXT    REFERENCES course(code),
  marks       INTEGER CHECK(marks BETWEEN 0 AND 100),
  PRIMARY KEY (student_id, course_code)
);

How an examiner reads a model to find the relationship: if Enrollment has course_id = db.Column(db.Integer, db.ForeignKey("course.id")) and Course does not have a column pointing back, the FK is on the Enrollment side, so one course has many enrolments and each enrolment has one course: one-to-many. No link table, so not many-to-many.

Idea 3: SQL, the language of tables

Use SQLite (a database in a single file, built into Python). Statements end with ;. Keywords are case-insensitive, text values are in single quotes.

INSERT INTO student(name, email) VALUES ('Asha','a@x.in'), ('Ravi','r@x.in'), ('Meena','m@x.in');
INSERT INTO course(code, title) VALUES ('MAD1','App Dev 1'), ('MAD2','App Dev 2'), ('DBMS','Databases');
INSERT INTO enrolment VALUES (1,'MAD1',80), (1,'DBMS',60), (2,'MAD1',70);

SELECT name FROM student ORDER BY name DESC LIMIT 2;       -- Ravi, Meena
UPDATE enrolment SET marks = marks + 5 WHERE course_code = 'MAD1';
DELETE FROM enrolment WHERE marks < 70;

Run on those tables, SELECT name FROM student ORDER BY name DESC LIMIT 2 gives Ravi then Meena. After the update the marks are 85, 60, 75; after the delete (marks under 70) only the rows with 85 and 75 remain, so SELECT COUNT(*) FROM enrolment is 2.

SELECT Manufacturer, COUNT(*) FROM production
WHERE Quantity > 10
GROUP BY Manufacturer
HAVING COUNT(*) = 2;

SELECT Course, count(ID) AS No_Of_Students
FROM table_A GROUP BY Course
ORDER BY No_Of_Students ASC;

A SQLite quirk the papers use. With a table flowers(ID, Name, color) holding Jasmine (white), Rose, Lily, Lotus (all pink) and Red rose (red), the query SELECT count(ID), Name, color FROM flowers GROUP BY color HAVING count(color) < 2 returns 1 | Jasmine | white and 1 | Red rose | red (the pink group has 3 rows, so it is dropped). Name is not an aggregate nor in GROUP BY: other databases refuse this, SQLite quietly picks a value from the group (here the only one).

Joins

A join glues rows from two tables where a condition holds (normally FK equals PK).

SELECT s.name, e.course_code, e.marks
FROM student s JOIN enrolment e ON e.student_id = s.id
ORDER BY s.name, e.course_code;

Result: Asha DBMS 60, Asha MAD1 80, Ravi MAD1 70. Meena has no enrolment, so she disappears from an inner JOIN. A LEFT JOIN keeps every student: SELECT s.name, e.course_code FROM student s LEFT JOIN enrolment e ON e.student_id = s.id gives Asha twice, Ravi, and Meena | NULL. Forgetting the ON condition produces a cross join: 3 students times 3 courses is 9 rows.

NULL behaviour

NULL means "unknown", so almost every comparison with it is not true.

SELECT NULL = NULL;            -- NULL (not 1)
SELECT NULL IS NULL;           -- 1
SELECT 1 + NULL;               -- NULL

For a column x holding 1, NULL, 3: COUNT(*) is 3, COUNT(x) is 2 (NULLs are skipped), AVG(x) is 2.0, SUM(x) is 4, WHERE x <> 1 returns only the 3 (the NULL row is not returned), and you must write WHERE x IS NULL to find it.

Constraints

CREATE TABLE t(
  id   INTEGER PRIMARY KEY,
  name TEXT NOT NULL,
  age  INTEGER CHECK(age >= 0) DEFAULT 18
);
INSERT INTO t(name) VALUES ('Amit');   -- row (1, 'Amit', 18): DEFAULT filled age
INSERT INTO t(name, age) VALUES ('x', -1);  -- fails: CHECK constraint failed: age>=0
INSERT INTO t(age) VALUES (5);              -- fails: NOT NULL constraint failed: t.name

UNIQUE rejects a duplicate value (several NULLs are still allowed in SQLite). SQLite does not enforce foreign keys unless you run PRAGMA foreign_keys = ON; for each connection. That surprises people.

Idea 4: Normalisation and transactions (ACID)

Normalisation is the discipline of splitting tables to remove redundancy so each fact is stored once.

Example of a violation: an orders table with customer_name and customer_phone copied on every order. Change the phone once and some rows keep the old one (an update anomaly). Fix: a customer table and an FK.

A transaction is a group of statements treated as one unit. The classic: transferring 500 rupees means "subtract from A" and "add to B". If the power fails in between, money vanishes. The database promises ACID:

Python's built-in sqlite3 module shows it clearly:

import sqlite3
con = sqlite3.connect("shop.db")      # creates the file if missing
cur = con.cursor()
cur.execute("CREATE TABLE IF NOT EXISTS acct(name TEXT PRIMARY KEY, bal INTEGER)")
cur.execute("INSERT OR REPLACE INTO acct VALUES (?, ?)", ("A", 1000))
con.commit()                          # saved
cur.execute("UPDATE acct SET bal = bal - 500 WHERE name = 'A'")
con.rollback()                        # undone
print(cur.execute("SELECT bal FROM acct WHERE name='A'").fetchall())   # [(1000,)]
con.close()

Always pass values with ? placeholders, never by pasting strings (that invites SQL injection).

Idea 5: SQLAlchemy and the ORM

Writing raw SQL strings inside Python gets messy. An ORM maps class to table, object to row, attribute to column. SQLAlchemy has these parts:

• Engine: knows how to reach the database (create_engine("sqlite:///shop.db")).
• Connection / Session: the Session holds your pending changes and talks to the engine. You add objects, then commit once.
• Declarative base: the parent class of all your models.

from sqlalchemy import create_engine, Column, Integer, String, ForeignKey
from sqlalchemy.orm import declarative_base, sessionmaker, relationship

Base = declarative_base()

class Dept(Base):
    __tablename__ = "dept"
    id    = Column(Integer, primary_key=True)
    name  = Column(String, nullable=False)
    staff = relationship("Emp", back_populates="dept")

class Emp(Base):
    __tablename__ = "emp"
    id      = Column(Integer, primary_key=True)
    name    = Column(String)
    dept_id = Column(Integer, ForeignKey("dept.id"))
    dept    = relationship("Dept", back_populates="staff")

engine = create_engine("sqlite:///:memory:")
Base.metadata.create_all(engine)          # CREATE TABLE for every model
s = sessionmaker(bind=engine)()           # a Session

d = Dept(name="CS")
d.staff.append(Emp(name="Ria"))           # link through the relationship
s.add(d)
s.commit()

e = s.query(Emp).first()
print(e.name, e.dept.name, d.staff[0].name)   # Ria CS Ria

What happened: ForeignKey("dept.id") is the database-level link (a column). relationship(...) is the Python-level convenience: d.staff is a list of Emp, and e.dept is one Dept. back_populates says the two relationship attributes are two ends of the same link (use the same names on both sides). The older shortcut backref="dept" on one side creates the other side automatically. The commit wrote both rows and filled dept_id for you.

A model declaration must match the table: a question gave CREATE TABLE "Items" (ID INTEGER, name TEXT, cost INTEGER, PRIMARY KEY(ID AUTOINCREMENT)) and the correct class has __tablename__ = "Items", ID = Column(Integer, primary_key=True, autoincrement=True), name = Column(String), cost = Column(Integer). Same class name, table name and column names as the SQL.

Commit and rollback. s.add(Emp(name="Tom")); s.rollback() throws the pending Tom away, so s.query(Emp).count() is still 1.

Idea 6: Flask-SQLAlchemy and CRUD

Flask-SQLAlchemy wires SQLAlchemy into Flask so you write less setup. The names are different, so learn them as a set.

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from sqlalchemy import func

app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///shop.sqlite3"
db = SQLAlchemy(app)                      # or db = SQLAlchemy() then db.init_app(app)

class Author(db.Model):
    id    = db.Column(db.Integer, primary_key=True)
    name  = db.Column(db.String(80), nullable=False)
    books = db.relationship("Book", backref="author", lazy=True)

class Book(db.Model):
    id        = db.Column(db.Integer, primary_key=True)
    title     = db.Column(db.String(100), nullable=False, unique=True)
    price     = db.Column(db.Integer, default=100)
    author_id = db.Column(db.Integer, db.ForeignKey("author.id"))
    def __repr__(self): return f"<Book {self.title}>"

with app.app_context():                   # needed outside a request
    db.create_all()                       # creates missing tables only

Notes: the table name is the lower-case class name (Author becomes author), which is why ForeignKey("author.id") uses lower case. In Flask-SQLAlchemy 3 the models and db.session need an application context (inside a view you already have one; in a script use with app.app_context():). create_all() does not alter a table that already exists: after changing a model, delete the .sqlite3 file (or use migrations).

with app.app_context():
    db.create_all()
    a = Author(name="Asha")
    b1 = Book(title="DB 101", price=300, author=a)
    b2 = Book(title="SQL", author=a)
    db.session.add_all([a, b1, b2]); db.session.commit()
    print(a.books)                        # [<Book DB 101>, <Book SQL>]
    print(b1.author.name, b2.price)       # Asha 100
    print(Book.query.filter(Book.price > 150).all())      # [<Book DB 101>]
    print(db.session.query(func.max(Book.price)).scalar())   # 300
    b = Book.query.filter_by(title="SQL").first()
    b.price += 50; db.session.commit()
    print(b.price)                        # 150
    db.session.delete(b); db.session.commit()
    print(Book.query.all())               # [<Book DB 101>]

Constructing objects. SQLAlchemy's default constructor takes keyword arguments only. Book("a", 1, 1) raises TypeError: __init__() takes 1 positional argument but 4 were given. Use Book(title="a", price=1). The right order is create, add, then commit; commit before add saves nothing.

Violating a constraint. Adding a second book titled "SQL" and committing raises IntegrityError (the unique=True). The session is then in a failed state, so always call db.session.rollback() in the except block.

user1 = Student.query.filter_by(first_name="John").first()
user1.first_name = "Harry"
user1.last_name = "Luther"
db.session.commit()
for s in Student.query.all():
    print(s.first_name, s.last_name)

items = Product.query.filter_by(type="edible", form="liquid").all()
for item in items:
    item.type = "perishable"
    item.quantity += 450
db.session.commit()

repairs = GlassRepair.query.all()
result = [(r.id, (r.fixed_at - r.broken_at).days) for r in repairs]

Combining conditions

Order.query.filter(Order.status == "PAID").filter(Order.amount > 500).all()   # correct
Order.query.filter(Order.status == "PAID", Order.amount > 500).all()          # correct, same
from sqlalchemy import and_, or_
Order.query.filter(and_(Order.status == "PAID", Order.amount > 500)).all()    # correct
Order.query.filter(Order.status == "PAID" and Order.amount > 500)             # TypeError!

The last one uses Python's and on two SQL expressions, which fails with TypeError: Boolean value of this clause is not defined. Use , / chained .filter / and_ / & (with brackets). filter_by takes keyword equality only (filter_by(status="PAID")); filter takes expressions (Order.amount > 500).

Exam radar

Quick quiz

Viva: say it out loud

Recap

MAD1 week 5: Controllers: Flask routes and business logic

Official syllabus line: Controllers - Business logic

The one-minute story

By the end of this week you can:

• write routes with variable parts, allowed methods and url_for;
• predict the output of small Flask apps (trailing slashes, wrong methods, abort, error handlers, redirects);
• read form data, query strings and JSON from the request object;
• use flash, session, redirect-after-POST and error handlers;
• organise a bigger app with blueprints and an application factory, and explain MVC;
• put validation, duplicate checks, permission checks and delete rules in the controller.

Words you need

Idea 1: A Flask app and its folders

Install and run in a virtual environment, so this project's packages do not clash with others:

python -m venv venv
venv\Scripts\activate          # on Windows; on Mac/Linux: source venv/bin/activate
pip install flask flask-sqlalchemy
pip freeze > requirements.txt  # anyone can rebuild with: pip install -r requirements.txt

A typical project:

my_app/
  app.py            controller code (routes) and app setup
  models.py         model classes (db.Model)
  templates/        Jinja HTML files (render_template looks here)
  static/           css, js, images (served at /static/...)
  requirements.txt
  venv/             never commit this

The smallest app:

from flask import Flask
app = Flask(__name__)

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

if __name__ == "__main__":
    app.run(debug=True)       # http://127.0.0.1:5000/

Flask(__name__) tells Flask where this file lives, so it can find templates/ and static/ next to it. The default folder names are templates and static, and you can change them: Flask(__name__, template_folder="my_templates").

Decorators in one minute

@app.route("/") is a decorator: a function that takes your function and returns a wrapped version. Stacked decorators apply from the bottom up.

def logger(func):
    def inner():
        print("start")
        r1 = func(); r2 = func()
        return r1, r2
    return inner

@logger
def get_data():
    return "Data"

print(get_data())

Output: start, then ('Data', 'Data'). The name get_data now refers to inner, which prints first and runs the original twice. With two decorators (@modify above @update), update wraps the function first and modify wraps the result. A real paper asked for modify (reverses a list) over update (halves each value) over a function that squares [2,4,1,7,5,9]: squares [4,16,1,49,25,81], then halve [2,8,0.5,24.5,12.5,40.5], then reverse: [40.5, 12.5, 24.5, 0.5, 8.0, 2.0].

Idea 2: Routing and URL rules

@app.route(rule, methods=[...]) binds a URL to a function. Anything in angle brackets is a variable part captured and passed as an argument.

@app.route("/greet/<name>")          # name is a string without slashes
def greet(name): return f"Hi {name}"

@app.route("/n/<int:n>")             # converter: only digits, passed as int
def plus_one(n): return str(n + 1)

Converters: string (default), int, float, path (allows slashes), uuid.

Trailing slash rules

@app.route("/home")
def home1(): return "This is homepage 1"

@app.route("/home/")
def home2(): return "This is homepage 2"

A rule without a trailing slash matches only /home. A rule with the slash matches /home/, and if a user types /home for a rule that ends in a slash, Flask redirects them to /home/. With both rules defined as above, /home gives homepage 1 and /home/ gives homepage 2, so the real answer for /home/ was "This is homepage 2".

Methods

A route answers GET only unless you list other methods.

@app.route("/only", methods=["POST"])
def only(): return "posted"

A browser address bar sends GET, so /only gives 405 Method Not Allowed. If the app has @app.errorhandler(405) returning "Please check the web request", that message is what you see. In one real question the route was /home/<username> with methods=['POST'], the URL typed in the browser was /home/user_4 (a GET), and the code inside (including abort(404)) never ran: the 405 handler's text appeared. Check the method before you trace the body.

url_for builds URLs from endpoint names

with app.test_request_context():
    print(url_for("greet", name="J"))        # /greet/J
    print(url_for("plus_one", n=3, x=1))     # /n/3?x=1   (extra values become the query string)
    print(url_for("static", filename="a.css"))   # /static/a.css

Use url_for instead of typing paths, so renaming a URL does not break your links. In templates: ` {{ url_for('greet', name='J') }} . Missing a required variable raises BuildError. In a real paper url_for('profile', student_name='John', student_id=101) for the route /student/<student_name>/<student_id> printed /student/John/101`, not a query string.

Idea 3: The request object and responses

Import it: from flask import request.

request.args["x"] raises a 400 Bad Request if x is missing, while request.args.get("x") returns None. A POST whose body is JSON but with no JSON content type makes request.json fail with 415 Unsupported Media Type (Flask 3).

What a view can return:

valid_users = [{"uid": "student", "pwd": "12345"}, {"uid": "professor", "pwd": "54321"}]

@app.route("/signin")
def login():
    args = request.args
    for vu in valid_users:
        if vu["uid"] == args["uid"] and vu["pwd"] == args["pwd"]:
            return "You are authorized!!"
        else:
            return "You are unauthorized!!"

Dict versus jsonify. For the route that returns {"Restaurant 1": "Hotel Alpine", ...} the content type is application/json. jsonify({"The list of gadgets": Gadgets}) gives an object with one key whose value is the whole list of dicts (not a merged dictionary). For jsonify(courses) where courses is a list of two dicts, status is 200 and mimetype application/json.

Idea 4: Redirects, errors, flash messages and sessions

Redirect. redirect(url_for("index")) sends 302 and the browser requests the new URL itself. In a real question, /first_index/XYZ redirected to index1's URL (/XYZ) and /first_index/ABC redirected to /second_index, which rendered a page with a "Go back" link.

Errors. abort(404) raises an HTTP error. Customise the page with a handler:

@app.errorhandler(404)
def not_found(e):
    return "Course not available!", 404

If you do not give the status after the text, the page still has status 200: fine for the browser output, wrong for tests. Common codes: 400 Bad Request, 401 Unauthorized, 403 Forbidden, 404 Not Found, 405 Method Not Allowed, 500 Server Error. In recent Flask, a handler for an unknown code such as 407 will not even register, so such questions always hinge on which error happens first (here the 405).

Flash messages show a one-time note on the next page.

from flask import flash, redirect, url_for, request

@app.route("/add", methods=["GET", "POST"])
def add():
    if request.method == "POST":
        name = request.form.get("name", "").strip()
        if not name:
            flash("Name required")
            return redirect(url_for("add"))
        flash("Added")
        return redirect(url_for("index"))
    return render_template("add.html")

In the template: ` {% for m in get_flashed_messages() %}<p>{{ m }}</p>{% endfor %} . Flash needs a secret_key`, because messages ride in the session.

Sessions remember a user between requests. The data is stored in a cookie in the browser, signed with secret_key: the user can read it (it is only base64) but cannot change it without Flask noticing.

app.secret_key = "change-me"      # or app.config["SECRET_KEY"]

session["uid"] = 7                # log in
uid = session.get("uid")          # read; None if absent
session.pop("uid", None)          # log out

With no secret key, using session raises RuntimeError: The session is unavailable because no secret key was set. Do not store passwords or big objects in the session, and never commit a real secret key to a public repository.

Idea 5: Post/Redirect/Get, validation and business logic

Business logic is the part that says what your app allows. It belongs in the controller (or a service function it calls), never only in the HTML.

There are two layers of validation. Frontend validation happens in the browser (required, type="email", min, max, pattern in the HTML) and is easy to bypass. Backend validation happens in the Python view and is the one you must trust. A real MSQ listed a form that had required attributes and a Python check if name == "": return redirect('/add') as having both, and a form whose HTML is built by the Python function as dynamically generated. One more subtlety from that paper: a CSS rule input:valid {border: 2px solid red} colours the border when the input is valid, not when it is blank.

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(50), unique=True, nullable=False)
    tasks = db.relationship("Task", backref="owner", cascade="all, delete-orphan")

class Task(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(100), nullable=False)
    user_id = db.Column(db.Integer, db.ForeignKey("user.id"), nullable=False)

@app.route("/tasks/add", methods=["GET", "POST"])
def add_task():
    uid = session.get("uid")
    if uid is None:
        abort(401)                                   # not logged in
    if request.method == "POST":
        title = request.form.get("title", "").strip()
        if not title:
            flash("Title is required")               # validation
            return redirect(url_for("add_task"))
        if Task.query.filter_by(user_id=uid, title=title).first():
            flash("Duplicate task")                  # duplicate check
            return redirect(url_for("add_task"))
        db.session.add(Task(title=title, user_id=uid))
        db.session.commit()
        flash("Task added")
        return redirect(url_for("list_tasks"))       # PRG
    return render_template("add.html")

@app.route("/tasks/<int:task_id>/delete", methods=["POST"])
def delete_task(task_id):
    t = db.session.get(Task, task_id)
    if t is None:
        abort(404)
    if t.user_id != session.get("uid"):
        abort(403)                                   # authorisation
    db.session.delete(t)
    db.session.commit()
    return redirect(url_for("list_tasks"))

Cascade and delete rules. If a user owns tasks and you delete the user, the tasks would be left pointing at nothing. Decide a rule: cascade="all, delete-orphan" deletes the children too; or refuse deletion while children exist (check and flash("Remove tasks first")). The viva loves this question.

Idea 6: Blueprints, configuration and the MVC mapping

MVC. Model = db.Model classes and the database. View = Jinja templates (what the user sees). Controller = the route functions: they read the request, apply business rules, call models and pick a view. A good app keeps SQL out of templates and HTML out of models.

Blueprints split a big app into parts (auth, tasks, admin). Each blueprint has its own routes, and the app registers it with a URL prefix.

from flask import Blueprint
tasks_bp = Blueprint("tasks", __name__, url_prefix="/tasks")

@tasks_bp.route("/")
def list_tasks(): ...

app.register_blueprint(tasks_bp)

The endpoint name now has the blueprint's name in front: url_for("tasks.list_tasks") gives /tasks/. Inside the same blueprint you can write url_for(".list_tasks").

Configuration is a dictionary on the app:

app.config["SECRET_KEY"] = "change-me"
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///app.sqlite3"
app.config.update(DEBUG=True)         # many keys at once
app.config.from_object("config.Dev")  # or from a class or file

Application factory. Instead of a global app, write a function that builds the app. This lets tests create a fresh app each time and avoids import loops.

db = SQLAlchemy()                     # created without an app

def create_app(config=None):
    app = Flask(__name__)
    app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///:memory:"
    app.config["SECRET_KEY"] = "change-me"
    app.config.update(config or {})
    db.init_app(app)                  # connect db to this app
    app.register_blueprint(tasks_bp)
    with app.app_context():
        db.create_all()
    return app

if __name__ == "__main__":
    create_app().run(debug=True)

Whether your course project needs a factory depends on its size: a single app.py is acceptable. Know the idea.

Exam radar

Quick quiz

Viva: say it out loud

Recap

MAD1 week 6: APIs and REST: OpenAPI and Flask-RESTful

Official syllabus line: APIs and REST APIs

The one-minute story

By the end of this week you can:

• explain what an API is and name the REST constraints;
• design URLs and choose the right verb and status code for each action;
• write a Flask-RESTful API with Resource, reqparse, marshal_with and abort;
• predict the output of Flask-RESTful code and of curl commands (including which call gives an error);
• document an API in OpenAPI (Swagger) YAML;
• test an API with curl, Postman or Python requests.

Words you need

Idea 1: What an API is and what makes it REST

The server exposes data, and any client can use it: a browser page, an Android app, or a Python script. They agree on URLs, methods and JSON.

API route versus web page route. A web route returns HTML (render_template) and is meant for a person; an API route returns JSON and a status code, and its errors are JSON too (not a styled error page). In one real question the route / returned a Python dict and the answer was that its content type is application/json; and the route returning jsonify({"The list of gadgets": Gadgets}) was a valid API access point: both / and /home can be considered API endpoints.

JSON in 60 seconds

{
  "name": "Asha",
  "age": 27,
  "married": false,
  "phones": ["212-555-1234", 2125551234],
  "address": {"city": "Chennai", "pin": null}
}

Rules: double quotes only on keys and strings, no trailing comma, no comments, values are string, number, true, false, null, object or array. Python mapping: object is dict, array is list, true is True, null is None. In JavaScript, JSON.parse('{"name":"icecream","flavor":"vanilla","type":"cup"}') gives an object, and obj.name + ", " + obj.flavor + ", " + obj.type prints icecream, vanilla, cup: access is by key name, not by position.

Idea 2: Designing the API: URLs, verbs, status codes

Name resources with nouns, in plural, and put the action in the verb, not in the URL.

Not RESTful: GET /api/deleteBook?id=3 or /getAllBooks. (A real exam question used URLs like /delete/val1 and a PUT request: because a route only answered PUT, a plain GET gave "none of these" = 405.)

The CRUD mapping: Create = POST, Read = GET, Update = PUT (or PATCH for a partial update), Delete = DELETE.

Safe and idempotent

Status codes for APIs

Idea 3: Flask-RESTful: Api, Resource and methods

Install: pip install flask-restful. Each Resource is a class; its methods are named get, post, put, delete and are called by the verb. You register it with add_resource(Class, url...).

from flask import Flask, request
from flask_restful import Api, Resource

app = Flask(__name__)
api = Api(app)

students = {1: {"name": "Arjun", "grade": "A"}}

class Student(Resource):
    def get(self, student_id):
        if student_id in students:
            return students[student_id], 200
        return {"message": "Student not found"}, 404

    def put(self, student_id):
        data = request.json
        if student_id in students:
            students[student_id]["grade"] = data.get("grade", students[student_id]["grade"])
            return {"message": "Student record updated", "student": students[student_id]}, 200
        return {"message": "Student not found"}, 404

api.add_resource(Student, "/student/<int:student_id>")

I ran this with the test client. A GET /student/1 returns status 200 and {"name": "Arjun", "grade": "A"}. GET /student/10 returns 404 and {"message": "Student not found"}. PUT /student/1 with JSON {"grade": "A+"} returns 200 and the updated student (grade A+). PUT /student/4 returns 404 because 4 is not in the dictionary: it does not create a record. A URL like /student/abc does not match <int:...> and gives the plain 404 page.

What Flask-RESTful does for you: a returned dict or list becomes JSON; a returned tuple (body, status) sets the status; the response mimetype is application/json. Returning None gives JSON null with status 200.

class UserResource(Resource):
    def get(self):
        return {"status": "GET request"}, 200
    def post(self, user_id):
        return {"status": "POST request", "user_id": user_id}, 201

api.add_resource(UserResource, "/users", "/users/<int:user_id>")

class MyApi(Resource):
    def get(self):  return {"greet": "Hello from GET Api!"}
    def put(self):  return {"greet": "Hello from PUT Api!"}

api.add_resource(MyApi, "/api/get", "/api/put", "/api/post")

Idea 4: Input and output: reqparse, marshal_with, abort

reqparse declares which inputs you expect, converts their type and rejects bad input with a 400.

from flask_restful import reqparse

parser = reqparse.RequestParser()
parser.add_argument("n", type=int, required=True, help="n must be an int")

class MyResponse(Resource):
    def post(self):
        args = parser.parse_args()
        return args                      # a dict-like, so it becomes JSON

api.add_resource(MyResponse, "/")

curl -X POST http://127.0.0.1:5000 -H "Content-Type: application/json" -d "{\"n\":3}"

The reply is {"n": 3} (status 200). With {"n": "x"}, or with no n at all, the reply is 400 and {"message": {"n": "n must be an int"}}. If you send JSON with -d but leave out the Content-Type header, Flask 3 refuses it with a 415 error: so for JSON, curl needs -H "Content-Type: application/json" (as the real question's right answers had). Plain -d "status=active&role=admin" sends form-encoded data (not JSON); with -X PUT it is a PUT in form format, which was the right answer to a real question.

By default reqparse looks in the JSON body and the form. For values from the query string, say so: parser.add_argument("page", type=int, default=1, location="args"). (I found that on Flask 3 a GET with no JSON header and reqparse's default location raises 415, so always set location="args" for GET parameters.)

marshal_with filters and converts your output to the shape in a fields dictionary.

from flask_restful import fields, marshal_with

out_fields = {"Id": fields.Integer, "name": fields.String}

class MyApi(Resource):
    @marshal_with(out_fields)
    def post(self):
        info = parser.parse_args()     # parser has Id, name, email
        return info

curl -X POST ... -d '{"Id":3, "name":"user_1", "email":"user_1@gmail.com"}' returns {"Id": 3, "name": "user_1"}. The email is dropped because it is not in the fields dictionary, and "Id": 3 is a number (fields.Integer), not the string "3". A real question had the same code and its right option was {"Id": 3, "name": "user_1"}. The get method in that class returned a plain dict with the keys Identity, Name, E-mail: no marshal there, so keys are what you wrote.

marshal_with(fields, envelope="book") wraps the output as {"book": {...}}. Fields: fields.Integer, fields.String, fields.Float, fields.Boolean, fields.List(...), fields.Nested(...).

abort with a message. Flask-RESTful has its own abort.

from flask_restful import abort
abort(404, message="Book 99 not found")     # JSON: {"message": "Book 99 not found"}, status 404

from flask import Flask
from flask_restful import Api, Resource, reqparse, fields, marshal_with, marshal, abort

app = Flask(__name__)
api = Api(app)

ITEMS = [{"id": i, "title": f"Book {i}", "price": i * 10, "secret": "x"} for i in range(1, 6)]
book_fields = {"id": fields.Integer, "title": fields.String, "price": fields.Float}

list_parser = reqparse.RequestParser()
list_parser.add_argument("page", type=int, default=1, location="args")
list_parser.add_argument("per_page", type=int, default=2, location="args")
list_parser.add_argument("q", location="args")

new_parser = reqparse.RequestParser()
new_parser.add_argument("title", required=True, help="title is required")
new_parser.add_argument("price", type=int, default=0)

class Books(Resource):
    def get(self):
        a = list_parser.parse_args()
        rows = [b for b in ITEMS if not a["q"] or a["q"] in b["title"]]
        start = (a["page"] - 1) * a["per_page"]
        return {"page": a["page"], "total": len(rows),
                "items": [marshal(b, book_fields) for b in rows[start:start + a["per_page"]]]}

    @marshal_with(book_fields, envelope="book")
    def post(self):
        a = new_parser.parse_args()
        b = {"id": len(ITEMS) + 1, "title": a["title"], "price": a["price"]}
        ITEMS.append(b)
        return b, 201

class Book(Resource):
    @marshal_with(book_fields)
    def get(self, bid):
        for b in ITEMS:
            if b["id"] == bid:
                return b
        abort(404, message=f"Book {bid} not found")

api.add_resource(Books, "/api/v1/books")
api.add_resource(Book, "/api/v1/books/<int:bid>")

salaries = {1: {"name": "Ravi", "basic": 14500}, 2: {"name": "David", "basic": 9500}}

class Salaries(Resource):
    def do_something(self):
        for s in salaries.keys():
            salaries[s]["hra"] = salaries[s]["basic"] * 0.10
    def get(self):
        self.do_something()
        return salaries

api.add_resource(Salaries, "/api/salaries")

Idea 5: Calling and testing an API

curl options to know:

curl http://127.0.0.1:5000/api/v1/books/1
curl -X POST http://127.0.0.1:5000/api/v1/books -H "Content-Type: application/json" -d "{\"title\":\"New\",\"price\":55}"
curl -v http://127.0.0.1:5000/api/v1/books
curl -X DELETE http://127.0.0.1:5000/api/v1/books/1

On Windows cmd, JSON in -d must use double quotes with \" escapes (as in line 2); in Git Bash or Linux you can use single quotes. A real question asked which option shows detailed request/response information for debugging: curl -v (-i just adds the response headers to the output).

From Python with the requests library:

import requests
r = requests.post("http://127.0.0.1:5000/api/v1/books", json={"title": "New", "price": 55})
print(r.status_code)      # 201
print(r.json())           # {'book': {...}}
r = requests.get("http://127.0.0.1:5000/api/v1/books", params={"page": 2})

json= sets the body and the Content-Type header for you. Postman is a point-and-click tool for the same: choose a method, enter the URL, put JSON in the Body tab (raw, JSON), and read status and body.

curl -X PUT http://127.0.0.1:5000/student/1 -H "Content-Type: application/json" -d "{\"grade\":\"B\"}"

Idea 6: Documenting with OpenAPI (Swagger)

Documentation says what endpoints exist, their parameters, body and responses. In the exam, "what describes available endpoints, request parameters and response formats?" has the answer API documentation / API reference; and "OpenAPI Specification is a way to describe interfaces for RESTful APIs" (it is not a programming language, performance tester or auth library).

An OpenAPI file is YAML (or JSON) with these top-level keys:

openapi: 3.0.3
info:
  title: Books API
  version: "1.0"
paths:
  /api/v1/books:
    get:
      summary: List books
      parameters:
        - name: page
          in: query
          schema: {type: integer, default: 1}
      responses:
        "200":
          description: A page of books
          content:
            application/json:
              schema:
                type: array
                items: {$ref: "#/components/schemas/Book"}
    post:
      summary: Create a book
      requestBody:
        required: true
        content:
          application/json:
            schema: {$ref: "#/components/schemas/NewBook"}
      responses:
        "201": {description: Created}
        "400": {description: Missing or invalid title}
  /api/v1/books/{bid}:
    get:
      summary: Get one book
      parameters:
        - name: bid
          in: path
          required: true
          schema: {type: integer}
      responses:
        "200": {description: The book}
        "404": {description: No such book}
components:
  schemas:
    Book:
      type: object
      properties:
        id: {type: integer}
        title: {type: string}
        price: {type: number}
    NewBook:
      type: object
      required: [title]
      properties:
        title: {type: string}
        price: {type: integer}

Points to notice: path variables are written {bid} (curly braces) here, but <int:bid> in Flask; parameters have in: (query, path, header); response codes are strings; the YAML is indentation-sensitive (use spaces, never tabs). Swagger UI or the Swagger Editor reads this file and gives you a page where you can read and try the API.

Idea 7: Pagination, filtering, versioning and error responses

• Pagination: GET /books?page=2&per_page=10. The server returns one slice and often the total, so clients do not download everything.
• Filtering and sorting: GET /books?author=Asha&sort=price. Filters go in the query string, resource identity goes in the path.
• Versioning: put the version in the path (/api/v1/) or a header, so old clients keep working.
• Error responses: always JSON with the right status, such as {"message": "Book 99 not found"} (404). Flask-RESTful does this for you when you use its abort.
• Cacheable GET: GET responses can be cached; POST responses normally not.

Exam radar

Quick quiz

Viva: say it out loud

Recap

MAD1 week 7: Backend systems: indexing, search, caching and logging

Official syllabus line: Backend Systems

The one-minute story

By the end of this week you can:

• predict the output of Python logging programs for any level and format;
• debug a Flask app with debug mode, pdb, the Flask shell and tracebacks;
• create an index, read EXPLAIN QUERY PLAN, and say when an index helps and when it hurts;
• build a full-text search with SQLite FTS5 and keep it in sync with triggers;
• explain caching (client vs server, TTL, keys, invalidation, Cache-Control, ETag) and use Flask-Caching;
• calculate latency, throughput, bandwidth, data volume and requests per second;
• explain scaling, load balancers, stateless servers, batch jobs, N+1 queries and pagination.

Words you need

Idea 1: Logging (the app's diary)

print() is fine on day one. A real app needs levels, timestamps, files, and the ability to switch noise on and off without editing every line. That is the logging module.

import logging
logging.basicConfig(level=logging.INFO,
                    format='%(levelname)s:%(name)s:%(message)s')
log = logging.getLogger("shop")
log.debug("hidden")             # 10 < 20, suppressed
log.info("hello %s", "ravi")    # shown
log.warning("low stock")
log.error("fail")
log.critical("down")

Output (checked by running it):

INFO:shop:hello ravi
WARNING:shop:low stock
ERROR:shop:fail
CRITICAL:shop:down

Handlers, formatters, loggers. A logger (named, e.g. "shop") creates records. A handler sends them somewhere (StreamHandler = console, FileHandler("app.log")). A formatter turns the record into text using fields like %(asctime)s, %(levelname)s, %(message)s, %(name)s. Each handler can have its own level, so you can print everything to the screen but save only errors to a file:

fh = logging.FileHandler("app.log")
fh.setLevel(logging.ERROR)
fh.setFormatter(logging.Formatter("%(asctime)s %(levelname)s %(message)s"))
log.addHandler(fh)
log.warning("seen on console only")
log.error("seen on console and in app.log")

basicConfig() is a one-line setup of the root logger. Other details that are asked:

• logging.exception("msg") is error plus the full traceback; use it inside except.
• Use lazy formatting: log.info("user %s", name), not an f-string, so the string is built only if the level is on.
• basicConfig does nothing if the root logger already has handlers; call it once, early.
• Flask's logger is app.logger (named after your app). It logs unhandled exceptions as ERROR with a traceback and returns 500 to the browser. In debug mode Flask also shows werkzeug's request lines.

@app.route("/")
def home():
    app.logger.info("visited home")
    return "ok"

import logging, sys
logging.basicConfig(level=logging.INFO,
                    format='%(levelname)s - %(message)s')
num1, num2 = int(sys.argv[1]), int(sys.argv[2])
logging.info("This operation checks factors")
if num1 % num2 == 0:
    logging.debug(f"{num2} is a factor of {num1}")
else:
    logging.warning(f"{num2} is not the factor of {num1}")

Idea 2: Debugging

Debug mode. app.run(debug=True) (or flask --app app run --debug) does two things: it auto-reloads when you save a file, and it shows an interactive error page with the traceback in the browser. Never use it in production, because it lets anyone who sees the page run code on your server.

Reading a traceback. Read it from the bottom: the last line is the exception type and message; the line above shows the exact line of your code that failed; the lines above show who called whom.

Traceback (most recent call last):
  File "app.py", line 11, in b
    return 1/0
ZeroDivisionError: division by zero

pdb, the Python debugger. Put breakpoint() (or import pdb; pdb.set_trace()) where you want to stop. Execution pauses with a (Pdb) prompt:

Flask shell. flask --app app shell opens a Python prompt with the app context already pushed, so db, models and queries work right away. It is the fastest way to test a query or insert test data.

flask --app app shell
>>> User.query.count()

Idea 3: Database indexing

Without help, SELECT * FROM student WHERE city='c7' makes SQLite read every row (a full table scan, cost proportional to n). An index is a separate sorted structure, like the index at the back of a book: it maps a column value to the rows that hold it.

B-tree intuition. Real indexes are B-trees: a short, wide tree whose nodes hold many sorted keys. To find a value you go from the root down a few levels, choosing the right branch at each node. For a million rows a binary search needs about 20 comparisons; a B-tree with 100 keys per node needs only about 3 levels. Cost grows with the logarithm of the table size, not the size itself.

import sqlite3
c = sqlite3.connect(":memory:")
c.execute("create table student(id integer primary key, name text, city text, marks int)")
c.executemany("insert into student(name,city,marks) values(?,?,?)",
              [("s%d" % i, "c%d" % (i % 50), i % 100) for i in range(10000)])
q = "select * from student where city='c7'"
print(c.execute("explain query plan " + q).fetchall())
c.execute("create index idx_city on student(city)")
print(c.execute("explain query plan " + q).fetchall())

Real output (the middle numbers differ by version):

[(2, 0, 216, 'SCAN student')]
[(3, 0, 62, 'SEARCH student USING INDEX idx_city (city=?)')]

SCAN = reads all rows. SEARCH ... USING INDEX = uses the index. EXPLAIN QUERY PLAN shows what SQLite plans to do without running the query.

In Flask-SQLAlchemy: city = db.Column(db.String, index=True) creates the index with the table. Foreign key columns used in joins are good candidates.

Idea 4: Full-text search with SQLite FTS5

WHERE body LIKE '%flask%' scans everything and cannot rank results. FTS5 is an SQLite extension that builds an inverted index (word -> list of rows containing it). You create a virtual table: it looks like a table but is stored in special search structures.

c.execute("create virtual table notes using fts5(title, body)")
c.execute("insert into notes values('Flask intro','Flask is a micro framework'),"
          "('Jinja','Templates for Flask apps'),('SQL','Indexes make queries fast')")
print(c.execute("select title from notes where notes match 'flask'").fetchall())
print(c.execute("select title from notes where notes match 'micro OR index*'").fetchall())

[('Flask intro',), ('Jinja',)]
[('Flask intro',), ('SQL',)]

• MATCH searches words; 'micro OR index*' uses OR and the prefix star index* (matches indexes). Also AND, NOT and quoted phrases '"micro framework"'.
• Matching is by whole words (the default tokenizer does no stemming): cache does not match caching; use cache*.
• Order by relevance with ORDER BY rank; highlight with snippet(...) or highlight(...).

Keeping it in sync. If your real data lives in a normal table post, make the FTS table an external-content table and add triggers (automatic actions that run after insert, update, delete) so the search index never goes stale:

create table post(id integer primary key, title text, body text);
create virtual table post_fts using fts5(title, body, content='post', content_rowid='id');
create trigger post_ai after insert on post begin
  insert into post_fts(rowid,title,body) values (new.id,new.title,new.body);
end;
create trigger post_ad after delete on post begin
  insert into post_fts(post_fts,rowid,title,body) values('delete',old.id,old.title,old.body);
end;
create trigger post_au after update on post begin
  insert into post_fts(post_fts,rowid,title,body) values('delete',old.id,old.title,old.body);
  insert into post_fts(rowid,title,body) values (new.id,new.title,new.body);
end;

Search and join back to the real rows: select p.id,p.title from post_fts f join post p on p.id=f.rowid where post_fts match 'cache*'. We tested all three triggers: after an update the new words match, after a delete the row disappears from results.

Idea 5: Caching

A cache stores the result of expensive work (a database query, a rendered page, an API call) so the next identical request is answered instantly. Why: lower latency for the user, less load on the server and database, lower cost.

Server-side with Flask-Caching. (Install flask-caching.)

from flask_caching import Cache
cache = Cache(app, config={"CACHE_TYPE": "SimpleCache", "CACHE_DEFAULT_TIMEOUT": 60})

@app.route("/slow")
@cache.cached(timeout=30)          # whole response cached for 30 s
def slow():
    ...

@cache.memoize(timeout=30)         # cache by function arguments
def square(x): ...

We ran this: two calls of /slow ran the function once (the second came from the cache). square(4) twice ran once, but square(5) would compute again, because the cache key includes the arguments. A cache key is the label under which the result is stored: for @cache.cached it is the request path, for memoize it is the function name plus arguments.

Client-side caching with HTTP headers.

• Cache-Control: public, max-age=60 - any cache may reuse this response for 60 s without asking. private = only the user's browser. no-store = never keep it.
• ETag - a fingerprint of the response ("v1"). Next time the browser sends If-None-Match: "v1". If unchanged the server replies 304 Not Modified with no body: the browser reuses its copy and saves bandwidth. If changed: 200 with the new body.

@app.route("/data")
def data():
    resp = make_response('{"v": 1}')
    resp.set_etag("v1")
    resp.headers["Cache-Control"] = "public, max-age=60"
    return resp.make_conditional(request)

Tested: first request 200 with ETag: "v1"; second request with If-None-Match: "v1" gave 304 and an empty body.

REST APIs and caching. Only safe, idempotent reads (GET) are meant to be cached. POST, PUT, DELETE change data and are not cached by default. A paper asked which statements about REST caching were false; the false ones were: "caching degrades service and increases server load", "browsers treat all GET and POST requests as cacheable by default", and "caching optimises the network by increasing latency". Caching reduces latency and load; only GET is cacheable by default.

Idea 6: Performance vocabulary and arithmetic

Latency is "how long until the first byte" (delay). Throughput is "how much per second" (rate). Bandwidth is the maximum rate a link or memory can carry. A highway analogy: latency is the travel time of one car; bandwidth is the number of lanes.

Memory hierarchy (fast and small at the top, slow and large at the bottom):

So "highest latency" = HDD, "lowest density" = registers, "lowest throughput" = HDD. For small, hot data wanting very low latency (such as frequently used records), the answer in the papers is SRAM-like cache memory.

The arithmetic. Convert units first: 1 byte = 8 bits; use the question's own definition (usually 1 KB = 1000 B, 1 MB = 1000 KB).

Other quick formulas: disk worst-case rotational latency = one full rotation = 60000 / RPM milliseconds (6000 RPM gives 10 ms, 5000 RPM gives 12 ms; the average is half). HDD throughput = data per revolution x revolutions per second: to match an SSD of 180 MB/s with 4.8 Mbit (0.6 MB) per revolution you need 300 rev/s = 18000 RPM.

Idea 7: Scaling, stateless servers, background jobs

• Scale up (vertical): a bigger machine (more RAM, CPU). Simple, but has a ceiling and one point of failure.
• Scale out (horizontal): more machines behind a load balancer, which spreads requests (round robin, least connections). Practically unlimited, and one machine failing does not stop the site.
• Stateless servers make scale-out easy: if user data lives in the database or a shared store (Redis) and not in one server's memory, any server can answer any request. This is why a login can be carried by a token or a shared session store instead of a local variable.
• Redundancy and replication: keeping copies (extra servers, database replicas) for availability and fault tolerance. A paper had two statements, "redundancy improves performance and reduces load" and "replication ensures data is not lost", and marked both false. The official wording favours: redundancy is for reliability, not speed, and "ensures" is too strong. Check your course notes for the exact phrasing.
• ACID vs BASE: ACID (atomic, consistent, isolated, durable) suits financial transactions; BASE (basically available, soft state, eventually consistent) suits social media feeds. In the paper: scale up = increasing RAM, scale out = adding physical servers.

Session memory is also a scaling calculation: 1.5 million sessions x 4 KB = 6,000,000,000 bytes = 6 GB of RAM (a paper asked this for a Redis session store).

Background (batch) jobs. Work that is slow and does not need an instant answer (emailing reports, resizing images, nightly exports) should not block the web request. The request puts a job on a queue and returns at once; a separate worker takes jobs from the queue. Cron runs a task on a schedule ("every night at 2"). The tool for this in Flask is Celery, which you meet in MAD2; here you only need the idea.

Idea 8: N+1 queries and pagination

N+1 problem. One query fetches N authors, then touching author.books fires one more query per author: N+1 queries. We counted queries with 5 authors and 3 books each:

for a in Author.query.all():          # 1 query
    len(a.books)                      # +5 lazy queries  -> 6 total
for a in Author.query.options(selectinload(Author.books)).all():   # 2 queries
    len(a.books)
for a in Author.query.options(joinedload(Author.books)).all():     # 1 query (JOIN)
    len(a.books)

Measured: 6, 2 and 1 queries. Fix: eager loading (selectinload, joinedload) or a single JOIN. Add an index on foreign keys.

Pagination. Never return a million rows. Return a page at a time with LIMIT and OFFSET (or db.paginate):

p = db.paginate(db.select(Book).order_by(Book.id), page=2, per_page=4)
# p.items = [b11, b12, b20, b21]; p.page=2, p.pages=4, p.total=15, p.has_next, p.has_prev

Always add ORDER BY so pages are stable. API shape: GET /books?page=2&per_page=4.

Your turn

Exam radar

Quick quiz

Viva: say it out loud

Recap

MAD1 week 8: The frontend: JavaScript, the DOM and fetch

Official syllabus line: Application Frontend

The one-minute story

By the end of this week you can:

• add JavaScript to a page correctly (script, defer, external files);
• write variables, functions, arrays and objects in JavaScript and predict their results;
• select and change the DOM (getElementById, querySelector, textContent, innerHTML, createElement, classList, style);
• handle events and read forms with JavaScript;
• call a Flask JSON API with fetch (GET and POST), handle status codes and errors;
• explain client vs server rendering, localStorage vs cookies, CORS, XSS risk of innerHTML, and what Vue is for.

Words you need

Idea 1: JavaScript in HTML, and a JS refresher

Put JS in a script tag, inline or in an external file. Where the tag sits and defer matter because JS that touches an element must run after the element exists.

<!DOCTYPE html>
<html>
<head>
  <title>Hello JS</title>
  <script src="app.js" defer></script>   <!-- external, runs after the HTML is parsed -->
</head>
<body>
  <h1 id="title">Hi</h1>
  <script>
    console.log("inline script, h1 exists:", document.getElementById("title") !== null);
  </script>
</body>
</html>

Classic rule: a script in head without defer runs before the body exists, so document.getElementById("title") is null. Fix: put the script at the end of body, or use defer, or wait for the DOMContentLoaded event. In Flask, JS files go in static/ and are linked with url_for('static', filename='app.js').

console.log() prints to the browser's console (developer tools, key F12). It is not alert() (a popup) nor document.write() (writes into the page).

A refresher on the language

let n = 5;            // can be reassigned
const name = "Asha";  // cannot be reassigned
var old = 1;          // old style; avoid

function square(x) { return x * x; }
const cube = x => x * x * x;          // arrow function

const marks = [40, 90, 65];           // array
marks.push(70);                       // add at end
console.log(marks.length, marks[0]);  // 4 40
console.log(marks.map(m => m + 5));        // [45, 95, 70, 75]
console.log(marks.filter(m => m >= 65));   // [90, 65, 70]

const user = { name: "Ravi", city: "Pune" };   // object
console.log(user.name, user["city"]);          // Ravi Pune
const { name: nm } = user;                     // destructuring
console.log(`Hello ${user.name}`);             // template string

Surprises that exams love (all checked in Node):

console.log("5" + 3);     // "53"  (+ with a string joins)
console.log("5" - 3);     // 2     (- converts to numbers)
console.log(5 == "5");    // true  (loose equality converts)
console.log(5 === "5");   // false (strict: also compares type)
console.log(typeof null); // "object" (an old quirk)
console.log([10, 9, 1].sort());  // [1, 10, 9]  (sorts as text!)
console.log(0.1 + 0.2);   // 0.30000000000000004

let is block-scoped; var is not: three callbacks made in a var loop all see the final i ([3,3,3]), but with let they see [0,1,2]. Always use ===, and let/const.

Idea 2: The DOM

The browser turns your HTML into a tree of objects. JS changes the tree; the screen updates. Changing the DOM does not change your HTML file and the DOM is not identical to the source: it is built before your JS runs and JS can change it afterwards. (Both were in a real paper. JS is the usual way to use the DOM, but it is a language-neutral interface: "DOM can only be manipulated with JS" is false, and "its structure is rigid" is false.)

function doSomething(){
  const txt1 = document.getElementById("txt1");   // the element
  txt1.style.fontWeight = "bold";                 // style is an OBJECT; fontWeight is camelCase
}

function add_item(){
  const course = document.getElementById("txt_course").value;
  document.getElementById("txt_course").value = "";
  const courses = document.getElementById("courses");      // the UL, not the input
  courses.innerHTML = courses.innerHTML + "<li>" + course + "</li>";
}

const li = document.createElement("li");
li.textContent = course;
courses.appendChild(li);

function perform(){
  let row = document.createElement("tr");
  let td1 = document.createElement("td"); td1.innerText = "name_1";
  let td2 = document.createElement("td"); td2.innerText = "city_1";
  row.appendChild(td1); row.appendChild(td2);
  document.getElementById("rows").appendChild(row);
}

CSS reminders the papers use with the DOM

Many rendering questions mix JS with CSS display. Quick table:

So a div made inline-block appears on the same line as the next, and a flex container shows 1 2 3 as three boxes in a row. An id rule (#id1) beats a class rule (.class1), which beats a tag rule (span). Also: ol is numbered, ul is bulleted, and a nested list has its own numbering.

Idea 3: Events, forms and validation

An event listener runs your function when something happens. Three ways, all legal (a real question's answer was "All of these"):

<button id="myBtn">Click Me</button>
<button onclick="alert('Clicked!')">Click Me 2</button>
<script>
  document.getElementById("myBtn").onclick = function(){ alert("Clicked!"); };
  document.getElementById("myBtn").addEventListener("click", function(){ alert("Clicked!"); });
</script>

addEventListener is preferred because you can attach many listeners to one event and remove them. The listener gets an event object (e.target, e.preventDefault()).

document.getElementById("btn").addEventListener("click", () => {
  document.querySelector("#msg").textContent = "Welcome to JavaScript!";
});

Both getElementById and querySelector("#msg") work, and both textContent and innerHTML change the visible text. But msg.text = "..." does nothing visible (there is no .text property on a div), and it relies on the id as a global name.

Forms. Read input.value; stop the normal submit with e.preventDefault() when JS will handle it.

<form id="f">
  <input id="title" required minlength="3">
  <button>Add</button>
</form>
<script>
  document.getElementById("f").addEventListener("submit", e => {
    e.preventDefault();                       // do not reload the page
    const t = document.getElementById("title").value.trim();
    console.log("will send:", t);
  });
</script>

Validation: frontend vs backend. HTML5 attributes (required, minlength, type="email", pattern) and a JS function such as validateForm() give instant feedback in the browser (this is client-side validation; the browser's prompt on an empty required field reads "Please fill out this field." and the JS function does not run on the server). But anyone can bypass the browser (curl, dev tools), so the backend must validate again; frontend validation is for the user's convenience, never for security. The CSS pseudo classes :valid and :invalid can colour a field as the user types (an input with a minlength turns from red to green once the minimum length is reached and stays green while typing is still allowed).

A form with no method sends GET: the data goes in the URL. method="post" puts it in the body.

Idea 4: JSON and the Fetch API (AJAX)

JSON looks like a JS object but is text: keys in double quotes, no trailing commas, no comments, values only string, number, boolean, null, array, object.

const txt = '{"name":"Balu","age":30,"city":"New Delhi"}';
const obj = JSON.parse(txt);          // text -> object
console.log(obj.age * 3);             // 90
console.log(JSON.stringify(obj));     // object -> text: {"name":"Balu","age":30,"city":"New Delhi"}

A real paper put this in innerHTML as "Hi\n" + obj.name + ",\t" + obj.city + "," + obj.age*3. The page shows Hi Balu, New Delhi,90: the string really contains a newline and a tab, but HTML collapses whitespace to one space, and age*3 is a number 90 (not "303"). Notes: JSON.stringify drops undefined values ({a:1,c:undefined} becomes {"a":1}); JSON.parse on bad JSON such as {'a':1} throws SyntaxError.

fetch with a Flask API

Our Flask API (we ran it):

@app.get("/api/items")
def lst(): return jsonify(items)

@app.post("/api/items")
def add():
    data = request.get_json(silent=True)
    if not data or "title" not in data:
        return jsonify(error="title required"), 400
    it = {"id": len(items) + 1, "title": data["title"]}
    items.append(it)
    return jsonify(it), 201

@app.get("/api/items/<int:i>")
def one(i): ...                       # returns {"error": "not found"}, 404 if missing

The browser side, with async/await (the modern style):

async function loadItems() {
  const res = await fetch("/api/items");          // GET by default
  if (!res.ok) { throw new Error("HTTP " + res.status); }
  const items = await res.json();                  // parse the body
  const ul = document.getElementById("list");
  ul.innerHTML = "";
  for (const it of items) {
    const li = document.createElement("li");
    li.textContent = it.title;                     // textContent: safe
    ul.appendChild(li);
  }
}

async function addItem(title) {
  const res = await fetch("/api/items", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ title: title })
  });
  const data = await res.json();
  if (res.status === 201) { loadItems(); } else { alert(data.error); }
}

Same idea with .then: fetch(url).then(r => r.json()).then(data => ...).catch(err => ...).

Results from our test run:

AJAX is this idea: a page that updates part of itself with background requests, without reloading. Debugging: in the browser's dev tools use the Console (errors and console.log), Network (see each request, its status, headers and response body) and Elements (the live DOM). console.log(res.status) is your friend.

Idea 5: Where is the page built? Rendering styles and frameworks

Progressive enhancement: build a page that works with plain HTML and forms (SSR), then add JS on top for comfort. If JS fails, the site still works. This is a good, safe default design.

Frameworks (Vue, React, Angular) give structure for large UIs: components, reactive data (change the data and the screen updates automatically), and routing. They are frontend frameworks. Node.js is not a frontend framework: it runs JS on the server. WebAssembly is a binary format, not a web component; the real web-component standards are Custom Elements, Shadow DOM and HTML Templates. You will use Vue in MAD2; for MAD1 you only need "why use one": less manual DOM code. JS is not always the core of a frontend; HTML and CSS are the core and JS adds extra functionality.

Idea 6: Storing things in the browser, CORS and XSS

localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme"));   // "dark"
localStorage.removeItem("theme");
localStorage.setItem("user", JSON.stringify({name: "Asha"}));   // store objects as text

localStorage holds strings only, hence JSON.stringify. Anything JS can read, an attacker script can read too, so do not keep secrets there.

CORS in one paragraph. The browser enforces the same-origin policy: a page from http://a.com may not read a response from http://b.com (a different scheme, host or port) unless server b answers with Access-Control-Allow-Origin: http://a.com. In Flask-CORS you write CORS(app). If your page and API are served by the same Flask app, there is no CORS issue. CORS is enforced by the browser, not by the server, so curl is not affected.

XSS and innerHTML. If you put user-supplied text into innerHTML, the browser parses it as HTML, so a comment containing an img tag with an onerror handler would run an attacker's script in your visitors' browsers. Checked in a DOM simulator:

el.textContent = '<img src=x onerror="alert(1)">';  // shows the text literally: &lt;img ...&gt;
el.innerHTML   = '<img src=x onerror="alert(1)">';  // creates a real img element (dangerous)

Rule: textContent for plain text; innerHTML only for HTML you wrote yourself. More about XSS and its server-side twin in week 9.

Your turn

const p = document.getElementById("info");
p.textContent = "Welcome";
p.classList.add("hot");
p.style.color = "red";

async function add(t){
  const res = await fetch("/api/items", {method:"POST",
      headers:{"Content-Type":"application/json"}, body: JSON.stringify({title:t})});
  const data = await res.json();
  if (res.status !== 201) alert(data.error);
}

Exam radar

Quick quiz

Viva: say it out loud

Recap

MAD1 week 9: Security: authentication, sessions, tokens and attacks

Official syllabus line: Application Security

The one-minute story

By the end of this week you can:

• explain authentication vs authorisation, and RBAC vs ABAC;
• store and check passwords safely with generate_password_hash and check_password_hash;
• explain and build session-based login with cookies, Flask session and Flask-Login (login_user, @login_required, roles);
• name and prevent CSRF, XSS and SQL injection;
• explain HTTPS/TLS, secrets in environment variables, input validation, rate limiting, token authentication and least privilege;
• predict the output of Flask login/session snippets and use a security checklist for your project.

Words you need

Idea 1: Threats and the two big questions

The OWASP Top 10 is the well-known list of the most common web application weaknesses. You do not need to memorise it; know the family: broken access control, cryptographic failures (plain-text passwords, no HTTPS), injection (SQL, XSS), insecure design, security misconfiguration (debug mode on, default passwords), vulnerable components, authentication failures, logging failures. Attacks come from the browser side (the user, or a script in their page) and from the network (someone reading the wire).

Access control models.

Real paper answers: "a forum unlocks images once a user makes more than 25 posts" is ABAC; "access by job role in an organisation" is RBAC; "grants access by department, job title or current location" is ABAC.

HTTP authentication schemes (a real match-the-column):

Do not mix: base64 can be decoded by anyone; a hash cannot be reversed; encryption can be reversed with a key.

Idea 2: Passwords: hash, salt, never store plain text

If you store passwords as text, anyone who reads your database (a leak, a backup, a curious admin) learns every password, and people reuse passwords. So store only a hash.

Why not encryption? Encryption can be reversed by whoever holds the key, and the key sits on the same server. A hash cannot be reversed: you hash what the user types at login and compare the two hashes.

Why a salt? The same password always gives the same hash, so an attacker can precompute a huge table of hashes of common passwords (a rainbow table) and look yours up. A salt is random data added before hashing, stored with the hash, so two users with the same password get different hashes and precomputed tables are useless. Good password hashes (bcrypt, scrypt, PBKDF2, Argon2) are also deliberately slow, to make guessing expensive. A plain fast hash such as SHA-256 on its own is a poor password hash.

from werkzeug.security import generate_password_hash, check_password_hash
h1 = generate_password_hash("secret")
h2 = generate_password_hash("secret")
print(h1 == h2)                          # False (different random salts)
print(check_password_hash(h1, "secret")) # True
print(check_password_hash(h1, "Secret")) # False
print(h1[:12], len(h1))                  # scrypt:32768:8:1$...  (length 162 on our machine)

We ran it. The stored string contains the method, its settings, the salt and the hash, so check_password_hash needs only the stored string and the typed password. Older Werkzeug versions start with pbkdf2:sha256:...; both are fine. bcrypt (a separate library) works the same way: bcrypt.hashpw(pw, bcrypt.gensalt()) and bcrypt.checkpw(pw, hash).

# register
user = User(name=name, pw=generate_password_hash(password))   # store the HASH
db.session.add(user); db.session.commit()

# login
user = User.query.filter_by(name=name).first()
if user and check_password_hash(user.pw, password):
    login_user(user)
else:
    return "bad credentials", 401        # same message for 'no such user' and 'wrong password'

for vu in valid_users:
    if vu["uid"] == args["uid"] and vu["pwd"] == args["pwd"]:
        return "You are authorized!!"
    else:
        return "You are unauthorized!!"      # else is INSIDE the loop

Idea 3: Cookies and sessions

HTTP is stateless: each request is separate. To "remember" a user, the server gives the browser a session id in a cookie; the browser sends it back every time.

Server response:  Set-Cookie: session=abc123; HttpOnly; Secure; SameSite=Lax
Next request:     Cookie: session=abc123

Both statements in a real question were true: cookies let a web app recognise users, and they can hold login data, language, location and similar information.

Flask's session. Flask keeps the session in the cookie itself, as a signed (not encrypted) value. The signature uses SECRET_KEY, so the user cannot change it without detection, but the user can read it. We decoded one: the cookie held {"role":"general","user":"a"} in readable base64. So: never store secrets in session, and keep the SECRET_KEY secret. Setting SESSION_COOKIE_HTTPONLY, SESSION_COOKIE_SECURE, SESSION_COOKIE_SAMESITE configures the flags.

app.config['SECRET_KEY'] = "yekterces"

@app.route('/login')
def log_in():
    user = request.args['user']
    role = request.args['role'] if 'role' in request.args else 'general'
    session['user'], session['role'] = user, role
    return "Logged in successfully!"

@app.route('/home')
def land():
    if 'user' in session:
        if session['role'] == 'admin':
            return f"Welcome {session['user']}"
        return abort(401)
    return abort(404)

@app.route('/logout')
def log_out():
    session.pop('user', None); session.pop('role', None)
    return "Logged out sucessfully!"

Session memory arithmetic. A server-side session store with 1.5 million active sessions of 4 KB each needs 1.5 million x 4 KB = 6 GB of RAM (this exact calculation appeared in a paper; see week 7). It also shows why server sessions need a shared store (Redis) once you scale out.

Idea 4: Flask-Login and roles

Flask-Login manages "who is logged in" for you. Four ingredients:

from flask_login import LoginManager, UserMixin, login_user, logout_user, login_required, current_user

login_manager = LoginManager(app)
login_manager.login_view = "login"           # where to send anonymous users

class User(UserMixin, db.Model):             # UserMixin adds is_authenticated etc.
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String, unique=True)
    pw = db.Column(db.String)
    role = db.Column(db.String, default="user")

@login_manager.user_loader
def load_user(user_id):                      # called on each request with the id from the session
    return db.session.get(User, int(user_id))

@app.route("/login", methods=["GET", "POST"])
def login():
    if request.method == "POST":
        u = User.query.filter_by(name=request.form["name"]).first()
        if u and check_password_hash(u.pw, request.form["pw"]):
            login_user(u)                    # the USER OBJECT, not user.id, not user.name
            return redirect("/dash")
        return "bad credentials", 401
    return render_template("login.html")

@app.route("/dash")
@login_required                              # anonymous users are redirected to the login page
def dash():
    return "Welcome " + current_user.name

@app.route("/logout")
def logout():
    logout_user(); return "bye"

We ran all of this with the test client. Observed: anonymous /dash gives a 302 redirect to /login?next=%2Fdash (not 404, not 403); a wrong password gives 401; a right one gives a 302 to /dash and a session=... cookie; then /dash returns Welcome b. current_user is the logged-in User object (an anonymous placeholder if nobody is logged in).

Two real questions here: the correct registration call is login_user(user) (the object), and a real snippet that called login_user(u1) for Rose then logout_user() printed, in order, Rose logged in, current user is Rose, logged out when visited as /, /home, /logout.

Roles (RBAC). With Flask-Security you attach roles to users and write @roles_required('admin') (all roles needed) or @roles_accepted('admin', 'editor') (any one). With plain Flask-Login you can write the decorator yourself:

def roles_required(*roles):
    def deco(fn):
        @wraps(fn)
        @login_required
        def inner(*a, **k):
            if current_user.role not in roles:
                return "forbidden", 403          # authenticated but not authorised
            return fn(*a, **k)
        return inner
    return deco

@app.route("/admin")
@roles_required("admin")
def admin(): return "admin area"

Tested: user b (role user) gets 403 on /admin; user a (role admin) gets admin area. A user can have many roles; model it with a many-to-many table (roles in a real paper are a Role table with a relationship back to User).

Idea 5: CSRF, XSS and SQL injection

CSRF (cross-site request forgery)

You are logged in to your bank. In another tab you open a hostile page that contains a hidden form posting to bank.com/transfer. Your browser attaches your cookie automatically, so the bank thinks you sent it. Defences:

• CSRF token: a random secret value put in each form (<input type="hidden" name="csrf" ...>) and kept in the session. The server accepts a POST only if the submitted token equals the session's. The hostile page cannot read your page, so it cannot know the token.
• SameSite cookies, and never change data with GET.
• Flask-WTF does this for you (CSRFProtect(app) and {{ form.csrf_token }}). A manual version we tested:

def token():
    if "csrf" not in session: session["csrf"] = secrets.token_hex(16)
    return session["csrf"]

@app.post("/pay")
def pay():
    if request.form.get("csrf") != session.get("csrf"): abort(403)
    return "paid"

Result: no token gives 403, a wrong token gives 403, the right token gives paid.

XSS (cross-site scripting)

If user-written text is placed into a page as HTML, an attacker's script runs in the victim's browser (it can steal data, act as the user). Defence: escape output. Jinja autoescape (on for .html templates) turns < into <:

render_template_string("<p>{{ x }}</p>", x="<script>alert(1)</script>")
#  <p>&lt;script&gt;alert(1)&lt;/script&gt;</p>        (safe: shown as text)
render_template_string("<p>{{ x|safe }}</p>", x="<script>alert(1)</script>")
#  <p><script>alert(1)</script></p>                    (dangerous: runs)

Never use |safe or Markup() on user input. On the JS side use textContent, not innerHTML (week 8). HttpOnly cookies and a Content-Security-Policy header limit the damage.

SQL injection

If you build SQL by gluing strings, the user's input can change the meaning of the query. We ran it:

name = "asha"; pw = "' OR '1'='1"
q = f"select * from u where name='{name}' and pw='{pw}'"
# select * from u where name='asha' and pw='' OR '1'='1'      -> returns the row: login bypassed!

Another payload, asha' --, turns the rest of the line into a comment. Fix: parameterised queries, where the database receives the SQL and the values separately, so values are always data, never code:

cur.execute("select * from u where name=? and pw=?", (name, pw))   # returned [] for the same attack

The ORM is safe by default: User.query.filter_by(name=n) and User.name == n always bind parameters (our attack string returned no user). It becomes unsafe again if you build raw SQL with f-strings in db.session.execute(text(f"...")); use text("... :n") with parameters.

Idea 6: Transport, secrets, validation, limits, tokens

HTTPS and TLS. HTTPS is HTTP inside TLS, which gives encryption (nobody on the way can read), integrity (nobody can alter) and authentication of the server (a certificate from a trusted authority proves the site is the real bank.com). It protects passwords, cookies and form data on the wire. It does not fix XSS or SQL injection. Use the Secure cookie flag with it.

Secrets and environment variables. SECRET_KEY, database passwords and API keys must not be written in the code or pushed to Git. Read them from the environment:

import os
app.config["SECRET_KEY"] = os.environ["SECRET_KEY"]   # fails loudly if missing

Keep a local .env (listed in .gitignore) and a .env.example without real values. Anyone who learns the SECRET_KEY can forge Flask sessions.

Input validation. Treat all input as hostile: check type, length, range and format on the server (and on the client for comfort). Prefer an allow list (only letters and digits) to a block list. A real End Term: frontend validation improves user experience, backend validation is mandatory for security because the frontend can be bypassed, and the backend should check the same constraints.

Rate limiting. Limit how many requests an address or user may make in a time window, to slow brute force password guessing and abuse (Flask-Limiter: @limiter.limit("5 per minute")). Our small hand-made version let 3 requests through and refused the 4th and 5th: [True, True, True, False, False]. Return 429 Too Many Requests.

Token-based authentication (introduction). Instead of a server-side session and a cookie, the server gives a signed token (for example a JWT, or a random string). The client sends it in every request: Authorization: Bearer <token>. The server only verifies the signature, so it keeps no session state (stateless, good for scaling) and the same token works for a mobile app or JavaScript calling your REST API. Tokens need an expiry and HTTPS; if stored in localStorage they can be stolen by XSS. You will use token auth with the REST API in MAD2.

Principle of least privilege. Give every person and program the smallest access that lets it do its job: the web app's database user should not be able to drop tables; a normal user gets the user role, not admin; an API key can be read-only. If something is compromised, the damage is small.

Idea 7: A secure project checklist

Your turn

Exam radar

Quick quiz