2024. október 21., hétfő

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:







2024. október 14., hétfő

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.


2024. október 10., csütörtök

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();

    }

}

?>

  1. 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.

2024. október 9., szerda

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ő.

2024. október 7., hétfő

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. 

12 B - Titkosírás hack avagy hogyan használju a Base64 Kódolási és Dekódolási Függvényeket



Gondolkoztam, hogyan dobhatnám fel egy kicsit az unalmas függvény gyakorlást, ekkor jutott eszembe, hogy általánosban mindig igyekeztünk titkosírást kitalálni. Utána néztem, hogyan lehetne ezt valamiféle függvénnyel megoldani. A következőtre leltem:

A Base64 egy kódolási eljárás, amelyet általában bináris adat (például képek, fájlok) szöveges formátumba való átalakítására használnak. A Base64 kódolás során az adatok biztonságosabban továbbíthatók olyan protokollokon keresztül, amelyek nem kezelnek jól bináris adatokat, például e-mail vagy URL-ek.

JavaScriptben két beépített függvényt használhatunk a Base64 kódolásra és dekódolásra:

1.     btoa() – "Binary to ASCII":

    • Ez a függvény a szöveges adatot Base64 formátumba kódolja.
    • Csak karakterláncokat fogad el, és a kódolt formátum egy ASCII-karakterlánc lesz.

2.     atob() – "ASCII to Binary":

    • Ez a függvény a Base64 kódolt szöveget visszakódolja az eredeti formátumába.
    • Ez is karakterláncot fogad el, és karakterláncot ad vissza.

btoa() Függvény – Kódolás

A btoa() függvény egy szöveget Base64 formátumba kódol. Fontos megjegyezni, hogy a kódolandó szövegnek ASCII karakterekből kell állnia, mivel a btoa() nem tud Unicode karaktereket közvetlenül kezelni.

Szintaxis:

let encodedData = btoa(string);

Példa:

let originalText = "Hello, World!";
let encodedText = btoa(originalText);
console.log(encodedText); // "SGVsbG8sIFdvcmxkIQ=="
  • Magyarázat: A "Hello, World!" szöveget Base64 formátumba kódoljuk, amelynek eredménye: SGVsbG8sIFdvcmxkIQ==.

Unicode kezelés:

A btoa() függvény alapértelmezetten nem támogatja a Unicode karaktereket, mivel azok nem ASCII karakterek. Ha Unicode karakterekkel dolgozol, előbb megfelelően kell őket átalakítani.

Unicode karakterek kódolásához:

function utf8_to_b64(str) {
    return btoa(unescape(encodeURIComponent(str)));
}
 
let unicodeText = "Üzenet";
let encodedUnicodeText = utf8_to_b64(unicodeText);
console.log(encodedUnicodeText); // "w5Z6ZW5ldA=="

atob() Függvény – Dekódolás

Az atob() függvény a Base64 formátumban kódolt szöveget visszaalakítja az eredeti formátumba.

Szintaxis:

let decodedData = atob(base64String);

Példa:

let encodedText = "SGVsbG8sIFdvcmxkIQ==";
let decodedText = atob(encodedText);
console.log(decodedText); // "Hello, World!"
  • Magyarázat: A Base64 formátumban kódolt szöveget visszaalakítjuk az eredeti "Hello, World!" szöveggé.

Unicode kezelés:

Ha az eredeti szöveg Unicode karaktereket tartalmaz, az atob() alapértelmezetten nem tudja visszaalakítani azokat helyesen. Ebben az esetben az alábbi módon kell eljárni:

Unicode karakterek dekódolásához:

function b64_to_utf8(str) {
    return decodeURIComponent(escape(atob(str)));
}
 
let encodedUnicodeText = "w5Z6ZW5ldA==";
let decodedUnicodeText = b64_to_utf8(encodedUnicodeText);
console.log(decodedUnicodeText); // "Üzenet"

