Codementor Events

Star Admin - Django Dashboard Example

Published Jul 26, 2020Last updated Oct 14, 2021
Star Admin - Django Dashboard Example

Hello Coders,

This article presents a free Django Dashboard Example coded on top of a nice UI - Star Admin (Free Version), an iconic open-source design. Star admin is a beautifully designed admin template featuring a fine selection of useful Bootstrap components and elements. The pre-built pages of the templates are intuitive and very well-designed.



Star Admin - Coded in Django, animated presentation.


Star Admin - HTML Version

UI Vendor Notes - Star Admin is a free responsive admin template built with Bootstrap 4. The template has a colorful, attractive yet simple and elegant design. The template is well crafted, with all the components neatly and carefully designed and arranged within the template.

Star Admin is packed with all the features that fit your needs but not cramped with components you would not even use. It is an excellent fit to build admin panels, e-commerce systems, project management systems, CMS, or CRM.


How to build HTML files

Being an open source project, we can build Star Admin HTML files directly from Github sources, by following the build instructions provided in the README file.

$ # Clone the sources
$ https://github.com/BootstrapDash/StarAdmin-Free-Bootstrap-Admin-Template.git star-admin
$ cd star-admin
$
$ # Install Dependencies
$ yarn
$
$ # Compile files 
$ gulp serve

At this point, we should see the HTML files rendered in the browser with LIVE reload. The tooling provided in the HTML version using Gulp to compile SCSS and JS Vendor libs.


Star Admin - Django Version

The project is a simple, unopinionated Django starter coded with a modular codebase and a short-list of modules. Basic deployment scripts are also provided for some well-known platforms: Docker, Gunicorn/Nginx stack - App features:

  • UI-Ready app, SQLite Database, Django Native ORM
  • Modular design, clean code-base
  • Session-Based Authentication, Forms validation
  • Deployment scripts: Docker, Gunicorn / Nginx
  • Active support via Github and Discord - LIVE Service

Environment
To use the stater, Python3 should be installed properly in the workstation. If you are not sure if Python is properly installed, please open a terminal and type python --version. The full-list with dependencies and tools required to build the app:

  • Python3 - the programming language used to code the app
  • GIT - used to clone the source code from the Github repository
  • Basic development tools (g++ compiler, python development libraries ..etc) used by Python to compile the app dependencies in your environment.

For more information on how to set up your environment please access the resources listed below. If something is not working or missing, feel free to ask for more information in the comments.


Compile the sources

To built and start the app locally, we need to get the sources code by using GIT or download the ZIP archive from the public repository - Star Admin Django Sources.

After we complete this simple step, make sure you change the directory inside sources and type a few commands, extracted from the README file:

$ # Get the code
$ git clone https://github.com/app-generator/django-star-admin.git
$ cd django-star-admin
$
$ # Virtualenv modules installation (Unix based systems)
$ virtualenv env
$ source env/bin/activate
$
$ # Virtualenv modules installation (Windows based systems)
$ # virtualenv env
$ # .\env\Scripts\activate
$
$ # Install modules - SQLite Storage
$ pip3 install -r requirements.txt
$
$ # Create tables
$ python manage.py makemigrations
$ python manage.py migrate
$
$ # 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/

At this point, our simple Django Dashboard should be visible in the browser, if all goes well in the terminal. To understand the codebase, please take a look at the chart below:

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

App Bootstrap Flow

  • Django bootstrapper manage.py uses core/settings.py as the main configuration file
  • core/settings.py loads the app magic from .env file
  • Redirect the guest users to Login page
  • Unlock the pages served by app node for authenticated users

Star Admin Django - Screens

The UI kit provided by BootstrapDash is coded with some nice components, widgets and sample pages. Please note that the permissive (MIT) license of the project allows the usage of the source code for unlimited hobby & commercial projects, without footer mentions for BootstrapDash or AppSeed (codebase provider).

Star Admin - UI Buttons

Star Admin Django - UI Buttons Screen.


Star Admin - Charts Page

Star Admin Django - Charts Page.


Star Admin - UI Widgets

Star Admin Django - UI Widgets Screen.


Thanks for reading! Let me know your thoughts in the comments.



What is Django

Intro for newcomers - Django is a high-level Python web framework, built by experienced developers, that enables rapid development of secure and maintainable websites. The project is actively supported and versioned by an impressive open-source community.

With the first release in September 2008, Django was improved constantly since then. Django follows the "Batteries included" philosophy and provides almost everything developers might want to do "out of the box". Because everything you need is part of the one "product", it all works seamlessly together, follows consistent design principles, and has extensive and up-to-date documentation.

Django being a complete framework, can be used to code super simple, one-page websites and, at the same time, complex eCommerce platforms, API servers, or microservices.

For more information related to this amazing framework, feel free to access the official Django links:

Discover and read more posts from Adi Chirilov - Sm0ke
get started
post commentsBe the first to share your opinion
Show more replies