ITI0205 2020 1 iseseisev töö

Veebirakendused esimene praktikumitöö:HTML veebisait

Esimese praktikumi ülesanne on teha väike veebisait iseenda kohta.

Ehk minimaalselt peab esimeses praktikumitöö:

• Kokku vähemalt viis lingitud lehte.
• Igal lehel menüü ja pealkiri.
• Vähemalt viis pilti, mis on su enda tehtud (fotod või joonistatud).
• Vähemalt üks enda joonistatud pilt.
• Tabel mingi sisulise sinuga seotud infoga.
• Sama tabeli päis taustavärviga.
• Üks leht taustavärviga.
• Üks leht taustapildiga.
• Vähemalt ühel lehel muudetud värvidega (mitte vaikimisi sinine) lingid.
• Kasutatud välist CSS stiilifaili.
• Sinu lehed peavad olema näha dijkstra serveris aadressil http://turing.cs.ttu.ee/~Eesnimi.Perenimi/prax1/ kus Eesnimi.Perenimi on sinu kasutajatunnus arvutiklassides (suued/väikesed tähed õigesti, kui on lisanumbreid vms, siis need ka

Praktikumitöö hindamine

Kirjuta mõnele lehele selgelt nähtavalt oma nimi ja matriklinumber, siis leiab praksijuhendaja need üles ja ei pea küsima.

Esimese praksi eest saad - kui kõik osad tehtud - alati täispunktid, v.a. juhul, kui esitamisega hiljaks jääd (siis saad ainult pooled punktid). Kui mõned nõutud osad on puudu, siis suunab juhendaja sind lihtsalt neid lisama ja ei võta enne praksi vastu.

Kuidas teha?

Lehti tehes pead tingimata kasutama kõiki alltoodud tehnoloogiaid ja tegema ära kõik nõutud osad: sisuline eesmärk praktikumil on õppida neidsamu baastehnoloogiaid (reavahed, pealkirjad, lingid, värvid, tabelid, pildid jms) kasutama ja oma faile serverisse üles laadima.

Kui oled varem teinud veebilehti, siis oskad sel juhul ülesande väga ruttu valmis saada. Igati sobiv ja soovitav on lehtedele lisada muid mõistlikke ja huvitavaid asju ka omal initsiatiivil.

Lehed tuleb luua hariliku teksti(programmeerimis)redaktoriga, mitte puhtalt visuaalse redaktoriga.

Esitamisel peab oskama juhendajale seletada, mida konkreetsed htmli markupi osad sinu lehel teevad ja miks nad seal on. Sulle arusaamatuid HTMLi elemente ei tohi kasutada (st enne kasutamist tuleb nendega mõne htmli õppematerjali abil tutvuda!). Javascript on lubatud (vaja seda siin praksis ei ole!), aga ainult juhul, kui oskad seletada, kuidas nad täpselt töötavad.

Lehed tuleb pärast oma arvutis valmistegemist laadida turing.cs.ttu.ee serverisse alamkataloogi public_html/prax1: põhjalik õpetus selleks on siin lehel lõpupoole. Sinu leht peaks paistma siis niimoodi: http://turing.cs.ttu.ee/~<minu-uni-id>/prax1/index.html kus kataloog prax1 tuleb ise teha ja index.html on pea-lehekülje failinimi. index.html asemel võib urlis lihtsalt öelda kataloogi, niimoodi: http://turing.cs.ttu.ee/~<minu-uni-id>/prax1/

Soovitav on teha lehed järgmiste etappidena ja oma arvutis (mitte kohe serveris), kuid esitada tuleb töö tervikuna, st kui kõik etapid valmis ja serverisse laetud.

Kui soovid lehti kenamaks teha (ei ole selles ülesandes veel kohustuslik), siis on hea mõte järgida neid soovitusi.

Esimene etapp

Kirjuta tekstiredaktoriga 5 html lehte, mis on omavahel lingitud ja sisaldavad infot sinu enda kohta (kõik ei pea olema tõene info!). Pealehel olgu mh menüü, näiteks: Minust, Sõbrad, Lingid, Hobid jne.

Igal lehel on minimaalselt pealkiri ja sisu, kusjuures sisu peab olema "tõene", s.t. võib olla väljamõeldud aga ei tohi koosneda placeholder-tekstidest.

Kuidas kõige mugavam on menüü teha leiab näiteks siit: https://www.w3schools.com/css/css_navbar.asp

Teine etapp

