Adding a New “Notes” Feature (Route + Template + Database Table)

This guide shows you how to:

• Create a new database table (notes)

• Create a new route in Flask to insert records into that table

• Create a new HTML template to show the form

• Add a homepage link to reach the form

Follow every step carefully.

PART 1 — Update the Database Schema

1. Open schema.sql

This file is in the root of your project.

2. Add the following block at the BOTTOM of the file

Paste this after the existing tables:

-- ---------------------------------------------------------------
-- NOTES TABLE
-- Stores simple text notes created by users.
-- Fields:
--   id       → unique ID
--   title    → required text title
--   content  → required text body
-- ---------------------------------------------------------------
CREATE TABLE notes (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    content TEXT NOT NULL
);

3. Save the file

PART 2 — Rebuild the Database

Your project is already set up to rebuild your SQLite DB from schema.sql.

4. Open a terminal inside your project folder

Mac example:

cd path/to/solution_template_project_one

5. Activate your virtual environment

Mac/Linux:

source venv/bin/activate

6. Run the database initialization command

python app.py --init-db

You should see output like:

[INIT] Applied schema from schema.sql -> db/app.db
Database initialized at db/app.db

Your new notes table is now created.

PART 3 — Add a New Route in app.py

7. Open app.py

Scroll to where the other routes are (items_list, items_create, etc.).

8. Add this new route (you can put it under items_create)

@app.route('/notes/create', methods=['GET', 'POST'])
@login_required
def notes_create():
    user = current_user()
    db = get_db()

    if request.method == 'POST':
        title = request.form.get('title', '').strip()
        content = request.form.get('content', '').strip()

        if not title or not content:
            flash('Title and content are required.', 'error')
            return render_template('notes/create.html', form=request.form)

        db.execute(
            '''
            INSERT INTO notes (title, content)
            VALUES (?, ?)
            ''',
            (title, content)
        )
        db.commit()

        flash('Note saved successfully!', 'success')
        return redirect(url_for('index'))

    return render_template('notes/create.html', form=None)

PART 4 — Create the New Template

9. Create a new folder in templates named notes

Path should be:

templates/notes/

10. Inside that folder, create: create.html

Paste this:

{% extends "base.html" %}

{% block title %}Create Note{% endblock %}

{% block content %}
  <h1 class="text-2xl font-bold mb-4">Create a New Note</h1>

  <form action="{{ url_for('notes_create') }}" method="post" class="space-y-4 max-w-lg">
    <div>
      <label for="title" class="block text-sm font-medium text-gray-700">Title</label>
      <input
        type="text"
        id="title"
        name="title"
        value="{{ form.title if form else '' }}"
        required
        class="mt-1 block w-full border border-gray-300 rounded px-3 py-2"
      >
    </div>

    <div>
      <label for="content" class="block text-sm font-medium text-gray-700">Content</label>
      <textarea
        id="content"
        name="content"
        rows="4"
        required
        class="mt-1 block w-full border border-gray-300 rounded px-3 py-2"
      >{{ form.content if form else '' }}</textarea>
    </div>

    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
      Save Note
    </button>
  </form>

  <p class="mt-4">
    <a href="{{ url_for('index') }}" class="text-blue-600 underline">Back to home</a>
  </p>
{% endblock %}

PART 5 — Add a Link on the Homepage

Open:

templates/index.html

Find this block:

<p class="mb-4">You're logged in. Explore your <a href="{{ url_for('items_list') }}" class="underline">Items</a>.</p>

11. Directly below it, add:

<p class="mb-4">
  Or create a new <a href="{{ url_for('notes_create') }}" class="underline">Note</a>.
</p>

PART 6 — Test Everything

12. Run the app

python app.py

13. In your browser

1. Visit http://127.0.0.1:5000/

2. Log in

3. Click “Note”

4. Fill in the form

5. Submit

You should see:

• A flash message: “Note saved successfully!”

• A redirect back to the home page

(Optional advanced check)

Open the database:

sqlite3 db/app.db

Then:

SELECT * FROM notes;

Your note should appear.