Ga naar hoofdinhoud

HTML tonen

Hier bouw je op verder

In de vorige les gaf je endpoint JSON terug. In deze les leer je hoe je een HTML pagina teruggeeft.

HTMLResponse importeren​

Pas je main.py aan:

from fastapi import FastAPI
from fastapi.responses import HTMLResponse

app = FastAPI()

Een HTML pagina tonen​

@app.get("/pagina", response_class=HTMLResponse)
async def pagina():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <title>Mijn Pagina</title>
        </head>
        <body>
            <h1>Hallo!</h1>
            <p>Dit is mijn eerste HTML pagina.</p>
        </body>
    </html>
    """
  1. Regel 1:

    response_class=HTMLResponse vertelt FastAPI dat je HTML terugstuurt en geen JSON. Zonder dit ziet de browser de tags als platte tekst.

  2. Regel 3-14:

    De functie geeft één lange string terug. De drie aanhalingstekens """ openen een string die over meerdere regels doorloopt, zodat je de HTML kunt schrijven zoals hij is.

Testen​

Ga naar http://127.0.0.1:8000/pagina. Je ziet nu een echte webpagina.

CSS toevoegen​

Je kunt CSS in een <style> tag zetten:

@app.get("/styled", response_class=HTMLResponse)
async def styled():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <title>Met CSS</title>
            <style>
                h1 { color: blue; }
                p { color: gray; }
            </style>
        </head>
        <body>
            <h1>Gestylede pagina</h1>
            <p>Deze tekst is grijs.</p>
        </body>
    </html>
    """
Gaat er iets mis?

Zie je de HTML als tekst (je ziet de tags <h1> etc.)? Dan mis je waarschijnlijk response_class=HTMLResponse. Bekijk de troubleshooting pagina voor meer oplossingen.

Opdrachten​

Opdracht 1: Predict - JSON of HTML?​

@app.get("/test")
async def test():
    return {"titel": "<h1>Hallo</h1>"}

Vraag: Zie je een heading of JSON?

Tip

Kijk of er response_class=HTMLResponse staat. Wat doet FastAPI als dat er niet staat?

Antwoord

Je ziet JSON: {"titel": "<h1>Hallo</h1>"}. Zonder response_class=HTMLResponse stuurt FastAPI altijd JSON terug.

Opdracht 2: Run​

Maak beide endpoints in je main.py: het /pagina endpoint en het /styled endpoint. Start de server en bezoek ze allebei. Werken ze zoals verwacht?

Opdracht 3: Investigate - Zonder HTMLResponse​

Wat gebeurt er als je response_class=HTMLResponse weghaalt bij het /styled endpoint? Probeer het uit.

Antwoord

Zonder response_class=HTMLResponse stuurt FastAPI de string als plain text terug. Je ziet de HTML tags als tekst op je scherm in plaats van een opgemaakte pagina.

Opdracht 4: Make - Eigen pagina​

Maak een endpoint /profiel dat een HTML pagina toont met:

  • Jouw naam als heading
  • Een paragraaf over jezelf
  • Een gekleurde heading via CSS
Tip

Gebruik response_class=HTMLResponse en een multi-line string met """. Zet je CSS in een <style> tag in de <head>.

Antwoord
@app.get("/profiel", response_class=HTMLResponse)
async def profiel():
    return """
    <!DOCTYPE html>
    <html>
        <head>
            <title>Profiel</title>
            <style>
                h1 { color: purple; }
            </style>
        </head>
        <body>
            <h1>Jan</h1>
            <p>Ik ben 16 en hou van programmeren.</p>
        </body>
    </html>
    """

Opdracht 5: Make - Twee pagina's​

Maak twee endpoints (/pagina1 en /pagina2) die elk een andere HTML pagina tonen. Voeg op elke pagina een link toe naar de andere:

<a href="/pagina2">Ga naar pagina 2</a>
Tip

Maak twee aparte functies met @app.get. Gebruik <a href="/pagina1"> en <a href="/pagina2"> om de pagina's aan elkaar te linken.

Antwoord
@app.get("/pagina1", response_class=HTMLResponse)
async def pagina1():
    return """
    <!DOCTYPE html>
    <html>
        <body>
            <h1>Pagina 1</h1>
            <a href="/pagina2">Ga naar pagina 2</a>
        </body>
    </html>
    """

@app.get("/pagina2", response_class=HTMLResponse)
async def pagina2():
    return """
    <!DOCTYPE html>
    <html>
        <body>
            <h1>Pagina 2</h1>
            <a href="/pagina1">Ga naar pagina 1</a>
        </body>
    </html>
    """