HTTP-protokollan tilattomuus ja lomakkeet - Viikkotehtävä 2

Taso 1
Taso 3
Taso 5
Merkistöongelmat
- HTML ja erikoismerkit

Tehtävässä on tarkoitus oppia HTTP-protokollan tilaton toimintatapa. Jokainen pyyntö www-palvelimelle on erillinen eikä näitä pyyntöjä normaalisti yhdistä mikään toisiinsa. Tätä tilattomuutta täytyy kiertää erilaisilla tavoilla jotta kyetään rakentamaan sovelluksia eikä pelkästään yksinkertaisia www-sivuja. Tällä viikolla opitaan tallentamaan sovelluksen tila lomakkeen sisään piilokenttien avulla (tasot 3 ja 5).

Kaikille tasoille yhteiset vaatimukset:

Tehtävät on toteutettava Python 3 -ohjelmointikielellä Flask-ohjelmina users.jyu.fi-palvelimelle. PythonAnywhere-palvelu ei kelpaa.
Koodin oleelliset osat on oltava kommentoitu.
Sivujen sisältämä HTML-koodi tulee olla validia HTML5:sta. Käytä valmista pohjaa, jossa on mukana automaattinen validointi. Epävalidi sivu aiheuttaa tehtävän pisteisiin automaattisesti 2 pisteen vähennyksen.
Sekä ohjelmakoodin että www-sivun merkistönä pitää olla UTF-8. Varmista, että sivun merkistö toimii kunnolla eli esim. skandinaaviset merkit näkyvät oikein. Testaa Firefoxilla äläkä pelkästään Chromella. WWW-sivun merkistö määrätään Content-type-otsakkeen yhteydessä. Pelkkä Meta-elementti ei aina riitä.
Sivun ulkoasumuotoilut on tehtävä CSS:ää käyttäen. CSS:n on oltava myös validia CSS2/3:sta. Kaikki CSS on oltava ulkoisessa CSS-tiedostossa eikä suoraan HTML-dokumentissa.
HTML-koodin seassa ei saa esiintyä SVG-koodia
Evästeiden ja sessioiden käyttäminen on kiellettyä
Javascriptin käyttäminen on kiellettyä poislukien valmiissa pohjassa olevat tarkistusskriptit
Ohjelma ei saa tallentaa mitään tiedostoihin tai tietokantaan
Ohjelman täytyy toimia users.jyu.fi-palvelimella. Muille palvelimille sijoitetut vastaukset eivät kelpaa.
Käytä lomakkeiden luomiseen ja käsittelyyn Flask-WTF-kirjastoa
Ohjelma on toteutettava Jinja2-templatea käyttäen. Python-ohjelmakoodissa ei saa esiintyä HTML-koodia vaan kaikki HTML on tuotettava Jinjan templatessa. Jinja-templaten sisältö on pidettävä mahdollisimman yksinkertaisena eli kaikki tarkistukset ja muu ohjelmalogiikka on tehtävä Flask-ohjelmassa Python 3 -kielellä. kts. MVC-arkkitehtuuri
Sovellus ei saa kaatua käyttäjän syötteisiin tai merkistövirheisiin
Sovelluksen on käytettävä xhtml-mediatyyppiä eli application/xhtml+xml

Taso 1

Kirjoita Python-kielellä Flask-ohjelma, joka luo sivulle halutun kokoisen mustavalkoisen shakkiruudukon (html-taulukon) (x ruutua korkea ja x ruutua leveä).
Sovelluksessa on oltava seuraavanlainen lomake:

Lomakkeen ulkoasun on vastattava mallikuvaa

