Django Dashboard Black - Open-Source Boilerplate Code
Tags: python, django, opensource, appseed
Published: 2020-01-13 08:40:57

---
title: Django Dashboard Black - Open-Source Boilerplate Code
published: true
description: A simple web app coded in Django Framework on top of Black Dashboard design
tags: python, django, opensource, appseed
cover_image: https://raw.githubusercontent.com/app-generator/static/master/products/django-dashboard-black-screen.png
---

Hello Coders, 

This article presents a simple, open-source **Django Dashboard** crafted with authentication, database, basic modules, and deployment scripts on top of **[Black Dashboard](https://appseed.us/product/black-dashboard/django/)** UI (free version). 

For newcomers, **Black Dashboard** is a beautiful Bootstrap 4 Admin Dashboard with a huge number of components built to fit together and look amazing. It combines colors that are easy on the eye, spacious cards, beautiful typography, and graphics. 

- 👉 [Django Black Dashboard](https://appseed.us/product/black-dashboard/django/) - `Product page`
- 👉 [Django Black Dashboard](https://django-black-dashboard.appseed-srv1.com/) - `LIVE Demo`

![Django Dashboard Black - Template project provided by AppSeed.](https://raw.githubusercontent.com/app-generator/django-dashboard-black/master/media/django-dashboard-black-intro.gif)

---

## **[What is Django](https://docs.appseed.us/content/what-is/django/)** 

Short note for newcomers: **Django** is an open-source web application framework written in [Python programming language](https://www.python.org/). A framework means a collection of modules that are logically grouped together and allow you to create web applications by reusing stuff, instead of writing all from scratch. 

Useful **Django Resources**:

- [Django](https://www.djangoproject.com/) - official website and [docs](https://docs.djangoproject.com/)
- [Django](https://www.fullstackpython.com/django.html) - related content provided by the (popular) Full-Stack-Python platform

--- 

## Code structure

The web app has three main modules grouped by functionalities: 

- [core module](https://github.com/app-generator/django-dashboard-black/tree/master/core) is the application workhorse, used to handle the static assets and global configuration
- [authentication module](https://github.com/app-generator/django-dashboard-black/tree/master/authentication) - manage the login and users registration
- [app module](https://github.com/app-generator/django-dashboard-black/tree/master/app) - load the app pages if the user is authenticated or redirect the request to the login page, otherwise. 

The relevant files, for all modules, are listed in this simple ASCII chart:   


```bash
< PROJECT ROOT >
   |
   |-- core/                               # Implements app logic and serve the static assets
   |    |-- settings.py                    # Django app bootstrapper
   |    |-- wsgi.py                        # Start the app in production
   |    |-- urls.py                        # Define URLs served by all apps/nodes
   |    |
   |    |-- static/
   |    |    |-- <css, JS, images>         # CSS files, Javascripts files
   |    |
   |    |-- templates/                     # Templates used to render pages
   |         |
   |         |-- includes/                 # HTML chunks and components
   |         |    |-- navigation.html      # Top menu component
   |         |    |-- sidebar.html         # Sidebar component
   |         |    |-- footer.html          # App Footer
   |         |    |-- scripts.html         # Scripts common to all pages
   |         |
   |         |-- layouts/                  # Master pages
   |         |    |-- base-fullscreen.html # Used by Authentication pages
   |         |    |-- base.html            # Used by common pages
   |         |
   |         |-- accounts/                 # Authentication pages
   |         |    |-- login.html           # Login page
   |         |    |-- register.html        # Register page
   |         |
   |      index.html                       # The default page
   |     page-404.html                     # Error 404 page
   |     page-500.html                     # Error 404 page
   |       *.html                          # All other HTML pages
   |
   |-- authentication/                     # Handles auth routes (login and register)
   |    |
   |    |-- urls.py                        # Define authentication routes  
   |    |-- views.py                       # Handles login and registration  
   |    |-- forms.py                       # Define auth forms  
   |
   |-- app/                                # A simple app that serve HTML files
   |    |
   |    |-- views.py                       # Serve HTML pages for authenticated users
   |    |-- urls.py                        # Define some super simple routes  
   |
   |-- requirements.txt                    # Development modules - SQLite storage
   |
   |-- .env                                # Inject Configuration via Environment
   |-- manage.py                           # Start the app - Django default start script
   |
   |-- ************************************************************************
```

---

## The environment 

Before we can use the app we should have [Python3](https://www.python.org/downloads/) installed in the workstation. To test the installation, open a terminal and type: 

```bash
PS C:\wamp64\www> python --version
Python 3.7.2 <--- All good
```

---

## Build the app

As mentioned before, the app is published on Github platform and the source code  comes with a comprehensive [README](https://github.com/app-generator/django-dashboard-black/blob/master/README.md) file with all the necessary instructions to build the app: 

> Clone the app sources (via [GIT](https://git-scm.com/downloads)) 

```bash
$ # Get the code
$ git clone https://github.com/app-generator/django-dashboard-black.git
$ cd django-dashboard-black
```

> Install the dependencies 

The modules can be installed as global dependencies (not recommended) or using a Virtualenv that executes the code in an isolated environment. 

```bash
$ virtualenv env
$ source env/bin/activate
$ pip3 install -r requirements.txt
```

Once the modules are installed, the next step is to set up the database. The app comes with an SQLite database, the default option for Django simple apps. 

```bash
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
```

The `makemigrations` subcommand will generate the necessary SQL code and  `migrate` will create the database and tables. The app uses a single table for users registration and login. If all goes well, now we should be able to start the application. 

> Start the web app

```bash
$ # Start the application (development mode)
$ python manage.py runserver # default port 8000
$
$ # Start the app - custom port 
$ # python manage.py runserver 0.0.0.0:<your_port>
$
$ # Access the web app in browser: http://127.0.0.1:8000/
```

By visiting the app in the browser, we should see the login screen: 

![Django Dashboard Black - Open-Source Admin Panel the Login Screen.](https://raw.githubusercontent.com/app-generator/static/master/products/django-dashboard-black-screen-login.png)

Currently, we don't have any user in our database but we can easily create one using the registration page: 

![Django Dashboard Black - Open-Source Admin Panel the Register Screen.](https://raw.githubusercontent.com/app-generator/static/master/products/django-dashboard-black-screen-register.png)

During the registration process, some basic checks are performed in the backend server (user already exists, weak password) and if all goes well, the user is created and the request is redirected to login page. 

After authentication, the web app will display all the menus and the user information (id, email, and username) is injected in the *[user profile](https://github.com/app-generator/django-dashboard-black/blob/master/core/templates/pages/page-user.html)* page: 

![Django Dashboard Black - Open-Source Admin Panel the Register Screen.](https://raw.githubusercontent.com/app-generator/static/master/products/django-dashboard-black-screen-profile.png)

The user information is available in any view as a global object in the request: 

```html
        <form>
         ...

          <div class="row">
            <div class="col-md-5 pr-md-1">
              <div class="form-group">
                <label>UserID (disabled)</label>
                <input type="text" class="form-control" disabled="" value="{{ request.user.id }}">
              </div>
            </div>
          </div>
          
          ...

``` 

---


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

- 👉 More [Django Dashboards](https://appseed.us/admin-dashboards/django/) - a curated index 
- 👉 [Django App Generator](https://app-generator.dev/django/) - A 2nd generation App Builder