<<< szintaxis

 A <<< szintaxist a PHP-ban "heredoc" vagy "nowdoc" szintaxisnak nevezzük. Ez nem pontosan olyan, mint a JavaScript backtick, de hasonló célt szolgál: több soros szöveg vagy HTML kód beillesztésére használható.

A heredoc egy olyan szövegliterál, amely több sorban tartalmazhat szöveget, és idézőjelek nélkül használható. Egy adott jelölővel kezdődik (<<<LABEL) és azonos jelölővel ér véget.

$form = <<<FORM

<form method="post" action="" enctype="multipart/form-data">

    {$output}

    <p><label for="alias">Alias:*</label><br>

    <input type="text" id="alias" name="alias" required pattern="^[a-z-_]+$" value="{$alias}"></p>

    <p><label for="ordering">Sorrend:</label><br>

    <input type="number" id="ordering" name="ordering" min="1" value="{$ordering}"></p>

    <p><label for="nav_name">Navigációs név:*</label><br>

    <input type="text" id="nav_name" name="nav_name" required value="{$nav_name}"></p>

    <p><label for="content">Tartalom:</label><br>

    <textarea id="content" name="content" rows="10" cols="80">{$content}</textarea></p>

    <p><label for="description">Leírás:</label><br>

    <textarea id="description" name="description">{$description}</textarea></p>

    <p><label for="keywords">Kulcsszavak:</label><br>

    <textarea id="keywords" name="keywords">{$keywords}</textarea></p>

    <p><label for="image">Kép:</label><br>

    <input type="file" id="image" name="image" accept="image/*">

    <br><small>Jelenlegi kép: {$img}</small></p>

    <p><label for="state">Állapot:</label><br>

    <select id="state" name="state">

        <option value="1" " . ($state == 1 ? "selected" : "") . ">Aktív</option>

        <option value="0" " . ($state == 0 ? "selected" : "") . ">Inaktív</option>

    </select></p>

    <p><em>A *-gal jelölt mezők kitöltése kötelező!</em></p>

    <input type="submit" id="submit" name="submit" value="Mentés">

    <input type="reset" value="Mégse">

    <p><a href="list.php">Vissza a listához</a></p>

</form>

WYSIWYG

 A WYSIWYG (What You See Is What You Get) egy olyan szerkesztő eszköz vagy felület, amely lehetővé teszi a felhasználóknak, hogy a dokumentumokat, weboldalakat vagy más tartalmakat pontosan olyan formában szerkesszék, ahogyan azok megjelennek a végeredményben. A név arra utal, hogy amit a szerkesztőben látsz, az lesz a végeredmény is.

Hogyan működik egy WYSIWYG szerkesztő?

• Valós idejű előnézet: Amikor a felhasználó szöveget ír, képeket helyez be, vagy stílusokat alkalmaz (pl. félkövér, dőlt, színezett szöveg), azonnal látja a változtatások eredményét.
• Grafikus felület: Nem szükséges kódokat írni (például HTML-t vagy CSS-t), mivel a szerkesztő ezt automatikusan generálja a háttérben.
• Egyszerű használat: Általában olyan eszköztárakkal rendelkezik, amelyek ismerősek például a Microsoft Word-ből vagy más szövegszerkesztőkből.

Példák WYSIWYG szerkesztőkre

• Webes tartalomszerkesztők: TinyMCE, CKEditor, Froala Editor, Redactor.
• Dokumentszerkesztők: Microsoft Word, Google Docs.
• Weboldalszerkesztők: WordPress (blokkszerkesztő), Wix, Squarespace, gportal.

Előnyök

• Felhasználóbarát: Még azok számára is egyszerű tartalmat létrehozni, akik nem ismerik a kódolást.
• Időmegtakarítás: A vizuális szerkesztés gyorsabb lehet, mint manuálisan kódokat írni.
• Kreatív szabadság: Azonnal látni lehet, hogyan fog kinézni a tartalom.

Hátrányok

• Kódminőség: Az automatikusan generált kód néha nem optimális, vagy nehezebben olvasható.
• Korlátozott irányítás: A haladó felhasználók számára korlátozott lehet az eszközök testreszabhatósága.
• Teljesítményproblémák: Nagy tartalmak esetén a WYSIWYG szerkesztők lassabbak lehetnek.

Mikor érdemes WYSIWYG-et használni?

• Egyszerűbb weboldalak vagy tartalmak szerkesztéséhez, ahol nincs szükség bonyolult kódra.
• Gyors prototípusok készítéséhez.
• Kezdő felhasználóknak, akik még tanulják a kódolást, vagy csak tartalmat akarnak létrehozni és Te pedig egy keretet biztosítasz nekik hozzá.

12B1 Weboldal Elrendezésének Elkészítése CSS Grid és Flexbox

 Készíts egy egyszerű, reszponzív weboldal elrendezést, amely a mellékelt mintának megfelelően épül fel. Az elrendezés kialakításához CSS Grid és Flexbox technológiákat használj.

Követelmények:

1. HTML Struktúra:
   • Fejléc:
     • A bal oldalon egy logó (szöveg vagy kép).
     • A jobb oldalon egy navigációs menü (legalább 3 link, például "Home", "About", "Contact").
   • Főtartalom (Main Section):
     • Egy rácsos elrendezés 4x4-es hálóban (16 elem). Ezek lehetnek például képek vagy színes dobozok.
   • Háttér oszlopok:
     • Mindkét oldalon egy szürke sáv a tartalom mellett. Ezek a háttér kitöltésére szolgálnak, de ne legyenek interaktív elemek.
   • Alsó Tartalom (Footer Section):
     • 3 különálló doboz ("Box 1", "Box 2", "Box 3").
   • Lábléc (Footer):
     • Tartalmazza az oldal szerzőjének nevét és az aktuális évet.

CSS Design:

• Fejléc és Navigáció:
  • A fejlécen belül használj Flexboxot a logó és a navigáció vízszintes elrendezésére.
• Főtartalom:
  • A fő tartalmat CSS Grid segítségével rendezd el, hogy a 3x4-es rácsos elrendezést megvalósítsd.
• Háttér oszlopok:
  • A háttér oszlopokat állítsd fix szélességűre, és helyezd el a fő tartalom két oldalára.
• Alsó tartalom (3 doboz):
  • Használj Flexboxot a 3 doboz vízszintes sorban történő elhelyezéséhez.
• Reszponzivitás:
  • Mobil nézetben a 3x4-es rácsot alakítsd át egy oszlopos elrendezéssé (pl. minden elem egymás alá kerül).
  • A 3 alsó doboz is egymás alá kerülhet mobil nézetben.
• Színek és Stílusok:
• A dobozokat színezd különböző árnyalatokra, hogy könnyen megkülönböztethetők legyenek.
• A navigáció szövege legyen középre igazítva.

Javascript feladat:

• Adj interaktivitást JavaScript segítségével:
  • A 12 doboz valamelyikére kattintva jelenjen meg egy értesítés (alert), amely megmutatja a doboz számát (pl. "Ez a 3. doboz!").

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.

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

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