Ajax ja jQuery - viikkotehtävä 5
Toteutetaan Ajax-sovelluksena vastaavanlainen sovellus kuin edellisellä viikolla tehty elokuvavuokraustietokanta. 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ä jQuery-kirjaston avulla. Muiden javascript-kirjastojen käyttäminen on kiellettyä. jQuery-plugineja 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
- 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ää
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 (kts. viikkotehtävä 1), jossa on vuokrauksen lisäämiseen vaadittavat kentät ym. sisältö valmiina.
- Linkitä sivuun javascript-ohjelma (kts. viikkotehtävä 2), joka hoitaa varsinaisen toiminnan.
- Sivulle tultaessa näytetään tietokannasta haettu listaus jo olemassaolevista vuokrauksista (vuokrauspvm, elokuvan nimi, vuokraajan nimi ja mahdollinen palautuspvm). Vuokraukset on listattava elokuvien nimen mukaan aakkosjärjestyksessä ja toissijaisesti aikajärjestyksessä (vuokrauspvm) vanhin ensimmäisenä. Tämä listaus haetaan WWW-palvelimelta Javascriptin (Ajax) avulla. Listaus on esitettävä siististi ul- ja li-elementtien avulla.
- Vuokrauslistauksen alapuolella on lomake, jolla voidaan lisätä uusia vuokrauksia. Lomakkeelle tarvitaan alasvetovalikko, joka sisältää elokuvat ja alasvetovalikko, joka sisältää jäsenet. Näiden sisältö saa olla valmiina sivun sisällössä jolloin niiden on sisällettävä tietokannassa jo valmiina olevat jäsenet ja elokuvat. Tiedot voi myös hakea ajax-kutsulla/kutsuilla tietokannasta (kts. taso 3).
- Vuokrauksen lisääminen on tehtävä Ajax-operaationa. WWW-sivua ei siis saa missään vaiheessa ohjelman suoritusta ladata uudelleen eikä selain saa siirtyä muille sivuille.
- Onnistuneen lisäämisen jälkeen uusi vuokraus näkyy heti myös sivulla olevassa vuokrauslistauksessa. Listauksen sisältö on siis päivitettävä ajaxin avulla
- Epäonnistuneesta lisäämisestä pitää näyttää sivulla järkevä virheilmoitus. Alert-funktiota ei saa käyttää.
Taso 3
Laajenna taso 1 -mukaista ohjelmaa seuraavilla tavoilla:
- Mahdollista vuokrausten muokkaaminen. Tee vuokraustiedoista (vuokraajan nimi, vuokrauspvm, palautuspvm ja summa) linkkejä ja linkkiä klikkaamalla haetaan kyseisen vuokrauksen tiedot muokattavaksi lomakkeelle. Käytä samaa lomaketta kuin vuokrausta lisättäessä. Huomaa, että sivu ei saa latautua uudelleen linkkiä klikattaessa. Epäonnistuneesta muutoksesta on ilmoitettava selkeällä virheilmoituksella.
- Lomakkeiden alasvetovalikoissa esiintyvät jäsenet ja elokuvat on myös haettava ajaxilla. Ajax-kutsussa tiedot on siirrettävä JSON-muodossa. Kts. Javascript-tietorakenteita ja Python-tietorakenteita. XML-muoto tai plain text eivät kelpaa. Käytä apunasi Pythonin simplejson-kirjastoa ja jQuerya
- Vuokrauslistaus esitetään kaksitasoisena sisäkkäisenä listana jossa ulommalla tasolla listataan elokuvien nimet ja julkaisuvuodet ja sisemmässä listassa kyseisen elokuvan vuokraajien (jäsenten) nimet ja muut vuokraustiedot. Elokuvat ovat aakkosjärjestyksessä ja toissijaisesti julkaisuvuoden mukaisessa järjestyksessä. Elokuvia, joita ei ole vuokrattu kertaakaan, ei tarvitse listata. Vuokraajat listataan vuokrauspäivämäärän mukaisessa kasvavassa järjestyksessä.
Taso 5
Laajenna taso 3 -mukaista ohjelmaa seuraavilla ominaisuuksilla:
- Sovellukseen on kirjauduttava (vrt. edellinen viikkotehtävä) ennen kuin näkee mitään sovelluksen tietoja. Kirjautuminen tapahtuu samalla sivulla kuin kaikki muukin sovelluksen toiminta. Kirjautuminen on siis hoidettava ajax-operaationa. Epäonnistuneesta kirjautumisesta pitää näyttää sivulla selkeä virheilmoitus. Ainoa kirjautumiseen kelpaava osoite on tiea218@foobar.example ja salasana on tiea218. Salasana ei saa esiintyä selkokielisenä python-ohjelmakoodissa eikä missään muodossa javascript-koodissa.
- Sovellus ei saa ladata ajax-kutsuilla mitään elokuvatietokannan tietoja ennen kirjautumista
- Kaikkiin Ajax-operaatioihin pitää liittää jokin selkeä latausindikaattori, jota näytetään kunnes operaatio on suoritettu.
- Mahdollista myös uusien elokuvien lisääminen ja poistaminen. Huomioi järkevästi kaikki mahdolliset virhetilanteet kuten jos yritetään poistaa elokuvaa, josta on vuokrauksia.
Käyttäjien kommentit