Kis HF 04 – Webfejlesztés (PHP)

Felkészülés és előkészületek

Nézd át a kapcsolódó labor és előadások anyagát.

Szoftverkörnyezet:

• Webszervernek Apache-ot használunk, mely része az XAMPP programcsomagnak.
• Adatbázis szervernek MySQL-t használunk, mely része az XAMPP programcsomagnak.
• Az adatbázis kliensoldali kezeléséhez a MySQL Workbench-et használjuk.
• Erősen ajánlott a Visual Studio Code használata a PHP fájlok szerkesztésére, de technikailag bármilyen szövegszerkesztő megfelel.

A házi feladat során a laborfeladatokhoz hasonlóan egy PHP weboldal elkészítése a cél, amely képes adatbázisokból vett adatokat megjeleníteni, valamint új adatokat létrehozni. Egy korábbi laboron használt könyvtár adatbázist fogunk használni.

Indítsuk el az Apache webszervert (részletesebb útmutató itt):

• Nyissuk meg az XAMPP programot és indítsuk el az Apache webszervert.
• Keressük meg a htdocs mappát (laborgépeken C:\Tools\xampp\htdocs) és hozzunk létre egy új mappát, melynek neve legyen a Neptun kódod.
• Klónozzuk le a kiinduló repót az újonnan létrehozott mappába. A továbbiakban a klónozott mappában fogunk dolgozni.

• Nyissuk meg böngészőben a http://localhost:8080/<neptun>/<github-repo-neve> URL-t.

  Megjegyzés - URL

  Az URL-be a saját Neptun kódodat kell beírni. Ha ez elmarad, automatikusan a dashboard-ra fog irányítani. A github-repo-neve helyére a GitHub repository teljes nevét írd be (pl. lab-25o-ptl-htmlcss-xyz), vagy az is elég, ha csak a Neptun kódig írod be az URL-t és utána kiválasztod a listából a megfelelő mappát.

  A webszerver portszáma (alapértelmezetten 8080) változó lehet, ezt ellenőrizd az XAMPP szoftverben és a megfelelő portszámot írd be.

Az adatbázis létrehozásához használjuk a repóban található SQL szkriptet: - A korábbi laborokhoz hasonlóan indítsuk el a MySQL Workbench alkalmazást, kapcsolódjunk a szerverhez. - Nyissuk meg és futtasuk le a konyvtar.sql fájlt. - Ellenőrizzük, hogy létrejött-e a megfelelő adatbázis.

Mindig új branchen dolgozz!

A laborokon, házi feladatokon, és a ZH-n mindig új branch-en (pl. "megoldas") dolgozz! Ez azért van így, mert a végén a munka végén a pull request létrehozásakor a kiinduló állapothoz (master branch) képest az új branch változtatásai fognak látszani. Vagyis így fogja látni a laborvezetőd, hogy min dolgoztál, mely fájlokban mi változott, és így fogja tudni értékelni is a munkádat. Ha nem így csinálod, az formai hibának számít, a ZH-n például ezért pontlevonás jár.

1. Könyvek és szerzőik listázása

Listázd ki a főoldalon egy táblázatban az adatbázisban található könyvek következő adatait: cím, nyelv, ár, szerző(k) vesszővel elválasztva egymás után. A CSS fájl előre meg van írva, ezt egyik feladat során se módosítsd.

Könyvek és szerzőik listázása

Tipp

A megoldáshoz nem elég egy tábla adatait lekérdezni!

Miután a lekérdezés lefutott, az eredményt PHP kód segítségével dolgozd fel: hozz létre egy új asszociatív tömböt, majd menj végig a lekérdezés eredményén és töltsd fel a tömböt (a szerzők nevét is állítsd be az adott könyvnél). Ezután végig tudsz iterálni az új tömbön (pl. <?php foreach ($books as $id => $book): ?>) és kiírni az eredményt egy táblázatba.

GROUP_CONCAT

A megoldásban tilos a MySQL GROUP_CONCAT függvény használata!

Beadandó (1 pont)

A megoldást írd bele a kiinduló repository gyökerében található index.php fájlba, majd kommitolj.

2. Könyv adatainak szerkesztése

A táblázat utolsó oszlopába helyezz el könyvenként egy linket ("Szerkeszt"), ami az update.php oldalra visz. Csinálj egy formot az update.php oldalon, ahol a könyv adatait (cím, nyelv, és ár; a szerzőket nem kell!) lehet szerkeszteni:

Könyv szerkesztése - egyszerű form

Szerkesztés után ugorjunk vissza a főoldalra és jelenjen meg egy üzenet (használd a message classt, ld. style.css), hogy a szerkesztés sikeres volt. Kezeld azt az esetet is, hogyha egy nem létező azonosítójú könyvet akarna a felhasználó szerkeszteni: ekkor is jelenjen meg üzenet visszairányítás után a főoldalon. A nem létező azonosítót a böngészőbe URL beírással tudod tesztelni (pl. update.php?id=34).

Főoldal sikeres szerkesztés után

Főoldal sikertelen szerkesztés után (nem létező azonosító)

Tipp

Érdemes szétválasztani a két fő esetet az update.php oldalon: 1) először navigáltunk az oldalra (GET paraméter), 2) megnyomtuk a Szerkeszt gombot és elküldtük az adatokat (POST paraméterek).

Beadandó (1 pont)

A megoldást írd bele a kiinduló repository gyökerében található index.php és update.php fájlokba, majd kommitolj.

3. Kiegészítések

Egészítsd ki az update.php oldalt, hogy:

• a szerkesztett könyv jelenlegi adatai jelenjenek meg az input mezőkben
• minden adat kitöltése legyen kötelező
  • ha valamelyik adat nincs kitöltve, a form beküldésekor ("Szerkeszt" gomb megnyomásakor) jelenjen meg egy hibaüzenet az adott mező (cím, nyelv, ár) alatt - használd a message classt

Könyv szerkesztése - kiegészített form

Beadandó (1 pont)

A megoldást írd bele a kiinduló repository gyökerében található update.php fájlba, majd kommitolj.

Beadás

Töltsd ki a kiinduló repositoryban található neptun.txt fájlt a Neptun kódoddal! Ezután a tanultaknak megfelelően készíts egy pull requestet és rendeld hozzá a laborvezetődet, mint reviewer!

Pull request elfogadása

Fontos, hogy semmiképpen ne kattints a "Merge pull request" gombra a GitHub felületén! Ez a laborvezetőd dolga, az értékelés után a változtatások bekerülnek majd a master branchre. Ha mergeled a módosításokat a laborvezetőd értékelése előtt, nem fogja látni, hogy mi változott, tehát a pull request értelmét veszti!

---

2025-10-16 Szerzők