Base64 használati esetek

1.     Adatok biztonságos továbbítása: Base64 kódolást gyakran használnak e-mailben vagy URL-ben történő adatátvitelhez, mivel ezek a protokollok nem tudnak kezelni bináris adatokat.

2.     Képek és fájlok beágyazása: HTML oldalon képeket és más fájlokat is Base64 formátumban tárolhatunk és közvetlenül beágyazhatunk az oldalba, így nem kell külön fájlokat külső forrásból letölteni.

Példa egy Base64-kódolt kép megjelenítésére:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." alt="Base64 Image">

3.     Alapvető titkosítás: Bár nem biztonságos titkosítási módszer, a Base64-t egyszerű adatvédelmi megoldásokhoz is használják. Fontos azonban megjegyezni, hogy könnyen visszafejthető, tehát nem alkalmas érzékeny adatok védelmére.

Összegzés

  • btoa(): A karakterlánc Base64 formátumba való kódolására szolgál, de csak ASCII karaktereket támogat.
  • atob(): A Base64 formátum visszakódolására használjuk, és szintén csak ASCII karaktereket támogat.

Ha Unicode karakterekkel dolgozol, akkor szükséges az átalakítás a kódolás és dekódolás előtt/után.

Ha bármi hasonlóra lelne valaki, ne tartsátok magatokban, osszátok meg velünk. :-)

12 B - Űrlapfeldolgozás -> email cím ellenőrzése javascripttel

Űrlap létrehozásakor, amikor e-mail címet kérünk be érdemes az <input type="email"> elem-et használni, hiszen ez is végez némi alapvető ellenőrzést a böngészőben, amikor az űrlapot elküldjük. Az alapvető ellenőrzés alatt azt értem, hogy azt vizsgálja, az email cím tartalmazza-e a @ karaktert, és utána van-e valamilyen domain név. Nem ellenőrzi azonban a domain végződés hosszát (mint pl. a .com vagy .org), sem a felhasználónév bonyolultságát. Tehát az olyan egyszerű címeket is elfogadhatja, mint például user@domain (bár a valóságban ez egy érvénytelen email cím lenne).

Ha az űrlapot próbálják elküldeni érvénytelen email cím formátummal, a böngésző automatikusan egy figyelmeztetést jelenít meg, általában egy felugró üzenet formájában (pl. "Kérjük, adjon meg egy érvényes email címet"). Ez a figyelmeztetés a böngésző nyelvének megfelelően jelenik meg, tehát automatikusan lokalizált üzeneteket kapunk.

Az olyan HTML5 attribútumok, mint a required, szintén működnek az email mezőknél. Ha hozzáadod ezt az attribútumot, akkor a böngésző nem engedi az űrlap beküldését, ha az email mező üres vagy nem megfelelő formátumú.

Az olyan attribútumok, mint a pattern és a maxlength, további ellenőrzéseket tesznek lehetővé, ha a beépített validáció nem elegendő.

Az <input type="email"> használata különösen hasznos mobil eszközökön, mivel sok mobilböngésző automatikusan egy olyan virtuális billentyűzetet jelenít meg, amely tartalmazza a @ és a pont karaktert, hogy megkönnyítse az email cím bevitelét.

Mit nem ellenőriz a böngésző:

  • A böngésző nem ellenőrzi, hogy az email cím ténylegesen létezik-e, vagy hogy az adott domain valódi email szolgáltatást biztosít-e.
  • A szabványos email címek egyéb speciális karaktereit sem feltétlenül ellenőrzi szigorúan, tehát például olyan címek, mint "user+test@domain.com", érvényesnek tekinthetők.

Miért hasznos a JavaScriptes ellenőrzés?

