12 évfolyam - a tanév záró feladatának elérhetősége

 Kedves Diákok!

Elérkezett a tanév vége, köszönöm szépen mindenkinek a figyelmét. 

(akinek nem inge ne vegye magára :D ) 

A gyakorlati órákon egy kicsit a következő tanév anyagát vetítettem előre, hogy a nyári szünetben mindenki érezze mi mindenre lesz majd képes, és bátran gondolkozzon a záróprojektjének témáján. 

A záró feladatsort itt éritek el: 

https://github.com/latiza/2024_dolgozok_crud

Akit én fogok tanítani azokkal itt fogjuk folytatni szeptemberben.

A szóbeli érettségire a kínai hadsereg összes mellékterméke legyen veletek :D 

Szép nyarat Mindenkinek! 

Create a new website

 Create a website that includes:

1. Paragraphs, lists, a table, links, images
2. A form with at least 8 different input fields
3. External CSS
4. Formatting based on ID, class, and tag selectors
5. At least one element should change when hovered over with the mouse
6. Create JavaScript in a separate file
7. It should be possible to add new items to the list, and ensure with JavaScript that the same item cannot be added more than once
8. Every second row of the created table should have a different color
9. Create form validation

SQL PARANCSOK

-- Minden érték lekérése

SELECT *

FROM tablanev

SELECT oszlop1, oszlop2, oszlop3

FROM tablanev

SELECT `oszlop1`, `oszlop2`, `oszlop3`

FROM tablanev

-- Feltétellel

SELECT *

FROM tablanev

WHERE feltetel

SELECT oszlop1, oszlop2, oszlop3

FROM tablanev

WHERE feltetel

-- Keresés LIKE segítségével

SELECT oszlop1, oszlop2, oszlop3

FROM tablanev

WHERE oszlop1 LIKE kifejezes

SELECT oszlop1, oszlop2, oszlop3

FROM tablanev

WHERE oszlop1 LIKE %kifejezes%

-- Rendezés ASC [A-Z-ig], DESC [Z-A-ig]

SELECT *

FROM tablanev

ORDER BY oszlop1 ASC

SELECT *

FROM tablanev

ORDER BY oszlop1 DESC

SELECT *

FROM tablanev

WHERE feltetel

ORDER BY oszlop1 DESC

SELECT *

FROM tablanev

WHERE feltetel

ORDER BY oszlop1 DESC, oszlop2 ASC

-- Adott darabszám lekérése

SELECT *

FROM tablanev

LIMIT 10

SELECT *

FROM tablanev

LIMIT 10, 10

-- Rekord beszúrása

INSERT INTO tablanev

(oszlop1, oszlop2, oszlop3)

VALUES

('ertek1', ertek2, ertek3)

-- Rekordok törlése

DELETE FROM tablanev

WHERE feltetel

-- Rekordok módosítása

UPDATE tablanev

SET oszlop1 = ertek1, oszlop2 = 'ertek2'

WHERE feltetel

fetch()

/*Az async kulcsszó a JavaScriptben azt jelzi, hogy egy függvény aszinkron működésű. Az aszinkron függvények lehetővé teszik a kód folytatását anélkül, hogy meg kellene várniuk a hosszabb-rövidebb időtartamú műveleteket, például egy AJAX kérés befejeződését vagy egy fájl olvasását. */

// Az űrlap beküldésének eseménykezelője

document.getElementById("searchForm").addEventListener("submit", async function(event) {

    // Az űrlap beküldésének alapértelmezett viselkedésének megakadályozása

    event.preventDefault();

    // A keresett film címének lekérése az űrlapból

    const keresettFilm = document.getElementById("search").value;

    try {

// Fetch API segítségével az OMDB API-tól adatok lekérése

/*Az await egy kulcsszó a JavaScriptben, amelyet az aszinkron függvényekben használunk. Az aszinkron függvények olyan függvények, amelyek nem blokkolják a további kódfuttatást, hanem "háttérben" futnak. Az await ezen függvényeknél használatos, hogy megvárja az aszinkron művelet (például egy hálózati kérés) befejeződését, mielőtt továbblépne a kód.

 

A fetch() függvény egy beépített JavaScript függvény, amelyet hálózati kérésekhez használunk. Ezzel a függvénnyel tudunk HTTP kéréseket küldeni (például GET, POST) és válaszokat fogadni a webhelyektől vagy az API-któl.

 

A példádban az await fetch() használata egy HTTP GET kérést indít el a megadott URL-re, amely egy filmeket kereső API-hoz tartozik (OMDb API). A fetch() függvény elindítja a hálózati kérést, majd az await kulcsszó megvárja, hogy a kérés teljesüljön, mielőtt folytatná a kód futását.  */

        const response = await fetch(`http://www.omdbapi.com/?s=${encodeURI(keresettFilm)}&apiKey=9606ae0f`);

        console.log(response);

 

        // HTTP válasz ellenőrzése

        if (!response.ok) {

            throw new Error(`HTTP hiba: ${response.statusText}`);

        }

        // JSON válasz feldolgozása

        const data = await response.json();

        console.log(data);

        // Ellenőrizzük, hogy a válasz tartalmazza-e a 'Search' tulajdonságot

        if (data.Search) {

            // Ha igen, meghívjuk a renderFilmek függvényt a filmek megjelenítésére

            renderFilmek(data.Search);

        } else {

            // Ha nincs találat, hibaüzenetet logolunk a konzolon

            console.error("Nincs találat.");

        }

    } catch (error) {

        // Hiba esetén hibaüzenetet logolunk a konzolon

        console.error("Fetch hiba:", error.message);

    }

});

 

