2024. szeptember 13., péntek

13 frontend - AngularJs ismétlés

 AngularJS Direktívák és Szintaxisok:

1. ng-app

  • Leírás: Az AngularJS alkalmazás kezdőpontját jelöli.
  • Példa: <html ng-app="myApp">
  • Használat: Meghatározza, hogy az AngularJS alkalmazás melyik HTML elem alatt indul el.

2. ng-controller

  • Leírás: Az AngularJS vezérlőt hozzárendeli a HTML elemhez.
  • Példa: <body ng-controller="MyController">
  • Használat: A vezérlő rendelkezésre bocsátja az $scope-t az alatta lévő HTML elemekhez.

3. ng-model

  • Leírás: Kötést biztosít az input elemek és az AngularJS $scope változói között.
  • Példa: <input type="text" ng-model="user.name">
  • Használat: Az input mező értékét összeköti a $scope egy változójával.

4. ng-if

  • Leírás: Az AngularJS direktíva, amely egy kifejezés alapján dönti el, hogy az adott HTML elem megjelenjen-e.
  • Példa: <div ng-if="isVisible">Content</div>
  • Használat: Ha az isVisible változó igaz, a div elem megjelenik, különben el van rejtve.

5. ng-repeat

  • Leírás: Az AngularJS direktíva, amely lehetővé teszi az elemek ismételt létrehozását egy tömb vagy lista alapján.
  • Példa: <li ng-repeat="item in items">{{ item }}</li>
  • Használat: Minden elem a items tömbből létrehoz egy <li> elemet.

6. ng-submit

  • Leírás: Az űrlap elküldésekor végrehajtandó funkciót határozza meg.
  • Példa: <form ng-submit="submitForm()">
  • Használat: Amikor az űrlapot elküldik, a submitForm függvény hívódik meg.

7. ng-src

  • Leírás: Biztosítja, hogy a képek forrása dinamikusan állítható be.
  • Példa: <img ng-src="{{ user.profilePicture }}">
  • Használat: Az ng-src helyettesíti a képek URL-jét az interpolált értékkel.

8. ng-class

  • Leírás: Dinamikusan alkalmaz osztályokat az elemre az AngularJS változók alapján.
  • Példa: <div ng-class="{ 'active': isActive }"></div>
  • Használat: Az active osztály alkalmazva lesz, ha az isActive változó igaz.

9. ng-show

  • Leírás: Az AngularJS direktíva, amely megjeleníti vagy elrejti az elemet az adott kifejezés alapján.
  • Példa: <div ng-show="isVisible">Content</div>
  • Használat: Ha az isVisible változó igaz, az elem látható lesz.

10. ng-hide

  • Leírás: Az AngularJS direktíva, amely elrejti az elemet az adott kifejezés alapján.
  • Példa: <div ng-hide="isHidden">Content</div>
  • Használat: Ha az isHidden változó igaz, az elem el lesz rejtve.

11. ng-model-options

  • Leírás: Beállítja az ng-model viselkedését, például az értékek késleltetett frissítését.
  • Példa: <input type="text" ng-model="user.name" ng-model-options="{ debounce: 500 }">
  • Használat: Az értékek késleltetett frissítése 500 milliszekundum után történik.

Interpoláció

  • {{ expression }} - AngularJS interpolációs szintaxis, amely lehetővé teszi a változók és kifejezések megjelenítését a HTML-ben.
    • Példa: <p>Hello, {{ user.name }}!</p>
    • Használat: A user.name értéke beillesztésre kerül a HTML tartalmába.
