create account

[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6) by yalzeee

View this thread on: hive.blogpeakd.comecency.com
· @yalzeee ·
$16.43
[Tutorial]Developing and institutions data collection web front-end and back-end with python3.6(Final Part6)
![images.png](https://cdn.steemitimages.com/DQmYqni9vxME8D1tzy4wZGgu8CT8zK2Goq5cwDaQia7Zg7J/images.png)
[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)
πŸ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
πŸ‘Ž  
properties (23)
authoryalzeee
permlinktutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6
categoryutopian-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"}
created2018-07-28 20:28:48
last_update2018-07-28 20:28:48
depth0
children5
last_payout2018-08-04 20:28:48
cashout_time1969-12-31 23:59:59
total_payout_value12.437 HBD
curator_payout_value3.990 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length7,244
author_reputation12,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_payout1,000,000.000 HBD
percent_hbd10,000
post_id66,316,267
net_rshares9,294,683,956,572
author_curate_reward""
vote details (44)
@kenechukwu2 ·
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?
πŸ‘  
properties (23)
authorkenechukwu2
permlinkre-yalzeee-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180728t204612626z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-28 20:46:15
last_update2018-07-28 20:46:15
depth1
children1
last_payout2018-08-04 20:46:15
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length119
author_reputation1,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_payout1,000,000.000 HBD
percent_hbd10,000
post_id66,317,463
net_rshares2,103,875,159
author_curate_reward""
vote details (1)
@yalzeee ·
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
πŸ‘  ,
properties (23)
authoryalzeee
permlinkre-kenechukwu2-re-yalzeee-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180728t205529069z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-28 20:55:30
last_update2018-07-28 20:55:30
depth2
children0
last_payout2018-08-04 20:55:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length275
author_reputation12,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_payout1,000,000.000 HBD
percent_hbd10,000
post_id66,318,104
net_rshares8,360,788,785
author_curate_reward""
vote details (2)
@portugalcoin ·
$0.03
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/)
πŸ‘  ,
properties (23)
authorportugalcoin
permlinkre-yalzeee-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180728t235525117z
categoryutopian-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"}
created2018-07-28 23:55:24
last_update2018-07-28 23:55:24
depth1
children1
last_payout2018-08-04 23:55:24
cashout_time1969-12-31 23:59:59
total_payout_value0.022 HBD
curator_payout_value0.006 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length788
author_reputation599,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_payout1,000,000.000 HBD
percent_hbd10,000
post_id66,329,868
net_rshares16,750,058,090
author_curate_reward""
vote details (2)
@yalzeee ·
Thanks a lot for the suggestion.
I will work towards bringing better content in the next of my series.
properties (22)
authoryalzeee
permlinkre-portugalcoin-re-yalzeee-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180729t005522113z
categoryutopian-io
json_metadata{"tags":["utopian-io"],"app":"steemit/0.1"}
created2018-07-29 00:55:27
last_update2018-07-29 00:55:27
depth2
children0
last_payout2018-08-05 00:55:27
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length102
author_reputation12,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_payout1,000,000.000 HBD
percent_hbd10,000
post_id66,333,912
net_rshares0
@utopian-io ·
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>
properties (22)
authorutopian-io
permlinkre-tutorial-developing-and-institutions-data-collection-web-front-end-and-back-end-with-python3-6-final-part6-20180731t234009z
categoryutopian-io
json_metadata"{"app": "beem/0.19.42"}"
created2018-07-31 23:40:09
last_update2018-07-31 23:40:09
depth1
children0
last_payout2018-08-07 23:40:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length299
author_reputation152,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_payout1,000,000.000 HBD
percent_hbd10,000
post_id66,692,707
net_rshares0