Ingatlanos feladat Bootstrap-el

 Források és feladat leírása: 

https://github.com/latiza/IngatlanBootstrap

Beolvasás adatbázisból, megjelenítés a böngészőben

 Célszerű index.php nevet adni a fájlnak, ami a kezdő oldalunk, mert ha nem adjuk meg a mappán belül melyik fájlt olvassa be a böngésző, automatikusan az indexet keresi.

<?php

Első lépésként érdemes azonnal a kapcsolati oldalt behúzni:

require("kapcsolat.php");

Használhatjuk az inculde-ot is, de hiba esetén, igaz warning jelzést küld vissza, de attól még minden más megjelenít, a requrie viszont nem engedi lefutni, és mivel ez egy adatbázis alapú oldal és adatbázis kapcsolat nélkül nincs értelme, ezért jobb ha ezt használjuk a kapcsolathoz.

Viszont ha modulokat készítünk (pl: naptár, vagy szavazó fül), vagy cms rendszert készítünk, akkor includ-al a lehalt modul nélkül is vígan tovább dolgozik a php értelmező és nincs probléma belőle.

Tehát ez dönti el, hogy include-ot vagy require-t használjunk inkább.

Űrlap kereső mező:

·       conditional vagy más néven ternary operátor használata;

·       a % az sql joker karatere, ami előtt bármi lehet, ami mögött bármi lehet, szótördékkel is tudunk keresni;

·       '%{$kifejezes}%' ezzel a megadással, ezt megadhatjuk minden sorra miben keressen, névben, cégnévben, mobilszámban, e-mailben.

Ha csak egy táblából kell beolvasnunk, akkor elég csak azt az egyet megadni. A csillaggal minden oszlopot ki tudunk szelektálni a táblából, érdemes ezt használni, mivel kisebb a hiba lehetőség, hogy nem írjuk el az oszlop neveket.

$kifejezes = (isset($_POST['kifejezes'])) ? $_POST['kifejezes'] : "";

$sql = "SELECT *

                        FROM tábla neved, ha egyből kell beolvasni

                        WHERE (

                                   nev LIKE '%{$kifejezes}%'

                                   OR cegnev LIKE '%{$kifejezes}%'

                                   OR mobil LIKE '%{$kifejezes}%'

                                   OR email LIKE '%{$kifejezes}%'

                        )

                        ORDER BY nev ASC"; //felveszünk egy sql változót

$eredmeny = mysqli_query($dbconn, $sql);

Mindenképpen érdemes soronként elválasztani, ami csak abból a szempontból érdekes, nehogy valami kimaradjon. Írhatjuk egy sorba is, de úgy nem tűnik annyira fel, ha lemarad egy % jel. Ennek még továbbra sincs kimenete, viszont itt készül egy lekérés, készül egy eredmény, amit beteszünk egy eredmény nevű változóba

$kimenet = "";

/**

 * mysqli_fetch -ebből többféle is van

 * meghatározhatom, hogy a visszatérő adataim az adatbázisból milyenfajta elrendezéssel készüljenek el:

 * pl ha az eredmény az egy zsák krumpli, és ha abból csinálunk egy fetch_array-t az egy tömb, ami lehet egy indexelt tömb, vagy egy asszociatív tömb, tehát vagy egy oszlopszámmal hivatkozok rá, hogy 0-ik, első vagy második oszlop, vagy pedig egy cimkével, ami azt jelenti,hogy név, cégnév, email vagy telefon. Ha az array-t használjuk, az legyártja mindkétfajta tömböt, az indexelt tömböt is és az asszociatív tömböt is.

 * Viszont ha nem szeretnénk dupla annyi adatot, ezért vagy az assoc-al társításos tömböt, vagy a row-al sima indexelt tömböt, a field-el pl mezőneveket lehetne lekérni, de arra most nincs szükség. 

 * Tehát ha leírjuk, hogy fetch_assoc és kitesszük a zárójeleket kiírja mire van szüksége, méghozzá a mysqli eredményére ezért beküldjük neki:   még ennek sincs eredménye így betesszük egy sor nevű változóba, de még ezzel a sorral sem nagyon tudunk mit kezdeni,

 * ha ki akarnánk íratni, akkor a print $sor['mobil']; paranccsal tudnánk egy egy sort kiírtani. Ezzel a tömbben lévő egy adat kiírható.

* $sor = mysqli_fetch_assoc($eredmény);

 * print_r($sor);

*  a print r -el tömb nézetet kérhetünk, és ezzel megnézhetjük, hogy adatot amit kapunk, hogy néz ki a valóságban;

 * ctrl + u = megjeleníti a forrást egy új oldalon

* $sor = mysqli_fetch_row($eredmény);

 * print_r($sor);

*  és ctr+u egészen más eredményt fog adni, érdemes az array-el is kipróbálni,amivel látható, hogy ebben az esetben megvan az indexelt és asszociatív változat is, ahol gyakorlatilag kétszer annyi adatmennyiség jön le a szerverről. Tehát ha csak az assocot használjuk akkor csak a neves oszlopnevek jönnek le. * */