Egy űrlap feldolgozásához a követekző direktívákat használhatjuk fel
  • ng-app="formApp": Az AngularJS alkalmazás kezdőpontját jelöli, itt indítja az AngularJS az alkalmazást.
  • ng-controller="FormController": Az AngularJS vezérlőt hozzárendeli a <body> elemhez, így a vezérlő elérhető lesz az alatta lévő HTML elemek számára.
  • ng-if="!formSubmitted": Az AngularJS direktíva, amely a formSubmitted változó értékétől függően megjeleníti vagy elrejti a HTML elemet.
  • ng-model="formData.name": Kötést biztosít a form elemei és az AngularJS $scope objektuma között, itt a formData.name-t használja.
  • ng-submit="submitForm()": Az űrlap elküldésekor a submitForm függvény hívódik meg.
  • ng-src="{{ submissionResult.photo }}": AngularJS direktíva, amely biztosítja, hogy a kép URL-je helyesen legyen interpolálva és megjelenítve.
  • {{ expression }}: AngularJS interpolációs szintaxis, amely lehetővé teszi a változók és kifejezések megjelenítését a HTML-ben.

Ezek a direktívák és szintaxisok segítenek abban, hogy az AngularJS dinamikusan kezeljük a HTML tartalmat és interakciókat a felhasználói felületen.

2024. szeptember 11., szerda

12 Frontend - Flexbox ismétlő feladat

 Feladat: Készíts egy weboldal elrendezést, amely a következő elemekből áll:

  1. Navigációs sáv:
    • A weboldal tetején helyezkedik el.
    • Bal oldalon legyen a logó.
    • Középen helyezkedjen el négy menüpont: "Home", "About", "Portfolio", "Contact".
    • A jobb oldalon legyen egy keresőmező és egy keresés gomb.
    • A navigációs sáv legyen rugalmas, tehát igazodjon a képernyő szélességéhez.
  2. Fő hős kép (Hero section):
    • Közvetlenül a navigációs sáv alatt helyezkedjen el.
    • Tartalmazzon egy háttérképet, amely kitölti a teljes szélességet és a képernyő felső felét.
    • A háttérkép közepén helyezkedjen el egy cím és egy alatta lévő bekezdés.
    • Közvetlenül a cím alatt legyen egy CTA (Call to Action) gomb, amely a felhasználót egy másik szakaszra irányítja.
  3. Szolgáltatások szekció:
    • A hős kép alatt található.
    • Tartalmazzon három oszlopot, amelyek mindegyike egy-egy szolgáltatást mutat be.
    • Minden oszlop tartalmazzon egy ikont, egy rövid címet és egy rövid leírást.
    • Az oszlopok legyenek egyenlő szélességűek és egymás mellett helyezkedjenek el.
  4. Portfólió szekció:
    • A szolgáltatások szekció alatt található.
    • Tartalmazzon egy rácsos galériát, amelyben négy kép található, két sorban elrendezve.
    • A képek legyenek egyenlő méretűek és egymás mellett, valamint alatt helyezkedjenek el.
    • Kisebb képernyőn a képek rugalmasan igazodjanak, két oszlopban vagy egy oszlopban rendeződve.
  5. Lábléc:
    • Az oldal alján helyezkedik el.
    • Tartalmazzon három oszlopot:
      • Az első oszlopban legyen egy rövid szöveg az oldalról.
      • A második oszlopban legyenek hasznos linkek.
      • A harmadik oszlopban legyen egy egyszerű feliratkozási űrlap (név és e-mail mezővel, valamint egy gombbal).
    • Az oszlopok legyenek egymás mellett, és egyenletesen oszoljanak el.

Követelmények:

  • Az egész oldal elrendezését Flexbox segítségével kell megoldani.
  • Az oldal legyen teljesen reszponzív, tehát kisebb képernyőn is jól jelenjen meg.
  • A navigációs sáv és a lábléc mindig látható legyen, függetlenül az oldal tartalmától.
  • A szolgáltatások és a portfólió szekció oszlopai legyenek rugalmasak, és kisebb képernyőkön egymás alá rendeződjenek.
  • Ügyelj arra, hogy a tartalom jól olvasható legyen minden eszközön.

