6.1. fejezet¶
A fejezet anyaga¶
A web működése¶
A webes programok tipikusan két részből állnak: egy kliensből és egy szerverből.
A kliens (ügyfél) általában egy böngésző, ami a gépünkön fut és adatok megjelenítéséért felel. A szerver (kiszolgáló) jellemzően egy távoli webszerver, amely kliensek kéréseit szolgálja ki.
A kliens és a szerver az Interneten keresztül kommunikál egymással a HTTP (HyperText Transfer Protocol) nevű hálózati protokoll segítségével. A kliens erőforrások (pl. képek, weboldalak, videóállományok, szöveges fájlok stb.) iránt indított HTTP kéréseket küld a szervernek, amiket a szerver fogad, feldolgoz és HTTP válaszokkal reagál rájuk. Ennek a kliens-szerver modellnek a vázlatos működését szemlélteti az alábbi ábra.
URL-címek¶
A webes kommunikáció során a szerver azonosítása egy URL (Uniform Resource Locator) segítségével történik, amit a böngésző címsorában adunk meg. Az URL-címek három fontos információt tartalmaznak:
- a kommunikáció során használatos protokollt
- a szerver domain nevét (ezt a DNS protokoll átkonvertálja egy IP-címre, amely egy konkrét kiszolgálót azonosít)
- a kért erőforrás elérési útvonalát a szerveren.
Például a https://okt.sed.hu/webtervezes/index.html URL-cím esetén a protokoll a HTTPS, a szerver domain neve az okt.sed.hu, az erőforrás elérési útvonala pedig webtervezes/index.html.
HTTP üzenetek¶
A hálózati kommunikációra használt HTTP üzenetek (kérések és válaszok) tulajdonképpen egyszerű szöveges üzenetek, amelyek egy TCP-csatornán keresztül jutnak el a fogadóhoz. Ezek az üzenetek két fő részből állnak: egy fejlécből és egy üzenettörzsből.
A fejléc metainformációkat tartalmaz. HTTP kérések esetén például a fejlécbe kerül a HTTP metódus, a kért erőforrás útvonala, a protokoll verziója, a böngésző típusa és még néhány egyéb információ. HTTP válaszoknál a fejléc tartalmazza többek között a státuszkódot, a szerver adatait, valamint a válasz törzsének méretét, típusát és kódolását.
A fejléc után egy üres sor következik, majd pedig az üzenettörzs, amelynek kitöltése opcionális.
Példa: Egy HTTP kérés és egy HTTP válasz felépítése
A különböző HTTP metódusok közül leggyakrabban a GET-et és POST-ot használjuk a HTTP kérésekben. A GET kérésekkel egy erőforrást tudunk elkérni a szervertől, míg a POST kérésekkel adatot továbbítunk a kiszolgáló felé (pl. egy kitöltött űrlap adatait). A POST kérések esetén a szervernek továbbított adatok a HTTP üzenet törzsébe kerülnek. Ezeken kívül léteznek még további HTTP metódusok is, amelyek listája és leírása megtalálható itt.
Ami lényeges még számunkra, az a HTTP válaszban szereplő státuszkód. Néhány fontosabb HTTP státuszkód és jelentésük (teljes lista itt):
200 OK: sikeres kérés, az információk el lettek küldve a válaszban301 Moved Permanently: a kért erőforrás át lett mozgatva máshova a szerveren400 Bad Request: általános hibakód, a szerver nem tudja értelmezni a kérést404 Not Found: a kért erőforrás nem található a szerveren500 Internal Server Error: váratlan belső szerverhiba505 HTTP Version Not Supported: a HTTP kérés verziószáma nem támogatott a szerver által.
Fun fact
A HTTP státuszkódokat az interneten megtalálhatjuk macskákkal és kutyákkal is szemléltetve.
Megjegyzés
A webes kommunikáció során a HTTPS protokoll is használható. Ekkor a kliens és a szerver között biztonságos, titkosított kapcsolat jön létre.
Kliens- és szerveroldali webprogramozás¶
A korábbi leckékben végig kliensoldalon tevékenykedtünk: weboldalakat hoztunk létre és formáztunk, majd az elkészült weblapokat a böngészőben nyitottuk meg. Eddig tehát főként a megjelenésen volt a hangsúly, a weboldalaink nem rendelkeztek mögöttes logikával.
A webfejlesztés során azonban gyakran felmerül az igény arra, hogy egy weboldal működésébe programozásbeli logikát vigyünk. Például ha van egy bejelentkezési űrlapunk, akkor működést is szeretnénk hozzá társítani: le szeretnénk ellenőrizni, hogy a belépési adatok helyesek-e, és ettől függően vagy bejelentkeztetjük a felhasználót, vagy pedig valamilyen hibaüzenetet írunk ki a bejelentkezés sikertelenségéről. Az ehhez hasonló működésbeli logika megvalósítására szolgál a webprogramozás.
Attól függően, hogy az általunk írt webes programok a kliensen vagy a szerveren futnak, beszélhetünk kliensoldali (front-end), illetve szerveroldali (back-end) webprogramozásról. Ezeknek a rövid összehasonlítását tartalmazza az alábbi táblázat.
| Kliensoldali webprogramozás | Szerveroldali webprogramozás | |
|---|---|---|
| Hol futnak a kódok? | A felhasználó gépén | Egy webszerveren |
| Mire használják? | Látványelemek (pl. animációk) megvalósítása, űrlapadatok helyességének ellenőrzése (pl. e-mail cím formátuma) | Bizalmas adatok (pl. jelszavak) kezelése, adatbázis-kezelés, fájlkezelés, jogosultságkezelés |
| A programkód a weboldal forráskódjában... | ...látható | ...nem látható |
| Biztonságos az adatok tárolása? | Nem | Igen |
| Programozási nyelvek | JavaScript | PHP, Python, Node.js, ASP.NET, Java, Ruby, Perl |
A gyakorlatban a kliens- és szerveroldali programozás sokszor együtt használatos. Ennek oka, hogy bizonyos feladatokat kliensoldalon célszerű elvégezni (így nem terheljük fölöslegesen a szervert), míg néhány feladatot csak szerveroldalon lehet biztonságosan végrehajtani.
A kliensoldali programok esetén mindig tartsuk észben, hogy az általunk írt kód bárki számára látható lesz a weboldal forráskódjában! Ez nem túl szerencsés, ha bizalmas adatokkal (pl. jelszavakkal, bankszámlaszámokkal, online vizsgateszt megoldásaival) dolgozunk. Ha bizalmas adatokkal dolgozunk, használjunk szerveroldali nyelvet!