Võrgurakendused I 2016
Ainekood: ITV0110 |
Sisukord
- 1 NB! See on 2016 aasta arhiiv, mitte hetkel kehtiv variant
- 2 Tulemused
- 3 Kontrolltöö
- 4 Aeg, koht, tulemus
- 5 Kursuse eesmärk
- 6 Praktilised tööd
- 7 Vajalikud tööriistad
- 8 Loengute teemad ja materjalid lugemiseks
- 8.1 HTML põhioskused
- 8.2 CSSi põhioskused
- 8.3 Javascripti põhioskused
- 8.4 Veebirakenduse optimeerimine mobiilile
- 8.5 Cgi töötlemine eri keeltes (C, python, bash, java, ...)
- 8.6 Python ja näiteid kasutamisest serverirakendustes
- 8.7 Ajax ehk serveriga andmevahetus otse javascriptist
- 8.8 Serverirakendused PHP-s, näited
- 8.9 SQL
- 8.10 SQL serverirakendustes
- 8.11 Sessioonid, cookied, sisselogimine, autentimine, web storage
- 8.12 node.js sissejuhatus
- 8.13 Veebiserveri ehitusest ja konfigureerimisest
NB! See on 2016 aasta arhiiv, mitte hetkel kehtiv variant
Tulemused
Kursuse tulemusd on siin tabelis: Võrgurakendused 1 2016 tulemused.
Tulbad: matriklinumber ilma kursuse koodita, eesnime esitäht, hinne. kontrolltöö punktid, praktikumide punktide summa.
Tabel on sorteeritud matriklinumbrite järgi.
Kui sa avastad, et sul peaksid punktid teistmoodi olema, siis palun kirjuta tanel.tammet@ttu.ee.
Kontrolltöö
Kontrolltöö toimub sessi ajal, kaks võimalikku aega, sarnaselt eksamile.
Kuupäevad kontrolltööks on (vali kas 6 või 19 jaanuar, mõlemil tulla ei saa):
- 6 jaanuar ruumis U02-102 kell 15:00 (kõigil sama aeg kell 15, sõltumata matriklinumbrist)
- 19 jaanuar ruumis U06A-201 kell 12:00 ja kell 15:00 :
- Paarisarvuga (0,2,4,6,8) lõppeva matriklinumbriga tudengitel palun tulla kell 12:00,
- paaritu arvuga (1,3,5,7,9) lõppeva matriklinumbriga tudengitel palun tulla kell 15:00.
Kontrolltööle registreeruma ei pea.
Võrgurakendused I kontrolltöö sisust
Praktikumide tulemused ilmuvad siia aastavahetusel.
Aeg, koht, tulemus
Loenguid nädalas: 2 tundi (üks loeng) teisipäeviti 08:00-09:30 ruumis CYB - VEENUS
Praktikume nädalas: 2 tundi (üks praktikum). Praktikumijuhendaid on mitu: põhijuhendaja on Roger Kerse, talle tuleb lisaks abilisi. Praktikumid toimuvad eri gruppidele neljal erineval ajal.
- esmaspäeval 12:00-13:30 ruumis ICT-401
- esmaspäeval 14:00-15:30 ruumis ICT-401
- kolmapäeval 10:00-11:30 ruumis ICT-501
- neljapäeval 08:00-09:30 ruumis ICT-501
Reedel 16 dets lisa-praksiaega ei ole. See-eest:
- esmasp 19 dets on lisa-praksiaeg alates 16-st: koguneme koridoris ICT-401 ees
- teisip 20 dets toimub loengu ajal ja ruumides lisa-praktikum, mitte loeng.
- reedel 23 dets lisa-praksiaeg kõigile rühmadele kell 12:00, koguneme koridoris ICT-401 ees
Kursus lõpeb hindelise arvestusega. Hinne sõltub kursuse jooksul tehtud praktikumide tulemustest (60%) pluss kursuse lõpus toimuva kontrolltöö tulemustest (40%).
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 shell, C, php, python, java, javascript) 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
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 kaks nädalat peale 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.
Ülesanded:
- Prax 1: html põhioskused. Tähtaeg 14-17 septembri nädal, vastavalt sinu praktikumirühmale.
- Prax 2: CSS, javascript. Tähtaeg 10-14 oktoobri nädal, vastavalt sinu praktikumirühmale.
- Prax 3: serverirakendus: cgi pythonis. Tähtaeg lükkus ühe nädala edasi ja on nüüd 15-18 novembri nädal, vastavalt sinu praktikumirühmale. Varem esitamine on samas väga soovitav.
- Prax 4: andmebaasiga serverirakendus php-s. Tähtaeg 12-16 detsembri nädal, vastavalt sinu praktikumirühmale.
- Prax 5: (vabatahtlik) serverirakendus node.js abil. Mittekohustuslik. Tähtaeg 12-16 detsembri nädal, vastavalt sinu praktikumirühmale.
Kursuse edukaks läbimiseks peavad kõik kohustuslikud praktilised tööd - neli esimest - olema tehtud.
Lehtede kujundamise ja stiili osas lähtu sellest juhendist.
Vajalikud tööriistad
Oma arvutiga töö tegemiseks peab seal olema vähemalt
- Notepad++ või scite või brackets või sublime text või atom
- Mozilla Firefox ja Google Chrome
- Mozilla Firefoxi jaoks installi endale firebug plugin
- 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 piisab scp käsust)
Loengute teemad ja materjalid lugemiseks
Alltoodud teemad kaetakse igaüks ühe-kahe loenguga. Suur osa loengutest on pühendatud näidete läbitegemisele ning seletamisele, ette-programmeerimisele ja praktikumide osalisele realiseerimisele.
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:
- 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:
Javascripti põhioskused
Kaks loengut: (a) sissejuhatus (b) reaalne kasutamine brauseris (html ja css muutmine, evendid jne)
Vaata soenduseks/demoks Google kogutud näiteid.
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:
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
Veebirakenduse optimeerimine mobiilile
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:
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
Tutvumine kolmanda praktikumiga: ITV0110 3. töö: Serverirakendus: cgi pythonis. Praksi jaoks vajaliku koodi kirjutamise harjutamine (loengus etteprogrammeerimine).
Sealt leiad ka soovitused esmatutvuseks Pythoniga (praktikumi jaoks piisab kõige lihtsamatest Pythoni konstruktsioonidest ja cgi teegist, keerukamaid asju pole otseselt vaja):
- 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:
- teegi dokumentatsioonis.
- Kasulikke pythoni näitejuppe cgi jaoks
- mako templates: katsetame neid veidi loengus
Ajax ehk serveriga andmevahetus otse javascriptist
- Loe seotud tehnoloogiatest: wikipedia ajax, wikipedia xmlhttprequest, wikipedia json
- Vaata xmlhttprequest ja jsonile rakendatud eval näited
Lisaks võib abi olla:
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:
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
Seejärel installeeri enda arvutisse node.js ja alusta katsetamist:
- hea sissejuhatav tutorial
- järgmine ok tutorial
- hulk eri tutoriale mis vajavad installeerimist
Veebiserveri ehitusest ja konfigureerimisest
Kõigepealt tutvu või tuleta meelde http protokolli põhimõtteid:
Veebiserverist paremaks arusaamiseks tasub veidi eksperimenteerida pisikese veebiserveriga.
Enimkasutatav veebiserver Apache:
Apache konfigureerimisest: