Példa zárthelyi dolgozat

Tudnivalók

• A feladatot a webprogramozas.inf.elte.hu szerveren kell elvégezni PHP és JavaScript segítségével.
• A megoldást egy wf2zh nevű mappába készítsd el a public_html mappán belül!
• A megoldások plágiumellenőrzésen esnek át a zh után. A gyanúsan hasonló megoldást adó hallgatókat megkérhetjük zh-ik megvédésére.
• A megoldáshoz bármilyen segédanyag felhasználható, kivéve a humán segítséget!
• A megoldások elkészítésére 105 perc áll rendelkezésre.
• Értékelés: 1 + a megoldott részfeladatok száma.
• Az értékelés helyben történik.
• Lényeg a működő alkalmazás, kinézet, kód szépsége nem számít.

Feladat

Készíts egy csillagok adatait kezelő alkalmazást. Az adatokat szerveroldalon fájlban tároljuk.

1. Készíts űrlapot, amelyen egy új csillag adatai vehetők fel! Ehhez meg kell adni a következő adatokat:

   • csillag neve (kötelező)
   • csillag típusa (kötelező, legördülő mező, értéke: nap, galaxis, szupernova, hullócsillag)
   • csillag vízszintes koordinátája (kötelező, szám, 0 és 500 között)
   • csillag függőleges koordinátája (kötelező, szám, 0 és 300 között)

   A fenti adatok mellett minden csillagnál tárolunk egy egyedi sorszámot (pl. amit a time() függvény állít elő)! Az adatok ellenőrzését PHP oldalon el kell végezni, és a hibaüzeneteket az űrlap felett meg kell jeleníteni.

2. Egy másik oldalon jelenítsd meg a csillagos eget a következő módon: Az ég egy egbolt azonosítójú div elem legyen. Ebben legyenek a csillagok, mindegyik egy újabb div elemként megjelenve. Mindegyik csillagot az égbolton a koordinátái szerint helyezzünk el (top és left). A div tartalma szupernovánál X, hullócsillagnál /, minden egyéb esetben *. Például:

   <div id="sky">
       <div style="top: 30px;left: 20px;">*</div>
       <div style="top: 80px;left: 10px;">/</div>
       <div style="top: 20px;left: 30px;">*</div>
       <div style="top: 45px;left: 40px;">X</div>
       <div style="top: 60px;left: 50px;">*</div>
   </div>

   A hozzá tartozó stílusok:

   #egbolt {
       width:  500px;
       height: 300px;
       position: relative;
       overflow: hidden;
   }
   #egbolt div {
       position: absolute;
       cursor: pointer;
   }

   Az oldalon helyezz el egy legördülő mezőt, amelyben a csillagok típusai jelennek meg (lehet üres is), mellé pedig egy gombot. A gombra kattintva töltődjön újra az oldal, és csak a legördülő mezőben kiválasztott csillagtípusok jelenjenek meg az égbolton.

3. A csillagos égbolton egy csillagra kattintva legyen lehetőség a róla szóló információkat megtudni. A csillag azonosítóját érdemes a csillag div elemének attribútumaként tárolni (pl. data-azon="123", aminek kiolvasásához hasznos lehet a getAttribute() függvény a következő formában: elem.getAttribute('data-azon')). Az információkat AJAX-szal kérjük le a szerverről, és jelenítsük meg az égbolt alatt. Ha hullócsillagra kattintottunk, akkor a csillag animálva essen is le az égről (függőleges koordinátája lógjon ki az égboltból)!

4. Legyen lehetőség a csillagos égbolton kijelölni egy területet, például úgy, hogy egy erre utaló gomb megnyomását követően az égbolton először a bal felső sarkot, majd a jobb alsó sarkot jelöljük ki. Ezt követően a program rajzolja ki a kijelölt területnek megfelelő téglalapot az égboltra (pl. egy megfelelően formázott és elhelyezett div elem segítségével), majd írja ki a kijelölt területen található csillagok számát, és a csillagokat fesse pirosra!