12 ikt - Új projekt feladat

Az új projektben konkrét feladatot kaptok. Készítsetek egy weboldalt, amely bemutatja az osztály átlagának számítását és az elérhető pajzsokat egy verseny keretében. Kardinális kérdésetek, hány óra áll rendelkezésetekre, ikt és web órán is dolgozhattok rajta, nem választjuk élesen ketté. A héten 4 órában el kell, hogy mindenki tudja készíteni, és 5-ik, 6-ik órában megnézzük az előadásokat. Két jegyet kaptok, ikt és web-re is. Ikt-nél főleg a közös munkát fogom értékelni. Webnél a technológiát.

Görgess le végig az oldalon, a képek alatt is van egy kis segítség, ne csak annyit olvass el, ami most Neked épp a böngészőben megjelenik! Akinek nem inge ne vegye magára....

A weboldal két fő részből áll:

1. Pajzsok oldal (főoldal)
2. Átlagszámító oldal

1. Pajzsok oldal (főoldal - index.html)

1. Hozz létre egy index.html fájlt, amely tartalmazza a pajzsok oldal tartalmát.
2. Az oldal tetején jelenjen meg egy üdvözlő szöveg:
   • Cím: „Indul a tanulmányi verseny liga a pajzsokért”
   • Leírás: „Kedves diákok! A verseny során elnyerhettek egy pajzsot. Azt, hogy melyiket, az az osztály átlagától függ.”

   • Pontozás és elnyerhető pajzsok

     • 4,6-5 között Legendák ligája
     • 4-4,5 között Smaragd liga
     • 3,6-4 között Gold liga
     • 3-3,5 között Silver liga
     • 2-3 között Bronz liga
     • 2 alatt - reményeink szerint ilyen nem fordulhat elő.
3. Egy felsorolással mutasd be az elérhető pajzsokat és az elérésükhöz szükséges átlagpontszámot.
4. Készíts egy „pajzs” galériát a megadott képekkel (img/legends.png, img/emerald.png, stb.). Minden pajzs rendelkezzen:
   • Képpel, névvel és egy rövid leírással.
   • 3D forgatással: Amikor a felhasználó ráviszi az egeret, a pajzsok forgatással mutatják meg a hátoldalon lévő szöveget, amely az adott pajzs eléréséhez szükséges pontszámot írja le.
5. Az oldal alján legyen egy gomb, amely a calc.html oldalra vezet. A gomb szövege: „Osztály jegyeinek átlagszámítása”.

index.html:

ha valmelyik pajzsra ráhúzzuk az egeret forduljon el, és jelenjen meg rajta az a szöveg, hogy mikor érhető el

Átlagszámító oldal (calc.html)

1. Hozz létre egy calc.html fájlt, amely az osztály átlagának kiszámítását végzi.
2. Az oldal tetején jelenjen meg a cím: „Osztály jegyeinek átlagszámítása”.
3. Készíts egy szövegmezőt, amelybe a felhasználók beírhatják az osztály jegyeit (vesszővel elválasztva). A placeholder legyen: „pl. 5, 4, 3, vagy ha tizedes, akkor ponttal válaszd el: 2.7”.
4. Készíts egy gombot „Számold ki az átlagot” felirattal, amely elindítja az átlag számítását.
5. A gomb lenyomására:
   • Ellenőrizze a program, hogy a bevitt értékek számok-e.
   • Számolja ki az átlagot, és jelenítse meg az átlagértéket az oldalon.
   • Az átlag alapján jelenítse meg az elért pajzsot képpel együtt.
6. Az oldal alján legyen egy visszalépési gomb, amely visszavisz az index.html főoldalra. A gomb felirata: „Vissza a főoldalra”.

ha a felhasználó felsorolja a jegyeket, akkor jelenítse meg az eredményt:

Írjatok egy javascript kódot, amely kiszámolja az eredményt, és megjeleníti az eredménynek megfelelő adatokat. 

Stílusok (style.css)

