Simple CRUD App with Flask And SQL-Alchemy

Alvinditya Saputra included in Documentation

2019-12-24 1041 words 5 minutes

Contents

Prerequisites

Make sure you have installed Python 3 on your device

Project structure

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
* flask-project/
  |--- app/
  |    |--- module/
  |    |    |--- __init__.py
  |    |    |--- controller.py
  |    |    |--- models.py
  |    |--- templates/ (html file)
  |    |--- __init__.py
  |--- venv/
  |--- run.py

Step to create flask crud

A step by step series of examples that tell you how to get a development env running

Install virtual environment

1
pip install virtualenv

Create virtual environment and activate inside your flask-crud directory according the above structure

1
2
3
virtualenv venv
> On windows -> venv\Scripts\activate
> On linux -> . env/bin/activate

Install some third party librares on your virtual environment with pip

1
pip install flask sqlalchemy flask-sqlalchemy

Create run.py directory inside flask-project according the above structure

1
2
from app import app
app.run(debug=True, host='127.0.0.1', port=5000)

Create controller.py according the abpove structure flask-crud/app/module/

1
2
3
4
5
6
from flask import render_template, request
from app import app

@app.route('/')
def index():
    return "My CRUD Flask App"

Create __init__.py inside app directory according the above structure flask-crud/app/

1
2
3
4
5
from flask import Flask

app = Flask(__name__)

from app.module.controller import *

Run first this application to make sure can running with terminal or command promt

1
python run.py

Access localhost:5000 according port that created in run.py

Create an input form called home.html inside templates directory according the above structure

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask Crud</title>
</head>
<body>
<h3>Form Add Mahasiswa</h3>
<form action="/" method="POST">
    <table>
        <tr>
            <td>Nama Lengkap</td>
            <td>:</td>
            <td><input type="text" name="name"></td>
        </tr>
        <tr>
            <td>Nomor Induk Mahasiswa</td>
            <td>:</td>
            <td><input type="text" name="nim"></td>
        </tr>
        <tr>
            <td><button type="submit">Save</button></td>
        </tr>
    </table>
</form>
</body>
</html>

Change return "My CRUD Flask App" in controller.py to return render_template("home.html")

1
2
3
4
5
6
from flask import render_template, request
from app import app

@app.route('/')
def index():
    return render_template("home.html")

Then modify function index() to accept method POST request

1
2
3
4
5
@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        print(request.form)
    return render_template("home.html")

Configure the database with SQLAlchemy, you should modify __init__.py and it will be created flaskcrud.db inside app directory

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
import os
from flask import Flask

project_dir = os.path.dirname(os.path.abspath(__file__))
database_file = "sqlite:///{}".format(os.path.join(project_dir, "flaskcrud.db"))

app = Flask(__name__)
app.config["SQLALCHEMY_DATABASE_URI"] = database_file
app.config["SQLALCHEMY_TRACK_MODIFICATIONS"] = True

from app.module.controller import *

Define model to application, you should create models.py file inside module directory according the above structure.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
from flask_sqlalchemy import SQLAlchemy
from app import app

db = SQLAlchemy(app)

class Mahasiswa(db.Model):
    id = db.Column(db.Integer, unique=True, primary_key=True, nullable=False)
    nim = db.Column(db.String, nullable=False)
    name = db.Column(db.String, nullable=False)

    def __repr__(self):
        return "<Name: {}>".format(self.name)

The structure of database should like as follows

Mahasiswa
`id (Integer, PK, Autoincrement, NOT NULL)`
`name (String, NOT NULL)`
`nim (String, NOT NULL)`

Stop app if that is still running, press CTRL+C key to quit and type python to go to python terminal

Type command bellow to create database file flaskcrud.db

1
2
3
>>> from app.module.models import db
>>> db.create_all()
>>> exit()

The structure project will be look as follows

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
* flask-project/
  |--- app/
  |    |--- module/
  |    |    |--- __init__.py
  |    |    |--- controller.py
  |    |    |--- models.py
  |    |--- templates/ (html file)
  |    |--- __init__.py
  |    |--- flaskcrud.db
  |--- venv/
  |--- run.py

Import database from models.py add this line from .models import db, Mahasiswa to the controller.py, it’s mean import from models.py for db variable and class Mahasiswa
Modify controller.py to create function to storing data of Mahasiswa then save to the database that is already made and retrieving data with Mahasiswa.query.all() it will be retrieving all data from database then made with try and except to handling an error

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
@app.route('/', methods=['GET','POST'])
def index():
    if request.method == 'POST':
        name = request.form['name']
        nim = request.form['nim']
        try:
            mhs = Mahasiswa(nim=nim, name=name)
            db.session.add(mhs)
            db.session.commit()
        except Exception as e:
            print("Failed to add data.")
            print(e)
    listMhs = Mahasiswa.query.all()
    print(listMhs)
    return render_template("home.html", data=enumerate(listMhs,1))

The statement of data=enumerate(listMhs,1) mean data will show from 1 and so on, not from the id, see https://github.com/piinalpin/flask-crud/blob/master/README.md#step-to-create-flask-crud
Then create function to UPDATE data from the collections in controller.py, on UPDATE you should create two function to load or render form input and update to database from method POST on form input using Mahasiswa.query.filter_by(id=id).first() to find data filter by id and db.session.commit() to save the data

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
@app.route('/form-update/<int:id>')
def updateForm(id):
    mhs = Mahasiswa.query.filter_by(id=id).first()
    return render_template("form-update.html", data=mhs)

@app.route('/form-update', methods=['POST'])
def update():
    if request.method == 'POST':
        id = request.form['id']
        name = request.form['name']
        nim = request.form['nim']
        try:
            mhs = Mahasiswa.query.filter_by(id=id).first()
            mhs.name = name
            mhs.nim = nim
            db.session.commit()
        except Exception as e:
            print("Failed to update data")
            print(e)
        return redirect("/")

And modify import flask on top line change to from flask import render_template, request, redirect
Then create the DELETE function to delete data from the collections in controller.py using filter by id and db.session.delete(mhs) function

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
@app.route('/delete/<int:id>')
def delete(id):
    try:
        mhs = Mahasiswa.query.filter_by(id=id).first()
        db.session.delete(mhs)
        db.session.commit()
    except Exception as e:
        print("Failed delete mahasiswa")
        print(e)
    return redirect("/")

After change structure of flask project

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
* flask-project/
  |--- app/
  |    |--- module/
  |    |    |--- __init__.py
  |    |    |--- controller.py
  |    |    |--- models.py
  |    |--- templates/
  |    |    |--- form-update.html
  |    |    |--- home.html
  |    |--- __init__.py
  |    |--- flaskcrud.db
  |--- venv/
  |--- run.py

Built With

Python 3 - The language programming used
Flask - The web framework used
Virtualenv - The virtual environment used
SQL Alchemy - The database library
Flask-SQLAlchemy - Flask and SQL Alchemy connector

Want to demo online?

Flask Crud With SQL Alchemy Built in Python 3

Clone or Download

You can clone or download this project

1
> Clone : git clone https://github.com/piinalpin/flask-crud.git