Creating a User-Editable Form Using Flask and SQLite

Introduction

In this tutorial, we will explore how to create a user-editable form using Flask and SQLite. We will use Flask for the backend API and SQLite as our database management system. The client-side will be done using HTML, CSS, and JavaScript.

Requirements

Flask
SQLite
Python 3.x

Setting Up the Project

First, let’s create a new project directory and navigate into it:

mkdir character_sheet_project
cd character_sheet_project

Next, install all required packages using pip:

pip install flask sqlite3

Create a new file called app.py in our project directory. This is where we will define the Flask application.

Creating the Database

Let’s create a simple database schema using SQLite. Create a new file called database.py.

import sqlite3

class CharacterDB:
    def __init__(self, db_name):
        self.conn = sqlite3.connect(db_name)
        self.cursor = self.conn.cursor()

    def create_table(self):
        self.cursor.execute('''
            CREATE TABLE IF NOT EXISTS characters
            (id INTEGER PRIMARY KEY AUTOINCREMENT, 
            name TEXT, race TEXT, cha_class TEXT, level INTEGER,
            experience INTEGER, alignment_lc TEXT, alignment_ge TEXT,
            height TEXT, weight TEXT, eye_colour TEXT, hair_colour TEXT,
            sex TEXT, age INTEGER, handedness TEXT)
        ''')

    def insert_character(self, character):
        self.cursor.execute('''
            INSERT INTO characters (name, race, cha_class, level, experience,
            alignment_lc, alignment_ge, height, weight, eye_colour, 
            hair_colour, sex, age, handedness) VALUES (:name, :race, 
            :cha_class, :level, :experience, :alignment_lc, :alignment_ge, 
            :height, :weight, :eye_colour, :hair_colour, :sex, :age, 
            :handedness)
        ''', character)

    def update_character(self, character_id, character):
        self.cursor.execute('''
            UPDATE characters SET
                name = :name,
                race = :race,
                cha_class = :cha_class,
                level = :level,
                experience = :experience,
                alignment_lc = :alignment_lc,
                alignment_ge = :alignment_ge,
                height = :height,
                weight = :weight,
                eye_colour = :eye_colour,
                hair_colour = :hair_colour,
                sex = :sex,
                age = :age, 
                handedness = :handedness
            WHERE id = :id AND user_id = :user_id
        ''', character)

    def get_character(self, character_id):
        self.cursor.execute('''
            SELECT *
            FROM characters
            WHERE id = :id AND user_id = :user_id
        ''', {'id': character_id, 'user_id': session['user_id']})
        return self.cursor.fetchone()

# Example usage:
db = CharacterDB('characters.db')
db.create_table()

Creating the Flask App

Now, let’s create the Flask app. Create a new file called app.py.

from flask import Flask, render_template, request, redirect, url_for
from database import db
import session

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-secret-key'

# Initialize the session
session.init_app(app)

@app.route('/character/<int:character_id>')
def character_sheet(character_id):
    character = db.get_character(character_id)
    return render_template('character_sheet.html', character=character)

@app.route('/edit-character/<int:character_id>', methods=['GET', 'POST'])
def edit_character(character_id):
    if request.method == 'POST':
        character = CharacterDB('characters.db')
        character.update_character(character_id, {
            'name': request.form['name'],
            'race': request.form['race'],
            'cha_class': request.form['cha_class'],
            'level': int(request.form['level']),
            'experience': int(request.form['experience']),
            'alignment_lc': request.form['alignment_lc'],
            'alignment_ge': request.form['alignment_ge'],
            'height': request.form['height'],
            'weight': request.form['weight'],
            'eye_colour': request.form['eye_colour'],
            'hair_colour': request.form['hair_colour'],
            'sex': request.form['sex'],
            'age': int(request.form['age']),
            'handedness': request.form['handedness']
        })
    character = db.get_character(character_id)
    return render_template('character_sheet.html', character=character)

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

Creating the Character Sheet HTML

Create a new file called templates/character_sheet.html.

{% extends "main.html" %}

{% block title %}
    Character Sheet
{% endblock %}

{% block main %}
      <div class="container-fluid">
        <div class="row">
          <div class="col">
            <h3>Basic Information</h3>
          </div>
        </div>
        <div class="row">
          <div class="col border border-dark">
            Name
          </div>
          <div class="col border border-dark">
            {{ character.name }}
          </div>
        </div>
        <div class="row">
          <div class="col border border-dark">
            Race
          </div>
          <div class="col border border-dark">
            {{ character.race }}
          </div>
        </div>
        <!-- ... -->

This is a basic example to get you started. You can add more fields, validation and error handling as needed.

Conclusion

In this tutorial, we created a user-editable form using Flask and SQLite. We used Flask for the backend API and SQLite as our database management system. The client-side was done using HTML, CSS, and JavaScript. This example demonstrates how to create a simple character sheet with editable fields. You can expand on this basic structure to create more complex forms and validation logic.

Additional Resources

Last modified on 2024-11-03