Table of Contents

Django Configuration

General Information

Configuring the Django Web Framework and its dependencies.


The EXAMPLE sections of code end up building an inventory website.


Checklist


Database: MariaDB

Configuring the MariaDB Database.


Django

Configuring Django.

Project/App Setup

Database Setup

Logging Setup

Admin Interface


URLs/Views

A URL+View will generate a web page.

URLs

Project Level URLs File


App Level URLs File

Views


Web Page Templates

Creating the web page templates.

Page Content: Index

Example page content for the index.html page.

/home/django/myprojecthere/myapphere/templates/myapphere/index.html

<!DOCTYPE html>                                                                            
<html>
<head>
  <title>Asset List</title>
</head>
<body>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapphere/style.css' %}" />
 
<!-- Export button jquery (https://github.com/kayalshri/tableExport.jquery.plugin) -->
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'myapphere/tableExport.js' %}"></script>
<script type="text/javascript" src="{% static 'myapphere/jquery.base64.js' %}"></script>
 
<!-- Layout Divide: Left Side Menu for Devices -->
<table class="layout">
<tr>
<!-- For white gaps in between Device Types and Phys/Virt, this must be larger than stylesheet width -->
<!-- Set to style sheet width+25 px -->
<td class="layout" width="696px">
 
<!-- Device Menu: Determine Active Device -->
<ul class="asset_type">
{% if not asset_type %}
  <li><a class="active" href="/myapphere/">All Devices</a></li>
{% else %}
  <li><a href="/myapphere/">All Devices</a></li>
{% endif %}
 
{% if asset_type == 'firewalls' %}
  <li><a class="active" href="/myapphere/firewalls/">Firewalls</a></li>
{% else %}
  <li><a href="/myapphere/firewalls/">Firewalls</a></li>
{% endif %}
 
{% if asset_type == 'routers' %}
  <li><a class="active" href="/myapphere/routers/">Routers</a></li>
{% else %}
  <li><a href="/myapphere/routers/">Routers</a></li>
{% endif %}
 
{% if asset_type == 'servers' %}
  <li><a class="active" href="/myapphere/servers/">Servers</a></li>
{% else %}
  <li><a href="/myapphere/servers/">Servers</a></li>
{% endif %}
 
{% if asset_type == 'storage' %}
  <li><a class="active" href="/myapphere/storage/">Storage</a></li>
{% else %}
  <li><a href="/myapphere/storage/">Storage</a></li>
{% endif %}
 
{% if asset_type == 'switches' %}
  <li><a class="active" href="/myapphere/switches/">Switches</a></li>
{% else %}
  <li><a href="/myapphere/switches/">Switches</a></li>
{% endif %}
 
{% if asset_type == 'workstations' %}
  <li><a class="active" href="/myapphere/workstations/">Workstations</a></li>
{% else %}
  <li><a href="/myapphere/workstations/">Workstations</a></li>
{% endif %}
 
</ul>
</td>
<!-- END of Layout Divide: Left Side Menu for Devices -->
 
 
<!-- Layout Divide: Right Side Phys and Virt Links -->
<!-- For white gaps in between Phys/Virt and Stats, this must be larger than stylesheet width -->
<!-- Set to style sheet width+25 px -->
<td class="layout" width="188px">
<!-- Asset Type Menu: Physical and Virtual -->
  <ul class ="asset_hardware">
  {% if asset_hardware == 'physical' %}
    <li><a class="active" href="/myapphere/physical/">Physical</a></li>
    <li><a href="/myapphere/virtual/">Virtual</a></li>
  {% elif asset_hardware == 'virtual' %}
    <li><a href="/myapphere/physical/">Physical</a></li>
    <li><a class="active" href="/myapphere/virtual/">Virtual</a></li>
  {% else %}
    <li><a href="/myapphere/physical/">Physical</a></li>
    <li><a href="/myapphere/virtual/">Virtual</a></li>
  {% endif %}
  </ul>
</td>
<!-- END of Layout Divide: Right Side Phys and Virt Links -->
 
 
<!-- Layout Divide: Right Side Additional Links -->
<td class="layout">
<ul class="stats">
  <li><a href="/myapphere/stats/">Stats</a></li>
</ul>
</td>
<!-- END of Layout Divide: Right Side Additional Links -->
 
</tr>
 
 
<!-- Layout Divide: Left Side Environment Menu -->
<tr>
<td class="layout">
 