Megjegyzések a Megoldáshoz

  1. Navigációs sáv: A display: flex segítségével a logó, a menüpontok és a keresőmező/gomb egy sorba rendezve, egymástól egyenlő távolságra helyezkednek el.
  2. Hős kép szekció: A Flexbox használata biztosítja, hogy a tartalom középen helyezkedjen el mind függőlegesen, mind vízszintesen. A szekció teljes szélességű, és a háttérképet teljesen kitölti.
  3. Szolgáltatások szekció: Három oszlop, amelyek egyenletesen oszlanak el a rendelkezésre álló helyen. Mobil nézetben ezek az oszlopok egymás alatt jelennek meg.
  4. Portfólió szekció: Rugalmas rács, amely a rendelkezésre álló hely függvényében két vagy egy oszlopba rendezi a képeket.
  5. Lábléc: Három szekcióból álló elrendezés, amely rugalmasan alkalmazkodik a különböző képernyőméretekhez. Mobil nézetben ezek a szekciók egymás alatt jelennek meg.





13 frontend - backend űrlap feldolgozása

 Hozz létre egy mappát, a mappa neve a neved legyen. Hozz létre egy űrlapot az alábbi képen látható input mezőkkel. Használd a megfelelő típusú beviteli mezőket. 


Küld el a felhasználó adatait a php-nek feldolgozásra. Vizsgáld meg léteznek e a küldött adatok, tisztítsd meg a felhasználó által beküldött adatokat. Majd írasd ki őket: 




2024. szeptember 9., hétfő

2024.09.09.-13




13 frontend - 9. Aszinkron JavaScript: Callback-ek, Promises, Async/Await

Mi az a callback?

A callback egy függvény, amelyet egy másik függvény paramétereként adunk át. A callback célja, hogy egy művelet befejezése után további kódot futtassunk. Callback-eket gyakran használunk aszinkron műveletek, például hálózati kérések vagy időzített feladatok kezelésére.

Hogyan működik?
Amikor egy aszinkron műveletet végzünk, például egy adat lekérdezést az API-ból, nem várhatjuk el, hogy azonnal befejeződjön. Ehelyett, amikor az adatokat betöltöttük, a callback függvény hívódik meg, amely a művelet befejeződése után fut le.

Példa:

function fetchData(callback) {
    setTimeout(() => {
        console.log('Adatok betöltve');
        callback(); // Callback meghívása
    }, 1000); // 1 másodperces késleltetés
}
 
function onDataLoaded() {
    console.log('A callback függvény végrehajtása');
}
 
// fetchData hívása a onDataLoaded callback-kel
fetchData(onDataLoaded);

Magyarázat:
A fetchData függvény 1 másodpercet vár, majd kiírja, hogy "Adatok betöltve". Ezután meghívja a callback függvényt, amely a onDataLoaded-ként lett átadva, így kiírja, hogy "A callback függvény végrehajtása".

9.2 Promises

Mi az a Promise?
A Promise egy objektum, amely egy aszinkron művelet jövőbeli eredményét vagy hibáját képviseli. Három állapota van:

  • Pending (függőben lévő): Az ígéret még nem teljesült, és nem is lett elutasítva.
  • Fulfilled (teljesült): Az ígéret sikeresen teljesült, és az eredmény elérhető.
  • Rejected (elutasított): Az ígéret nem teljesült, és egy hibaüzenet érhető el.

Hogyan működik?
A Promise-t akkor használjuk, amikor egy aszinkron műveletet szeretnénk végrehajtani és kezelni szeretnénk a sikeres és sikertelen befejeződést is.

Példa:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // Simulált siker
            if (success) {
                console.log('Adatok betöltve');
                resolve(); // Promise teljesült
            } else {
                reject('Hiba történt'); // Promise elutasítva
            }
        }, 1000);
    });
}
 
// fetchData hívása és Promise kezelése
fetchData()
    .then(() => {
        console.log('A Promise sikeresen teljesült');
    })
    .catch(error => {
        console.error('Hiba:', error);
    });

Magyarázat:
A fetchData függvény egy új Promise-t ad vissza. A setTimeout után, ha a success érték true, akkor a Promise teljesül, és a .then() blokk fut le. Ha a success érték false, a Promise elutasításra kerül, és a .catch() blokk fut le.

9.3 Async/Await

Mi az az async/await?
Az async és await a Promise-ek egyszerűsített kezelési módjai. Az async kulcsszó egy függvényt aszinkronnak jelöl, ami automatikusan egy Promise-t ad vissza. Az await kulcsszó pedig várakozik egy Promise teljesülésére, mielőtt tovább lépne a következő sorra.

