ICD0007 - Veebitehnoloogiad teooria/konspekt (0)

Muutujale väärtuse omistamine globaalsest muutjast. Kuidas vaikimis väärtust omistada 
kõige ilusamini.
  2. CSS (eksamil muret ei ole tekitanud) font-family: Verdana, sans-serif; // kui ühe sõnaga nimi, siis pole jutumärke 
vaja. Cascading - asjad saavad üksteise peal olla. Võtab erinevatest kohtadest asju (nt body asjad
+ h1 asjad). Efekt kujuneb mitmest erinevast stiilist kokku. Parem klikk - inspect element (siis näen, missugune CSS mõjutab). Elementide identifitseerimine id=”dog” 
Sama id saab olla ühel unikaalsel elemendil. Üldiselt on see piirang. Üks saab olla nt 
põhimenüü. Klassi saab panna paljudele elementidele peale. Nt kõikide tabelite päised, 
uudisportaalis kõikide h2 pealkirjade stiil. class=”cat”< class=”cat fat” - nii saab ühele asjale panna mitu klassi korraga.
Halva näite probleem: klassi nimi ei tohiks iseloomustada sisu või välimust (nt “paks-
pealkiri”) vaid semantiliselt eesmärki (table-header, header-row vms). Alamelemendid (eksamiks teada väga hästi) Menüüs olevad lingid.  - lingid, mis asuvad “menu” id’ga div’i sees.
< - klassi jaoks Mitu elementi saab korraga, kui komaga eraldada. Nii klassi kui id selektori korral sobib. Sisestuskast ja nupp




