hiveblocks
[image source](https://goo.gl/images/HbqzGY)
**Repository**: [Python, Open Source Repository](https://github.com/python)
**Software**: For software download python 3.0 compatible with your OS [here](https://www.python.org/downloads/)
**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)](https://steemit.com/utopian-io/@yalzeee/tutorial-developing-a-simple-calculator-with-basic-command-with-python-fix-bugs-in-your-code)
**Creating an encryption key(Cryptography)**
-[ Part 1](https://steemit.com/utopian-io/@yalzeee/tutorial-creating-a-visual-cube-encryption-key-using-python-3-0-part-1)
-[ Part 2](https://steemit.com/utopian-io/@yalzeee/tutorial-creating-a-visual-encryption-key-in-python-3-6-part-2)
-[ Part 3](https://steemit.com/utopian-io/@yalzeee/tutorial-creating-an-visual-cube-encryption-program-with-python-3-6-part-3)
-[ Part 4](https://steemit.com/utopian-io/@yalzeee/tutorial-creating-an-encryption-program-with-python-3-6-part-4)
**Curriculum for this series**
[Part 1 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-backend-using-python-3-6-part-1)
[Part 2 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-back-end-using-python-3-6-part-2)
[Part 3 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-back-end-with-python-3-part-3)
[Part 4 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-developing-an-institutions-data-collection-web-front-end-with-python-3-6-part-4)
[Part 5 of this series](https://steemit.com/utopian-io/@yalzeee/tutorial-developing-an-institutions-data-collection-web-front-end-with-python-3-6-part-5)
**Django**:For all referrals to Django follow [this link](https://www.djangoproject.com/). 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](https://www.codecademy.com/learn) 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.
```{extends system/home.html}
#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 %}
<!-- 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
<!-- 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](https://github.com/yalzeee/Python-tutorial-series/blob/master/Management%20System)| author | yalzeee |
|---|---|
| permlink | tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6 |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io","tutorials","programming","stach","wafrica"],"image":["https://cdn.steemitimages.com/DQmYqni9vxME8D1tzy4wZGgu8CT8zK2Goq5cwDaQia7Zg7J/images.png"],"links":["https://goo.gl/images/HbqzGY","https://github.com/python","https://www.python.org/downloads/","https://steemit.com/utopian-io/@yalzeee/tutorial-developing-a-simple-calculator-with-basic-command-with-python-fix-bugs-in-your-code","https://steemit.com/utopian-io/@yalzeee/tutorial-creating-a-visual-cube-encryption-key-using-python-3-0-part-1","https://steemit.com/utopian-io/@yalzeee/tutorial-creating-a-visual-encryption-key-in-python-3-6-part-2","https://steemit.com/utopian-io/@yalzeee/tutorial-creating-an-visual-cube-encryption-program-with-python-3-6-part-3","https://steemit.com/utopian-io/@yalzeee/tutorial-creating-an-encryption-program-with-python-3-6-part-4","https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-backend-using-python-3-6-part-1","https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-back-end-using-python-3-6-part-2","https://steemit.com/utopian-io/@yalzeee/tutorial-development-of-an-institutions-data-collection-back-end-with-python-3-part-3","https://steemit.com/utopian-io/@yalzeee/tutorial-developing-an-institutions-data-collection-web-front-end-with-python-3-6-part-4","https://steemit.com/utopian-io/@yalzeee/tutorial-developing-an-institutions-data-collection-web-front-end-with-python-3-6-part-5","https://www.djangoproject.com/","https://www.codecademy.com/learn","https://github.com/yalzeee/Python-tutorial-series/blob/master/Management%20System"],"app":"steemit/0.1","format":"markdown"} |
| created | 2018-07-28 20:28:48 |
| last_update | 2018-07-28 20:28:48 |
| depth | 0 |
| children | 5 |
| last_payout | 2018-08-04 20:28:48 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 12.437 HBD |
| curator_payout_value | 3.990 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 7,244 |
| author_reputation | 12,484,565,044,191 |
| root_title | "[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6)" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 66,316,267 |
| net_rshares | 9,294,683,956,572 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| happyphoenix | 0 | 2,606,141,573 | 5% | ||
| yuxi | 0 | 3,008,485,828 | 10% | ||
| mys | 0 | 5,385,783,791 | 5% | ||
| bachuslib | 0 | 19,971,544,585 | 100% | ||
| utopian-io | 0 | 9,148,240,644,782 | 5.57% | ||
| jaff8 | 0 | 65,090,157,819 | 100% | ||
| amosbastian | 0 | 5,139,303,942 | 10.12% | ||
| kenechukwu2 | 0 | 1,151,030,291 | 100% | ||
| portugalcoin | 0 | 6,288,790,522 | 28% | ||
| yalzeee | 0 | 2,486,397,916 | 100% | ||
| chiioma | 0 | 558,799,538 | 100% | ||
| sonime | 0 | 1,539,720,362 | 100% | ||
| maknah | 0 | 538,403,833 | 100% | ||
| lolitasmits | 0 | 539,960,960 | 100% | ||
| jemissongordon | 0 | 548,311,416 | 100% | ||
| saevpek | 0 | 539,262,413 | 100% | ||
| klaraminasyan | 0 | 548,402,454 | 100% | ||
| elliygova | 0 | 548,399,340 | 100% | ||
| patrickk97 | 0 | 539,256,597 | 100% | ||
| loone | 0 | 539,259,351 | 100% | ||
| pavel.dalak | 0 | 548,396,540 | 100% | ||
| alexmartinov | 0 | 541,580,189 | 100% | ||
| hallbill94 | 0 | 539,259,351 | 100% | ||
| mightypanda | 0 | 16,971,844,403 | 100% | ||
| luffnoisy | 0 | 548,405,285 | 100% | ||
| remsolo | 0 | 548,402,454 | 100% | ||
| pastrytorn | 0 | 557,542,494 | 100% | ||
| shortcrustmend | 0 | 539,262,413 | 100% | ||
| icerinkherb | 0 | 548,399,340 | 100% | ||
| sochivec | 0 | 548,396,540 | 100% | ||
| artyrsedakov | 0 | 539,259,351 | 100% | ||
| onyekah | 0 | 298,632,574 | 50% | ||
| tamilaisaeva | 0 | 548,396,540 | 100% | ||
| mvetrov88 | 0 | 548,396,540 | 100% | ||
| plumbervirgo | 0 | 548,396,540 | 100% | ||
| toplice | 0 | 539,256,597 | 100% | ||
| abalonegrateful | 0 | 539,253,588 | 100% | ||
| anesterov | 0 | 548,393,479 | 100% | ||
| jacekw.dev | 0 | 1,041,896,683 | 100% | ||
| bucksumpaypal | 0 | 548,326,154 | 100% | ||
| pedalgrinder | 0 | 548,323,318 | 100% | ||
| tropius747 | 0 | 340,565,318 | 100% | ||
| thedaytripper | 0 | 471,318,075 | 100% | ||
| mattdylan | 0 | -76,004,507 | -100% |
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?
| author | kenechukwu2 |
|---|---|
| permlink | re-yalzeee-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180728t204612626z |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io"],"app":"steemit/0.1"} |
| created | 2018-07-28 20:46:15 |
| last_update | 2018-07-28 20:46:15 |
| depth | 1 |
| children | 1 |
| last_payout | 2018-08-04 20:46:15 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 119 |
| author_reputation | 1,373,218,176,262 |
| root_title | "[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6)" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 66,317,463 |
| net_rshares | 2,103,875,159 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| yalzeee | 0 | 2,103,875,159 | 100% |
The else boolean is also written similarly to the elif and even the for loop
for instance with jinja we can say
```
#assuming that we already have our if or if and elif statements
{% else %}
{<p>whatever content you would like to display</p>
{%endelse%}
```
Hope that helps| author | yalzeee |
|---|---|
| permlink | re-kenechukwu2-re-yalzeee-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180728t205529069z |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io"],"app":"steemit/0.1"} |
| created | 2018-07-28 20:55:30 |
| last_update | 2018-07-28 20:55:30 |
| depth | 2 |
| children | 0 |
| last_payout | 2018-08-04 20:55:30 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 275 |
| author_reputation | 12,484,565,044,191 |
| root_title | "[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6)" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 66,318,104 |
| net_rshares | 8,360,788,785 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| portugalcoin | 0 | 6,288,790,522 | 28% | ||
| yalzeee | 0 | 2,071,998,263 | 100% |
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: - Try to come up with new and more innovative/useful ways to utilize Django, Phyton, html and css. - Put images of the result of your code. Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/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](https://review.utopian.io/result/8/32314424). ---- Need help? Write a ticket on https://support.utopian.io/. Chat with us on [Discord](https://discord.gg/uTyJkNm). [[utopian-moderator]](https://join.utopian.io/)
| author | portugalcoin |
|---|---|
| permlink | re-yalzeee-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180728t235525117z |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io"],"links":["https://join.utopian.io/guidelines","https://review.utopian.io/result/8/32314424","https://support.utopian.io/","https://discord.gg/uTyJkNm","https://join.utopian.io/"],"app":"steemit/0.1"} |
| created | 2018-07-28 23:55:24 |
| last_update | 2018-07-28 23:55:24 |
| depth | 1 |
| children | 1 |
| last_payout | 2018-08-04 23:55:24 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.022 HBD |
| curator_payout_value | 0.006 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 788 |
| author_reputation | 599,460,462,895,094 |
| root_title | "[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6)" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 66,329,868 |
| net_rshares | 16,750,058,090 |
| author_curate_reward | "" |
| voter | weight | wgt% | rshares | pct | time |
|---|---|---|---|---|---|
| espoem | 0 | 16,413,355,909 | 15% | ||
| mops2e | 0 | 336,702,181 | 10% |
Thanks a lot for the suggestion. I will work towards bringing better content in the next of my series.
| author | yalzeee |
|---|---|
| permlink | re-portugalcoin-re-yalzeee-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180729t005522113z |
| category | utopian-io |
| json_metadata | {"tags":["utopian-io"],"app":"steemit/0.1"} |
| created | 2018-07-29 00:55:27 |
| last_update | 2018-07-29 00:55:27 |
| depth | 2 |
| children | 0 |
| last_payout | 2018-08-05 00:55:27 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 102 |
| author_reputation | 12,484,565,044,191 |
| root_title | "[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6)" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 66,333,912 |
| net_rshares | 0 |
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.** <a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
| author | utopian-io |
|---|---|
| permlink | re-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180731t234009z |
| category | utopian-io |
| json_metadata | "{"app": "beem/0.19.42"}" |
| created | 2018-07-31 23:40:09 |
| last_update | 2018-07-31 23:40:09 |
| depth | 1 |
| children | 0 |
| last_payout | 2018-08-07 23:40:09 |
| cashout_time | 1969-12-31 23:59:59 |
| total_payout_value | 0.000 HBD |
| curator_payout_value | 0.000 HBD |
| pending_payout_value | 0.000 HBD |
| promoted | 0.000 HBD |
| body_length | 299 |
| author_reputation | 152,955,367,999,756 |
| root_title | "[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6)" |
| beneficiaries | [] |
| max_accepted_payout | 1,000,000.000 HBD |
| percent_hbd | 10,000 |
| post_id | 66,692,707 |
| net_rshares | 0 |