1. Háttér: Használj zöld-arany-szürke színátmenetes hátteret a teljes oldalhoz.
2. Középre igazítás: Minden elem legyen középre igazítva a wrapper osztály segítségével.
3. Gombok stílusa: A gombok legyenek világoszöldek, lekerekített sarkokkal, és kapjanak árnyékot. Egérrel való rámutatáskor a háttérszín sárgára változik.
4. Pajzsok: A pajzsok legyenek kerek keretekben, zöld árnyékkal, és a képek helyesen legyenek középre igazítva.
5. Reszponzivitás: Gondoskodj róla, hogy a pajzsok elrendezése különböző eszközökön is jól mutasson:
   • Teljes nézetben: 5 pajzs egy sorban.
   • Tabletes nézetben: 3 pajzs egy sorban.
   • Mobil nézetben: 2 pajzs egy sorban.

4. JavaScript (calc.html-hez)

1. Készíts egy calculateAverage függvényt, amely:
   • Feldolgozza a beírt jegyeket, ellenőrzi, hogy csak számokat tartalmaznak.
   • Számolja ki a jegyek átlagát.
   • Az eredmény alapján jelenítse meg a megfelelő pajzsot képpel és szöveggel.
2. Ha az átlag értéke meghaladja a megadott határértékeket (pl. 4.6 és 5 között), akkor a megfelelő pajzs jelenjen meg a gratulációs szöveggel.

Példák

Pajzsok oldal - Példa tartalom

• Legend Badge - „A jutalom, ha az osztályotok átlaga 4.6 és 5 között van.”
• Emerald Badge - „A jutalom, ha az osztályotok átlaga 4 és 4.5 között van.”
• Gold Badge - „A jutalom, ha az osztályotok átlaga 3.6 és 4 között van.”

Átlagszámító oldal - Példa eredmények

• Ha az osztály átlaga 4.7, jelenjen meg a Legend Badge és az üzenet: „Gratulálok! Az osztályotok a Legend szintet érte el, az osztály átlagotok: 4.7”

Tesztelés: 

Teszteld az oldalt különböző képernyőméreteken, hogy minden reszponzív legyen.

Használd a html és css validátor oldalakat, készítsetek az eredményről képernyő képet. 

Ellenőrizd, hogy az összes képfájl és link helyesen van beállítva.

A JavaScript kódot teszteld többféle értékkel (pl. tizedesjegyekkel), hogy megbizonyosodj a helyes működésről. A kódban folyamatosan írasd ki az eredményt a konzolra, kommentezd, melyik lépéseddel milyen műveltet hajtasz végre. 

Értékelés szempontjai

1. HTML felépítés - Minden szükséges elem megtalálható és helyesen van elhelyezve.
2. CSS stílusok - A stílusok megfelelően alkalmazkodnak a feladathoz és reszponzívak.
3. JavaScript működés - Az átlagszámítás helyesen működik, és a megfelelő pajzs jelenik meg az átlagértéktől függően.
4. Átlátható mappa szerkezet!!! (képek külön mappában, css külön mappában)
5. Funkcionalitás - Az oldalak közötti navigációs gombok működnek.
6. Csapatmunka! Kinek mi volt a feladata a megoldás során. Egyetlen dolgot kérek dokumentálni, melyik órán, ki mivel foglalkozott, a feladat mely részének megoldásával, milyen segítséget vettetek igénybe.
7. Github-ra való feltöltés!
8. Előadás módja (hajlandóság kiállni a táblához, magabiztos előadás, felhasználói és fejlesztői szempontból is kérem, valamint röviden angol nyelven, mindkét csapattagnak kb ugyannyit kell beszélnie)

Képek: 

Egy kis segítség a javascript függvény megírásához:

1. HTML előkészítése és eseménykezelő hozzáadása

   • Kezdj egy HTML fájllal, amely tartalmaz egy szövegmezőt (input, ide írhatod be a jegyeket) és egy gombot (amire kattintva elindul a számítás).
   • Külön script fájlnál ellenőrizd, csatoltad e a script.js-t. (konzolba kiírás: "fut")
   • A gombhoz adj egy eseménykezelőt, amely a kattintáskor meghív egy függvényt. Ezt JavaScript-tel tudod megtenni. Persze a script fájlban is megírhatod az esemény figyelését (addEventListener - ha nem emlékszel a működésére a w3schoolon nézz utána).

