2024. szeptember 2., hétfő

13 Backend - 1. Bevezetés a PHP-be

1.1 Mi az a PHP?

A PHP (Hypertext Preprocessor) egy népszerű szerveroldali programozási nyelv, amelyet weboldalak dinamikus tartalmának előállítására használnak. A PHP kódot a szerver végzi el, mielőtt az HTML oldal véglegesen megjelenne a felhasználó böngészőjében. A PHP használatával interaktív weboldalakat, űrlapokat, adatbázis-műveleteket és sok más dinamikus funkciót lehet létrehozni.

1.2 A PHP Fejlődése

A PHP eredetileg Rasmus Lerdorf által készült 1994-ben. Az első verzió, a PHP/FI (Personal Home Page Tools/FI), alapvetően egy egyszerű eszköz volt, amely lehetővé tette a weboldalak dinamikus tartalmának előállítását. Azóta a PHP jelentős fejlődésen ment keresztül, és a következő főbb verziókat tartalmazza:

  • PHP 3: 1998-ban jelent meg, és jelentős frissítést hozott az előző verzióhoz képest, mivel a kódot teljesen újraírták, és már objektum-orientált programozási támogatást is nyújtott.
  • PHP 4: 2000-ben jelent meg, és az új Zend Engine révén gyorsabb és hatékonyabb teljesítményt biztosított. Az objektum-orientált programozás tovább fejlődött.
  • PHP 5: 2004-ben kiadott verzió, amely az objektum-orientált programozás jelentős fejlesztéseit tartalmazta, például az osztályokat, öröklődést, és a MySQL támogatást is jelentősen javította.
  • PHP 7: 2015-ben jelent meg, és jelentős teljesítménybeli javulásokat hozott, valamint új funkciókat és optimalizálásokat. Az objektum-orientált programozás és a hibakezelés is tovább fejlődött.
  • PHP 8: 2020-ban jelent meg, és további teljesítménybeli javulásokat hozott, valamint új nyelvi funkciókat, mint például a JIT (Just-In-Time) fordítót, és számos új szintaktikai elemet.

1.3 Népszerűség és Használat

A PHP az egyik legnépszerűbb szerveroldali programozási nyelv a webfejlesztés terén. A statisztikák szerint a weboldalak jelentős része, köztük népszerű CMS rendszerek, mint a WordPress, Drupal, és Joomla, PHP-t használ. A PHP népszerűsége az alábbiaknak köszönhető:

  • Széleskörű Támogatás: A PHP széles körben támogatott a legtöbb webhoszting szolgáltatásnál, és könnyen integrálható különböző adatbázisokkal és technológiákkal.
  • Nagy Közösség: A PHP közössége aktív és támogató, rengeteg dokumentáció, fórum, és könyvtár érhető el.
  • Nyílt Forráskód: A PHP ingyenes és nyílt forráskódú, amely lehetővé teszi bárki számára a nyelv tanulmányozását és testreszabását.

1.4 Előnyök és Hátrányok

1.4.1 Előnyök

  • Könnyen Tanulható: A PHP viszonylag könnyen tanulható, különösen kezdők számára, mivel egyszerű szintaxissal rendelkezik.
  • Széleskörű Kompatibilitás: A PHP jól működik különböző operációs rendszereken (Windows, Linux, macOS), és könnyen integrálható más webtechnológiákkal.
  • Erős Közösségi Támogatás: Az aktív közösség és a széleskörű dokumentáció segíti a fejlesztőket a problémák gyors megoldásában.
  • Teljesítmény: A PHP 7 és 8 verziói jelentős teljesítménybeli javulásokat hoztak a korábbi verziókhoz képest.

1.4.2 Hátrányok

  • Biztonsági Kérdések: Mivel a PHP egy nyílt forráskódú nyelv, a biztonsági problémák és sebezhetőségek kezelése kihívást jelenthet, különösen a rosszul megírt kód esetén.
  • Elavult Kódok: A PHP elavult kódokkal rendelkező régi rendszerek továbbra is fennállnak, amelyek karbantartása és frissítése problémás lehet.
  • Teljesítmény Különbségek: Bár az újabb verziók jelentős teljesítményjavulást hoztak, a PHP teljesítménye még mindig elmaradhat bizonyos modern nyelvekhez képest, különösen nagy forgalmú alkalmazások esetén.

1.5 Első PHP Szkript

A PHP fájlok .php kiterjesztéssel rendelkeznek, és a PHP kódot a <?php ... ?> címkék közé kell írni. Az alábbi példa bemutatja, hogyan lehet egy egyszerű "Hello, World!" üzenetet megjeleníteni echo és print használatával:

1.5.1 Echo és Print

