Webfejlesztés 2. zárthelyi dolgozat =================================== _2017. május 30._ Tudnivalók ---------- - A feladatot a webprogramozas.inf.elte.hu szerveren kell elvégezni PHP és JavaScript segítségével. - A megoldást egy `wf2zh` nevű mappába készítsd el a `www` mappán belül! - Nem szükséges a feladatokat a megadott sorrendben elvégezni! - A félig megoldott feladatokat is figyelembe vesszük az értékelésnél! - A megoldások plágiumellenőrzésen esnek át a zh után. A gyanúsan hasonló megoldást adó hallgatókat megkérhetjük zh-ik megvédésére. - A megoldáshoz bármilyen segédanyag felhasználható, kivéve a humán segítséget! - A megoldások elkészítésére 105 perc áll rendelkezésre. - Értékelés: 1 + a megoldott részfeladatok száma. - Az értékelés helyben történik. - Lényeg a működő alkalmazás, kinézet, kód szépsége nem számít. Feladat leírása --------------- Kedvenc zeneszámainkat és a hozzájuk kapcsolódó adatokat szeretnénk egy webes alkalmazás segítségével nyilvántartani. A szerveroldali tárolás fájlban vagy adatbázisban (SQLite) történhet. 1. **Új zeneszám mentése** Készíts egy oldalt, ahol egy új bejegyzést lehet felvenni a zeneszámról. Ehhez a következő adatok megadása szükséges: a. Előadó neve b. Album címe c. Szám címe (kötelező) d. Szám hossza (ezredmásodpercben megadva, csak egész szám lehet) e. Megjelenés éve (négyjegyű évszám) f. Kategória (legördülő mező, értékei Klasszikus, Pop, Rock, Country) g. Hivatkozások (többsoros szöveges beviteli mező) h. Az albumkép URL-je. A hivatkozások minden sora a következő felépítésű: `médium: url`. Például: ``` Youtube: https://www.youtube.com/watch?v=KnPL5OXSBNE Wikipedia: https://hu.wikipedia.org/wiki/I_Get_Around ``` A felküldött adatok helyességét ellenőrizni kell (ld. a zárójeles megjegyzéseket), az esetleges hibákat az oldalon jelezni kell úgy, hogy az űrlapmezők nem veszíthetik el a beleírt tartalmat. Helyes megadása esetén az adatokat szerveroldalon el kell tárolni. Tároláskor egy egyedi azonosítót is rendeljünk az elmentett rekordhoz (ehhez pl. a `time()` függvény által visszaadott értéke, vagy éppenséggel az eddig tárolt elemek száma használható). 2. **Spotify API** Ugyanezen az oldalon segítsd a kitöltést a Spotify API segítségével, ahova AJAX hívásokat kell intézni. (Sajnos a Spotify éppen ma tette nyílt API-ját regisztrációhoz kötötté, így a webprogramozas szerver szimulálja a válaszokat.) A következő lépéseket kell megtenni: a. Tegyél fel egy szöveges beviteli mezőt, amibe a zeneszám keresendő címét lehet beírni. Egy gombra kattintva indítsd el a keresést. Ehhez AJAX hívással a következő URL-t kell megszólítani: `http://webprogramozas.inf.elte.hu/user/gyozke/proba/search.php?q=` ([példa](http://webprogramozas.inf.elte.hu/webfejl2/gyak/search.php?q=alma)). A `` helyére kell a szöveges mező tartalmát írni. Ha az előadásbeli `ajax()` függvényt használod, akkor ne feledd, hogy a `?` utáni részt `getadat` paraméterként kell megadni. b. A Spotify válaszát először írd ki a konzolra. A formátuma ehhez hasonló lesz: ``` { "tracks" : { "href" : "https://api.spotify.com/v1/search?query=sweet+child&type=track&offset=0&limit=20", "items" : [ { "album" : { "album_type" : "album", "artists" : [ ... ], "href" : "https://api.spotify.com/v1/albums/5JKFiC2WVi9HtvJEm8CUB8", "id" : "5JKFiC2WVi9HtvJEm8CUB8", "images" : [ { "height" : 640, "url" : "https://i.scdn.co/image/0fbe3c2ba5d231d626a60976b7f03d21526376f5", "width" : 640 }, { "height" : 300, "url" : "https://i.scdn.co/image/279db06362484ed7bb3f59cc34287e9df31411a1", "width" : 300 }, { "height" : 64, "url" : "https://i.scdn.co/image/7fbe9ede6722b20b5f4fe05ad935ff7a221bc9b6", "width" : 64 } ], "name" : "Appetite For Destruction", "type" : "album", }, "artists" : [ { "name" : "Guns N' Roses", "type" : "artist", } ], "duration_ms" : 356400, "external_urls" : { "spotify" : "https://open.spotify.com/track/4MhTFsyqIJnjsOweVcU8ug" }, "name" : "Sweet Child O' Mine", "type" : "track", "uri" : "spotify:track:4MhTFsyqIJnjsOweVcU8ug" }, { // Következő szám }, // ... ] } } ``` A `tracks`/`items` tömbben vannak a zeneszámok. Egy zeneszám (track) tartalmaz albumról szóló információkat (`album`), előadóról szóló információkat (`artists`, elég az első, ha több van), és magáról a számról szóló információkat (pl. `duration_ms` a hossza ms-ban). c. A találati listát írjuk ki a keresőmező alá felsorolásként (`ul`, `li`). Minden egyes lista elem a következőket írja ki: a _szám címét_, az _előadó nevét_, az _album címét_, valamint jelenjen meg az album képe is (`album`/`images` tömb 3. eleme, 64x64-es méret). Tipp: érdemes lehet a listaelem adatattribútumaként eltárolni valami olyasmi információt, amely alapján az eredeti track objektum adatai kinyerhetők. Pl. globális változóban tárolni az adatlistát és `data-id="2"`-vel jelezni, hogy ez a lista 2. eleme. Ezt az adott elem `getAttribute("data-id")` metódusával lehet kiolvasni. Vagy a megfelelő előadásban megtalálható egy segédfüggvény, amely megmondja, hogy egy kiválasztott elem hányadik a testvérelemek között. d. Egy listaelemre kattintva a lista alatt jelenítsük meg a Spotify lejátszóját (ami csak egy részletet játszik le a dalból). Ehhez a következő HTML kódot kell az oldalba beágyazni: ```html ``` Ebben a `` helyre kell a track `uri` kulcsában lévő részt beírni. e. Ugyancsak a listaelemre kattintásra az űrlapba írjuk vissza az előadó, az album és a szám címét, az albumkép URL-jét, a hivatkozások közé pedig adjuk hozzá: `spotify: `, ahol az `` a track `external_urls` `spotify` kulcsa alatt szerepel. f. Ugyancsak a listaelemre kattintásra még egy Spotify AJAX hívást kell intézni, amely során az album megjelenési évét kérdezzük le és másoljuk a megfelelő űrlapmezőbe. URL: `http://webprogramozas.inf.elte.hu/user/gyozke/proba/album.php` ([példa](http://webprogramozas.inf.elte.hu/webfejl2/gyak/album.php)). A válasz egy objektum lesz, ezt is írjuk ki a konzolra, és ebben a `release_date` kulcs alatt található az évszám. 3. **Lista, szűrés, részletek** Egy külön oldalon táblázatban listázzuk ki az eddig elmentett elemeket. A táblázatnak a következő oszlopai legyenek: a. Előadó neve b. Album címe c. Szám címe A táblázat fölött legyen egy legördülő mező, amiben a lehetséges kategóriák jelennek meg. Innen választva legyen lehetőség a táblázat szűrésére. A szám címe legyen hivatkozás, amire kattintva egy külön oldalon a zeneszám részletes adatai jelennek meg minden felvitt mezővel. A hivatkozások mező minden egyes sora kattintható hivatkozásként jelenjen meg! 4. **Statisztika** Végül a listaoldalon a táblázat felett jelenjen meg egy statisztika arról, hogy a nyilvántartásunk évtizedes bontásban (pl. 1950-től 2020-ig) hány számot tartalmaz. Az eredményt egy canvas elemen rajzold meg: alul tüntesd fel az évszámot (1950, 1960, 1970, stb.), fölötte pedig egy színes téglalap helyezkedjen el. A legnagyobb érték érjen a canvas tetejéig, a többi érték ennek arányában legyen kisebb (normalizált megjelenítés).