Võrgurakendused I 2018

mootor

Ainekood: ITV0110/ITI0205 vastavalt õppperühmale Link: http://www.lambda.ee/wiki/V%C3%B5rgurakendused_I Punkte: 6 EAP Lektor: Martin Verrev Kontakt: martin.verrev@ttu.ee olemas on ka 2017 aasta arhiiv koos kõigi eelmise aasta materjalidega.

NB! Lisandunud lõpptulemused

Lõpptulemused

Aine tulemused on nähtavad Google Drives Vastavalt GDPR reeglitele on üliõpilaskood krüpteeritud

Andmed on kujul:

• Kood: üliõpilaskood millega ainele deklareerustie, hashitud MD5 algoritmiga.
• Enda intitsiaalid.
• P1 .. P5 ja P. kokku: Praktikumide vahetulemused eraldi ja nende kogupunktisumma
• KT: Kontrolltöö punktisumma
• Teadus: Punktid teadustöös osalemise eest
• Kokku ja hinne: Koondtulemus ja lõpphinne

Kui sul on mingid tulemused selgelt puudu või valesti, siis palun anna asjaoludest võimalikult täpselt teada (a la mitmenda praksi tulemustest jutt, millal umbes esitasid, kellele) emailitsi martin.verrev@taltech.ee.

Pane tähele, et kontrolltöö loetakse sooritatuks, kui said vähemalt 20 punkti. Kursuse edukaks lõpetamiseks peab sul olema tehtud esimesed neli praktikumi ja kontrolltöö ning praktikumid+kontrolltöö saadud kokku vähemalt 51 punkti.

Enda tulemuse leidmiseks:

Arvutage MD5 räsi enda üliõpilaskoodist, näiteks kui üliõpilaskood on 123456IABB, siis räsi vastavalt 4cb839dbc9a2298400d31f3672813725 Kõige lihtsamini saate selle leida kui kasutate mõnda online generaatorit. Salvestage räsi kusagile kättesaadavasse kohta nii et saate seda hiljem hõlpsasti kasutada.

Kes veel seda teinud ei ole saavad lisapunkte uurimistöös osalemise eest kuni hinnete kinnitamiseni ÕISis.

Uurimistöös osalemine!

Palun kõigil tudengitele teha läbi http://semantics.littlebit.cc/surveys uuring, kus tuleb hinnata erinevaid mõisteid ja nende tekitatud assossatsioone.

Uuringus osalemise eest saab 25. jaanuarini lisapunkte järgmiselt: 2 mõiste hindamisel - 1p, 3 mõiste hindamisel 2p, 4 mõiste hindamisel 3p. Keskkond võimaldab soovi korral uuringutulemused anonümiseerida.

Uuring on osa minu teadustööst tähenduse kvantifitseerimisel ja praeguse etapi eesmärgid on andmete kogumine kasutatava meetodi valideerimiseks ja piirväärtuste leidmine skaalade visualiseerimiseks.

Kontrolltöö ja kursuse lõpetamine

Kursuses on peale praktikumide ka üks kohustuslik kontrolltöö, mis toimub semestri viimasel nädalal ja annab maksimaalselt 40 punkti. Edukaks sooritamiseks pead kontrolltöös saama vähemalt 20 punkti ja kogu kursuse eest (praktikumid+kontrolltöö) vähemalt 50 punkti.

Kontrolltöö jaoks on sul valida kaks võimalikku päeva.

• kolmapäev 19. detsember kell 16:00 loengute toimumise kohas.
• neljapäev 20. detsember kell 16:00 auditooriumis U05-103

Peale 21. detsembrit on kursus lõppenud: ülesandeid enam ei vaadata ja rohkem kontrolltöösid ei tehta.

Vaata ka: Võrgurakendused_I_kontrolltöö_sisust

Praktikumides hindamine ainult sinu grupi ajal

Juhime kõigi praktikumijuhendajate poolt tähelepanu, et praktikumitöö arvestamine ja hindamine toimub ainult sinu grupi ajal! Muude gruppide aegadel võetakse töid vastu ainult juhul, kui ei ole kedagi õigest grupist, kes sooviks tööd esitada / konsulteerida, st reeglina mitte arvestuse viimasel nädalal.

Videoloengud

Selle aasta loengud on vaadatavad sellelt lingilt

Eelmise aasta loengud leiad siit lingilt.

