13 C helyettesítés idejére

Teendők:

Interkaktív vizsgára lehet gyakorolni az előző évek feladatlapainak kitöltését: 

https://infojegyzet.hu/vizsgafeladatok/szoftverfejleszto-interaktiv/teszt/

Tech Atival youtube csatorna videóinak megnézését és gyakorlását folytassátok: pl: Ciklusok: https://www.youtube.com/watch?v=zWVWI95qtiQ&t=377s 

Az interaktív vizsga sikerességéhez hozzá járulhat, ha mind az Angular (ezt ismeritek, tavaly tanultuk), mind a React és mind pedig a Vue javascriptes keretrendszerrel ismerkedtek kicsit. A w3scholl-ra felkerült mindhárom keretrendszerhez tutorial, nézzétek át a Vue-t: https://www.w3schools.com/vue/index.php Oldjátok meg a gyakorlatokat, majd pedig a kvízt. 

Készítsetek regisztrációs űrlapot, és oldjátok meg a feldolgozását, az alapján amit mutattam.

12 B. Web: Base64 dekódolás (atob, btoa); Ikt Projekt: Modern titkosítási algoritmusok

Webes feladat: Nézzük, hogy tudnál majdnem titkos írással üzit küldeni, ami persze csak addig titkos, amíg olyan kezébe kerül, csak akik nem ismerik a btoa() és atob() függvényeket. :-) 

Itt azonnal ki is próbálhatod őket: https://www.w3schools.com/jsref/met_win_atob.asp 

Készítsd el az alábbi html oldalt. H2 címsorba írd be a címet, adj hozzá egy input:text mezőt, és két gombot, majd egy div konténert, ahová a kódolt és dekódolt üznetet megjelenítjük:

Amit megvalósítunk az atob függvény használatával, ha valamilyen szöveget beírunk az input mezőbe, akkor az kódolva fog megjelenni a div konténerben. 

ha viszont kapod, akkor ki is kell kódolni:

Az atob és btoa JavaScript-ben beépített függvények, amelyeket Base64 kódoláshoz és dekódoláshoz használnak. Ezek a függvények lehetővé teszik az adatok átalakítását szöveges és bináris formátum között.

A Base64 egy olyan kódolási technika, amely a bináris adatokat (pl. képeket, fájlokat, szövegeket) ASCII szöveges formátumba alakítja. Ez akkor hasznos, ha olyan rendszereken keresztül kell adatokat továbbítani, amelyek nem támogatják a bináris adatokat, például:

• URL-ekben,
• JSON API-kban,
• E-mail üzenetekben (MIME formátum),
• Adatbázisokban.

Karakterkészlet: A Base64 az alábbi karaktereket használja: Betűk: A-Z, a-z, Számok: 0-9, Különleges karakterek: +, /, Padding: = (a string hosszának kiegészítésére)

Előnye: Bármilyen adatot (pl. bináris fájlokat) kompatibilissé tesz szöveges környezetekkel.

Hátránya: A Base64 nem titkosítás, csupán egy kódolási technika, így az adatok visszafejthetők. Ha szeretnél valami egyedit beépíteni, ami bonyolultabbá teszi a visszafejtést, hozzáadhatsz egyedi manipulációkat a kódolási és dekódolási folyamat során. Ezek nem teszik valódi titkosítássá a rendszert, de nehezebbé tehetik a dekódolást.

btoa – Base64 kódolás: A btoa függvény az eredeti (ASCII) szöveget Base64 formátumba alakítja.

Szintaxis: let base64String = btoa(inputString);

Paraméterek: inputString: Egy ASCII kompatibilis string, amit Base64 formátumba szeretnél kódolni.

Visszatérési érték: Egy Base64 kódolt string.

Projekt feladat: keressetek modern titkosítási algoritmusokat, írjátok át a feladatot valamelyik felhasználásával.

    

TODO feladat

 

A calc() CSS függvény

A calc() egy beépített CSS függvény, amelyet olyan tulajdonságok értékének kiszámítására használunk, mint a szélesség (width), magasság (height), margók (margin), kitöltések (padding), vagy akár a betűméret (font-size).