Hogyan működik?
Az async funkciók lehetővé teszik, hogy az aszinkron kódot szinkronnak tűnő módon írjuk, ami olvashatóbbá és karbantarthatóbbá teszi a kódot.

Példa:

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // Simulált siker
            if (success) {
                console.log('Adatok betöltve');
                resolve(); // Promise teljesült
            } else {
                reject('Hiba történt'); // Promise elutasítva
            }
        }, 1000);
    });
}
 
async function loadData() {
    try {
        await fetchData(); // Várakozás a fetchData Promise-ra
        console.log('Az async/await sikeresen teljesült');
    } catch (error) {
        console.error('Hiba:', error); // Hibakezelés
    }
}
 
// loadData hívása
loadData();


A loadData egy async függvény, amely az await kulcsszó segítségével várakozik a fetchData Promise-ra. Ha a Promise teljesül, a következő sorok futnak le, ellenkező esetben a catch blokk kezelni fogja a hibát.

Feladat: Adatfeldolgozó Rendszer

Feladat Leírása

A feladat célja, hogy készíts egy egyszerű alkalmazást, amely bemutatja az aszinkron JavaScript különböző módszereit. Az alkalmazásnak egy fiktív adatfeldolgozó rendszert kell szimulálnia, amely adatokat tölt le egy szerverről, és az adatokat feldolgozza.

Hozz létre egy js kiterjesztésű fájlt, az ellenőrzéshez, nyiss egy új terminált, és a „node fájlod neve” paranccsal tudod ellenőrizni az eredményt. Csak az aktuális mappád legyen megnyitva a vsc-ben.

Elvárt Funkcionalitás

1.     Adatletöltés: Készíts egy funkciót, amely szimulál egy aszinkron adatletöltést. Az adatletöltést egy setTimeout-tal kell szimulálni, amely 2 másodperc után visszaad egy adatobjektumot.

2.     Adatok Feldolgozása Callback-kel: Implementálj egy funkciót, amely a letöltött adatokat feldolgozza, és az eredményt egy callback függvény segítségével adja vissza.

3.     Adatok Feldolgozása Promises-szel: Implementálj egy funkciót, amely a letöltött adatokat feldolgozza, és a Promise API-t használja a feldolgozott adatok visszaadására.

4.     Adatok Feldolgozása Async/Await-tel: Implementálj egy funkciót, amely az async/await segítségével dolgozza fel az adatokat.

A feladat végén az alkalmazás három különböző módon kell, hogy kiírja a feldolgozott adatokat a konzolra:

  1. Callback használatával
  2. Promise használatával
  3. Async/await használatával
Minta: 


Feladat: Külső JSON Adatok Feldolgozása

Feladat Célja

A feladat célja, hogy gyakorold az aszinkron JavaScript technikák alkalmazását külső JSON API-val. A JSONPlaceholder API-t fogjuk használni, amely egy ingyenes, fiktív API, és lehetővé teszi, hogy különböző típusú JSON adatokat kérjünk le. A feladat során három különböző módszert fogunk használni az adatok feldolgozására: callback-eket, Promises-t és async/await-et.

API URL

Az adatok lekéréséhez használd az alábbi JSONPlaceholder API URL-t: https://jsonplaceholder.typicode.com/users

Feladat Leírása

  1. Külső Adatok Lekérése: Készíts egy JavaScript funkciót, amely lekéri a felhasználói adatokat a JSONPlaceholder API-ról.

  2. Adatok Feldolgozása Callback-kel: Implementálj egy funkciót, amely a lekért adatokat egy callback segítségével dolgozza fel, és a feldolgozott adatokat egy HTML táblázatban jeleníti meg.

  3. Adatok Feldolgozása Promises-szel: Implementálj egy funkciót, amely a lekért adatokat Promises segítségével dolgozza fel, és a feldolgozott adatokat a HTML táblázatban jeleníti meg.

  4. Adatok Feldolgozása Async/Await-tel: Implementálj egy funkciót, amely async/await használatával dolgozza fel az adatokat, és a feldolgozott adatokat a HTML táblázatban jeleníti meg.

