{"id":288,"date":"2020-12-22T16:09:11","date_gmt":"2020-12-22T16:09:11","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&p=288"},"modified":"2020-12-28T01:46:54","modified_gmt":"2020-12-28T01:46:54","slug":"tsuklid-html-is","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/tsuklid-html-is\/","title":{"raw":"Ts\u00fcklid HTML-is","rendered":"Ts\u00fcklid HTML-is"},"content":{"raw":"Jinja2 v\u00f5imaldab kasutada ts\u00fckleid ka html-failis. N\u00e4iteks v\u00f5ime lisada arvud 0-st 10-ni j\u00e4rgnevalt:\r\n
{% for i in range(11) %}\r\n{{ i }}\r\n{% endfor %}<\/pre>\r\nLisame selle ts\u00fckli meie n\u00e4itefaili avaleht.html. Faili sisu on n\u00fc\u00fcd j\u00e4rgnev:\r\n
{% extends 'baas.html' %}\r\n{% block content %}\r\n<h1>1. teema<\/h1>\r\n{% for i in range(11) %}\r\n{{ i }}\r\n{% endfor %}\r\n{% endblock %}<\/pre>\r\nKui j\u00e4tame k\u00f5ik muu samaks, aga asendame keskkonnas PythonAnywhere faili avaleht.html ning p\u00e4rast seda valime men\u00fc\u00fcst Web \u2192 Reload kasutaja.pythonanywhere.com<\/em> (s\u00f5na kasutaja<\/em> asemel on iga\u00fchel oma kasutajanimi). Kui n\u00fc\u00fcd veebilehte v\u00e4rskendame, on tulemus j\u00e4rgnev:\r\n\r\n\"Ts\u00fcklid\r\n\r\nKui me aga lisaksime selle ts\u00fckli faili baas.html body-ossa, siis kuvataks arve 1-st 10-ni k\u00f5ikidel lehtedel, kus kuvatakse html-faili sisu, mis viitab failile baas.html.\r\n\r\nN\u00fc\u00fcd aga vaatame, kuidas postitusi kuvada ja j\u00e4tame juba loodud kujunduse praegu k\u00f5rvale. N\u00fc\u00fcd kasutame kokku 3 faili. Olgu faili baas.html sisu n\u00fc\u00fcd j\u00e4rgnev:\r\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n{% block head %} <title>Minu esimene veebileht<\/title> {% endblock %}\r\n<\/head>\r\n<body>\r\n{% block body %} {% endblock %}\r\n<\/body>\r\n<\/html><\/pre>\r\nPostituste kuvamiseks muudame app.py sisu ja seej\u00e4rel loome faili postitused.html. Olgu meil postitused app.py failis s\u00f5nastike j\u00e4rjendina.\r\n
from flask import Flask, render_template\r\napp = Flask(__name__)\r\n\r\nkoik_postitused = [{'pealkiri': 'Postitus 1', 'sisu':'1. postituse sisu', 'autor': 'Heidi'}, {'pealkiri': 'Postitus 2', 'sisu':'2. postituse sisu', 'autor': 'Elle'}]\r\n\r\n@app.route('\/postitused')\r\ndef blogi():\r\n\u00a0 \u00a0 return render_template(\"postitused.html\", postitused=koik_postitused)\r\nif __name__ == \"__main__\":\r\n\u00a0 \u00a0 app.run()<\/pre>\r\nN\u00fc\u00fcd aga soovime neid postitusi kuvada. Selleks saame kasutada ts\u00fcklit html-failis. Loome faili postitused.html, mille sisu on j\u00e4rgnev:\r\n
{% extends 'baas.html' %}\r\n{% block body %}\r\n<h1>Postitused<\/h1>\r\n{% for postitus in postitused %}\r\n<h2>{{ postitus.pealkiri }}<\/h2>\r\n<h3>Autor: {{ postitus.autor }}<\/h3>\r\n<p>{{ postitus.sisu }}<\/p>\r\n{% endfor %}\r\n{% endblock %}<\/pre>\r\nKui meil app.py failis oli s\u00f5nastike list muutujas koik_postitused<\/em> ja renderdamisel lisasime postitused=koik_postitused<\/code>, siis ts\u00fcklis on meil vaja kasutada sama muutujat - meie n\u00e4ite puhul postitused<\/em>. Meie n\u00e4ite puhul on s\u00f5nastiku v\u00f5tmed pealkiri, autor<\/em> ja sisu<\/em>, mida kasutame ka for-ts\u00fcklis. Selle n\u00e4ite tulemus n\u00e4eb v\u00e4lja j\u00e4rgnev:\r\n\r\n\"Ts\u00fcklid\r\n\r\n ","rendered":"
Jinja2 v\u00f5imaldab kasutada ts\u00fckleid ka html-failis. N\u00e4iteks v\u00f5ime lisada arvud 0-st 10-ni j\u00e4rgnevalt:<\/p>\n
{% for i in range(11) %}\r\n{{ i }}\r\n{% endfor %}<\/pre>\n
Lisame selle ts\u00fckli meie n\u00e4itefaili avaleht.html. Faili sisu on n\u00fc\u00fcd j\u00e4rgnev:<\/p>\n
{% extends 'baas.html' %}\r\n{% block content %}\r\n<h1>1. teema<\/h1>\r\n{% for i in range(11) %}\r\n{{ i }}\r\n{% endfor %}\r\n{% endblock %}<\/pre>\n
Kui j\u00e4tame k\u00f5ik muu samaks, aga asendame keskkonnas PythonAnywhere faili avaleht.html ning p\u00e4rast seda valime men\u00fc\u00fcst Web \u2192 Reload kasutaja.pythonanywhere.com<\/em> (s\u00f5na kasutaja<\/em> asemel on iga\u00fchel oma kasutajanimi). Kui n\u00fc\u00fcd veebilehte v\u00e4rskendame, on tulemus j\u00e4rgnev:<\/p>\n
\"Ts\u00fcklid<\/p>\n
Kui me aga lisaksime selle ts\u00fckli faili baas.html body-ossa, siis kuvataks arve 1-st 10-ni k\u00f5ikidel lehtedel, kus kuvatakse html-faili sisu, mis viitab failile baas.html.<\/p>\n
N\u00fc\u00fcd aga vaatame, kuidas postitusi kuvada ja j\u00e4tame juba loodud kujunduse praegu k\u00f5rvale. N\u00fc\u00fcd kasutame kokku 3 faili. Olgu faili baas.html sisu n\u00fc\u00fcd j\u00e4rgnev:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n{% block head %} <title>Minu esimene veebileht<\/title> {% endblock %}\r\n<\/head>\r\n<body>\r\n{% block body %} {% endblock %}\r\n<\/body>\r\n<\/html><\/pre>\n
Postituste kuvamiseks muudame app.py sisu ja seej\u00e4rel loome faili postitused.html. Olgu meil postitused app.py failis s\u00f5nastike j\u00e4rjendina.<\/p>\n
from flask import Flask, render_template\r\napp = Flask(__name__)\r\n\r\nkoik_postitused = [{'pealkiri': 'Postitus 1', 'sisu':'1. postituse sisu', 'autor': 'Heidi'}, {'pealkiri': 'Postitus 2', 'sisu':'2. postituse sisu', 'autor': 'Elle'}]\r\n\r\n@app.route('\/postitused')\r\ndef blogi():\r\n\u00a0 \u00a0 return render_template(\"postitused.html\", postitused=koik_postitused)\r\nif __name__ == \"__main__\":\r\n\u00a0 \u00a0 app.run()<\/pre>\n
N\u00fc\u00fcd aga soovime neid postitusi kuvada. Selleks saame kasutada ts\u00fcklit html-failis. Loome faili postitused.html, mille sisu on j\u00e4rgnev:<\/p>\n
{% extends 'baas.html' %}\r\n{% block body %}\r\n<h1>Postitused<\/h1>\r\n{% for postitus in postitused %}\r\n<h2>{{ postitus.pealkiri }}<\/h2>\r\n<h3>Autor: {{ postitus.autor }}<\/h3>\r\n<p>{{ postitus.sisu }}<\/p>\r\n{% endfor %}\r\n{% endblock %}<\/pre>\n
Kui meil app.py failis oli s\u00f5nastike list muutujas koik_postitused<\/em> ja renderdamisel lisasime postitused=koik_postitused<\/code>, siis ts\u00fcklis on meil vaja kasutada sama muutujat – meie n\u00e4ite puhul postitused<\/em>. Meie n\u00e4ite puhul on s\u00f5nastiku v\u00f5tmed pealkiri, autor<\/em> ja sisu<\/em>, mida kasutame ka for-ts\u00fcklis. Selle n\u00e4ite tulemus n\u00e4eb v\u00e4lja j\u00e4rgnev:<\/p>\n
\"Ts\u00fcklid<\/p>\n
 <\/p>\n","protected":false},"author":29,"menu_order":6,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-288","chapter","type-chapter","status-publish","hentry"],"part":100,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/288","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/users\/29"}],"version-history":[{"count":5,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/288\/revisions"}],"predecessor-version":[{"id":448,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/288\/revisions\/448"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/parts\/100"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/288\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/media?parent=288"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapter-type?post=288"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/contributor?post=288"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/license?post=288"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}