Lomakkeen jälkeen samalla sivulla on mustavalkoinen pelilauta (taulukko), johon sijoitetaan sinisiä pelinappuloita (kuvia) seuraavalla tavalla:
Ruudukkoon sijoitetaan siniset pelinappulat diagonaalisesti.
Ohjelmalla voi luoda uuden ruudukon niin monta kertaa kuin haluaa. Uusi ruudukko korvaa aina aiemman ruudukon. Sivulle ensimmäistä kertaa saavuttaessa lomake on oletusarvojen minimin kokoinen.
Ruudukon minimikoko on kahdeksan (8) ja maksimikoko on 16. Ruudukko on toteutettava tavalla, joka mahdollista helposti minkä tahansa kokoisen ruudukon luomisen.
Sovellus muistaa lomakkeeseen mahdollisella edellisellä kerralla syötetyt arvot ja esitäyttää niillä lomakkeen
Jos taulukon kooksi annetaan epäkelpo arvo (liian suuri, liian pieni tai ei numero), taulukkoa ei luoda ollenkaan, vaan näytetään koon kysymiseen käytetyn syöttökentän oikealla puolella punaisella tekstillä virheilmoitus: "Syöttämäsi arvo ei kelpaa". Huom. tätä ei saa toteuttaa vain HTML5-lomake-elementtien tarkistuksilla tai javascriptilla vaan tarkistus on tehtävä Flask-sovelluksessa ja virheilmoitus on esitettävä html-muodossa.
Ohjelma ei saa kaatua vaikka kooksi yritettäisiin antaa muuta kuin numero.
Jos jomman kumman pelaajan nimi jätetään tyhjäksi, esitetään myös siitä virheilmoitus samaan tapaan kuin taulukon koon yhteydessä
Pelilaudan yläpuolelle kirjoitetaan lomakkeelle syötetyn pelaaja 1:n nimi. Pelilaudan alapuolelle kirjoitetaan lomakkeelle syötetyn pelaaja 2:n nimi.
- Ohjelman tuottaman HTML-koodin on oltava validia vaikka käyttäjä syöttäisi lomakkeelle html-koodia tai muita erikoismerkkejä. Testaa siis ohjelmasi esim. seuraavanlaisella testisyötteellä:
```
<td><strong> testi&testi ööää </strong></td>
```
Ohjelman on toimittava siten, että sitä voidaan käyttää seuraavalla tavalla: http://users.jyu.fi/~omatunnus/cgi-bin/ties4080/vt2/vt2.cgi?x=10&pelaaja1=foo&pelaaja2=bar
Edellämainittu loisi suoraan ruudukon, jonka koko on 10x10 ja pelaajien nimet olisivat foo ja bar
Ohjelma on toteutettava Jinja2-templatea käyttäen. Ohjelmassa ei saa esiintyä HTML-koodia vaan kaikki HTML on tuotettava Jinjan templatessa

Taso 3

Toteuta tason 1 -ohjelma seuraavilla lisäominaisuuksilla:

Sovelluksen oletusasetukset määritellään dynaamisella json-tiedostolla, joka sovelluksen täytyy jokaisella suorituskerralla ladata osoitteesta: https://europe-west1-ties4080.cloudfunctions.net/vt2_taso1.
Tiedosto on seuraavaa muotoa:
```
{
  "min": 12, 
  "max": 18, 
  "first": "black", 
  "balls": "bottom-to-top"
}
```
- min on ruudukon minimikoko
- max on ruudukon maksimikoko
- first kertoo mikä on ruudukon ensimmäisen ruudun (vasen yläkulma) väri. Se voi olla musta ("black") tai valkoinen ("white").
- balls kertoo mille akselille siniset pallot piirretään ruudukon sisään. Vaihtoehtoja on kaksi: vasemmasta ylänurkasta oikeaan alanurkkaan ("top-to-bottom") tai vasemmasta alanurkasta oikeaan ylänurkkaan ("bottom-to-top")
Oletusasetukset muuttuvat satunnaisina aikoina
Tee nappuloista linkkejä joita klikkaamalla kyseinen nappula poistetaan laudalta. Käyttäjä voi siis yksitellen klikkailla kaikki nappulat pois. Ohjelmasi on osattava säilyttää tieto ruudukon tilasta ja ruuduissa esitettävästä tekstistä linkissä ja sen parametreissa. Varmista, että muodostamasi linkit ovat kelvollisia eikä validaattori herjaa niistä. Muista testata ykköstasolla annetulla merkkijonolla.
Urlin maksimipituus on noin 2000 merkkiä.. Älä muodosta liian pitkiä osoitteita.
Lisää pelilaudan yläpuolelle Undo-painike (button), jolla voidaan palauttaa viimeiseksi poistettu pelinappula takaisin paikalleen. Palautettu pelinappula on poikkeuksellisesti väriltään punainen. Undo-painike on pois käytöstä (disabled) silloin, kun palautusta ei voida tehdä eli jos yhtään pelinappulaa ei ole vielä poistettu tai on juuri tehty palautus. Myös palauttamisen yhteydessä sovellus muistaa mitkä kaikki siniset tai punaiset pelinappulat ovat vielä pelilaudalla.
Uuden pelilaudan nappuloineen voi luoda milloin tahansa