A PHP-ben két gyakran használt függvény a echo és a print, amelyek mindkettő a szöveg kiírására szolgál, de van néhány fontos különbség közöttük.

  • echo: Több értéket is ki tud írni egyszerre, és nem ad vissza értéket. Az echo egy nyelvi konstrukció, nem pedig egy valódi függvény, így nincs visszatérési értéke.
  • print: Csak egy értéket tud kiírni egyszerre, és mindig visszatér egy értékkel (0-t jelent, ha sikeres a művelet).

echo példa:

<?php

echo "Hello, World!<br>";

echo "Welcome to PHP!";

?>

print példa:

<?php

print "Hello, World!<br>";

print "Welcome to PHP!";

?>

Különbségek példával:

  • echo használatával több paramétert adhatunk meg:

<?php

echo "Hello, ", "World!", "<br>";

?>

  • print csak egy paramétert tud kezelni:

<?php

print "Hello, World!" . "<br>";

?>

1.5.2 Fájl létrehozása és futtatása

  1. Fájl létrehozása: Nyiss meg egy szövegszerkesztőt (pl. Notepad++ vagy VS Code), és írd be az alábbi PHP kódot. Mentsd el a fájlt hello.php néven az XAMPP telepítési könyvtárában található htdocs mappába.

<?php

echo "Hello, World!<br>";

print "Welcome to PHP!";

?>

  1. Fájl futtatása: Nyisd meg a böngészőt, és írd be az http://localhost/hello.php címet. A böngészőben meg kell jelennie a "Hello, World!" és a "Welcome to PHP!" üzeneteknek, a echo által hozzáadott sorok közé szúrva.

1.6 Környezet Beállítása

1.6.1 PHP Konfigurációs Fájl

A PHP konfigurációs fájl neve php.ini, és az alapértelmezett helye az XAMPP telepítési könyvtárában található php mappában van. A fájl módosításával szabályozhatjuk a PHP beállításait, például a memória limitet vagy a hibakezelést.

1.6.2 Hibakezelés

A PHP hibakezelése fontos része a fejlesztésnek. A hibák megjelenítését a php.ini fájlban található display_errors beállítással szabályozhatjuk. A hibaüzenetek hasznosak lehetnek a hibák keresésében és javításában.

display_errors = On

1.7 Összefoglalás

Ebben a fejezetben megismerkedtünk a PHP alapjaival, a telepítés folyamatával, és az első PHP szkript elkészítésével. Részleteztük a PHP fejlődését, népszerűségét, valamint az előnyeit és hátrányait. A print és echo funkciókat is bemutattuk, és rávilágítottunk a köztük lévő különbségekre. A következő fejezetekben részletesebben foglalkozunk a PHP szintaxisával, változókkal és adattípusokkal.

13 évf. Frontend - 1. Interaktív Kvíz Alkalmazás

Készítsetek egy egyszerű, de teljes funkcionalitású interaktív kvíz alkalmazást, amely több kérdést tartalmaz és visszajelzést ad a felhasználónak a válaszai alapján.

Feladat követelményei:

  1. HTML - Alapstruktúra:

    • Hozz létre egy HTML oldalt, amely tartalmazza a kvíz kérdéseit.
    • Minden kérdéshez tartozzon egy kérdés szöveg (például: "Mi Magyarország fővárosa?") és legalább három válaszlehetőség (radio button vagy checkbox formájában).
    • Helyezz el egy gombot az oldal alján, amely a kvíz kiértékelésére szolgál (például: "Eredmény megtekintése").
  2. CSS - Stílusok:

    • Formázd meg az oldal kinézetét úgy, hogy az esztétikus és könnyen használható legyen.
    • Használj legalább három különböző CSS tulajdonságot (például: színek, betűtípusok, margók, padding).
    • Készíts egy reszponzív dizájnt, amely jól néz ki különböző eszközökön (mobil, tablet, asztali gép).
  3. JavaScript - Interaktivitás:

    • Készíts egy JavaScript kódot, amely kezeli a válaszok kiértékelését.
    • Amikor a felhasználó rákattint az "Eredmény megtekintése" gombra, a JavaScript számolja ki, hány helyes választ adott, és jelenítse meg az eredményt az oldalon.
    • Adj visszajelzést a felhasználónak a teljesítményéről (például: "Gratulálok, 3/5 kérdésre helyesen válaszoltál!").
    • (Opcionális) Adj lehetőséget a felhasználónak a kvíz újrakezdésére anélkül, hogy frissítené az oldalt.

Extra kihívások (opcionális):

  • Készíts egy időzítőt, amely korlátozza a kvíz kitöltésére rendelkezésre álló időt.
  • Tárolj kérdéseket és válaszokat egy külön JavaScript objektumban vagy JSON formátumban, és dinamikusan generáld a kérdéseket az oldal betöltésekor.
  • Adj hozzá animációkat CSS-sel, például a kérdések megjelenítésekor vagy a válaszok kiértékelésekor.


12. évf. Web - 1. HTML alapok és JavaScript integráció

 HTML (Hypertext Markup Language) a weboldalak alapvető építőköve, amely a weboldal szerkezetét és tartalmát definiálja. Az HTML használatával lehetőséged van szövegek, képek, linkek és egyéb elemek elhelyezésére egy weboldalon.