<!-- Environment Menu: Dynamic Asset Type Links -->
<ul class="env">
{% if env == 'dev' %}
  {% if asset_type %}
    <li><a class="active" href="/myapphere/{{ asset_type }}/dev/">Dev</a></li>
    <li><a href="/myapphere/{{ asset_type }}/test/">Test</a></li>
    <li><a href="/myapphere/{{ asset_type }}/prod/">Prod</a></li>
  {% else %}
    <li><a class="active"href="/myapphere/dev/">Dev</a></li>
    <li><a href="/myapphere/test/">Test</a></li>
    <li><a href="/myapphere/prod/">Prod</a></li>
  {% endif %}
{% elif env == 'test' %}
  {% if asset_type %}
    <li><a href="/myapphere/{{ asset_type }}/dev/">Dev</a></li>
    <li><a class="active" href="/myapphere/{{ asset_type }}/test/">Test</a></li>
    <li><a href="/myapphere/{{ asset_type }}/prod/">Prod</a></li>
  {% else %}
    <li><a href="/myapphere/dev/">Dev</a></li>
    <li><a class="active" href="/myapphere/test/">Test</a></li>
    <li><a href="/myapphere/prod/">Prod</a></li>
  {% endif %}
{% elif env == 'prod' %}
  {% if asset_type %}
    <li><a href="/myapphere/{{ asset_type }}/dev/">Dev</a></li>
    <li><a href="/myapphere/{{ asset_type }}/test/">Test</a></li>
    <li><a class="active" href="/myapphere/{{ asset_type }}/prod/">Prod</a></li>
  {% else %}
    <li><a href="/myapphere/dev/">Dev</a></li>
    <li><a href="/myapphere/test/">Test</a></li>
    <li><a class="active" href="/myapphere/prod/">Prod</a></li>
  {% endif %}
{% else %}
  {% if asset_type %}
    <li><a href="/myapphere/{{ asset_type }}/dev/">Dev</a></li>
    <li><a href="/myapphere/{{ asset_type }}/test/">Test</a></li>
    <li><a href="/myapphere/{{ asset_type }}/prod/">Prod</a></li>
  {% else %}
    <li><a href="/myapphere/dev/">Dev</a></li>
    <li><a href="/myapphere/test/">Test</a></li>
    <li><a href="/myapphere/prod/">Prod</a></li>
  {% endif %}
{% endif %}
</ul>
</td>
<!-- END of Layout Divide: Left Side Environment Menu -->
 
 
<!-- START of Layout Divide: 2nd row for logged in message -->
<td class="layout">
{% if user.is_authenticated %}
  Logged in: {{ user.username }}<br>
  <a class="plain" href="/logout/">Logout</a>
{% endif %}
</td> 
</tr>
<!-- END of Layout Divide: 2nd row for logged in message -->
 
 
<!-- Layout Divide: Bottom Asset List Table -->
<tr>
<td class="layout" colspan=3>
 
<!-- Asset List Above Table: Display Device and Environment -->
<br>
{% if asset_type == 'firewalls' %}
  {% if env == 'dev' %}
  <b>Asset List - Firewalls - Development Environment</b>
  {% elif env == 'test' %}
  <b>Asset List - Firewalls - Test Environment</b>
  {% elif env == 'prod' %}
  <b>Asset List - Firewalls - Production Environment</b>
  {% else %}
  <b>Asset List - Firewalls - All Environments</b>
  {% endif %}
 
{% elif asset_type == 'routers' %}
  {% if env == 'dev' %}
  <b>Asset List - Routers - Development Environment</b>
  {% elif env == 'test' %}
  <b>Asset List - Routers - Test Environment</b>
  {% elif env == 'prod' %}
  <b>Asset List - Routers - Production Environment</b>
  {% else %}
  <b>Asset List - Routers - All Environments</b>
  {% endif %}
 
{% elif asset_type == 'servers' %}
  {% if env == 'dev' %}
  <b>Asset List - Servers - Development Environment</b>
  {% elif env == 'test' %}
  <b>Asset List - Servers - Test Environment</b>
  {% elif env == 'prod' %}
  <b>Asset List - Servers - Production Environment</b>
  {% else %}
  <b>Asset List - Servers - All Environments</b>
  {% endif %}
 
{% elif asset_type == 'storage' %}
  {% if env == 'dev' %}
  <b>Asset List - Storage - Development Environment</b>
  {% elif env == 'test' %}
  <b>Asset List - Storage - Test Environment</b>
  {% elif env == 'prod' %}
  <b>Asset List - Storage - Production Environment</b>
  {% else %}
  <b>Asset List - Storage - All Environments</b>
  {% endif %}
 