2. Függvény létrehozása és elemek összegyűjtése

   • Hozz létre egy függvényt a JavaScript fájlban, amiben végrehajtod a számítást.
   • A függvény megírása elején azonnal elenőrizd le fut e a függvény (konzol: "fv.fut".)
   • A konzolban ellenőrizheted, hogy valóban hozzáférsz-e ezekhez a változókhoz, hogy minden a terv szerint működik-e. Amikor elkezded összegyűjteni a szükséges adatokat, ellenőrizd a konzolban kezedbe került e az eredmény, vagy az adott html elem!!!
   • A kommenteket és a konzolba való kiíratásokat hagyd benne a kódban! Onnan látom, hogy folyamatosan teszteltél, és utána néztél egy-egy beépített függvény működésének! 
   • Gyűjtsd össze azokat az elemeket, amelyeket használni fogsz:
     • Hozz létre egy változót a szövegmezőhöz, ahonnan a jegyeket fogod beolvasni.
     • Hozz létre egy változót, amiben az eredményt fogod megjeleníteni. Nyilván a html-ben is létre kell hoznod ehhez egy elemet, ahová majd megjeleníted az eredményt.

3. A bevitt adat feldolgozása

   • A szövegmezőből olvasd ki a bevitt adatokat. Ezt tárold egy változóban.
   • Ellenőrizd a konzolban, hogy valóban megkaptad-e az adatot, és látod-e a beírt szöveget.
   • 
     
     
     
   • Ezen a ponton láthatod, hogy több adattal van dolgod, tehát tömbre lesz szükséged!

4. Jegyek tömbbe alakítása

   • A beírt adatokat, amelyek vesszővel vannak elválasztva, alakítsd át tömbbé. Használj olyan függvényt, amely a szöveget külön elemekre bontja. pl. split(); map(); parseFloat(); trim() nézz utána a használatuknak a w3schoolon, és kommentbe jegyezd fel mit tudtál meg róluk, majd próbáld meg használni őket a feladat megoldása során.
   • Mivel a jegyek számként lesznek kezelve, alakítsd át a szöveges elemeket számokká. Használhatsz olyan módszert, amely minden elemet egyenként átalakít számmá.
   • Ellenőrizd a konzolban, hogy sikerült-e tömbként és számként eltárolni az adatokat.

5. Érvényesség ellenőrzése

   • Ellenőrizd, hogy a tömbben lévő elemek mind számmá alakíthatók-e. Használhatsz olyan függvényt, amelyik megmondja, hogy van-e nem szám jellegű elem a tömbben.
   • Ha hibás adatot találsz, jeleníts meg egy figyelmeztető üzenetet, és állítsd le a számítást.

6. Átlag számítása

   • Számold össze a tömb elemeit egy beépített módszerrel, amely minden elemet hozzáad egy kezdeti értékhez.
   • Oszd el a kapott összeget a tömb hosszával, hogy megkapd az átlagot.
   • A konzolban ellenőrizheted az átlag értékét, hogy megbizonyosodj róla, helyes-e a számítás.

7. Eredmény megjelenítése

   • Írasd ki az átlagot a HTML-ben egy kijelölt területre, például egy üres <p> vagy <div> elembe. Használd a templateLiteral módszert, de a + jellel való konkatenális is jó. 

8. Badge megjelenítése az átlag alapján

   • Az átlag alapján dönts el, hogy melyik „pajzsot” jeleníted meg. Használj feltételes szerkezetet, hogy különböző tartományokhoz különböző képeket rendelj.
   • Az adott tartományban állítsd be a kép forrását, és jelenítsd meg a megfelelő szöveget. Ne legyen végtelen lebegőpontos szám használd a toFixed() metódust, csak 2 tizedesig jelenjenek meg.

Hasznos JavaScript függvények és módszerek, amelyekre érdemes rákeresni

• addEventListener: Eseménykezelő hozzáadása egy HTML elemhez.
• console.log: Üzenetek megjelenítése a böngésző konzoljában, ami segít a hibakeresésben.
• split(): Szöveg elemeire bontása, például vesszők mentén.
• map(): Minden tömbelemet átalakító metódus, például szöveget számmá alakít.
• parseFloat(): Szöveges szám konvertálása lebegőpontos számmá.
• some(): Annak ellenőrzése, hogy a tömb tartalmaz-e olyan elemet, amely megfelel egy feltételnek.
• reduce(): A tömb elemeinek összegzése egy kezdőértékből kiindulva.