while ($sor = mysqli_fetch_assoc($eredmeny)) {

            /** a html-ből bele másolhatjuk a kimenetbe a kódot, csak az idézőjeleket le kell védeni, és némiképp kiegészíteni a kódot a $sor-al.

             * Mivel nem egy db adatunk van az adatbázisban, hanem több, ezért lesz szükségünk egy előltesztelős ciklusra, ami azt jelenti, hogy ha egy feltétel teljesül,  akkor a mögötte lévő utasításblokk ismétlődik. Ezért a while (feltétel) előltesztelős ciklust használjuk. Ami azt jelenti, hogy amíg én sorokat tudok készíteni a rendszerből, addig a göndör zárójel közötti utasításblokk fog végrehajtódni, gyakorlatilag ez fog ismételgetődni. Ha a $kimenet = elé nem teszünk egy pontot, akkor csak az utolsó adatsort fogja megjeleníteni, a többit lenyeli, ahogy a while ismétlődik és csak az utolsó marad benne a rendszerben. Azért, hogy ne ez történjen nem egyenlőség, hanem hozzáfűzés kell, hogy történjen. Viszont a php nem szereti ha egy változót nem deklarálunk, csak hozzá fűzzük a nem létezőhöz, ezért a while ciklus előtt deklarálni kell. Megcsinálja a névjegyeket, csak hibát dobna ki enélkül, hogy undefinied variable, azaz nem létező változó.

             * Így néz ki egy szerver oldali megoldás, amit akár sablonként is lehet használni. */

            $kimenet.= "<article>

                        <h2>{$sor['nev']}</h2>

                        <h3>{$sor['cegnev']}</h3>

                        <p>Mobil: <a href=\"tel:{$sor['mobil']}\">{$sor['mobil']}</a></p>

                        <p>E-mail: <a href=\"mailto:{$sor['email']}\">{$sor['email']}</a></p>

            </article>\n";

}

?><!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Oldal neve</title>

<link href="stilus.css" rel="stylesheet">

</head>

<body>

<h1>Oldal neve</h1>

<!--kereső form, a post method láthatatlan módon küldi el az adatokat, a bodyban küldi az adatokat, nem mint a get ami az urlben küldi az adatokat

az action a saját magát lehívó rész-->

<form method="post" action="">

<!-- a search kereső mező, ami enterrel aktiválható, tehát nem kell elküldő gomb, csak egy enter, másrészt szemantikusan jelzi, hogy ez egy kereső mező, ami a html5 újdonsága szintén, azok a bönészők, amik ezt nem ismerik, text típusúra butítják vissza, és ugyanúgy használható marad

kell adni neki egy id -t és a régebbi böngészők kedvéért egy name attribútumot is, ha nem adjuk meg a name-t akkor is működni fog-->

            <input type="search" id="kifejezes" name="kifejezes">

</form><div class="container">

<?php print $kimenet; ?>

</div>

</body>

</html>

Filmkereső oldal

 Nyisd meg a https://www.omdbapi.com/ oldalt. Amint láthatod szükség van saját kulcsra, próbálj meg kérni: https://www.omdbapi.com/apikey.aspx 

Készíts egy egyszerű weboldalt, ahol a kereső mezőbe be lehet írni egy film címét, és az oldalon megjelennek azok a filmek, amelyek nevében szerepel a keresett szöveg.  A feladatot ajax kéréssel, majd fetch() -el oldjuk meg.

Hozz létre egy mappát a saját neveddel. 

A mappán belül készíts egy html és egy js fájlt. Az elrendezéshez használhatsz bootstrapet, vagy flexboxot, vagy css gridet media queryvel, 

Ajax kéréssel, kérd le az adatokat a https://picsum.photos/v2/list oldalról. 

Vizsgáld meg a fájl tartalmát. A szerző nevét hármas szintű címsorba jelenítsd meg a kép fölött középen. 

Nagy képernyő esetén 4 oszlopban jelenjenek meg a képek, tableten 3 oszlop, mobilon 1 oszlopos legyen a nézet. 

A képekhez add hozzá az img-fluid osztályt. 

 Készítsd el az alábbi oldalt: 

PHP Kapcsolat az adatbázissal

Véleményem szerint érdemes külön fájlba írni: pl. connect.php Ez azért is hasznos, hogy ha több oldalból áll egy weboldalunk, akkor nem kell minden oldalra leírni a kapcsolatot, hanem elég egyetlen sorral behúzni. Így a hibalehetőség is kisebb a kapcsolat létrehozása során, hiszen a connect.php oldalon leteszteljük, létrejött e a kapcsolat.

