[Tutorial]Developing an institutions data collection web front-end with python 3.6(Part 5)

image source
Repository: Python, Open Source Repository

Software: For software download python 3.0 compatible with your OS here

Difficulty : Intermediate
What you will learn:
In this tutorial you will learn how to

• Specify your code for each URL path

• Use Django to enact our python code for our web management system

• Develop a basic front-end for this program

• How to use bootstrap for our programs user interface

For my previous posts in the python tutorial series
-Click Here* Creating a simple calculator using python 3.8(cpython)

Creating an encryption key(Cryptography)
- Part 1
- Part 2
- Part 3
- Part 4

Curriculum for this series
Part 1 of this series
Part 2 of this series
Part 3 of this series

Bootstrap We'll be using bootstrap in this section of the tutorial for our GUI so familiarity with bootstrap is needed but due to the fact that it is already well documented it would not be explained from scratch in this tutorial. For bootstrap Click here

Tutorial
In our last tutorial we began working on a practical application for the code we've been writing for first 3 tutorials in this series using Django. We did the URL direction and started creating our web app which our site is going to run on.
Note: Python is better suited than php for back-end programming because it makes it easier to write these back-end functions since the programming language is better suited.

Installing our app
Today we'll set up administrative users and link our html code to it.
Firstly we have to install our app to our settings.url. If we go into the file we should see these files which have been installed by default.

INSTALLED_APPS = [
   
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

In Django to add your app to the installed app we have to add the the app data link to our read files. When we do that we'll have this:

INSTALLED_APPS = [
   'system',
   'django.contrib.admin',
   'django.contrib.auth',
   'django.contrib.contenttypes',
   'django.contrib.sessions',
   'django.contrib.messages',
   'django.contrib.staticfiles',
]

This includes our app in our site.
Note:Whenever using Django to create a site a security key is generated in your settings.urlfile. This key is used for admistrative privileges and so should not be disclosed to anyone at anytime cost.
The next thing we'll be doing is to create our static folder in our app.

#Directories within our created folder
system/
    templates
    static
   __init__.py
    admin.py
    apps.py
    migrations/
        __init__.py
    models.py
    tests.py
    views.py

They may be images or certain cascade style sheets(CSS Code) that is peculiar to apps so it'll be recommended to use static to store these files.

To make sure that your static files will be read from the folder got back to your setting.url file and make sure at the bottom of your code

Static Files = '/Static/'
#This means that all Static files are stored in a directory called static

Loading the static files
We then move on to loading these Static files

system/templates/header

This is our html file which will house our html code for the website design.
To load our Static files using jinga we have to load our header file and add this code within it
%load static%
This is jinga logic and only need to be used once to refer these Static files.
We then within our header refer to to what within our Static file we'd like to refer to.

< link rel = 'stylesheet',  href = {%static%}>

With this we create a user interface within this header html file.
To refer our URL to this header file we have to go back to our setting and change the response for a call to our system URL pattern

from django.urls import path

from . import views
# this is to direct our URL to our header file in system
urlpatterns = [
    path('r^system', templates. system.header, name='header'),
]

Explore bootstrap and find a suitable layout for your user interface and in the next tutorial we'll be concluding this series.

You can find my Proof of work done in my GITHUB gist.