Teendők

  1. HTML és CSS Előkészítése:

    • Készíts egy HTML oldalt, amely tartalmaz egy táblázatot a felhasználói adatok megjelenítésére.
    • Hozz létre három gombot, amelyek különböző aszinkron módszerekkel történő adatfeldolgozást indítanak el.
  2. JavaScript Implementáció:

    • Adatok Lekérése:
      • Implementálj egy fetchUsers függvényt, amely lekéri a felhasználói adatokat a JSONPlaceholder API-ból.
    • Adatok Feldolgozása Callback-kel:
      • Implementálj egy processUsersWithCallback függvényt, amely a lekért adatokat callback-kel dolgozza fel.
      • Tedd lehetővé, hogy a feldolgozott adatokat a callback függvény a HTML táblázatban jelenítse meg.
    • Adatok Feldolgozása Promises-szel:
      • Implementálj egy processUsersWithPromise függvényt, amely a lekért adatokat Promises segítségével dolgozza fel.
      • Tedd lehetővé, hogy a feldolgozott adatokat a Promise .then() metódusában a HTML táblázatban jelenítse meg.
    • Adatok Feldolgozása Async/Await-tel:
      • Implementálj egy processUsersWithAsyncAwait függvényt, amely async/await használatával dolgozza fel az adatokat.
      • Tedd lehetővé, hogy a feldolgozott adatokat az async/await .then() metódusában a HTML táblázatban jelenítse meg.
  3. HTML Táblázat Frissítése:

    • Készíts egy displayUsers függvényt, amely frissíti a HTML táblázatot a feldolgozott felhasználói adatokkal.
  4. Gombok Eseménykezelése:

    • Adj hozzá eseménykezelőket a három gombhoz, amelyek az adatfeldolgozó funkciókat hívják meg és frissítik a táblázatot.

Elvárt Eredmény

  1. Callback használatával: A felhasználói adatok a táblázatban jelennek meg a Callback funkció használatával.
  2. Promise használatával: A felhasználói adatok a táblázatban jelennek meg a Promise használatával.
  3. Async/Await használatával: A felhasználói adatok a táblázatban jelennek meg az Async/Await használatával.
Minta: 


13 frontend - szemantikus elemek, média lekérdezések

 A <div> egy blokkszintű (block) objektum, ami azt jelenti, hogy mindig új sorban kezdődik, és kihasználja a teljes rendelkezésre álló szélességet. Ezzel szemben a <span> egy sorszintű (inline) elem, tehát nem kezdődik új sorban, és szélessége is csak akkora, mint amekkora helyre szüksége van.

<div> és <span> tagek mellé, a HTML5 szabványban új, szemantikus jelentéssel bíró strukturális elemeket vezettek be:

  • <header>...</header>: az oldal vagy egy tartalmi egység fejléce
  • <footer>...</footer>: az oldal vagy egy tartalmi egység lábléce
  • <nav>...</nav>: navigációs menü
  • <aside>...</aside>: érintőlegesen kapcsolódó tartalom (jellemzően oldalsáv)
  • <main>...</main>: fő tartalom
  • <section>...</section>: logikai egység
  • <article>...</article>: önálló tartalom.

A fenti tagek kivétel nélkül blokkszintű (block) elemek, a <div>-hez hasonlóan.

Ezek a tagek - az általános célú <div> és <span> tagekkel ellentétben - szemantikai jelentéssel bírnak, tehát egyértelműen meghatározzák a tartalmuk jelentését (pl. egy <nav>-ról tudjuk, hogy valamilyen navigációt valósít meg).

A HTML5-ben bevezetett szemantikus tageket felhasználva precízebben leírhatjuk egy weboldal szerkezetét. 

Média Lekérdezések (Media Queries)

A média lekérdezések a webes dizájn egyik alapvető eszközei, amelyek lehetővé teszik, hogy a weboldal megjelenése alkalmazkodjon a különböző eszközökhöz és képernyőméretekhez. Ez segít abban, hogy a weboldal minden eszközön jól nézzen ki, és optimális felhasználói élményt nyújtson.

