Building a Very Simple CRUD Web App in Python (Flask)

Matthew

We’ll create a notes app where you can:

  • Create new notes
  • Read (list) all notes
  • Update existing notes
  • Delete notes

1. Install Flask

Flask is a lightweight web framework for Python. It handles routing, templates, and requests.

pip install flask

2. Set Up Project Structure

Your files should look like this:

crud_app/
│
├── app.py        # main Flask app
├── templates/
│   ├── base.html # reusable layout
│   ├── index.html # home page with notes list
│   ├── edit.html # edit note page

templates/ is where Flask looks for HTML files.

3. Main Flask App (app.py)

from flask import Flask, render_template, request, redirect

app = Flask(__name__)

# Temporary "database" stored in memory
notes = []

# Home page: show all notes
@app.route('/')
def index():
    return render_template('index.html', notes=notes)

# Create: add a new note
@app.route('/add', methods=['POST'])
def add_note():
    note = request.form.get('note')
    if note:
        notes.append(note)
    return redirect('/')

# Update: edit an existing note
@app.route('/edit/<int:index>', methods=['GET', 'POST'])
def edit(index):
    if request.method == 'POST':
        notes[index] = request.form.get('note')
        return redirect('/')
    return render_template('edit.html', note=notes[index], index=index)

# Delete: remove a note
@app.route('/delete/<int:index>')
def delete(index):
    notes.pop(index)
    return redirect('/')

if __name__ == "__main__":
    app.run(debug=True)

What’s happening here:

  • @app.route('/') → home page, shows all notes.
  • @app.route('/add') → handles adding a new note via form.
  • @app.route('/edit/<int:index>') → loads edit page or updates a note.
  • @app.route('/delete/<int:index>') → removes a note from the list.

4. Templates

templates/base.html

This is the layout that other pages extend.

<!doctype html>
<html>
<head>
    <title>Simple Notes App</title>
</head>
<body>
    <h1>My Notes</h1>
    {% block content %}{% endblock %}
</body>
</html>

templates/index.html

This is the homepage that lists notes and has a form to add new ones.

{% extends 'base.html' %}
{% block content %}
<form method="post" action="/add">
    <input type="text" name="note" placeholder="Write a note">
    <button type="submit">Add</button>
</form>

<ul>
{% for note in notes %}
    <li>
        {{ note }}
        <a href="/edit/{{ loop.index0 }}">Edit</a>
        <a href="/delete/{{ loop.index0 }}">Delete</a>
    </li>
{% endfor %}
</ul>
{% endblock %}

templates/edit.html

{% extends 'base.html' %}
{% block content %}
<form method="post">
    <input type="text" name="note" value="{{ note }}">
    <button type="submit">Update</button>
</form>
{% endblock %}

5. Run the App

In your terminal:

python app.py

Then open http://127.0.0.1:5000

Related Posts

Leave a Reply