image source
Repository: Python, Open Source Repository
Software: For software download python 3.0 compatible with your OS here
Difficulty : Basic
What you will learn:
In this tutorial you will learn how to
Design our templates using Jinja logic
Use Django to enact our python code for our web management system
Develop a basic front-end for this program with bootstrap
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
Part 4 of this series
Part 5 of this series
Django:For all referrals to Django follow this link. For any point not understood, prior knowledge of the technicality of django can be found there.
HTML, CSS and JavaScript
For this tutorial, you should be proficient in html,css and javascript fundamentals for better understanding. For this you could follow this link to learn more about front-end development.
Tutorial
So far we have developed a site from scratch using django and before that written the administrative code. In this tutorial we will place our written code in the appropriate directories and link all views to a similar template.
Note: The reason for this is so that if we have extensive pages we won't need to edit all the pages individually but edit them from a source file which would affect all other views.
In our sites url patterns we have included code to refer all url patterns for our homepage to lead to our views file(within the system application). Now we define the html file that our URL pattern leads to
Setting up our views
To set up our views, we use render which comes by default with our django installation. To import and use render for a response rather than what we used in our last tutorial. We navigate to our views.py file and use this piece of code:
from django.shortcuts import render
#Our url points to an index function within our views file so we will have to define this function
def index(request):
#by default render takes the arguement request
return render(request, 'system/home.html')
Now we navigate to the folder we set as our and there we create a html file with any editor such as notepad++. and input our code here. We start up with a standard html format and it should look something like this.
<DOCTYPE! html>
<html>
<head><title>Yalz University Official Site</title>
</head>
<body class= "body" style="background-color:#f6f6f6>
{% block content %}
{% end block %}
Section1">
<h1>Administrative site</h1>
</div>
</body>
</html>
Extending and including files
For any regular web programmer the jinja logic that is {% block content %} to {% end point %} should be quite strange. Jinja is a logic that is used to extend and include small parts of html code within a html file.
For example within our html file, if wanted to include a header or footer within this file we could simply create another html file and place it anywhere within our home page. To do this we simply create another html file and within this file put this line of jinja logic at the beginning.
#this is a new file containing a piece of html code thatll be used multiple times in the code
{% block content%}
{%end point%}
Apart from this method there is the include method which is a single line or piece of code used apart from the extend logic.
To use the include function in jinja, you can alternatively use such piece of code
include "system/header.html"
The both of these are used explicitly to include headers and footers and other reusable pieces of code.
Using Jinja to load static files
Another important part of Jinja is using static files in our static directory. We can use this to refer to css files in the this directory and we can use this jinja logic to do this.
{ % load staticfiles %}
<link> rel = "stylesheet" href="{% static 'css/bootstrap.min.css'%} type= "text/css"</link>
The logic loads the bootstrap downloads that we placed in our static directory in the last tutorial. With bootstrap you can develop better and more styled pages that would be way harder to develop if it you were to write the code from scratch.
Passing our python code to our website
To develop a system that interprets the code we've written in a basic ui(user interface), it would be recommended that you create a new app(if you're not familiar with this see the last tutorial. This will help us collect user data we've written in python through our html.
Most logic developed using django involves the use of jinja which is similar to python. Unlike python however html disregards whitespaces so we have to use {% content here%} to write our logic.
For example to write a for loop we use this piece of code.
#Note that regardless of html's disregard for whitespaces we still indent our code for better understandingl
{%for x in data%}
{ <h1>Hello there</h1>}
{% endfor %}
We also notice that unlike our normal loops in python we have to end the loops manually using the {%endfor%} in this case and for something like an if loop {%endif%}. So using this we can customise the code concept we've written for this page in the app we created.
Proof of work
To find the code for this tutorial you can visit Github