Taso 5

Toteuta taso 3:n mukainen ohjelma seuraavilla laajennuksilla ja muutoksilla:

Lisää ruudukon yläpuolelle painike (button), jolla voi valita sovelluksen tilaksi siirtotilan. Lisää tämän viereen painike, jolla voi valita poistotilan
Ohjelman tilaa voi vaihtaa milloin tahansa. Ohjelma muistaa koko ajan missä ruuduissa on nappuloita.
Jos ohjelmassa on valittu siirtotila, mahdollista nappuloiden siirtäminen ruudusta toiseen. Hiirellä voi valita siirrettävän nappulan, joka sen jälkeen esitetään vihreänä. Seuraavaksi voi valita tyhjän ruudun, johon nappula siirtyy. Jos valitseekin tyhjän ruudun sijaan toisen nappulan, tämä muuttuu valituksi nappulaksi. Siirrettävä nappula muistaa ja säilyttää alkuperäisen värinsä.
Poistotilassa ohjelma toimii kuten kolmostasolla
Tee ruudukon koko skaalautuvaksi eli ruudukon pitää aina olla niin suuri kuin selainikkunaan mahtuu. Lomakkeen ei tarvitse mahtua näytölle samaan aikaan. Ruutujen täytyy säilyä neliöinä. Ruudukon maksimikorkeuden ja leveyden määrää selainikkunan leveydestä tai korkeudesta pienempi. Ruudukossa olevien ruutujen määrä vaikuttaa vain siihen kuinka suuria ruudut ovat. Pelinappuloiden pitää skaalautua ruutujen mukana.
Edelleenkään et saa kirjoittaa html-koodiin css-määrityksiä tai muita ulkoasumäärityksiä vaan ainoastaan CSS-tiedoston linkittäminen on sallittua. Ruutujen ja pallojen koko on määriteltävä CSS:n avulla. Toteutustavan on oltava järkevästi ja automaattisesti skaalautuva. Sen on toimittava vaikka ruudukon koko olisi 100x100.
Ohjelmasi ei saa tallentaa levylle tiedostoja. Kaikki tieto ohjelman tilasta on pidettävä mukana html-koodissa.
Vinkki: Flask-ohjelmia saa olla useampia kuin yksi. Flask-ohjelma voi tuottaa muutakin kuin HTML-koodia.

Merkistöongelmat

Peruskaava:

Ohjelmakoodi ja sen merkkijonot on oltava UTF-8-merkistössä.
html-dokumentin merkistö on myös olta UTF-8 Muista kaikki kohdat missä merkistö ilmoitetaan:
- content-type-HTTP-otsake (tämä on tärkein)
- mahdollinen xml-deklaraatio
- mahdollinen meta-elementti
- lomakkeen accept-charset-ominaisuus

HTML ja erikoismerkit

Jinja2 hoitaa HTML-erikoismerkkien koodauksen automaattisesti, jos AutoEscape-ominaisuus on päällä. Flask asettaa tämän automaattisesti päälle, jos template-tiedoston nimi päättyy .html, .xml tai .xhtml

Linkkeihin täytyy erikoismerkit koodata vielä erikseen (Percent-encoding), koska linkeissä on omat rajoituksensa. Tämä hoituu urllib.parse.urlencode- tai urllib.parse.quote_plus-funktiolla.

The Absolute Minimum Every Software Developer Absolutely, Positively Must Know About Unicode and Character Sets (No Excuses!)

Käyttäjien kommentit