13B Űrlap készítés és feldolgozás dolgozat

Feladat: Készíts egy HTML űrlapot a következő adatok megadására:

• Készíts egy új HTML fájlt form.html néven.
• Név (szövegmező)
• Email cím (email mező)
• Tanfolyam választása (legördülő menü: Frontend, Backend, Fullstack)
• ÁSZF elfogadása (checkbox)
• Az űrlap mezői mind kötelezőek, ezért használd a required attribútumot, hogy ne lehessen üresen elküldeni.
• Használj HTML5 elemeket, hogy az űrlap megfelelően validálja a bevitt adatokat.
• Készíts egy CSS fájlt style.css néven, amellyel a minta szerint formázod az űrlapot.
• Az űrlapnak POST metódussal küld el az adatokat egy form_handler.php nevű PHP fájlnak. 
• Ellenőrizd érkezett e post kérés.
• Tisztítsd meg a bevitt adatokat SQL injection és XSS támadások ellen.
• Ellenőrizd a bevitt adatokat, ha hibás adatot küld a felhasználó, figyelmeztető üzenetet kapjon.

Eredmény:

12 B web - Vacsora foglalási rendszer

 Ebben a feladatban egy egyszerű HTML és JavaScript alapú vacsora foglalási rendszert kell létrehoznod, ahol a felhasználó megadhatja a nevét, kiválaszthat egy éttermet, valamint dönthet különböző szolgáltatások mellett, mint például vacsora típus és extra szolgáltatások. A végén a rendszer kiszámítja a teljes költséget és megjeleníti a foglalás részleteit.

Teendők:

1. Név beírása: A felhasználó egy szövegmezőben megadja a nevét.
2. Étterem kiválasztása: A felhasználó kiválaszthatja, hogy melyik étteremben szeretne vacsorázni. Az étteremhez tartozó költség az opciókban jelenik meg.
3. Vacsora típusának kiválasztása: A felhasználó választhat a standard vacsora (nincs extra költség) és a gourmet vacsora között, amelyhez egy extra költség társul.
4. Extra szolgáltatások választása: A felhasználó választhatja, hogy kér-e parkolási lehetőséget és italcsomagot. Mindkettő extra költséget jelent.
5. Végösszeg kiszámítása: A felhasználó megnyomja a „Számold ki a végösszeget” gombot, amely kiszámítja az összes kiválasztott szolgáltatás árát és megjeleníti a végösszeget.
6. Foglalási adatok megjelenítése: A rendszer kiírja a felhasználó nevét és a foglalás teljes költségét.

Elvárások:

• Az űrlap beviteli mezői a következő elemeket tartalmazzák:
  • Egy szövegmező a név megadására.
  • Egy legördülő lista, amely három különböző éttermet tartalmaz az étterem árával.
  • Rádiógombok, amelyekkel a felhasználó kiválaszthatja a vacsora típusát (standard vagy gourmet).
  • Két checkbox, amivel extra szolgáltatásokat választhat (parkoló és italcsomag).
• A gomb megnyomásakor történjen a végösszeg kiszámítása, és a foglalás részleteinek megjelenítése.
• Ellenőrizze a rendszer, hogy a név mező kitöltött-e, és csak akkor végezze el a számítást, ha van név megadva.
• JavaScript-et használj a végösszeg számításához és az adatok megjelenítéséhez!

Példák:

• Ha a felhasználó az „Olasz Éttermet” választja (5000 Ft), gourmet vacsorát (3000 Ft), parkolót (1000 Ft) és italcsomagot (1500 Ft), a teljes költség 10 500 Ft lesz.
• Ha nem választ extra szolgáltatásokat és a standard vacsorát kéri, akkor csak az étterem árát kell figyelembe venni.

Bónusz feladat:

• Tedd dinamikussá a rendszert úgy, hogy az extra szolgáltatások és vacsora típusok is különböző áron jelenjenek meg a felhasználó választása alapján.

