13. Chatify

Telepíts 10-es Laravelt (utána néztem 11-en nem fog működni)

composer create-project laravel/laravel:^10.0 example-app

Lépj be a Pusherbe: https://dashboard.pusher.com/

GitHub regisztrációval könnyen beléphetsz.

Válaszd ki a laravel-chat-development-t, api keys

Hozz létre egy új alkalmazást, és a kapott App Key-t, App Secret-et, és App ID-t másold be a Laravel projekt .env fájljába:

.env:

PUSHER_APP_ID=your_app_id

PUSHER_APP_KEY=your_app_key

PUSHER_APP_SECRET=your_app_secret

PUSHER_APP_CLUSTER=your_cluster

Chatify telepítése

Nyisd meg a hivatalos oldalát: https://chatify.munafio.com/installation

innen ki tudod másolni sorba a parancsokat:

composer require munafio/chatify

php artisan chatify:install

php artisan migrate

Eredmény ellenőrzése
Nyisd meg a böngészőben az alkalmazást:
http://chatify.test/chatify /xampp alatt más lesz a neve, nekem Laragban került futtatásra
Várható hiba: A Chatify-nál login szükséges, mivel a middleware automatikusan védi a felületet.

Laravel Starter Kit telepítése
A Laravel Auth rendszert egyszerűen beállíthatod a következő parancsokkal:

composer require laravel/breeze --dev

php artisan breeze:install

npm install && npm run dev

A telepítés során válaszd a 0 opciót (Blade nézetek), és ne telepíts unit teszteket.

Miután befejeződött, futtasd a következőt az adatbázis frissítésekhez (ez nem változtat a Chatify által létrehozott táblákon):

php artisan migrate

Chatify + Laravel Auth működésének ellenőrzése
Nyisd meg újra az alkalmazást: http://chatify.test/chatify.
Most már be tudsz jelentkezni, és a Chatify felület működni fog.

Tailwind oldal készítése

 

Mi az a Tailwind CSS?

A Tailwind CSS egy utility-first CSS keretrendszer, amely előre definiált osztályokat biztosít az egyes stílusok gyors alkalmazására. Például: text-center, bg-red-500, flex.

Minden stílus egy-egy apró építőelem (utility class), amelyeket kombinálva teljes designt lehet létrehozni. Ahelyett, hogy minden stílust külön CSS fájlba írnánk, a HTML kódon belül alkalmazzuk az osztályokat.

Miért érdemes használni?

Gyors fejlesztés: Az előre definiált osztályokkal az oldal felépítése gyorsabb, mint egyedi CSS írással.

Testreszabhatóság: Könnyen módosítható színek, betűtípusok, méretek, stb.

Kis méret: Csak a használt osztályok kerülnek be az elkészült CSS fájlba (purge CSS).

Tailwind CSS:

<div class="text-center bg-red-500 p-4"></div>

Hogyan működik a Tailwind CSS?

Utility Classes

Minden osztály egy adott CSS tulajdonságot definiál.

Példa:

Színek: text-red-500, bg-blue-200.

Távolságok: m-4 (margin), p-2 (padding).

Példa HTML-ben

<div class="text-center bg-blue-500 text-white p-4 rounded-lg">

  Tailwind példaszöveg

</div>

Tailwind működési folyamata

A Tailwind CSS több ezer utility osztályt biztosít alapértelmezés szerint. Ezeket a projekthez szükséges stílusokhoz használjuk. A végleges CSS fájl csak a ténylegesen használt osztályokat tartalmazza (Purge CSS).

Tailwind CSS támogatja a reszponzív design-t breakpoint prefixekkel:

sm: (kisebb képernyők).

md:, lg:, xl: (nagyobb képernyők).

Példa:

<div class="bg-blue-500 md:bg-green-500 lg:bg-red-500">

  Reszponzív háttérszín

</div>

Állapotok (Pseudo Classes)

Tailwind támogatja az interakciós állapotokat:

Hover: hover:.

Fókusz: focus:.

Példa:

<button class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4">

  Hover színváltozás

</button>

Alapvető Tailwind CSS Osztályok

Színek

Háttérszínek: bg-blue-500, bg-red-200.

Szövegszínek: text-gray-800, text-white.

Távolságok

Margin: m-4, mx-auto (középre igazítás vízszintesen).

Padding: p-2, py-4.

Méret

Szélesség: w-1/2 (a konténer fele).

Magasság: h-screen (teljes képernyő magasság).

Tailwind Testreszabása

Config Fájl (tailwind.config.js)

Egyedi beállításokhoz testreszabhatjuk a Tailwind CSS-t.

Példa: Egyedi szín hozzáadása

javascript

module.exports = {

  theme: {

    extend: {

      colors: {

        customBlue: '#1E40AF',

      },

    },

  },

};

