Web Tervezés - 5. Gyakorlat

Web programozás

A webes programok tipikusan két részből állnak. Az egyik komponens a megjelenítésért felel, a másik pedig az adatok tárolásáért és az üzleti logika végrehajtásáért.
Ezek névszerint kliens (ügyfél) és szerver (kiszolgáló).
A kliens kéréseket (request) küld a szerver felé a http (https) protokoll segítéségvel.
A szerver egy url címmel van azonosítva: sub.domain.com/uri/to/somewhere.php.
A domain.com-ból a DNS protokoll segítségével egy IP-cím lesz, mely egy konkrét szervert azonosít.
Alapértelmezetten a http a 80-as portot használja, így amennyiben a szerver figyeli ezt a portot, megkapja ezt a http üzenetet.
Másik portot is megadhatunk: sub.domain.com:1234/path/to/somewhere.php.
A szerver erre a kérésre küldhet egy válasz http üzenetet (megteheti hogy nem küld, pl bannolt IP-címre nem válaszol), mely visszajut a klienshez.
A kliens ezt a választ (response) ezután feldolgozza, valamint tipikusan megjeleníti a felhasználónak.

Kép forrása

Web kliens

A kliens program általában egy böngésző: Chrome, Firefox, Edge, ...
De elképzelhető, hogy más jellegű a kliens. Pl android.
A böngészők a megjelenítésre HTML-t, CSS-t használnak. Lehetőség van script nyelvek használatára is, mint pl Javascript.
(Javascript-ből is indíthatunk http kéréseket, és a választ feldolgozva dinamikusan változtathatjuk az oldalt, de ezen a kurzuson ezt nem vesszük.)
A válasz általában egy HTML kód, melyben ha használtunk külső CSS-t, vagy képet, akkor a böngésző ezenek az elérésére indít további kéréseket a szerver felé.
A böngésző PHP, vagy egyéb szerver oldali kódot nem tud végrehajtani, csupán pl Javascript-et, mely a szerver számára egy egyszerű szöveg, nem értelmezi.
(Igen, node.js segítségével szerver oldalon használhatunk Javascriptet, de az más.)

Webszerver

A webszerver egy olyan program, mely http kéréseket fogad, dolgoz fel, és válaszol.
Ha egy szerverre telepítünk egy ilyen programot, akkor az képes a 80-as porton figyelni a http kéréseket.
Ez a port átállítható bármire.
Eddig csak az url domain részéről volt szó, mely azonosítja a szervert. Azonban további részei is vannak.
A subdomain rész felhasználható arra, hogy a webszerver máshogy kezelje az üzenetet: sub.domain.com
Például megadható, hogy erre alakítsa át az előbbi subdomain-re érkező kéréseket: domain.com/sub
A másik fontos része az útvonal: /path/to/somewhere.php
Ez lényegében bármi lehet, a webszervertől függ, hogy mit kezd vele.
A legegyszerűbb megvalósítás, hogy a webszerver, a megadott gyökérkönyvtárban megkeresi az adott útvonal alatt lévő fájlt, és azt küldi vissza válasznak.
Bizonyos feltételek mellett (pl .php-ra végződik) végrehajthatja a fájlt, ilyenkor a program standard output-ját küldi vissza válasznak.
Továbbá úgy is működhet egy webszerver, hogy egy osztály egy metódusát hívja meg minden kérésnél, és paraméterként adja át neki az útvonalat. (pl java servlet)
A program a futása során bármit kiírhat a standard kimenetre, mely elküldésre kerül a http válaszüzenetben.
A webszerver számára a html, css, javascript csak egyszerű szövegként jelenik meg, nem értelmezi azokat. (A legtöbb esetben.)

HTTP

A HTTP üzenetek sima szöveges üzenetek, melyek TCP-n keresztül jutnak el a szerverhez, majd pedig a válaszok is ezen a kapcsolaton keresztül jutnak vissza a klienshez.
Egy HTTP üzenet két részből áll: header (fejléc) és body (törzs).
A header meta információkat tartalmaz. Ezek például request esetében tipukusan: Response-nál a fontosabbak: A fejlécek után következik egy üres sor, majd pedig az üzenet törzse, mely opcionális.
Az említett kérés módja meghatározhatja a kérés szándékát. A GET és a POST a leggyakrabban használt. Pár jellemző: Ezeket a módokat nem muszáj követni, pl POST kérésben is lehet GET paramétereket használni, stb.. Viszont célszerű, sok mindent leegyszerűsít.
Ami még lényeges, az a válasz státusz kódja. A tartomány beosztása: Példák HTTP üzenetekre

XAMPP

A kurzus során a XAMPP-ot fogjuk használni, valamint a kötelező programot is ebben kell elkészíteni.
Ez a csomag tartalmaz egy Apache webszervert, egy MariaDB-t (MySQL fork), valamint PHP környezetet.
A saját otthoni gépünkön is elindíthatjuk, így pár kattintással fejleszthetünk webre PHP-val.
Indítás után az alábbi felületet kapjuk:

