Ajax, jQuery ja Fetch API - viikkotehtävä 5

• Taso 1
• Taso 3
• Taso 5

Toteutetaan Ajax-sovelluksena vastaavanlainen sovellus kuin edellisellä viikolla tehty sovellus. Tehtävässä on ideana osata tehdä WWW-palvelimelle sopivia apuohjelmia joita voi sitten kutsua Javascript-ohjelmasta AJAX-rajapinnan avulla jQuery-kirjastoa käyttäen. kts. myös Ajax-esimerkkejä.

Yhteiset vaatimukset:

• Käytä samaa SQlite-tietokantaa kuin edellisviikolla.
• Sovelluksen on toimittava yhdellä ja samalla www-sivulla ilman, että sivua ladataan sovelluksen käyttämisen aikana uudelleen. Javascriptin ja Ajaxin avulla hoidetaan sivun sisällön dynaaminen muokkaus.
• WWW-palvelimella suoritettavat ohjelmat pitää kirjoittaa python-kielellä joko CGI- tai Flask-sovelluksina.
• Muotoilut pitää tehdä erillisellä CSS-tiedostolla.
• Ajax-operaatiot on tehtävä joko jQuery-kirjaston avulla tai Fetch API -rajapinnan kautta. Muiden javascript-kirjastojen käyttäminen on kiellettyä. jQuery-plugineja saa käyttää. jQuery UI -kirjastoa saa käyttää.
• Sivun on oltava validia HTML5:sta
• Sivun on toimittava ja se on testattava sekä Google Chrome-selaimella että Firefoxilla
• Javascript-ohjelma ei saa sisältää SQL-koodia
• Älä käytä innerHTML-metodia
• Sovelluksen on toimittava users.jyu.fi-palvelimella
• Minkään taulun ID-kenttiä ei pidä näyttää käyttäjälle
• Ajax-kutsujen mahdollisista virheistä, kuten palvelimella oleva python-ohjelma kaatuu, pitää ilmoittaa selkeällä virheilmoituksella.
• Alert-funktiota ei saa käyttää.
• Synkronisia ajax-kutsuja ei saa käyttää
• Sivun lomakkeen sisältöä ei saa tarkistaa javascriptilla tai käyttää suoraan lomake-kenttien ominaisuuksissa olevia rajoitteita ja tarkistuksia. Kaikki tarkistukset on tehtävä flask-sovelluksessa.
• Muista preventDefault

Taso 1

Toteuta edellisen viikon taso 1 -tehtävän toiminnallisuus seuraavasti:

• Toteuta käyttöliittymä yhtenä staattisena WWW-sivuna (ei flask-sovellus eikä cgi-ohjelma) eli kirjoita tavallinen HTML5-dokumentti (vrt. pääteohjaus 5), jossa on vaadittavat kentät ym. sisältö valmiina. Vinkki: Kirjoita ihan kaikki mahdollinen staattinen HTML-koodi sivulle valmiiksi. Javascriptilla voit näyttää / piilottaa haluttuja osia sivusta. Kts. show(), hide() ja toggle().
• Linkitä sivuun javascript-ohjelma, joka hoitaa varsinaisen toiminnallisuuden.
• Kirjautumista ei tarvitse toteuttaa vaan sovellus näyttää aina Kotilot-joukkueen tiedot. Sivuston navigoinnin kautta pääsee muokkaamaan Kotilot-joukkueen (Joukkueen, jonka id on 6008099190079488) tietoja. Pääsivulla on listaus Kotilot-joukkueen sarjan joukkueista. Sekä Kotilot-joukkueen tiedot, että joukkuelistaus, on haettava ajax-kutsun avulla. Toteuta tavalla, joka mahdollistaisi käsiteltävän joukkueen muuttamisen vain vaihtamalla käytettävää joukkueen tunnistetta (id).
• Sivuston ulkoasun on oltava samanlainen kuin edellisellä viikolla
• Epäonnistuneesta tietojen muokkaamisesta pitää näyttää virheellisen kentän vieressä virheilmoitus. Alert-funktiota ei saa käyttää. Jos varsinainen lisäysoperaatio kaatuu, niin näytä virhe tallenna-painikkeen vieressä.
  • Joukkueen nimi ei saa olla tyhjä
  • Kilpailussa ei saa olla kahta samannimistä joukkuetta
  • Jäseniä on oltava vähintään kaksi
  • Sarja on oltava valittuna
• Onnistuneen muokkauksen jälkeen muuttuneet tiedot päivitetään myös joukkuelistaukseen ja käyttöliittymään. Muista päivittää joukkueen nimi käyttöliittymään.

Taso 3

Laajenna taso 1 -mukaista ohjelmaa seuraavilla tavoilla:

• Lisää sovellukseen kirjautuminen. Ennen kirjautumista ei sovellus saa ladata eikä näyttää mitään tietoja. Kirjautuminen on toteutettava ajaxin avulla eli kaikki toiminta tapahtuu edelleen yhdellä ja samalla sivulla.
• Toteuta edellisen viikon tapaan uloskirjautuminen ja admin-tunnuksella kirjautuminen
• Toteuta admin-tunnuksen toiminnallisuudet, kuten uusien joukkueiden lisääminen ja joukkueiden muokkaaminen ja poistaminen. Kts. edellinen viikkotehtävä taso 3

Taso 5

Laajenna taso 3 -mukaista ohjelmaa seuraavilla ominaisuuksilla:

• Toteuta edellisviikon viitostason vaatimukset ajax-sovelluksena. Kaikki sovelluksen lomakkeilla tietokannasta tarvittavat tiedot täytyy ladata ajax-kutsujen avulla.
• Käytä ajax-kutsuissa vain JSON-muotoa
• Kaikkiin Ajax-operaatioihin pitää liittää jokin selkeä latausindikaattori, jota näytetään, kunnes operaatio on suoritettu.