<?php

header("Content-Type: text/html; charset=utf-8");

Amikor nem szeretnénk az alap HTML vázat beszúrni az oldalunkra, mert pl nincs kimenete, ennél fogva teljesen felesleges, mint itt ez esetben, akkor megadhatjuk az ún. header(); függvényben paraméterként a létrehozandó fájl típusát. Ezt használja leggyakrabban a php, de vannak kivételek, ha pl ajaxot használunk, aminek a kimenetét xml vagy json állítja elő, akkor abban az esetben a fenti sor helyett application/json, vagy text/xml kerül a header függvénybe paraméterként, de sok más típus is lehet, annak megfelelően, mit szeretnénk előállítani.

Ezeket úgy is hívják, hogy mime típusok, pl: application/javascript; video/x-flv; image/jpeg; image/png; image/gif;application/zip csak néhány példa a teljesség igénye nélkül.

A lényege, hogy nem a fájl kiterjesztéséből nézzük meg, hogy ez milyen típusú valójában, hanem gyakorlatilag adunk egy olyan típust. Ezt az apach kiszolgáló is fogja így értelmezni. A karakterkódolást is itt állítjuk be.

Következő a konstansok létrehozása:

define("DBHOST", "localhost");

Ezek konstansok, vagyis nem változók, mivel egy adatbázis lényegében nem változik, (persze megváltozhat valami, de nem a program futása során, pl meg lehet változtatni egy áfa összeget az adatbázisban). A konstansok megadása annyiban különbözik, hogy nem $db_host ként jelöljük, és másként is kell definiálnunk. Tehát a konstansokat így definiáljuk, hogy a define(), ahol meg kell adni, hogy hogyan szeretnénk hívni és mi az értéke. A konstansokat tiszta nagybetűvel szokás írni, de nem kötelező tiszta nagybetűsnek lennie, írhatjuk kicsivel is, de azért, a csupa nagybetűs segít elkülöníteni őket a kódban. Majd utána megadjuk, mennyi az értéke, és ez a localhost. Innentől kezdve a mysql_connect-nek is ezeket a nagybetűs neveket adjuk meg.

define("DBUSER", "root"); //felhasználónév

define("DBPASS", ""); //jelszó ami most nincs, ezért üres sztring

define("DBNAME", "adatbázis neve");

adatbázis neve ITT ADD AZT AMI NEVET ADTÁL!!!!

$dbconn = @mysqli_connect(DBHOST, DBUSER, DBPASS, DBNAME) or die("Hiba az adatbázis csatlakozásakor!");

A mysqli vissza ad egy erőforrás azonosítót, ami azt jelenti, ha megnyitunk egy adatbázis kapcsolati szálat, akkor végig azzal fog dolgozni, ezt itt jelen esetben $dbconn-nak hívjuk és ezt változóként használjuk, nem konstansként, mert ez menet közben értelemszerűen változhat, egy konstans pedig nem íródhat át, majd megírjuk az első lekérdezést:

Biztonság kedvéért így is ellenőrizhetjük a kapcsolat létrejöttét objektum orientáltan:

if ($dbconn->connect_error) {

    die("Sikertelen kapcsolódás: " . $dbconn->connect_error);

  } else {

    echo "Sikeres kapcsolódás.";

  }

mysqli_query($dbconn, "SET NAMES utf8");

Ez gyakorlatilag ugyanaz, mint az előző mysqli link, majd utána a kérés maga. Ezt azt jelenti, hogy itt ez a $dbconn fog szerepelni, utána beállítjuk a karakter készletet, azért, hogy az ékezetek biztosan rendben legyenek, és nem kell kötőjel, hanem egybe van írva. A karakter kódolásnál a HTML-ben van kötőjel, SQL-be nincs. Ha ezt így megadjuk, akkor innentől már a kapcsolat felépült, de még a képernyőn nem fog látszani, mert a php kimenetet nem készít. Miután ez a kapcsolat létre jött, utána kell különböző kéréseket meg írni, és akkor kapunk adatokat.

Azért is érdemes külön fájlba megírni a kapcsolatot, mert egyrészt több fájl fogja használni ugyanezt a kapcsolat beállítást, másrészt ebben vannak az érzékeny adatok, és ahol ezeket használni fogjuk, és ezek a beállítások nem fognak látszani. Tehát ha több fájl van pl 10-20 fájl ami használ ilyen adatbázis kapcsolódást, és megváltozik majd valami értéke, amikor a teszt környezetből áttesszük egy éles környezetbe, akkor elég egy helyen átírni az adatokat és az mindenhol meg fog változni, minden oldalon.

Itt gyakorlatilag annyi fog történni, hogy ezt a fájlt egy másik fájl be fogja szippantani, be fogja hívni.

?>

