Võrgurakendused I 2018

mootor

Ainekood: ITV0110 Link: http://www.lambda.ee/index.php/V%C3%B5rgurakendused_I ehk http://www.lambda.ee/index/itv0110 Punkte: 3.5 AP ehk 5 EAP Lektor: Tanel Tammet Kontakt: tammet@staff.ttu.ee, 6203457, TTÜ AK223 olemas on ka 2011 aasta arhiiv koos kõigi eelmise aasta materjalidega.

Aeg, koht, tulemus

Loenguid nädalas: 2 tundi (üks loeng) neljapäeviti 12:00-13:30 ruumis IV-103

Praktikume nädalas: 2 tundi (üks praktikum). Kui pole teisiti märgitud, toimuvad praktikumid:

• teisipäeval 10:00-11:30 ruumides IT-213A, IT-213B, IT-213E rühmadele IABB31, IABB32, IAPB31
• teisipäeval 14:00-15:30 ruumides IT-213A, IT-213B rühmadele IAPB32, IAPB33
• kolmapäeval 14.00-15:30 ruumis IT-213D rühmadele IABB37, IAPB37, IAPB38

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, 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. Iga töö annab 0-15 punkti. Hilinenud tööd annavad poole punktidest. 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.

• Html põhioskused. Tähtaeg 18/19. september. Kaugõppe tähtaeg 21. sept.
• CSS, javascript, veebiserver. Tähtaeg 16/17. oktoober. Kaugõppe tähtaeg 3. november.
• ITV0110 3. töö: Serverirakendus: cgi pythonis. Tähtaeg 20/21 november. Kaugõppe tähtaeg 1. detsember.

Viimase töö sisu ei ole veel uuendatud: 2012 aasta ülesanne on teistsugused, kuid kasutab samu tehnoloogiaid ja on sarnase keerukusega:

• Andmebaasiga serverirakendus. Tähtaeg 18/19. detsember. Kaugõppe tähtaeg on kontrolltöö aeg jaanuaris.

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

Lehtede kujundamise ja stiili osas lähtu 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.

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):

• w3schools html tutorial basic blokk.

Loe enne või sama-aegselt lisaks läbi ka

• Raggetti vanaaegne mikrotutorial algajatele ja selle teine osa
• Hea eestikeelne sissejuhatus Kaido Kikkaselt (html)

Keerulisemat:

• vana, siiani ametlik w3c standard
• tabelite osa ametlikust 4.01 standardist
• html entities osa1 ja osa2 ja utf-8 ja charseti seadmine
• !DOCTYPE prefix ja html vanade versioonide kuvamine
• html 5: w3c pooleli html 5 ja whatwg living html 5 ja w3schools tutorial
• Kasulik tagide nimistu: html 5 elementide perioodiline tabel
• html and xhtml ja html 5 ja html 5 split ja slashdot take ja kogu teema kokkuvõtlikult ja veel lühemalt
• 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:
  • display and visibility
  • positioning
  • float
  • image sprites: see on oluline praktikumitöös
• Väga kasulik abimaterjal on w3schoolsi css reference

Abiks on tutvuda heade tutorialidega järgmistel teemadel:

• centering div
• listikasutus ja sealtsamast listikasutuse tutorialid
• floats
• inline block
• 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:

• street view + knot
• pea
• terrain editor

CSS mobiilile:

• sissejuhatavaid punkte ja olulist
• css-i valik mobiilile ja sama teema selgitusteta
• navigeerimine ja menüüd

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:

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

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

• populaarsed teegid
• jquery javascripti teek
• twitter bootstrap css + javascript, widgetid jne

Praktilist teisest praktikumist

Kuidas ja kuhu faile serverisse üles laadida jms: loe 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 sellest lühiõpetusest ja täiendavalt selle tutoriali peatükkidest üks kuni viis. 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
• 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.

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

Python ja näiteid kasutamisest serverirakendustes

Tutvumine kolmanda praktikumiga: 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 tutoriali algust (keerulised andmestruktuurid, moodulite ja klasside värgi võid esialgu lugemata jätta)
• 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

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:

• hea esimene sissejuhatus
• w3schools'i tutorial
• mysql esmane tutorial ja mysql manuaal

SQL serverirakendustes

• Vaata lihtsaid php ja mysql näiteid loengust.
• mysql PHP-s: ppt
• mysql PHP-s: veebitutorial
• SQL injection vt ka seda ja seda ja seda
• w3schools PHP tutorial all vasakul Mysql blokk
• Vorgurakendused 1 SQL naited loengust

Sessioonid, cookied, sisselogimine, autentimine

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

Ajax

• Loe seotud tehnoloogiatest: wikipedia ajax, wikipedia xmlhttprequest, wikipedia json
• xmlhttprequest ja jsonile rakendatud eval näited

Vajalikud tööriistad

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

• Notepad++ või scite
• Mozilla Firefox või Google Chrome
• Mozilla Firefoxi kasutades installi endale firebug plugin

Veel lugemiseks

Üldist:

• Mitu head tutoriali eri teemadel
• suur kogu häid tutoriale, artikleid ja soovitusi
• Lisamaterjale kursusest Kasutajaliidesed võrgutehnoloogia baasil

HTML:

• Raggetti tutorial algajatele
• Kaido Kikkase hea eestikeelne sissejuhatus
• Innar Liivi hea eestikeelne sissejuhatus
• w3schools'i põhjalik html tutorial
• tore tagide nimistu
• HTML 4.01 ametlik standard
• HTML 5.0 ametlik draft

HTML+CSS+Javascript:

• First CSS intro
• w3schools'i css tutorial
• w3schools'i javascripti tutorial
• liquid layouts
• A list apart
• listikasutus
• Javascript, mashup ja ühe-lehe-sait sightsmap: http://www.sightsmap.com/

HTTP

• http wikipedias
• http://www.jmarshall.com/easy/http/
• T. Berners-Lee leiutatud esimene HTTP spec
• hea väike HTTP ja CGI tutorial
• headerite jms vaatamise veebiabivahend

CGI programmid serveris

• lihtne sissejuhatus cgi-desse
• cgi.pdf: detailsem juhend
• cgi esmane sissejuhatus Bashi näidetega
• cgi C keeles
• cgi Pythonis
• cgi Bashis
• 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:

• 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