Joonista mõne graafikaprogrammiga 5 pilti (mõned neist võivad olla ka sinu enda tehtud fotod, osad peavad aga olema joonistatud), salvestage neist osad PNG või GIF ja osad JPEG formaati ning lisage nad koduleheküljele eelmisest ülesandest (5 html lehte, omavahel lingitud). Kõigil lehtedel olgu siis mõni ise joonistatud/pildistatud PNG või GIF või JPEG formaatides pilt.

Neile lehtedele tuleb järgmisena panna osadele taustavärv ning osadele taustapildid. Samuti tuleb ära muuta tavaliste ning külastatud linkide värvid (vaikimisi on need üldiselt sinised ning lillad) muutes nad endale meeldivaks.

Kolmas etapp

Tee alltoodud sorti tabel, kasuta tabeli päises taustavärve ja püüa tõepoolest süveneda tabeli tegemise põhimõtetesse (mitte lihtsalt copy-paste kuskilt näite järgi), sest sul on kindlasti vaja oskust tabeli html-teksti käsitsi parandada.

Tabeli sisu peab olema reaalne või väljamõeldud info sinu enda või mingite sinu lemmikasjade kohta.

Nr  Nimi             Matemaatika    Inglise keel
1   Aleksei Matiisen 95             77
2   Lea Kuusik   88             99
3   Leo Roost    32             83
4   Tarmo Eessaar    100            100

Neljas etapp

Riputa kõik oma saidi failid ja pildid dijkstra serverisse üles. Kõigepealt kopeeri lihtsalt üks fail (näiteks nimega leht.html) serverisse katseks otse public_html kataloogi, ja vaata brauserist, kas näed seda aadressilt http://turing.cs.ttu.ee/~<minu-uni-id>/prax1/ kus Eesnimi.Perenimi on sinu arvutiklasside kasutaja kasutajatunnus: seal võib veel lisaks olla igasugu numbreid vms,

Tilde ~ peab ees olema ja väiketähed/suured tähed peavad olema täpselt nii, nagu kasutajatunnuses on.

Kui OK, siis tee public_html alla alamkataloog prax1 ja pane kõik lehed ja pildid otse selle alla. Põhileht peaks olema nimega index.html, siis töötab ka lihtsalt kataloogi-url http://turing.cs.ttu.ee/~<minu-uni-id>/prax1/

Dijkstrasse riputamise detaile vaata siin lehelt lõpupoole olevast õpetusest. Sisuliselt samamoodi toimub mistahes linuxiserverisse ülesriputamine.

Soovitusi

Failid ja neile viitamine

Failid pane mistahes kataloogi oma masinas. Kõige lihtsam on hoida kõik failid ühes kataloogis ja viidata neile nii: <a href="minufail.html">minu link</a>. Seepeale püüab brauser leida faili minufail.html samast kataloogist kus sisselaetud fail. Kui oled mõne lehe pannud aga näiteks alamkataloogi nimega alam, siis viita talle nii: <a href="alam/minufail.html">minu link</a> kus kaldkriips peab olema tõusev. Seepeale otsitakse sisselaetud faili kataloogist alamkataloogi alam ja sealt juba faili minufail.html.

Kuna sinu failid on enda uni-id alamkataloogis prax1 siis selleks et mitte pikkasid linke välja kirjutada on juhul kui lingid ei tööta mõistlik kasutada <base> tag-i.

Tähestiku kodeering

Tähestiku kodeeringu osas pane tähele järgmist:

• latin1 ehk iso-8859-1 sobib enamuse euroopa tähtede jaoks, aga näiteks läti ja vene tähti seal kodeerida ei saa.
• utf-8 on universaalne kodeering, mis sobib kõigi tähestike jaoks.
• peale universaalse utf-8 ja euroopa standard-iso-8859-1 on olemas veel suur hulk muid kodeeringuid eri tähestike jaoks: nende asemel on aga praktilisem kasutada utf-8
• redaktoris saad seada, et mis kodeeringus redaktor täpitähti salvestab: näiteks scites otsi menüüst File->Encoding ja sealt vali kas "code page property" (see teeb üldjuhul latin1 ehk iso-8859-1) või utf-8 (see teeb siis muidugi utf-8)
• kui sa ei ütle <head> ... </head> sees, mis tähestiku-kodeering html-s on, arvab brauser tüüpiliselt ise, et küllap on see nn latin1 ehk iso-8859-1.
• brauserile saab konkreetse tähestiku öelda, kui teed oma lehel struktuuri, kus oluline osa tähestiku jaoks on charset=UTF-8 (selle asemel võid vajaduse järgi kasutada siis näiteks iso-8859-1 vms):

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head
<body>
...
</body>
</html>