Promise

 A Promise egy JavaScript objektum, amely az aszinkron műveletek és azok eredményeinek kezelésére szolgál. A Promise a JavaScript egyik alapvető aszinkron koncepciója, és a modern JavaScript fejlesztés során gyakran használják.

A Promise három állapottal rendelkezik:

1.      Pending (folyamatban): Az inicializáció után, de mielőtt befejeződne vagy elutasításra kerülne.

2.      Fulfilled (teljesült): Amikor a Promise sikeresen befejeződött, és egy értéket adott vissza (ez az érték lehet bármilyen JavaScript objektum).

3.      Rejected (elutasítva): Amikor a Promise nem sikerült, és egy hibaüzenetet vagy hibára utaló objektumot adott vissza.

A Promise objektum az alábbi módon hozható létre:

const myPromise = new Promise((resolve, reject) => {

    /* Aszinkron műveletek, például hálózati kérés, fájlolvasás, stb.

     Sikeres befejezés esetén*/

    resolve('Sikeres eredmény');

    /* Sikertelen befejezés esetén

    reject('Hiba történt');*/

});

myPromise

    .then((result) => {

        // A Promise teljesült (sikeres befejezés)

        console.log(result);

    })

    .catch((error) => {

        // A Promise elutasítva (hiba történt)

        console.error(error);

    });

A .then metódus egy függvényt vár, amely akkor hívódik meg, amikor a Promise teljesül. A catch metódus pedig egy olyan függvényt vár, amely akkor hívódik meg, amikor a Promise elutasítva lett.

fetch()

A fetch egy modern API az aszinkron hálózati kérésekhez a böngészőkben. Segítségével HTTP kéréseket lehet küldeni és válaszokat lehet fogadni.

Url beállítása, beállíthatjuk a header infókat. A fetch első paramétere a célszerver URL-je. A második paraméter egy opcionális beállításokat tartalmazó objektum, például a kérést beállító fejlécek.

fetch(url, {

    headers: {

        "Accept": "application/json"

    }

})

A fetch aszinkron függvény, tehát a hívás után a kód folytatódik anélkül, hogy megvárná a választ. A then metódusok segítségével a választ feldolgozhatjuk. Az első then a HTTP választ adja vissza, a második pedig a választ feldolgozza.

fetch(url, { headers: { "Accept": "application/json" } })

    .then(response => response.json())

    .then(data => console.log(data))

    .catch(error => console.error('Hiba történt:', error));

Mivel az API-k gyakran JSON formátumban küldik a választ, a json metódust használhatjuk a válasz JSON parse-olásához.

Az első then után az response.json() hívással a választ JSON formátumban konvertálja, és a második then blokkban már a JSON objektummal dolgozhatunk.

.then(response => response.json())

.then(data => console.log(data))

A hibák kezelésére a catch metódust használhatjuk. Ez elkapja az összes hibát, amely a láncban bármelyik ponton történhet.

.catch(error => console.error('Hiba történt:', error));

Feladat:

Olvass be vicceket a következő két URL-ből:

https://icanhazdadjoke.com/

https://api.chucknorris.io/jokes/random

Generálj egy random számot, ami ha 50-nél nagyobb akkor a DadJoke-ról válasszon egy viccet, ha kisebb a Chuck Norris viccek közül dobjon egyet.

 

Callback, szinkron, aszinkron

A callback függvények olyan függvények, amelyek argumentumába egy másik függvény adunk meg, amit azután a külső függvényben meghívunk valamilyen műveletnek végrehajtására. Vannak szinkron és aszinkron callback függvények.

Szinkron amikor az utasításod azt mondja a számítógépnek, hogy ameddig az egyik utasítás le nem futott, addig más utasítások szépen várakozzanak sorukra. 

Aszinkronnak amikor az utasításod azt mondja a számítógépnek, hogy ameddig az aszinkron utasítás le nem fut, addig más utasítások is fussanak csak szépen párhuzamosan. 

Weboldal betöltése ajax kéréssel

 Hozz létre egy HTML oldalt, amelyhez csatolj Bootstrap css linket. 

A HTML dokumentumhoz adj hozzá egy Boostrap konténert és azon belül egy Bootstrap sort, hogyha beolvasod az adatokat, akkor be tudd állítani, az oszlopokat, hogy lg képernyő méretben 3 oszlopban jelenjenek meg a képek, md képernyő méretben 2 oszlopban, és sm méretben pedig egy oszlopban egymás alatt. 

Csatolj a HTML oldalhoz egy javascript fájlt, amelyben ajax kéréssel kérd le a termékeket a következő weboldalról: https://dummyjson.com/products

A termékek adatai közül a title és a thumbnail kulcsokhoz tartozó adatokat kérd le csak. 

A weboldalad megjelenése a következő legyen:

12 évfolyam részére : Csokishop backend elérhetősége

Mivel a NodeJs és a Json szerver telepítéssel a 105-ös teremben gondok akadtak, és a 201-esben sem működött minden gépen, elkészítettem a feladat backendjét PHP-ben, amihez a feladat a script.js megírása lesz.  (PHP és backend csak a jövő évi tananyagotokban lesz, ezért kapjátok készen) 

Link: https://github.com/latiza/CsokishopBackend

A munkához a XAMPP-ot fogjuk használni. Ezért a Xampp mappa, htdocs nevű mappájába kell bemásolni a fájlokat, egy pl. csokishop nevű mappába. 

GRID GALÉRIA - Media query

 Készítsd el az alábbi weboldalt CSS GRID-el:

Az oldal szélessége 80% legyen. 

A képek ne lógjanak ki a rácscellából.

Írj két média lekérdezést, az egyikben definiáld, hogy ha az oldal szélessége kisebb mint 800px, akkor a képek 2 oszlopban jelenjenek meg, a másikban ha az oldal szélessége kisebb mint 600px, a képek egymás alatt jelenjenek meg.

CSS GRID

 CSS GRID ismétlés feladat

Készítsd el az itt látható layoutot css grid használatával.

 

A háttér színe radial gradient fekete és fehér.

A tartalom szélessége: 900px, és 600px magas, 20px paddinget állíts be.

A fejléc radial gradient, lila fehér színátmenetes megadással készüljön.

Sidebar színe: 203deg, #152844 0%, #295aa4 90%

Contentek színe: 130deg, #6C52D9 0%, #1EAAFC 85%, #3EDFD7 100%

Footer színe: 160deg, #6C52D9 0%, #0d0d0e 127%

Segítség a megoldáshoz: https://css-tricks.com/snippets/css/complete-guide-grid/

API Application Programming Interface

 Az API az angol „application programming interface” kifejezés rövidítése, ami magyarul „alkalmazásprogramozási felületet” jelent. Az API-k a szoftverfejlesztők munkáját hivatottak megkönnyíteni azzal, hogy hozzáférést biztosítanak egy adott szoftver vagy eszköz utasításkészletéhez.

Az API olyan, mint amikor össze akarsz rakni egy új gépet. Tud az alkotóelemek nevét, és van hozzá leírás is, hogy pl intel proci, ssd stb. Tudod mire jó, mit tud, de azt nem kell tudnod, mennyi réz kell a legyártáshoz.

Ha választasz egy utasítást az API-ból, akkor nem kell tudnod, hogy pontosan mi történik a színfalak mögött – például hogy egy Android telefon hogyan jelenít meg egy üzenetet a képernyőn – csak a megfelelő parancsot kell kiválasztania az API-ból, ami elvégzi ezt helyette.

Az API-k rengeteg időt spórolnak meg a programozók számára, hiszen elég csak megadniuk a parancsokat, és a munka nagy részét az a platform végzi majd, amire éppen fejlesztenek. Mindez a forráskódot is átláthatóbbá teszi, és így egy azonos platformra készült több alkalmazás is hasonló utasításkészlettel rendelkezik majd, ami megkönnyítheti a hibaelhárítást.

Tegyük fel, hogy egy alkalmazást akarsz írni Android telóra. Az Androidhoz rengeteg API érhető el, mint ahogy az összes többi mobilos és számítógépes operációs rendszerhez is (Windows, iOS, stb.)

Ha szeretnéd, hogy az alkalmazásod képes legyen használni a készülék fényképezőjét, akkor nem kell külön írnod egy programot csak ezért, mert használhatod az Android kameravezérlő API-ját. Ugyan így elhelyezhetsz alkalmazásodban egy böngészőt is, és temérdek más funkciót, illetve eszközt, amit az Android támogat.

API-k nélkül sokkal tovább tartana elkészíteni még a legegyszerűbb mobilalkalmazásokat és számítógépes szoftvereket is, mert a programozóknak saját maguktól kellene olyan programkódokat írniuk, amelyek tökéletesen képesek kommunikálni az adott platform szoftveres és hardveres alkotóelemeivel.

Egy másik előny, hogy valahányszor a platform tulajdonosa frissíti az API-t (például kijavít egy hibát, vagy hatékonyabbá teszi egy parancs működését), akkor minden olyan alkalmazás frissül ezekkel a változtatásokkal, amik az adott API-val lettek elkészítve.

Az API-kat arra is szokás használni, hogy egy alkalmazás hozzáférhessünk olyan hardveres és szoftveres funkciókhoz, amikre egyébként nem lennénk jogosult. Az API-knak éppen ezért fontos szerepük lehet a biztonságban.

