{"id":246,"date":"2021-03-05T15:40:59","date_gmt":"2021-03-05T15:40:59","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/?post_type=chapter&p=246"},"modified":"2021-05-07T12:49:42","modified_gmt":"2021-05-07T12:49:42","slug":"otsingumootori-loomise-jatk","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/lisamoodulid\/chapter\/otsingumootori-loomise-jatk\/","title":{"raw":"Otsingumootori loomise j\u00e4tk","rendered":"Otsingumootori loomise j\u00e4tk"},"content":{"raw":"

Veebilehe kujundamine<\/h2>\r\nHetkel on meie projekti, mis on n\u00e4htav veebiaadressil 127.0.0.1:5000\/teosed<\/a>, t\u00e4ielikult stiliseerimata. Kujunduse loomine aitab projekti kasutamist mugavamaks teha ning pakub ka silmailu.\r\n\r\nAlustame sellega, et loome projekti kausta sisse uue alamkausta static<\/code>. Kausta static<\/code> sisse loome alamkausta css<\/code> ning selle sisse omakorda faili kujundus.css<\/code>. Kuna tegemist on v\u00e4ikse projektiga, on m\u00f5istlik kasutada \u00fchte kujunduse faili k\u00f5igi vahelehtede jaoks. Hetkel on meil vahelehti k\u00fcll \u00fcks, kuid hiljem loome \u00fche juurde selleks, et n\u00e4idata otsingute tulemusi.\r\n\r\nProjekti kaust peaks hetkeseisuga v\u00e4lja n\u00e4gema selline:\r\n\r\n\"Projekti\r\n\r\nProjekti kausta alamkaust \/static\/css<\/code> peaks v\u00e4lja n\u00e4gema selline:\r\n\r\n\"Projekti\r\n\r\n\u00dchtse kujunduse kasutamiseks k\u00f5igis failides tuleb kujunduse fail kujundus.css<\/code> \u00fchendada baasfailiga baas.html<\/code>. Selleks lisame faili baas.html<\/code> head<\/code> siltide vahele j\u00e4rgmise rea:\r\n\r\n<\/code>\r\n
<link rel=\"stylesheet\" href=\"static\/css\/kujundus.css\"><\/pre>\r\n<\/code>\r\n\r\nAsumegi kujundust looma. K\u00e4esolevas peat\u00fckis tuuakse jooksvalt n\u00e4iteid, kuidas projekti kujundada v\u00f5iks. Soovitatav on k\u00f5igepealt katsetada, milline n\u00e4idiskujundus v\u00e4lja n\u00e4eb ning seej\u00e4rel v\u00f5ib projekti ka oma maitse ja eelistuste p\u00f5hjal kujundama hakata.\r\n\r\nEsmalt muudame veebilehe v\u00e4rve, m\u00e4\u00e4rame fondi, \u00e4\u00e4riseid ja muud. Selleks lisame faili kujundus.css<\/code> j\u00e4rgnevad read:\r\n
html {\r\n    background-color: #fdfdfd;\r\n}\r\n\r\nbody {\r\n    background-color: #fafafa;\r\n    width: 1200px;\r\n    font-family: Arial;\r\n    padding: 20px;\r\n    margin: 10px auto 5px auto;\r\n    box-shadow: 0 0 8px #000000;\r\n    border-radius: 10px;\r\n}<\/pre>\r\nKui m\u00f5ni kasutatud stiilielement j\u00e4\u00e4b kas siin v\u00f5i tulevikus segaseks, otsi kindlasti nende kohta internetist infot. \u00dcks soovitatav infoallikas on veebileht w3schools<\/a>.\r\n\r\nKujundame ka teoste tabelit. Lisame sellele piirjooned, m\u00e4\u00e4rame veergude pealkirjade lahtritele teistsuguse taustav\u00e4rvi ning lisame lahtritele t\u00e4idiseid (ingl padding<\/em>). Selleks lisame faili j\u00e4rgnevad read:\r\n
table, th, td {\r\n    border: 1px solid black;\r\n}\r\n\r\nth, td {\r\n    padding: 5px;\r\n}\r\n\r\ntable {\r\n    border-collapse: collapse;\r\n}\r\n\r\nth {\r\n    background-color: #c9e4eb\r\n}\r\n<\/pre>\r\nSelleks, et hetkel kasutatud pealkirjad ning hiljem lisatavad tekstid oleksid veebilehe keskel, lisame juba praegu ka j\u00e4rgnevad read:\r\n\r\n<\/code>\r\n
h1, h2, p {\r\n    text-align: center;\r\n}<\/pre>\r\n<\/code>\r\n\r\nOlemegi n\u00fc\u00fcdseks suure osa kujundamisest \u00e4ra teinud, t\u00e4nu millele on veebilehel kuvatavaid andmeid m\u00e4rksa mugavam vaadelda. J\u00e4tkame n\u00fc\u00fcd funktsionaalsuste lisamisega ning edaspidi t\u00e4iendame kujunduse faili jooksvalt, siis kui selleks vajadus tekib.\r\n\r\nJooksuta enne j\u00e4tkamist uuesti faili app.py<\/code> ning tutvu veebirakenduse uue kujundusega.\r\n
Otsingufunktsiooni lisamine<\/h2>\r\nPraeguseks on veebirakenduses n\u00e4ha kujundatud kujul Netflixi teoste infot. Seega saame keskenduda otsingufunktsioonide lisamisele. Selleks tuleb esmalt t\u00e4iendada faili teosed.html<\/code>. Nimelt tuleb sinna lisada veebivorm koos sisendiv\u00e4ljadega, mille p\u00f5hjal koostatame andmebaasi p\u00e4ringuid.\r\n\r\nLisame faili teosed.html<\/code> ploki body<\/code> algusesse j\u00e4rgnevad read:\r\n\r\n<\/code>\r\n
<h1>Otsingumootor<\/h1>\r\n<form action='\/tulemused' method='POST'>\r\n    <div class=\"sisend\">\r\n        <label>Pealkiri:<\/label>\r\n        <input type='text' name='o_pealkiri' id='o_pealkiri'>\r\n    <\/div>\r\n    <input type='submit' value='Otsi' class=\"nupp\">\r\n    <input type='reset' value='T\u00fchjenda' class=\"nupp\">\r\n<\/form>\r\n<br><\/pre>\r\n<\/code>\r\n\r\nNagu n\u00e4ha, l\u00f5ime HTML-i form<\/code> siltide abil veebivormi, kus on hetkel vaid \u00fcks sisendiv\u00e4li (input<\/code> siltide vahel) otsitava teose pealkirja jaoks. Lisaks on seal nupp T\u00fchjenda<\/em>, millele klikates t\u00fchjendatakse k\u00f5ik veebivormi sisendiv\u00e4ljad ning nupp Ots<\/em>i<\/em>, millele vajutamisel suunatakse meid meetodiga POST<\/code> aadressile 127.0.0.1:5000\/tulemused<\/a>. Kuna me pole sellist vahelehte veel loonud, tuleb praegu nupule Otsi<\/em> vajutades veateade Not Found<\/em>. Nupp T\u00fchjenda<\/em> juba t\u00f6\u00f6tab.\r\n\r\nKujundame loodud ja tulevasi sisendiv\u00e4lju. Lisame selleks faili kujundus.css<\/code> j\u00e4rgnevad read:\r\n
input {\r\n    padding: 4px;\r\n}\r\n\r\n.sisend {\r\n    display: inline-block;\r\n}\r\n\r\n.sisend label {\r\n    display: block;\r\n}<\/pre>\r\nLisasime nii sisendiv\u00e4ljadele kui ka nuppudele t\u00e4idised ning m\u00e4\u00e4rasime, et sisendiv\u00e4lja pealkirjad oleksid sisendiv\u00e4ljade kohal. Seda ka siis, kui sisendiv\u00e4lju hiljem juurde lisada. Otsi vajadusel internetist, mida t\u00e4hendavad inline-block<\/code> ja block<\/code>. Nende m\u00f5istmine tuleb kindlasti igasugusel veebiarendusel kasuks.\r\n\r\nJ\u00e4rgmisena t\u00e4iendame faili app.py<\/code>, kuhu kirjutame andmebaasi p\u00e4ringu koostamise loogika.\r\n\r\nAlustuseks tuleb moodulist flask<\/em> importida lisaks varasemale ka request<\/em>. Seega peaks importide osa n\u00fc\u00fcdseks v\u00e4lja n\u00e4gema selline:\r\n\r\n<\/code>\r\n
from flask import Flask, render_template, request\r\nfrom flask_sqlalchemy import SQLAlchemy<\/pre>\r\n<\/code>\r\n\r\nSeej\u00e4rel lisame p\u00e4rast meetodit teosed()<\/code> j\u00e4rgnevad koodiread:\r\n\r\n<\/code>\r\n
@app.route('\/tulemused', methods=['GET', 'POST'])\r\ndef tulemused():\r\n    tulemused = []\r\n    o_pealkiri = request.form['o_pealkiri']\r\n    tulemused = Teosed.query.filter(Teosed.pealkiri.like('%'+o_pealkiri+'%')).all()\r\n    return render_template('tulemused.html', tulemused=tulemused)<\/pre>\r\n<\/code>\r\n\r\nSellega n\u00e4itame, mis juhtub, kui minna aadressile 127.0.0.1:5000\/tulemused<\/a>. Seal aadressil pole endiselt veel midagi, kuna selle sisu renderdatakse faili tulemused.html<\/code> p\u00f5hjal, mida me veel loonud ei ole. Teeme seda peatselt, kuid enne vaatame lisatud koodiread \u00fcle.\r\n\r\nReaga o_pealkiri = request.form['o_pealkiri']<\/code><\/code><\/code> v\u00e4\u00e4rtustame me muutuja o_pealkiri<\/code> veebivormist saadud pealkirja sisendiv\u00e4lja v\u00e4\u00e4rtusega. Seej\u00e4rel me loome p\u00e4ringu tabelist Teosed sellise piiranguga, et o_pealkiri<\/code> v\u00e4\u00e4rtus peab esinema teose pealkirja sees. Pane t\u00e4hele koodireas kasutatud m\u00e4rks\u00f5na like<\/code> ning tuleta meelde, kuidas see PostgreSQL'<\/em>s t\u00f6\u00f6tas.\r\n\r\nTasub teada, et siin ei eristata v\u00e4\u00e4rtuste puhul suur- ja v\u00e4iket\u00e4hti. Seega on n\u00e4iteks pealkirja v\u00e4\u00e4rtused 'love' ja 'LoVe' siinkohal v\u00f5rdsed.\r\n\r\n[h5p id=\"54\"]\r\n\r\nMeetodi viimase rea abil renderdame aadressil 127.0.0.1:5000\/tulemused<\/a> faili tulemused.html<\/code> ning anname selle faili argumendi tulemused<\/code> v\u00e4\u00e4rtuseks p\u00e4ringust saadud tulemuste listi.\r\n\r\nN\u00fc\u00fcd on j\u00e4\u00e4nud veel luua fail tulemused.html<\/code>, p\u00e4rast mida saamegi pealkirja p\u00f5hjal otsimist katsetada. Faili tulemused.html<\/code> \u00fclesehitus on v\u00e4ga sarnane faili teosed.html<\/code> algse \u00fclesehitusega.\r\n\r\nLisame faili tulemused.html<\/code> j\u00e4rgnevad read:\r\n\r\n<\/code><\/code>\r\n
{% extends 'baas.html' %}\r\n{% block head %} <title>Otsingu tulemused<\/title> {% endblock %}\r\n{% block body %}\r\n<h1>Otsingu tulemused<\/h1>\r\n<table>\r\n    <tr>\r\n        <th>Pealkiri<\/th>\r\n        <th>T\u00fc\u00fcp<\/th>\r\n        <th>Riigid<\/th>\r\n        <th>Aasta<\/th>\r\n        <th>\u017danrid<\/th>\r\n        <th>N\u00e4itlejad<\/th>\r\n        <th>Kirjeldus<\/th>\r\n    <\/tr>\r\n    {% for teos in tulemused %}\r\n        <tr>\r\n            <td>{{ teos.pealkiri }}<\/td>\r\n            <td>{{ teos.tuup }}<\/td>\r\n            <td>{{ teos.riigid }}<\/td>\r\n            <td>{{ teos.valjalaske_aasta }}<\/td>\r\n            <td>{{ teos.zanrid }}<\/td>\r\n            <td>{{ teos.naitlejad }}<\/td>\r\n            <td>{{ teos.kirjeldus }}<\/td>\r\n        <\/tr>\r\n    {% endfor %}\r\n<\/table>\r\n{% endblock %}<\/pre>\r\n<\/code>\r\n\r\nJooksuta n\u00fc\u00fcd uuesti faili app.py<\/code>. Kirjuta seej\u00e4rel midagi pealkirja sisendiv\u00e4lja ja kliki nupule Ots<\/em>i<\/em> ning sind suunatakse \u00fcmber aadressile 127.0.0.1:5000\/tulemused<\/a>, kus on n\u00e4ha k\u00f5iki teoseid, mis leiti sisestatud pealkirja v\u00e4\u00e4rtuse p\u00f5hjal. Katseta otsimist erinevate sisendiv\u00e4\u00e4rtustega.\r\n\r\nNagu n\u00e4ha on ka veebirakenduse tulemuste vaheleht kujundatud. Seda m\u00e4letatavasti seet\u00f5ttu, et ka failis tulemused.html<\/code> viitame baasfailile baas.html<\/code>, mis omakorda viitab kujunduse failile kujundus.css<\/code>.\r\n
Mitme parameetri p\u00f5hjal otsing<\/h3>\r\nKuigi pealkirja alusel otsimine t\u00e4itsa t\u00f6\u00f6tab, oleks siiski m\u00f5istlik kasutajatele rohkem otsinguparameetreid pakkuda. N\u00e4iteks ei saa praeguse lahenduse korral otsida teoseid n\u00e4itlejate v\u00f5i riikide p\u00f5hjal.\r\n\r\n\u00d5nneks sarnaneb uute otsinguparameetrite lisamine varasemalt tehtuga. Alustame taaskord sellest, et lisame uued sisendiv\u00e4ljad faili teosed.html<\/code>.\r\n\r\nLisame sisendiv\u00e4ljad t\u00fc\u00fcbi, riikide, aasta, \u017eanrite, n\u00e4itlejate ja kirjelduse jaoks. Selleks kustutame failist teosed.html<\/code> k\u00f5ik form<\/code> siltide vahel olevad koodiread, v\u00e4lja arvatud Otsi<\/em> ja\u00a0T\u00fchjenda<\/em> nuppude osad ning lisame kustutatud ridade asemele j\u00e4rgnevad read:\r\n\r\n<\/code><\/code>\r\n
<h2>T\u00e4psete parameetritega otsing<\/h2>\r\n<div class=\"sisend\">\r\n    <label>Pealkiri:<\/label>\r\n    <input type='text' name='o_pealkiri' id='o_pealkiri'>\r\n<\/div>\r\n<div class=\"sisend\">\r\n    <label for=\"o_tuup\">T\u00fc\u00fcp:<\/label>\r\n    <select id=\"o_tuup\" name=\"o_tuup\">\r\n        <option value=\"\" selected>-<\/option>\r\n        <option value=\"Movie\">Movie<\/option>\r\n        <option value=\"TV Show\">TV Show<\/option>\r\n    <\/select>\r\n<\/div>\r\n<div class=\"sisend\">\r\n    <label>Riigid:<\/label>\r\n    <input type='text' name='o_riigid' id='o_riigid'>\r\n<\/div>\r\n<div class=\"sisend\">\r\n    <label>Aasta:<\/label>\r\n    <input type='number' name='o_aasta' id='o_aasta'>\r\n<\/div>\r\n<div class=\"sisend\">\r\n    <label>\u017danrid:<\/label>\r\n    <input type='text' name='o_zanrid' id='o_zanrid'>\r\n<\/div>\r\n<div class=\"sisend\">\r\n    <label>N\u00e4itlejad:<\/label>\r\n    <input type='text' name='o_naitlejad' id='o_naitlejad'>\r\n<\/div>\r\n<div class=\"sisend\">\r\n    <label>Kirjeldus:<\/label>\r\n    <input type='text' name='o_kirjeldus' id='o_kirjeldus'>\r\n<\/div><\/pre>\r\n<\/code>\r\n\r\nNagu n\u00e4ha, on enamik sisendiv\u00e4lju \u00fclesehituse poolest pealkirja omaga identsed. Peamiste erinevustena lubame aasta jaoks vaid numbreid ning t\u00fc\u00fcbi valiku lahendasime ripploendiga. Ripploendis pakume v\u00e4\u00e4rtustena v\u00f5imalusi 'Movie', 'TV Show' ja ka vaikev\u00e4\u00e4rtust '-' (mille tegelik v\u00e4\u00e4rtus on t\u00fchi s\u00f5ne).\r\n\r\nSelleks, et ka kasutatud ripploend ning varem lisatud nupud kenamad v\u00e4lja n\u00e4eks, lisame faili kujundus.css<\/code> j\u00e4rgnevad read:\r\n
select {\r\n    padding: 5px;\r\n}\r\n\r\n.nupp {\r\n    width: 80px;\r\n    text-transform: uppercase;\r\n}<\/pre>\r\nN\u00fc\u00fcd on taaskord tarvis t\u00e4iendada app.py<\/code> loogikat. Kuna meil on sisendiv\u00e4lju mitu, tahame, et otsingu tulemuses oleks vaid sellised teosed, mis vastavad k\u00f5igi sisendiv\u00e4ljade v\u00e4\u00e4rtustele. Seega on sisendiv\u00e4ljade v\u00e4\u00e4rtustel p\u00f5hinevad piirangud vaja omavahel \u00fchendada justkui m\u00e4rks\u00f5naga AND<\/strong><\/span><\/code>. Siinkohal pole aga m\u00e4rks\u00f5na AND<\/strong><\/span><\/code> tarvis eraldi v\u00e4lja vaja kirjutada, piisab vaid sellest, kui eraldame piirangud omavahel komadega.\r\n\r\nMuudame seega meetodit tulemused()<\/code> j\u00e4rgnevalt:\r\n\r\n<\/code>\r\n
@app.route('\/tulemused', methods=['GET', 'POST'])\r\ndef tulemused():\r\n    tulemused = []\r\n    o_pealkiri = request.form['o_pealkiri']\r\n    o_tuup = request.form['o_tuup']\r\n    o_riigid = request.form['o_riigid']\r\n    o_aasta = request.form['o_aasta']\r\n    o_zanrid = request.form['o_zanrid']\r\n    o_naitlejad = request.form['o_naitlejad']\r\n    o_kirjeldus = request.form['o_kirjeldus']\r\n    tulemused = Teosed.query.filter(\r\n        Teosed.pealkiri.like('%'+o_pealkiri+'%'),\r\n        Teosed.tuup.like('%'+o_tuup+'%'),\r\n        Teosed.riigid.like('%'+o_riigid+'%'),\r\n        Teosed.valjalaske_aasta.like('%'+o_aasta+'%'),\r\n        Teosed.zanrid.like('%'+o_zanrid+'%'),\r\n        Teosed.naitlejad.like('%'+o_naitlejad+'%'),\r\n        Teosed.kirjeldus.like('%'+o_kirjeldus+'%')\r\n    ).all()\r\n    return render_template('tulemused.html', tulemused=tulemused)<\/pre>\r\n<\/code>\r\n\r\nNagu n\u00e4ha, v\u00e4\u00e4rtustasime k\u00f5igepealt k\u00f5igi sisendiv\u00e4ljade p\u00f5hjal neile vastavad muutujad. Seej\u00e4rel kasutasime neid k\u00f5iki ka p\u00e4ringu piiramiseks, eraldades need omavahel komadega.\r\n\r\n[h5p id=\"56\"]\r\n\r\nJooksuta n\u00fc\u00fcd uuesti faili app.py<\/code>, kirjuta midagi erinevatesse sisendiv\u00e4ljadesse ning kliki nupule Ots<\/em>i<\/em>. Taaskord suunatakse sind \u00fcmber aadressile 127.0.0.1:5000\/tulemused<\/a>, kuid seekord p\u00f5hineb otsingu tulemus k\u00f5igil sisenditel, kuhu mingi v\u00e4\u00e4rtus sisestati. Kui piirangud on liiga kitsad, v\u00f5ib tulemuste tabel ka t\u00fchi olla.\r\n
Laia otsingu lisamine<\/h3>\r\nProovime n\u00fc\u00fcd lisada ka uut Google'ga sarnast otsingut. Selleks lisame \u00fche eraldiseisva suure sisendiv\u00e4lja.\r\n\r\nKui kasutaja kirjutab midagi suurde sisendiv\u00e4lja ning klikib nupule Otsi<\/em>, v\u00f5rreldakse sisendiv\u00e4lja v\u00e4\u00e4rtust erinevate meie valitud tunnustega. Kasutame siinkohal v\u00f5rdluse aluseks tunnuseid pealkiri, \u017eanrid, n\u00e4itlejad ja kirjeldus.\r\n\r\nEsimese sammuna t\u00e4iendame j\u00e4llegi faili teosed.html<\/code>. Lisame form<\/code> siltide vahele, p\u00e4rast nuppe Otsi<\/em> ja T\u00fchjenda<\/em>, j\u00e4rgnevad read:\r\n\r\n<\/code>\r\n
<h2>Lai otsing<\/h2>\r\n<p>Kui kasutad laia otsingut, siis t\u00e4pse otsingu parameetreid arvesse ei v\u00f5eta.<p>\r\n<input type='text' name='o_lai' id='o_lai'>\r\n<input type='submit' value='Otsi' class=\"nupp\"><\/pre>\r\n<\/code>\r\n\r\nTegemist on tavap\u00e4rase sisendiv\u00e4ljaga, mille k\u00f5rval on eraldi otsingunupp. Tegelikkuses on see nupp siiski samav\u00e4\u00e4rne juba varem lisatud otsingunupuga ning funktsionaalsuse poolest ei ole vahet, kummale neist klikata.\r\n\r\nSelleks, et uus sisendiv\u00e4li t\u00f5epoolest suur ja lai oleks, lisame faili kujundus.css<\/code> j\u00e4rgnevad read:\r\n\r\n<\/code>\r\n
#o_lai {\r\n    width: 1100px;\r\n}<\/pre>\r\n<\/code>\r\n\r\nSellega on \u00fchtlasi kujundamise osa l\u00e4bi ning siinkohal v\u00f5ib faili kujundus.css<\/code> sulgeda, kui pole just soovi otsingumootori v\u00e4limust ka ise kohandada.\r\n\r\nN\u00fc\u00fcd on j\u00e4\u00e4nud t\u00e4iendada fail app.py<\/code>. Lahendame siinkohal olukorra, kumba otsingut peaks programm Otsi<\/em> nuppudele vajutamisel kasutama, m\u00f5nev\u00f5rra naiivselt. Nimelt, kontrollime, kas laia otsingu sisendiv\u00e4lja on midagi kirjutatud ja kui on, siis kasutame laia otsingu loogikat. Vastasel juhul kasutame t\u00e4psetel parameetritel p\u00f5hineva otsingu loogikat.\r\n\r\nLaia otsingu funktsionaalsuse lisamiseks ning otsingute vahel valimiseks muudame meetodit tulemused()<\/code> j\u00e4rgnevalt:\r\n\r\n<\/code>\r\n
@app.route('\/tulemused', methods=['GET', 'POST'])\r\ndef tulemused():\r\n    tulemused = []\r\n    o_lai = request.form['o_lai']\r\n    if o_lai != \"\":\r\n        tulemused = Teosed.query.filter(\r\n            (Teosed.pealkiri.like('%'+o_lai+'%')) |\r\n            (Teosed.zanrid.like('%'+o_lai+'%')) |\r\n            (Teosed.naitlejad.like('%'+o_lai+'%')) |\r\n            (Teosed.kirjeldus.like('%'+o_lai+'%'))\r\n        ).all()\r\n    else:\r\n        tulemused = []\r\n        o_pealkiri = request.form['o_pealkiri']\r\n        o_tuup = request.form['o_tuup']\r\n        o_riik = request.form['o_riik']\r\n        o_aasta = request.form['o_aasta']\r\n        o_zanrid = request.form['o_zanrid']\r\n        o_naitlejad = request.form['o_naitlejad']\r\n        o_kirjeldus = request.form['o_kirjeldus']\r\n        tulemused = Teosed.query.filter(\r\n            Teosed.pealkiri.like('%'+o_pealkiri+'%'),\r\n            Teosed.tuup.like('%'+o_tuup+'%'),\r\n            Teosed.riigid.like('%'+o_riigid+'%'),\r\n            Teosed.riigid.like('%'+o_aasta+'%'),\r\n            Teosed.zanrid.like('%'+o_zanrid+'%'),\r\n            Teosed.naitlejad.like('%'+o_naitlejad+'%'),\r\n            Teosed.kirjeldus.like('%'+o_kirjeldus+'%')\r\n        ).all()\r\n    return render_template('tulemused.html', tulemused=tulemused)<\/pre>\r\n<\/code>\r\n\r\nParameetrite p\u00f5hjal otsingu osa j\u00e4i samaks, kuid n\u00fc\u00fcd on juures ka laia otsingu loogika ning kontroll, kumba otsingut kasutada.\r\n\r\nVaatame t\u00e4psemalt \u00fcle lisatud laia otsingu loogikat. K\u00f5igepealt on n\u00e4ha, et laia otsingu sisendiv\u00e4lja v\u00e4\u00e4rtust v\u00f5rreldakse nii pealkirja, \u017eanrite, n\u00e4itlejate kui ka kirjeldusega. Soovi korral v\u00f5ib v\u00f5rdlemise aluseid ka muuta.\r\n\r\nKuna me soovime laia otsingu abil leida k\u00f5igi piirangute p\u00f5hjal leitud tulemuste \u00fchendit, oleks meil piirangute vahel vaja kasutada justkui m\u00e4rks\u00f5na OR<\/strong><\/span>. Flask-SQLAlchemy<\/em> p\u00e4ringutes paneme selle jaoks iga \u00fcksiku piirangu \u00fcmber sulud ning eraldame need omavahel s\u00fcmboliga '|'.\r\n\r\nTasub teada, et enamustes programmeerimiskeeles (kuid mitte Python'is) kasutatakse loogilise operaatori or<\/code> t\u00e4histamiseks s\u00fcmbolit '|' v\u00f5i s\u00fcmboleid '||'.\r\n\r\n[h5p id=\"55\"]\r\n\r\nJooksuta n\u00fc\u00fcd uuesti faili app.py<\/code>, kirjuta midagi laia otsingu sisendiv\u00e4lja ja kliki nupul Otsi<\/em>. Seej\u00e4rel peaksid n\u00e4gema teoseid, mida leiti nii pealkirja, \u017eanrite, n\u00e4itlejate kui ka kirjelduse alusel. Katseta erinevaid v\u00e4\u00e4rtusi ning veendu, et kirjutades midagi laia otsingu sisendiv\u00e4lja, kasutatakse just laia otsingu loogikat, mitte t\u00e4psete parameetritega otsingu oma.\r\n\r\nSellega on otsingumootori projekt valmis, kuigi t\u00e4iendusi, mis aitavad \u00f5pitut veelgi enam kinnistada, on alati v\u00f5imalik teha.\r\n\r\n\u00dchtlasi oleme j\u00f5udnud valikmooduli \"Andmebaasi p\u00e4ringud\" l\u00f5ppu. Siiski, j\u00e4\u00e4nud on veel lisalugemise peat\u00fckk vaadete kohta, mis aitab paremini m\u00f5ista, kuidas suurtes andmebaasides ning mitmetes tabelites hoiustatavaid andmeid internetis huvitaval kujul kuvatakse.","rendered":"
Veebilehe kujundamine<\/h2>\n
Hetkel on meie projekti, mis on n\u00e4htav veebiaadressil 127.0.0.1:5000\/teosed<\/a>, t\u00e4ielikult stiliseerimata. Kujunduse loomine aitab projekti kasutamist mugavamaks teha ning pakub ka silmailu.<\/p>\n
Alustame sellega, et loome projekti kausta sisse uue alamkausta static<\/code>. Kausta static<\/code> sisse loome alamkausta css<\/code> ning selle sisse omakorda faili kujundus.css<\/code>. Kuna tegemist on v\u00e4ikse projektiga, on m\u00f5istlik kasutada \u00fchte kujunduse faili k\u00f5igi vahelehtede jaoks. Hetkel on meil vahelehti k\u00fcll \u00fcks, kuid hiljem loome \u00fche juurde selleks, et n\u00e4idata otsingute tulemusi.<\/p>\n
Projekti kaust peaks hetkeseisuga v\u00e4lja n\u00e4gema selline:<\/p>\n
\"Projekti<\/p>\n
Projekti kausta alamkaust \/static\/css<\/code> peaks v\u00e4lja n\u00e4gema selline:<\/p>\n
\"Projekti<\/p>\n
\u00dchtse kujunduse kasutamiseks k\u00f5igis failides tuleb kujunduse fail kujundus.css<\/code> \u00fchendada baasfailiga baas.html<\/code>. Selleks lisame faili baas.html<\/code> head<\/code> siltide vahele j\u00e4rgmise rea:<\/p>\n
<\/code><\/p>\n
<link rel=\"stylesheet\" href=\"static\/css\/kujundus.css\"><\/pre>\n
<\/code><\/p>\n
Asumegi kujundust looma. K\u00e4esolevas peat\u00fckis tuuakse jooksvalt n\u00e4iteid, kuidas projekti kujundada v\u00f5iks. Soovitatav on k\u00f5igepealt katsetada, milline n\u00e4idiskujundus v\u00e4lja n\u00e4eb ning seej\u00e4rel v\u00f5ib projekti ka oma maitse ja eelistuste p\u00f5hjal kujundama hakata.<\/p>\n
Esmalt muudame veebilehe v\u00e4rve, m\u00e4\u00e4rame fondi, \u00e4\u00e4riseid ja muud. Selleks lisame faili kujundus.css<\/code> j\u00e4rgnevad read:<\/p>\n
html {\r\n    background-color: #fdfdfd;\r\n}\r\n\r\nbody {\r\n    background-color: #fafafa;\r\n    width: 1200px;\r\n    font-family: Arial;\r\n    padding: 20px;\r\n    margin: 10px auto 5px auto;\r\n    box-shadow: 0 0 8px #000000;\r\n    border-radius: 10px;\r\n}<\/pre>\n
Kui m\u00f5ni kasutatud stiilielement j\u00e4\u00e4b kas siin v\u00f5i tulevikus segaseks, otsi kindlasti nende kohta internetist infot. \u00dcks soovitatav infoallikas on veebileht w3schools<\/a>.<\/p>\n
Kujundame ka teoste tabelit. Lisame sellele piirjooned, m\u00e4\u00e4rame veergude pealkirjade lahtritele teistsuguse taustav\u00e4rvi ning lisame lahtritele t\u00e4idiseid (ingl padding<\/em>). Selleks lisame faili j\u00e4rgnevad read:<\/p>\n
table, th, td {\r\n    border: 1px solid black;\r\n}\r\n\r\nth, td {\r\n    padding: 5px;\r\n}\r\n\r\ntable {\r\n    border-collapse: collapse;\r\n}\r\n\r\nth {\r\n    background-color: #c9e4eb\r\n}\r\n<\/pre>\n
Selleks, et hetkel kasutatud pealkirjad ning hiljem lisatavad tekstid oleksid veebilehe keskel, lisame juba praegu ka j\u00e4rgnevad read:<\/p>\n
<\/code><\/p>\n
h1, h2, p {\r\n    text-align: center;\r\n}<\/pre>\n
<\/code><\/p>\n
Olemegi n\u00fc\u00fcdseks suure osa kujundamisest \u00e4ra teinud, t\u00e4nu millele on veebilehel kuvatavaid andmeid m\u00e4rksa mugavam vaadelda. J\u00e4tkame n\u00fc\u00fcd funktsionaalsuste lisamisega ning edaspidi t\u00e4iendame kujunduse faili jooksvalt, siis kui selleks vajadus tekib.<\/p>\n
Jooksuta enne j\u00e4tkamist uuesti faili app.py<\/code> ning tutvu veebirakenduse uue kujundusega.<\/p>\n
Otsingufunktsiooni lisamine<\/h2>\n
Praeguseks on veebirakenduses n\u00e4ha kujundatud kujul Netflixi teoste infot. Seega saame keskenduda otsingufunktsioonide lisamisele. Selleks tuleb esmalt t\u00e4iendada faili teosed.html<\/code>. Nimelt tuleb sinna lisada veebivorm koos sisendiv\u00e4ljadega, mille p\u00f5hjal koostatame andmebaasi p\u00e4ringuid.<\/p>\n
Lisame faili teosed.html<\/code> ploki body<\/code> algusesse j\u00e4rgnevad read:<\/p>\n
<\/code><\/p>\n
<h1>Otsingumootor<\/h1>\r\n<form action='\/tulemused' method='POST'>\r\n    <div class=\"sisend\">\r\n        <label>Pealkiri:<\/label>\r\n        <input type='text' name='o_pealkiri' id='o_pealkiri'>\r\n    <\/div>\r\n    <input type='submit' value='Otsi' class=\"nupp\">\r\n    <input type='reset' value='T\u00fchjenda' class=\"nupp\">\r\n<\/form>\r\n<br><\/pre>\n
<\/code><\/p>\n
Nagu n\u00e4ha, l\u00f5ime HTML-i form<\/code> siltide abil veebivormi, kus on hetkel vaid \u00fcks sisendiv\u00e4li (input<\/code> siltide vahel) otsitava teose pealkirja jaoks. Lisaks on seal nupp T\u00fchjenda<\/em>, millele klikates t\u00fchjendatakse k\u00f5ik veebivormi sisendiv\u00e4ljad ning nupp Ots<\/em>i<\/em>, millele vajutamisel suunatakse meid meetodiga POST<\/code> aadressile 127.0.0.1:5000\/tulemused<\/a>. Kuna me pole sellist vahelehte veel loonud, tuleb praegu nupule Otsi<\/em> vajutades veateade Not Found<\/em>. Nupp T\u00fchjenda<\/em> juba t\u00f6\u00f6tab.<\/p>\n
Kujundame loodud ja tulevasi sisendiv\u00e4lju. Lisame selleks faili kujundus.css<\/code> j\u00e4rgnevad read:<\/p>\n
input {\r\n    padding: 4px;\r\n}\r\n\r\n.sisend {\r\n    display: inline-block;\r\n}\r\n\r\n.sisend label {\r\n    display: block;\r\n}<\/pre>\n
Lisasime nii sisendiv\u00e4ljadele kui ka nuppudele t\u00e4idised ning m\u00e4\u00e4rasime, et sisendiv\u00e4lja pealkirjad oleksid sisendiv\u00e4ljade kohal. Seda ka siis, kui sisendiv\u00e4lju hiljem juurde lisada. Otsi vajadusel internetist, mida t\u00e4hendavad inline-block<\/code> ja block<\/code>. Nende m\u00f5istmine tuleb kindlasti igasugusel veebiarendusel kasuks.<\/p>\n
J\u00e4rgmisena t\u00e4iendame faili app.py<\/code>, kuhu kirjutame andmebaasi p\u00e4ringu koostamise loogika.<\/p>\n
Alustuseks tuleb moodulist flask<\/em> importida lisaks varasemale ka request<\/em>. Seega peaks importide osa n\u00fc\u00fcdseks v\u00e4lja n\u00e4gema selline:<\/p>\n
<\/code><\/p>\n
from flask import Flask, render_template, request\r\nfrom flask_sqlalchemy import SQLAlchemy<\/pre>\n
<\/code><\/p>\n
Seej\u00e4rel lisame p\u00e4rast meetodit teosed()<\/code> j\u00e4rgnevad koodiread:<\/p>\n
<\/code><\/p>\n
@app.route('\/tulemused', methods=['GET', 'POST'])\r\ndef tulemused():\r\n    tulemused = []\r\n    o_pealkiri = request.form['o_pealkiri']\r\n    tulemused = Teosed.query.filter(Teosed.pealkiri.like('%'+o_pealkiri+'%')).all()\r\n    return render_template('tulemused.html', tulemused=tulemused)<\/pre>\n
<\/code><\/p>\n
Sellega n\u00e4itame, mis juhtub, kui minna aadressile 127.0.0.1:5000\/tulemused<\/a>. Seal aadressil pole endiselt veel midagi, kuna selle sisu renderdatakse faili tulemused.html<\/code> p\u00f5hjal, mida me veel loonud ei ole. Teeme seda peatselt, kuid enne vaatame lisatud koodiread \u00fcle.<\/p>\n
Reaga o_pealkiri = request.form['o_pealkiri']<\/code><\/code><\/code> v\u00e4\u00e4rtustame me muutuja o_pealkiri<\/code> veebivormist saadud pealkirja sisendiv\u00e4lja v\u00e4\u00e4rtusega. Seej\u00e4rel me loome p\u00e4ringu tabelist Teosed sellise piiranguga, et o_pealkiri<\/code> v\u00e4\u00e4rtus peab esinema teose pealkirja sees. Pane t\u00e4hele koodireas kasutatud m\u00e4rks\u00f5na like<\/code> ning tuleta meelde, kuidas see PostgreSQL’<\/em>s t\u00f6\u00f6tas.<\/p>\n
Tasub teada, et siin ei eristata v\u00e4\u00e4rtuste puhul suur- ja v\u00e4iket\u00e4hti. Seega on n\u00e4iteks pealkirja v\u00e4\u00e4rtused ‘love’ ja ‘LoVe’ siinkohal v\u00f5rdsed.<\/p>\n
\n