1. HTML Dokumentum Alapstruktúra

Minden HTML dokumentumnak rendelkeznie kell egy alapstruktúrával. Az alábbi példa bemutatja egy egyszerű HTML dokumentum szerkezetét:

<!DOCTYPE html>

<html lang="hu">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Oldal Címe</title>

</head>

<body>

    <h1>Üdvözlet a Weboldalon!</h1>

    <p>Ez egy alapvető HTML dokumentum példa.</p>

</body>

</html>

  • <!DOCTYPE html>: Jelzi, hogy HTML5 dokumentumról van szó.
  • <html>: Az egész HTML dokumentum gyökéreleme.
  • <head>: A dokumentum metaadatokat tartalmazó része.
  • <body>: A weboldal látható tartalmát tartalmazza.

2. HTML Elemei

  • Fejléc Elemei: <h1>, <h2>, ..., <h6> – Fejlécek különböző szinteken.
  • Szövegelemek: <p> – Bekezdés, <a> – Hiperhivatkozás, <strong> – Sűrített szöveg.
  • Lista Elemei: <ul> (rendezett lista), <ol> (számozott lista), <li> (listaelem).
  • Formázás: <b>, <i>, <u> – Szöveg kiemelés, stb.

JavaScript Integráció

A JavaScript lehetővé teszi dinamikus és interaktív elemek hozzáadását a weboldalakhoz. A JavaScript kódot általában a <script> tag-en keresztül illesztjük be az HTML dokumentumba.

1. JavaScript Kód Beillesztése

1.1. Beágyazott JavaScript

A JavaScript kódot közvetlenül az HTML dokumentumban is elhelyezhetjük:

<!DOCTYPE html>

<html lang="hu">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript Integráció</title>

    <script>

        function sayHello() {

            alert('Helló, világ!');

        }

    </script>

</head>

<body>

    <button onclick="sayHello()">Kattints ide!</button>

</body>

</html>

1.2. Külső JavaScript Fájl

A JavaScript kódot külön fájlba is helyezhetjük, ami tisztább és karbantarthatóbb kódot eredményez:

index.html:

<!DOCTYPE html>

<html lang="hu">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JavaScript Integráció</title>

    <script src="script.js" defer></script>

</head>

<body>

    <button onclick="sayHello()">Kattints ide!</button>

</body>

</html>

script.js:

function sayHello() {

    alert('Helló, világ!');

}

2. Alapvető DOM Műveletek

A DOM (Document Object Model) az HTML dokumentum strukturált reprezentációját biztosítja, amely lehetővé teszi az elemeken végzett műveleteket JavaScript segítségével.

2.1. DOM Elem Kiválasztása

Az elem kiválasztása az document.getElementById() vagy document.querySelector() metódusokkal történhet:

let element = document.getElementById('myElement');

let firstParagraph = document.querySelector('p');

2.2. Elem Tartalmának Módosítása

Az elem tartalmát a innerHTML vagy textContent tulajdonságokkal lehet módosítani:

document.getElementById('myElement').innerHTML = 'Új Tartalom!';

2.3. Eseménykezelés

Az eseménykezelők lehetővé teszik a felhasználói interakciók kezelését:

document.getElementById('myButton').addEventListener('click', function() {

    alert('Gombot kattintottak!');

});

Források

  1. Mozilla Developer Network (MDN) - HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
  2. Mozilla Developer Network (MDN) - JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
  3. W3Schools - HTML Tutorial: https://www.w3schools.com/html/
  4. W3Schools - JavaScript Tutorial: https://www.w3schools.com/js/

Feladat: Dinamikus Üdvözlés

Készíts egy egyszerű weboldalt, amely tartalmaz egy szöveges beviteli mezőt (input), egy gombot és egy üdvözlő szöveget. Amikor a felhasználó beír egy nevet az input mezőbe és rákattint a gombra, az oldal frissíti az üdvözlő szöveget, hogy tartalmazza a beírt nevet.



Feladat Lépései:

HTML Fájl Készítése: Készítsd el az index.html fájlt a megadott kóddal.

JavaScript Fájl Készítése: Készítsd el a script.js fájlt a megadott kóddal.

Tesztelés: Nyisd meg a index.html fájlt a böngészőben. Írj be egy nevet az input mezőbe és kattints a gombra, hogy lásd az üdvözlő szöveg változását.



Célok:

Gyakorolni a HTML és JavaScript integrációját.

Megérteni a DOM manipuláció alapjait.

Készségeket fejleszteni az eseménykezelésben.

Házi feladat: az órai megoldás alapján kérj be két adatot a felhasználtól, olvasd ki az input mezők értékét, és fűzd össze, majd írasd ki egy paragrafusba.