input[type=”submit” Ühikud High-res puhul 1px = 4px.
em: M tähe laius. Kui tahta layouti hoida, siis em-i kasutus on parem, sest kõik suureneb 
proportsionaalselt. Eelistaksime rääkida muust sõltuvusest kui 1px. Div ja span span - teksti sees mingite elementide eraldamiseks. Võimalus tekstilõike identifitseerida ja 
neile klass peale panna. Peamiselt teksti jaoks.
Div - saab erinevaid elemente kokku võtta. Vaikimis võtab enda alla terve rea. Diviga saab 
kaste teha. * {border: 1px solid red; } - paneb kõigele borderi ümber. Tabeli ääris Tabelile  border-collapse: collapse; ja igale td-le raam. Semantilised elemendid HTML5-ga tulnud elemendid, mis ütlevad rohkem infot selle kohta, mis selle koha peal on. 
Välimuslikult midagi ei tee. Võimaldab ka nt otsimootoril ja automaattöötlusel lehte paremini
lugeda. Nt footeri tekst ebaoluline, main on oluline. ,  (emphasised). Kommentaarid HTMLis , CSSis /* */ Style tag - taaskasutatavus, erinevate asjade eraldamine (et HTML ja CSS poleks segamini 
ühes failis) ja võrguliiklus (üks muutumatu fail cache’itakse, iga lehe puhul ei ole vaja uuesti 
laadida). Navigeerimine - ../ tähendab ühe võrra tagasi. Absoluutset aadressi ei kasuta, sest see 
sõltub meie asukohast. Sel juhul on relatiivne parem. Välisele saidile viidates saame ainult 
absoluutset kasutada.


a/a.html - relatiivne
/a/a.html - absoluutne viitamine alates saidi domeenist. Aga kui paned alamkataloogi (nt 
domeen.ee/v2/), siis enam ei tööta. (võiks eksamil teada) cd - change directory Localhost: Viitab kohalikule arvutile, see on IP aadressile vastav nimi. 127.0.0.1. Eriline IP. 
Kui selline pakett on, siis tõstetakse väljundist sama võrgukaardi sisendisse (local 
loopback). ASCII. Sama bait sõltuvalt encodingust võib tähendada erinevat sümboolit.
Unicode pole enkooding. UTF16 (2 baiti, miinuseks see, et raiskab, kui pole nii palju vaja (nt 
EN tähestikus)) ja UTF8. 3. Käsurida, Git, versiooni haldus (Indrek) git init - teeb uue repo
git status - enim kasutatud giti käsk. 4. Php (Kalmo)
Php aitab teha html’i dünaamiliseks. Server - programm (peamiselt), mis oskab vastata, kui temalt midagi küsitakse. Ühes kastis 
võib olla hulk programme (meiliserver, veebiserver, failiserver jne). Reaalselt võrgus igal arvutil on IP (mitte nimi). Brauser esimesena küsib eraldi serverilt 
(DNS), missugune IP vastab taltech.ee. Tagastab IP ja siis pöördub IP poole. Localhost on nimi nagu taltech.ee’gi, millele vastab konkreetselt selle sama arvuti IP. DNSist
pole vaja küsida. 8080 ehk port on aadressi pikendus. Php serveerimisel käivitatakse php programm ja tagastatakse väljund. Htmli puhul 
tagastatakse lihtsalt faili sisu. 1994 Rasmus Lerdorf. Personal home Page Tools ja hiljem Hypertext Preprocessor. php hello.php - kõik muu laseb terminal läbi välja arvatud see, mis tag’ide vahel. php-ga saab teha veebi, käsurea rakendusi ja graafiline liides ka olemas. Keele võimaluste 
poolest pole Pythoniga eriti vahet aga teeke on vähem.


Sisend kasutajalt (nupud, lingid, sisestuskastid) --> arvutus → html 
väljund. Konstruktsioon print “Hello, php!”; Lõputag’i stiilireeglid ei soovita panna. C-tüüpi keel (loogelised sulud, mitte treppimine nagu 
Pythonis). Trepp on loetavuse parandamiseks (eesmärk on max loetavus ja htmlis pole 
tingimata vaja kõike treppida). Muutujad ilma tüüpideta, dollari märk ees.  == teeb automaatse teisenduse. Vaatab, kas üldse on võimalik võrrelda. Kui esimene on 
string, siis teistendab teist ka stringiks. Üldiselt ei tahaks üldse kasutada, et vältida nt, et 
tühi string ja null ei oleks võrdsed..
=== Täpne võrdus, kontrollib, et tüüp on ka sama ja väärtus on sama. Sõne puhul
‘Jill $age’ - ei arvesta muutujaga
“Jill $age” - arvestab muutujaga php-s on palju funktsioone keelde sisse ehitatud. Ei ole utilit ega libraryt vaja kasutadagi.
https://www.php.net/manual/en/indexes.functions.php - 10 000 rida. Tugev eelis, et kohutavalt palju valmis ehitatud asju ja pole vaja ise midagi teha (paned 
klotsidest kokku). Truthy ja falsy - mingid asjad loetakse true ja mingid false. List. Eripärane asi. Listi initsialiseerimine 
$numbers = [1, 2, 3]; 
print_r($numbers);
var_dump($numbers); näitab elementide tüübid ka ära. $numbers[9] = “Hello”;
$numbers[“Hello”] = “Hello”; Need töötavad ka. Aga kui me ei tee sõnastikku, siis me ei kirjuta nii. Appendime nii, et ei 
tekiks lünki või ootamatuid võtmeid: $numbers[] = “Hello”;
array_push($numbers, “Hello”);