A függvény lehetővé teszi, hogy különböző egységeket (pl. px, %, em, rem) kombináljunk, miközben matematikai műveleteket hajtunk végre.

Szintaxisa: tulajdonság: calc(kifejezés);

A kifejezés: Egy matematikai egyenlet, amely összeadást (+), kivonást (-), szorzást (*) és osztást (/) tartalmazhat.

Példa:

width: calc(100% - 50px);

Ez azt jelenti, hogy a szélesség a szülőelem teljes szélességének 100%-a mínusz 50px.

Műveletek a calc() használatával:

Összeadás:

height: calc(50px + 10%);

Ez azt jelenti, hogy a magasság 50px plusz a szülőelem magasságának 10%-a.

Kivonás:

width: calc(100% - 120px);

A szélesség a szülőelem teljes szélességének 100%-a mínusz 120px.

Szorzás:

font-size: calc(1rem * 1.5);

A betűméret 1.5-szerese az alap betűméretnek.

Osztás:

width: calc(100% / 3);

A szélesség a szülőelem szélességének harmada.

A calc() egy rendkívül hasznos eszköz a CSS-ben, amely megoldást nyújt bonyolult méretezési problémákra, és megkönnyíti a reszponzív tervezést. Használata egyszerű, mégis lehetővé teszi komplex elrendezések létrehozását anélkül, hogy extra JavaScript-re lenne szükség.

 

 

 

 

 

 

12B Új elem létrehozása - createElement() és appendChild() metódusok

 A createElement és appendChild metódusok a JavaScript DOM manipulációjának alapvető eszközei. Segítségükkel új HTML elemeket hozhatunk létre és adhatunk hozzá a meglévő dokumentumhoz.

createElement metódus

A createElement metódus egy új HTML elemet hoz létre, amelyet később hozzáadhatunk a DOM-hoz. A metódusnak egy paramétere van: az új elem típusának neve (pl. div, p, span stb.).

Szintaxis:

let újElem = document.createElement("elemNév");

Példa:

let újDiv = document.createElement("div");

Ez a kód létrehoz egy új <div> elemet, amely jelenleg csak egy JavaScript változóban létezik, és még nincs hozzáadva az oldalhoz.

appendChild metódus

Az appendChild metódus segítségével egy már létező HTML elemhez adhatunk egy új elemet (például azt, amelyet a createElement-tel hoztunk létre). Az appendChild a szülő elemhez hozzáad egy gyermeket, amely a szülő elem utolsó gyermekeként jelenik meg.

Szintaxis:

szülőElem.appendChild(gyerekElem);

Példa:

let újDiv = document.createElement("div"); // új div létrehozása
újDiv.textContent = "Ez egy új div elem"; // tartalom hozzáadása a div-hez
document.body.appendChild(újDiv); // a div hozzáadása a dokumentum törzséhez (body)

Ebben a példában a createElement létrehoz egy <div> elemet, amelynek beállítjuk a textContent tulajdonságát, majd az appendChild metódussal hozzáadjuk a dokumentum törzséhez, így az megjelenik az oldalon.

Gyakorlati példa - Egy listaelemek hozzáadása egy üres <ul>-hez:

// Egy <ul> elem létrehozása
let ulElem = document.createElement("ul");

// Egy tömb, amelyből listaelemeket hozunk létre
let elemek = ["Elem 1", "Elem 2", "Elem 3"];

// Listaelemek hozzáadása a <ul>-hez
elemek.forEach(elemTartalom => {
    let liElem = document.createElement("li"); // új <li> elem létrehozása
    liElem.textContent = elemTartalom; // tartalom hozzáadása
    ulElem.appendChild(liElem); // <li> hozzáadása a <ul>-hez
});

// A <ul> elem hozzáadása a dokumentum törzséhez
document.body.appendChild(ulElem);

Ez a kód létrehoz egy <ul> elemet, amelyhez három <li> elemet fűz hozzá, majd a teljes <ul> elemet hozzáadja az oldalhoz.

https://www.w3schools.com/jsref/met_document_createelement.asp

https://www.w3schools.com/jsref/met_node_appendchild.asp

