13 B - 10. PHP adatbázis műveletek továbbfejlesztése: Kérések optimalizálása, indexek használata.

 A PHP alapú alkalmazásoknál az adatbázisműveletek hatékonyságának javítása kulcsfontosságú a teljesítmény optimalizálása érdekében. Itt van néhány lényeges pont a kérdések optimalizálásával és az indexek használatával kapcsolatban:

10.1.SQL kérdések optimalizálása:

·        Minimális adatok lekérése: Minden SQL lekérdezésben érdemes csak a szükséges adatokat lekérni. Ha nincs szükséged az összes oszlopra, akkor ne használj SELECT *, hanem kifejezetten határozd meg azokat az oszlopokat, amelyekre szükséged van (SELECT name, email FROM users).

·        WHERE feltételek optimalizálása: A WHERE feltétel használatával pontosíthatod a lekérdezéseket, így csak a releváns rekordokat kapod meg. Fontos, hogy a WHERE feltételben lévő oszlopokat érdemes indexelni, hogy a lekérdezés gyorsabb legyen.

·        LIMIT használata: Ha nem kell az összes találat, akkor érdemes LIMIT-et alkalmazni, különösen nagy adatbázisok esetén. Ez segít a memóriaterhelés csökkentésében és gyorsabbá teheti az oldalak betöltését. Pl.:

SELECT name, email FROM users WHERE status = 'active' LIMIT 10;

·        Csoportosítás és aggregálás: Ha szükséged van összegző műveletekre (pl. átlagok, összeg, csoportosítás), akkor használd a GROUP BY, COUNT(), SUM(), AVG() stb. műveleteket, hogy közvetlenül az adatbázisban számold ki az adatokat, így nem kell utólagos feldolgozást végezned a PHP-ben.

·        Kapcsolt táblák használata (JOIN): Több táblából történő adatlekérés esetén a JOIN műveletek (pl. INNER JOIN, LEFT JOIN) használatával optimalizálhatod az adatlekérdezést, és elkerülheted a több különálló lekérdezésből adódó felesleges műveleteket.

10.2.Indexek használata:

Az indexek kulcsfontosságú szerepet játszanak az adatbázis teljesítményének növelésében, mivel gyorsabbá teszik az adatok lekérdezését, különösen nagy táblák esetén.

·        Indexek szerepe: Az indexek olyan struktúrák, amelyek segítenek gyorsan megtalálni a rekordokat anélkül, hogy végig kellene nézni az egész táblát (full table scan). Az indexek a táblák bizonyos oszlopaira épülnek, és azok gyors keresését támogatják.

·        Indexek létrehozása: Az indexeket általában azokon az oszlopokon hozzuk létre, amelyeken gyakran keresünk, szűrünk, vagy amelyekkel gyakran kapcsolunk más táblákhoz (JOIN). Például, ha van egy users tábla, ahol gyakran keresel a email mező alapján, akkor érdemes egy indexet létrehozni az email oszlopon:

CREATE INDEX idx_email ON users (email);

·        Több oszlopos indexek (Composite Indexek): Ha a lekérdezésed több oszlopra építve keres adatokat (pl. WHERE name = 'John' AND age = 30), érdemes egy kombinált indexet létrehozni:

CREATE INDEX idx_name_age ON users (name, age);

·        Elsődleges kulcs és egyedi indexek: Minden táblában van egy elsődleges kulcs (primary key), amely automatikusan indexelve van. Emellett használhatsz egyedi indexeket (unique index) is, amelyek biztosítják, hogy egy adott oszlop (vagy oszlopok kombinációja) értékei egyediek legyenek a táblában.

·        Indexek hátrányai: Bár az indexek nagyban felgyorsíthatják a lekérdezéseket, van néhány hátrányuk is. Az indexek karbantartása (pl. adatok beszúrásakor, módosításakor) extra erőforrást igényel, így túl sok index lassíthatja az adatmódosító műveleteket (INSERT, UPDATE, DELETE).

10.3.Adatbázis normalizálása és optimalizálása:

