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.