Viikkotehtävä 8 - Ajax

• Taso 1
• Taso 3
• Taso 5

Toteutaan Ajaxin avulla palveluun rekisteröityminen.

Yhteiset vaatimukset:

• Tehtävä on palautettava maanantaina 21.4.2008 klo 12.00 mennessä.
• Luo ensin kanta2008.sql-tiedoston avulla SQLite-tietokanta. Voit käyttää hyödyksi myös tietokannan ER-kaaviota.
• 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. Riittää kuitenkin, että sovellus toimii Firefox 2 -selaimessa.
• Käytetään ISO-8859-1-merkistöä.
• Tietokantaan ei saa tehdä vaatimusten vastaisia lisäyksiä, vaikka joku onnistuisi kiertämään Ajaxilla tehdyt ennakkotarkistukset.

Taso 1

Tee mallin mukainen sähköpostiosoitteen rekisteröintisovellus Ajaxia käyttäen.

• Mallikuvat
  • Alkutilanne
  • Tunnus ok - sähköpostiosoite kelpaa
  • Virhetilanne - tunnus on jo käytössä
  • Tulos rekisteröintipainikkeen painamisen jälkeen
• Erilaiset domain-vaihtoehdot on haettava Ajax-operaationa, joka kutsuu PHP-skriptiä. PHP-skripti hakee vaihtoehdot tietokannasta. Vaihtoehdot on haettava sivun latauksen yhteydessä ja liitettävä valintalistaan DOM- tai Prototype-operaatioilla.
• Jos käyttäjä kirjoittaa jonkin tunnuksen, joka on jo käytössä, niin tästä tulee virheilmoitus kuvan mukaisesti ja napin painallus estetään.
  • Käyttäjänimen tarkistus tehdään Ajax-operaationa aina kun käyttäjä siirtyy pois tekstikentästä tai tekee muutoksen valintalistaan.
  • Tunnus koostuu käyttäjänimestä ja domain-osasta. Tunnus on varattu vain silloin, jos tekstikenttä vastaa käyttäjänimeä (UserName) JA valinta tunnuksen domainnimeä (DomainName).
• Näytä tuloksena sivu, jossa on uusi tunnus, ja lisää uusi tunnus tietokantaan.

Taso 3

Tee taso 1 ja sen lisäksi mahdollisuus tallentaa tieto palvelua käyttävistä kavereista.

• Mallikuvat
  • Alkutilanne
  • Tilanne, kun on valittu kaksi domainia
  • Tulos rekisteröintipainikkeen painamisen jälkeen
  • Virhetilanne
• Sivun latauksen yhteydessä on haettava kaverien valintaan erilaiset domain-vaihtoehdot Ajax-operaationa. Voit hyödyntää samaa operaatiota kuin tasolla 1, nyt vaihtoehdoista on tehtävä lisäksi valintaruksit.
• Kun käyttäjä valitsee ruksin domain-nimen edestä, niin kaikki tähän ryhmään kuuluvat sähköpostiosoitteet haetaan Valitse-lohkoon. Käyttäjä voi valita useita ryhmiä. Valitse-lohkosta voidaan valita varsinaiset kaverit.
• Rekisteröitymisen tulos näkyy napin painalluksen jälkeen. Näytä uusi tunnus ja kaverit listana. Lisää uusi tunnus tietokantaan ja kaverit Friend-tauluun.
  • Viimeksi lisätyn tunnuksen ID:n saat metodilla lastInsertID.

Taso 5

Muutetaan tason 3 kaverien haku tekstikenttäpohjaiseksi. Tekstikentän kirjoittamisen jälkeen tarjotaan vaihtoehtoja, joita klikkaamalla voi lisätä uusia kavereita.

• Mallikuvat
  • Alkutilanne
  • Virhetilanne
  • Haku aiheuttaa latausindikaattorin näkymisen lataamisen ajan
  • Haun tulos
  • Kavereita on valittu
  • Kaveri on poistettu
  • Lopullinen lisääminen kuten tasolla 3
• Hakukenttään kirjoittaminen aiheuttaa kahden merkin kohdalla Ajax-operaation. Ajax-operaation ajaksi on tultava kuvallinen indikaattori, että operaatio kestää hetken.
• Kaverihaku tehdään kentän UserName perusteella. Haun pitää kohdistua myös käyttäjänimen osaan, esim. haku .k tuo kolme käyttäjää. Haku palauttaa listana vaihtoehdot.
• Löydetyt tunnukset domain-nimineen esitetään toisessa laatikossa listana.
• Valinta lisää osoitteen kaverilistaan ja valittu osoite poistetaan "Lisää kaveri"-listasta.
• Jo valitun kaverin voi poistaa klikkaamalla kaverin osoitetta.
• Rekisteröitymisen tulos näkyy napin painalluksen jälkeen. Näytä uusi tunnus ja kaverit listana. Lisää uusi tunnus tietokantaan ja kaverit Friend-tauluun kuten tasolla 3.