12C 2024 január 4-5

 Kedves Diákok! A feladat mappában megtaláljátok a csokishopbackend mappát, a tartalmát másoljátok át a xampp mappa htdocs mappájába. Ehhez a feladathoz kell megírni a frontend-et, vagyis javascriptet, teljes CRUD műveletsort, a backend végpontokhoz. 

14 SZN 2024. január 4-5

Az eddig megoldott feladatok alapján készítsétek el egy autókereskedés oldalát. 

Első lépés az adatbázis:

CREATE TABLE IF NOT EXISTS autok (

    id smallint(5) unsigned NOT NULL AUTO_INCREMENT,

    fajta varchar(20) DEFAULT NULL,

    tipus varchar(77) DEFAULT NULL,

    gyartas varchar(60) DEFAULT NULL,

    km varchar(28) DEFAULT NULL,

    ara varchar(13) DEFAULT NULL,

    PRIMARY KEY (id)

);

egészítsd ki plusz egy oszloppal, hogy képet is lehessen feltölteni.

Készíts hozzá lapvédelmet, csak az admin belépés után tudjon adatokat feltölteni. Figyelj a mappa szerkezetére. A Névjegyzékes feladat alapján meg tudod oldani. Teljes CRUD művelet sor szükséges. Lehessen szűrni, keresni az oldalon. 

Nem kell az alábbi mintát követni, csak ötlet:

Jó munkát! Tervezés tekintetében legyetek kreatívak, igyekezzetek igényes weboldalt megvalósítani a felhasználói felületen!

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.

?>