ITV0110 2. töö: CSS, javascript, veebiserver

Rakenduse ülevaade

Sinu ülesandeks on kirjutada brauseris jooksev, javascripti ja css-i peale ehitatud ülilihtne kahe inimese täringumäng pig, täpsemalt selle "basic rules" variant. Loe kõigepealt läbi ülevaade wikipediast ja vaata tausta mõttes lisaks optimaalset programmi ja kogumikku artikleid.

Ühe mängija asemel mängib sinu programmis arvuti, st programmi kasutaja mängib arvuti vastu. Optimaalne mängustrateegia on suhteliselt keeruline (sellest saab lugeda viidatud artiklitest), sestap piisab, kui arvuti mängib lihtsa mitteoptimaalse põhimõttega:

• kui 100 punkti on juba täis, siis katkesta kohe.
• muidu võta alati täis 20 punkti ja siis anna käik vastasele

Kogu materjal - html, css, javascript ja pildid - tuleb riputada serverisse. TTÜ serveri (dijkstra) kasutamiseks registreeri loengus/praksis õppejõu juures oma matriklinumber: täpsemalt loe altpoolt. Soovi korral võid kasutada ka mõnda muud serverit, kuid siis pead saama seal järgmistes praksides kasutada pythonit, php-d ja mysql-i.

Nõuded kasutajaliidesele

Mängu alustamiseks peab kasutaja sisestama vormile eraldi väljadele oma nime ja emaili ja mängupandava summa suuruse ning vajutama "Alusta" nuppu. Kui need väljad ei ole täidetud mõistliku sisuga, mängu alustada ei lubata (seda pead kontrollima javascriptiga). Täitmata/valesti täidetud väljade korral tuleb osutada, mis/kus on valesti, värvida sisendvälja taust erivärvi ja anda sinna fookus.

"Alusta" nupule vajutamise korral kuvatakse mängu põhileht, kus nime/emaili vormi enam pole. Väljadele sisestatud teksti mängus ei kasutata, see on niisama "dummy".

Mängu käigus pead sa:

• Kuvama alati selge info, kelle käik parajasti on ning mis on mängu seis.
• Esitama seisu alati nii numbriliselt kui graafiliselt kahe riba/postiga, mis kumbki näitab ühe mängija seisu (vahemikus 0-100)
• Iga täringuveeretuse järel tuleb kuvada graafiliselt täringukülg (otsi veebist täringukülgede pilte või joonista soovi korral ise).
• Arvuti täringuveeretused peavad võtma mõistliku aja, et neid oleks võimalik jälgida (ca 1 sekund või rohkem).
• Mängija käigu korral peavad tal olema selgelt nähtavad kaks nuppu: veereta ja katkesta.
• Kui ei ole parjasti mängija käik, siis ei tule neid nuppe näidata (või näidata "hallilt" vms).
• Info paigutus ekraanil peab olema stabiilne, tekst/nupud ei tohi hüpata vahel ühte, vahel teise kohta.

Tehnoloogianõuded

Kasutajainfo vorm peab olema ühel html lehel ja mängu põhileht teisel html lehel - ilma freimide ja ifreimideta. Html lehed võivad kasutada sisselaetavaid css ja javascripti faile ja pilte.

Kogu rakendus peab kasutama ainult html+css+javascripti ja olema üles laetud serverisse staatiliste lehtedena. Flashi, java jms tehnoloogiate kasutamine on keelatud.

CSS-i harjutamise eesmärgil tuleb vältida kujunduslikke html tage (font, b, center, h1...h6, table jne) ja teha kujundus puhtalt CSS-ga. Elementaarsed tagid nagu p ja br ning head, script, body jms on ok. Vormi tagid (form, input, button jne) on hädavajalikud. Põhiliselt soovitav kasutada id-de ja class-dega varustatud div ja span tage.

Dijkstra server

Kodutööde tarbeks on kasutusel server nimega dijkstra (see keeruline nimi on ühe tuntud arvutiteaduse teerajaja nimi ja keeruline seepärast, et see nimi teile paremini meelde jääks).

Ligipääs

Dijkstrasse sisselogimiseks on vaja end registreerida: kirjutada loengus/praksis registreerimispaberile oma nimi ja matriklinumber.

Sisselogimine

Sisselogimiseks kasutatakse SSL ühendust ehk siis maakeeli programmi putty (Windows) või ssh (Linux). Tegemist on siis käsurealigipääsuga Linuxipõhisele serverile.

• Teie kasutajanimi ja parool: TTÜ arvutiklasside kasutaja + parool
• Dijkstra aadress: dijkstra.cs.ttu.ee

Failide laadimine

Failide laadimiseks sinna kasutage SFTP protokolli. Üks võimalikest programmidest, mis seda toetab on näiteks Filezilla.

Keskkonna ettevalmistamine

Kõik asjad, mis paigutate oma dijkstra kodukataloogi alamkataloogi "public_html", on veebis nähtavad. See kataloog tuleb kõigepealt luua:

$mkdir public_html

("$" rea alguses tähistab nüüd ja edaspidi Linuxi käsurealt antavaid käske (enamus praeguse näite failioperatsioonidest peaks olema tehtavad ka SFTP graafilise liidese alt). Linuxi käsurea kasutamist tuleb uurida omal käel. Käsurea saamiseks tuleks üle SSH ühenduse dijkstra käsureale logida (ssh või putty vms) )

Kui kataloog on olemas, suunake oma brauser dijkstra aadressile, mille saate kui lisate serveri nime järgi tudengikoodi (näiteks sedasi, aga asendage oma tudengikood ära): http://dijkstra.cs.ttu.ee/~t0XXX/

Kui kõik töötab õigesti, peaksite nägema kataloogi nimistut, mis on tühi, sest te pole sinna faile pannud. Tekitage index.html nimeline fail ja kontrollige, et see hakkab endist tühja kataloogilistingut asendama. Rakenduse html-failid võite panna sinnasamasse public_html alla.

Failiõiguste probleemid

Juhul, kui te kataloogi või oma index.html sisu ei näe, kontrollige, et nii teie kodukataloog kui public_html kuuluksid grupile "tudengid" ja et sellel grupil oleks nii lugemis-kui kataloogisisu vaatamise pääsuõigused. Samuti peab tudengigrupil olema võimalus lugeda kõiki veebi ülesminevaid faile.

Kataloogile lugemis-ja nimekirjanäitamise õiguse andmine:

$chmod  g+rx public_html

Failile lugemisõiguse andmine:

$chmod g+r index.html