Sõnastiku tegemine. List käitub ka nagu sõnastik, kui sinna oma indeksid panna. $numbers = [“math” => 1, “chemistry” => 3]; ja sellest üle käimiseks: foreach ($numbers as $key => $value) on mugav konstruktsioon sõnastikust 
üle käimiseks. Kui realõppu PHP_EOL ei pane, siis prindib üksteise otsa. Funktsioonid. Sarnane nagu Pythonis. Aga funktsiooni saab kasutada ka enne kui 
funktsioon on defineeritud (Pythonis peab olema vastupidi). Nimetamine. Sisse kirjutatud funktsioonid on vana viisi (nt array_push).
Sisse ehitatud objektid on CamelCase’is. Kõige õigem on kasutada Java-pärast kirjapilti. Nt 
$subjectGrade $getSubjectGrades tiilireeglid kontrollivad seda. Faili lugemine.  $lines = file(‘../data.txt’); Annab read listina. Faili kirjutamine käib  file_put_contents(‘fail’, data, FILE_APPEND); | tähendab bitwise or ja sellega saab eraldada konstante. $str = join(‘ + ‘, [1,2,3]);
$list = explode(“,“, “1,2,3”); list ($host, $port) = explode(“:”, “localhost:80”);
See on üsna advanced asi, kuidas saab otse muutujatesse asjad. Kui on rohkem asju, siis 
need, mis üle jäävad, lihtsalt ei arvestata. Klassid ja objektid (34:30) Require näiteks toodud 
 sama, mis Javas on import. Nagu failid 
oleks teise kohta ka sisse kirjutatud.
 Kui mitmest kohast viidatakse 
samale asjale, siis ta ei laeks topelt. Koodi puhul eelistame seda.   näitab mis failile vorm edasi suunata. Vormi sisu 
pannakse aadressiribale võti-väärtus paarina järgi ja läheb sisendiks sisse. On teine 
võimalus ka neid asju saata (aga sellest räägime hiljem). bind() - annad hosti ja porti, mida tahad kuulata. $temp = $_GET[‘temp_in_celsius]; nii funktsioon võtab.
intval($str); - teeb stringist numbri


Serialiseerimine (1h :00) - array tekstiks teisendamine ja tagasi saamine. Skript saab kätte ja salvestab tekstifaili. Vorm on tähtis. Print “$key;$value” . PHP_EOL. Asjad võivad minna valesti seal, kus delimiter võib olla ka info sisus. Saab kasutada 
kontrollsümbolite encode’i ja decode’i. php -S localhost:8080 - kõige kindlam variant dev serverit kasutada. 5. php disainimustrid Mustrid on selleks, et koodi paremini hallata ja paremaks muuta. Kõige lihtsam on kasutada  require_once meetodit. functions.php-sse ei kirjuta printe ega kõrvalefekte (varjatud funktsionaalsuseid) sisse. Globaalsed muutujad: Erinevus on see, et kus teda näha on. Võtmesõna global viitab sellele, 
et kasutatakse välist muutjat. See on praktikas halb, sest teeb elu keerulisemaks (kui keegi 
globaalset muutujat mõjutab, siis võib saada mõnikord hoopis teise väärtuse). Muutujate skoop peaks olema võimalikult lühike. Globaalseid muutujaid peaks vältima. $_GET, $_POST on globaalsed muutjad. Funktsiooni sees ka ei tohiks globaalseid muutujaid 
kasutada. Sellised muutujad on väärtustatud ainult veebis. Käsureal ja testides ei ole 
väärtustatud. Parem on panna globaalsed muutujad oma muutujasse. Testides on ka globaalsete 
muutujate kasutamisele piirangud. php kui progemiskeele halb maine. Raske on öelda, mis tal kehvasti on :) Tugevus on see, et 
lihtne on alustada. Aga palju koodi on kirjutatud sellist inimeste poolt, kes pole midagi 
korralikult programmeerinud. Keele kaela ei tohiks ajada. Koodi disain. Midagi liigitame ja jagame tükkideks. ● Abifunktsioonid. Requirega saame taaskasutatavad funktsioonid panna.
● Konkreetse rakenduse kood. Mis kasutab abifunktsioone.
● Vaade. Ei tahaks, et HTML ja php oleks segamini omavahel.  Võiks hoida eraldi. Veebirakendus (vs veebileht) koosneb ühest peamisest failist index.php, mis saab kõik 
päringud enda kätte ja otsustab, missugust vaadet näidata. Kogu kood on indexis ja 
functions.phps (abifunktsioonid). Index otsustab, missugust vaadet näidata. Actionisse 
kirjutad alati index.php ja see otsustab, et mida näidata (vastavalt sellele, missugused 
andmed on).