Bár a böngésző alapvető ellenőrzést végez, a JavaScriptes validációval pontosabb és testreszabottabb ellenőrzéseket végezhetsz, például:

  • Korlátozhatod az email címeket bizonyos domainre (pl. csak .com végződések engedélyezése).
  • Testreszabhatod a hibaüzeneteket, hogy jobban illeszkedjenek az oldal stílusához.
  • Bonyolultabb mintákat is alkalmazhatsz, ha szükséges (pl. olyan speciális email címek, amelyeket a böngésző nem kezel jól).
Az <input type="email"> használata praktikus, mert alapvető validációt nyújt a böngésző szintjén, de ha összetettebb szabályokat szeretnél alkalmazni, akkor érdemes JavaScript alapú validációt is hozzáadni a pontosabb ellenőrzés érdekében, mint amit itt a példában láthatsz:

A let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/; sor egy reguláris kifejezés (regex), amelyet arra használunk, hogy egy email cím formátumát ellenőrizzük. Lássuk részletesen, mit jelent ez a kifejezés:

    1. ^: A kifejezés elején lévő ^ karakter azt jelenti, hogy a minta az adott sor elejéről kezdődik (tehát nem lehet más karakter az elején).

    2. [a-zA-Z0-9._-]+:

      • [a-zA-Z0-9._-]: Ez egy karakterkészlet, amely azt jelzi, hogy az email cím első része (a @ előtti rész) tartalmazhat kis- és nagybetűket (a-z és A-Z), számokat (0-9), valamint a pontot (.), aláhúzást (_), és kötőjelet (-).
      • +: A plusz jel azt jelenti, hogy az előző karakterkészletből legalább egy, de akár több karakter is szerepelhet, tehát az email címnek mindenképpen tartalmaznia kell legalább egy ilyen karaktert.
    3. @: Ez a karakter az email cím kötelező része, amely elválasztja a felhasználónevét és a domain nevet (pl. user@example.com).

    4. [a-zA-Z0-9.-]+:

      • [a-zA-Z0-9.-]: A domain név része a @ utáni rész. Tartalmazhat kis- és nagybetűket, számokat, pontot (.) és kötőjelet (-).
      • +: Ismét azt jelzi, hogy legalább egy karakternek szerepelnie kell a megadott karakterekből (a domain név részben).
    5. \.: A \. egy speciális karaktert jelöl, itt konkrétan a pontot (.), mivel a reguláris kifejezésben a pont önmagában bármely karaktert jelölne. A \ jel használatával szó szerint a pontot keressük.

    6. [a-zA-Z]{2,6}:

      • [a-zA-Z]: A domain végződése csak betűket tartalmazhat (kis- és nagybetűk is elfogadhatók).
      • {2,6}: Ez azt jelenti, hogy a betűk száma minimum 2, maximum 6 lehet, vagyis olyan végződéseket keresünk, mint .com, .hu, .net, .info, stb.
    7. $: A dollárjel azt jelzi, hogy a minta a sor végére ér (nincs más karakter a végén).

    Összefoglalva:

    Ez a reguláris kifejezés egy email címet keres, amely megfelel a következő mintának:

    • Tartalmaz kis- és nagybetűket, számokat, pontot, aláhúzást vagy kötőjelet a @ előtti részben.
    • A @ után következik egy domain név, amely kis- és nagybetűket, számokat, pontot és kötőjelet tartalmazhat.
    • A domain név egy pont után egy 2-6 karakter hosszú végződéssel (például .com vagy .hu) zárul.
    Az így ellenőrzött email-t test() metódussal ellenőrizhetjük.
    pl. : regex.test(string)
  • regex: Ez a reguláris kifejezés, amit létrehoztál (pl. /^[a-zA-Z]+$/).
  • string: Az a szöveg, amit meg akarsz vizsgálni, hogy megfelel-e a reguláris kifejezésnek.

    Visszatérési érték:

    A test() metódus egy logikai értékkel tér vissza:

    • true: Ha a reguláris kifejezés illeszkedik a megadott sztringre.
    • false: Ha a reguláris kifejezés nem illeszkedik a megadott sztringre.
  • Példa:

    let emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/
    let email = "teszt@example.com"
      if (emailPattern.test(email)) { 
               console.log("Érvényes email cím."); 
        } else
              console.log("Érvénytelen email cím."); 
        }

  • Ebben a példában a test() metódus azt ellenőrzi, hogy a email változó értéke megfelel-e az emailPattern reguláris kifejezésnek.
  • Ha az email cím formátuma megfelelő, akkor a test() true-t ad vissza, és megjelenik a "Érvényes email cím." üzenet.
  • Ha az email cím nem felel meg a mintának, akkor false lesz az eredmény, és a "Érvénytelen email cím." üzenet jelenik meg.
  • 13 B - egyedi számok létrehozása

     A date("U") egy PHP függvény, amely az aktuális dátumot és időt Unix időbélyeg formájában adja vissza.

    Mit jelent a Unix időbélyeg?

    A Unix időbélyeg (más néven Unix timestamp) az az idő, amely a 1970. január 1. 00:00:00 (UTC) időpont óta eltelt másodpercek számát jelenti. Ez egy egyszerű egész szám, amely folyamatosan növekszik minden másodperccel. Például, ha most meghívod a date("U") függvényt, az visszaadja, hogy hány másodperc telt el 1970. január 1. óta.

    Mikor használjuk?

    A Unix időbélyeg nagyon hasznos, amikor egyedi fájlneveket, időbélyegeket vagy időszámításokat kell kezelni. Azért használjuk, mert egy egyedi, egyszerű számot generál, amely jól alkalmazható például fájlok elnevezésénél, hogy elkerüljük az ütközéseket, vagy időszámításokban, amikor másodpercekben kell kifejezni az időt.

    Példa:

    echo date("U"); // Például: 1707158419

    Ez a szám az aktuális másodpercben eltelt idő 1970. január 1. óta.

    A uniqid() is kiválóan alkalmas arra, hogy egyedi fájlneveket hozz létre. A uniqid() függvény egy egyedi azonosítót generál a jelenlegi időpont alapján, ami garantálja, hogy minden híváskor egyedi értéket ad vissza.

    A különbség a date("U") és a uniqid() között:

    • date("U"): Ez egy egyszerű Unix időbélyeg, amely az aktuális időt másodpercekben adja vissza. Ez az érték minden másodpercben ugyanaz marad, így ha ugyanazon a másodpercen belül több fájlt generálsz, azok azonos nevet kaphatnak.

    • uniqid(): Ez egy egyedi azonosító, amely nemcsak az aktuális időn alapszik, hanem nagyobb precizitással működik (mikroszekundumokban mérve). Ezért, ha ugyanabban a másodpercben több fájlt generálsz, azok egyedi neveket fognak kapni.

    Példa uniqid() használatára:

    $unique_name = uniqid(); echo $unique_name; // Például: 652ebe5c7c6db

    Ez a generált érték garantáltan egyedi lesz minden egyes híváskor, még akkor is, ha nagyon gyors egymásutánban hívod meg a függvényt.

    uniqid() előnyei fájlfeltöltéskor:

    • Biztosítja az egyedi fájlneveket: Még akkor is, ha egy másik felhasználó ugyanabban a másodpercben töltene fel egy fájlt, a nevek különbözni fognak.
    • Egyszerű és gyors használat: Nem kell bonyolult beállításokkal vagy paraméterekkel foglalkozni, mivel alapértelmezetten a jelenlegi időt használja a generáláshoz.

    Ha biztosra akarsz menni az egyedi fájlnevek létrehozásában, akkor a uniqid() egy nagyon jó megoldás.

    2024.10.07 -11. heti terv

     


    13 B - Mit jelent a mime típus?

     A MIME-típusok (Multipurpose Internet Mail Extensions) a fájlformátumok azonosítására szolgálnak, különösen, amikor fájlokat küldünk vagy fogadunk a weben keresztül, például amikor egy szerver adatokat küld a böngészőnek vagy fájlt töltünk fel egy szerverre.

    Minden fájlnak van egy MIME-típusa, ami egy kéttagú azonosító, és azt mondja meg, hogy a fájl milyen típusú adatot tartalmaz, illetve hogyan kell kezelni. Ez lehetővé teszi a szerver és a kliens számára, hogy megfelelően kezeljék és értelmezzék a fájlt.

    A MIME-típus két részből áll:

    • Első rész: az adott fájltípus fő kategóriáját jelzi (például "image", "text", "application").
    • Második rész: a fájl pontosabb típusát jelzi (például "jpeg", "png", "html", "pdf").

    Néhány gyakori MIME-típus:

    • Képekhez:
      • image/jpeg: JPEG formátumú kép
      • image/png: PNG formátumú kép
      • image/gif: GIF formátumú kép
    • Szöveges fájlokhoz:
      • text/html: HTML fájl
      • text/plain: Egyszerű szövegfájl
    • Alkalmazásokhoz:
      • application/pdf: PDF fájl
      • application/json: JSON adatfájl

    Miért fontos a MIME-típusok ellenőrzése fájlfeltöltéskor?

    Amikor fájlokat töltünk fel egy szerverre, a MIME-típus ellenőrzésével biztosíthatjuk, hogy csak a megengedett fájltípusokat fogadjuk el. Például, ha a rendszer csak képfájlokat szeretne elfogadni, ellenőrizhetjük, hogy a feltöltött fájl MIME-típusa image/jpeg, image/png vagy más megengedett képformátum. Ez biztonsági szempontból is fontos, mert segít megelőzni, hogy a felhasználók olyan fájlokat töltsenek fel, amelyek kártékonyak lehetnek (például futtatható fájlokat).

    A te kódodban a MIME-típusok ellenőrzése segít abban, hogy csak JPEG, PNG vagy GIF formátumú képeket fogadj el fájlfeltöltéskor.

    13 B - PHP fájlkezelés haladó technikák: Fájlok és könyvtárak manipulálása, jogosultságok kezelése

     A PHP fájlkezelés haladó technikái lehetővé teszik a fájlok és könyvtárak különféle műveleteinek végrehajtását, beleértve a létrehozást, olvasást, írást, törlést és jogosultságok kezelését. A fájlkezelés elengedhetetlen számos alkalmazás számára, például fájlok feltöltésénél, adatnaplózásnál vagy akár teljes fájlrendszer-adminisztrációs feladatok végrehajtásánál.

    1. Fájlok kezelése:

    A fájlkezelés során olyan műveleteket végezhetünk, mint a fájlok létrehozása, olvasása, írása, módosítása és törlése. PHP-ben ezekhez számos beépített függvény áll rendelkezésre.

    a. Fájlok olvasása:

    ·        file_get_contents(): Egy fájl tartalmának egy lépésben történő beolvasására használható, és az eredményt egy stringben adja vissza.

    $fileContent = file_get_contents('path/to/file.txt');
    echo $fileContent;

    ·        fopen() és fread(): Ezek a függvények részletesebb kontrollt biztosítanak a fájlkezelés felett, és lehetővé teszik a fájlok olvasását bájtonként vagy karakterenként.

    $file = fopen('path/to/file.txt', 'r');
    while (!feof($file)) {
        echo fgets($file); // Egy sor beolvasása
    }
    fclose($file);

    b. Fájlok írása:

    ·        file_put_contents(): Lehetővé teszi, hogy egy lépésben adatokat írjunk egy fájlba.

    $data = "Ez egy új fájl tartalma.";
    file_put_contents('path/to/file.txt', $data);

    ·        fwrite(): Több kontrollt biztosít az írás felett, például a fájl megnyitását különböző módokban (pl. írásra, hozzáfűzésre).

    $file = fopen('path/to/file.txt', 'a'); // Hozzáfűzési mód
    fwrite($file, "Új tartalom a fájl végén.");
    fclose($file);

    c. Fájlok törlése:

    • unlink(): Ezzel a függvénnyel fájlokat lehet törölni.
    php
    Kód másolása
    unlink('path/to/file.txt');

    2. Könyvtárak kezelése:

    A fájlok mellett a könyvtárak kezelése is fontos lehet, például amikor fájlokat másolunk, mozgatunk vagy létrehozunk új könyvtárakat.

    a. Könyvtárak létrehozása:

    • mkdir(): Ez a függvény új könyvtárat hoz létre.
    mkdir('path/to/new_directory', 0755, true); // Jogosultságok beállítása (0755), és az összes szükséges szülő könyvtár létrehozása

    b. Könyvtárak olvasása:

    • scandir(): A könyvtár tartalmát listázhatjuk ezzel a függvénnyel.
    php
    Kód másolása
    $files = scandir('path/to/directory');
    foreach ($files as $file) {
        echo $file . "<br>";
    }

    c. Könyvtárak törlése:

    • rmdir(): Ez a függvény egy üres könyvtárat töröl.
    rmdir('path/to/directory');

    Ha a könyvtár nem üres, akkor rekurzívan törölhetjük az összes benne lévő fájlt és könyvtárat egy egyéni funkcióval.

    3. Fájlok és könyvtárak jogosultságainak kezelése:

    A fájlok és könyvtárak jogosultságai kritikusak lehetnek a biztonság szempontjából, különösen olyan webhelyeken, ahol több felhasználó hozzáférhet a rendszerhez.

    a. Jogosultságok beállítása:

    • chmod(): Ezzel a függvénnyel fájlok és könyvtárak jogosultságait módosíthatjuk.
    chmod('path/to/file.txt', 0644); // Fájl jogosultságainak beállítása

    Az értékek bináris alapon értelmezhetők (pl. 0644 jelenti, hogy a tulajdonos olvashatja és írhatja a fájlt, míg a csoport és a többiek csak olvashatják).

    b. Jogosultságok ellenőrzése:

    • fileperms(): Ezzel a függvénnyel lekérdezhetjük egy fájl vagy könyvtár jogosultságait.
    $permissions = fileperms('path/to/file.txt');
    echo decoct($permissions & 0777); // A jogosultságok bináris formátumban

    4. Fájlok feltöltése PHP-ben:

    A fájlfeltöltések gyakoriak a webes alkalmazásokban, például profilképek, dokumentumok vagy más típusú fájlok feltöltésénél. A PHP beépített támogatást nyújt fájlok feltöltésére az űrlapokon keresztül.

    Példa egy fájl feltöltésére PHP-ben:

    HTML űrlap:

    <form action="upload.php" method="POST" enctype="multipart/form-data">
        Válassz fájlt: <input type="file" name="fileToUpload">
        <input type="submit" value="Feltöltés">
    </form>

    PHP feldolgozás:

    <?php
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
    $uploadOk = 1;
     
    // Ellenőrizzük, hogy a fájl már létezik-e
    if (file_exists($target_file)) {
        echo "A fájl már létezik.";
        $uploadOk = 0;
    }
     
    // Fájl feltöltése, ha nincs hiba
    if ($uploadOk == 1) {
        if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
            echo "A fájl feltöltése sikerült: " . basename($_FILES["fileToUpload"]["name"]);
        } else {
            echo "Hiba történt a fájl feltöltésekor.";
        }
    }
    ?>

    5. Haladó fájlműveletek:

    a. Fájlok másolása, mozgatása és átnevezése:

    ·        copy(): Egy fájl másolása egyik helyről a másikra.

    copy('path/to/source.txt', 'path/to/destination.txt');

    ·        rename(): Egy fájl vagy könyvtár átnevezése vagy áthelyezése.

    rename('path/to/old_name.txt', 'path/to/new_name.txt');

    b. Fájlméret és létrehozás dátumának lekérdezése:

    ·        filesize(): Egy fájl méretének lekérdezése bájtokban.

    echo filesize('path/to/file.txt') . " bájt";

    ·        filemtime(): Egy fájl utolsó módosítási időpontjának lekérdezése.

    echo "Utolsó módosítás: " . date("F d Y H:i:s.", filemtime('path/to/file.txt'));

    6. Biztonsági megfontolások:

    A fájlkezelés során különösen fontos a biztonság:

    • Fájlnevek ellenőrzése: Soha ne fogadjuk el közvetlenül a felhasználótól kapott fájlneveket, mindig ellenőrizzük azokat.
    • Könyvtárfeltörés megakadályozása: Használjunk relatív útvonalakat és ellenőrizzük, hogy a felhasználó nem próbál meg könyvtárszintet ugrani (pl. ../ karakterekkel).
    • Fájlméret és típus ellenőrzése: Fájlok feltöltésekor korlátozzuk a fájlok méretét és típusát, hogy elkerüljük a rosszindulatú fájlok feltöltését.

    6. Biztonsági megfontolások:

    ·        Fájlméret és típus ellenőrzése: Amikor fájlokat töltünk fel, mindig érdemes korlátozni a fájlok maximális méretét és ellenőrizni a fájl típusát, hogy csak megengedett típusokat fogadjunk el (például képeket, dokumentumokat). Ezt a következőképpen lehet megvalósítani:

    // Ellenőrizzük a fájlméretet (max 2 MB)
    if ($_FILES['fileToUpload']['size'] > 2000000) {
        echo "A fájl túl nagy.";
        $uploadOk = 0;
    }
     
    // Ellenőrizzük a fájltípust (csak képek)
    $fileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));
    if (!in_array($fileType, ['jpg', 'png', 'jpeg', 'gif'])) {
        echo "Csak JPG, JPEG, PNG és GIF fájlok engedélyezettek.";
        $uploadOk = 0;
    }

    ·        Fájlnév szűrése: Mindig biztonságos fájlneveket használjunk, és szűrjük a fájlneveket, hogy elkerüljük a könyvtárszint ugrásokat vagy rosszindulatú fájlok feltöltését. Például, ha a fájl tartalmaz tiltott karaktereket (pl. ../), azt cserélhetjük biztonságos alternatívára.

    ·        Jogosultságok kezelése: Győződj meg arról, hogy a fájlokhoz és könyvtárakhoz megfelelő jogosultságok vannak beállítva, hogy csak az engedélyezett felhasználók férjenek hozzá az adatokhoz. Például a feltöltött fájlokat be lehet állítani, hogy csak olvashatók legyenek a nyilvánosság számára, de ne legyenek írhatók:

    chmod('uploads/somefile.txt', 0644); // Csak olvasható jogosultság a felhasználók számára

    Összefoglalás:

    A PHP fájlkezelés haladó technikái számos eszközt kínálnak a fájlok és könyvtárak kezelésére, beleértve az olvasást, írást, törlést, másolást és áthelyezést. Az ilyen műveletek során különösen fontos a jogosultságok megfelelő kezelése és a biztonságos fájlműveletek végrehajtása, például a fájlok feltöltésekor. A megfelelő biztonsági intézkedések és jogosultságkezelés segít elkerülni a lehetséges támadásokat, mint például a fájlbeillesztési támadások vagy a rosszindulatú fájlok feltöltése.

    Ha egy PHP alapú rendszerben fájlokat és könyvtárakat kezelsz, ezek a technikák segíthetnek a hatékony és biztonságos működés biztosításában.

    Norvég feladat

    A feladathoz szükséges képek, minta és adatbázis elérhetősége: https://github.com/latiza/norv-gfeladat/