Skip to content

Commit f5ffb99

Browse files
minondminond
committed
Updating template and link content in unit 3 slides
1 parent 2d70978 commit f5ffb99

2 files changed

Lines changed: 219 additions & 4 deletions

File tree

‎units/03 - Introduction to Flask/Introduction to Flask Slides.md‎

Lines changed: 219 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -395,11 +395,13 @@ Flask provides a function named `render_template` that lets us move our HTML cod
395395
**Contents of `application.py`**
396396

397397
```python
398+
from flask import Flask, render_template
399+
398400
# ...
399401

400402
@app.get("/")
401403
def index():
402-
return render_template("hello.html")
404+
return render_template("index.html")
403405

404406
# ...
405407
```
@@ -420,20 +422,34 @@ This makes working with HTML easier because it's no longer a string in our Pytho
420422

421423
## Templates
422424

425+
Flask will look for your templates in the `templates`.
426+
427+
---
428+
429+
## Templates
430+
423431
Flask templates use a library called Jinja2.
424432

425433
---
426434

427435
## Jinja2
428436

429-
<span class="center narrow">
437+
<span class="center">
430438

431-
Jinja2 offer functionality that lets you merge variables in into your HTML code.
439+
Jinja2 offers functionality that lets you embed variables in your HTML code.
432440

433441
</span>
434442

435443
---
436444

445+
## Embedding variables
446+
447+
Embedded variables must be wrapped in `{{ }}`.
448+
449+
For example, `{{ name }}`.
450+
451+
---
452+
437453
<span class="tal">
438454

439455
**Contents of `templates/index.html`**
@@ -454,7 +470,7 @@ Jinja2 offer functionality that lets you merge variables in into your HTML code.
454470

455471
@app.get("/")
456472
def index():
457-
return render_template("hello.html", name="Marcos")
473+
return render_template("index.html", name="Marcos")
458474

459475
# ...
460476
```
@@ -488,6 +504,88 @@ print_greeting(name=name_to_greet)
488504

489505
---
490506

507+
## Jinja2
508+
509+
<span class="center narrow">
510+
511+
Jinja2 also lets you embed code (that looks a lot like regular Python code) in your templates.
512+
513+
</span>
514+
515+
---
516+
517+
## Embedding code
518+
519+
Embedding code must be wrapped in `{% %}`.
520+
521+
For example, `{% for driver in driver_scores %}`.
522+
523+
---
524+
525+
<span class="tal">
526+
527+
**Contents of `application.py`**
528+
529+
```python
530+
# ...
531+
532+
driver_scores = {
533+
"Max Verstappen": 454,
534+
"Charles Leclerc": 308,
535+
"Sergio Perez": 305,
536+
"George Russell": 275,
537+
"Carlos Sainz": 246
538+
}
539+
540+
@app.route("/")
541+
def index_route():
542+
return render_template("index.html", driver_scores=driver_scores)
543+
544+
# ...
545+
```
546+
547+
</span>
548+
549+
---
550+
551+
<span class="tal">
552+
553+
**Contents of `templates/index.html`**
554+
555+
```jinja
556+
<body>
557+
{% for driver, score in driver_scores.items() %}
558+
{% if score > 300 %}
559+
<div class="winning">{{ driver }}: {{ score }}</div>
560+
{% else %}
561+
<div class="losing">{{ driver }}: {{ score }}</div>
562+
{% endif %}
563+
{% endfor %}
564+
</body>
565+
```
566+
567+
</span>
568+
569+
---
570+
571+
## Embedded code samples
572+
573+
```jinja
574+
{% for name in student_list %}
575+
{{ name }}
576+
{% endfor %}
577+
578+
{% if score > 100 %}
579+
Wow you're amazing!
580+
{% elif score > 90 %}
581+
You're getting an A!
582+
{% else %}
583+
Keep at it!
584+
{% endif %}
585+
```
586+
587+
---
588+
491589
# URLs and routing
492590

493591
---
@@ -765,3 +863,120 @@ This is an anchor to a section in the webpage returned by the web server. This i
765863
</span>
766864

767865
---
866+
867+
# Links
868+
869+
---
870+
871+
## Links
872+
873+
<span class="center wide">
874+
875+
In HTML, links are created with the Anchor tag (`a`) and have an `href` attribute with the URL we would like to link to.
876+
877+
</span>
878+
879+
<hr />
880+
881+
```html
882+
<a href="https://google.com">Click here to go to Google.com</a>
883+
```
884+
885+
---
886+
887+
## Href attribute
888+
889+
You can use any valid URL in the `href` attribute.
890+
891+
<hr />
892+
893+
```html
894+
<a href="https://www.google.com/search?q=Python">Click here to go to search for "Python"</a>
895+
```
896+
897+
---
898+
899+
## Absolute URLs
900+
901+
<span class="center wide">
902+
903+
When a URL includes all of the usual parts (scheme, domain, port, path, etc.), it is referred to as an _absolute URL_.
904+
905+
</span>
906+
907+
<hr />
908+
909+
`https://www.google.com/search?q=Python`
910+
911+
---
912+
913+
## Relative URLs
914+
915+
<span class="center">
916+
917+
URLs that only include the path, query, and anchor are referred to as _relative URLs_.
918+
919+
</span>
920+
921+
<hr />
922+
923+
`/search?q=Python`
924+
925+
---
926+
927+
## Relative URLs
928+
929+
`/search?q=Python`
930+
931+
<hr />
932+
933+
<span class="centered">
934+
<img src="assets/mdn-url-all.png" />
935+
</span>
936+
937+
---
938+
939+
## Relative URLs
940+
941+
<span class="center wide">
942+
943+
The parts of a relative URL that are left out (like the domain), are taken from the existing webpage that you are on.
944+
945+
</span>
946+
947+
---
948+
949+
## Relative URLs
950+
951+
<span class="center">
952+
953+
This means that when you are on `https://google.com`, when a user clicks on a link for `/search?q=Python` they will be taken to `https://google.com/search?q=Python`.
954+
955+
</span>
956+
957+
---
958+
959+
## Absolute vs. relative
960+
961+
<span class="centered">
962+
963+
- Absolute: `https://www.google.com/search?q=Python`
964+
- Relative: `/search?q=Python`
965+
966+
</span>
967+
968+
---
969+
970+
## URLs in anchor tags
971+
972+
You can use both absolute and relative URLs in anchor tags.
973+
974+
<hr />
975+
976+
```html
977+
<a href="https://www.google.com/search?q=Python">Search Google</a>
978+
979+
<a href="/search?q=Python">Search Google</a>
980+
```
981+
982+
---

‎units/03 - Introduction to Flask/Introduction to Flask Slides.pdf‎

43.6 KB
Binary file not shown.

0 commit comments

Comments
 (0)