13 B- PHPdoc kommentezés

 A PHPDoc egy dokumentációs szabvány, amely lehetővé teszi a kódolók számára, hogy pontosan kommentálják a PHP kódjukat, így más fejlesztők és maga a fejlesztő is könnyebben megérthesse a kód működését. Ezenkívül az IDE-k (például PHPStorm) és a dokumentációs eszközök automatikusan feldolgozhatják ezeket a kommenteket, hogy hasznos információkat nyújtsanak.

Kommentezés szintaxisa

A PHPDoc kommentek többsora zárójelben történik:

/**

 * Ez a komment leírja, hogy mit csinál a funkció.

 * További részletek is itt jelennek meg.

 */

Főbb PHPDoc annotációk

1.     @var Használat: Egy változó típusát és célját adja meg.
Formátum: @var típus $változónév
Példa:

/** @var int $age A felhasználó életkora. */

public $age;

2.     @param Használat: Egy függvény/módszer paramétereit dokumentálja.
Formátum: @param típus $paraméterLeírás
Példa:

/**

 * Kiszámítja a felhasználó életkorát.

 *

 * @param int $yearOfBirth A születési év.

 * @return int A felhasználó életkora.

 */

public function calculateAge($yearOfBirth) {

    return date('Y') - $yearOfBirth;

}

3.     @return
Használat: Egy függvény visszatérési értékét írja le.
Formátum: @return típus Leírás
Példa:

/**

 * @return string A felhasználó teljes neve.

 */

public function getFullName() {

    return $this->firstName . ' ' . $this->lastName;

}

4.     @method Használat: Egy osztály által dinamikusan elérhető függvényeket dokumentál.
Formátum: @method típus methodName(paramétertípus $paraméterLeírás)
Példa:

/**

 * @method void prepare(string $sql)

 * @method void bind_param(string $types, mixed ...$vars)

 */

5.     @property Használat: Egy osztály olyan tulajdonságait írja le, amelyeket nem közvetlenül definiáltak, de elérhetők dinamikusan.
Formátum: @property típus $tulajdonságLeírás
Példa:

/**

 * @property string $name A felhasználó neve.

 */

6.     @throws Használat: Ha egy függvény kivételt (exception) dobhat, dokumentálja, hogy melyik típusú kivétel dobható.
Formátum: @throws ExceptionTípus Leírás
Példa:

/**

 * @throws InvalidArgumentException Ha a bemeneti adat érvénytelen.

 */

public function setAge($age) {

    if ($age < 0) {

        throw new InvalidArgumentException('Érvénytelen életkor');

    }

}

7.     @deprecated Használat: Jelzi, hogy egy függvény, metódus, vagy tulajdonság elavult, és nem ajánlott a használata.
Formátum: @deprecated Leírás
Példa:

/**

 * @deprecated Ez a metódus elavult. Használja a getNewData() függvényt.

 */

public function getData() {

    // régi logika

}

Gyakran használt PHPDoc annotációk összefoglalása

• @var: Egy változó típusát írja le.
• @param: Függvény vagy metódus paramétereinek leírása.
• @return: A visszatérési érték típusát és célját dokumentálja.
• @method: Dinamikusan elérhető metódusok leírása.
• @property: Olyan osztály tulajdonságait írja le, amelyeket dinamikusan lehet elérni.
• @throws: Kivétel dobásának leírása.
• @deprecated: Elavult kód jelölése.

Gyakorlati feladatok

1.     Annotációk azonosítása és helyes használata:

• Írj egy egyszerű PHP osztályt, amely egy adatbázis csatlakozást és egy select() függvényt tartalmaz.
• Kommentezd az osztályt PHPDoc annotációkkal, például @var, @param, @return és @throws.

2.     Dokumentáció generálása:

• Használj eszközt (pl. phpDocumentor), hogy automatikusan generálj dokumentációt a kommentjeid alapján.

<?php

 

/**

 * Adatbázis kapcsolatot kezelő osztály.

 *

 * Ez az osztály kapcsolatot létesít egy MySQL adatbázissal,

 * és lehetővé teszi az SQL utasítások végrehajtását.

 */

class DatabaseConnection {

    /**

     * @var mysqli $connection A MySQL adatbázis kapcsolat objektuma.

     */

    private $connection;

 

