Võrgurakendused I 2011 - Redigeerimiste ajalugu

Tammet: Uus lehekülg: '

mootor Ainekood: ITV0110
Link: http://www.lambda.ee/index.php/V%C3%B5rgurakendused_I ehk http://www.lambda.ee/index/itv0...'
2012-09-03T21:20:24Z

Uus lehekülg: '<table> <tr> <td> left|mootor </td> <td> Ainekood: ITV0110<br> Link: http://www.lambda.ee/index.php/V%C3%B5rgurakendused_I ehk http://www.lambda.ee/index/itv0...'

Uus lehekülg
<table>
<tr>
<td>
[[Pilt:Engine.jpg|left|mootor]]
</td>
<td>
Ainekood: ITV0110<br>
Link: http://www.lambda.ee/index.php/V%C3%B5rgurakendused_I ehk http://www.lambda.ee/index/itv0110<br>
Punkte: 3.5 AP ehk 5 EAP<br>
Lektor: [http://tanel.tammet.googlepages.com Tanel Tammet]<br>
Kontakt: tammet@staff.ttu.ee, 6203457, TTÜ AK223<br>
olemas on ka [[Võrgurakendused_I 2010| 2010 aasta arhiiv]] koos kõigi eelmise aasta materjalidega.<br>
</td>
</tr>
</table>

= <font color="red"> See leht on varemloetud kursuse arhiiv, siin ei ole värsket informatsiooni! Otsi üles kursuse hetkel aktiivne leht. </font> =

== <font color="red">Järelkontrolltöö 2012 kevad</font> ==

Järelkontrolltöö: 25. mai (reede) kell 12.00-15.00, ruum II-102

NB! Palun ennast järelkontrolltööle ÕIS-s registreerida.

== Kursuse tulemused ==

* [[Võrgurakendused I parandatud tulemused 2012 mais]]
* [[Võrgurakendused I tulemused 2011 sügissemestriks]]

Tulemustega üldse mitte seotult: vaata cooli värsket projekti http://www.sightsmap.com, mis tekkis kaasnähtusena uurimis/arendusprojektile http://www.sightsplanner.com

== Kontrolltöö ajad ==

Kontrolltöö aegu on kaks:

* Laupäeval, 7 jaanuaril ruumis II-102 kell 11.00.
* Kolmapäeval, 18 jaanuaril ruumis VI-229 kell 10.00.

Sa võid ise valida, kas tulla 7 või 18 jaanuari kontrolltööle. Mõlemile tulla ei saa.

=== Kontrolltöö teemad ja arvestuse põhimõtted: ===

Kontrolltöö on kirjalik ning paberil, materjale kasutada
ei või.

Kontrolltöö edukaks läbimiseks peab kontrolltööst saama 40% maksimumpunktidest. Kursuse edukaks läbimiseks peab saama arvestatud kõik neli praktikumi, läbima edukalt kontrolltöö ja saama kokku 45% maksimumist.

Enne jõule ilmuvad prakside punktiseisud kursuse lehele.

Teemad vastavad neljale praksile pluss täiendavale
materjalile kursuse lõpus:

* HTML
* CSS ja Javascript
* Serverirakendused failidega, python.
* Serverirakendused andmebaasiga, PHP, SQL
* Täiendav: cookied, sessionid, ajax

Apache serveri konfimine, cgi eri keeltes (C, bash) jne teemaks ei tule. Kõik küsimused on praksidega seotud
tehnoloogiate teemadel.

Millised on küsimused ja ülesanded:

* Etteantud näidetest arusaamine: peab selgitama, mida näide teeb/kuidas kuvatakse.
* Väikeste etteantud koodijuppide täiendamine, et nad teeks nõutud asja.
* Päris ei ole välistatud ka mõne pisikese tervikülesande andmine.

Pigem on küsimusi rohkem ja lihtsamaid, mitte vähe ja suuri.

Ei ole vaja pähe õppida mitte-elementaarseid tage, css atribuute, javascripti funktsioonide nimesid, pythoni ja php funktsioonide nimesid, SQL täpset süntaksit.

Võimalikud variandid (nimedena) antakse kontrolltöös ette (kui on tegu ise kirjutamist vajava ülesandega), või siis (arusaamise ülesande korral) on nimed reeglina sellised, mis on tõenäoliselt meelde jäänud või on ise-selgitavad a la p, font-size, XmlHTTPRequest jne.

Igasuguseid süntaksi-hooletusvigu jne ei arvestata miinusena.

== Aeg, koht, tulemus ==

Loenguid nädalas: 2 tundi (üks loeng) teisipäeviti 16:00-17:30 ruumis VII-131

Praktikume nädalas: 2 tundi (üks praktikum). Kui pole teisiti märgitud, toimuvad praktikumid:
* kolmapäeval 10:00-11:30 ruumides IT-213E, IT-213I rühmadele IABB37, IAPB37 (Antti)
* neljapäeval 08:00-09:30 ruumides IT-213D, IT-213H rühmadele IABB31, IABB32, IAPB31, IAPB32 (Tanel)
* neljapäeval 14.00-15:30 ruumis IT-213D rühmale IAPB33 ja <font color="red">IAPB38</font> (Tanel)



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

Küsimuste küsimiseks ja omavaheliseks suhtlemiseks on avatud kursuse "Üldfoorum" aadressil:

https://moodle.e-ope.ee/mod/forum/view.php?id=200854

== 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, cgi protokoll, erinevate keelte (sh C, php, python, java) kasutamise sissejuhatus serverirakendustes.
* 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.

== Analoogilised kursused ==

TTÜ-s on sama kursust varem lugenud K. Kikkas (vt [http://akadeemia.kakupesa.net/arhiiv/VR1/loengud/ loengumaterjale]) ja I. Liiv (vt [http://innar.li.ttu.ee/index.php?option=displaypage&Itemid=55&op=page&SubMenu= praksimaterjale]), ITK-s luges analoogilist kursust esialgu T. Tammet (vt vanu [http://deepthought.ttu.ee/it/vorgutarkvara/wav3080/ materjale]), praegusajal loeb A. Andreimann (vt vabalt kättesaadavaid [http://enos.itcollege.ee/~aandreim/vr1/latest/ materjale]).

== Praktilised tööd ==

Praktilisi töid juhendavad esialgu Tanel ja Antti, hiljem võib lisanduda veel juhendajaid.

Kursusel on neli kohustuslikku praktilist ẗööd. Iga töö annab 0-15 punkti. <font color="red">Hilinenud tööd annavad poole punktidest.</font> Töid võib (ja on soovitav) esitada enne tähtaega.

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 jaoks on võimalik kasutada ülikooli serverit, soovi korral ka oma serverit.

<font color="red">NB!</font> Antti rühmadele IABB37, IAPB37 kehtivad erinõuded. [https://moodle.e-ope.ee/mod/page/view.php?id=200865 Loe siit ...]

Kaugõppele kehtivad teised tähtajad, kui alltoodud, vaata kaugõppe tähtaegu [[ITV0110 kaugõppe praktikumide tähtajad 2011|siit]].

* [[ITV0110 1. töö: Html põhioskused|Html põhioskused]]. Tähtaeg neljapäev, 15. september.
* [[ITV0110 2. töö: CSS, javascript, veebiserver]]. Tähtaeg neljapäev, 13. oktoober.
* [[ITV0110 3. töö: Lihtne serverirakendus: vormid ja cgi|Lihtne serverirakendus: vormid ja cgi]]. Tähtaeg neljapäev, <font color="red">24. november</font>.
* [[ITV0110 4. töö: Andmebaasiga serverakendus|Andmebaasiga serverirakendus]]. Tähtaeg neljapäev, 15. detsember.

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

Lehtede kujundamise ja stiili osas lähtu [[htmli kujunduse üldpõhimõtted| sellest juhendist]].

== 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.

; Sissejuhatus ja meeldetuletus

Tutvuda lühidalt:
:* Interneti baastehnoloogia IT sissejuhatusest: [[Media:Itsissejuhatus10o08.ppt|Itsissejuhatus10o08.ppt]], [[Media:Itsissejuhatus10o08.pdf|Itsissejuhatus10o08.pdf]].
:* [http://www.w3.org/MarkUp/Guide/ Raggetti mikrotutorial algajatele]
:* head eestikeelsed sissejuhatused [http://innar.li.ttu.ee/failid/VR_2006.pdf Innar Liivilt (pdf)] ja [http://akadeemia.kakupesa.net/arhiiv/VR1/loengud/loeng3 Kaido Kikkaselt (html)]
:* http://www.w3schools.com/.
:* http://www.w3c.org/.

; HTML põhioskused

Lugeda ja proovida läbi (st vaja põhimõtted selgeks õppida):
:* [http://www.w3schools.com/html/default.asp w3schools html tutorial basic blokk].
Loe lisaks läbi ka
:* [http://www.w3.org/MarkUp/Guide/Advanced.html Raggetti klassikaline tutorial, eeskätt tabelid]
:* [http://innar.li.ttu.ee/failid/VR_2006.pdf Innar Liivi sissejuhatus, eeskätt värvid ja pildid]
:* [http://www.w3.org/TR/html401/struct/tables.html täiendavat tabelitest ametlikust standardist]
Tutvu lisaks kasuliku tagide nimistuga:
:* [http://joshduck.com/periodic-table.html htmli elementide perioodiline tabel]

; CSS põhioskused

Lugeda ja proovida läbi (st vaja põhimõtted selgeks õppida):
* [http://www.w3.org/MarkUp/Guide/Style.html First CSS intro]
* [http://www.w3schools.com/css/ w3schools'i css tutorial]: : kindlasti "basic" ja "styling" blokid, huvi korral loe edasi ("box model", "advanced) ka, kuid need viimased ei ole kohustuslikud.
Tutvu lisaks listide+CSS-i kasutamisega menüüde jms jaoks:
* [http://css.maxdesign.com.au/listamatic/ listikasutus] ja sealtsamast [http://css.maxdesign.com.au/listutorial/index.htm listikasutuse tutorialid]

; Javascript põhioskused

Kaks loengut: (a) sissejuhatus (b) reaalne kasutamine brauseris (html ja css muutmine, evendid jne)

Vaata soenduseks/demoks [http://www.chromeexperiments.com/ Google kogutud näiteid].

Seejärel loe läbi ja proovi järgi selles järjekorras:
* [http://en.wikipedia.org/wiki/JavaScript Wikipedia javascripti üldartikkel]: ülevaade, ajalugu jne. Keelt siit ei õpi!
* [http://www.w3schools.com/js/default.asp W3schools javascripti sissejuhatus]: JS Basic ja JS Objects osad. Mõned asjad jäävad siin veidi ebaselgeks!
* [http://en.wikipedia.org/wiki/JavaScript_syntax 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

* [http://www.w3schools.com/js/js_ex_dom.asp html dom objektid]: põhiasjad
* [http://www.tizag.com/javascriptT/javascriptform.php form validation]: klassikaline rakendus
* [http://www.w3schools.com/js/js_ex_browser.asp brauseriobjektid]: vahel kah kasulikud

ja tingimata lugeda sinna juurde teegijuhendeid:

* [http://www.w3schools.com/jsref/dom_obj_all.asp html dom ülevaadet]
* [http://www.w3schools.com/jsref/dom_obj_event.asp html events ülevaadet]
* [http://www.w3schools.com/jsref/dom_obj_style.asp style lugemine/muutmine js-s: hädavajalik reference]

; Praktilist teisest praktikumist

Kuidas ja kuhu faile serverisse üles laadida jms: loe [[ITV0110 2. töö: CSS, javascript, veebiserver| teise praktikumi materjalidest]]

; 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]]

Tutvu linuxi shelli elementaarsete käskudega [http://www.tuxfiles.org/linuxhelp/linuxcommands.html sellest lühiõpetusest] ja täiendavalt [http://info.ee.surrey.ac.uk/Teaching/Unix/ selle tutoriali] peatükkidest üks kuni viis. Iga käsu juures on abiks man, näiteks <tt>man ls</tt>. Huvi korral googelda lisaks.

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

* [http://www.jmarshall.com/easy/cgi/ lihtne sissejuhatus cgi-desse]
* [[Media:cgi.pdf|cgi.pdf: detailsem juhend]]
* [http://www.cs.tut.fi/~jkorpela/forms/cgic.html cgi C keeles]
* [http://webpython.codepoint.net/cgi_tutorial cgi Pythonis]
* [http://www.yolinux.com/TUTORIALS/BashShellCgi.html cgi Bashis]

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

Cgi jaoks on olemas ka nö [http://www.rfc-editor.org/rfc/rfc3875.txt rfc-standard], mille lugemine on aga pisut vaevarikas (nagu enamikel standarditel) ja üldjuhul on praktilisem lugeda hoopis ülaltoodud õpetusi ja vaadata
näiteid.

; Veebiserveri ehitusest ja konfigureerimisest

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

* [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol http wikipedias]
* [http://www.jmarshall.com/easy/http/ veel http-st]
* [http://www.factini.com/c/httpViewer/ headerite jms vaatamise veebiabivahend]

Veebiserverist paremaks arusaamiseks tasub veidi eksperimenteerida [[Media:Itsissejuhatus_tiny.zip|pisikese veebiserveriga]].

Enimkasutatav veebiserver Apache:

* [http://httpd.apache.org/ apache oma koduleht]
* [http://en.wikipedia.org/wiki/Apache_HTTP_Server wikipedia apachest]
* [http://news.netcraft.com/archives/category/web-server-survey/ veebiserverite kasutusstatistikat]

Apache konfigureerimisest:

* [http://www.jlk.net/apache/beginners.shtml sissejuhatus algajatele]
* [http://httpd.apache.org/docs/2.2/ ametlik juhend]

; Python ja näiteid kasutamisest serverirakendustes

Tutvumine kolmanda praktikumiga: [[ITV0110 3. töö: Lihtne serverirakendus: vormid ja cgi|vormid ja cgi]]. 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 [http://docs.python.org/tutorial/ tutoriali] algust (keerulised andmestruktuurid, moodulite ja klasside värgi võid esialgu lugemata jätta)
* lisaks [http://docs.python.org/library/cgi.html 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!
* Paljud kasulikud asjad on kirjas Pythoni [http://docs.python.org/library/index.html#library-index teegi dokumentatsioonis].
* [[Kasulikke pythoni näitejuppe cgi jaoks]]
* Konkreetsete küsimuste korral aitab tihti googeldamine.

; Serverirakendused PHP-s, näited

* Väikese ajaloolise ülevaate leiad [http://en.wikipedia.org/wiki/PHP wikipeediast]
* Põhiõpetus on [http://www.php.net/manual/en/ php oma saidil]: loe sealt kõigepealt [http://www.php.net/manual/en/tutorial.php sissejuhatavat tutoriali]
* [http://w3schools.com/php/default.asp W3school-si php tutorial] on samuti päris OK.

; SQL

Loe selles järjekorras:

* [http://web.njit.edu/~song/courses/is698/SQL_tutorials.ppt hea esimene sissejuhatus]
* [http://www.w3schools.com/sql/default.asp w3schools'i tutorial]
* [http://dev.mysql.com/doc/refman/5.0/en/tutorial.html mysql esmane tutorial] ja [http://dev.mysql.com/doc/refman/5.0/en/index.html mysql manuaal]

; SQL serverirakendustes

* Vaata [[lihtsaid php ja mysql näiteid]] loengust.
* [http://dmsa.concordia.ca/tutorial_files/shortsql.ppt mysql PHP-s: ppt]
* [http://www.tizag.com/mysqlTutorial/ mysql PHP-s: veebitutorial]
* [http://blogs.techrepublic.com.com/security/?p=2368 SQL injection] vt ka [http://lh6.ggpht.com/_5YF7KQZuZS0/S6dvFXu5OoI/AAAAAAAACWM/qTcVpMxcDnA/licence%20plate%20camera%20sql%20injection_2%5B3%5D.jpg?imgmax=800 seda] ja [http://www.schneier.com/blog/archives/2010/10/pen-and-paper_s.html seda] ja [http://alicebobandmallory.com/articles/2010/09/23/did-little-bobby-tables-migrate-to-sweden seda]
* [http://www.w3schools.com/php/default.asp w3schools PHP tutorial all vasakul Mysql blokk]
* [[Vorgurakendused 1 SQL naited loengust]]

; Sessioonid, cookied, sisselogimine, autentimine

Mõned lingid:

* basic authentication [http://en.wikipedia.org/wiki/Basic_access_authentication wikipedias], [http://httpd.apache.org/docs/2.0/howto/auth.html apache manuaalis] ja [[basic authentication näited]]
* cookie [http://en.wikipedia.org/wiki/HTTP_cookie wikipedias], php cookie handling [http://w3schools.com/PHP/php_cookies.asp w3schools-st] ja [http://www.php.net/manual/en/function.setcookie.php php manuaalist]
* [http://oreilly.com/catalog/webdbapps/chapter/ch08.html ok sessiooniõpetus]
* php sessioonihandling [http://w3schools.com/PHP/php_sessions.asp w3schools] ja siit [http://ee.php.net/manual/en/book.session.php php mahukas sessiooni-manuaal] ja siit [http://www.tizag.com/phpT/phpsessions.php eraldi tutorial]
* väike [http://www.secologic.org/downloads/web/051123_eurosec_course_material_on_web_application_session_management.ppt ok sessioonihalduse tutorial]
* [[autentimise näide php sessiooniga]]

; Ajax

* Loe seotud tehnoloogiatest: [http://en.wikipedia.org/wiki/Ajax_%28programming%29 wikipedia ajax], [http://en.wikipedia.org/wiki/XMLHttpRequest wikipedia xmlhttprequest], [http://en.wikipedia.org/wiki/JSON wikipedia json]
* [[xmlhttprequest ja jsonile rakendatud eval näited]]

== Vajalikud tööriistad ==

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

* [http://notepad-plus-plus.org/ Notepad++] või scite.
* [http://www.mozilla.com Mozilla Firefox]

== Lugemismaterjale ==

Üldist:

* [http://www.w3schools.com/ Mitu head tutoriali eri teemadel]
* [http://www.websitetips.com/ suur kogu häid tutoriale, artikleid ja soovitusi]
* Lisamaterjale kursusest [[Kasutajaliidesed võrgutehnoloogia baasil]]

HTML:

* [http://www.w3.org/MarkUp/Guide/ Raggetti tutorial algajatele]
* [http://akadeemia.kakupesa.net/arhiiv/VR1/loengud/loeng3 Kaido Kikkase hea eestikeelne sissejuhatus]
* [http://innar.li.ttu.ee/failid/VR_2006.pdf Innar Liivi hea eestikeelne sissejuhatus]
* [http://www.w3schools.com/html/ w3schools'i põhjalik html tutorial]
* [http://joshduck.com/periodic-table.html tore tagide nimistu]
* [http://www.w3.org/TR/html4/ HTML 4.01 ametlik standard]
* [http://www.w3.org/TR/html5/ HTML 5.0 ametlik draft]

HTML+CSS+Javascript:

* [http://www.w3.org/MarkUp/Guide/Style.html First CSS intro]
* [http://www.w3schools.com/css/ w3schools'i css tutorial]
* [http://www.w3schools.com/js/ w3schools'i javascripti tutorial]

* [http://www.alistapart.com/ A list apart]
* [http://css.maxdesign.com.au/listamatic/ listikasutus]
* Javascript, mashup ja ühe-lehe-sait sightsmap: http://www.sightsmap.com/

HTTP

* [http://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol http wikipedias]
* http://www.jmarshall.com/easy/http/
* [http://www.w3.org/Protocols/HTTP/AsImplemented.html T. Berners-Lee leiutatud esimene HTTP spec]
* [http://www.garshol.priv.no/download/text/http-tut.html hea väike HTTP ja CGI tutorial]
* [http://www.factini.com/c/httpViewer/ headerite jms vaatamise veebiabivahend]

CGI programmid serveris

* [http://www.jmarshall.com/easy/cgi/ lihtne sissejuhatus cgi-desse]
* [[Media:cgi.pdf|cgi.pdf: detailsem juhend]]
* [http://www.whizkidtech.redprince.net/cgi-bin/tutorial cgi esmane sissejuhatus Bashi näidetega]
* [http://www.cs.tut.fi/~jkorpela/forms/cgic.html cgi C keeles]
* [http://webpython.codepoint.net/cgi_tutorial cgi Pythonis]
* [http://www.yolinux.com/TUTORIALS/BashShellCgi.html cgi Bashis]
* [[Media:Itsissejuhatus_tiny.zip|Tiny www server]] ja [[lihtsaid cgi programminäiteid]]

PHP ja MySQL

* http://www.php.net/ sh http://www.php.net/tut.php või http://www.php.net/manual/en/tutorial.php
* http://www.mysql.org, alustuseks http://dev.mysql.com/doc/refman/5.1/en/tutorial.html

Veebiserverid:

* [[Media:Itsissejuhatus_tiny.zip|Tiny www server]] ja [[lihtsaid cgi programminäiteid]]
* http://www.devside.net/guides/windows/apache
* http://net.tutsplus.com/tutorials/php/how-to-setup-a-dedicated-web-server-for-free/
* http://www.yolinux.com/TUTORIALS/LinuxTutorialWebSiteConfig.html
* [[lisainfox]]

[[Category:Kursus]]