Például amikor egy webhelyet meglátogatva megjelenik az üzenet, hogy a webhely szeretné látni a pontos tartózkodási helyedet, akkor a webhely hozzáférési engedélyt kér tőled a helymeghatározási API használatához böngésződben. A web böngészők azért teszik elérhetővé ezt az API-t a fejlesztők számára, hogy azok könnyedén hozzáférhessenek tartózkodási helyedhez – persze csak ha erre engedélyt adsz. Ha megadod az engedélyt, akkor a böngésző alkalmazás a GPS vagy valamilyen más helymeghatározási módszer segítségével megkeresi, hogy hol vagy, és jelenti ezt a webhelynek.

Az Android használók gyakran találkozhatnak ilyen jellegű üzenetekkel egy újonnan telepített alkalmazás használatakor, például amikor egy applikáció hozzáférést kér a kamera használatához (Instagram), vagy a tárhely eléréséhez (ha fényképet szeretnél feltölteni telefonodról a Facebookra) és így tovább.

Az számítógépes operációs rendszerek is rengeteg API-t használnak, többek között a fájlengedélyek kezelésére is. Egy adott szoftvernek nincs közvetlen hozzáférése a merevlemezen tárolt adatokhoz – kizárólag egy API-n keresztül olvashatja, módosíthatja, vagy törölheti azokat.

Az API-k azonban még ennél is több mindenre használhatók. Ha például láttál már Google Térképet beágyazva egy weboldalon, akkor az az oldal a Google Térkép API-t használja, hogy megjelenítse az adott térképet. Az ilyen API-kat a Google teszi elérhetővé a web fejlesztők számára, akik így könnyedén elhelyezhetnek összetettebb elemeket is webhelyükön ahelyett, hogy valamilyen félmegoldással csapnának rá például egy térképet az egyik oldalra.

Ez biztosítja azt is, hogy ha a Google frissíti az API-t, az összes térképet megjelenítő webhelyen érvénye lépnek a változások.

Számtalan online szolgáltatás és eszköz üzemeltetője kínál API-kat ezek eléréséhez, Így lehet például fordítást kérni a Google Fordítótól, vagy beágyazni egy interaktív Twitter tweetet egy webhelyre.

Az OAuth szabvány például lehetővé teszi, hogy különféle szolgáltatások fiókjaival lépj be más szolgáltatások webhelyére anélkül, hogy ott külön fiókot kellene létrehoznod. Ezért van az, hogy sok helyen látod a „Bejelentkezés Facebookkal” vagy „Bejelentkezés Google-lal” lehetőségeket.

AJAX - Az Ajax (Asynchronous JavaScript and XML) interaktív web alkalmazások létrehozására szolgáló web fejlesztési technika. A weblap kis mennyiségű adatot cserél a szerverrel a háttérben, így a lapot nem kell újratölteni minden egyes alkalommal, amikor a felhasználó módosít valamit. Ez növeli a honlap interaktivitását, sebességét és használhatóságát. (maga a kifejezés 2005-ben született, Jesse James Garett használta először)

A legnyilvánvalóbb ok az Ajax használatára a felhasználói élmény fokozása. Amikor egy linkre kattintás hatására a teljes weboldal újratöltődik, az sokszor időigényes művelet. Az Ajaxot használó oldalak e helyett képesek rá, hogy csak az oldal szükséges részét frissítsék, így gyorsabb reagálást biztosítanak a felhasználói interakciókra. Néhányan úgy gondolják, hogy az Ajax lesz az a feltörekvő technológia, amelynek segítségével a jövőben a webes alkalmazások minden eddiginél interaktívabbá és így széles körben is sokkal népszerűbbé válhatnak.

Az Ajax kérések is azon műveletek közé tartoznak, amelyek nem blokkolják, a szinkron futást nem blokkolják a stacket, hanem a böngésző stack társával párhuzamosan hajtja végre ezt a műveletet és a szerver válasza után futtat további elemeket, amennyiben szinkron működés véget ért. Erre azért van ilyen formában szükség, mert egy ilyen szerver oldali kérés az sok ideig tart, több százmillió miliszekundumig is akár, és addig nem blokkolhatjuk a szinkron futását a kódnak.

Az onreadyStateChange ez mindig lefut akkor amikor a kérésed életciklusában valami változás történik.

Összesen négyen ilyen életciklusa van egy ilyen kérésnek,

https://developer.mozilla.org/hu/docs/Web/API/XMLHttpRequest

XMLHttpRequest.readyState

A kérelem állapotát jelző előjel nélküli számmal tér vissza, amely lehet:

0 - ha a kérés nem inicializált

1 - ha a kapcsolat létrejött a szerverrel

2 - ha a kérés fogadva

3 - ha a kérés feldolgozása folyamatban

4 - ha a kérés kész, válasz kész

 

https://reqres.in/ ez egy ingyenes tesztelő oldal, amit szólongattunk a feladatunkban, és ennek az api-ját fogjuk felhasználni, ahhoz, hogy adathoz jussunk.