    /**

     * Létrehozza az adatbázis kapcsolatot.

     *

     * @param string $host Az adatbázis kiszolgáló neve.

     * @param string $user Az adatbázis felhasználóneve.

     * @param string $password Az adatbázis felhasználó jelszava.

     * @param string $database Az adatbázis neve.

     *

     * @throws Exception Ha nem sikerül a kapcsolat létrehozása.

     */

    public function __construct($host, $user, $password, $database) {

        $this->connection = new mysqli($host, $user, $password, $database);

 

        if ($this->connection->connect_error) {

            throw new Exception('Kapcsolódási hiba: ' . $this->connection->connect_error);

        }

    }

 

    /**

     * Végrehajt egy SELECT lekérdezést és visszaadja az eredményt.

     *

     * @param string $sql A végrehajtandó SQL lekérdezés.

     * @param int $id A lekérdezésben használt azonosító.

     *

     * @return array A lekérdezés eredménye tömbként.

     */

    public function select($sql, $id) {

        $stmt = $this->connection->prepare($sql);

        $stmt->bind_param('i', $id);

        $stmt->execute();

        $result = $stmt->get_result();

 

        return $result->fetch_all(MYSQLI_ASSOC);

    }

    /**

     * Bezárja az adatbázis kapcsolatot.

     */

    public function close() {

        $this->connection->close();

    }

}

?>

2. PHPDoc dokumentáció generálása

Ehhez a kódhoz használhatod a phpDocumentor nevű eszközt, amely automatikusan feldolgozza a PHPDoc stílusú kommenteket, és HTML alapú dokumentációt készít belőlük.

• Telepítsd a phpDocumentor eszközt:

composer require --dev phpdocumentor/phpdocumentor

• Futtasd a phpDocumentor-t a projekt könyvtárában:

./vendor/bin/phpdoc

Ez generál egy HTML fájlt, ahol a fenti kód dokumentációját szépen formázva megtekintheted.

13. B 14. A REST API alkalmazás fő követelményei

Az eddigiekben számos megoldással ismerkedtünk, hogyan hajthatunk végre különféle műveleteket. A záródolgozat kimeneti követelménye, hogy az alkalmazásnak meg kell felelnie a RESTful API követelményeinek. A következőkben megnézzük, hogy melyek ezek a követelmények, melyet később a gyakorlatba is átültetünk.

1. Kliens-szerver architektúra

A REST API egyértelműen elválasztja a klienst (például egy böngésző, mobilalkalmazás vagy más API-felhasználó) és a szervert. A szerver nem tárol kliens oldali állapotokat (stateless), csak válaszokat küld a kliens által küldött kérésekre. Ez a felépítés biztosítja a feladatok tiszta szétválasztását.

2. Stateless (Állapotmentesség)

A RESTful API-k stateless-ek, ami azt jelenti, hogy minden egyes kérésnek teljesnek kell lennie önmagában. A szerver nem tárolhat kliens oldali adatokat egyik kéréstől a másikig. Minden kérésnek tartalmaznia kell minden szükséges információt (pl. hitelesítési adatok, kliens állapot), hogy a szerver megfelelően válaszolhasson.

3. HTTP protokoll használata

A REST API-k az HTTP-t használják, és kihasználják az HTTP-szabvány által biztosított metódusokat, például:

• GET: Adatok lekérdezésére használjuk.
• POST: Új erőforrás létrehozására.
• PUT: Meglévő erőforrás frissítésére vagy felülírására.
• PATCH: Egy meglévő erőforrás részleges frissítésére.
• DELETE: Erőforrás törlésére.
• OPTIONS: Lekérdezés a szerver által támogatott műveletekről.

4. Erőforrás-alapú URL struktúra

A RESTful API-kban minden erőforráshoz egy egyedi URL társul. Az URL-eket úgy kell megtervezni, hogy könnyen érthetők és logikailag szervezettek legyenek. Például:

• GET /contacts: Az összes névjegy lekérdezése.
• GET /contacts/1: Az 1-es azonosítójú névjegy lekérdezése.
• POST /contacts: Új névjegy létrehozása.
• PUT /contacts/1: Az 1-es névjegy frissítése.
• DELETE /contacts/1: Az 1-es névjegy törlése.

