Frontend - Backend - IKT Project

2025. január 10., péntek

jQuery

A jQuery nem más, mint egy gyors és tömör JavaScript nyelvű függvénykönyvtár, ami előre megírt függvényeket tartalmaz. A hagyományos programozási nyelvektől eltérően “csak” értelmez, nem pedig végrehajt. A jQuery megpróbálja leegyszerűsíteni a bonyolultabb dolgokat a JavaScript-ből, (például az AJAX-hívások, DOM-manipulációk), így sokkal könnyebben, és gyorsabban használhatjuk azt a weboldalon.

Tehát – js library – úgy kell érteni, hogy meg van benne írva nagyon sok dolog előre, lényegében kényelmesebbé teszi a munkánkat. jquery.com

Mire használjuk?

• DOM manipuláció – Lehetővé teszi a DOM elemeinek kiválasztását, tartalmának módosítását, manipulálását.

• Eseménykezelés – Lehetőségünk van kattintás, görgetés, vagy egérmozgás alapú események létrehozására.

• AJAX Támogatás – Az AJAX a szerverrel való adatcserét szolgálja, segítségével frissítheted a weboldal egyes részeit anélkül, hogy újra töltenéd az egész oldalt.

• Animációk, effektek – Számos beépített animációs hatással rendelkezik, amelyeket egyszerű függvényekkel hívhatsz meg.

jQuery betöltése a weboldalba

• betöltés saját tárhelyről – A jQuery könyvtárat letöltheted a tárhelyedre, és beillesztheted a HTML kódba.

• betöltés külső tárhelyről – A jQuery könyvtárat közvetlenül a code.jquery.com-ról, vagy a Google-ről is betöltheted.

Az elmélet az, hogy a jQuery gyorsabban töltődik be, ha külső tárhelyről töltjük, mert valószínűleg az már eleve tárolva van a böngészőnkben (Cache).

Cache: Mi az a böngésző gyorsítótár és mire való?

A gyorsítótár azért létezik, mert az internet lassú. Pontosabban az internetkapcsolat lassabb, mint a számítógép. A fájlok merevlemezről történő lekérése mindig gyorsabb, mint a távoli kiszolgálóról történő lekérés, függetlenül attól, hogy milyen gyors a Neted. Ezért amikor a felhasználó meglátogat egy webhelyet, a böngésző az oldal egyes részeit átmásolja és eltárolja a számítógépe merevlemezén. Majd a következő látogatáskor nem a szerverről, hanem a merevlemezről tölti azt be. Ez a gyorsítótár.

A böngészők jellemzően a webhely statikus elemeit gyorsítótárazzák, amelyek nem változnak látogatásról látogatásra.

• Képek, logók, hátterek

• Videók, hangfájlok

• HTML

• CSS

• JavaScript

Az oldal HTML részének letöltése az első. Ahogy a böngésző olvassa a HTML kódot, szép sorban kéréseket küld a kiszolgálónak, hogy letöltse a fent említett statikus elemeket. Ez a folyamat zabálja a sávszélességet, ami főleg mobilos böngészésnél gond. Ezért a gyorsítótárazás a felhasználók szempontjából hasznos dolog, mert javítja és felgyorsítja a böngészést.

A gyors és akadálymentes böngészés alapvető fontosságú a felhasználói élményhez, és az optimális konverziós arányokhoz.

Nem örökre maradnak a gépeden a tárolt fájlok, gyorsítótárazott elemeknek van egy lejárati ideje. Ez böngészőtől és személyes beállításoktól függ. A böngésző általában bizonyos mennyiségű lemezterületet, fenntart erre a célra. Ha az betelik a gyorsítótár magától is kiürül.

Ha weboldalt készítesz, akkor nagyon macerás úgy dolgozni, ha nem ürül elég gyorsan a gyorsítótár és nem látod azonnal a változásokat (feltéve, hogy helyesek a módosításaid). Ezért a gyorsítótárat rendszeresen üríteni kell.

Gyorsítótár manuális törlése: Törölheted kézzel a gyorsítótárat a Beállítások / További eszközök / Böngésző adatok törlése gombbal.

A függvénykönyvtárat mindkét esetben két helyre tudjuk beszúrni a HTML fájlunkban: a <head> részbe és a </body> elé. A kódot mindig a </body> elé érdemes beszúrni, hogy az a HTML kód után töltődjön le. Ha a jQuery kódot a <head> részbe rakod, akkor az az előtt fog lefutni, mielőtt létre jönne maga a HTML dokumentum, így mivel a JS kód lefutásakor a HTML fizikailag még nem létezik, módosítani/hozzáférni sem lehet.

