Skip to content

The Patient Form

This is your capstone exercise. You are going to build a small patient entry system — from scratch, on your own — using everything you have learned.

No hints for the code this time. Just a clear description of what to build and what it should look like when it is working.

What you are building

A single-page Flask app where:

  • The user fills in a patient's name and age
  • They click Submit
  • The page reloads and shows the new patient added to a table below the form
  • Every submission adds a new row to the table
  • The list is stored in memory for as long as the app is running

The form — build this

This is what your form should look like in the browser:

┌─────────────────────────────────────────┐
│                                         │
│  Add Patient                            │
│                                         │
│  Patient Name   [                    ]  │
│                                         │
│  Age            [                    ]  │
│                                         │
│               [    Add Patient    ]     │
│                                         │
└─────────────────────────────────────────┘

Two fields. One button. Nothing else. No styling needed.

  • Patient Name — a text input
  • Age — a number input
  • The button says Add Patient

The table — build this

Below the form, the page should show a table of all submitted patients:

┌──────────────────────┬──────┐
│ Patient Name         │ Age  │
├──────────────────────┼──────┤
│ John Doe             │  45  │
│ Mary Smith           │  32  │
│ Peter Mutiibwa       │  27  │
└──────────────────────┴──────┘

Each new submission adds one row. The table starts empty (just the header row) and grows with every patient added.

Requirements

Here is everything your app must do:

Project structure 

patient-app/
├── .venv/
├── templates/
│   └── index.html
└── app.py

app.py must: - Import Flask, render_template, request, redirect, and url_for - Create a patients list at the top to store entries in memory - Have a GET / route that renders index.html and passes patients to it - Have a POST /add route that reads patient_name and age from the form, builds a dictionary, appends it to patients, and redirects back to /

templates/index.html must: - Use the full HTML skeleton - Show the form with correct name attributes (patient_name and age) - Show the table using a Jinja2 {% for %} loop - Use method="post" and action="/add" on the form

How to know it is working

  1. Run python app.py
  2. Visit http://127.0.0.1:5000
  3. You see the form and an empty table with just the header row
  4. Fill in a name and age, click Add Patient
  5. The page reloads. The patient appears in the table.
  6. Add three more patients. All four appear in the table.
  7. Stop the app with Ctrl + C. Run it again. The list is empty — expected.

If all seven steps work, you have built a complete working web application — frontend and backend — with no JavaScript, no database, and no help.

Stuck?

Go back to the lessons. The form is in Collecting Form Data → Building the Form. The Flask routes are in Receiving Data in Flask. The Jinja2 loop is in Looping in Your Template. Everything you need is already there — you just need to put it together yourself this time.

← Flask and Templates    Next: What is PookieDB? →