Flask Dashboard Argon - Learn Flask by coding
Tags: flask, dashboard, appseed
Published: 2019-06-14 18:06:23

---
title: Flask Dashboard Argon - Learn Flask by coding
published: true
description: Learn Flask by coding a real product, Flask Dashboard Argon   
cover_image: https://raw.githubusercontent.com/app-generator/static/master/flask-argon-dashboard/argon-dashboard-coded-in-flask-cover.jpg 
tags: flask, dashboard, appseed
---

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](https://appseed.us/admin-dashboards/flask-dashboard-argon) application to click on. 

- [Flask Dashboard Argon](https://appseed.us/admin-dashboards/flask-boilerplate-dashboard-argon) - product page
- [Flask Dashboard Argon](https://flask-argon-dashboard.appseed-srv1.com/) - LIVE Demo

---

![Flask Dashboard Argon - Template project provided by AppSeed.](https://raw.githubusercontent.com/app-generator/flask-boilerplate-dashboard-argon/master/media/flask-boilerplate-dashboard-argon-screen.png)

---

## 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](https://flask-sqlalchemy.palletsprojects.com/en/2.x/) 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](https://pypi.org/project/pip/)

`pip install flask_sqlalchemy`

> Define the User model - used in the authentication process - [sources](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/models.py)

```
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](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/configuration.py)

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

> Bind SQLAchemy object to our app - in file [__init__.py](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/__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](https://github.com/app-generator/flask-argon-dashboard/blob/master/run.py) 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](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/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](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/templates/pages/login.html)
```
<form role="form" method="post" action="">
    {{ form.username(placeholder="Username") }}
    {{ form.password(placeholder="Password",type="password") }}
</form>
```

> Create the [registration](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/templates/pages/register.html) 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](https://github.com/app-generator/flask-argon-dashboard/blob/master/app/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](https://appseed.us/admin-dashboards/flask/) crafted in Django, Flask, and `React`
- 👉 More [Flask Apps](https://appseed.us/apps/flask/) - free & PAID