Miks front-controller mustrit kasutame? ● Duplikatsiooni vähendamine
● Kõik navigatsioon on võimalik lahendada sama loogikaga.
● Kõik päringud käivad läbi ühest punktist Sisu sõltub andmetest. Teed if-else ja vastavalt sisule require’d php faili. HTMLi paned vaate 
sisse (lihtsama asja näide). https://www.tutorialspoint.com/design_pattern/front_controller_pattern.htm
https://www.geeksforgeeks.org/front-controller-design-pattern/ Front Controller muster - lahendusvõte, kuidas saavutada midagi. Algoritm (ka retsept) on 
väga täpne. Software pattern on üldised põhimõtted, mis probleem ja missugune on üldine 
lahenduse suund (muster). Index.php on front controller rollis. Miks kasutame mallie. Vaates peaks olema võimalikult vähe loogikat (muutujad, if, foreach, 
require). Mitte rohkemat. #template engines in PHP Mallide teegid. https://twig.symfony.com/ The flexible, fast, and secure
template engine for PHP. HTML ja kontrollstruktuurid lisaks. Eriti ilus ja loetav välja ei näe. 
Mitte väga ilus kompaktne keel. Vendor kataloogist require_one ‘vendor/autoload.php’
Kalmo enda näide gitist, kus kogu malli teek on ühes failis. Piiratud hulk asju, mida teha 
saab, et vaate koodi ei paneks midagi ülearust sisse. Main.tpl - mall, kus üldine struktuur on defineeritud. Ja alammallis main.tpl’i on konkreetse 
sisu lehe asjad pandud. Front Controller (eraldi muster) ja mallid (natuke laiem mõiste) on eraldi asjad aga 
mängivad hästi kokku. Nende koos kasutamine enamasti. $twig ja $loader on alamobjektid ja käivitamine objekti pealt.  52:00 - siit pooleli. Andmete hoidmine tekstifailis Andmete lugemine ei pea olema veebirakenduse kontekstis. Aga oleks vaja transportida. Positsiooniga tähistamine läheb krüptiliseks. Hea mõte on teha lihtne objekt, et anda 
andmetele struktuur.


list($first, $last, $phone) = $parts;
$persons[] = new Person($first, $last, $phone);  // selline vaheklass või konteiner, kus ühe 
isikuga seotud infot hoiame. Print $persons[0]->first; Tarkvara arhitektuur Raske rääkida lahendustest, kui isegi ei tea, et sellised probleemid esinevad. ● CSS ja HTML eraldi
● Kood ja HTML eraldi
● Koodi struktureerimine (funktsioonideks jagamine)
● Programmi osadeks (mooduliteks) jagamine
● ...jne
● Kord
● Järjepidevus
● Vältida ad hoc (antud juhuks) lahendusi print $this->getBrowser()->getContent(); Sellega saab run’is htmli sisu. Koodi disain ● Nimetamine
● Clean code 5. loengus tehtud näidisrakendust https://bitbucket.org/indrekots2/blog/src/master/edit-post.php Teeb sellise array, kus iga indeksi all on kaks asja.
$posts[] = ["title" => urldecode($title), "body" => urldecode($body)]; HTMLi sees oleva sisu dünaamiliseks genereerimiseks.
    



Kustutatav asi anna hidden elemendina kaasa. 6. loeng - Javascript
Brauser on HTML failide näitamise vahend. Desktop rakendus vs veebirakendus.
Veebirakendus - olek on serveris. Brauser ei salvesta midagi. Kuvatakse väljund ja kasutaja 
poolel puudub interaktiivus. Gmail - üheleherakendus. Pilti ei laeta uuesti üle (brauser ei tee päringut). Päringud tehakse 
javascripti koodis ühelehe rakenduse sees). AJAX - Asynchronous JavaScript And XML.
XML - eXtensible Markup Language. Andmete kirjeldamise keel. Javascript -> päring -> andmed tulevad struktuursel kujul. Eeliseks, et küsime ainult andmeid, mida on vaja. Mitte kogu veebilehte. Tänapäeva veebirakendused - Ühelehe rakendus JavaScriptis - Serveri poolel PHP, Java, Python, C#, JavaScript jne. Sellel kursusel: brauseris javascript, serveris php Brauser -  Javascript - C-tüüpi keel,  Objektid javascriptis. Funktsioonid NaN - not a number, kui liidad mittenumbreid. Funktsioonid kui väärtused


