Flask Dashboard Argon - Learn Flask by coding

Hello Coder,

In case you're a beginner and the idea of coding a dashboard might sound challenging or a little bit scary, this article should help you a little bit, because, in the end, we will have a functional Flask dashboard application to click on.

• Flask Dashboard Argon - product page
• Flask Dashboard Argon - LIVE Demo

---

---

App features

• DBMS: SQLite, PostgreSQL (production)
• DB Tools: SQLAlchemy ORM, Flask-Migrate (schema migrations)
• Modular design with Blueprints, simple codebase
• Session-Based authentication (via flask_login), Forms validation
• Deployment scripts: Docker, Gunicorn / Nginx, Heroku

---

Adding a database

Because Flask does not support databases natively, we need to integrate Flask SqlAlchemy into our application, in order to have access to the underline database (SQLite, MySql)
This extension helps us to access the tables in an object-oriented way, and avoid completely writing RAW SQL queries.

---

Steps to follow:

• install Flask SQLAlchemy extension
• define models, add the required configuration
• Update the app starter to create the database on-the-fly

Any python extension can be easily installed via PIP

pip install flask_sqlalchemy

Define the User model - used in the authentication process - sources

class User(db.Model):

    id       = db.Column(db.Integer,     primary_key=True)
    user     = db.Column(db.String(64),  unique = True)
    email    = db.Column(db.String(120), unique = True)
    password = db.Column(db.String(500))

Add Configuration required by SQLAlchemy - sources

class Config():
    SQLALCHEMY_TRACK_MODIFICATIONS  = False
    SQLALCHEMY_DATABASE_URI = 'sqlite:///database.db')

Bind SQLAchemy object to our app - in file init.py

from flask            import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(__name__)

app.config.from_object('app.configuration.Config')

db = SQLAlchemy  (app) # flask-sqlalchemy

Finally, update the app launcher run.sh to create the database

from app import app
from app import db

if __name__ == "__main__":
    db.create_all()
    app.run() 

---

Adding authentication

Implementing basic authentication into a Flask application should be an easy task if we have basic Flask knowledge and spent a few minutes reading the documentation.

Steps to follow

• Add Flask Login module
• Add Login, Registration forms and pages
• Handle the authentication routes

Install Flask login - via PIP

pip install flask-login

Install forms helpers to validate the user input

pip install flask-login
pip install wtforms

Create forms.py

from flask_wtf import FlaskForm
from wtforms.validators import Email, DataRequired

class LoginForm(FlaskForm):
    username = StringField   (u'Username', validators=[DataRequired()])
    password = PasswordField (u'Password', validators=[DataRequired()])

class RegisterForm(FlaskForm):
    username = StringField   (u'Username', validators=[DataRequired()])
    password = PasswordField (u'Password', validators=[DataRequired()])
    email    = StringField   (u'Email'   , validators=[Email()])

Create the login page

<form role="form" method="post" action="">
    {{ form.username(placeholder="Username") }}
    {{ form.password(placeholder="Password",type="password") }}
</form>

Create the registration page

<form role="form" method="post" action="">
    {{ form.username(placeholder="Username") }}
    {{ form.email(placeholder="eMail") }}
    {{ form.password(placeholder="Password") }}
</form>

Update the __init.py file - to include the LoginManager

from flask            import Flask
from flask_sqlalchemy import SQLAlchemy # <-- new line
from flask_login      import LoginManager # <-- new line

app = Flask(__name__)

app.config.from_object('app.configuration.Config')

db = SQLAlchemy  (app) #flask-sqlalchemy

lm = LoginManager(   ) # flask-loginmanager
lm.init_app(app) # init the login manager

Create new routes in the views.py for login, logout, register

# update the imports to include latest assets
from app.models import User
from app.forms  import LoginForm, RegisterForm

# logout route
@app.route('/logout.html')
def logout():
    logout_user()

...

# register user
@app.route('/register.html', methods=['GET', 'POST'])
def register():

    # declare the Registration Form
    form = RegisterForm(request.form)
... 

@app.route('/login.html', methods=['GET', 'POST'])
def login():

    # Declare the login form
    form = LoginForm(request.form)
... 

---

Thanks for reading! For more resources, feel free to access:

• 👉 More Flask Dashboards crafted in Django, Flask, and React
• 👉 More Flask Apps - free & PAID