{% elif asset_type == 'switches' %}
  {% if env == 'dev' %}
  <b>Asset List - Switches - Development Environment</b>
  {% elif env == 'test' %}
  <b>Asset List - Switches - Test Environment</b>
  {% elif env == 'prod' %}
  <b>Asset List - Switches - Production Environment</b>
  {% else %}
  <b>Asset List - Switches - All Environments</b>
  {% endif %}
 
{% elif asset_type == 'workstations' %}
  {% if env == 'dev' %}
  <b>Asset List - Workstations - Development Environment</b>
  {% elif env == 'test' %}
  <b>Asset List - Workstations - Test Environment</b>
  {% elif env == 'prod' %}
  <b>Asset List - Workstations - Production Environment</b>
  {% else %}
  <b>Asset List - Workstations - All Environments</b>
  {% endif %}
 
{% else %}
  {% if env == 'dev' %}
  <b>Asset List - All Types - Development Environment</b>
  {% elif env == 'test' %}
  <b>Asset List - All Types - Test Environment</b>
  {% elif env == 'prod' %}
  <b>Asset List - All Types - Production Environment</b>
  {% else %}
  <b>Asset List - All Types - All Environments</b>
  {% endif %}
{% endif %}
 
<!-- Physical/Virtual Filter -->
{% if asset_hardware %}
  {% if asset_hardware == 'physical' %}
    <b> - Physical -</b>
  {% elif asset_hardware == 'virtual' %}
    <b> - Virtual -</b>
  {% endif %}
{% endif %}
 
<!-- Assets List Above Table: Number of Assets Displayed -->
{% if asset_count %}
  {% if asset_count == 1 %}
    <b> ({{ asset_count }} asset)</b>
  {% else %}
    <b> ({{ asset_count }} assets)</b>
  {% endif %}
{% else %}
  <b> (0 assets)</b>
{% endif %}
 
<!-- Export Buttons -->
<a href="#" class="plain" onclick="$('#assetlist').tableExport({type:'csv',escape:'false'});"><img src="{% static 'myapphere/csv.png' %}" width="24px" title="Export CSV"></a>
<a href="#" class="plain" onclick="$('#assetlist').tableExport({type:'excel',escape:'false'});"><img src="{% static 'myapphere/xls.png' %}" width="24px" title="Export Excel"></a>
 
<br>
<!-- The Assets List Table -->
<table class="myapphere" id="assetlist">
 <thead>
  <tr class="myapphere">
    <th class="myapphere">Device Type</th>
    <th class="myapphere">Name</th>
    <th class="myapphere">Description</th>
    <th class="myapphere">Environment</th>
    <th class="myapphere">OS</th>
    <th class="myapphere">Hardware</th>
  </tr>
 </thead>
 <tbody
  {% for name in all_asset_list %}
    <tr class="myapphere">
      <td class="myapphere">{{ name.asset_type }}</td>
      <td class="myapphere">{{ name.asset_name }}</td>
      <td class="myapphere">{{ name.asset_description }}</td>
      <td class="myapphere center">{{ name.asset_env }}</td>
      <td class="myapphere center">{{ name.asset_os }}</td>
      <td class="myapphere center">{{ name.asset_hardware }}</td>
    </tr>
  {% endfor %}
 </tbody>
</table>
<!-- END of Assets List Table -->
 
</td>
</tr>
</table>
<!-- END of Layout Divide: Bottom Assets List Table -->
 
<br>
<hr>
<br>
 
</body>
</html>

Page Content: Stats

Example page content for the stats.html page.

/home/django/myprojecthere/myapphere/templates/myapphere/stats.html

<!DOCTYPE html>                                                                            
<html>
<head>
  <title>Asset List - Stats</title>
</head>
<body>
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'myapphere/style.css' %}" />
 
