2024. március 28., csütörtök

Gyorskeresés

Felhasználói felület PHP sessionnal és Fetch API-val

Írta: | Kulcsszavak: PHP . backend . JavaScript . frontend . Fetch . API . GitHub . Webfejlesztés

[ ÚJ BEJEGYZÉS ]

Az alábbi tutorialban egy olyan felhasználói felületet készítek el, SQL kapcsolat nélkül, ami a PHP sessionjából dolgozik

A "Webalkalmazás" egy egyszerű login felületből áll, majd bejelentkezve az USER PROFIL-t érhetjük el. A felületre jelszó nélkül lehet belépni, a felhasználónév pedig a login felületen beírt név lesz. A backend SQL-hez nem kapcsolódik, szóval a profilok nem "valóságosak", most csak a PHP session működését és a sessionból kinyert adatok frontend oldalon történő megjelenítését szeretném megmutatni.
De nézzük meg képekben, hogy miről is van szó.

Ez a login form. Benne egyetlen input mezővel. Ide bármit beírhatunk, a login gomb megnyomásakor ez lesz a felhasználónevünk. A gyors instant user létrehozás érdekében az inputmező alapértelmezett értéke a Guest + 4 jegyű szám.

Ha a login gombra kattintottunk, a frontendünk elküldi a backend szervernek az input mezőben található nevet. Az generál egy session fájlt és egy session_id-t (minden loginhoz külön fájlt hoz létre a PHP a session_id lesz a fájl neve), amit visszaküld a frontendünk részére.A frontend lementi a kapott session-id-t egy sütibe, amivel később is hozzá tud férni a PHP session fájljában található információhoz, azáltal, hogy a session_id-t kiolvassa a sütiből, majd visszaküldi a szervernek, az megnyitja a sessionfájlt, majd a benne található adatokat visszaküldi a frontendnek.
Mi található ebben a session fájlban? Session fájlba bármit belelehet rakni. Általában a felhasználóhoz kapcsolódó dolgokat tesszük ide. Én most ebben a kis teszt kódban minden létrehozott user fájljába belerakom az aktuális login idejét, a felhasználó nevét és egy teszt értéket, ami most az egyszerűség kedvéért minden fájlban ugyan az.

Az USER PROFILE gombra kattintva történik az, amit fent már leírtam. A frontend visszaküldi a frontenden található sütiben található session_id-t, az megnyitja az id-nek megfelelő session fájlt, majd betölti őket a PHP. Ezt tömbökbe írja, majd JSON formátumban küldi vissza a frontend részére, ami ezután kiírja a kapott adatokat.(ActualSessionID, SessionTime, SessionUserName és egy SessionValue. De nagyon sok minden mást is be lehet ide pakolni)
A logout gombra kattintva a frontend törli a helyben eltárolt session sütit, majd visszatölti az első képen is látható inputmezős login felületet.

BACKEND
A backendünk első fájlja az Index.php

A PHP sessionba értékeket felvenni $_SESSION[kulcsnév] = "kulcsérték"; kódsorokkal lehet a session_start(); sor beírása után.
Ezt teszi az index.php is, ami tulajdonképpen a frontend session generátora. Ez a fájl kapja meg a frontendtől a felhasználónevet, amit a felhasználó a login inputmezőbe ír a login gombra történő kattintás előtt.
Ha $_POST["Uname"] létezik, azaz kapott egy POST értéket az index.php fájl, akkor azt berakja a sessionba $_SESSION["SessionUname"] néven.
Létrehoz még egy $_SESSION["SessionTime"]-t és egy $_SESSION["SessionValue"]-t is, amit belerak a $data tömbbe, majd ezt JSON formátumban kiír. Ezzel fog dolgozni a Fetch API a frontenden.

A backend második fájlja az opensession.php

Ha a backend-el azonos domainen létezik a PHPSESSID nevű süti, akkor elindítja az ahhoz tartozó session fájlt, majd a $_SESSION[kulcsnév] alapján tömbbe rakja és kiírja JSON formátumban. Ez akkor használható, ha a frontend és a backend is egy domain alatt üzemel, egy tárhelyen van, stb
A második eset, ha az opensession.php kap egy $_POST['sessionID'] értéket POST metódusban. (Ez a rész fut le akkor, ha Fetch API-val nyúlunk hozzá a sessionhoz egy külső frontendről)
Ha megkapta a $_POST['sessionID']-t akkor azt beteszi a változóba és azt a változót a session_id parancs zárójelei közé rakjuk, akkor az aszerinti session fog startonlni a session_start() parancs után.
Innentől kezdve ugyan úgy a tömbbe rakás, majd JSON-ben történő kiíratás történik.
Ha a feltételek nem teljesülnek, akkor egy rakat "Failed" string kerül a tömbbe.

FRONTEND
Index.html

Semmi extra nincs benne. Egy message id-vel ellátott div figyel benne, ami üres. A Javascript fogja feltölteni.

App.Js

...
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(";").shift();
}
...

