Téma ismertetése
- A döntő eredményei
- 1. forduló
1. forduló
- 2. forduló
2. forduló
Hozz létre egy weblapot a minta és a leírás alapján, amellyel Nagyi kifőzdéjéből lehet ebédet rendelni!
Minta a weblapról:
Stíluslap
Csatolj a weblaphoz egy stilus.css nevű fájlt, melyen az alábbi formázásokat állítod be!
- Háttérszín (#FFCC66 , fehér, #FFCC66)
- A fő szakasz (div) szélessége:80%, magassága: 700px
- középen lévő doboz
- kerete: fekete 2px
- lekerekített sarkok: 20px
- háttérszín: (narancssárga, fehér, narancssárga)
- Megrendelő adatai elemcsoport
- magassága 200px,
- szélessége 32%
- Menü elemcsoport
- magassága 200px,
- szélessége 62%
- Gomb
- háttérszíne: (#FFCC66 , fehér, #FFCC66)
- szélessége150px,
- magassága 50px
- kerekítés:20px
- Félkövér szövegek a minta alapján
A weblap tartalmazzon egy fő szakaszt (div), ennek azonosítja fo legyen!
Elemcsoportok
Megrendelő adatai elemcsoport
Név, telefonszám, email, cím: felirat és szövegdoboz
Menü elemcsoport
A menu.csv fájlból olvasd be az aktuális menüt és jelenítsd meg táblázatos formában! Egészítsd ki a táblázatot a nap felirataival illetve az oszlopokat A és B felirattal a weblapon!
Rendelés elemcsoport
Soronként a hétköznapok neve után a rendelendő menük száma A és B menüből szám típusú szövegdobozzal (), aminek alapértelmezett értéke 0, maximális értéke 10, valamint Jelölőnégyzet, hogy az illető kér e szállítást.
Üzenet legyen küldhető egy hosszabb szöveget megjelenítésére alkalmas szövegdoboz segítségével.
Visszajelzés elemcsoport
Nagyi értékelése egy csúszkával, melynek minimális értéke 1, maximális értéke 10. Az értékelés mellett az értékelés dátumát is meg kell adni, melyet legördülő menüből lehessen kiválasztani.
Események a Rögzít gomb megnyomása után
Rendelés
Rendelés esetén íródjék ki a képernyőre, hogy mit rendeltünk (csak az íródjon ki, amiből rendeltünk), milyen néven, milyen adatokkal, a fizetendő összeggel együtt. Az ebéd ára 1000 Ft, a szállítás 300 Ft. A rendeles.csv fájlba is íródjék ki a rendelés minden adatával, a rendelő adataival és a fizetendő összeggel együtt. Az előző rendelések mindig maradjanak benne a rendeles.csv fájlban, ehhez legyenek hozzáfűzve a további rendelések.
Értékelés
Nagyi értékelése a megrendelő által kitöltött dátummal együtt legyen eltárolva az ertekeles.csv fájlban. Az értékelés leadása után a Köszönjük az értékelését! szöveg jelenjen meg a weblapon.
- Döntő
Döntő
Készíts webhelyet az Országos Kékkör túráinak tervezésére, teljesítésének adminisztrációjára!
1. oldal: Túraválasztás
Ezen az oldalon lehet kiválasztani, hogy a Kékkör melyik túráján szeretnénk túrázni.
Az 1. oldalon megjelenő űrlapelemek:
- Legördülő lista az alábbi választási lehetőségekkel
- Országos Kéktúra
- Dél-dunántúli Kéktúra
- Alföldi Kéktúra
- Túratervezésre szolgáló gomb (felirata: Túratervezés)
- Teljesítés adminisztrációjára szolgáló gomb (felirata: Túrateljesítés)
Az 1. oldal működése
A legördülő listából lehessen választani, hogy az Országos Kékkör mely részén szeretnénk túrát tervezni vagy adminisztrálni.- Ha kiválasztunk egy listaelemet és a Túratervezés gombra kattintunk, akkor a 2. (Túratervezés) oldalra jutunk, és a kiválasztott túraútvonal szakaszait látjuk.
- Ha kiválasztunk egy listaelemet és a Túrateljesítés gombra kattintunk, akkor a 4. (Túrateljesítés) oldalra jutunk, és a kiválasztott túraútvonal szakaszait látjuk.
- Túrateljesítés adminisztrációjára csak regisztrált, bejelentkezett felhasználóknak van lehetőségük. A regisztráció az 5. oldalon történik.
- Ha a Túrateljesítés gombra kattint a felhasználó, és még nem jelentkezett be, akkor előbb a bejelentkező oldalra (6. oldal) kerüljön, majd bejelentkezés után onnan tovább a Túrateljesítés oldalra.
2. oldal: Túratervezés
Ezen az oldalon lehet útvonalat tervezni.
A 2. oldalon megjelenő űrlapelemek:
- jelölőnégyzet a túraszakasz kiválasztására soronként
- Tervezés gomb
Az 1. oldalon (Túraválasztás) kiválasztott túraútvonal szakaszai jelennek meg egymás alatt felsorolva. Egy-egy sorban a következő adatok jelenjenek meg:
- jelölőnégyzet a túraútvonal kiválasztására,
- a túraszakasz kezdőpontja,
- a túraszakasz végpontja,
- a túraszakasz hossza (km),
- szintemelkedés (m),
- szintcsökkenés (m).
Az adatokat adatbázisból vagy fájlból olvasd ki. Az adatokat az ok.csv (Országos Kéktúra), ddk.csv (Dél-dunántúli Kéktúra), ak.csv (Alföldi Kéktúra) fájlok tartalmazzák.
A 2. oldal működése
Ha véletlenül nem összefüggő útvonalat jelöltünk be, akkor jelenjen meg figyelmeztető ablak a következő üzenettel: Nem összefüggő az útvonal!
Összefüggő útvonal esetén kerüljünk át a harmadik oldalra (Túraterv).
3. oldal: Túraterv
Ezen az oldalon az elkészített túraterv jelenik meg. Ezt az oldalt nyomtatni szeretnénk, emiatt állítsd be, hogy nyomtatáskor a háttér és a fejléc ne látszódjon, csak a tervezett útvonal az adataival.
A 2. oldalon kiválasztott útvonalak íródjanak ki adataikkal együtt az oldalra, egy-egy sorban a következők jelenjenek meg:
- a túraszakasz kezdőpontja,
- a túraszakasz kezdőpontja pecsételőhely-e (zárójelben a túraszakasz kezdőpontja után: PH),
- a túraszakasz végpontja,
- a túraszakasz végpontja pecsételőhely-e (zárójelben a túraszakasz végpontja után: PH),
- az egyes túraszakaszok hossza (km).
- a tervezett túra teljes hossza (km) = a tervezett túraszakaszok összege,
- a tervezett túra szintemelkedése (m) = a tervezett szakaszok szintemelkedésének az összege,
- a tervezett túra szintcsökkenése (m) = a tervezett szakaszok szintcsökkenésének az összege.
4. oldal: Túrateljesítés
Ez az oldal a megtett útvonalak megtekintésére és rögzítésére szolgál.
Az eddig bevitt túraszakaszok túraútvonalanként (Országos Kéktúra, Dél-dunántúli Kéktúra, Alföldi Kéktúra) ebben a sorrendben, egymás alatt jelenjenek meg.Túraútvonalakon belül dátum szerint növekvő sorrendben jelenjenek meg a megtett túraszakaszok, távolsággal együtt. Az egy nap alatt megtett túraszakaszok összes kezdőhelye jelenjen meg, a következő pontig megtett távolsággal.
Új teljesítés rögzítésére a már rögzített adatok feletti űrlapon legyen lehetőség.A 4. oldalon megjelenő, rögzítésre szolgáló űrlap elemei:
- Naptár a dátum rögzítésére,
- Legördülő lista a túra kezdetének kiválasztására,
- Legördülő lista a túra végének beállítására,
- Rögzítő gomb
A 4. oldal működése
A bevitt adatok kerüljenek be adatbázisba. Az oldal újralistázásakor a teljesítések mindig jelenjenek meg.5. oldal: Regisztráció
Ezen az oldalon lehet regisztrálni a weboldalra. A regisztrációhoz e-mail-cím és jelszó megadása szükséges. E párossal lehet az oldalra belépni is.
Az 5. oldalon megjelenő űrlap elemei:
- E-mail-cím megadására szolgáló szövegdoboz
- Jelszó megadására szolgáló szövegdobozból kettő darab
- Regisztráció gomb
Az 5. oldal működése
- Ha az e-mail-cím nem megfelelő formátumú, kapjunk hibaüzenetet: Hibás az e-mail-cím!
- Nem megfelelő az e-mail-cím formátuma, ha
- az angol ábécé betűin, a számokon, a ponton és a @ karakteren kívül egyéb karakter is szerepel benne
- nincsen benne @ jel
- egynél több @ jel szerepel benne
- a @ jel utáni részben a legutolsó pont után négynél több karakter szerepel
- Ha a két jelszómezőbe nem ugyanazt a jelszót adjuk meg, kapjuk ezt a hibaüzenetet: Nem egyező jelszavak!
- Ha megfelelő az e-mail-cím formátuma és a jelszavak is egyeznek, az e-mail-cím - jelszó páros kerüljön be adatbázisba.
6. oldal: Belépés
Ezen az oldalon lehet belépni a weboldalra.
A 6. oldalon megjelenő űrlap elemei:
- E-mail-cím megadására szolgáló szövegdoboz
- Jelszó megadására szolgáló szövegdoboz
- Belépés gomb
A 6. oldal működése
Ha nem megfelelő e-mail-cím - jelszó párost írtunk be, akkor hibaüzenetet kapunk: Nem megfelelő e-mail-cím vagy jelszó!Ha jó a beírt e-mail-cím - jelszó páros, akkor sikeresen bejelentkeztünk, tudjuk adminisztrálni az útvonalakat.
A bejelentkezés kezelése
Ha nincs felhasználó bejelentkezve, a jobb felső sarokban legyenek linkek a következő felirattal: Belépés / Regisztráció. A Belépés link a 6. oldalra vigyen, a Regisztráció link az 5. oldalra.
Ha be van jelentkezve felhasználó, akkor a bejelentkezett felhasználó e-mail-címe jelenjen meg az oldal jobb felső sarkában, utána a Kilépés gomb. Ha a Kilépés gombra kattintunk, akkor a belépett felhasználót léptesse ki a rendszer.
Az oldalak kinézete
Az oldalak kinézete legyen egységes, az alábbi beállításokkal.- Az oldalak háttere a kekdeszka.png kép legyen.
- Az oldalon "Courier New", Courier, monospace betűcsaládot használj, a betűk színe fehér legyen.
- Az oldal alapértelmezett betűmérete, a bekezdések betűmérete 16 képpont, a szöveg balra igazított.
- A hiperhivatkozás színe minden állapotban fehér legyen, ne legyen aláhúzva, de legyen félkövér betűvel írva.
- Az oldal tartalmi része 800 képpont széles részen jelenjen meg, melynek mindkét oldalán egyforma széles üres rész legyen.
- A fejlécben az Okt_trail_marking.JPG kép legyen
- A képet ne szerkeszd át.
- A képnek csak az alsó 200 képpont magas része látszódjon, teljes szélességében.
- A képen szerepeljen az Országos kékkör felirat. Betűi 56 képpont méretűek, félkövérek legyenek.
- A szöveg a bal felső saroktól vízszintesen 200 képponttal, függőlegesen 60 képponttal legyen eltolva a mintának megfelelően.
- A Belépésre, regisztrációra szolgáló linkek a fejléc fölött találhatók, jobbra igazítva.
- A fejléc alatt a tartalom 50 képpontnyira kezdődik.
- Az oldalakon szereplő minden gomb és legördülő lista
- 400 képpont széles,
- áttetsző hátterű,
- 2 képpont vastagon fehér színnel szegélyezett,
- belső margója 5 képpontnyi,
- külső margója 10 képpontnyi,
- felirata félkövér,
- az oldal közepén helyezkedik el.
- A táblázatokban csak a vízszintes szegélyek legyenek megjelenítve 1 képpontnyi fehér vonallal.
Minta:
Forrás:
http://www.kektura.click.hu
https://hu.wikipedia.org/wiki/Orsz%C3%A1gos_K%C3%A9kt%C3%BAra#/media/File:Okt_trail_marking.JPG