Ha lesz kréta Hanának, Gergőnek, Tamásnak, Gabinak órai feladat megoldásra 5-öt beírni! :-) 

1 csoport 2024.09.03

2 csoport 2024.09.04

12.évf. ikt - 1. Bevezetés a Node.js-be: Alapvető fogalmak, telepítés, környezet beállítása.

Mi az a Node.js?

A Node.js egy nyílt forráskódú, platformfüggetlen futtatási környezet, amely lehetővé teszi, hogy a JavaScript nyelvet ne csak a böngészőben, hanem szerveroldalon is használjuk. Ez azt jelenti, hogy a JavaScript segítségével nemcsak interaktív weboldalakat készíthetünk, hanem teljes szerveroldali alkalmazásokat is fejleszthetünk.

NodeJs egy olyan futtató környezet, ami lehetőséget nyújt JavaScriptben írt programok futtatására szervereken. JavaScriptet leginkább a kliens oldalon szokták használni, a böngészőn keresztül. Ahhoz, hogy, megértsük miképp futtathatunk JavaScript kódot szerveren, először nézzük meg, miképp valósul meg ugyanez a böngészőn keresztül. A böngésző applikáció fejlesztők számára olyan motorokat kell biztosítani (a Google Chrome esetén a v8 engine), amik a JavaScript kódot gépi nyelvként interpretálják és le is futtatják. Alapvetően a NodeJs is ugyanazt a v8 engine-t használja, némi módosítással. Most felmerülhet bennünk az a kérdés, hogy miben jobb, mint a PHP, asp.net, stb. ? Annyi könnyebbséget nyújt, ha már dolgoztunk frontend oldalon, nem kell egy teljesen új nyelvet megtanulni ahhoz, hogy a backend-et is implementáljuk. Tehát ha valaki megtanulta a javascriptet, akkor nem kell új programnyelvet tanulnia ahhoz, hogy a szerver oldalon is tudjon programozni. Lényegében ugyanazokkal az eljárásokkal, függvényekkel, szintaxissal tudsz szerver oldali alkalmazást is írni. Tehát nagyon leegyszerűsítve ez a lényege.

A másik előnye az, hogy a non-blocking természetéből adódóan alkalmas egyszerre több ezer bejövő 'egyszerű' kérés kezelésére. A Node.js-t úgy írták meg, hogy (szinte) minden esemény aszinkron legyen, ezért az program sosem blokkolódik, azaz nem kell várni, hogy egy művelet befejeződjön, vele párhuzamosan futtathatunk további műveleteket. Ez pontosan ugyan úgy működik, mint a böngészőben levő XHR kérések, vagy más események, mint például a click, mouseover. Ez az alkalmazás folyamatosabb futását, több alkalmazás párhuzamosítását, valamint az egész rendszer optimálisabb működését teszi lehetővé. Tehát ebből is látszik, hogy másik nagy előnye az, hogy kezeli az eseményeket is más szerver oldali alkalmazásokkal szemben.

A hétköznapi életben az egyik legelterjedtebb variáció, az Apache és php kombinációja. Ez úgy néz ki, hogy kap egy kérést az Apache szerver valahonnan, egy böngészőből a netről, 80-as porton. Amikor megkapja a kérést akkor megnézni, hogy hol van az erőforrás amit kértek, hol van az a honlap, és ha megtalálja, az „index.php” a kezdő fájl, akkor meghívja a php-t elindítja, a php legenerálja az oldal tartalmát neki, amikor végzett akkor vissza adja a vezérlést az Apache szervernek. Az Apache szerver lelövi a php-t kész vége a folyamatnak, leáll, és utána vissza küldi a tartalmat a kliens felé, és bontja a kapcsolatot. Tehát így néz ki egy http kérés.

Érdekesség képpen, vizsgáljuk meg a „nodejs-org” oldalt, nyomjunk neki egy f12-t, kattintsunk a Network fülre, és itt ha egy f5-öt, ha nyomunk újra frissíti az oldalt, és itt látható hogy egy csomó kérést elküld a szerver felé az oldalunk, és látható, hogy mi az amit legelőször lekér, az a document, tehát mindig a legelső az a html váza az oldalnak, ami lejön a szerverről. ugye a html dokumentunk ezzel még sokat fogunk foglalkozni, az egy xml-ben htmlxml-ben írt dokumentum, rákattintva látható is a nyers váza az oldalnak, itt vannak leírva az alapvető scriptek stb. illetve egy csomó hivatkozást tartalmaz. A böngésző úgy dolgozik, hogy föntről lefelé elindul, teljesen egyszerűen, mint ahogyan az ember olvassa soronként elolvassa ezt a kódot, és amit ott talál azt végre hajtja. Először megnézi, hogy dokumentum típusa html, majd látja, hogy elindul a html-ünk, html nyitó tag, beállítja a nyelvet angolul, aztán jön fejrész, beállítja a karakterkódolást, majd a címet, beállítja a linkeket megy tovább. Utána talál egy scriptet lefutatja a scirptet, és amíg a scirpt nem futott le addig nem megy tovább, majd jön az oldalnak a body része amit mindenki lát, abban is van egy header, container, talál egy ilyet img src, az srcből tudja hogy ez egy külső erőforrás be kell olvasnunk, meghívja újra küld egy kérést a szerver felé, letölti a logo.svg fájlt, ha kész van megy tovább. Utána megkeresi a következő ilyen hivatkozást, és még sok minden más huncutság van itt sorról sorra és a végén van egy css fájl, ami gyakorlatilag az oldal megjelenését írja le, azt is lekéri, aztán látható benne webfont.js fáj, javascript fájl, aztán még jónéhány javascriptet lefuttat, és a végén kiszáll. Ez egy tipikus weboldal ebből a szempontból és ha a network fül alatt megnézzük, látható hány kérést küldött pl 14-et a szerver felé a böngészőnk, és azt is láthatjuk ezen kérések során, milyen mennyiségű fájlt mozgatott meg. Nem túl sok ha már be van cash-elve.