NB! Ei ole mingit garantiid, et loengud jäävad üles mitmeks kuuks või et kõik loengud võrku ilmuvad.

Aeg, koht, tulemus

Loeng igal kolmapäeval kell 16:00-17:30 ruumis EIK-316 (IT Kolledžis 3. korrusel). Loengud on peamiselt pühendatud praktikumide seletamisele ja aeglasele, selgitustega osalisele ette-programmeerimisele. Teisisõnu, loengute mõte on aidata praktikume teha.

Praktikumid toimuvad eri gruppidele kolmel erineval ajal. Praktikumijuhendad on Tanel Prikk, Rasmus Retpap ja Markus Tarn. Esimesel nädalal on juhendajaks Martin Verrev, järgmistel tuleb praktikumijuhendajaid juurde.

NB! Praktikumide eesmärgiks on teha ise ülesande kallal tööd, küsida juhendajalt probleemide korral abi ja esitada valmis või osaliselt valmis töid juhendajale. Praktikumides enamasti ei esitata üldist infot/materjale/näiteid kõigile vaatamiseks: selleks on loeng.

• teisipäeval kell 16:00 ruumis ICT-402 IAIB31
• kolmapäeval kell 12:00 ruumis ICT-402 IAIB33
• kolmapäeval kell 14:00 ruumis ICT-403 IAIB32,

Kursus lõpeb hindelise arvestusega. Hinne sõltub kursuse jooksul tehtud praktikumide tulemustest (60%) pluss kursuse lõpus toimuva kontrolltöö tulemustest (40%).

Varasemate aastate tulemuste arvestamine

• Kui olete kuulanud ainet Võrgurakendused I rohkem kui aasta tagasi, siis kontrolltööle pääsemise eeltingimusena peate edukalt kaitsma kõik selle semestri kohustustlikud praktikumid 1-4, s.t. varasemaid tulemusi ei arvestata.

• Kui kuulasite ainet 2017/18 aasta sügissemestril ja mõni praktikumitöö jäi esitamata nii et kontrolltööle ei pääsenud, siis eelmisel aastal kaitstud praktikume uuesti tegema ei pea, välja arvatud juhul kui soovite punktisummat tõsta. Oma eelmise aasta punkte saate vaadata siin.

• Kui kuulasite ainet 2017/18 aasta sügissemestril ja pääsesite kontrolltööle s.t. kaitsesite ära kohustuslikud praktikumitööd, aga kogupunktisumma jäi alla 51 peate sellel semestril kontrolltöö tegemiseks kaitsma õigeaegselt 2. ja 4. praktikumi. Muud praktikumid teile kohustuslikud ei ole aga võite need teha kui soovite eelmise aasta punktisummat parandada.

Kursuse eesmärk

Veebirakenduste põhimõtted ja nende kirjutamise oskus nii brauseri kui serveri poolel. Konkreetsemalt:

• Brauseri põhitehntoloogiad: html-i, CSS-i ja javascripti baasoskused.
• Serveripoolse rakenduse kirjutamise põhimõtted,
• cgi protokoll ja erinevate keelte (sh python, php, javascript, C) kasutamise ülevaade serverirakendustes
• Pythoni ja php kasutamise esmased oskused.
• node.js kasutamise sissejuhatus
• Lihtsamad SQLi kasutamise oskused.

Kursusel eeldatakse elementaarsete programmeerimisoskuste olemasolu: nende puudumisel ei ole võimalik kursust läbida.

Julgustuseks loe seda väikest juttu

NB! Selle kursuse eesmärgiks ei ole keeruliste frameworkide, transpilerite ja pakkimisvahendite jms tehnokeskkonna õppimine: kõik need vajavad alustehnoloogiate kasutamise oskust, millele kursus ongi pühendatud.

Senised loengud peaksid olema vaadatavad sellelt lingilt.

NB! Ei ole mingit garantiid, et loengud jäävad üles mitmeks kuuks või et kõik loengud võrku ilmuvad.

Praktilised tööd

Kursusel on neli kohustuslikku praktilist ẗööd ja üks vabatahtlik praktiline töö. Iga töö annab 0-12 punkti. Hilinenud tööd annavad poole punktidest. Töid võib (ja on soovitav) esitada enne tähtaega.

NB!

