DEV Community

Cover image for Flask Dashboard Argon - Learn Flask by coding
Sm0ke
Sm0ke

Posted on • Updated on

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 - Template project provided by AppSeed.


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))
Enter fullscreen mode Exit fullscreen mode

Add Configuration required by SQLAlchemy - sources

class Config():
    SQLALCHEMY_TRACK_MODIFICATIONS  = False
    SQLALCHEMY_DATABASE_URI = 'sqlite:///database.db')
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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() 
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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()])
Enter fullscreen mode Exit fullscreen mode

Create the login page

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

Create the registration page

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

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
Enter fullscreen mode Exit fullscreen mode

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)
... 
Enter fullscreen mode Exit fullscreen mode

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

Latest comments (0)