Ezt azért néztük meg, mert a nodejs egy tipikusan szerver alkalmazás, kiszolgáló alkalmazás. Tehát ha mi nodejs-ben szeretnénk egy weblapot elkészíteni, akkor az összes kérést ami itt fel van sorolva mindet a nodejs-nek kell kiszolgálni. Elküldi a tartalmat a html-t kiszolgálja a fájlokat, vissza küldi a felhasználónak a kért fájlokat, összeállítja a tartalamat templatekből, minden egyes kérésnél beállítja a fejlécket, stb ezt mind mind a nodejs fogja kiszolgálni. 

Nincs külön szerveroldali nyelv mint a php, nincs külön szerver mint IS vagy apache, hanem a kettő egyben van. Tulajdonképpen mind a kettő a nodejs. A nodejs egy személyben ő szerver is és ő generálja a tartalmat is. A klasszikus megközelítés az volt, hogy mindig külön volt a szerver program és külön a kódgenerátor. Típustól függően microsoftos kódgenerátor php vagy bármi más, ami generálta a kódot, itt a kettő egyben van!

Hátránya, hogy mivel összetetetettebb kódot kell írni, könnyebb elrontani. Ugyanaz végzi a fájlkiszolgálást is meg a tartalom generálást is.

Előnye, hogy lényegesen kisebb a processzor és a memória felhasználása. Miért, mert mindegy egyes folyamat amit fut a szerveren, ugyanúgy mint a windowson ha megnyitjuk a folyamat kezelőt, minden egyes folyamat foglal memóriát, processzor időt stb. Itt ebben az esetben nem kell két folyamatot futtatnia, külön a szervert külön a generátort, hanem egy folyamat fut csak, jellemzően olyan ötöde tizede a memória felhasználása, egy ugyanakkora oldanál egy nodejsnek mint pl az apache php kombónak. Ez egy nagyon nagy előny. Nem blokkolja az I/O modelt,

Az oldalon láthatjuk le van írva angolul, hogy a nodejs egy eseményvezérelt rendszert használ, az input output modell tulajdonképpen a kapcsolódás és lekapcsolódás, amikor egy hagyományos szerver végez bontja  a kapcsolatot a felhasználóval. Viszont a nodejs-el meg tudjuk azt csinálni, hogy amikor kiszolgálta a felhasználó kérését utána kapcsolatban marad egy socketen keresztül a felhasználó gépével, és nem kell mindig minden kérésnél újra felépíteni a kapcsolatot, hanem a meglévő csatornán socketen keresztül tudnak kommunikálni egymással. (socket – konnektort jelent) tehát be van csatlakoztatva a konektorba a felhasználó és folyamatos a kapcsolat a két fél között.

A Node.JS és a böngésző jelentősen különböznek egymástól, annak ellenére, hogy mindkettő a JavaScript nyelven alapszik. A node.js veszi az alap nyelvet, akárcsak bármelyik böngésző motor, és különböző API-kkal bővíti azt, ezzel lehetőséget nyújtva szerveroldali műveletekre, hálózati feladatok ellátására.

Először is nézzük meg, hogy a node.js milyen futtatási környezetben működik, és hogyan illeszkedik abba a rendszerbe, amivel már kliens oldali fejlesztőként találkoztatok. Ehhez nyugodtan elővehetjük azt a kis ábrát, amit a javascripttel való ismerkedés elején néztünk meg, ami bemutatja a http protkoll alapvető működését.