// Filmek megjelenítése a weboldalon

function renderFilmek(films) {

    // A filmek konténerének kiválasztása a DOM-ból

    const filmekContainer = document.getElementById("filmek");

    // Előző filmek törlése a filmek konténeréből

    filmekContainer.innerHTML = "";

    // Minden filmre kártya létrehozása és hozzáadása a filmek konténeréhez

    films.forEach(function(film) {

        const card = `

            <div class="col-lg-3 col-md-4 mb-3">

                <div class="card">

                    <img src="${film.Poster}" class="card-img-top" alt="Film poszter">

                    <div class="card-body">

                        <h5 class="card-title">${film.Title}</h5>

                        <p class="card-text">${film.Year}</p>

                    </div>

                </div>

            </div>

        `;

 

        // Az új kártya hozzáadása a filmek konténeréhez

        filmekContainer.innerHTML += card;

    });

}

Adatbázisból JSON fájl nodeJs segítségével

Xamppra és az adatbázisra szükséged lesz. 

Telepítsd a NodeJs-t, npm-et.

Nyisd meg a mappát, ahol dolgozni szeretnél a VSCbe

Nyiss egy új terminált: npm install mysql 

Létre jönnek a nodejs fájlok

Hozd létre a pl connect.js fájlt:

// A "mysql" modul importálása a Node.js-hez

const mysql = require('mysql');

// Adatbázis konfiguráció

const connection = mysql.createConnection({

  host: 'localhost', // Az adatbázis szerver elérési útja (általában 'localhost', de más is lehet)

  user: 'root',      // Az adatbázis felhasználóneve

  password: '',      // Az adatbázis jelszava (ha van)

  database: 'nevjegyek' // Az adatbázis neve, amelyben a lekérdezést futtatjuk

});

// Kapcsolódás az adatbázishoz

connection.connect();

// Lekérdezés az adatbázisból

connection.query('SELECT * FROM nevjegyek', (error, results, fields) => {

  if (error) throw error; // Hiba kezelése: ha hiba történik a lekérdezésben, dobunk egy hibaüzenetet

  // Az eredmények JSON formátumban kiírása

/*JSON.stringify(results, null, 2) azt jelenti, hogy az results változóban tárolt objektumot alakítjuk át JSON formátumba, ahol a szóközök és behúzások két szóközt foglalnak el, és nincs speciális cserélő függvény vagy tömb használva. Ezáltal szebb és olvashatóbb formában kapjuk meg az eredményt, amikor kiírjuk.*/

  const jsonResults = JSON.stringify(results, null, 2); // Az eredmények JSON formátumban történő átalakítása

  console.log(jsonResults); // Az eredmények kiírása a konzolra

  // A JSON kiírása fájlba

  const fs = require('fs'); // A "fs" modul importálása a Node.js-hez (a fájlkezeléshez)

  fs.writeFile('nevjegyek.json', jsonResults, 'utf8', (err) => { // A fájl írása: nevjegyek.json néven, a jsonResults tartalmával

    if (err) throw err; // Hiba kezelése: ha hiba történik a fájlírás során, dobunk egy hibaüzenetet

    console.log('A nevjegyek.json fájl létrehozva.'); // Sikeres fájlírás esetén üzenet a konzolra

  });

});

// Kapcsolat lezárása az adatbázissal

connection.end(); // Az adatbáziskapcsolat lezárása a lekérdezés befejezése után

futtasd a fájlt a terminálon 

node nevjegyzek.js 

megkapod a json fájlt, amit már ajax-al, fetch()-el, vagy AngulrJs-el fel tudsz dolgozni. :-)

12B 2024.04.16. helyettesítés

 Feladatokat ezen a linken találjátok: http://history.itwebguide.nhely.hu/tori_teszt.html

az eredményről a képernyőképet kérem :D

Weboldal Téma: Barcelona Látnivalói

 Fejléc:

·        A fejlécben szerepeljen a weboldal címe, például "Barcelona Látnivalói".

·        Készíts egy navigációs menüt a fejlécbe, ami tartalmazza az alábbiakat: "Kezdőlap", "Látnivalók", "Galéria", "Kapcsolat".

Tartalom:

·        Használj CSS Grid-et a tartalom elrendezéséhez.

·        Hozz létre egy kártya elrendezést, ahol minden kártya egy-egy Barcelona látnivalót reprezentál.

·        Minden kártyának tartalmazzon egy képet és egy rövid leírást a látnivalóról.

·        Az oldalon jelenjen meg egyszerre csak 3 kártya. A kártyák között legyen lehetőség lapozásra.

Footer:

·        Készíts egy láblécet, ami tartalmazza a következőket:

·        Social media ikonok (pl. Facebook, Instagram, Twitter).

·        Kapcsolat információk (pl. cím, email, telefon).

Egyéb követelmények:

·        Használj reszponzív mértékegységeket (pl. %, em, rem) az elrendezéshez és méretezéshez.

·        Minden kártya és a tartalom egésze legyen reszponzív, azaz jól jelenjen meg különböző képernyőméretek esetén.

·        Készíts lapozót az oldal alján, ami lehetővé teszi a felhasználó számára az oldalak közötti navigálást.