loading...
Cover image for Django Dashboard Black - Open-Source Boilerplate Code

Django Dashboard Black - Open-Source Boilerplate Code

sm0ke profile image Sm0ke Updated on ・4 min read

Hello Coders,

In this article, I will present a simple web app coded in Django with a basic set of features: session-based authentication, SQLite database, forms validation.


Free is great for sure, but PRO is better: PRO Django Admin Dashboards - 24/7 LIVE Support included. Thanks, I'm out!


The project is published on Github under the MIT license and might be used as a code-base for a real-life production web app.

Django Dashboard Black - Open-Source Admin Panel.


What is Django (web framework)

Short note for newcomers: Django is an open-source web application framework written in Python programming language. 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 - official website and docs
  • Django - related content provided by the (popular) Full-Stack-Python platform

Code structure

The web app has three main modules grouped by functionalities:

  • core module is the application workhorse, used to handle the static assets and global configuration
  • authentication module - manage the login and users registration
  • app module - 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:


$ # Source code:
$ # https://github.com/app-generator/django-dashboard-black
$
$ <django-dashboard-black>
$     |
$     |-- requirements.txt # project dependencies 
$     |-- manage.py        # app bootstrapper 
$     |
$     |-- <core>
$     |      | 
$     |      |---- settings.py # global settings 
$     |      |---- urls.py     # define the routing rules  
$     |      |
$     |      |---- <static>    # used for assets (js, css, images)  
$     |      |---- <templates> # HTML templates 
$     |                |       
$     |                |-- layouts, includes, pages
$     |
$     | 
$     |-- <authentication> 
$     |      | 
$     |      |---- views.py # manage Login, registration pages
$     |      |---- urls.py  # Auth routing rules (login, register)
$     |      |---- forms.py # Define auth forms  
$     |
$     | 
$     |-- <app> 
$     |      | 
$     |      |---- views.py  # load dashboard pages
$     |      |---- urls.py   # Define the routing rules 
$     |      |---- models.py # Define the User model, used by authentication
$     |
$     |-- ******************************************************************
$

The environment

Before we can use the app we should have Python3 installed in the workstation. To test the installation, open a terminal and type:

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 file with all the necessary instructions to build the app:

Clone the app sources (via GIT)

$ # 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.

$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages 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.

$ # 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

$ # 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.

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.

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 page:

Django Dashboard Black - Open-Source Admin Panel the Register Screen.

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

        <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>

          ...


Django - More Free apps

For more free web apps and boilerplate code, feel free to access:


Thanks for reading and let me know your thoughts in the comments!

Posted on by:

sm0ke profile

Sm0ke

@sm0ke

#Automation, my favorite programming language

Discussion

markdown guide
 

The UI seems to be awesome. I rarely find such great work on Django.

 

Thank you! :)
The app is generated, using automation devTools. More free Django apps prototyped in the way , are available on a curated list on Github:
Django Admin Dashboards