13 B Migration

 Az adatbázisok kezelése, míg egyedül dolgozol egy projekten, elég egyértelmű. Ha viszont egy komplex projekten csapatnyi fejlesztő dolgozik, problémás lehet a szerkezeti módosítások követése, egymás között frissen tartása. Az adatbázis migrációk a Laravel query builderére építve tartalmazzák az adatbázisok tábláinak, kapcsolatok beállításainak minden egyes lépését, amik oda-vissza futtathatóak, azaz visszaállíthatóak lépésenként, minden egyes műveletet úgy visszaállítva, mintha meg sem történtek volna. Ha minden egyes változtatáshoz új migrációt veszel fel, a társadnak csak annyi dolga van, hogy frissíti az adatbázist a php artisan migrate paranccsal. E mellett azért is nagyon hasznos a migrációk használata, mert így szintén ennek a parancsnak a kiadásával létre tudod hozni a teljes adatbázist az alkalmazásod telepítésekor. Ezen a migrációk a database/migrations/ mappába kerülnek.

Tehát migration-okat használunk ahhoz, hogy az adatbázisod sémáját, kapcsolatokat, kezdő rekordokat felvedd. Új migrationt az artisan segítségével tudsz létrehozni, a projekt gyökérkönyvtárában a következő parancs kiadásával:

php artisan make:migration create_names_table

Az elnevezést mindig ilyen módon válaszd, tehát létrehozásnál create_, a tábla neve az adatokra utaló és többes számban van, majd az, amit létre akarsz hozni, esetünkben table. Ha módosítani akarsz a szerkezeten, create_ helyett válaszd az alter_ kifejezést vagy pl. új mező beszúrásához az add_mezo_to_tabla_table formát.

Ha kiadtad a parancsot, létrejött a database/migrations/ alatt egy új migration a kért névvel.

A fájlon belül két function jön létre:

up() function

Ez a migration futásakor fog lezajlani, ide kell megírnod azt, amit maga a migration csinál: táblák létrehozását, mezők létrehozását, stb. Tudsz puskázni az alapból létrehozott táblákból, pl a user táblából.

Az Artisan okos és ha a fenti névkonvencióval hoztad létre a migrationt, egyből készített is neked egy megfelelő keretet tábla létrehozásra: a nevét is megadta, adott hozzá egy AUTO_INCREMENT-es elsődleges kulcsot és két speciális mezőt a timestamps segítségével (created_at és updated_at). Ezek a létrehozási és módosítási időt tartalmazzák, amiket az Eloquent automatikusan kitölt az adott rekord létrehozásánál és szerkesztésénél.

down() function

Ez akkor fut le, ha szeretnéd visszaállítani az adott migrationt, azaz visszaállni az adatbázisban egy régebbi verzióra. Tábla létrehozás esetén ez egyértelműen DROP-ot jelent. Ha pl. csak egy új mezőt hozol létre az up()-ban, csak ennek a mezőnek az eltávolítását kell megírni. Ez egyébként nem kötelező, de javallott, hisz így oda-vissza tudsz lépegetni az adatbázisod sémájának állapotai között.

A php artisan make:migration parancsot használva hozhatunk létre egy új migrációt:

php artisan make:migration create_names_table

Keretrendszerek használata esetén az ajánlott formátum, hogy a tábla neveket többes számban hozd létre.

Ez a parancs létrehoz egy új fájlt a database/migrations mappában, amely tartalmazza a create_names_table nevű migrációt.

A migrációs fájl két metódust tartalmaz:

• up(): Ez a metódus tartalmazza az adatbázis módosításainak logikáját. Ebben a példában egy names táblát hozunk létre, benne néhány alapvető mezővel.

Alapértelmezetten az id-t és az időbélyeget adja hozzá, de itt kiegészítheted:

public function up()  {

        Schema::create('names', function (Blueprint $table) {

            $table->id(); // Elsődleges kulcs (AUTO_INCREMENT)

            $table->string('first_name');

            $table->string('last_name');

            $table->timestamps(); // created_at és updated_at mezők

        });  }