A böngészőben működik egy beépülő program, egy ún js engine vagy js motor, ez egy interpreter, amibe a bemenet a js nyelven írott kód, és amit ez csinál, az az, hogy vezérli a böngészőt. Ezt több módon is teszi, többek között az enginet a motort tudja vezérelni, tehát a html dokumentumot, tulajdonképpen megvan a motornak a hatalma arra, hogy elementeket hozzon létre, vagy bármely element bármely attribútumát módosítsa. Emellett hozzáférése van az ún console-hoz, ami egy interfész arra, hogy mi közvetlenül kommandokat tudjunk beküldeni az enginenek, és meg is tudjuk nézni azt, amit az engine vissza küld válaszként. A console-t sokat fogjuk használni. Emellett az enginenek megvan a hatalma arra, hogy ő maga küldjön ilyen http kéréseket, és a beérkező válaszokat feldolgozza, ezek az ún ajax kérések, és nagyon nagy szerepük van a kliens oldali alkalmazásokban. Emellett az enginen keresztül adatot is tudunk tárolni, létezik a böngészőnek egy local storage nevű szekciója, ahol elhelyezhetünk adatot és később akár újabb oldalletöltéssel kiolvashatunk minden adatot. Manapság már nemcsak a kliens oldalon működik javascript engine, hanem már megannyi futtatási környezetben használható ez a motor, többek között szerver oldalon is futtatható. Node.js programon keresztül is használható az engine, de ebben a kontextusban merőben eltérő feladatai vannak az enginennek, hiszen ő a kéréseket fogadja és ezekre válaszokat küld. Tehát célját és feladatait tekintve abszolút eltér a kliens oldalon használt engine-től.

A kliens oldalon két fő feladata van a js—nek, egyrészt a html elementek módosítása révén elérhető egyfajta interakció fokozás, másrészről meg ajax kérések küldése révén tudunk oldal letöltés nélkül kis mennyiségű adatért folyamodni a szerver oldalra. Amennyiben maxra járatjuk a js kódot, a kliens oldalon létrehozhatunk olyan user interface-ket, amik oldal letöltés nélkül kommunikálnak folyamatosan a szerver oldalra és ilyen olyan interaktív hatásokat is hoznak létre tehát akár egy telefonos applikáció hatását is keltik, egy klasszikus értelemben vett weboldal hatását, ahol kattintgatunk és frissülnek az oldalak, tehát egy folyamatos smooth élményt egy megszakítás nélküli felhasználói élményt nyújtanak.

Nézzük tovább, ha van egy szervered, akkor a nodejs program milyen feladatokat hivatott ott ellátni. Ha pl nodejs szervert üzemeltetsz a szerver elsődleges célja a http kéréseknek a fogadása, majd a kérés alapján egy http válasz megküldése. Most átülünk a rendszer másik oldalára, ahol a kéréseket fogadjuk, és a válaszokat küldjük. A szerverednek hozzáférése van a lokális gépednek a fájl rendszeréhez. Az előző képet egy kis dobozkával lehet kiegészíteni file system, ebbe a fájl rendszerbe a node js program tud írni, és tud belőle olvasni. Emellett a nodejs applikáció tipikusan kapcsolatba lép adatbázissal, ez által a rendszer alkalmassá válik klienstől kapott adat eltárolására, majd akár egy újabb beérkező request kapcsán az adat kiolvasására majd a válaszként való megküldésére. A két rendszer működése a való életben úgy néz ki, hogy teszem azt le akarod tölteni a portfolio.hu oldalát, ezért beírod url-nek, hogy portfolio.hu, és rányomsz az enterre. Ekkor a böngésző kiküld egy http kérést, a portfolio.hu szerverének, ezt a kérést a szerver egy adott portján keresztül fogadja, majd a fájl rendszeréből egy html sablont olvas be. Emellett az adatbázissal is kapcsolatba lép, és kiolvassa a napi legfrissebb híreket. A beolvasott html sablonból, valamint az adatbázisból származó információból össze állít, specifikus, arra az adott napra aktuálisan érvényes html dokumentumot. Ezt a dokumentumot megküldi válaszként a kliensnek. A böngésző ezután kirendereli a tartalmat, valamint hogyha a html tartalomban vannak hivatkozások, további erőforrásra, azokat a kéréseket kiküldi szintén szerver oldalra. Az adott esetben ilyen módon kiszolgált szerver oldali scriptek lefutnak a böngészőben. Amennyiben a html tartalomban vannak interaktív komponenesek, teszem azt megnézzük a tőzsdei információkat valós időben (itt 15 perces késéssel látjuk, valós időhoz előfizetés szükséges) szolgáltató interaktív komponenst, akkor az interaktivitást a szerverről megkapott kliens oldali script biztosítja, és ez a js kód folyamodhat friss tőzsdei adatokhoz, időként a szerverhez, tehát ő maga kiküldhet http kérést, miután az oldalt letöltöttük. Ebben az esetben ez a kérés szerver oldalon szintén beérkezik egy bizonyos portra. A nodjs a kérésnek megfelelő adatokat kiolvassa, majd ezt json formátumban küldi meg válaszként. A beérkező json tartalmat a js app kirendereli kliens oldalon, így egy folyamatosan frissülő tartalmat láthatunk.