Ha betöltöttük a weboldalba a JS könyvtárat, akkor közvetlenül utána hívjuk be a saját JS fájlunkat, amibe írjuk a weboldalra vonatkozó módosításainkat, nevezzük mondjuk custom.js-nek.

A $() szelektor

A jQuery szelektorok a dollárjelzéssel és zárójelekkel kezdődnek – $(). Ezen belül háromféle mód létezik a HTML dokumentum elemeinek kiválasztására:

Címke neve – A DOM-ban elérhető címke nevét képviseli. Például $(‘p’), $(‘div’), $(‘li’), amellyel kiválaszthatod az összes ilyen elemet a HTML dokumentumban.

Azonosító (id) – A megadott azonosítóval is elérhetőek a címkét. Például $(‘#lablec’), amellyel kiválaszthatod az egyedi elemet a HTML dokumentumban.

Osztály (class) – Az adott osztályhoz tartozó címke. Például $(‘.service’) a dokumentumban szereplő összes olyan elemet választja ki, amely ilyen osztályú.

+1 Változó – A 3 közül bármelyik megadható előzőleg meghatározott változóval is. $(valtozonev)

A fenti elemek önmagukban, vagy más szelektorokkal kombinálva is használhatók. Például: $(‘#main .service ul li’)

Hogyan hívhatunk meg jQuery függvényeket?

Az oldal nem manipulálható zökkenőmentesen, amíg a HTML dokumentum “nem áll készen“. Erre van is egy függvény a $( document ).ready(function() {…}); Ezen belül elhelyezett kód csak akkor fog futni, ha az oldal DOM-ja készen áll, ha már az összes HTML betöltődött.

2025. január 9., csütörtök

Adatbázis kapcsolat létrehozása OOP

Nézzünk még egy lehetőséget az adatbázis kapcsolat lérehozázásra.

<?php

/**Bekapcsolja a szigorú típusellenőrzést, ami azt jelenti, hogy a megadott típusú paramétereknek és visszatérési értékeknek pontosan meg kell felelniük. */

declare(strict_types=1);

class DatabaseConnection

{

private mysqli $connection;

public function __construct(

private string $host = 'localhost',

private string $username = 'root',

private string $password = '',

private string $database = 'tartalomkezelo',

) {

$this->connect();

}

/** connect metódus: Ez a metódus felelős a kapcsolat létrehozásáért: Ellenőrzi, hogy van-e hiba a kapcsolat létrehozásakor, és részletes üzenetet jelenít meg, ha probléma lép fel.

* Beállítja a karakterkódolást UTF-8-ra, hogy a magyar ékezetes karaktereket megfelelően kezelje.

private function connect(): void

{

$this->connection = new mysqli($this->host, $this->username, $this->password, $this->database);

// Hibaellenőrzés

if ($this->connection->connect_error) {

throw new RuntimeException('Adatbázis-kapcsolati hiba: ' . $this->connection->connect_error);

}

// Karakterkódolás beállítása

if (!$this->connection->set_charset('utf8')) {

throw new RuntimeException('Karakterkódolási hiba: ' . $this->connection->error);

}

/**getConnection metódus:

Ez egy getter, amely lehetővé teszi, hogy más osztályok is hozzáférjenek a létrehozott kapcsolat objektumához.

public function getConnection(): mysqli

{

return $this->connection;

}

/**closeConnection metódus:

Lezárja a kapcsolatot, amikor az már nem szükséges, ezzel segítve az erőforrások felszabadítását.

public function closeConnection(): void

{

$this->connection->close();

}

/**Tesztelési blokk:

Ellenőrzi, hogy az osztály megfelelően működik-e.

Siker esetén kiír egy üzenetet.

Hiba esetén a kivétel (RuntimeException) által generált üzenetet jeleníti meg. */

try {

$db = new DatabaseConnection();

//echo "Adatbázis-kapcsolat sikeresen létrejött.";

} catch (RuntimeException $e) {

echo $e->getMessage();

}

.htaccess fájl használata -> Hypertext Access File

A .htaccess fájl az Apache webszerver egy konfigurációs fájlja, amely lehetővé teszi a könyvtárszintű beállítások módosítását.

Funkciója:

Az Apache webszerver viselkedésének módosítása egy adott könyvtárban.
URL-ek átírása, jogosultságkezelés, hibakezelés, átirányítások és még sok más.

Amire mi használni fogjuk, az az URL-ek átírása, hogy például http://example.com/bemutatkozas legyen az URL a → http://example.com/index.php?alias=bemutatkozas helyett.

RewriteCond
%{REQUEST_FILENAME} !-f:

Ha a kért fájl nem létezik, akkor lép életbe.

RewriteCond
%{REQUEST_FILENAME} !-d:

Ha a kért könyvtár nem létezik, akkor lép életbe.

RewriteRule
^([a-zA-Z0-9-]+)/?$ index.php?alias=$1 [QSA,L]:

Ez az átírás szabály biztosítja, hogy a /alias formátumú
URL-ek a index.php?alias=alias formában kerüljenek feldolgozásra.

QSA (Query String
Append): Megőrzi a meglévő query string-eket.

L (Last): Leállítja a további átírásokat, ha ez a szabály
teljesül.

ErrorDocument 404
/404.php:

Egyedi 404-es hibaoldalra irányít, ha a keresett oldal nem
található.

ErrorDocument 500
/500.php:

Egyedi 500-as hibaoldalra irányít, ha szerverhiba lép fel.
Miért jobb ez?
Rugalmasabb URL-kezelés:
A szabály támogatja az URL-ek / végződését is (/bemutatkozas
és /bemutatkozas/ egyaránt működik).
Egyedi hibaoldalak:
Jobb felhasználói élményt nyújtanak, ha a látogatók hibába
ütköznek.
Keresőbarát URL-ek:
Az átírt URL-ek tiszták és keresőbarátok, segítve a SEO-t.
További hibakezelési lehetőségek:
Más típusú hibákhoz (például 500-as) könnyen hozzáadhatók
egyedi oldalak.
Kód tisztasága:




















Az egyszerűsített szabályok jobban átláthatók és
karbantarthatók.

Először is a mappád gyökér könyvtárában hozz létre egy .htaccess nevű fájlt.

Majd másold bele, és már hozhatjuk és létre az új URL-eket:

<IfModule mod_rewrite.c>
    # URL átírás engedélyezése
    RewriteEngine On

    # Feltétel: Ha a fájl nem létezik
    RewriteCond %{REQUEST_FILENAME} !-f

    # Feltétel: Ha a könyvtár nem létezik
    RewriteCond %{REQUEST_FILENAME} !-d

    # Átírási szabály: alias átadása index.php-nak
    RewriteRule ^([a-zA-Z0-9-]+)/?$ index.php?alias=$1 [QSA,L]
</IfModule>

# Hibaoldalak
# Általános 404-es hibaoldal
ErrorDocument 404 /404.php

# Általános hibaoldal például 500-as hibához
ErrorDocument 500 /500.php

2025. január 8., szerda

13 PHP CRUD feladat

Készíts egy alkalmazást, amely az utazasok.sql adatbázisból kilistázza a böngészőbe egy táblázatba a felvitt utakat, amelyekből lehessen törölni, módosítani is, valamint új utat felvinni.

Az utazas.sql

CREATE TABLE IF NOT EXISTS utazas (

id smallint(5) unsigned NOT NULL AUTO_INCREMENT,

utazasnev varchar(20) DEFAULT NULL,

varosok varchar(77) DEFAULT NULL,

ara varchar(13) DEFAULT NULL,

PRIMARY KEY (id)

);

style.css

kapcsolat.php

torles.php

lista.php (adatbázisban nincs adat, csak példaként került beszúrásra kettő)

felvitel.php

modositas.php

Pontozás
style.css mentése
A böngészőben az oldalak megjelenítését egy style.css külső lap biztosítsa.	1
Az oldal háttere szín-átmentes legyen fehérből sötétszürkébe. (ne zebracsíkos legyen).	2
Betű méretek 14 px-elesek legyenek.	1
Betűk színe fekete legyen.	1
Container maximális szélessége 800px.	1
A container középre kerüljön.	1
20px-es belső margót állts be rá	1
A container háttere 50%-os fehér alfa érték legyen.	2
A container szélei 20px -eles lekerekítettek legyenek	1
A táblázat kerete 1px-es, folytonos fekete vonal legyen.	3
A táblázat 10px-eles lekerekítéssel jelenjen meg	1
A táblázat belső margója 10 px legyen	1
A táblázat fejléc háttere sötétszürke legyen.	1
A linekek színe piros legyen, aláhúzás nélkül.	2
Stíluslapra kapható össz pont 20 pont.

kapcsolat.php létrehozása
Megfelelő content-type és karakterkódolás megadása	2
Lolcalhost, root, password és utazas adatbázis név definiálása	4
Jelezzen vissza hibát: "hiba a csatlakozáskor" ha nem sikerül a csatlakozás	1
Lekérdezés és karakterkódolás megadása	1
összesen: 8

lista.php létrehozása
Kapcsolódás az adatbázishoz a kapcsolat.php használatával	1
Stíluslap csatolása	1
Magyar nyelv beállítása	1
Oldal címe : Utazások	1
Legnagyobb címsor formázással jelenjen meg az oldal tetején : "Aktuális utazásaink"	1
A cím alatt jelenjen meg egy kereső mező	1
" Új utak felvitele" szövegre kattintva a felvitel.php oldalra vezessen	1
Táblázat kimenete	1
Php kódbban a kifejezes változó létrehozása	1
Keresési lehetőség utazasnev-re	1
Keresési lehetőség megadása varosokra	1
Keresési lehetéség árra	1
Eredmeny változó létrehozása, amely mysqli lekérdezést biztosítja	1
Táblázat kimenete a php kódban
fejléc megfelelő megadása	5
While ciklussal az eredmeny megjelenítése a táblázatban	6
Törlés és módosítás hozzáadása	5
Összesen 30 pont

felvitel.php létrehozása
űrlap feldolgozása	1
3 változó tisztítása script tagektől	3
Írja ki, hogy Nem adta meg az utazás nevét! Ha nem kerül megadásra az űrlapon.	1
Írja ki, hogy Nem adta meg az érintett városok nevét! Ha a városhoz nem kerül be szöveg.	1
Írja ki, hogy Nem adta meg az utazás árát! Ha nem kerül az ár kitöltésre.	1
A hibaüzenetek egymás alatt listában jelenjenek meg.	3
Kapcsolat az adatábázissal a kapcsolat.php oldalon keresztül	1
Adatbazásiba való beszúrás	2
Felvitel után az oldal vezessen vissza a lista.php-re.	1
Html megjelenésben a stíluslap csatolása	1
Oldal nevének beállítása "utazásaink"	1
h1 es címsor megadás: Új utazás felvitele	1
Form létrehozása post methoddal	1
az oldal containerbe helyezése	1
php kimenet megadása	1
Label taggel ellátott input feliratok megadása	3
Input mezők létrehozása	3
Submint gomb létrehozása és működése	2
Link megadása ami vissza vezet a lista.php-re : Vissza az utazások listájához	1
Összesen : 30 pont

torles.php létrehozása
kapcsolat az adatázissal a kapcsolat.php oldalon keresztül	1
törlés megvalósítása	4
összesen: 5 pont

modositas.php oldal létrehozása
Mivel lényegében ugyanaz az oldal mint a felvitel.php csak a módosítások kerülnek pontozásra.
html kódban a rejtett sor megadása, ami a módosítást biztosítja	1
módosítás az adabázisban	3
űrlap előzetes kitöltése	6
Összesen: 10 pont
Mindösszesen:	100

2025. január 7., kedd

12B

Készíts egy HTML űrlapot, amely a következő mezőket tartalmazza:

Név (szöveges mező) – kötelező, legalább 3 karakter hosszú.

Email (szöveges mező) – kötelező, érvényes email formátum.

Életkor (szám mező) – kötelező, csak 18 és 99 közötti szám fogadható el.

Jelszó (jelszó mező) – kötelező, legalább 8 karakter hosszú, tartalmaznia kell legalább egy számot és egy nagybetűt.

Jelszó megerősítése (jelszó mező) – kötelező, az előző mezővel meg kell egyeznie.

A követelmények:

Az űrlapot JavaScript segítségével kell ellenőrizni az elküldés előtt.

Az érvényesítést követően, ha minden adat helyes, az űrlap kiíratja az adatokat a konzolra, de nem küldi el a szervernek (meghívja a preventDefault() metódust).

Hibás adat esetén a mezők alá piros szöveggel jelenjen meg a hibaüzenet, vagy alert mezőben.