HTML használat:

<div class="bg-customBlue text-white p-4">

  Egyedi szín

</div>

Tailwind CSS Gyakorlatok

Példák a gyakorlatban

Egyszerű Kártya:

<div class="max-w-sm bg-white shadow-lg rounded-lg p-4">

  <h2 class="text-xl font-bold mb-2">Kártya címe</h2>

  <p class="text-gray-600">Ez egy egyszerű kártya példa.</p>

</div>

Reszponzív Layout Grid-el:

<div class="grid grid-cols-2 gap-4 md:grid-cols-4">

  <div class="bg-blue-500 h-32"></div>

  <div class="bg-green-500 h-32"></div>

  <div class="bg-red-500 h-32"></div>

  <div class="bg-yellow-500 h-32"></div>

</div>

 A következő oldalt fogjuk elkészíteni tailwind css-el:

9B2 Ikt project

 A Python programozási nyelvben a ciklusok arra szolgálnak, hogy egy adott kódrészletet többször végrehajtsunk. Pythonban két fő ciklus típust használnak:

1. Elöl tesztelős ciklus: Az ismétlést addig hajtja végre, amíg a ciklus feltétele igaz.
• Ez a while ciklus.
2. Fixált iterációs ciklus: Egy adott elemlistán vagy számtartományon iterál végig.
• Ez a for ciklus.

Pythonban nincs külön "hátul tesztelős ciklus", de az elöl tesztelős ciklus logikáját egy feltételes ciklussal és break utasítással imitálhatjuk.

---

Elöl tesztelős ciklus (while)

Az while ciklus a megadott feltétel kiértékelésével kezdődik, és amíg a feltétel igaz, a ciklus törzse fut.

Példa:

# Számok összeadása, amíg az összeg el nem éri a 100-at

osszeg = 0

szam = 1

 

while osszeg < 100:

    print(f"Hozzáadva: {szam}, Jelenlegi összeg: {osszeg}")

    osszeg += szam

    szam += 1

 

print("Az összeg elérte a 100-at!")

---

Fixált iterációs ciklus (for)

A for ciklus Pythonban egy iterálható elemek felett hajt végre ismétléseket, például listákon, karakterláncokon, vagy számtartományokon.

Példa:

# 1-től 10-ig terjedő számok négyzeteinek kiírása

for szam in range(1, 11):

    print(f"A(z) {szam} négyzete: {szam ** 2}")

---

Példa:

# Számok bekérése, amíg a felhasználó "stop"-ot nem ír

while True:

    adat = input("Adj meg egy számot (vagy írd be, hogy 'stop'): ")

    if adat.lower() == "stop":

        print("A program véget ért.")

        break

    try:

        szam = int(adat)

        print(f"A megadott szám: {szam}")

    except ValueError:

        print("Nem érvényes szám!")

---

Példa feladatok

1. Számok összeadása egy adott határig
   Készíts egy programot, amely bekéri a felhasználótól az összeadás végét (pl. 50), majd összeadja az 1-től kezdődő számokat, amíg az összeg el nem éri ezt az értéket.
2. Lista elemeinek kiírása
   Írj egy programot, amely egy lista minden elemét kiírja, például:

gyumolcsok = ["alma", "körte", "barack", "szilva"]

3. Játékos találgatás
   Készíts egy egyszerű "kitalálós játékot", amelyben a program generál egy véletlen számot 1 és 100 között, és a felhasználó addig próbálkozik, amíg el nem találja a számot.

4.     Írj egy programot, amely egy számsorozatot generál 1-től kezdve, amíg a sorozat összege el nem éri az 500-at. Minden lépésben írd ki a jelenlegi számot és az aktuális összeget.

5.     Számok átlagának kiszámítása Írj egy programot, amely addig kér be számokat a felhasználótól, amíg az 0-t nem ír be. A program a végén kiírja az összegüket és az átlagukat.

6.     Jelszó kitalálásaKészíts egy programot, amely egy előre meghatározott jelszót vár a felhasználótól. A program addig kér új jelszót, amíg a helyes jelszót be nem írják.

7.     Szám oszthatóságának ellenőrzéseÍrj egy programot, amely bekér egy számot, majd megkeresi az összes számot 1-től a megadott számig, amely osztható 3-mal vagy 5-tel.

8.     Fibonacci-számok generálása Írj egy programot, amely a Fibonacci-sorozat elemeit generálja, amíg az értékek nem haladják meg az 1000-et.

9.     Prímszám kereső Írj egy programot, amely bekér egy számot, és addig generálja a prímszámokat 2-től kezdve, amíg el nem éri a megadott számot.