Amit fontos látnunk, hogy a szerver, amikor először letöltöttük az oldalt, még csak egy html tartalommal válaszolt, és ez volt az első dolog amit a kliens megkapott. Utána a kliens kért tőle képeket, scripteket, css fájlokat, majd amikor a script elkezdett futni, és ajax kérést küldött ki, akkor a szerver json tartalmat is szolgáltatott. Tehát a szerver sokfajta tartalom típus szolgáltatásért felelős. Ezeket fogjuk megnézni, hogy a különböző tartalom típusokra irányuló kéréseket, hogyan tudjuk teljesíteni, kiszolgálni, illetve hogyan tudjuk őket szerver oldalon kezelni.

A Node.js Története

A Node.js-t Ryan Dahl alkotta meg 2009-ben. Az ötlet abból származott, hogy Dahl szerette volna megoldani a webszervereknél gyakori problémát: a lassú I/O műveleteket, amelyek a felhasználói élményt jelentősen ronthatják. Az Apache webszerver, amely abban az időben a legelterjedtebb volt, minden egyes kliens számára új szálat nyitott, ami nagy terhelés esetén jelentős erőforrás-felhasználást eredményezett. Dahl felismerte, hogy egy nem blokkoló, eseményvezérelt modellt használó környezet sokkal hatékonyabb lehet.

A Node.js hamar elterjedt a fejlesztők körében, különösen azok körében, akik nagy terhelésű, skálázható alkalmazásokat szerettek volna készíteni, mint például a valós idejű chat alkalmazások vagy a streaming szolgáltatások. A Node.js népszerűségét az is növelte, hogy ugyanazt a nyelvet használhatják a fejlesztők a kliens és a szerver oldalon is, ami egységesíti és egyszerűsíti a fejlesztést.

Főbb Jellemzők

1.     Aszinkron és eseményvezérelt:
A Node.js nem blokkoló I/O modellt használ. Ez azt jelenti, hogy amikor a szerver egy műveletet, például egy adatbázis-lekérdezést hajt végre, nem várja meg a művelet befejezését, mielőtt továbblépne a következő műveletre. Ehelyett események alapján működik: ha egy művelet befejeződik, egy esemény jön létre, amely elindítja a megfelelő visszahívó (callback) függvényt. Ez a megközelítés lehetővé teszi, hogy a Node.js egyszerre nagy mennyiségű párhuzamos kérést kezeljen, anélkül hogy várakoznia kellene egy-egy művelet befejezésére.

2.     Egyszálú, de nem korlátozott:
A Node.js alapvetően egyszálú, ami azt jelenti, hogy minden művelet ugyanazon a szálon fut. Azonban a háttérben, a Node.js belső működésében több szál is dolgozik a nehéz, számításigényes feladatok kezelésére (például fájlok olvasása/írása, hálózati kapcsolatok kezelése). Ez az egyszálú, de eseményvezérelt megközelítés lehetővé teszi a magas párhuzamosságot, miközben a fejlesztőnek nem kell aggódnia a szálkezelés miatt.

3.     Modularitás:
A Node.js moduláris felépítésű, ami azt jelenti, hogy különböző funkciókat elkülönítve, modulokba szervezhetünk. Ezáltal könnyebb újrahasznosítani a kódot, és a projekt különböző részein ugyanazokat a modulokat használhatjuk. A Node.js közössége által létrehozott modulok és csomagok hatalmas tárháza található a npm (Node Package Manager) segítségével, amely egy olyan eszköz, amely lehetővé teszi ezen modulok könnyű kezelését és telepítését.

Miért Használjuk a Node.js-t?

A Node.js-t széles körben használják különféle típusú alkalmazások fejlesztésére:

  • Webszerverek: Kiválóan alkalmas webszerverek fejlesztésére, mivel hatékonyan kezeli a nagy mennyiségű kérést.
  • Valós idejű alkalmazások: Például chat alkalmazások, ahol a szervernek nagyon gyorsan kell válaszolnia a felhasználói eseményekre.
  • REST API-k: A Node.js egyszerűsíti a RESTful API-k fejlesztését, amelyek az adatbázisokkal való kommunikációra használhatók.
  • Streaming alkalmazások: A nem blokkoló modell különösen jól használható streaming szolgáltatások fejlesztésére.

A Node.js Elterjedtsége és Verziói

A Node.js nagyon elterjedt a fejlesztők körében, különösen a modern webes alkalmazások fejlesztése során. A nagy tech cégek, mint a Netflix, Uber, PayPal és LinkedIn is használják a Node.js-t különféle szolgáltatásaikhoz. Az egyik legnagyobb előnye a nagy közösség és a rengeteg elérhető modul, amely lehetővé teszi a gyors fejlesztést és innovációt.

