Lomakkeet ja validointi - Viikkotehtävä 3

Tässä tehtävässä opitaan HTML5-lomakkeiden rakentamista ja syötteiden validointia.

Käy ensin läpi nämä materiaalit:

Yhteiset vaatimukset

Kaikille tasoille yhteiset vaatimukset ovat:

Taso 1

Tallenna itsellesi valmis pohja: pohja.zip

Luo valmiiseen pohjaan lomake, jolla voi lisätä tietorakenteeseen uusia joukkueita. Voit kirjoittaa valmista html-koodia niin paljon kuin haluat. Myös CSS:ää voi käyttää, mutta kaikki css on oltava tyylit.css-tiedostossa. Lomakkeen on näytettävä Chrome-selaimessa seuraavalta:

Mallilomake

Lomakkeella oleva sarjalistaus ja lista leimaustavoista on luotava dynaamisesti tietorakenteen perusteella. Jos datan sisältö muuttuu, esim. sarjoja tai leimaustapoja tulee lisää, niin lomakkeen on myös muututtava.

Joukkueen lisäämisen jälkeen lomake on tyhjennettävä. Ilmoita onnistuneesta lisäämisestä sijoittamalla Lisää joukkue -otsikon jälkeen teksti: Joukkue tähän lisätyn joukkueen nimi on lisätty.

Joukkueelle on lomakkeella syötettävä seuraavat tiedot:

Lomakkeen on osattava seuraavat tarkistukset ja rajoitukset:

Lisätylle joukkueelle on tallennettava automaattisesti myös seuraavat tiedot:

Label-elementtejä on osattava käyttää järkevästi. Kentän otsikkoa (label) klikattaessa on kyseisen kentän aktivoiduttava tai tultava valituksi. Tämä on toteutettava ilman javascript-koodia.

Lomakkeen ulkoasun on vastattava mallikuvaa.

Lisää sivun loppuun listaus joukkueiden nimistä aakkosjärjestyksessä ja joukkueiden jäsenten nimistä myös aakkosjärjestyksessä. Lista on esitettävä kahtena sisäkkäisenä järjestämättömänä listana (ul- ja li-elementit). Listaus täytyy päivittää aina, kun uusia joukkueita lisätään. Esimerkki listauksesta:

Lomakkeen on oltava responsiivinen. Varmista, että lomake toimii 360x768-resoluutioisella näytöllä ilman turhaa vaakasuuntaista skrollausta. Vaakasuuntainen skrollbar saa ilmestyä vasta alle 300 pikselin näytöllä. Lomakkeen on pienillä resoluutioilla näytettävä samalta kuin seuraavassa kuvassa ja yli 600 pikseliä leveillä näytöillä näytettävä samalta kuin ensimmäisessä mallikuvassa.

Sivu pienellä näytöllä

Sivulla ei saa käyttää taulukoita

Taso 3

Toteuta taso 1 ja sen jälkeen laajenna seuraavanlaiseksi:

Mallilomake

Kysy lomakkeella myös seuraavat tiedot:

Lisää sivulle myös uusi lomake, jolla voi lisätä kilpailuun uusia sarjoja (kts. tietorakenne). Kysy lomakkeella seuraavat tiedot:

Muotoile lomakkeen ulkoasu samaan tapaan kuin joukkuelomake

Kaikista virheellisistä syötteistä on annettava suomenkieliset selkeät virheilmoitukset.

Sarjalle on itse keksittävä uniikki id. id:tä ei pidä näyttää käyttäjälle

Ilmoita selkeästi onnistuneesta sarjan lisäämisestä

Joukkuelomakkeen sisältö on aina uuden sarjan lisäämisen jälkeen päivitettävä vastaamaan tarjolla olevia sarjoja

Klikattaessa joukkueen nimeä listauksessa haetaan kyseisen joukkueen tiedot lomakkeelle muokattavaksi. Muokkauksen ja lomakkeen tallentamisen jälkeen korvataan tietorakenteessa uusilla tiedoilla muokattavaksi haetun joukkueen tiedot. Myös joukkuelistaus pitää päivittää. Joukkueen tietoja ei saa tallentaa, jos jokin lomakkeen kenttä rikkoo rajoitteita. Ilmoita onnistuneesta muokkauksesta samaan tapaan kuin joukkueen lisäämisestä.

Tee sivulle kaksisarakkeinen layout. Siirrä joukkuelistaus sivun lopusta sivun alkuun ja oikeaan laitaan. Lomakkeet löytyvät sivun vasemmasta laidasta. Kapeissa alle 600 px leveissä näytöissä poista sarakkeet ja esitä sivun sisältö peräkkäin kuten tasolla 1 eli ensin lomakkeet ja viimeisenä joukkuelistaus. Sivun HTML-koodissa joukkuelistauksen on oltava ensimmäisenä ja lomakkeiden viimeisenä. Toteuta layout käyttäen flexboxia.

Taso 5

Toteuta ensin taso 3 ja sen jälkeen laajenna seuraavasti:

Parantele joukkuelomaketta seuraavasti:

Muuta sivun layout vaakatasoon, jos sivun leveys on vähintään 1200 pikseliä. Joukkuelistaus tulee sivun yläosaan mutta listaus esitetään niin monessa sarakkeessa kuin sivulle rinnakkain mahtuu. Yhdessä sarakkeessa on enintään viisi joukkuetta. Sijoita lomakkeet vierekkäin sivun loppuun siten, että ensimmäisenä on kilpailulomake ja toisena joukkuelomake. Lomakkeet on mahdutettava sivulle ilman sivusuuntaista skrollbaria. Kapeammilla näytöillä sivu esitetään, kuten aiemmilla tasoilla on toteutettu. Toteuta käyttäen flexboxia.

Käyttäjien kommentit

Kommentoi Lisää kommentti
Kurssimateriaalien käyttäminen kaupallisiin tarkoituksiin tai opetusmateriaalina ilman lupaa on ehdottomasti kielletty!
http://appro.mit.jyu.fi/tiea2120/vt/vt3/
© Tommi Lahtonen (tommi.j.lahtonen@jyu.fi) <http://hazor.iki.fi/>
2018-10-03 12:43:26
Informaatioteknologia - Jyväskylän yliopiston informaatioteknologian tiedekunta