Az URL-eknek az erőforrásokra kell utalniuk (pl. contacts, users, orders), és azonosítókkal lehet konkrét erőforrásokra hivatkozni.

5. Állapotkódok használata

A RESTful API-k használják a HTTP válaszokban megadott állapotkódokat annak jelzésére, hogy egy kérés sikeres volt-e, vagy hibába ütközött. Példák:

• 200 OK: Sikeres kérés.
• 201 Created: Erőforrás sikeresen létrehozva (pl. új felhasználó hozzáadása).
• 400 Bad Request: Rosszul formázott kérés.
• 401 Unauthorized: Jogosultság hiánya a kéréshez.
• 403 Forbidden: Tiltott hozzáférés.
• 404 Not Found: Erőforrás nem található.
• 500 Internal Server Error: Szerveroldali hiba.

6. HATEOAS (Hypermedia as the Engine of Application State)

A RESTful API ideális esetben követi a HATEOAS elvet, ami azt jelenti, hogy a válaszok tartalmaznak további hivatkozásokat más releváns erőforrásokra. Például egy felhasználó lekérdezésére adott válasz tartalmazhat hivatkozásokat a felhasználó névjegyeire vagy rendeléseire:

{

    "id": 1,

    "name": "John Doe",

    "links": [

        { "rel": "self", "href": "/users/1" },

        { "rel": "contacts", "href": "/users/1/contacts" }

    ]

}

7. JSON használata (vagy más formátum)

A RESTful API-k általában JSON formátumban adnak vissza adatokat, mivel ez egy könnyen olvasható és platformfüggetlen formátum. Azonban XML, YAML vagy más formátumok is használhatók, attól függően, hogy mi szükséges az alkalmazás szempontjából. A válaszok JSON formátuma például:

{

    "id": 1,

    "name": "John Doe",

    "email": "john.doe@example.com"

}

8. Biztonság (HTTPS, Hitelesítés)

A RESTful API-k védelméhez HTTPS használata szükséges az adatok titkosítása érdekében. Az API-k hozzáféréséhez szükség lehet hitelesítésre, amelyet különféle módszerekkel lehet megvalósítani, például:

• OAuth: Token-alapú hitelesítés.
• API kulcsok: Minden kérésnél egy kulcs átadása, amely hitelesíti a klienst.
• JWT (JSON Web Token): Kriptografikusan aláírt token, amely tartalmazza a felhasználó adatait.

9. Cache-elhetőség

A RESTful API-kban a válaszok cache-elhetők, ha az erőforrások nem változnak gyakran. A megfelelő HTTP cache fejlécek használata biztosítja, hogy a kliens (pl. böngésző) helyi gyorsítótárából használhatja az adatokat, ami javítja a teljesítményt és csökkenti a szerver terhelését. Például a Cache-Control fejléc:

Cache-Control: max-age=3600

10. Verziózás

Az API-k folyamatos fejlesztése miatt fontos az API-k verziózása, hogy az új fejlesztések ne törjék meg a régi implementációkat. Ez többféleképpen valósítható meg, például az URL-ben:

/v1/contacts

/v2/contacts

11. Idempotencia

A RESTful API-kban az idempotens műveletek olyan műveletek, amelyek többszöri végrehajtása ugyanazt az eredményt adja. Például a GET és DELETE műveletek idempotensek, mert bármennyiszer hajtjuk végre őket, ugyanaz lesz az eredmény.

Összegzés

Egy REST API-nak tehát a következő elveket kell követnie:

1. Kliens-szerver architektúra.
2. Állapotmentesség (stateless).
3. HTTP metódusok használata (GET, POST, PUT, DELETE, stb.).
4. Erőforrás-alapú URL-ek.
5. Megfelelő állapotkódok használata.
6. HATEOAS támogatás (opcionális, de ajánlott).
7. JSON vagy más formátumú válaszok.
8. Biztonság és hitelesítés (HTTPS, OAuth, API kulcsok stb.).
9. Cache-elhetőség a megfelelő HTTP fejlécekkel.
10. Verziózás.
11. Idempotencia a megfelelő műveleteknél.

Ha egy alkalmazás megfelel ezeknek a követelményeknek, akkor REST API-nak tekinthető.