·        Adatbázis normalizálás: Ez a folyamat segít megszüntetni az adatok redundanciáját, és biztosítja az adatok konzisztenciáját. A normalizálás során a nagy táblákat kisebb, logikai egységekre bontod, amelyeket kulcsokkal kapcsolsz össze (pl. idegen kulcsokkal).

·        Denormalizálás: Bizonyos esetekben, ahol az adatok elérése elsődleges szempont, előnyös lehet a denormalizálás, vagyis adatredundancia bevezetése a gyorsabb lekérdezések érdekében. Ez általában nagy volumenű olvasási műveleteknél fordul elő.

10.4.Caching használata:

• Adatok cache-elése: Ha gyakran lekérdezel ugyanazokat az adatokat az adatbázisból, érdemes caching mechanizmust alkalmazni (pl. Memcached, Redis), hogy ne kelljen mindig az adatbázis-lekérdezést végrehajtani. Az adatok gyorsítótárazása nagy teljesítménynövekedést eredményezhet.

10.5.Query Plan elemzése:

• Query Plan: Az adatbázisok (pl. MySQL) lehetővé teszik, hogy megnézd a lekérdezések végrehajtási tervét (query plan) az EXPLAIN kulcsszó segítségével. Ezáltal láthatod, hogy a kérdésed hogyan hajtódik végre, és megértheted, hogy az adatbázis milyen indexeket használ, vagy épp miért fut lassan egy lekérdezés.

EXPLAIN SELECT name, email FROM users WHERE email = 'example@example.com';

Összefoglalva, a PHP-alapú adatbázis-műveletek optimalizálása során fontos a hatékony SQL-lekérdezések megírása, a megfelelő indexek használata, az adatbázis struktúrájának optimalizálása és az esetleges cache-elés bevezetése a jobb teljesítmény érdekében.

12 B - web javascript ismétlő feladat

 Készítsd el az alábbi feladatot: 

Működése:

1. A felhasználó kiválaszt egy úti célt a legördülő menüből (Párizs, New York, Tokió).
2. Kiválasztja, hogy kér-e biztosítást.
3. Amikor a felhasználó rákattint a "Számold ki a végösszeget" gombra, a program kiírja az utazás teljes költségét a biztosítással együtt (ha kérte azt).

Segítség a megoldáshoz:

1. A felhasználó egy HTML <select> elemből választhat 3 különböző úti cél közül.
2. A választott úti cél alapján beolvassuk az árát.
3. A megoldáshoz írj egy függvényt, amelyet kattintásra hívunk meg.

Példa:

• Úti célok:

  • Párizs: 1000$
  • New York: 1500$
  • Tokió: 2000$

• Biztosítás: 100$

12B IKT - Készítsétek el egy állateledeles weboldalát CSS GRID használatával.

Az oldal létrehozásához szemantikus elemeket használj.

Ügyel arra, hogy az oldal reszponzív legyen, tehát 3 különböző méretre tervezd.

A mobilos nézetben 1 hasábban jelenlen meg minden.

A tabletes nézetben 2 hasábban.

Legyen menüje a weboldalnak, legalább 3 oldalt tartalmazzon. (Főoldal, statisztikák, rendelések állapota, stb. )