<!-- Export button jquery (https://github.com/kayalshri/tableExport.jquery.plugin) -->
<script type="text/javascript" src="{% static 'js/jquery.js' %}"></script>
<script type="text/javascript" src="{% static 'myapphere/tableExport.js' %}"></script>
<script type="text/javascript" src="{% static 'myapphere/jquery.base64.js' %}"></script>
 
<!-- Layout Divide: Left Side Menu for Devices -->
<table class="layout">
<tr>
<!-- For white gaps in between Device Types and Phys/Virt, this must be larger than stylesheet width -->
<!-- Set to style sheet width+25 px -->
<td class="layout" width="696px">
 
<!-- Device Menu: No Devices Active on Stats Page -->
<ul class="asset_type">
<li><a href="/myapphere/">All Devices</a></li>
<li><a href="/myapphere/firewalls/">Firewalls</a></li>
<li><a href="/myapphere/routers/">Routers</a></li>
<li><a href="/myapphere/servers/">Servers</a></li>
<li><a href="/myapphere/storage/">Storage</a></li>
<li><a href="/myapphere/switches/">Switches</a></li>
<li><a href="/myapphere/workstations/">Workstations</a></li>
</ul>
</td>
<!-- END of Layout Divide: Left Side Menu for Devices -->
 
 
<!-- Layout Divide: Right Side Phys and Virt Links -->
<!-- For white gaps in between Phys/Virt and Stats, this must be larger than stylesheet width -->
<!-- Set to style sheet width+25 px -->
<td class="layout" width="188px">
<!-- Asset Type Menu: Physical and Virtual -->
  <ul class ="asset_hardware">
  {% if asset_hardware == 'physical' %}
    <li><a class="active" href="/myapphere/physical/">Physical</a></li>
    <li><a href="/myapphere/virtual/">Virtual</a></li>
  {% elif asset_hardware == 'virtual' %}
    <li><a href="/myapphere/physical/">Physical</a></li>
    <li><a class="active" href="/myapphere/virtual/">Virtual</a></li>
  {% else %}
    <li><a href="/myapphere/physical/">Physical</a></li>
    <li><a href="/myapphere/virtual/">Virtual</a></li>
  {% endif %}
  </ul>
</td>
<!-- END of Layout Divide: Right Side Phys and Virt Links -->
 
 
<!-- Layout Divide: Right Side Additional Links -->
<td class="layout">
<ul class="stats">
  <li><a class="active" href="/myapphere/stats/">Stats</a></li>
</ul>
</td>
<!-- END of Layout Divide: Right Side Additional Links -->
 
</tr>
 
 
<!-- START of Layout Divide: 2nd row for logged in message -->
<tr>
<td class="layout">
</td>
 
<td class="layout">
{% if user.is_authenticated %}
  Logged in: {{ user.username }}<br>
  <a class="plain" href="/logout/">Logout</a>                                              
{% endif %}
</td>
</tr>
<!-- END of Layout Divide: 2nd row for logged in message -->
 
 
<!-- Layout Divide: Bottom Stats Table (Asset Counts) -->
<tr>
<td class="layout" colspan=3>
 
<br>
<b>Asset List - Statistics - Asset Counts</b>
 
<!-- Export Buttons -->
<a href="#" class="plain" onclick="$('#assetcounts').tableExport({type:'csv',escape:'false'});"><img src="{% static 'myapphere/csv.png' %}" width="24px" title="Export CSV"></a>
<a href="#" class="plain" onclick="$('#assetcounts').tableExport({type:'excel',escape:'false'});"><img src="{% static 'myapphere/xls.png' %}" width="24px" title="Export Excel"></a>
 
<br>
<!-- Stats Table (Asset Counts) -->
<table class="myapphere" id="assetcounts">
<thead>
  <tr class="myapphere">
    <th class="myapphere">Device Type</th>
    <th class="myapphere">Systems</th>
    <th class="myapphere">Physical</th>
    <th class="myapphere">Physical Linux</th>
    <th class="myapphere">Physical Windows</th>
    <th class="myapphere">Physical Other</th>
    <th class="myapphere">Virtual</th>
    <th class="myapphere">Virtual Linux</th>
    <th class="myapphere">Virtual Windows</th>
    <th class="myapphere">Virtual Other</th>
  </tr>
</thead>
<tbody>
  {% for asset in device_stats %}
    <tr class="myapphere">
      {% if asset.asset_type == 'Total' %}
        <td class="myapphere totals"><b>{{ asset.asset_type }}</b></td>
        <td class="myapphere center totals">{{ asset.total }}</td>
        <td class="myapphere center totals">{{ asset.physical }}</td>
        <td class="myapphere center totals">{{ asset.physical_linux }}</td>
        <td class="myapphere center totals">{{ asset.physical_windows }}</td>
        <td class="myapphere center totals">{{ asset.physical_other }}</td>
        <td class="myapphere center totals">{{ asset.virtual }}</td>
        <td class="myapphere center totals">{{ asset.virtual_linux }}</td>
        <td class="myapphere center totals">{{ asset.virtual_windows }}</td>
        <td class="myapphere center totals">{{ asset.virtual_other }}</td>
      {% else %}
        <td class="myapphere">{{ asset.asset_type }}</td>
        <td class="myapphere center">{{ asset.total }}</td>
        <td class="myapphere center">{{ asset.physical }}</td>
        <td class="myapphere center">{{ asset.physical_linux }}</td>
        <td class="myapphere center">{{ asset.physical_windows }}</td>
        <td class="myapphere center">{{ asset.physical_other }}</td>
        <td class="myapphere center">{{ asset.virtual }}</td>
        <td class="myapphere center">{{ asset.virtual_linux }}</td>
        <td class="myapphere center">{{ asset.virtual_windows }}</td>
        <td class="myapphere center">{{ asset.virtual_other }}</td>
      {% endif %}
    </tr>
  {% endfor %}
  <tr class="myapphere">
    <td class="myapphere totals">Total Linux</td>
    <td class="myapphere center">{{ total_linux }}</td>
  </tr>
  <tr class="myapphere">
    <td class="myapphere totals">Total Windows</td>
    <td class="myapphere center">{{ total_windows }}</td>
  </tr>
  <tr class="myapphere">
    <td class="myapphere totals">Total Other</td>                                          
    <td class="myapphere center">{{ total_other }}</td>
  </tr>
  <tr class="myapphere">
    <td class="myapphere totals">Total VMware ESXi*</td>
    <td class="myapphere center">{{ total_vmware }}</td>
  </tr>
</tbody>
</table>
*Physical Virtual Hosts (VMware ESXi) count is included in Physical Linux/Total Linux counts.
<!-- END of Stats Table (Asset Counts) -->
 
</td>
</tr>
<!-- END of Layout Divide: Bottom Stats Table (Asset Counts) -->
 
<!-- Layout Divide: Bottom Stats Table (OS Counts) -->
<tr>
<td class="layout" colspan=3>
 
<br>
<b>Asset List - Statistics - OS Counts</b>
 
<!-- Export Buttons -->
<a href="#" class="plain" onclick="$('#oscounts').tableExport({type:'csv',escape:'false'});"><img src="{% static 'myapphere/csv.png' %}" width="24px" title="Export CSV"></a>
<a href="#" class="plain" onclick="$('#oscounts').tableExport({type:'excel',escape:'false'});"><img src="{% static 'myapphere/xls.png' %}" width="24px" title="Export Excel"></a>
 
<br>
<!-- Stats Table (OS Counts) -->
<table class="myapphere" id="oscounts">
<thead>
  <tr class="myapphere">
    <th class="myapphere">Device Type</th>
    {% for os_name in os_list %}
      <th class="myapphere">{{ os_name }}</th>
    {% endfor %}
  </tr>
</thead>
<tbody>
  {% for asset in device_stats %}
    <tr class="myapphere">
      {% if asset.asset_type == 'Total' %}
        <td class="myapphere totals"><b>{{ asset.asset_type }}</b></td>
        {% for name in asset.os_count_stats %}
          <td class="myapphere center totals">{{ name.count }}</td>
        {% endfor %}
 
      {% else %}
        <td class="myapphere">{{ asset.asset_type }}</td>
        {% for name in asset.os_count_stats %}
          <td class="myapphere center">{{ name.count }}</td>
        {% endfor %}
      {% endif %}
    </tr>
 
  {% endfor %}
</tbody>
</table>
<!-- END of Stats Table (OS Counts) -->
 
</td>
</tr>
</table>
<!-- END of Layout Divide: Bottom Stats Table (OS Counts) -->
 
<br>
<hr>
<br>
 
</body>
</html>

Static Files/Stylesheets

Configuring stylesheets.


Apache

Configuring Apache to pass traffic to the application.


Django: Authentication

Adding authentication to Django requires basic auth to be setup first, as LDAP auth builds upon it.

Basic Authentication

Basic authentication uses Django local user accounts.

LDAP Authentication

Configuring LDAP authentication.


Django: Jquery

Jquery can be added in order to enable an Export as CSV and/or Excel buttons.

Reference: Export Jquery Buttons: https://github.com/kayalshri/tableExport.jquery.plugin


Django: Static Files

No matter which steps from above you skip, you absolutely need to collect static files to copy them into the location Apache expects them to be.

This is for Apache's access to javascript, css, etc.


DEBUG: TURN OFF

Lastly, when you are not developing/debugging your site, turn off debug mode to avoid dumping sensitive information to the screen in the event of an error.


Edit the project settings (/home/django/myprojecthere/myprojecthere/settings.py)

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = False

Next Steps

Proceed to the Django API section.