• down(): Ez a metódus visszaállítja az adatbázist az eredeti állapotba, azaz törli a names táblát.

A migráció futtatásához használd a következő parancsot:

php artisan migrate

Ha valamilyen oszlopot elfelejtettél hozzá adni vissza kell vonni a migrációt:

php artisan migrate:rollback

és hozzá adhatsz új oszlopot a táblához:

php artisan make:migration add_birth_date_to_names_table

Egészítsd ki az új migrációs fájlod up metódusát:

public function up(){

    Schema::table('names', function (Blueprint $table) {

        $table->date('birth_date')->nullable();

    });}

Ezt követően lefuttathatod a migrációt és ha megnézed az adatbázisban a táblád oszlopait, láthatod, hogy új oszloppal került kiegészítsére.

7.1.Schema

A Laravel Schema Builder egy eszköz az adatbázis-táblák és -mezők egyszerű és rugalmas létrehozásához, amely különféle adatbázis-kezelőkkel kompatibilis. Ezzel a megoldással könnyen kezelhetők az adatbázis-sémák a Laravelben, így nem kell aggódnod az adatbázis-kezelők közötti eltérések miatt.

Miért Használjunk Schema Builder-t?

A Laravel támogat több adatbázis-kezelőt, például MySQL-t, PostgreSQL-t és MSSQL-t. Ezek között különbségek lehetnek a mezők típusainál és karakterlánc-kezelésnél. A Schema Builder használatával Laravel automatikusan kezeli ezeket a különbségeket, így az alkalmazásod ugyanúgy működik bármely támogatott adatbázis-kezelőn.

Hogyan Működik a Schema Builder?

A Schema Builder a Schema osztályra épül, amely az adatbázis sémájának kezelését szolgálja. A táblák és mezők létrehozásánál megadhatod:

Az első paraméterként a táblanevet.

A második paraméterként egy ún. Blueprint objektumot, amely tartalmazza a mezők és azok típusainak leírását.

Például a Schema::create('books', function (Blueprint $table) { ... }) létrehozza a books táblát, és az abban lévő mezőket a Blueprint osztályon keresztül definiálhatod.

Mezők és Típusok Meghatározása

A Laravel különféle függvényeket kínál a mezőtípusok beállításához, például:

Szám típusú mező: $table->id(); (automatikusan elsődleges kulcs lesz)

Szöveg típusú mező: $table->string('column_name');

Példák a Típusok és Paraméterek Beállítására

Alapvető szöveges mező létrehozása:

$table->string('name');

Ez egy szöveges (VARCHAR) mezőt hoz létre name névvel.

Nullázható mező:

$table->string('description')->nullable(); //Ez a mező üres (null) értéket is felvehet.

Mező hossza és alapértelmezett érték beállítása:

$table->string('status', 100)->default('active');

Ez egy VARCHAR(100) típusú mezőt hoz létre status névvel és active alapértelmezett értékkel.

Speciális Típusok

Néhány függvény kifejezetten gyakran használt mezőkre vonatkozik, például:

timestamps(): Két mezőt hoz létre: created_at és updated_at, amelyeket a Laravel automatikusan kezel (rekord létrehozásának és módosításának időpontjai).

$table->timestamps();

1.) Feladat: Könyvtár Adatbázis Migráció Létrehozása -> books tábla létrehozása

Ø  id: Elsődleges kulcs (automatikusan létrejön a $table->id()-val).

Ø  title: A könyv címe, string típus.

Ø  author: A szerző neve, string típus.

Ø  published_year: A könyv megjelenésének éve, integer típus.

Ø  genre: A könyv műfaja, string típus.

Ø  created_at és updated_at mezők automatikusan (töltsd ki a $table->timestamps() segítségével).

2.) Feladat: Új mező hozzáadása a books táblához

Ø  Hozz létre egy új migrációt add_isbn_to_books_table névvel

Ø  Az up metódusban adj hozzá egy isbn mezőt, amely string típusú, és lehet nullable.

13 B - Routing – útvonal kezelés

 A Laravel routing rendszere egy olyan alapvető komponens, amely a beérkező kéréseket a megfelelő erőforrásokhoz irányítja, hogy a felhasználó mindig a kívánt tartalmat lássa.