1. Média Lekérdezések Alapjai

A média lekérdezések a CSS-ben találhatóak, és a @media szabály segítségével alkalmazhatók. Az alap szintaxis a következő:

@media [feltételek] { /* Itt adhatók meg a stílusok */ }

A feltételek általában a képernyő szélességére, magasságára vagy egyéb jellemzőkre vonatkoznak.

2. Média Lekérdezések Típusai

2.1. Szélesség és Magasság

A leggyakoribb feltételek a képernyő szélességére és magasságára vonatkoznak. Használhatjuk a min-width, max-width, min-height, és max-height kifejezéseket:

/* Nagy képernyők esetén (szélesség legalább 1024px) */ @media (min-width: 1024px) { body { background-color: lightblue; } } /* Kis képernyők esetén (szélesség legfeljebb 768px) */ @media (max-width: 768px) { body { background-color: lightcoral; } }
2.2. Tájolás

A orientation feltétel a képernyő tájolását jelzi, amely lehet portrait (álló) vagy landscape (fekvő):

/* Álló tájolás esetén */ @media (orientation: portrait) { body { font-size: 16px; } } /* Fekvő tájolás esetén */ @media (orientation: landscape) { body { font-size: 18px; } }
2.3. Felbontás

A resolution feltétel a képernyő felbontását jelzi DPI (dots per inch) vagy DPCM (dots per centimeter) egységekben:

/* Magas felbontású képernyők (pl. Retina kijelzők) */ @media (min-resolution: 192dpi) { img { width: 50%; } }

3. Média Lekérdezések Kombinálása

Több média lekérdezés kombinálható egyetlen szabályblokkban, hogy több feltételt is figyelembe vegyünk:

/* Képernyő, amely legalább 768px széles, és tájolása álló */ @media (min-width: 768px) and (orientation: portrait) { .container { width: 50%; } }

4. Média Lekérdezések Használata a Weboldal Reszponzív Tervezésében

A reszponzív webdizájn során a média lekérdezések kulcsszerepet játszanak a weboldalak alkalmazkodó képességében. Kövesd az alábbi lépéseket a hatékony reszponzív tervezéshez:

  1. Alap Stílusok Meghatározása: Határozd meg a weboldal alapértelmezett stílusait, amelyek az asztali képernyőkre vonatkoznak.
  2. Média Lekérdezések Alkalmazása: Adj hozzá média lekérdezéseket a CSS fájlhoz, hogy a stílusok alkalmazkodjanak a kisebb képernyőkhöz és különböző eszközökhöz.
  3. Tesztelés és Finomhangolás: Teszteld a weboldalt különböző eszközökön és képernyőméreteken, és finomítsd a média lekérdezéseket a legjobb felhasználói élmény érdekében.

    Egyszerű Reszponzív Weboldal példa
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Reszponzív Weboldal</title> <style> body { font-family: Arial, sans-serif; } .container { width: 80%; margin: 0 auto; } /* Nagy képernyők */ @media (min-width: 1024px) { .container { background-color: lightblue; } } /* Kis képernyők */ @media (max-width: 768px) { .container { background-color: lightcoral; width: 95%; } } </style> </head> <body> <div class="container"> <h1>Üdvözöllek a reszponzív weboldalon!</h1> <p>Ez a weboldal alkalmazkodik a képernyő méretéhez.</p> </div> </body> </html>

A média lekérdezések lehetővé teszik a weboldal stílusainak dinamikus alkalmazkodását különböző eszközökhöz és nézetekhez. Az alapértelmezett stílusok meghatározása után a média lekérdezések segítenek abban, hogy a weboldal optimalizáltan jelenjen meg minden eszközön, javítva ezzel a felhasználói élményt.

Tanfolyami jelentkezés – HTML űrlap készítése, adatok feldolgozása PHP-val, validációval és formázással

  HTML űrlap (jelentkezes.html) Készíts egy HTML oldalt, amely egy tanfolyamra történő jelentkezési űrlapot jelenít meg. Az űrlap legyen ...