Az Actions oszlopban a Start gombokra kattintva indítsuk el az Apache és a MySQL szervereket.
Valószínűleg nem fog első próbálkozásra elindulni a webszerver, mert valami program használja a portokat (pl skype).
Át kell konfigurálni a portokat. A Config gombra kattintva az első két menüpontra lesz szükségünk.

A megnyíló konfigurációs fájlban keressünk rá erre: Listen 80
Itt található a portszám, amit a webszerver figyel. Ezt írjuk át egy szabad portra, például 81. (Ha ez sem szabad, akkor próbáljuk tovább.)
A második menüpontra kattintva egy újabb konfigurációs fájl nyílik meg, melyben keressünk rá erre: Listen 443
Ezt például átírhatjuk 444-re.
(A frissen telepített XAMPP-ban a fenti értékek lesznek beállítva, ellenkező esetben csak annyit keressünk, hogy Listen )
Ezek a fájlok számos további konfigurációt tartalmaznak, melyekkel nem foglalkozunk részletesebben.
Miért kellett két dolgot is átírni? Az első a http-nek szólt, a második pedig a https-nek, mely másik portot használ.
A Start gombra kattintva a modulok neve zöldre vált, amennyiben sikeresen elindultak.
Próbáljuk ki! A böngésző címsorába beírva meg kell jelennie a XAMPP-os feliratnak: localhost
Ha átírtuk a portokat, akkor localhost:81
A localhost a helyi gépet jelenti, melyet egyébként a 127.0.0.1-es IP-címmel érhetünk el.
A rendszer tudja, hogy ez az aktuális gépet jelenti, ezért el se hagyja a gépet a kérés, egyből a webszerver kapja meg.

A XAMPP telepítésekor megadtunk egy mappát, mely alapértelmezetten C:\xampp.
Ebben a mappában található minden komponens és konfigurációs fájl.
Az itt található htdocs nevű mappa a webszerver gyökérkönyvtára. Minden ami ebben található elérhető a webszerveren keresztül.
Telepítéskor már egy csomó dolog idekerült, érdemes egy almappát létrehozni, hogy ne kavarodjanak a fájlok.
Például hozzunk létre egy demo mappát, melybe rakjunk egy teszt.html nevű HTML fájl a tanultak alapján.
Ezután a böngészőben elérhető ez a fájl az alábbi url-en: localhost:81/demo/teszt.html .

Lehetőség van a webszerver működésének befolyásolására az úgynevezett htaccess fájlok segítségével.
Alapból ki van kapcsolva, mert lassíthatja a működést, és érdemes a fő konfigurációs fájlba beállítani ezeket, de előfordulhat, hogy nincs hozzáférésünk.
A részletekbe nem megyünk bele, a linken további leírások találhatóak.

PHP I.

A PHP egy régóta jelenlévő és nagyon népszerű programozási nyelv webes alkalmazások készítésére.
Nagyon egyszerű benne fejleszteni, könnyen tanulható, de nagyon könnyű rossz minőségü, sebezhető programokat is írni.
A PHP egy script nyelv, tehát nem kell lefordítani előre. A PHP értelmező feldolgozza a fájlt, hogy szintaktikailag helyes-e, majd soronként végrehajtja.
Előfordulhat, hogy nem létező függvényt hívunk, de amennyiben nem kerül végrehajtásra az a parancs, úgy erre sosem derül fény.
Például egy IF-nél két vezérlési ág van, de ha mindig csak az egyik hajtódik végre, úgy a másik ágat sose fogja értelmezni, így nem is tudjuk, hogy helyes-e a kód.
A PHP kódot egy egyszerű szöveges fájlba írhatjuk. Az Apache a kiterjesztés alapján dönti el, hogy végrehajtsa-e, vagy csak kiszolgálja a fájlt.
A .php kiterjesztésű fájlokat a php értelmezővel futtatja le. (Ez az értelmező a XAMPP-al együtt települ)
Ezekbe a fájlokba nem csak php kódot írhatunk. Sőt, alapból sima szövegnek tekinti a tartalmát.
PHP módba az alábbi módon léphetünk át:
A példából is látható, a <?php után tudunk php kódot írni, valamint a ?> után visszaléphetünk a sima szöveges módba.
Az ezek közé írt szöveget a php értelmező fogja feldolgozni. A többit pedig kiírja a standard kimenetre.
Az előző kód által előállított html:
A háttérben valami hasonló történik:
A php tag-nek vannak változatai:

PSR (PHP-FIG)

Ahány PHP projekt, annyi féle kódolási szokás. A PHP alapból sok minden támogat, de mégis számos dolgot minden projektben meg kell valósítani.
A PSR (PHP-FIG) arra törekszik, hogy egységesítse a résztvevő projekteket.
Ebben a csoportban számos népszerű projekt megtalálható. A fő cél, hogy összedolgozzanak, ezáltal könnyebben integrálható szoftvereket készítsenek.
Ajánlott az itt található útmutatásokat követni.