CSS

CSS-i osas tasub arvestada, et ära kasuta inline-stiile. Neid on keeruline hallata.

Välise stiilifaili saad linkida oma lehtedele <link rel="stylesheet" type="text/css" href="stiil.css">

Server koduste tööde esitamiseks

Kodutööde tarbeks on kasutusel server nimega dijkstra: kõik kodutööd tuleb sinna üles panna, kasutades seejuures alamkatalooge prax1, prax2, jne vastavalt praksi numbrile: iga praks oleks omaette alamkataloogis. Niisama esialgu katsetamiseks ei ole alamkatalooge vaja, need on vajalikud õppejõududele, et sinu kood scriptide abil automaatselt üles leida. Põhileht/avaleht olgu nimega index.html, siis töötab otse kataloogi-url ilma failinimeta.

Enne failide serverisse riputamist on mõistlik teha kogu süsteem - või enamus - valmis lihtsalt oma arvutis/arvutiklassi arvutis.

Ligipääs

Dijkstrasse sisselogimiseks on sul vaja omada TTÜ arvutiklasside klasside kontot kujul Eesnimi.Perenimi (siin võib tekkida probleem täpitähtede, tühikutega jne).

Kui sul ei ole kasutajatunnust või oled parooli kaotanud, saad selle lasta teha arvutiklasside administraatorite juures. Teine variant on kasutada portaali https://pass.ttu.ee : logid sinna sisse id-kaardi või mobiiliga ja saad ise parooli muuta.

Programmid failide kopeerimiseks serverisse

Failide kopeerimiseks serverisse kasuta windowsil programme winscp või Filezilla. Linuxist ja Macist kopeerimiseks kasuta käsurea programmi scp.

Arvutiklassides leiad Winscp "Application catalog" programmi jaotusest "terminals": sealt saad ta installeerida. Alternatiivina saab Winscp ja Putty lihtsalt veebist alla laadida ja ilma eri-installeerimiseta käivitada: paki zip kataloog lahti ja võta exe välja.

Winscp esmakordsel käivitamisel vajuta "New" ja täida host (turing.cs.ttu.ee) ja kasutajanime ning parooli väljad, muid asju pole vaja seada. Ülevalt kastist "File protocol" peaks olema valitud SFTP, see on tõenäoliselt kohe vaikimisi valik.