A router alapvető szerepe az, hogy a weboldal különböző URL-jeire beérkező kéréseket a megfelelő vezérlőkhöz (Controllers) irányítsa. Például, ha a weboldaladon van egy /contact oldal, a routernek meg kell határoznia, hogy melyik vezérlő kezelje a hozzá tartozó kéréseket. Ez azt jelenti, hogy minden URL (route) mögött egy meghatározott logika vagy nézet (view) található, amit a router közvetít.

Laravelben a routeokat a routes könyvtárban található fájlokban hozhatod létre, és ezeket itt irányíthatod különböző vezérlőkhöz vagy nézetekhez. Az alapértelmezett fájl, amelyet a webes útvonalak kezelésére használunk, a web.php. Itt adhatod meg azokat az útvonalakat, amelyek a böngészőből érhetők el.

Nézzünk először néhány nagyon egyszerű beállítást ami segít megérteni az útvonalak megértésést. Ami a welcome nézetre vezet, ez egy  alapértelmezett útvonal, ún. default route, ami rossz példa, mert a route-ba normál esetben sosem írunk functiont, mert ezt a route-ot a webszerverünk el casheli, és ez nem fog tudni funcitont cash-elni, csak szöveget, úgyhogy nem így fogjuk ezt csinálni, a routokat a controllerek fogják kiszolgálni, de vizsgálódásra egyenlőre megfelel.

Másoljuk le és kicsit módosítsunk:

Route::get('/Home', function () {

    return "<h1>Szia Uram!<h1>";

});

itt a böngészőbe már a crud.test/Home –ot kell beírni, hogy megjelenjen a szöveg.

Ez nem túl praktikus megoldás, ezért használjuk a view-t.  A views-t a resources mappán belül találjuk meg. A welcome.blade.php fájlon belül találjuk a welcome page tartalmát.

Amit a 28-ik sor után látunk @ és {} ez a blade szintaxis. A Blade a Laravel által biztosított sablonozó motor. Más népszerű PHP sablonozó motorokkal ellentétben a Blade nem korlátozza a sima PHP kód használatát a nézetekben.

Hozzunk létre egy új fájlt : home.blade.php

Módosítsuk az oldalt, írjunk bele egy üdvözlő szöveget és adjuk meg hozzá a helyes routot

Route::get('/Home', function () {

    return view('home');

});

a böngészőben a /Home hivatkozással tudjuk megnyitni

A routes view-ban megadhatunk változót is második argumentumként:

Route::get('/Home', function () {

    return view('home', ['name' => "Zita"]);

});

Majd ezt követően a home.blade.php-ben pedig írassuk ki: <h1>Szia <?php echo $name ?></h1>

A változók nevét megadhatjuk göndör zárójelekben is, ugyanúgy fog működni:

<h1>Szia {{ $name }}</h1>

Először is hozzunk létre egy új controllert a következő paranccsal:

php artisan make:controller ContactController

Ez a parancs létrehoz egy új vezérlőt ContactController.php néven az app/Http/Controllers mappában.

Miután létrehoztad a vezérlőt, hozzáadhatod a szükséges metódusokat, például egy show metódust a kapcsolat oldal megjelenítésére:

public function show() { return view('contact'); }

Hozzuk létre a contact.blade.php fájlt a következő tartalommal:

<form action="/contact" method="POST">

    @csrf

    <label for="name">Név:</label>

    <input type="text" name="name" id="name" required>

    <label for="email">Email:</label>

    <input type="email" name="email" id="email" required>

    <label for="message">Üzenet:</label>

    <textarea name="message" id="message" required></textarea>

    <button type="submit">Küldés</button>

</form>

A @csrf egy Blade direktíva Laravelben, amely az űrlapok biztonságossá tételére szolgál. A CSRF (Cross-Site Request Forgery) védelem biztosítása érdekében Laravel minden űrlapbeküldést egyedi tokennel lát el. Ez megakadályozza, hogy más weboldalak rosszindulatú kéréseket küldjenek a szervernek a felhasználó nevében.

