Viikkotehtävä 8 - Ajax

• Taso 1
• Taso 3
• Taso 5

Toteutaan Ajaxin avulla kuviohaku tietokannasta ja runko ostoskorille.

Tee ensin seuraavat toimenpiteet:

• Luo viikkotehtävälle kansio.
• Lataa vt8data.zip ja pura se.
• Siirrä images-hakemisto viikkotehtäväkansioon.
• Luo kuvio_2007.sql avulla SQLite-tietokanta.
  • Kannan ER-kaavio ja relaatiokuva.
  • Tietokanta ei ole ihan optimaalinen kuvioiden ominaisuuksien luokitteluun, mutta riittävä harjoitustietokannaksi.

Yhteiset vaatimukset:

• Ensimmäinen ladattava sivu on oltava staattinen XHTML Strict -dokumentti. Sitä ei saa luoda PHP:n avulla. Dokumentti linkitetään erillisiin JavaScript-tiedostoihin.
• Muotoilut pitää pyrkiä tekemään erillisellä CSS-tiedostolla.
• JavaScript-tiedosto saa XMLHttpRequest-olion avulla kutsua PHP-skriptejä.
• JavaScriptissä on käytettävä standardinmukaisia operaatioita (EcmaScript, W3C DOM, W3C XMLHttpRequest) aina kun se on mahdollista.
• Selaimien yhteensopivuusapuna saa käyttää Prototype-kirjastoa (ja tasolla 5 Scriptaculous-kirjastoa). Riittää kuitenkin, että kuviohakusovellus toimii Firefox 2 -selaimessa.
• Käytetään ISO-8859-1-merkistöä. Testaa, että hakusi toimivat myös jos ne sisältävät ääkkösiä. Kokeile esim. hakusanaa vihreä.

Taso 1

Tee mallin mukainen kuviohakusovellus Ajaxia käyttäen.

• Mallitiedostot
• Haku tehdään tietokannan kuvionimen perusteella. Haun pitää kohdistua myös kuvionimen osaan, esim. haku robotti tuo kaksi kuviota. Haku palauttaa tiedostonimen mukaisen kuvan sivulle images-kansiosta.
  • Vinkki: lisää hakuparametriin molempiin päihin % ja vertaile LIKE-operaattorilla.
  • Vinkki 2: kysymysmerkki voi tulla ainoastaan jonkun SQL-parametrin tilalle, %-merkkejä ei voi siis laittaa suoraan SQL:ään vaan ne on lisättävä sidottavaan muuttujaan ennen bindParam-kutsua
• Kuvien haku on tehtävä Ajax-operaationa ja upotus on tehtävä DOM:lla tai Prototype-operaatiolla.
  • Vinkki: Jos sijoitat lomake-elementin formin sisälle, niin estä napin aiheuttama normaali submit-tapahtuma event.preventDefault()-metodilla.
• Uusi haku poistaa edelliset kuviot ja tuo uudet tilalle (mikäli niitä löytyy).

Taso 3

Tee taso 1 lisäksi haun rajaus kuvioon liitetyn muodon perusteella ja kuvioiden tilaus.

• Mallitiedostot
• Erilaiset muotovaihtoehdot on haettava Ajax-operaationa, joka kutsuu PHP-skriptiä. PHP-skripti hakee vaihtoehdot tietokannasta. Vaihtoehdot on haettava sivun latauksen yhteydessä.
• Kuvien haku rajoitetaan nyt hakutekstit ja muotovalintojen perusteella.
  • Haku ja päivitys tapahtuu Hae!-nappia painettaessa ja tällöin hakuparametreina on hakuteksti ja valitut tyypit.
  • Hae!-napin voi sijoittaa checkboxien jälkeen niin lomake on havainnollisempi kuin nyt :)
• Kuvat haetaan ja liitetään Ajaxilla.
  • Vinkki: checkboxien valueiksi muotoID:t, luo SQL-kyselyyn rajoite IN-määrityksellä, kyselyn valmistelua varten on luotava yhtä monta kysymysmerkkiä kuin on valittuja muotoja on. Kts. luento 16 rekisteröintiesimerkki.
  • Vinkki 2: kukin kysymysmerkki pitää muistaa kytkeä bindParam-metodilla todelliseen "pysyvään" muuttujaan, ei esim. silmukan väliaikaismuuttujaan.
• Kuvien lisäksi kuvan alapuolella pitää näkyä kuvion nimi (Kuvionimi) ja valintaruksi.
• Valintaruksien perusteella käyttäjä voi tilata kuvioita. Tilauksen käsittelyn voi tehdä normaalina PHP-skriptinä (form-elementin action-attribuutissa saa olla esim. tilaa.php)
• Tilauksen käsittelijä tulostaa tilatut tuotteet (kuvionimet). Muotoiluilla ei ole väliä, pelkkä tekstikin riittää.

Taso 5

Tee tason 3 mukainen kuviohaku, mutta nyt kuviotuotteiden valinta tehdäänkin raahamalla niitä ostoskorialueelle.

• Mallitiedostot
• Haetut kuvat ja niiden kuvatekstit muodostavat alueita, joita voi raahata.
  • Jos käyttäjä ei raahaa ostoskorialueelle tuotetta, niin se palaa alkuperäiseen paikkaansa.
  • Uusi haku poistaa edelleen vanhat haetut tuotteet.
  • Jos käyttäjä raahaa tuotteen ostoskorialueelle, niin kuvio siirtyy hakualueelta pysyvästi ostoskorialueelle. Ostoskorialueella olevaa kuviota ei pysty enää siirtämään pois korista eikä sitä voi raahata.
  • Useita samanlaisia kuviota saa ostoskoriin hakemalla samaa tuotetta uusiksi ja raahamalla uudelleen haettu kuvio koriin.
• Ostoskorin voi tyhjentää Tyhjennä ostoskori-nappulalla.
• Kun painaa Tilaa-nappia, niin ohjelma katsoo mitä tuotteita on korissa ja antaa niistä (kuvionimistä) listauksen alert-funktion avulla. Tilauksessa pitäisi tietysti tehdä Ajax-kutsu tai formin submit, mutta tulostus on tässä kohtaa kuitenkin riittävä.
• Drag&drop-toteutukseen voit käyttää Scriptaculous-kirjastoa.