I am very new to FastApi and I know a little HTML.

I have a root route in FastAPI that connects to a MySql db and return a couple of rows from the db.

import mysql.connector
from typing import Annotated
from fastapi import FastAPI, HTTPException, Request, BackgroundTasks, Depends, Form
from fastapi.middleware.cors import CORSMiddleware
from fastapi.templating import Jinja2Templates
from fastapi.responses import HTMLResponse

from schemas import User, Role, ActionPerformed, ProcedureExecuted, Persons
import database as db

@app.get("/")
async def home(request: Request):
    """ Show the procedures executed """
    connection = db.get_db()
    cursor = connection.cursor()
    query = "SELECT * FROM proc_executes ORDER BY Proc_Procedure"
    cursor.execute(query)
    proc_exec = cursor.fetchall()
    connection.close()

    for proc in proc_exec:
        print(f"Single Proc Exec: {proc}")

    return templates.TemplateResponse("home.html", {
        "request": request,
        "proc_exec": proc_exec,
    })

The html for home.html:

{% block content %}
This is the <i>Home</i> page for the <b>Thesis Tracking</b> app
<br/><br/>

<div class="ui input">
  <input type="text" placeholder="Search persons" spellcheck="false" data-ms-editor="true">
</div>
<br/>
<br/>
https://semantic-ui.com/elements/button.html
<br/>
<br/>
<br/>

<div class="ui button" tabindex="0">
  Focusable
</div>
</p>

<table class="ui celled table">
  <thead>
    <tr>
        <th>Procedure</th>
        <th>Source</th>
        <th>Date</th>
        <th>Time</th>
    </tr>
  </thead>
  <tbody>
        <b>Date and time of procedures executed</b>
      {% for proc in proc_exec %}

    <tr>
      <td>{{ proc.1 }}</td>
      <td>{{ proc.2 }}</td>
      <td>{{ proc.3 }}</td>
      <td>{{ proc.4 }}</td>
    </tr>
      {% endfor %}
  </tbody>
</table>

{% endblock %}

I have another route, persons, that return the list of all persons from the same db:

@app.get("/persons")
async def read_persons(request: Request):
    connection = db.get_db()
    cursor = connection.cursor()
    query = "SELECT * FROM persons"
    cursor.execute(query)
    v_persons = cursor.fetchall()
    connection.close()

    for v_person in v_persons:
        print(f"Single person Exec: {v_person}")

    return templates.TemplateResponse("persons.html", {
        "request": request,
        "persons": v_persons,
    })

The persons.html looks like this:

{% extends "layout.html" %}

{% block content %}
This is the <i>Persons</i> page for the <b>Thesis Tracking</b> app
<br/>
<div>
    <button class="ui button">
        Home
    </button>
</div>
<br/><br/>

<table class="ui celled table">
  <thead>
    <tr>
        <th>Procedure</th>
        <th>Source</th>
        <th>Date</th>
        <th>Time</th>
    </tr>
  </thead>
  <tbody>
        <b>Persons</b>
      {% for person in persons %}
    <tr>
      <td>{{ person.1 }}</td>
      <td>{{ person.2 }}</td>
      <td>{{ person.3 }}</td>
      <td>{{ person.4 }}</td>
    </tr>
      {% endfor %}
  </tbody>
</table>

{% endblock %}

When the user clicks the “Home” button, the home route must be called i.e. displays home.html.

I have tried several resources:
How to navigate through FastAPI routes by clicking on HTML button in Jinja2 Templates?
https://fastapi.tiangolo.com/tutorial/request-forms/
FastAPI equivalent of Flask’s request.form, for agnostic forms

When I try to implement any of the ways to call an HTML page, I get the message “Method not allowed”.

Can anyone please point me to a practical example to call the home.html from persons.html when the user clicks on the “Home” Button.

Thanks you, in advance.

Regards,

Phlip