Ezzel a funkcióval tudjuk ellenőrizni a sütiket a bemeneten átadott név szerint. Elsőkörben ezt arra használjuk fel, hogy ellenőrizzük, hogy létezik e az "endpointsession" süti. Ebben a nevű sütiben lesz tárolva a backend szervertől kapott session_id kódja, amit POST metódusban visszaküldve megkaphatjuk a PHP session adatait (Azaz a felvett SessionTime-ot, SessuonUname-t és SessionValute-t)

...
function init() {
if (actualSessionIDCookieContent !== undefined) {
querySessionDatas();
} else {
sessionDoesNotExist();
}
}
...

Az init funkció a lap betöltésekor azonnal lefut. Ha a actualSessionIDCookieContent változó értéke (ami getCookie("endpointsession")) undefined, akkor a sessionDoesNotExist() funkció (függvény) fut le, ha nem (tehát létezik az endpointsession süti), akkor a querySessionDatas() fut le.

...
function sessionDoesNotExist() {
let guestSuffix = getRandom(1000, 6000);
message.innerHTML = `LOGIN FORM
<p>YOUR NAME <input type="text" name="nameInput" id="nameInput" value="Guest${guestSuffix}"/></p>
<p><button onclick="generateSession();">LOGIN</button></p>`;
}
...

sessionDoesNotExist(): Ez töltődik be, az init funkció által, ha a nincs session sütink. Ez generál a message.innerHTML-be egy login formot, benne Guest felitattal, illetve egy GuestSuffixet 1000 és 6000 közötti random értékkel.

...
function querySessionDatas() {
actualSessionIDCookieContent = getCookie("endpointsession");

let formData = new FormData();
formData.append("sessionID", actualSessionIDCookieContent);

fetch(openSessionEndpoint, { method: "POST", mode: "cors", body: formData })
.then((response) => response.json())
.then(function (phpsessiondata) {
if (phpsessiondata.DataQuery === "Failed") {
message.innerHTML = `Session is invalid! <p><button onclick="logOut();">LOGOUT</button></p>`;
//logOut()
} else {
message.innerHTML =
` <p>ActualSessionID is " ${phpsessiondata.ActualSessionID} "</p>
<p>SessionTime is " ${phpsessiondata.SessionTime} "</p>
<p>SessionUserName is " ${phpsessiondata.SessionUserName} "</p>
<p>SessionValue is " ${phpsessiondata.SessionValue} "</p>
<p><button onclick="logOut();">LOGOUT</button></p>`;
}
});
}
...

querySessionDatas(): Ez töltődik be az init funkció által, ha nem undefined a session süti, azaz létezik.
Az előző posztban is bemutatott FormData() interfész objektum segítségével elküldjük a szervernek a létező session sütink értékét. A szintén az előző posztban már bemutatott Fetch API-n keresztül.
Ha létezik a session, akkor a PHP opensession.php fájlja által megkapjuk az ActualSessionID-t, a SessionTime-t, a SessuioUserName-t és a SessionValue-t, amit betölt a message div innerHTML-jébe. Ha nem létezik a szerveren az adott session fájl, mert már törölték, akkor a Session is invalid! felirat töltődik be egy LOGOUT gomb kíséretében, de egyből betöltődhetne a logout() funkció is, amiről a későbbiekben írom le, hogy mit csinál.

...
function generateSession() {
let nameInputValue = document.querySelector("#nameInput").value;
let nameData = new FormData();
nameData.append("Uname", nameInputValue);

fetch(getSessionEndpoint, { method: "POST", mode: "cors", body: nameData })
.then((response) => response.json())
.then(function (data) {
console.log(data.SessionID);
document.cookie = "endpointsession=" + data.SessionID + "; path=/";
message.innerHTML = `We got session_id : ${data.SessionID}
<p><button onclick="querySessionDatas();">USER PROFILE</button></p>`;
});
}
...

generateSession(): Ez a funkció fut le, a login gombra történő kattintáskor. Az input mező értékét veszi fel FormData() objektumba és a Fetch API body option részében POST metódusban küldi el a szerver részére, ami nekünk ezért cserébe egy PHP session_id-t szolgáltat vissza nekünk, amit rögtön belerakhatunk az endpointsession sütibe (de bármi más is lehetne a neve)

...
function logOut() {
document.cookie =
"endpointsession=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
sessionDoesNotExist();
}
...

logOut(): Ez a funkció törli a session sütinket. Majd a sessionDoesNotExist() funkciót hívja, amiről fent már leírtam, hogy a LOGIN oldalt tölti be (első kép).

A használható DEMO itt érhető el.
A BACKEND fájljai, pedig ITT

Ha érdekel a Webfejlesztés, akkor gyere a Webfejlesztés Tanulószoba csoportba.
Látogass el a JavaScriptHungary csoportba is.

Ha kérdésed van a cikket illetően, valamit nem tudsz megfelelően értelmezni az írásom alapján, akkor tedd fel nyugodtan kérdéseid a hozzászólásban.

Copyright © 2000-2024 PROHARDVER Informatikai Kft.