AJAX technológia

dec. 6- 11
Határidő: Jan. 8.

Laborházik | Dokumentáció

E laborházi lényege:
- az AJAX technológia felhasználása

Laborházik:
Megj.: Az alábbi feladatok megoldhatók az AJAX technológia tanult, alapvető működési elvének ismeretében (közvetlenül az XMLHttpRequest objektumot használva). Amennyiben valaki jártas valamilyen AJAX-keretrendszer használatában, azt is felhasználhatja a házi megoldásában (viszont bemutatáskor kell tudni ismertetni az illető keretrendszer használatának módját/működési elvét).

A házi szerver-oldali részének implementálására tetszőleges szerver-oldali technológia választható.

1. Készítsünk egy HTML oldalt, melyen két, repülőgépek indulási- illetve érkezési pontjának megfelelő repülőtereket tartalmazó legördülő lista van elhelyezve. Egy adatbázisban tároljunk a repülőjáratoknak megfelelő alakú bejegyéseket az alábbi információkkal:
   Reptér1 - Reptér2 - Légitársaság - indulás időpontja - érkezés időpontja - repülőjárat száma
   Amikor a felhasználó kiválaszt az első listából egy elemet, a második lista tartalmát aktualizáljuk megfelelőképpen AJAX technológia segítségével (csak azok a repterek szerepeljenek benne, ahová el lehet jutni a kiválasztott reptérről).
   Ha ki van választva két reptér, akkor listázzuk ki a két reptér között közlekedő járatoknak megfelelő információt is.



2. Készítsünk egy HTML oldalt, mely az alábbi információkat tartalmazza egy űrlapon (form):
   • Vezetéknév
   • Keresztnév
   • e-mail
   • Telefonszám
   Ezen kívül az oldal tartalmaz egy "előző", illetve egy "következő" gombot. Szerver-oldalon tároljuk a felsorolt adatokat egy (adatokkal már feltöltött) adatbázisban. Az "előző", illetve "következő" gombok hatására aktualizáljuk az űrlap elemeinek tartalmát a megfelelő (előző vagy következő) adatbázis-bejegyzés alapján. Amennyiben módosítás történik az űrlapon, az újabb elemre való lépés előtt módosítsuk az adatbázist is megfelelőképpen. A fenti feladatot AJAX technológia segítségével oldjuk meg.



3. Adott egy tetszőleges adatokat tartalmazó adatbázis, egy bizonyos kulcs szerint indexelve. Készítsünk egy HTML oldalt, melyen a kulcsnak megfelelő értékek egy legördülő listában helyezkednek el, a kiválasztott kulcshoz tartozó többi mező értéke pedig egy űrlapon (form) jelenik meg. Amikor a listából kiválasztunk egy másik elemet, a form elemeit is módosítsuk megfelelőképpen. Ha módosítás történik az űrlapon, egy addig "disabled"-re állított "mentés" gomb aktívvá válik, ennek megnyomásakor pedig mentsük a módosításokat az adatbázisba. Amennyiben módosítva volt a form és egy új elemet akarunk kiválasztani a listából, anélkül, hogy megnyomtuk volna a "mentés" gombot, figyelmeztessük a felhasználót, illetve kérdezzük meg, hogy szeretné-e elmenteni előbb a módosításokat. A fenti feladatot AJAX technológia segítségével oldjuk meg.



4. Készítsünk egy HTML oldalt, mely egy X-0 játékhoz szükséges 3x3-as táblázatot tartalmaz.
   A játékot véletlenszerűen vagy a felhasználó vagy a számítógép kezdi. A táblázat megfelelő cellájára kattintva az ki lesz töltve X-el vagy 0-val, attól függően, hogy ki kezdte a játékot. A játékos lépését követően AJAX technológia segítségével meghívunk egy szerver-oldali kódrészt, mely a következő lépést generálja. Ugyancsak szerver-oldalon vizsgáljuk meg, hogy vége van-e a játéknak.



5. Készítsünk egy adatbázis-táblát, mely 18 db. bejegyzést tartalmaz, egy foci-bajnokság adatait tárolva. Egy bejegyzés az alábbi mezőket tartalmazza:
   • csapat neve
   • lejátszott mérkőzések száma
   • megnyert mérkőzések száma
   • döntetlenre játszott mérkőzések száma
   • elvesztett mérkőzések száma
   • lőtt gólok száma
   • kapott gólok száma
   • pontszám (nyerés: 3 pont, döntetlen: 1 pont)
   Jelenítsük meg az eddig bevitt adatokat egy HTML oldalon. Ugyanez az oldal egy űrlapot (form) is tartalmaz, mely lehetővé teszi a bajnokság aktuális fordulójának megfelelő 9 mérkőzés adatainak (ki kivel játszik), illetve a mérkőzések eredményeinek bevitelét. Az új adatok bevitele során rendszeresen aktualizáljuk az adatbázist, illetve az összesítő eredményeket megjelenítő táblázatot (AJAX technológia segítségével).



6. Készítsünk HTML oldalt, mely kezdetben egy felhasználónév bevitelét lehetővé tevő szövegmezőt tartalmaz. Ennek bevitelét követően szerver oldalon mentsük le ezt a felhasználót (amennyiben új felhasználó) egy adatbázisba. A továbbiakban a felhasználó üzeneteket küldhet a szerverre, melyet a szerver az összes többi kliens rendelkezésére bocsát.
   Egy bizonyos kliens bizonyos időközöként AJAX technológiát felhasználva (periodikusan) kérést küld a szerverre, az pedig elküldi neki az utolsó kérése óta érkezett új üzeneteket.



7. Készítsünk HTML oldalt, mely egy IT szaküzletben forgalmazott árucikkeknek megfelelő különböző tulajdonságokat tartalmaz különböző legördülő listákban. AJAX technológiát használva implementáljunk egy szűrő mechanizmust, a felhasználó által keresett termékek listázására a kiválasztott tulajdonságok alapján. (Pl. a felhasználó kikeresheti az adatbázisból a számára megfelelő laptopokat az alábbi tulajdonságok közül válogatva: gyártó cég, processzor, memória, HDD kapacitás, videokártya, stb.)
   Az adatbázis feltöltésére lehetőleg ne teljesen fiktív adatokat használjunk (Interneten lehet keresni egy konkrét IT cég kínálatát tartalmazó listát).

Hasznos hivatkozások:

• AJAX Tutorial - (W3Schools oldaláról)
• jQuery + AJAX