• Kui sinu praktikum on õigeaegselt arvestatud, siis saad esitada täiendusi kuni nädalalani enne järgmise praktikumi tähtaega, ilma pooli punkte kaotamata.
• Kui sinu praktikum ei ole õigeaegselt arvestatud, siis on sul esitamiseks aega veel kolm nädalat peale tähtaega (välja arvatud neljas ja viies praks), aga selliselt hilinenud praks annab ainult pooled punktid.
• Üle kolme nädala hilinenud praks annab edukal arvestamisel ainult üheainsa punkti.
• Oma tööd saad arvestuseks esitada ainult oma rühma praksi ajal. Kui sa ei ole üheski rühmas, siis on aeg vaba. Lihtsalt nõu ja abi saad küsida ka teistel aegadel.

Kõik tööd tuleb esitada ise TTÜ arvutiklassis: emailiga saadetud töid ei vaadata. Kasutada võib nii klassi arvuteid kui oma arvutit, brauser ja operatsioonisüsteem on vabalt valitavad. Tööde presenteerimiseks tuleb kasutada ülikooli serverit dijkstra: kõiki prakse vaatavad õppejõud ainult sealt serverist. Kindlasti loe dijkstra serveri kasutamise õpetust.

Kursuse edukaks läbimiseks peavad kõik kohustuslikud praktilised tööd - neli esimest - olema tehtud.

Lehtede kujundamise ja stiili osas lähtu sellest juhendist.

Ülesanded:

1. ülesanne: HTML ja server

Detailid: Prax 1: html põhioskused.

Tähtaeg 18-22 septembri nädal, vastavalt sinu praktikumirühmale.

2. ülesanne: Laevade pommitamine

Ülesandeks on realiseerida lihtsustatud laevade pommitamise versioon kasutades selleks HTMLi ja javascripti, vastavalt järgmistele nõuetele:

Prax 2: javascript ja css.

Tähtaeg 15-19 oktoobri nädal, vastavalt sinu praktikumirühmale..

3. ülesanne: laevade pommitamise mälu ehk serverirakendus pythoni cgi-na

Ülesandeks on realiseerida serveris laevade pommitamise tulemuste ja poolikute mängude salvestamine ja nende kuvamine veebis.

Prax 3: python ja cgi.

Tähtaeg 6-10 novembri nädal, vastavalt sinu praktikumirühmale.

4. ülesanne: mini-tinder ehk andmebaasiga serverirakendus

Ülesandeks on ehitada mini-Tinder (vaata saiti ja wikipediat) kasutades selleks PHP-d ja MySQL-i.

Prax 4: andmebaasiga serverirakendus php-s.

Tähtaeg 4-8 detsembri nädal, vastavalt sinu praktikumirühmale.

5. ülesanne: kivi-paber-käärid ehk node.js

5. praktikumitöö on sama mis eelmisel aastal. See ei ole arvestuse saamiseks kohustuslik, kuid annab ikkagi kuni 15 punkti, ehk tegemata jätmine annab kokku vastavalt vähem.

Ülesanne on ehitada võimalikult lihtsalt kahe inimese kivi-paber-käärid mäng node.js abil.

Prax 5: serverirakendus node.js abil.

Tähtaeg 17-19 detsembri nädal, vastavalt sinu praktikumirühmale.

Vajalikud tööriistad

Oma arvutiga töö tegemiseks peab seal olema vähemalt

• Programmeerimiseks sobiv tekstiredaktor (väldi IDE-sid!) soovitavalt siit loetelust: Notepad++, brackets, atom, vs code, sublime text, scite
• Mozilla Firefox ja Google Chrome
• Windowsil putty või mõni sarnane sisselogimis-proge (Linuxil piisab ssh käsust). Hea erivariant Puttyst on kitty, mis laseb kasutajatunnuse ja parooli meelde jätta, et ei peaks igakord uuesti sisestama.
• Windowsil winscp (vaata konfimisest!) või mõni sarnane failide-üleslaadimis-proge (linuxil ja macil piisab scp käsust)

Tehnoloogiateemad ja materjale lugemiseks

Allpool on toodud olulisemad ja valik täiendavaid materjale põhilistele tehnoloogiateemadele kursuses.

HTML põhioskused

Loe ja proovi läbi (st vaja põhimõtted selgeks õppida):

• w3schools html tutorial põhiblokk kunide vormide allpeatükini.