13 B - Whitelist

 

A fehér lista (angolul: whitelist) egy biztonsági koncepció, amelyben előre meghatározol egy olyan listát, amely csak engedélyezett elemeket tartalmaz. Csak azok az elemek, amelyek szerepelnek a listán, használhatók vagy hozzáférhetők egy adott művelethez.

Példák:

1. Adatbázis lekérdezésekben: Mint az előző példában is láttad, a fehér lista egy olyan oszlopnevek listája, amelyek közül a felhasználó választhat, hogy melyik szerint szeretné rendezni az adatokat. Csak ezek az oszlopok vannak megengedve.

A mi jelenlegi példánkban így nézne ki: 

$validColumns = ['nev', 'cegnev', 'mobil', 'email']; // Fehér lista 

$rendez = in_array($rendez, $validColumns) ? $rendez : 'nev'; // Csak ezek engedélyezettek

1. gy webalkalmazás esetében a fehér lista tartalmazhat olyan fájlokat, URL-eket vagy IP-címeket, amelyekhez hozzáférést adsz, míg minden más alapértelmezés szerint blokkolva van.

2. Biztonság: A fehér lista fontos a biztonság szempontjából, mert segítségével korlátozhatod, hogy csak azokat az elemeket használhassa a felhasználó, amelyeket kifejezetten biztonságosnak ítéltél. Így kizárhatod a nem engedélyezett vagy veszélyes elemeket.

Miért használjuk?

A fehér lista használata azt jelenti, hogy minden más alapértelmezés szerint tiltva van, kivéve azokat az elemeket, amelyek kifejezetten engedélyezve vannak. Ez biztonságosabb megközelítés, mint a fekete lista, ahol csak a tiltott elemeket határozod meg, mert mindig előfordulhatnak nem várt elemek, amelyeket a fekete lista nem fed le.

13 B - Elvis helyett használjuk a Ninja operátort

 

Miért Ninja? A dupla kérdőjel (??) olyan, mintha egy "ninja" gyorsan előbukkanna a semmiből, hogy egy alapértelmezett értéket helyettesítsen, ha valami nincs ott, vagyis "rejtve" marad. A ninja elnevezés egyfajta rejtett, gyors helyettesítésre utal. :-) persze adhattok neki jobb nevet is.

Szóval a lényeg, amit már mutattam órán, a ??. A nullás egyesítési operátor (??) (angolul: null coalescing operator) a PHP 7.0 verziójában került bevezetésre, amely 2015. december 3-án jelent meg. Az operátor célja az volt, hogy egyszerűbbé és rövidebbé tegye a kódot, különösen akkor, amikor egy változót ellenőrizni kell, hogy létezik-e vagy null-e, és ha nem, akkor egy alapértelmezett értéket ad vissza.

Ez az operátor azzal a céllal jött létre, hogy egyszerűbbé tegye a változók ellenőrzését és alapértelmezett értékadását, amikor egy változó nem létezik, vagy null értékkel rendelkezik.

Nézzük hol használhatjuk Elvis helyett:

$rendez = isset($_GET['rendez']) ? $_GET['rendez'] : "nev"; 

$kifejezes = isset($_POST['kifejezes']) ? $_POST['kifejezes'] : "";

Az isset() itt azt ellenőrzi, hogy a $_GET['rendez'] és $_POST['kifejezes'] változók léteznek-e, és nem null értékűek. Ha léteznek, akkor az értéküket használja, ha nem, akkor az alapértelmezett értéket ("nev" vagy "") adja vissza. Ez a klasszikus ternáris, bocs Elvis operátor helyes használata.

Ninja operátorral: 

$rendez = $_GET['rendez'] ?? "nev"; 

$kifejezes = $_POST['kifejezes'] ?? "";

A "??" operátor az ún. nullás egyesítési operátor, ami csak akkor működik jól, ha az adott változó valóban null vagy undefined. Az "isset()" függvény azonban ellenőrzi, hogy a változó létezik-e, és értékkel rendelkezik-e. Azonban az "isset()" függvényt és a "??" operátort nem kell együtt használni, mert a "??" magában is megoldja azt, amit az "isset()" tesz.