Winscp kasutamise juures tasub teda veidi mugavamaks sättida: * Options->preferences menüü alt mine Environment/interface ja vali "Commander", siis tekib kahe alamaknaga kasutajaliides, kus ühes on sinu masin ja teises server: nii on mugavam faile kopeerida. * Options->preferences menüü alt mine "Editors", vajuta "add", vali oma progeredaktor (otsi näiteks C:Files(86) alt Notepad++ ja nihuta ta seejärel samal lehel tabelis päris üles (vali tabelist tema rida ja vajuta "up" kuni lõpuni): siis saad sellesama redaktoriga oma masinast otse redigeerida serveris olevaid faile (katsetatud scite ja notepad++ ja bracketsiga, töötab). * Options->preferences menüü alt mine Integration/applications ja vali sealt "Browse" abil oma masinast putty.exe (täispath) ja sea "Remember password ..." peale: siis saad winscp tööriistariba keskel oleva väikese putty ikooni abil otse putty käivitada ja seal piisab siis ainult kasutajanimest. * Session menüü alt tee "Save session" ja checki "Save password", siis on edaspidi serverisse logimine lihtsam: ei pea uuesti sisestama kasutajanime ega parooli.

Need muutused käivituvad - vist - alles peale winscp taaskäivitamist.

Lisaks on täiesti OK - aga keerulisem - variant windowsil kasutada putty-ga komplektis olevat DOS-i käsurea programmi pscp.exe näiteks nii (loomulikult pead oma failide, programmide asukohad ja nime ära muutma):

 F:\Lectures\Vorgurak1\Cgilect>c:\Users\tanel\Desktop\pscp tst1.html tammet@turing.cs.ttu.ee:public_html/
 F:\Lectures\Vorgurak1\Cgilect>c:\Users\tanel\Desktop\pscp * tammet@turing.cs.ttu.ee:public_html/

Veebikeskkonna ettevalmistamine ja failide üleslaadimine

Kõik asjad, mis paigutad oma dijkstra kodukataloogi alamkataloogi public_html, on veebis nähtavad. See kataloog peaks olema sulle juba ette valmis tehtud.

Tekita algul prooviks otse public_html alla katse.html nimeline fail ja vaata, kas brauserist avaneb

http://turing.cs.ttu.ee/~Eesnimi.Perenimi/katse.html

Kui ei avane, on võimalik, et sul on vaja muuta katse.html failiõigusi, nagu edaspidises kirjas. Üldiselt aga winscp-ga üles laadides on failiõigused kohe OK ja neid muutma ei pea.

Nüüd loo public_html alla kataloog prax1:

• Winscp abil kasuta serveriaknas kataloogi-ikooni tärnikesega üleval paremal: create directory (F7). Seejuures peaksid vaikimisi failiõigused olema kohe OK ja neid seadma ei pea. Oluline, et "Set permissions" all oleks Owneri järel RWX linnukesed, Group ja Others järel R X linnukesed.
• Kui sa winscp-d ei kasuta, siis käsurealt sisse logides tee mkdir public_html/prax1 ja sea failiõigused, nagu järgnevas räägitud.

Seejärel pane oma rakenduse failid otse sinnasamasse prax1 alla, kasutades failinimesid, mis eelpool nõutud (index.html pealeht, muud lehed enda valikul).

Kui kataloog on olemas ja sinna mõned faili pandud, suunake oma brauser dijkstra aadressile, mille saate, kui lisate serveri nime järgi tilde ja kasutajanime ja siis kataloogi või faili, mis olete pannud public_html alla (näiteks sedasi, aga asendage oma kasutajanimi ära):

http://turing.cs.ttu.ee/_{Eesnimi.Perenimi/index.html või http://turing.cs.ttu.ee/}Eesnimi.Perenimi/prax1/index.html või http://turing.cs.ttu.ee/~Eesnimi.Perenimi/prax1/

Idee selles, et urlis http://turing.cs.ttu.ee/~Eesnimi.Perenimi/ järel tulevad failid/kataloogid on täpselt need, mis sul public_html kataloogi sees.

Failiõiguste seadmine:

Kui oled värskelt public_html alla prax1 kataloogi teinud, on tal tõenäoliselt kohe sobivad failiõigused. Kui ei, siis on vaja anda talle lisaks lugemis-ja nimekirjanäitamise õigus niimoodi: chmod a+rx public_html/prax1

Failile lugemisõiguse andmine (see tekib üldjuhul automaatselt ja ei ole vaja ise teha): chmod a+r index.html

public_html tegemine (erijuht)

Kui sul public_html kataloogi miskipärast ei ole, saad ta ise käsurealt luua niimoodi: mkdir public_html

Käsurea saamiseks tuleks üle SSH ühenduse dijkstra käsureale logida (putty või ssh vms)

Sisselogimine käsureale ===

Esimese ja teise praksi jaoks ei ole otseselt vaja serveri käsurida kasutada ehk sinna sisse logida. Järgmiste prakside jaoks aga on, nii et võid seda kohe katsetada.

Sisselogimiseks on Windowsil kõige lihtsam kasutada programmi putty (või alternatiivina kitty) ja Linuxil või Macil või käsureaprogrammi ssh.

Putty leiad arvutiklassidest programmi "Application catalog" jaotusest terminals: sealt saad ta ise installeerida. Mõistlik on panna endale putty viit desktopile.

Alternatiivina saad lihtsalt laadida endale veebist putty.exe: selle saab otse käima lasta, mingit eri-installeerimist ei ole vaja.

Putty või Kitty käimaminekul on sul vaja sisestada:

• Dijkstra aadress: turing.cs.ttu.ee (see tuleb puttyl sisestada "Host name" väljale)
• Kasutajanimi ja parool: TTÜ kasutajanimi ja parool (neid küsib putty siis, kui ta serveriakna avab).

Puttyl tasub Window/appearance alt seada meeldiv font ja Window/color alt meeldiv värv (ntx valge tagapõhi ja must värv). Samuti tasub kindlasti teha "save session" (enne pane "Saved session" väljale endale meeldiv nimi), siis jätab Putty settingud meelde ja sisenemisel ei pea enam arvuti nime sisestama: valid listist sessiooninime ja teed "Load" ja seejärel "open".

Hea alternatiiv puttyle on kitty, mis on muidu täpselt nagu putty, aga on valmis sinu kasutajanime ja parooli meelde jätma, et ei peaks igakord uuesti sisestama.