A Node.js-nek több hivatalos verziója van, és ezek rendszeresen frissülnek. Az LTS (Long-Term Support) verziók azok, amelyeket hosszabb ideig támogatnak, és ezek a verziók a stabilitást és a hosszú távú támogatást kereső fejlesztők számára ajánlottak. Az aktuális verziók azok, amelyekben az új funkciók és fejlesztések először jelennek meg, és ezek gyorsabban frissülnek, de kevésbé stabilak.

Node.js Licenc és Közösség

A Node.js nyílt forráskódú, ami azt jelenti, hogy ingyenesen használható, módosítható és terjeszthető. A projektet a Node.js Foundation kezeli, amely a Linux Foundation része. Ez a szervezet felügyeli a Node.js fejlesztését és biztosítja annak folyamatos fejlődését és támogatását.

A nyílt forráskódú természet és a nagy, aktív közösség miatt a Node.js folyamatosan fejlődik, és új funkciókkal, optimalizációkkal bővül. A fejlesztők világszerte hozzájárulnak a Node.js kódjához, modulokat fejlesztenek, és megosztják tudásukat a közösség többi tagjával.

Összefoglalás

A Node.js egy rendkívül népszerű és erőteljes eszköz a modern webes és szerveroldali alkalmazások fejlesztéséhez. Kiváló teljesítményt nyújt az aszinkron, nem blokkoló modelljének köszönhetően, és lehetővé teszi a fejlesztők számára, hogy JavaScriptet használjanak mind a szerver, mind a kliens oldalon. A nagy közösség és az ingyenesség pedig még vonzóbbá teszi a Node.js-t, különösen a skálázható, nagy terhelésű alkalmazások fejlesztésében.

1.2. Node.js Telepítése

A Node.js telepítése rendkívül egyszerű és gyorsan elvégezhető. A következő lépéseken keresztül telepíthetjük a Node.js-t különböző operációs rendszereken.

Telepítés Windows-on:

  1. Látogassunk el a Node.js hivatalos weboldalára.
  2. Töltsük le a legfrissebb stabil verziót.
  3. Futtassuk a telepítőt, kövessük az utasításokat, és zárjuk le a telepítési folyamatot.

Telepítés MacOS-on:

  1. Nyissuk meg a terminált.
  2. Telepítsük a Homebrew csomagkezelőt, ha még nincs telepítve:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. A Homebrew segítségével telepítsük a Node.js-t:
brew install node

Telepítés Linux-on (Ubuntu):

  1. Nyissuk meg a terminált.
  2. Frissítsük a csomagkezelő listákat:
sudo apt update
  1. Telepítsük a Node.js-t:
sudo apt install nodejs
  1. Telepítsük a Node Package Manager-t (npm):
sudo apt install npm

1.3. Környezet Beállítása

A telepítés után ellenőrizzük, hogy a Node.js és az npm helyesen települt-e. Ehhez a következő parancsokat használjuk a terminálban vagy parancssorban:

node -v
npm -v

Ezek a parancsok a telepített Node.js és npm verziószámát adják vissza. Például:

8.3.1

Példák

1.4. "Hello, World!" Példa

A Node.js használatának megismeréséhez készítsünk el egy egyszerű "Hello, World!" alkalmazást.

  1. Hozzunk létre egy új fájlt, például app.js néven.
  2. Írjuk be a következő kódot a fájlba:
// app.js
console.log('Hello, World!');
  1. Mentsük el a fájlt, majd futtassuk a következő parancsot a terminálban:
node app.js
  1. A terminálban a következő üzenetet kell látnunk:

Ez egy egyszerű példa arra, hogyan futtathatunk JavaScript kódot szerver oldalon a Node.js segítségével.

Feladat

1.5. Feladat: Készítsünk egy egyszerű szervert

A feladatod az, hogy készíts egy egyszerű HTTP szervert, amely a böngészőben megjeleníti a "Hello, Node.js!" üzenetet.

Megoldás

  1. Hozz létre egy új fájlt server.js néven.
  2. Másold be a kódot:
const http = require('http');
const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, Node.js!\n');
});
server.listen(3000, '127.0.0.1', () => {
  console.log('Server is running at http://127.0.0.1:3000/');
});
  1. Futtasd a szervert a következő parancs kiadásával:
node server.js
  1. Nyiss meg egy böngészőt, és írd be a következő URL-t: http://127.0.0.1:3000/. Ha minden jól működik, a következő üzenetet kell látnod:

Ezzel készen is van az első egyszerű Node.js szervered!

Szerver leállítása: ctrl + C 

https://www.w3schools.com/nodejs/nodejs_get_started.asp

Házi feladat: telepítsd otthon a nodejs-t, és próbáld ki az 1.5 példakódot futtasd otthon a saját gépeden.

1 és 2 csop 2024.09.03


PIQPACC keretrendszer azaz ellenőrző lista arra, hogyan használjuk az AI-t kritikus gondolkodással

  P – Purpose / Cél Mit akarok elérni? Pontosan mire kérem az AI-t, és mire nem? I – Information / Információ Milyen adatokra, forrásokra...