Normál képernyős nézetben viszont 3 hasábnak lennie kell. (Egyik oldalon lehet pl reklám sáv, Google hirdetéseknek.

A fő tartalomban legyenek címsorok, logikusan elrendezve, (cím, alcím), bekezdések.

Legyen lábléce az oldalaknak, elérhetőségekkel.

Az egyik oldalon legyen táblázat is, ami reszponzív legyen. (w3school-on találsz rá jó megoldást)

Valahol alkalmazz benne számozott és számozatlan felsorolást is. A számozatlan felsorolás esetében alkalmazz valamilyen egyedi lista jelet. (pl lehet futár adatok, rendelési adatok, stb.)

Legyenek az oldalon képek, ábrák, statisztikai ábrák, kimutatások, rendelési státuszok.

Példa:

tabletes nézet:

 

mobilos nézet:

 

A projekt elkészítésének része a dokumentáció elkészítése. A feladat mappában találtok egy „záródolgozat formátum” elnevezésű dokumentumot. A csapat egyik tagja folyamatosan vezesse a megadott pontok szerint. Címlapra kerülhet majd egy képernyő fotó a weboldal kezdő oldaláról, a készítők neve a projekt címe. Bevezetőben a csapat tagjai, ki hogyan vett részt a munkában. A felhasználói dokumentációban mutasd be a weboldalt egy laikus felhasználónak, pl. mit láthat az oldalon, hova kattinthat. A fejlesztői dokumentációban felhasznált technológiák, pl Html, Css, Js, Felxbox, Css grid stb. Kódolás folyamata, azoknak a kód részleteknek a bemutatása, amit kiemelnél. A tervezést készítsétek el figma tervezővel. Összefoglalásban értékeld a közös munkát, és a tovább fejlesztési lehetőségeket. A forrásoknál folyamatosan gyűjtsétek azokat az oldalakat, ahol megoldást kerestetek. Törekedjetek egy olyan igényes munkára, mintha valóban egy meglévő üzlet tulajdonosa rendelte volna tőletek a weboldalt. A kész munkákat a táblánál kell bemutatni a csapatoknak 10 percben.

 

12B 8. ES6 szintaxis: Nyílfüggvények, let és const változók, template literálok.

 Az ES6 (ECMAScript 6) számos újítást hozott a JavaScript nyelvbe, amelyek közül kiemelkednek a nyílfüggvények, a let és const változók, valamint a template literálok. Ezek az újítások könnyebbé, biztonságosabbá és olvashatóbbá teszik a kód írását. Lássuk részletesebben ezeket:

1. Nyílfüggvények (Arrow Functions)

A nyílfüggvények rövidebb és olvashatóbb módját kínálják a függvények deklarálásának. A hagyományos function szintaxis helyett egy nyilat (=>) használunk. Előnyük továbbá, hogy az általuk használt this értéke nem változik, mindig az adott kontextusra vonatkozik.

Szintaxis:

// Hagyományos függvény

function add(a, b) {

  return a + b;

}

// Nyílfüggvény

const add = (a, b) => a + b;

Jellemzők:

• Egyszerű szintaxis egyetlen kifejezés esetén (nem kell return és kapcsos zárójel).
• Több soros kifejezés esetén a függvénytestet kapcsos zárójelek közé kell tenni, és expliciten kell használni a return kulcsszót:

const multiply = (a, b) => {

  const result = a * b;

  return result;

};

Ha a függvénynek egyetlen paramétere van, akkor a zárójeleket is elhagyhatjuk:

const square = x => x * x;

this viselkedése:

A nyílfüggvények nem definiálnak saját this értéket, hanem öröklik azt a környezetből, ahol létrehozták őket. Ez hasznos lehet például aszinkron kódoknál, ahol a this értéke változhat a hagyományos függvények esetén.

2. let és const változók

Az ES6-ban a változók definiálására két új kulcsszót vezettek be: let és const. Ezek a régi var kulcsszót váltják fel, és számos előnnyel járnak, különösen a hatókör és újraértelmezés kezelésében.

let

A let lokális blokk szintű hatókörrel rendelkezik, vagyis csak abban a blokkban (kapcsos zárójelek között) érhető el, ahol definiálták. Ez megakadályozza, hogy a kód különböző részeiben véletlenül újraértelmezzünk egy változót, amely hibákhoz vezethetne.

Példa:

let x = 10;

if (x > 5) {

  let y = 20; // Ez a változó csak az if blokkban létezik

  console.log(y); // 20

}

console.log(y); // Hibát dob, mert y nincs a blokkon kívül

const

A const a konstansok deklarálására szolgál, vagyis olyan változókra, amelyek értéke nem változtatható meg az inicializálás után. Fontos megjegyezni, hogy ez csak a primitív értékekre igaz (szám, string, boolean), objektumok vagy tömbök esetén az objektum tulajdonságai vagy a tömb elemei módosíthatók, de maga az objektum nem.

Példa:

const pi = 3.14159;

pi = 3; // Hibát dob, mert pi értéke nem változtatható

const arr = [1, 2, 3];

arr.push(4); // Ez működik, mert az arr elemei módosíthatók

3. Template literálok (Template Literals)

A template literálok (más néven template stringek) egyszerűsítik a szövegek kezelését és összefűzését. Az újfajta idézőjelek (`) segítségével változók és kifejezések közvetlenül beilleszthetők a szövegbe a ${} szintaxis segítségével.

Példa:

const name = 'John';

const age = 30;

const message = `My name is ${name} and I am ${age} years old.`;

console.log(message); // My name is John and I am 30 years old.

Több soros stringek:

A template literálokkal több soros szövegeket is könnyedén lehet kezelni anélkül, hogy külön karaktereket kellene használni az új sorokhoz.

 

const multiLineText = `

This is a string

that spans across

multiple lines.

`;

console.log(multiLineText);

Összegzés:

• Nyílfüggvények: rövidebb, egyszerűbb függvénydefiníciók, amelyek öröklik a környezetük this értékét.
• let és const: blokkszintű hatókört biztosítanak, így biztonságosabbak, mint a var. A const változókat nem lehet újraértékelni, míg a let változók változtathatóak.
• Template literálok: dinamikus szövegek létrehozására használhatók, változók és kifejezések közvetlen beszúrásával, valamint több soros szövegek kezelésére.

Ezek az ES6 szintaxisbeli újítások jelentősen javítják a JavaScript kódolási élményt és hatékonyságot, ezért elengedhetetlen ismerni őket modern JavaScript projektek során.

12 B 6. Függvények típusai: Névtelen függvények, callback függvények, és függvények mint objektumok.

1. Névtelen függvények (Anonymous Functions)

Névtelen függvények olyan függvények, amelyeknek nincs nevük. Általában akkor használjuk őket, amikor nem szükséges egy függvényt több helyen újrahasználni. Gyakran találkozhatunk velük helyi változókhoz rendelve vagy callback függvényként átadva.

Példa:

const add = function(a, b) {

  return a + b;

};

console.log(add(5, 3));  // 8

Ebben a példában egy névtelen függvényt rendeltünk az add változóhoz, majd meghívtuk a függvényt a változón keresztül. A névtelen függvények nem rendelkeznek saját nevükkel, ezért csak azon a ponton érhetők el, ahol deklaráltuk őket.

Az arrow function (nyíl függvény) a JavaScript ES6 verziójával került be a nyelvbe, és a függvények írásának egy rövidebb, tisztább szintaxisú alternatíváját kínálja. Az arrow function nemcsak a szintaxisában tér el a hagyományos függvényektől, hanem a viselkedésében is, különösen ami a this kontextust illeti.

Arrow Function fő jellemzői

1.     Rövidebb szintaxis Az arrow function szintaxisa tömörebb és könnyebben olvasható, különösen akkor, ha csak egy kifejezést kell visszaadni.

o   Hagyományos függvény:

const multiply = function(a, b) {

  return a * b;

};

o   Arrow function:

const multiply = (a, b) => a * b;

Az arrow function esetében a kifejezés automatikusan visszatérési értékként (return) kerül kiértékelésre, ha nincs kifejtve a függvénytörzs, és nincs szükség explicit return utasításra.

2.     Kompaktabb egyetlen paraméter esetén Ha a függvény csak egy paramétert vesz át, akkor a zárójelek elhagyhatók.

• Példa egy paraméteres arrow function-re:

const square = x => x * x;

console.log(square(5));  // 25

3.     Implicit return Ha a függvénytörzs egy egyszerű kifejezésből áll, nem szükséges a függvénytestet (görbe zárójeleket) használni, és a return is implicit (automatikus).

• Példa implicit return használatára:

const add = (a, b) => a + b;

console.log(add(3, 7));  // 10

4.     Ha több utasítás van a függvénytörzsben, vagy explicit logikát kell alkalmazni, akkor szükségesek a görbe zárójelek, és ebben az esetben a return utasítás már nem lesz implicit.

• Példa több utasításos arrow function-re:

const addAndLog = (a, b) => {

  console.log(`Adding ${a} and ${b}`);

  return a + b;

};

console.log(addAndLog(2, 5));  // "Adding 2 and 5", majd 7

5.     Nincs saját this kontextus Az arrow function egyik legnagyobb különbsége a hagyományos függvényekhez képest, hogy nem köt saját this kontextust. A hagyományos függvényekben a this a függvény meghívásának kontextusától függően változik, de az arrow function a lexikális környezetéből örökli a this-t.

Ez azt jelenti, hogy az arrow function mindig azt a this-t fogja használni, ami a függvényt körülvevő kontextusban volt érvényes. Ez különösen hasznos lehet például akkor, amikor objektumokon belül hívunk meg függvényeket, vagy amikor egy callback függvényben szeretnénk használni a this-t.

o   Példa: Hagyományos függvény és this viselkedése:

function Person() {

  this.age = 0;

  setInterval(function() {

    this.age++;

    console.log(this.age);

  }, 1000);

}

const p = new Person();

// A `this` a setInterval-ben a globális objektumra fog mutatni (böngészőben: `window`), nem pedig a Person példányára.

• Megoldás arrow function-nel:

function Person() {

  this.age = 0;

  setInterval(() => {

    this.age++;

    console.log(this.age);

  }, 1000);

}

const p = new Person();

// A `this` most már a Person példányára mutat, így az `age` helyesen növekszik.

Mivel az arrow function nem rendelkezik saját this-szel, hanem a külső lexikális környezetből veszi át, ez megoldja a this kontextusproblémáját, amely gyakran előfordul aszinkron kódokban.

6.     Nem használható konstruktor függvényként A hagyományos függvényekkel ellentétben az arrow function-t nem lehet konstruktor függvényként használni. Ez azt jelenti, hogy nem lehet őket new operátorral példányosítani.

• Példa:

const MyFunction = () => {};

const instance = new MyFunction();  // Hiba: Arrow function nem használható konstruktor függvényként

7.     Nincs arguments objektum A hagyományos függvényekhez hasonlóan az arrow function nem rendelkezik saját arguments objektummal. Ha hozzáférésre van szükség a függvény argumentumaihoz, akkor a rest parameters (...args) használata ajánlott.

• Példa arguments helyett rest parameters használatával:

const sumAll = (...args) => args.reduce((sum, num) => sum + num, 0);

console.log(sumAll(1, 2, 3, 4));  // 10

Összegzés

Az arrow function-ek nagyban egyszerűsítik a JavaScript kódot, különösen akkor, ha rövid és egyszerű függvényeket kell írni. Azáltal, hogy nem köt saját this-t, könnyebbé válik az aszinkron kódok kezelése és a callback függvények kezelése. Fontos azonban megérteni, hogy az arrow function nem helyettesíti teljesen a hagyományos függvényeket, mivel bizonyos esetekben (pl. konstruktor függvények írásakor) a hagyományos függvények továbbra is szükségesek.

2. Callback függvények

A callback függvények olyan függvények, amelyeket egy másik függvény paraméterként kap meg, és gyakran akkor hívják meg őket, amikor egy adott esemény megtörténik, vagy amikor egy művelet befejeződik. A JavaScript aszinkron természetéből adódóan a callback függvények rendkívül fontosak például API hívások, fájlműveletek vagy egyéb időigényes feladatok kezelése során.

Példa callback függvényre:

function processData(data, callback) {

  console.log("Processing data...");

  callback(data);

}

function logData(data) {

  console.log("Data:", data);

}

processData({ name: "John", age: 25 }, logData);

Ebben a példában a logData függvényt adtuk át a processData függvénynek callbackként. A processData függvény az adatfeldolgozás után meghívja a callbacket, és átadja neki az adatokat.

Callback függvények aszinkron műveleteknél:

Az aszinkron műveleteknél a callback-ek különösen hasznosak. Például egy adatbázis-lekérdezés vagy fájl beolvasása után callbacket használhatunk az adatok feldolgozására.

Aszinkron példa:

setTimeout(() => {

  console.log("This runs after 2 seconds");

}, 2000);

Itt a setTimeout egy aszinkron funkció, amely vár 2 másodpercet, mielőtt meghívja a callback függvényt.

3. Függvények mint objektumok

A JavaScriptben a függvények speciális objektumok. Ez azt jelenti, hogy ugyanúgy, ahogyan egy objektumnak lehetnek tulajdonságai és metódusai, egy függvénynek is lehetnek ilyen tulajdonságai. Mivel a függvények objektumok, átadhatók más változóknak, tárolhatók tömbökben, és visszatérhetnek más függvényekből is.

Példa: Függvények tulajdonságai

function greet() {

  console.log("Hello!");

}

greet.language = "English";

console.log(greet.language);  // English

Itt a greet egy függvény, amelyhez hozzáadtunk egy language tulajdonságot. Ez az egyedülálló tulajdonság lehetővé teszi, hogy függvényeket dinamikusan bővítsünk.

Függvények mint értékek:

A függvények átadhatók más függvényeknek paraméterként, vissza is adhatók függvényekből, vagy akár tárolhatók tömbökben vagy objektumokban is.

Példa: Függvény visszatérése egy másik függvényből

function createMultiplier(multiplier) {

  return function(num) {

    return num * multiplier;

  };

}

const double = createMultiplier(2);

console.log(double(5));  // 10

Ebben a példában a createMultiplier egy függvényt ad vissza, amely a megadott számmal szorozza meg a paraméterét. A függvények ilyen módon való kezelése rendkívül rugalmas lehetőségeket biztosít a JavaScriptben.

Összefoglalás

• Névtelen függvények nem rendelkeznek névvel, gyakran egyszeri használatra vannak szánva.
• Callback függvények másik függvénynek átadott függvények, amelyek gyakran aszinkron események vagy műveletek után hívódnak meg.
• Függvények mint objektumok azt jelentik, hogy a függvények is rendelkezhetnek tulajdonságokkal és metódusokkal, illetve önálló értékként kezelhetők.

Ez a három függvénytípus különböző helyzetekben és feladatokban rendkívül hasznos lehet a JavaScript fejlesztés során.

13B PHP Sablonzó használata - str_replace()

 Az elkészített feladatunkhoz használhatsz sablonzót is. A str_replace() szintén egy beépített PHP függvény, aminek segítségével, egy adott karakterláncban bizonyos részeket más karakterekkel vagy szövegrészekkel helyettesíthetsz. A funkció hasznos, ha egy szöveges tartalomban szeretnél konkrét mintákat lecserélni, például sablonokat, szavakat, vagy HTML elemeket. 

Nézzük példának az elkészített feladatunkat: 

 $kimenet = "";

    $sablon = "<article>

        <img src=\"kepek/{foto}\" alt=\"{nev}\">

        <h2>{nev}</h2>

        <h3>{cegnev}</h3>

        <p>Mobil: <a href=\"tel:{mobil}\">{mobil}</a></p>

        <p>E-mail: <a href=\"mailto:{email}\">{email}</a></p>

    </article>\n";

   

    while ($sor = mysqli_fetch_assoc($eredmeny)) {

        // Cseréljük le a sablonban a változókat

        $egyed = str_replace(

            ['{foto}', '{nev}', '{cegnev}', '{mobil}', '{email}'],

            [$sor['foto'], $sor['nev'], $sor['cegnev'], $sor['mobil'], $sor['email']],

            $sablon

        );

        $kimenet .= $egyed;

13 B2 - Lapozó bővítése

Elkészítettük az alkalmazásunkhoz a lapozót. Egészítsd ki azzal, hogy a felhasználó kiválaszthassa, hány db névjegykártyát szeretne megjeleníteni az oldalon: 9, 30, 60 db közül választhasson, a választásnak megfelelően jelenjen meg az oldalszám az oldalon.

9 névjegykártya legyen az alapértelmezett

30 névjegykártya legyen az egyik választható lehetőség

láthatod, hogy itt a lapok száma már csak 4

az utolsó pedig 60 db névjegykártya legyen az oldalon:

itt már csak 2 lap jelenik meg, hiszen összesen kb 98 sorunk van az adatbázisban.