Võrgurakendused I 2014
Ainekood: ITV0110 |
Sisukord
- 1 NB! See on 2014 aasta arhiiv, mitte hetkel kehtiv kursuse leht!
- 2 Kontrolltöö jaanuaris
- 3 Aeg, koht, tulemus
- 4 Kursuse eesmärk
- 5 Praktilised tööd
- 6 Leitud asju
- 7 Loengute plaan ja materjalid
- 7.1 HTML põhioskused
- 7.2 CSSi põhioskused
- 7.3 Javascripti põhioskused
- 7.4 Veebirakenduse optimeerimine mobiilile
- 7.5 Cgi töötlemine eri keeltes (C, python, bash, java, ...)
- 7.6 Python ja näiteid kasutamisest serverirakendustes
- 7.7 Ajax ehk serveriga andmevahetus otse javascriptist
- 7.8 node.js sissejuhatus
- 7.9 Veebiserveri ehitusest ja konfigureerimisest
- 7.10 Serverirakendused PHP-s, näited
- 7.11 SQL
- 7.12 SQL serverirakendustes
- 7.13 Sessioonid, cookied, sisselogimine, autentimine, web storage
- 8 Vajalikud tööriistad
NB! See on 2014 aasta arhiiv, mitte hetkel kehtiv kursuse leht!
Kontrolltöö jaanuaris
Kursuse tulemused peale kontrolltööd on siin tabelis (ainult kontrolltööl osalenute tulemused).
Tulbad: matriklinumber, initsiaalid, prax1, prax2, prax3, prax4, prax5, kontrolltöö, praksid kokku, kontrolltöö skaalal 0-40, punktisumma kokku, hinne.
Positiivse tulemuse eeldus on esimese kolme ja viimase praksi arvestamine ning kontrolltöö tulemus vähemalt 50 punkti 180-st. Kel need nõuded ei ole täidetud, on tulpades "kontrolltöö skaalal 0-40" ja "punktisumma kokku" väärtus 0; kel on täidetud, on kursus positiivse hindega lõpetatud.
Kuna tegemist on praktikumiainega, siis siin aines järeltöid ei ole ning ebaõnnestumise korral tuleb kursus sooritada 2015 sügisel; seejuures ei pea uuesti tegema juba arvestatud praktikume. Erandina võivad aprillis-mais esitada oma täiendatud praktikume ja teha uue kontrolltöö need tudengid, kes hakkavad 2014 kevadel ülikooli lõpetama: sel juhul tuleb näidata, et kevadine lõpetamine on reaalne; võta aprillis ühendust.
Aeg, koht, tulemus
Loenguid nädalas: 2 tundi (üks loeng) teisipäeviti 10:00-11:30 ruumis CYB - VEENUS
Praktikume nädalas: 2 tundi (üks praktikum). Praktikume juhendab Roger Kerse. Kui pole teisiti märgitud, toimuvad praktikumid:
- esmaspäeval 08:00-09:30 ruumis ICT-401 rühmadele IABB31, IABB32, IABB33
- teisipäeval 16:00-17:30 ruumis ICT-501 rühmadele IABB37, IAPB37, IATM11
- neljapäeval 10:00-11:30 ruumis ICT-501 rühmadele IAPB31, IAPB32
- reedel 08:00-09:30 ruumis ICT-501 rühmadele IAPB33, IAPB34, IAPB35
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
Lihtsamate veebirakenduste põhimõtted ja nende kirjutamise oskus nii brauseri kui serveri poolel. Konkreetsemalt:
- html-i kirjutamise oskus, esmane tutvus CSS-i ja javascriptiga.
- serveripoolse rakenduse kirjutamise põhimõtted,
- node.js kasutamise sissejuhatus serverirakendustes.
- cgi protokoll, erinevate keelte (sh shell, C, php, python, java, javascript) kasutamise sissejuhatus serverirakendustes
- pythoni ja php kasutamise esmased oskused.
- lihtsamad SQLi kasutamise oskused.
Kursusel eeldatakse elementaarsete programmeerimisoskuste olemasolu. Kes programmeerimisega üldse kokku puutunud ei ole või seda paralleelselt ei õpi, ei suuda kursust läbida.
Praktilised tööd
Kursusel on neli kohustuslikku praktilist ẗööd ja üks mittekohustuslik praktiline töö. Iga töö (sh mittekohustuslik 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 (näiteks kolmanda praksi teist poolt) ka hiljem, ilma pooli punkte kaotamata.
- Esimest ja teist praksi saab esitada veel novembris, aga detsembris neid enam vastu ei võeta. Kaugõppe tudengid saavad erandina esitada ka neid prakse detsembris.
- Alates kolmandast praksist saad oma tööd 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 arvestata. Kasutada võib nii klassi arvuteid kui oma arvutit, brauser ja operatsioonisüsteem on vabalt valitavad. Serverirakenduste tööde presenteerimiseks tuleb kasutada ülikooli serverit dijkstra.
Ülesanded:
- Html põhioskused. Tähtaeg 15-19 septembri nädal, vastavalt sinu praktikumirühmale. Detsembris seda praksi enam esitada ei saa. Kaugõppe tähtaeg 20. sept.
- CSS, javascript, veebiserver. Tähtaeg 6-10 oktoobri nädal, vastavalt sinu praktikumirühmale. Detsembris seda praksi enam esitada ei saa. Erandina need kes 28.11 praksis ennast kirja panid saavad kaitsta P. Järve juures ICT-501 5.12. Kaugõppe tähtaeg on 18. oktoober.
- Serverirakendus: cgi pythonis. Tähtaeg 10-14 novembri nädal. Kaugõppe tähtaeg on 29. november.
- Serverirakendus node.js abil. Mittekohustuslik. Tähtaeg lükkus edasi 1. detsembrini. Kaugõppe tähtaeg on 29. november
- Andmebaasiga serverirakendus php-s. Tähtaeg 18/19. detsember. Kaugõppe tähtaeg on kontrolltöö aeg jaanuaris.
Ainult kaugõppe jaoks eriajad detsember ja jaanuar:
- lisa-praksiaega laupäeval 13 detsembril kell 16 IT maja 4 või 5 korrusel
- detsembris võib kaugõpe esitada nii 1,2 kui 3 praksi mistahes päevastel aegadel
- jaanuaris saab kaugõpe esitada ainult 4. praksi peale kontrolltööd (kaks eri kuupäeva)
Kursuse edukaks läbimiseks peavad kõik kohustuslikud praktilised tööd olema tehtud.
Lehtede kujundamise ja stiili osas lähtu sellest juhendist.
Leitud asju
Vaata seda: http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/
Loengute plaan ja materjalid
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
Taustaks tasub
- meelde tuletada interneti baastehnoloogia IT sissejuhatusest: Itsissejuhatus10o08.pdf.
Loe ja proovi läbi (st vaja põhimõtted selgeks õppida):
Loe enne või sama-aegselt lisaks läbi ka
- Raggetti vanaaegne mikrotutorial algajatele ja selle teine osa
- Hea eestikeelne, samuti natuke vana sissejuhatus Kaido Kikkaselt (html)
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.
Keerulisemat:
- vana, siiani ametlik w3c standard
- html 5: w3c pooleli html 5 ja whatwg living html 5 ja w3schools tutorial
- tabelite osa ametlikust 4.01 standardist
- html entities osa1 ja osa2 ja utf-8 ja charseti seadmine
- !DOCTYPE prefix ja html vanade versioonide kuvamine
- Kasulik tagide nimistu: html 5 elementide perioodiline tabel
- html and xhtml ja html 5
- klassikaline salvestamine: cookie tutorial javascriptis
- html 5 web storage support
- html 5 indexed db lühidalt, support ja kuidas kasutada ja tutorial
- html 5 canvas
CSSi põhioskused
Lugeda ja proovida läbi (st vaja põhimõtted selgeks õppida):
- First CSS intro
- w3schools'i css tutorial: : kindlasti "basic", "styling" ja "box" blokid, huvi korral loe edasi (advanced jne) ka, kuid need viimased ei ole üleni kohustuslikud, välja arvatud järgmised eriti olulised osad advanced blokist:
- 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
- multilevel metal menu with icons pluss html/css alt muid häid css3 õpetusi
- 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. Keelt siit ei õpi!
- W3schools javascripti sissejuhatus: JS Basic ja JS Objects osad. Mõned asjad jäävad siin veidi ebaselgeks!
- 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 teeke
- populaarsed teegid
- jquery javascripti teek
- bootstrap css + javascript, widgetid jne
Veebirakenduse optimeerimine mobiilile
- sissejuhatavaid punkte ja olulist
- põhjalik checklist kogu värgist: kindlasti vaata, aga kõige selle tegemine on päris töömahukas ja ei ole praksis üldse nõutud.
Täiendavalt spetsiifilisematest teemadest:
- css-i valik mobiilile ja sama teema selgitusteta
- navigeerimine ja menüüd
- iOS nüansid
- optimeeri sujuvust: video
- interaktsiooni-animatsioonide teek
- 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:
- lihtne sissejuhatus cgi-desse
- cgi.pdf: detailsem juhend
- cgi C keeles
- Pythonis cgi programmeerimise tutoriali leiad siit
- cgi Pythonis
- 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
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).
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:
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.
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: ppt
- 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
- ok sessiooniõpetus
- 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.
Vajalikud tööriistad
Oma arvutiga töö tegemiseks peab seal olema vähemalt
- Notepad++ või scite või brackets
- Mozilla Firefox või Google Chrome
- Mozilla Firefoxi kasutades 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)