Vanemates tutorialites toodud markup on reeglina endiselt pädev, v.a. xhtml ja päised: sina kasuta html5 standardit (päises <!DOCTYPE html>) ja ignoreeri xml teemat html-s.

Lisaks olulist:

• html entities osa1 ja osa2 ja utf-8 ja charseti seadmine

Keerulisemat:

• ametlik w3c standard
• !DOCTYPE prefix ja html vanade versioonide kuvamine

CSSi põhioskused

Lugeda ja proovida läbi (st vaja põhimõtted selgeks õppida):

• w3schools'i css tutorial: põhiosa kuni CSS3 blokini (sealt alates ei ole tingimata esialgu vaja), huvi korral loe edasi. Järgmised on eriti olulised osad:
  • erinevad stiilifailid/blokid ja nende hierarhia
  • display and visibility
  • box model
  • dimensioonid
  • positioning
  • float
• Väga kasulik abimaterjal on w3schoolsi css reference

Abiks on tutvuda heade tutorialidega järgmistel teemadel:

• centering div
• inline block
• floats
• listikasutus ja sealtsamast listikasutuse tutorialid
• css shadow
• css gradiendid

Häid praktilisi soovitusi kujundusest css-ga:

• css nupud ja nupukataloog ja nuputegija1 ja nuputegija2
• rounded corners, shadow, gradient fill jne
• puhtast tüpograafia-kujundusest

Vingeid graafilisi canvas+webgl asju:

• street view + knot
• pea

Javascripti põhioskused

Seejärel loe läbi ja proovi järgi selles järjekorras:

• Wikipedia javascripti üldartikkel: ülevaade, ajalugu jne. Loe algust, kogu juttu pole tingimata vaja. Keelt siit ei õpi!
• W3schools javascripti sissejuhatus: Lisaks põhi-tutorialile alguses on kriitiline JS HTML DOM blokk allpool: kuidas tegelikult htmlist tükke kätte saada ja neid muuta.
• Wikipedia Javascripti keele kiirõpetus: loe ja proovi paralleelselt w3schools-ga. Siit saab mõned asjad selgemaks kui ainult w3schoolsist.

NB! Selle tulemusena on sul baasettekujutus javascripti keelest, aga mitte reaalsest kasutusest (seda vaatame järgmises loengus).

Javascripti kasutamine brauseris: alustuseks on hea vaadata põhjalikku näidete loetelu

• html dom objektid: põhiasjad
• form validation: klassikaline rakendus
• brauseriobjektid: vahel kah kasulikud

ja tingimata lugeda sinna juurde teegijuhendeid:

• html dom ülevaadet
• html events ülevaadet
• style lugemine/muutmine js-s: hädavajalik reference

Javascripti ja css-i teegid: uurime veidi kõige populaarsemaid universaalseid teeke

• jquery javascripti teek dom-ga manipuleerimiseks ja ajaxiks
• underscore funktsionaalsed pisivahendid
• bootstrap css + javascript, widgetid jne
• react facebooki kapitaalne teek / pool-framework keerukamate kasutajaliideste tegemiseks

Vaata Google toredaid demosid.

Veebirakenduse optimeerimine mobiilile

• sissejuhatavaid punkte ja olulist

Täiendavalt spetsiifilisematest teemadest:

• css-i valik mobiilile ja sama teema selgitusteta
• navigeerimine ja menüüd
• iOS nüansid
• optimeeri sujuvust: video
• huvitav mobiili-hübriid-veebirakenduste teek

Cgi töötlemine eri keeltes (C, python, bash, java, ...)

Kõigepealt loe ja proovi tingimata ise läbi teha: pythoni cgi-d dijkstra serveris: kiire sissejuhatus

Seejärel vaata hulka näiteid, mille täpsem seletus antakse loengus.

Tutvu linuxi shelli elementaarsete käskudega siit alustades ja selle lühiõpetusega jätkates. Iga käsu juures on abiks man, näiteks man ls. Huvi korral googelda lisaks.

Seejärel loe neid materjale CGI protokollist ja CGI programmidest serveris:

• wikipedia
• cgi sissejuhatus pythonis ja alternatiiv
• cgi C keeles
• cgi Bashis

ning siis vaata lisaks loengus tehtud/proovitud lihtsaid cgi programminäiteid eri keeltes.

Cgi jaoks on olemas ka nö rfc-standard, mille lugemine on aga pisut vaevarikas (nagu enamikel standarditel) ja üldjuhul on praktilisem lugeda hoopis ülaltoodud õpetusi ja vaadata näiteid.

Python ja näiteid kasutamisest serverirakendustes

• Loe tutoriali algust (keerulised andmestruktuurid, moodulite ja klasside värgi võid esialgu lugemata jätta)
• Hea tutorial cgi programmide kohta pythonis
• Lisaks cgi teegi õpetust.

Hea mõte on paralleelselt teha lahti Pythoni interpretaator ja katsetada kõrvale asju otse Pythoni käsureal. Kui su masinas Pythonit pole, siis installeeri! Kasulikke asju lisaks:

• Kasulikke pythoni näitejuppe cgi jaoks
• teegi dokumentatsioonis.

Ajax ehk serveriga andmevahetus otse javascriptist

• Loe seotud tehnoloogiatest: wikipedia ajax, wikipedia xmlhttprequest, wikipedia json
• Vaata xmlhttprequest ja jsonile rakendatud eval näited
• Vaata uuemat ja lihtsamat varianti Ajaxi callist: fetch

Lisaks võib abi olla:

• w3schoolsi ajaxi mikrotutorial
• jquery mugavamad wrapperid xmlhttprequestile

NB:

• Vanade IE-de erivariante ei ole mingit mõtet kasutada.
• Ajaxiga avatud urlilt võib tulla mis iganes tekst (ei pea olema xml).

Serverirakendused PHP-s, näited

• Väikese ajaloolise ülevaate leiad wikipeediast
• Põhiõpetus on php oma saidil: loe sealt kõigepealt sissejuhatavat tutoriali
• W3school-si php tutorial on samuti päris OK.

• Vaata lihtsaid php ja mysql näiteid loengust.

SQL

Loe selles järjekorras:

• w3schools'i tutorial
• mysql esmane tutorial ja mysql manuaal

SQL serverirakendustes

• Vorgurakendused 1 SQL naited loengust: alusta siit
• Vaata veel kombineeritult lihtsaid php ja mysql näiteid loengust.

Harilikud tutorialid ja tähelepanekud:

• mysql PHP-s: veebitutorial
• SQL injection vt ka seda ja seda ja seda
• w3schools PHP tutorial all vasakul Mysql blokk

Sessioonid, cookied, sisselogimine, autentimine, web storage

Mõned lingid:

• basic authentication wikipedias, apache manuaalis ja basic authentication näited
• cookie wikipedias, php cookie handling w3schools-st ja php manuaalist
• php sessioonihandling w3schools ja siit php mahukas sessiooni-manuaal ja siit eraldi tutorial
• väike ok sessioonihalduse tutorial
• autentimise näide php sessiooniga
• Web storage: HTML5 parem ja lihtne alternatiiv cookiedele. Vaata kindlasti ka muid HTML5 data-salvestus-mehhanisme, HTML5 application cache ja seda detailsemat täiendavat juttu.

node.js sissejuhatus

node.js on süsteem serverirakenduste kirjutamiseks javascriptis. Ta on ehitatud chrome javascripti mootori peale ja lisab sinna hulgem kasulikke teeke, veebiserveri jne.

Vaata:

• node.js ise
• node.js wikipedias

Dijkstras on node olemas programmina nodejs ja versioon on praeguseks uuendatud. npm on samuti olemas ja ei vaja ruuduõigusi.

Aga, hea mõte on kõigepealt installeerida omaenda arvutisse node.js ja alustada katsetamist:

• w3schools-i erilihtne tutorial
• ka hea sissejuhatav tutorial
• tutorialspointi veidi põhjalikum tutorial

• järgmine ok tutorial
• hulk eri tutoriale mis vajavad installeerimist

• [1] Õpetused node baasmoodulite kohta

Veebiserveri ehitusest ja konfigureerimisest

Kõigepealt tutvu või tuleta meelde http protokolli põhimõtteid:

• http wikipedias
• veel http-st
• headerite jms vaatamise veebiabivahend

Veebiserverist paremaks arusaamiseks tasub veidi eksperimenteerida pisikese veebiserveriga.

Enimkasutatav veebiserver Apache:

• apache oma koduleht
• wikipedia apachest
• veebiserverite kasutusstatistikat

Apache konfigureerimisest:

• sissejuhatus algajatele
• ametlik juhend