Ez egy javatomcat apache szerver, ami ajax kérésekre ad választ nekünk, gyakorlatilag egy adatbázis szerver, ami tök üres adatbázisokat tartalmaz, amiket a kódba beillesztve, az oldalon található funkciókat le tesztelni a fejlesztett oldalunkon. Tehát nagy kimenetele nem lesz, és arra jó, hogy eleve le lehet tesztelni a kódunkat, hogy szintaxisában jó, és ha jól működik, akkor lehet az éles rendszerre ráengedni, amiben valós adatok is lehetnek, így nem tudunk kárt tenni az adatokban.

Ha megnyitod a tesztelő oldalt a böngészőben láthatod, hogy REST API, a REST (Representational State Transfer) egy szoftverarchitektúra típus, elosztott kapcsolat (loose coupling), nagy, internet alapú rendszerek számára, amilyen például a világháló. A Representational State Transfer kifejezést Roy Fielding vezette be és definiálta 2000-ben a doktori disszertációjában. Fielding egyike a HTTP (HyperText Transfer Protocol) specifikáció szerkesztőinek.

Egy REST típusú architektúra kliensekből és szerverekből áll. A kliensek kéréseket indítanak a szerverek felé; a szerverek kéréseket dolgoznak fel és a megfelelő választ küldik vissza. A kérések és a válaszok erőforrás-reprezentációk szállítása köré épülnek. Az erőforrás lényegében bármilyen koherens(pl ajax kérés, vagy egy php modulus, amikor php-be kérdezünk le, attól függően, hogy miben íródik az oldal, ami a kapcsolatot felveszi a szerverrel) és értelmesen címezhető koncepció lehet. Egy erőforrás-reprezentáció általában egy dokumentum, mely rögzíti az erőforrás jelenlegi vagy kívánt állapotát. Vagy java szervert, vagy mysql-t szoktak felállítani, és ezzel oldják meg a különböző adatlekéréseket.

Tehát a REST API lényege, hogy több különböző adatbázis szervert tömbösít, és kapcsol össze mivel az adatbázis kiszolgálók a teljesség igénye nélkül lehet Microsoft IIS – Internet Information Server ms sql támogatással. Az ilyen szervereket általában, ASP (ASP (Application Service Providing) - magyarul alkalmazás-szolgáltatás, vagy alkalmazás-bérlet) környezettel szoktál lekérdezni webesen.

A klasszikus kiszolgáló az apach szerver mysql támogatással és php-vel, és itt értelemszerűen mysql parancsokkal lehet operálni, illetve nagyon jellemzően php-vel íródott web kiszolgálására használatos. Van az előbb említett tomcat appach java szerver, ami ajax kéréseket támogat, és ha mondjuk, az előbb felsoroltakat kötik tömbbe, akkor van egy parancs értelmező algoritmus, és amikor érkezik valamilyen adatbázis lekérés, akkor értelemszerűen ahhoz, a szerverhez fogja továbbítani a csomagot, amelyik ezt tudja értelmezni és meg tudja válaszolni. Pl. egy ajaxot a tomcathez küld, a php-t a mysql-hez küldi stb.

Jellemzően ezek tárhely szolgáltatóknál szoktak lenni, amikor a tárhely szolgáltató valamilyen felületen, pl webes felületen lehetőséget biztosít a felhasználó számára, hogy bármilyen webes fejlesztést készítsen.

Ezek nemcsak adatbázis szerverek, hanem kapcsolt Simple Mail Transport Protocoll – SMPT szolgáltatással is rendelkeznek, amelynek az a lényege, ha pl csinálunk egy weboldalt, amin mondjuk egy regisztrációt kell a felhasználónak tennie, akkor tudjon neki egy mailt küldeni, az általa megadott e-mail címre, hogy erősítse meg a regisztrációját. Vagy pl egy web shopnál a rendelések visszaigazolása e-mailbe. Mailt- küld magyarul. Ahhoz, hogy a mail ne legyen spam szüksége van az adatbázisnak megörökölni a beállított domain nevet. A beállított domain névhez kapcsolódó mx rekord segítségével az smtp –re ülő dovecat-el oldja meg a mail hitelesítését. Magyarul, ha a weboldalunk regisztrált domain neve a pulikutya.hu akkor a hozzá kapcsolódó mail.pulikutya.hu mx rekordhoz hozzá köti az adatbázisból érkező smtp kérést vagyis levelet küld a domain nevünknek megfelelő hitelesítő e-mailcímmel.

Nézzük az oldalon a postot: https://reqres.in/