10.  Számok tippelése A program véletlenszerűen generál egy számot 1 és 50 között. A felhasználónak ki kell találnia a számot. A program visszajelzést ad arról, hogy a tipp nagyobb vagy kisebb, és addig ismétli a kérdést, amíg a felhasználó el nem találja.

11.  Szorzótábla generálása Írj egy programot, amely egy adott szám szorzótábláját írja ki 1-től 10-ig egy while ciklus segítségével.

12.  Kockadobás szimulátorKészíts egy programot, amely véletlenszerű kockadobásokat szimulál, amíg a dobott érték nem lesz 6. Minden dobás után írd ki az eredményt!

13.  Számlista fordított sorrendben Adott egy lista: [1, 2, 3, 4, 5, 6]. Írj egy programot, amely a lista elemeit fordított sorrendben írja ki egy while ciklus segítségével!

Diagram készítése

 Adatbázisból beolvasott adatok:

[

  {

    "year": "1990",

    "produced_water_volume": "1012124",

    "total_supplied_water": "911104",

    "residential_consumption": "579287"

  },

  {

    "year": "1995",

    "produced_water_volume": "795937",

    "total_supplied_water": "661619",

    "residential_consumption": "421389"

  },

---további adatok---

  {

    "year": "2021",

    "produced_water_volume": "638051",

    "total_supplied_water": "461284",

    "residential_consumption": "358159"

  }

]

 

<!DOCTYPE html>

<html lang="hu">

<head>

  <meta charset="UTF-8">

  <title>Chart.js Példa</title>

  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

</head>

<body>

  <canvas id="myChart" width="400" height="200"></canvas>

  <script>

    // JSON adat URL-ed, ahonnan a végpontot lekéred

    const dataUrl = 'http://localhost/2024_2025_php_feladatok/%C3%B6koprojekt%20vizes/water_data.php';

    // Adatok betöltése és diagram létrehozása

    fetch(dataUrl)

      .then(function(response) {

        console.log(response) //url rendben van, válaszra készen

        return response.json();

      })

      .then(function(jsonData) {

        console.log(jsonData); // JSON formátumban lekérdezett adatok  

        // Régi tömb adatai beolvasása egy új tömbbe

        const xValues = jsonData.map(function(item) {

          return item.year;

        }); // Évek

        console.log("Évek: ",xValues) //eltáraltuk az éveket

 

        const yValues = jsonData.map(function(item) {

          return parseInt(item.residential_consumption);

        }); // Lakossági fogyasztás

        console.log("Fogyasztási adatok: ", yValues) // eltároltuk a fogyasztási adatokat

 

        const barColors = ["red", "green", "blue", "orange", "brown"];

        //annyi szín ismétlődik, amennyit megadsz;

 

        const barColorstest = Array.from({ length: xValues.length }, (_, i) =>

          `hsl(${(i * 360) / xValues.length}, 70%, 50%)`

        ); // Automatikusan generált színek

        console.log("Automatikus színek: ", barColorstest)

 

        // Chart.js diagram

        new Chart("myChart", {

          type: "bar",

          data: {

            labels: xValues,

            datasets: [{

              backgroundColor: barColors,

              data: yValues

            }]

          },

          options: {

            legend: { display: false },

            title: {

              display: true,

              text: "Lakossági vízfogyasztás évenként"

            },

            scales: {

              y: {

                beginAtZero: true,

                title: {

                  display: true,

                  text: "Fogyasztás (m³)"

                }

              },

              x: {

                title: {

                  display: true,

                  text: "Év"

                }

              }

            }

          }

        });

      })

      .catch(function(error) {

        console.error('Hiba az adatok betöltése vagy feldolgozása során:', error);

      });

  </script>

</body>

</html>

13B Autószerelő műhely Laravel

Autószerelő oldal: 

- kiegészítve felvitellel

- mondtam hogy a model foglalt név a Laravelben :-) 

https://github.com/latiza/Carmehanics_laravel_app

Űrlap ellenőrzése és az adatok megjelenítése

 Készítsd el az alábbi űrlapot: 

Jelenítsd meg a beküldött adatokat:

12 évfolyamon javascripttel

13-ik évfolyamon PHP-vel

13 C helyettesítés idejére

Teendők:

Interkaktív vizsgára lehet gyakorolni az előző évek feladatlapainak kitöltését: 

https://infojegyzet.hu/vizsgafeladatok/szoftverfejleszto-interaktiv/teszt/

Tech Atival youtube csatorna videóinak megnézését és gyakorlását folytassátok: pl: Ciklusok: https://www.youtube.com/watch?v=zWVWI95qtiQ&t=377s 

Az interaktív vizsga sikerességéhez hozzá járulhat, ha mind az Angular (ezt ismeritek, tavaly tanultuk), mind a React és mind pedig a Vue javascriptes keretrendszerrel ismerkedtek kicsit. A w3scholl-ra felkerült mindhárom keretrendszerhez tutorial, nézzétek át a Vue-t: https://www.w3schools.com/vue/index.php Oldjátok meg a gyakorlatokat, majd pedig a kvízt. 

