Welcome, ria
``` | Piece | Request | Response | |---|---|---| | First line | method, path, version | version, status code, reason | | Headers | `Host`, `Content-Type`, `Cookie`, `Accept`, `User-Agent` | `Content-Type`, `Set-Cookie`, `Location`, `Content-Length` | | Body | form data or JSON (POST/PUT/PATCH) | the HTML, JSON or file | `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): ```bash 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 | Method | Meaning | Has a body? | Safe (does not change data)? | Typical use | |---|---|---|---|---| | GET | Read a resource | No | Yes | Open a page, fetch a list | | POST | Create something / submit a form | Yes | No | Sign up, add a row | | PUT | Replace a whole resource | Yes | No | Overwrite a record | | PATCH | Change part of a resource | Yes | No | Update one field | | DELETE | Remove a resource | Usually no | No | Delete a record | | HEAD | Like GET but **headers only** | No | Yes | Check if a file exists | > **Watch out: real exam traps** > > - GET is **not** the same as HEAD. GET returns headers and body; HEAD returns the headers only. > - A browser address bar always sends **GET**. You cannot send POST by typing a URL. > - Putting secrets in a GET query string is bad: URLs are stored in history and logs. > - GET responses may be **cached** by the browser; POST responses are not cached by default. "Browsers cache all GET and POST requests" is false. ##### Status code families | Family | Meaning | Codes you must know | |---|---|---| | 1xx | Informational | 100 Continue | | 2xx | **Success** | 200 OK, 201 Created, 204 No Content | | 3xx | **Redirection** | 301 Moved Permanently, 302 Found (temporary), 304 Not Modified | | 4xx | **Client error** (your request is wrong) | 400 Bad Request, 401 Unauthorized (not logged in), 403 Forbidden (logged in but not allowed), 404 Not Found, 405 Method Not Allowed | | 5xx | **Server error** (the server's code failed) | 500 Internal Server Error, 503 Service Unavailable | 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**. > **Solved example: 1. Predict the status and the page** > > **Question.** Flask app, running on `http://127.0.0.1:5000`: > > ```python > from flask import Flask, abort > > app = Flask(__name__) > users = ["admin", "user_1"] > > @app.route("/home/Hint
Look for `://`, `:`, `/`, `?`, and `#`.Solution
Scheme `http`, host `localhost`, port `5000`, path `/user/42/orders`, query string `sort=date&page=3`, fragment `top`. The server never sees the fragment `top`.Hint
201 / 404 / 403 / 500 / 301 are the candidates. Match them.Solution
(a) **201 Created**. (b) **404 Not Found**. (c) **403 Forbidden** (401 would mean "not logged in"). (d) **500 Internal Server Error**. (e) **301 Moved Permanently**.Hint
Total KB per second, then bytes, then bits.Solution
600 x 250 KB = 150,000 KB per second = 150 MB per second = 150 x 8 = **1,200 Mbps** = 1.2 Gbps.Hint
Name goes in the path, id in the query.Solution
Only `/course/MAD1?id=CS2003`. The other two do not match the pattern and give **404**.Hello
`. > - **Attribute** - extra information inside the opening tag, such as `href="a.html"`. > - **CSS** - Cascading Style Sheets: rules that style elements. > - **Selector** - the part of a CSS rule that picks which elements to style. > - **Declaration** - one `property: value;` pair. > - **Specificity** - the score that decides which of two clashing rules wins. > - **Box model** - every element is a box: content, padding, border, margin. > - **Block / inline** - elements that start on a new line and take the full width / elements that sit inside a line of text. > - **Semantic tag** - a tag whose name says its meaning (`nav`, `footer`) rather than just its looks. > - **Pseudo-class / pseudo-element** - a selector for a state (`:hover`) / for a part of an element (`::before`). > - **Flexbox** - a CSS layout mode that arranges children in a row or column. > - **Bootstrap** - a CSS (and JS) library of ready-made classes and components. > - **CDN** - a public server that hosts libraries so you can link them by URL. #### Idea 1: Creating and serving an HTML document An HTML file is plain text. Save this as `index.html` in a new folder: ```htmlHello, web
This is my first page.
``` Open a terminal in that folder and serve it: ```bash 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. | Part | What it does | |---|---| | `` | Tells the browser "this is modern HTML" | | `` | The root of everything; `lang` helps screen readers | | `` | Information about the page (not shown): title, character set, links to CSS | | `Courses
Left half on medium screens and up
`. The text colour is... - [ ] blue - [ ] green - [x] black - [ ] red - *Why:* Inline style has the highest specificity (1000) so it beats a class rule (10) and a type rule (1). 3. Which selector picks only `li` elements that are direct children of a `ul`? - [ ] `ul li` - [x] `ul > li` - [ ] `ul ~ li` - [ ] `ul + li` - *Why:* The `>` child combinator means direct child; a space means any depth. 4. Select all TRUE statements. - [x] HTML describes content and structure; CSS describes styling. - [x] An input without a `name` is not submitted with its form. - [ ] JavaScript is always required for every web page. - [ ] `:hover` is a pseudo-element. - *Why:* `:hover` has one colon so it is a pseudo-class; JavaScript is optional extra behaviour. 5. `width: 200px; padding: 20px; border: 5px solid; margin: 10px;` with `content-box`. What is the visible width of the box? - [ ] 200px - [ ] 220px - [x] 250px - [ ] 270px - *Why:* 200 + (20 x 2) + (5 x 2) = 250px; 270px would include the 10px margins. 6. In Bootstrap, `
` means...
- [ ] half the width at all screen sizes
- [x] half the row from the md breakpoint upward, full width below
- [ ] 6 pixels wide
- [ ] hide on medium screens
- *Why:* Six of twelve columns from 768px up; narrower screens stack the columns.
#### Viva: say it out loud
**Viva: say it out loud**
**Q. What is the difference between HTML, CSS and JavaScript?**
A. HTML gives the structure and content, CSS gives the look and layout, JavaScript adds behaviour such as reacting to clicks. I keep them in separate files where I can.
**Q. How does the browser decide which CSS rule wins?**
A. It checks for `!important`, then compares specificity (inline, then id, then class, then tag), and if the score ties the later rule wins. Some properties are also inherited from the parent.
**Q. What is the box model?**
A. Every element is a box: content, then padding, then border, then margin. The visible width adds content, padding and border. `border-box` makes the width include padding and border.
**Q. Why do you use semantic tags and `alt` text?**
A. Semantic tags such as `nav` and `main` tell browsers, search engines and screen readers what each part is. The `alt` text describes an image for people who cannot see it and shows when the image fails.
**Q. Explain client-side and server-side validation in your form.**
A. The browser checks `required`, `type="email"` and similar attributes before submit, which is quick but can be bypassed. My Flask route validates again, because only the server can be trusted.
**Q. How did you do your layout?**
A. I used Bootstrap from a CDN: a `container`, `row`, and `col-md-*` columns for the grid, plus utility classes for spacing. For small custom pieces I used flexbox with `justify-content` and `align-items`.
**Q. Where do your CSS files live in your Flask project?**
A. In the `static` folder, linked in the template with `url_for('static', filename='style.css')`.
#### Recap
> **Remember this**
>
> - HTML skeleton: `doctype`, `html`, `head` (title, meta, links), `body`. Serve with `python -m http.server`.
> - Block elements start a new line; inline elements sit in a line. Use semantic tags.
> - Forms send `name=value` pairs; `name` matters, `id` does not. HTML5 validation is client-side only.
> - CSS comes inline, internal or external; the winner is decided by `!important`, specificity (id 100, class 10, tag 1, inline 1000), then order.
> - Selectors: type, class, id, descendant, `>`, `+`, `~`, `:hover`, `:nth-child`, `::before`, `[attr]` forms.
> - Box width = content + padding + border (+ margin for space). Flexbox: `display: flex` on the parent.
> - Bootstrap: CDN link, `container`, `row`, 12-column `col-md-*`, utility classes, components.
> **Code and facts to keep**
>
> - Skeleton: `![]()
`
> - Specificity: inline 1000, `#id` 100, `.class [attr] :pseudo-class` 10, `tag ::pseudo-element` 1
> - Visible width (content-box) = width + 2 padding + 2 border; space = + 2 margin
> - Flex: `display: flex; justify-content: ...; align-items: ...; gap: ...`
> - Bootstrap 5 CSS: `https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css`
> - Breakpoints: sm 576, md 768, lg 992, xl 1200; grid = 12 columns
## MAD1 week 3: Views: Jinja2 templates, Bootstrap and forms
*Official syllabus line: Presentation layer - View*
*About 100 minutes. Before you start: MAD1 weeks 1 and 2 (HTTP, GET and POST, HTML forms, CSS and Bootstrap basics). Python functions, lists and dictionaries.*
#### The one-minute story
> **Think of it like this**
>
> **A template is a form letter.** "Dear NAME, your marks in COURSE are MARKS." You do not write a new letter for every student. You keep one letter with blanks, and a clerk fills in the blanks from a list. The **template** is the letter, the **data** is the list, and **rendering** is the clerk filling the blanks.
>
> A website does the same. The **controller** (a Flask route) collects the data. The **view** (a Jinja2 template) is an HTML page with blanks and a few instructions like "repeat this row for every student". Rendering produces plain HTML that the browser shows. When the visitor fills in a **form**, the browser posts the answers back to the controller.
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
> **Words you need**
>
> - **Template** - a text or HTML file with placeholders and small instructions.
> - **Rendering** - filling a template with data to produce the final text.
> - **Jinja2** - the template engine Flask uses.
> - **Expression** - `{{ ... }}`: print a value.
> - **Statement** - `{% ... %}`: control flow such as `for` and `if`, prints nothing itself.
> - **Filter** - a small function applied with a pipe, like `name|upper`.
> - **Inheritance** - a child template reuses a base layout and fills its `block` slots.
> - **Macro** - a template function you define once and call many times.
> - **Autoescape** - Jinja2 turns `<` into `<` in values so user text cannot inject HTML.
> - **Static file** - CSS, JavaScript or an image served as it is from the `static` folder.
> - **request.form / request.args** - data from the POST body / from the URL query string.
> - **Client-side / server-side validation** - checking input in the browser / in your Flask code.
> - **PyHTML** - a Python library that builds HTML from nested function calls (it also appears in past papers).
#### Idea 1: Strings with blanks, the stepping stone
Before templates, Python itself can fill blanks. Compare three ways:
```python
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:
```text
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.
> **Solved example: 1. Two templating engines in a row**
>
> **Question.** What does this print?
>
> ```python
> 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'}))
> ```
>
> **Solution.** `T1` replaces only `$c1`. It does not understand `{{c2}}`, and the extra key `c2` in the dictionary is simply ignored. So the first line is `A student needs to complete foundation level to get to the {{c2}} level.` That string is then fed to Jinja2, which fills `{{c2}}`, so the second line is `A student needs to complete foundation level to get to the diploma level.`
>
> If a `$` placeholder is left unfilled, `substitute` raises `KeyError: 'place'`, while `safe_substitute` keeps `$place`. I ran both.
> **Watch out: real exam traps**
>
> - `substitute` fails (KeyError) on a missing key; `safe_substitute` does not.
> - Extra keys are ignored by both.
> - Two engines in a row: each only replaces its own syntax, and the other's syntax passes through untouched.
> - In Jinja2 a missing variable prints as an empty string (not an error).
**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:
```python
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.
> **The idea**
>
> **Three kinds of markers.**
>
> - `{{ expression }}` prints a value.
> - `{% statement %}` is logic (`for`, `if`, `set`, `block`...) and prints nothing itself.
> - `{# comment #}` is removed from the output.
**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 `