13B Autószerelő műhely Laravel

Autószerelő oldal: 

- kiegészítve felvitellel

- mondtam hogy a model foglalt név a Laravelben :-) 

https://github.com/latiza/Carmehanics_laravel_app

Űrlap ellenőrzése és az adatok megjelenítése

 Készítsd el az alábbi űrlapot: 

Jelenítsd meg a beküldött adatokat:

12 évfolyamon javascripttel

13-ik évfolyamon PHP-vel

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