Készítsetek regisztrációs űrlapot, és oldjátok meg a feldolgozását, az alapján amit mutattam.

12 B. Web: Base64 dekódolás (atob, btoa); Ikt Projekt: Modern titkosítási algoritmusok

Webes feladat: Nézzük, hogy tudnál majdnem titkos írással üzit küldeni, ami persze csak addig titkos, amíg olyan kezébe kerül, csak akik nem ismerik a btoa() és atob() függvényeket. :-) 

Itt azonnal ki is próbálhatod őket: https://www.w3schools.com/jsref/met_win_atob.asp 

Készítsd el az alábbi html oldalt. H2 címsorba írd be a címet, adj hozzá egy input:text mezőt, és két gombot, majd egy div konténert, ahová a kódolt és dekódolt üznetet megjelenítjük:

Amit megvalósítunk az atob függvény használatával, ha valamilyen szöveget beírunk az input mezőbe, akkor az kódolva fog megjelenni a div konténerben. 

ha viszont kapod, akkor ki is kell kódolni:

Az atob és btoa JavaScript-ben beépített függvények, amelyeket Base64 kódoláshoz és dekódoláshoz használnak. Ezek a függvények lehetővé teszik az adatok átalakítását szöveges és bináris formátum között.

A Base64 egy olyan kódolási technika, amely a bináris adatokat (pl. képeket, fájlokat, szövegeket) ASCII szöveges formátumba alakítja. Ez akkor hasznos, ha olyan rendszereken keresztül kell adatokat továbbítani, amelyek nem támogatják a bináris adatokat, például:

• URL-ekben,
• JSON API-kban,
• E-mail üzenetekben (MIME formátum),
• Adatbázisokban.

Karakterkészlet: A Base64 az alábbi karaktereket használja: Betűk: A-Z, a-z, Számok: 0-9, Különleges karakterek: +, /, Padding: = (a string hosszának kiegészítésére)

Előnye: Bármilyen adatot (pl. bináris fájlokat) kompatibilissé tesz szöveges környezetekkel.

Hátránya: A Base64 nem titkosítás, csupán egy kódolási technika, így az adatok visszafejthetők. Ha szeretnél valami egyedit beépíteni, ami bonyolultabbá teszi a visszafejtést, hozzáadhatsz egyedi manipulációkat a kódolási és dekódolási folyamat során. Ezek nem teszik valódi titkosítássá a rendszert, de nehezebbé tehetik a dekódolást.

btoa – Base64 kódolás: A btoa függvény az eredeti (ASCII) szöveget Base64 formátumba alakítja.

Szintaxis: let base64String = btoa(inputString);

Paraméterek: inputString: Egy ASCII kompatibilis string, amit Base64 formátumba szeretnél kódolni.

Visszatérési érték: Egy Base64 kódolt string.

Projekt feladat: keressetek modern titkosítási algoritmusokat, írjátok át a feladatot valamelyik felhasználásával.

    

TODO feladat

 

A calc() CSS függvény

A calc() egy beépített CSS függvény, amelyet olyan tulajdonságok értékének kiszámítására használunk, mint a szélesség (width), magasság (height), margók (margin), kitöltések (padding), vagy akár a betűméret (font-size).

A függvény lehetővé teszi, hogy különböző egységeket (pl. px, %, em, rem) kombináljunk, miközben matematikai műveleteket hajtunk végre.

Szintaxisa: tulajdonság: calc(kifejezés);

A kifejezés: Egy matematikai egyenlet, amely összeadást (+), kivonást (-), szorzást (*) és osztást (/) tartalmazhat.

Példa:

width: calc(100% - 50px);

Ez azt jelenti, hogy a szélesség a szülőelem teljes szélességének 100%-a mínusz 50px.

Műveletek a calc() használatával:

Összeadás:

height: calc(50px + 10%);

Ez azt jelenti, hogy a magasság 50px plusz a szülőelem magasságának 10%-a.

Kivonás:

width: calc(100% - 120px);

A szélesség a szülőelem teljes szélességének 100%-a mínusz 120px.

Szorzás:

font-size: calc(1rem * 1.5);

A betűméret 1.5-szerese az alap betűméretnek.

Osztás:

width: calc(100% / 3);

A szélesség a szülőelem szélességének harmada.

A calc() egy rendkívül hasznos eszköz a CSS-ben, amely megoldást nyújt bonyolult méretezési problémákra, és megkönnyíti a reszponzív tervezést. Használata egyszerű, mégis lehetővé teszi komplex elrendezések létrehozását anélkül, hogy extra JavaScript-re lenne szükség.