{"id":1212,"date":"2021-04-22T18:32:54","date_gmt":"2021-04-22T18:32:54","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/?post_type=chapter&p=1212"},"modified":"2021-05-07T09:17:43","modified_gmt":"2021-05-07T09:17:43","slug":"veebilehe-loomine-flaskis","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/chapter\/veebilehe-loomine-flaskis\/","title":{"raw":"Veebilehe loomine Flaskis","rendered":"Veebilehe loomine Flaskis"},"content":{"raw":"

J\u00e4rgnevas kahes peat\u00fckis vaatame me l\u00e4hemalt, kuidas PostgreSQL andmebaasi kasutada koos veebiraamistikuga Flask. Nendes peat\u00fckkides eeldame, et olete l\u00e4binud Tarkvaraarenduse \u00f5piku 2.tr\u00fcki peat\u00fcki \u201cVeebiraamistike loomine.Flask\u201d<\/a>.<\/p>\r\n

Eesm\u00e4rgiks on luua veebirakendus, kus kasutajal on v\u00f5imalik veebivormi kommentaar ning selle autor sisestada. Kommentaar ning selle autor salvestatakse seej\u00e4rel PostgreSQL andmebaasi ning neid kuvatakse ka veebilehel.<\/p>\r\n\r\n

Vajaminevate moodulite installimine<\/h2>\r\n

Rakenduse loomiseks on soovitatav kasutada Thonny programmeerimiskeskkonda.<\/p>\r\n

K\u00f5igepealt peame me installima Flaski mooduli. Selleks valige Thonny men\u00fc\u00fcst T\u00f6\u00f6riistad<\/em> -> Halda lisapakette <\/em>(ingl Tools <\/em>-> Manage Packages<\/em>) ning kirjutage otsinguaknasse Flask<\/em>. Seej\u00e4rel vajutage nuppu \u201cOtsi PyPI-st\u201d<\/em> ja seej\u00e4rel leitakse teile Flaski moodul. Vajutage sellele ning avanenud vaates klikale nupul \u201cInstall\u201d<\/em>, et installida Flaski moodul.<\/p>\r\n\r\n

\"\"<\/div>\r\n

Selleks, et Flaskis andmebaase kasutada, tuleb installida ka moodul Flask-SQLAlchemy. Selleks l\u00e4bi samad sammud, nagu mooduli Flask installimiselgi.<\/p>\r\n\r\n

\"\"<\/div>\r\n

Kuna Flask-SQLAlchemy vajab enda t\u00f6\u00f6ks moodulit SQLAlchemy, siis Flask-SQLAlchemy installimisel installiti ka moodul SQLAlchemy. Kuna aga SQLAlchemy viimase stabiilse versiooniga 1.4.1 oli PostgreSQL andmebaasiga \u00fchendamisel probleeme, tuleks SQLAlchemy versioon muuta vanemaks.<\/p>\r\n

Selleks mine j\u00e4llegi Thonny men\u00fc\u00fcs T\u00f6\u00f6riistad<\/em> -> Halda lisapakette <\/em>ning kirjuta otsinguaknasse SQLAlchemy. Seej\u00e4rel vajuta nupule \u201cOtsi PyPI-st\u201d<\/em> ning ava SQLAlchemy moodul. N\u00fc\u00fcd vajuta nupul \u201c\u2026\u201d<\/em> ning avanenud aknas vali soovitud versiooniks 1.3.23. Seej\u00e4rel vajuta nupule \u201cInstalli\u201d<\/em>, et muuta SQLAlchemy versioon 1.3.23-ks.<\/p>\r\n\r\n

\"\"<\/div>\r\n

Meil vaja installida ka mooduli psycopg2 versioon 2.8.6, mis on vajalik meie PostgreSQL andmebaasiga \u00fchendamiseks. Selleks mine Thonny men\u00fc\u00fcs T\u00f6\u00f6riistad<\/em> -> Halda lisapakette <\/em>ning kirjuta otsinguaknasse psycopg2. Seej\u00e4rel vajuta nupule \u201cOtsi PyPI-st\u201d<\/em> ning ava psycopg2 moodul. N\u00fc\u00fcd vajuta nupul \u201c\u2026\u201d<\/em> ja vali avanenud aknas soovitud versiooniks 2.8.6. Seej\u00e4rel vajuta nupule \u201cInstalli\u201d<\/em>.<\/p>\r\n\r\n

\"\"<\/div>\r\n

Veebirakenduse loomine<\/h2>\r\n

K\u00f5igepealt loome me rakenduse \u00fcldise struktuuri ilma andmebaasi toeta.<\/p>\r\n

Selleks loo esmalt fail app<\/em>.py sisuga:<\/p>\r\n\r\n

from flask import Flask, render_template, request, redirect\r\n\r\napp = Flask(__name__)\r\n\r\n@app.route('\/', methods=['POST', 'GET'])\r\ndef avaleht():\r\n    return render_template('avaleht.html')<\/pre>\r\n
Nagu n\u00e4ha, siis failis app.py<\/em> on meil kirja pandud vaid \u00fcks failitee ja sellele vastav funktsioon, sest meie veebileht koosneb vaid \u00fchest vahelehest, st kogu info kuvatakse avalehel. Kuna avaleht peab sisaldama veebivormi ning kuvama andmebaasist saadud infot, on sellel ka \u201cPOST\u201d ning \"GET\" meetodid defineeritud. Hetkel me aga meetodis avaleht<\/code> kasutaja sisestatud andmeid ning andmebaasist tulevaid andmeid ei kasuta, vaid renderdame lihtsalt avalehe uuesti.<\/p>\r\n
N\u00fc\u00fcd on meil vaja luua failid avaleht.html\u00a0<\/em>ja baas.html<\/em>, mis hakkab endas hoidma html-struktuuri.<\/p>\r\n
Selleks loo esmalt uus kaust nimega templates<\/em> failiga app.py<\/em> samasse kausta.<\/p>\r\n\r\n
\"\"<\/div>\r\n \r\n\r\n \r\n\r\nN\u00fc\u00fcd liigu kausta templates<\/em> ning loo sinna vajalikud .html<\/em> failid.\r\n
\"\"<\/div>\r\nFail baas.html <\/em>peaks v\u00e4lja n\u00e4gema j\u00e4rgnev:\r\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<link rel=\"stylesheet\" href=\"static\/css\/stylesheet.css\">\r\n{% block head %} <title>Kommentaaride veebileht<\/title> {% endblock %}\r\n<\/head>\r\n<body>\r\n{% block body %} {% endblock %}\r\n<\/body>\r\n<\/html><\/pre>\r\n
Fail avaleht.html<\/em> hoiab endas kommentaari lisamise veebivormi ning info kuvamiseks kasutatakse ts\u00fcklit. Selle faili sisu on selline:<\/p>\r\n\r\n
{% extends 'baas.html' %}\r\n{% block body %}\r\n<h1>Tere tulemast veebilehele, kus sa saad j\u00e4tta kommentaari!<\/h1>\r\n<h2>Sisesta kommentaar<\/h2>\r\n<form action='\/' method='POST'>\r\n  Kommentaar: \r\n  <br>\r\n  <input type='text' name='sisu' id='sisu'>\r\n  <br>\r\n  Autor: \r\n  <br>\r\n  <input type='text' name='autor' id='autor'>\r\n  <br>\r\n  <input class='nupp' type='submit' value='Sisesta'>\r\n  <\/form>\r\n  <div class=\"kommentaaride-ala\">\r\n  <h3>K\u00f5ik kommentaarid:<\/h3>\r\n  {% for kommentaar in kommentaarid %}\r\n  <div class=\"kommentaar\">\r\n    <p>{{ kommentaar.sisu }}<\/p>\r\n    <p class=\"autor\"> Autor: {{ kommentaar.autor }}\r\n  <\/div>\r\n  {% endfor %}\r\n  <\/div>\r\n{% endblock %}<\/pre>\r\n
Lisaks .html <\/em>failidele on meil vaja luua ka .css<\/em> fail kujunduse jaoks. Selleks loo rakenduse app.py<\/em> ja kaustaga templates<\/em> samasse kausta uus kaust static<\/em>.<\/p>\r\n\r\n
\"\"<\/div>\r\n
Seej\u00e4rel liigu kausta static<\/em> ning loo sinna uus kaust css<\/em>. Liigu n\u00fc\u00fcd kausta\u00a0css <\/em> ja loo sinna fail nimega stylesheet.css<\/em>, mille sisu on j\u00e4rgnev:<\/p>\r\n\r\n
body {\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    text-align: center;\r\n    background: whitesmoke\r\n}\r\n\r\nh1 {\r\n    text-align: center;\r\n    color: green;\r\n}\r\n\r\nh2{\r\n    margin-top: 70px;\r\n}\r\n\r\nh3 {\r\n    text-align: left;\r\n}\r\n\r\nform {\r\n    margin:auto;\r\n    display: block;\r\n    margin-top:30px;\r\n}\r\n\r\ninput {\r\n    width: 200px;\r\n    padding: 12px 20px;\r\n    margin: 8px 0;\r\n    border-radius: 5px;\r\n}\r\n\r\n.nupp {\r\n    background-color: green;\r\n    color: white;\r\n    padding: 12px 40px;\r\n    margin-top: 15px;\r\n    font-weight: bold;\r\n    font-size: smaller;\r\n}\r\n\r\n.kommentaaride-ala {\r\n    margin: 30px;\r\n    padding: 30px;\r\n    background: lightgrey;\r\n}\r\n\r\n.kommentaar {\r\n    margin-top: 10px;\r\n    text-align: left;\r\n    background: whitesmoke;\r\n    padding: 5px 20px;\r\n}\r\n\r\n.autor {\r\n    font-size: 12px;\r\n    color: teal;\r\n}<\/pre>\r\n
N\u00fc\u00fcd v\u00f5ib Thonny\u2019s k\u00e4ivitada app.py\u00a0<\/em>ja vaadata meie loodud veebilehte aadressilt http:\/\/127.0.0.1:5000\/<\/a>.<\/p>\r\n\"\"\r\n
J\u00e4rgmises peat\u00fckis \u00fchendame me \u00e4sja loodud veebirakenduse PostgreSQL andmebaasiga ning vaatame, kuidas sinna andmeid salvestada ning neid hiljem ka meie veebilehel kuvada.<\/p>","rendered":"
J\u00e4rgnevas kahes peat\u00fckis vaatame me l\u00e4hemalt, kuidas PostgreSQL andmebaasi kasutada koos veebiraamistikuga Flask. Nendes peat\u00fckkides eeldame, et olete l\u00e4binud Tarkvaraarenduse \u00f5piku 2.tr\u00fcki peat\u00fcki \u201cVeebiraamistike loomine.Flask\u201d<\/a>.<\/p>\n
Eesm\u00e4rgiks on luua veebirakendus, kus kasutajal on v\u00f5imalik veebivormi kommentaar ning selle autor sisestada. Kommentaar ning selle autor salvestatakse seej\u00e4rel PostgreSQL andmebaasi ning neid kuvatakse ka veebilehel.<\/p>\n
Vajaminevate moodulite installimine<\/h2>\n
Rakenduse loomiseks on soovitatav kasutada Thonny programmeerimiskeskkonda.<\/p>\n
K\u00f5igepealt peame me installima Flaski mooduli. Selleks valige Thonny men\u00fc\u00fcst T\u00f6\u00f6riistad<\/em> -> Halda lisapakette <\/em>(ingl Tools <\/em>-> Manage Packages<\/em>) ning kirjutage otsinguaknasse Flask<\/em>. Seej\u00e4rel vajutage nuppu \u201cOtsi PyPI-st\u201d<\/em> ja seej\u00e4rel leitakse teile Flaski moodul. Vajutage sellele ning avanenud vaates klikale nupul \u201cInstall\u201d<\/em>, et installida Flaski moodul.<\/p>\n
\"\"<\/div>\n
Selleks, et Flaskis andmebaase kasutada, tuleb installida ka moodul Flask-SQLAlchemy. Selleks l\u00e4bi samad sammud, nagu mooduli Flask installimiselgi.<\/p>\n
\"\"<\/div>\n
Kuna Flask-SQLAlchemy vajab enda t\u00f6\u00f6ks moodulit SQLAlchemy, siis Flask-SQLAlchemy installimisel installiti ka moodul SQLAlchemy. Kuna aga SQLAlchemy viimase stabiilse versiooniga 1.4.1 oli PostgreSQL andmebaasiga \u00fchendamisel probleeme, tuleks SQLAlchemy versioon muuta vanemaks.<\/p>\n
Selleks mine j\u00e4llegi Thonny men\u00fc\u00fcs T\u00f6\u00f6riistad<\/em> -> Halda lisapakette <\/em>ning kirjuta otsinguaknasse SQLAlchemy. Seej\u00e4rel vajuta nupule \u201cOtsi PyPI-st\u201d<\/em> ning ava SQLAlchemy moodul. N\u00fc\u00fcd vajuta nupul \u201c\u2026\u201d<\/em> ning avanenud aknas vali soovitud versiooniks 1.3.23. Seej\u00e4rel vajuta nupule \u201cInstalli\u201d<\/em>, et muuta SQLAlchemy versioon 1.3.23-ks.<\/p>\n
\"\"<\/div>\n
Meil vaja installida ka mooduli psycopg2 versioon 2.8.6, mis on vajalik meie PostgreSQL andmebaasiga \u00fchendamiseks. Selleks mine Thonny men\u00fc\u00fcs T\u00f6\u00f6riistad<\/em> -> Halda lisapakette <\/em>ning kirjuta otsinguaknasse psycopg2. Seej\u00e4rel vajuta nupule \u201cOtsi PyPI-st\u201d<\/em> ning ava psycopg2 moodul. N\u00fc\u00fcd vajuta nupul \u201c\u2026\u201d<\/em> ja vali avanenud aknas soovitud versiooniks 2.8.6. Seej\u00e4rel vajuta nupule \u201cInstalli\u201d<\/em>.<\/p>\n
\"\"<\/div>\n
Veebirakenduse loomine<\/h2>\n
K\u00f5igepealt loome me rakenduse \u00fcldise struktuuri ilma andmebaasi toeta.<\/p>\n
Selleks loo esmalt fail app<\/em>.py sisuga:<\/p>\n
from flask import Flask, render_template, request, redirect\r\n\r\napp = Flask(__name__)\r\n\r\n@app.route('\/', methods=['POST', 'GET'])\r\ndef avaleht():\r\n    return render_template('avaleht.html')<\/pre>\n
Nagu n\u00e4ha, siis failis app.py<\/em> on meil kirja pandud vaid \u00fcks failitee ja sellele vastav funktsioon, sest meie veebileht koosneb vaid \u00fchest vahelehest, st kogu info kuvatakse avalehel. Kuna avaleht peab sisaldama veebivormi ning kuvama andmebaasist saadud infot, on sellel ka \u201cPOST\u201d ning “GET” meetodid defineeritud. Hetkel me aga meetodis avaleht<\/code> kasutaja sisestatud andmeid ning andmebaasist tulevaid andmeid ei kasuta, vaid renderdame lihtsalt avalehe uuesti.<\/p>\n
N\u00fc\u00fcd on meil vaja luua failid avaleht.html\u00a0<\/em>ja baas.html<\/em>, mis hakkab endas hoidma html-struktuuri.<\/p>\n
Selleks loo esmalt uus kaust nimega templates<\/em> failiga app.py<\/em> samasse kausta.<\/p>\n
\"\"<\/div>\n
 <\/p>\n
 <\/p>\n
N\u00fc\u00fcd liigu kausta templates<\/em> ning loo sinna vajalikud .html<\/em> failid.<\/p>\n
\"\"<\/div>\n
Fail baas.html <\/em>peaks v\u00e4lja n\u00e4gema j\u00e4rgnev:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<meta charset=\"UTF-8\">\r\n<link rel=\"stylesheet\" href=\"static\/css\/stylesheet.css\">\r\n{% block head %} <title>Kommentaaride veebileht<\/title> {% endblock %}\r\n<\/head>\r\n<body>\r\n{% block body %} {% endblock %}\r\n<\/body>\r\n<\/html><\/pre>\n
Fail avaleht.html<\/em> hoiab endas kommentaari lisamise veebivormi ning info kuvamiseks kasutatakse ts\u00fcklit. Selle faili sisu on selline:<\/p>\n
{% extends 'baas.html' %}\r\n{% block body %}\r\n<h1>Tere tulemast veebilehele, kus sa saad j\u00e4tta kommentaari!<\/h1>\r\n<h2>Sisesta kommentaar<\/h2>\r\n<form action='\/' method='POST'>\r\n  Kommentaar: \r\n  <br>\r\n  <input type='text' name='sisu' id='sisu'>\r\n  <br>\r\n  Autor: \r\n  <br>\r\n  <input type='text' name='autor' id='autor'>\r\n  <br>\r\n  <input class='nupp' type='submit' value='Sisesta'>\r\n  <\/form>\r\n  <div class=\"kommentaaride-ala\">\r\n  <h3>K\u00f5ik kommentaarid:<\/h3>\r\n  {% for kommentaar in kommentaarid %}\r\n  <div class=\"kommentaar\">\r\n    <p>{{ kommentaar.sisu }}<\/p>\r\n    <p class=\"autor\"> Autor: {{ kommentaar.autor }}\r\n  <\/div>\r\n  {% endfor %}\r\n  <\/div>\r\n{% endblock %}<\/pre>\n
Lisaks .html <\/em>failidele on meil vaja luua ka .css<\/em> fail kujunduse jaoks. Selleks loo rakenduse app.py<\/em> ja kaustaga templates<\/em> samasse kausta uus kaust static<\/em>.<\/p>\n
\"\"<\/div>\n
Seej\u00e4rel liigu kausta static<\/em> ning loo sinna uus kaust css<\/em>. Liigu n\u00fc\u00fcd kausta\u00a0css <\/em> ja loo sinna fail nimega stylesheet.css<\/em>, mille sisu on j\u00e4rgnev:<\/p>\n
body {\r\n    font-family: Arial, Helvetica, sans-serif;\r\n    text-align: center;\r\n    background: whitesmoke\r\n}\r\n\r\nh1 {\r\n    text-align: center;\r\n    color: green;\r\n}\r\n\r\nh2{\r\n    margin-top: 70px;\r\n}\r\n\r\nh3 {\r\n    text-align: left;\r\n}\r\n\r\nform {\r\n    margin:auto;\r\n    display: block;\r\n    margin-top:30px;\r\n}\r\n\r\ninput {\r\n    width: 200px;\r\n    padding: 12px 20px;\r\n    margin: 8px 0;\r\n    border-radius: 5px;\r\n}\r\n\r\n.nupp {\r\n    background-color: green;\r\n    color: white;\r\n    padding: 12px 40px;\r\n    margin-top: 15px;\r\n    font-weight: bold;\r\n    font-size: smaller;\r\n}\r\n\r\n.kommentaaride-ala {\r\n    margin: 30px;\r\n    padding: 30px;\r\n    background: lightgrey;\r\n}\r\n\r\n.kommentaar {\r\n    margin-top: 10px;\r\n    text-align: left;\r\n    background: whitesmoke;\r\n    padding: 5px 20px;\r\n}\r\n\r\n.autor {\r\n    font-size: 12px;\r\n    color: teal;\r\n}<\/pre>\n
N\u00fc\u00fcd v\u00f5ib Thonny\u2019s k\u00e4ivitada app.py\u00a0<\/em>ja vaadata meie loodud veebilehte aadressilt http:\/\/127.0.0.1:5000\/<\/a>.<\/p>\n
\"\"<\/p>\n
J\u00e4rgmises peat\u00fckis \u00fchendame me \u00e4sja loodud veebirakenduse PostgreSQL andmebaasiga ning vaatame, kuidas sinna andmeid salvestada ning neid hiljem ka meie veebilehel kuvada.<\/p>\n","protected":false},"author":33,"menu_order":11,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-1212","chapter","type-chapter","status-publish","hentry"],"part":3,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/pressbooks\/v2\/chapters\/1212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/wp\/v2\/users\/33"}],"version-history":[{"count":17,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/pressbooks\/v2\/chapters\/1212\/revisions"}],"predecessor-version":[{"id":1370,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/pressbooks\/v2\/chapters\/1212\/revisions\/1370"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/pressbooks\/v2\/parts\/3"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/pressbooks\/v2\/chapters\/1212\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/wp\/v2\/media?parent=1212"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/pressbooks\/v2\/chapter-type?post=1212"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/wp\/v2\/contributor?post=1212"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/wp-json\/wp\/v2\/license?post=1212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}