Ez két útvonalat biztosít, ami számunkra most releváns, ezt a POST (katt az oldalon a post gomb - create mellett) method-dal megszólítható login útvonalat, ahová, ha a body-ban olyan adatokat küldünk, ami itt az Request alatt látható (morpheus, leader) akkor ő egy olyen token-nel, fog válaszolni mint amit a Response alatt láthatunk, ami egy olyan kulcs, amellyel elérhetjük az összes többi erőforrást, tehát hitelesítjük az adatkapcsolatunkat.

A token olyan biztonsági kulcs, ami titkosítja a webes felhasználói accountokhoz szükséges belépéseket és a belépés után történő különböző adatbázis kéréseket, pl regisztráció, vagy weboldal szerkesztő felületének megnyitása.

A token szolgáltatás egy ráépülő modul, ami alapértelmezetten mondjuk egy weblapra belépéshez nem kötelező, de biztonsági szempontból ajánlott szolgáltatási felület.

pl: hogyha készítesz egy keretrendszerrel pl drupal-al egy oldalt, a drupalba és egyúttal az adatbázishoz való hozzáféréshez nincs másra szükség, minthogy beírd a domain nevet/?=user, ami a drupal „white paper”-jében megtalálható. Tehát, ahonnan a drupal webkeretrendszer letölthető és aztán a weboldalunkon telepítettük, egyértelműen leírják, hogy hogyan milyen módon lehet bejelentkezni. Éppen ezért mivel ez bárki számára elérhető információ, így aki a webodalunkat fel akarja törni, nincs más dolga, mint követni a fenti utasítást, beírja az url-t a kapcsolókat és próbálkozik, felhasználó név és jelszó párossal bejelentkezni. A profik erre egy algoritmust használnak, az algoritmus lényege az, hogy egy robot segítségével egy gyűjtő oldalon megtalálható adatbázisból, ahol a leggyakrabban használt 10.000 felhasználó név és jelszó párost végig próbálgatja a rendszerünkön így valószínűleg 2-3 nap alatt sikeresen bejut a weboldalunkra és az ott általunk nem kívánt tartalmakat is megoszthat, mivel a weboldallal az adatbázissal is közvetlenül hozzá fér. Ha a weboldalunkat tokennel látjuk el, akkor a próbálkozások el fognak maradni. Mivel az alapértelmezett belépés nem fog működni, hiszen a szerver várja az alapinformációkat, amire egy tokennel válaszolna, és mivel aki be akar lépni ezt a tokent nem ismeri így nem jut el a bejelentkezési oldalig sem. pl a forpsi alapból ad, ez szerver szinten működik, de be lehet ágyazni a weboldalba is, de oda csak akkor tudjuk beágyazni, ha a szerver erre fel van készítve. De profi szolgáltatók kapásból megadják ezt a lehetőséget kérni sem kell.

Tehát a koncepció az az, hogy védett erőforrásokhoz akarunk hozzá férni, és ehhez előtte meg kell kaparintanunk ezt a tokent. Ha megvan ez a token, akkor ki kell küldenünk egy újabb kérést, ezt a sendrequest functiont kétszer kell tulajdonképpen ilyen módon meghívni és meg kell szólítanunk ezt a list.users (katt az elősre), amiben ilyen felhasználó adatokhoz juthatunk.

A kliensről post methoddal küldünk requestet, a bejelentkezési adatokkal a szerver oldalra. A szerver egy tokennel válaszol, és ezt a tokent hozzá csaphatjuk a header információhoz, de a user útvonal úgy is válaszol ha a tokent nem csapjuk hozzá a header-ekhez, a való életben szokás hozzá csatolni. Ez a users erőforrás fog a felhasználók listájával válaszolni. Tehát ezzel a védett erőforrással. Itt az a fontos az egészben, hogy az első kérésünktől függ a második kérés. Csak akkor tudod megküldeni ezt a get kérést, a users útvonalra, ha már előtte hozzá jutottál a tokenhez.

Alap AJAX hívások

·       A let xhttp = new XMLHttpRequest(); - Új kérés (XMLHttpRequest) objektum létrehozása.

·       A xhttp.onreadystatechange = function() - Ha változik a kérés (XMLHttpRequest) állapota, meghívódik a függvény (function).

·       A xhttp.readyState == 4 - Lezajlott a kérés, és megérkezett a válasz.

·       A xhttp.status == 200 - Létezik a kért objektum (fájl). Ha nem létezik, a status értéke 404 (Page not found).

·       A xhttp.responseText - A válasz szöveges tartalma.

·       A xhttp.open("GET", "aj_01.txt", true); - A kérés összeállítása (metódus, url, aszinkron)

-        metódus: GET vagy POST

-        url: a fájl megadása (útvonallal)

-        aszinkron: true vagy false

·       A xhttp.send(); - A kérés elküldése.

·      

Ha a válaszként kapott szövegben formázó utasítások vannak, feldolgozásra kerülnek megjelenítéskor!

HTML input mező típusok

 

Javascript shorthand megoldások