5. Flask og HTML

I denne delen skal du:

sette opp en Flask-app med HTML-templates
vise den globale feeden i en nettside
lage skjemaer for å opprette brukere og tweets

Oppsett

Lag filstrukturen:

twitter/
├── app.py
├── twitter.py       (klassene fra tidligere)
└── templates/
    └── index.html

app.py

Start med dette oppsettet:

from flask import Flask, request, redirect, render_template
from twitter import Twitter

app = Flask(__name__)
twitter = Twitter()

# Ruter kommer her...

app.run(debug=True)

Første rute: forsiden

Lag en GET-rute som henter feeden og sender den til en HTML-template:

@app.get("/")
def index():
    feed = twitter.lag_global_feed()
    return render_template("index.html", feed=feed)

Oppgave: Lag index.html

Lag filen templates/index.html som viser alle tweets i feeden.

Krav:

Vis hver tweet med brukernavn og tekst
Bruk en for-løkke i Jinja2

Tips: I templates kan du skrive {{ tweet.bruker.brukernavn }} for å vise brukernavnet til en tweet.

Løsningsforslag

<!DOCTYPE html>
<html>
<head>
    <title>Twitter</title>
</head>
<body>
    <h1>Feed</h1>
    {% for tweet in feed %}
        <p><b>{{ tweet.bruker.brukernavn }}</b>: {{ tweet.tekst }}</p>
    {% endfor %}
</body>
</html>

Oppgave: Skjema for å lage bruker

Legg til et skjema i index.html som sender et brukernavn til /lag-bruker.

Krav:

Skjemaet skal ha method="post" og action="/lag-bruker"
Et tekstfelt med name="brukernavn"
En submit-knapp

Løsningsforslag

<h2>Lag ny bruker</h2>
<form method="post" action="/lag-bruker">
    <input type="text" name="brukernavn" placeholder="Brukernavn">
    <button type="submit">Lag bruker</button>
</form>

Oppgave: Rute for å lage bruker

Lag en POST-rute /lag-bruker som:

henter brukernavn fra request.values.get("brukernavn")
lager en ny bruker med twitter.lag_bruker()
sender brukeren tilbake til forsiden

Løsningsforslag

@app.post("/lag-bruker")
def lag_bruker():
    brukernavn = request.values.get("brukernavn")
    twitter.lag_bruker(brukernavn)
    return redirect("/")

Oppgave: Skjema for å lage tweet

Legg til et skjema i index.html for å skrive en tweet.

Skjemaet trenger:

Et tekstfelt for brukernavn
Et tekstfelt for tweet-teksten
Action til /ny-tweet

Løsningsforslag

<h2>Skriv tweet</h2>
<form method="post" action="/ny-tweet">
    <input type="text" name="brukernavn" placeholder="Brukernavn">
    <input type="text" name="tekst" placeholder="Hva skjer?">
    <button type="submit">Tweet</button>
</form>

Oppgave: Rute for å lage tweet

Lag en POST-rute /ny-tweet som:

henter brukernavn og tekst fra request
finner brukeren med twitter.finn_bruker()
ber brukeren lage en tweet
sender brukeren tilbake til forsiden

Løsningsforslag

@app.post("/ny-tweet")
def ny_tweet():
    brukernavn = request.values.get("brukernavn")
    tekst = request.values.get("tekst")
    bruker = twitter.finn_bruker(brukernavn)
    bruker.lag_tweet(tekst)
    return redirect("/")