Django Dashboard Black - Learn Django by coding simple tasks

Hello Coders,

This article should help students and beginners to accommodate with Django Web Framework, by coding simple tasks on top of a simple admin panel generated by the AppSeed platform: Django Dashboard Black

The code-base comes with a minimum set of features (authentication, modular code, parsed pages, forms validation, UI-ready) and based on the permissive license, might be used for a hobby or commercial product. Anyone that follows this challenge will achieve a few things:

  • Accommodate with Git / Django Framework
  • Accommodate with a production-ready project: Django Dashboard Black
  • Build a Python project using a Virtual environment
  • Change the title of an existing
  • List defined users, by using the Django shell

Dashboard Links:

Django Dashboard Black - Open-Source Admin Panel coded in Django.


App dependencies: This open-source app requires Python3 to be installed on the target machine. Please note that Pyhton2 is no longer supported by the Python foundation - more information here: Sunsetting Python 2

The web app used in this article is published on Github, under the MIT license is coded with a basic set of features on top of a beautiful black design:

  • SQLite, Django native ORM
  • Modular code-base
  • Session-Based Authentication (login, register)
  • Forms validation
  • UI Kit: Black Dashboard provided by CreativeTim

What is Django (web framework)

Note for new comers: Django is an open-source web application framework written in Python. A framework means a collection of modules and helpers that make development easier. They 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
  • Reddit/r/Django - a super active Reddit community
  • Django - related content provided by the (popular) Full-Stack-Python platform

Clone the sources

As mentioned before, the app is published on Github and we can easily grab the sources by downloading the zip from the project page or using a terminal and git command tool to clone the sources:

$ git clone https://github.com/app-generator/django-dashboard-black.git
$ cd django-dashboard-black

The Code Structure

After we have the source code locally, let's take a moment to analyze the structure. Django projects, by default, are modular and quite easy to understand and update. Our project is not an exception and the code-base is split into three modules:

  • Core module - used to handle the static assets (JS, CSS, images) and global configuration
  • Authentication module - handles the login & users registration
  • App module - manage all other actions: serve app pages when users are authenticated and redirect to the login page otherwise. The relevant files are listed in this simple 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
     |
     |-- ******************************************************************

Build the project

Python / Django projects, usually are build from sources and to do that we need to install the project dependencies listed in the requirements.txt. We can install the dependencies in two ways:

  • Using the global Python environment, to install the project dependencies is now always a good practice based on the fact that we might have conflicts between versions used in other applications
  • Using a Virtual environment - most of the time, the recommended way that helps us to execute and build the app using Python sandbox. All modules required by the app are installed inside the Virtual ENV and the risk to have conflicts with modules used by other Python apps disappears.

To activate a Virtual ENV, and install the modules we need to type a few simple commands in the terminal:

$ # Make sure you are inside the project
$ cd django-dashboard-black
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv --no-site-packages env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv --no-site-packages env
$ # .\env\Scripts\activate
$ 
$ # Install modules
$ pip3 install -r requirements.txt

At this point, we have all the dependencies properly installed inside the Virtual ENV (not globally) and the app is (almost) ready to be started.


Start the Web App

To have a usable Django web app, we need to set up the database, before starting. This can be easily done with only two simple commands:

$ # makemigrations sub-command will generate the necessary SQL code
$ python manage.py makemigrations
$
$ # Migrate sub-command will create the SQLite database and tables
$ python manage.py migrate

If all goes well, we can start the app and visit the UI in the browser by typing in the console:

$ # 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 default, there is no default user defined in the application, and we need to create one, using the registration page. After successful login, the app redirects  the user to main dashboard screen, and unlocks all menus.

Django Dashboard Black - Main Dashboard Page.

If we access the user profile page, we will see the registration data injected in the page using the global user object injected by the Django Framework:

Django Dashboard Black  Open-Source Admin panel, the User Profile Page.


Update the page title

In this Django project, pages are rendered using composition between a master page and a real page that extends the skeleton with specific data. For instance, the index page extends the master page default.html

Code for master page

<head>

   <meta http-equiv="X-UA-Compatible" content="IE=edge" />
   <title>
	Django Dashboard Black - { % block title % }{ % endblock % } | AppSeed 
   </title>

</head>
<body data-background-color="dark">
    { % include 'includes/navigation.html' % }

    { % include 'includes/sidenav.html' % }

    <div class="main-panel">
        <div class="content">
	 
            { % content % }{ % content % }
			
        </div>

	{ % include 'includes/footer.html' % }

    </div>
		
</body>
</html>

When a new page extends another page, the specific content should be defined between corespondent blocks, as we can see for the index page:

{% extends "layouts/default.html" %}

{% block title %} Dashboard {% endblock title %}

{ % block content % }

   <H1> Specific Content injected into the master page </H1>

{ % endblock content % }

In order to change the page title, we need to update the text inside the title block:

{% extends "layouts/default.html" %}

{% block title %} New Title {% endblock title %}

...

List users using the console

Django offers a convenient way to test the application structures, database information, and methods defined or used by the application: the Django shell

To start the Django shell we need to use the shell sub-command

$ # Start the Django shell
$ python manage.py shell

If all goes well we should see this output :

>>> Python 3.7.2 (tags/v3.7.2:9a3ffc0492, Dec 23 2018, 22:20:52) [MSC v.1916 32 bit (Intel)] on win32
>>> Type "help", "copyright", "credits" or "license" for more information.
>>> (InteractiveConsole)
>>>

From this point, we can interact with our project data and methods by this shell interface. For listing all users registered in the application we need to import the Users model, where all users are saved, and make a query using the Django native ORM:

>>> from django.contrib.auth.models import User
>>> User.objects.all()
<QuerySet [<User: test>]>
>>> User.objects.all()[0].id
1
>>> User.objects.all()[0].username
`test`

Pretty cool and easy!


Where to go from here?

Access more free apps, open-source dashboards, and static sites built or generated by the AppSeed platform.  Read more about AppSeed:


Thanks for reading this long post.

Show Comments

Get the latest posts delivered right to your inbox.