A laravel automatikusan létrehoz egy token-t minden egyes felhasználói munkamenethez. Amikor egy űrlapot küldünk be, a Laravel elvárja, hogy ez a token szerepeljen az űrlapban, és ellenőrzi, hogy a token megegyezik-e a szerver által elvárttal.

A @csrf Blade direktíva ezt a tokent automatikusan beilleszti az űrlapba egy rejtett mezőben: <input type="hidden" name="_token" value="a_csrf_token_hash">

Ezután a web.php fájlban hozzá adjuk a szükséges class-t:

use App\Http\Controllers\ContactController;

majd az útvonalat: (de ha elég jó extensionokat letelepítettél, akkor elég az útvonal, a szükséges osztályt be tudod importálni egy kattintással)

Route::get('/contact', [ContactController::class, 'show']);

Ez a példa azt mutatja, hogyan irányítja a Laravel a /contact URL-re érkező GET kéréseket a ContactController vezérlő show metódusához.

A laravel controllerei az app mappán belül, a http mappán belül a Controllers mappán belül található controllers.php.

Tehát szintaxis:

php artisan [utasítás] [--paraméterek]

Objektumok létrehozása:

php artisan make:[objektum típus] [--paraméterek]

artisan make:controller - -help a helpereket mutatja meg

php artisan make:controller [kontroller_fájl_neve]

Feladat készíts a welcome.blade.php fájlhoz controller-t, és javítsd át hozzá az útvonalat!

A Laravel támogatja a dinamikus routeokat is, ahol változókat adhatunk át az útvonalban. Például, ha egy konkrét felhasználói profilt szeretnél megjeleníteni:

Route::get('/profile/{id}', [ProfileController::class, 'show']);

Ebben az esetben a {id} egy dinamikus paraméter, amelyet a felhasználó azonosítójaként használhatsz. A Laravel automatikusan kinyeri az URL-ből az értéket, és átadja a show metódusnak.

A Laravel routing rendszere lehetővé teszi a middleware-ek beállítását, amelyek egyfajta szűrőként működnek, mielőtt a kérést továbbítaná a vezérlőhöz. A middleware-ek segítségével például ellenőrizheted, hogy a felhasználó be van-e jelentkezve, vagy hogy van-e megfelelő jogosultsága az adott oldal eléréséhez.

Route::get('/dashboard', [DashboardController::class, 'index'])->middleware('auth');

ebben az esetben a dashboard oldal eléréséhez a auth middleware biztosítja, hogy csak a bejelentkezett felhasználók férjenek hozzá a dashboard-hoz.

A Laravel támogatja az összes alapvető HTTP metódust, beleértve a GET, POST, PUT, DELETE és más módszereket. Ezek használatával szabályozhatod, hogy egy-egy route milyen típusú kéréseket fogadjon.

• GET: Az adatok lekérésére szolgál. Pl. egy bejelentkezési oldal megjelenítéséhez.
• POST: Adatok beküldésére használatos. Pl. egy regisztrációs űrlap adatainak mentésére.
• PUT/PATCH: Adatok frissítésére.
• DELETE: Adatok törlésére.

Route::get('/posts', [PostController::class, 'index']); // Listázás

Route::post('/posts', [PostController::class, 'store']); // Létrehozás

Route::put('/posts/{id}', [PostController::class, 'update']); // Frissítés

Route::delete('/posts/{id}', [PostController::class, 'destroy']); // Törlés

Kezdetben elegendő a web.php fájlra koncentrálni, amely a böngészőből elérhető, általános webes útvonalakat kezeli. Ebben a fájlban minden útvonal közvetlenül a felhasználók által hozzáférhető URL-ekre vonatkozik, és tartalmazhat statikus oldalakat, dinamikus tartalmakat, vagy vezérlőkhöz rendelt logikát.

Laravel routing rendszere rugalmas és könnyen használható, így segít egyszerűen felépíteni egy komplex, skálázható webes alkalmazást. A web.php segítségével az alkalmazás struktúráját alapozhatod meg, mielőtt továbblépsz az összetettebb route-konfigurációkra és API-útvonalakra.