Asünkroonne - javascript, aeglase operatsiooni järgi ei oota.
Sünkroonne Täitmise järjekord on 1 - 3 - 2, sest võrgupäring on aeglane. Ja kõige lõpus prinditakse see 
esimene rida välja. Callback - helista tagasi siis, kui oled valmis. JSON - Javascript object notation. Väikesed erinevused JS objektiga.
Tänapäeval asendanud XMLi formaadi. Callback - funktsioonile kaasa pandud parameeter (koodijupp), mis ütleb, mis siis teha, kui 
vastus (nt kaua aega nõudva arvutuse tulemus) on käes. 10. Loeng - php backend API (03.11, Indrek Ots)
Ühelehe rakendus Javascriptis
Serveri poolel PHP, Java, Python, C#, JavaScript jne. Brauser ei tee lehe täislaadimist iga kord. Esimene kord saab kõik (peamiselt js ja css). 
Päringu tegemisel server ei anna kõik andmeid vaid ainult sisu. JSON - paindlik viis kuidas representeerida teksti kujul andmeid. Seda saab lihtsalt lugeda 
sobivale kujule (töödelda) ja luua. Veebiteenus - Serverite/seadmete vaheline suhtlus üle veebi - Rakendusliides e. programmiliides (Application Programming Interface  - API) - 
veebiteenus pakub sellist mõistet. Pakub defineeritud funktsionaalsust, mida saab 
kasutada. API = leping. Mina kui API pakkuja luban, et kui kasutad nii (nt teed sellise 
päringu sellisesse kohta), siis teeb sellist asja. - >> Vaatame serveri poolt, kuidas php kasutades teha mingi veebi teenuse (API). header("Content-Type: application/json");
print json_encode($book, JSON_PRETTY_PRINT| 
JSON_UNESCAPED_UNICODE);


Kui tahad päringu kehast teksti välja lugeda, siis seda teha ei saa. Postman, POST, body, raw, json.  GET vs POST - peamine vahe on semantika. Millal kuidas mida kasutatakse. GET meetod 
üldjuhul eeldab, et me nagu tahame midagi ja POST kasutatakse üldjuhul mingite andmete 
saatmiseks. HTTP standard näeb ette, et GET on sisuliselt selline päring, mis ei muuda 
(vähemalt otseselt) süsteemi olekut. Saame mitukümmend korda järjest teha GETi ja 
andmeid ei tule juurde (va logid), vähene jne. POST päring seevastu on selline, et kui teha 
mitu korda, siis ei pea tagama, et süsteemi olek jääb täpselt samasuguseks. Sobib uute 
andmete saatmiseks salvestamiseks serverisse nt. Kui tahta kontakti lisada, siis POST meetodiga. Näidisküsimused: 1. Mis kasu on mallidest veebirakenduses? Aitab eraldada kood ija htmli, vähendab  duplikatsiooni, sobib kokku front-controller mustriga 2. Http GET päring ei sobi kustutamise käsu andmiseks. Miks? Cachega seotud  problemeid 3. Miks on siin vajalik “host” rida? Kas server ise ei tea, kes ta on? - serveris võib mitu  asja olla
GET /index.html HTTP/1.1
Host: enos.itcollege.ee 4. Kuidas saab serveris asuv veebirakendus kliendi arvutis olevast küpsisest (cookie)  info kätte? Klient ju ise saadab seda kogu aeg kaasa (mitte server ei küsi). https://www.youtube.com/watch?v=jqcu12Aw95g - eelmise aasta eksam

.DOCX Laadi alla originaalfail 11 lk