[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6)
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>
<div>
{% block content %}
{% end block %}
</div>
<div id="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 %}
(html comment removed: This logic is placed in our head)
<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
(html comment removed: Assuming we've collected data for a variable called data)
{%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
Thank you for your contribution.
While I liked the content of your contribution, I would still like to extend one advice for your upcoming contributions:
Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.
To view those questions and the relevant answers related to your post, click here.
Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]
Thanks a lot for the suggestion.
I will work towards bringing better content in the next of my series.
I really love the way you applied Jinja logic on this code, but i have a question, please how can i write an else loop?
The else boolean is also written similarly to the elif and even the for loop
for instance with jinja we can say
Hope that helps
Hey @yalzeee
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!
Want to chat? Join us on Discord https://discord.gg/h52nFrV.
Vote for Utopian Witness!