A lehetőségek tárháza kvázi végtelen, mert rengeteg ingyenes, responsive sablon érhető el az interneten: be kell csak írni a keresőbe, hogy például: "free responsive template" és már záporoznak is ránk a találatok. Az ingyenes kategóriában is vannak nagyon profik és abszolút átlátható megoldások is. Én igyekeztem egy olyan sablont választani, ami azért egyszerűbb, nincs telepakolva CSS és JavaScript bővítményekkel, hanem csak egy tisztán átlátható struktúrára épül.

A sablon, amit fel fogok használni itt érhető el: https://www.free-css.com/free-css-templates/page275/oldschool-pastel Ingyenesen letölthető és megtekinthető működés közben, responsive, tehát mindenféle képernyőméreten szép a megjelenése. Az összecsomagolt fájl mindössze két fájlt tartalmaz, egy index.html-t, ami a weboldal tartalmát fogja össze és egy pastel.css fájlt, ami a stílusszabályokat tartalmazza.

Amit tenni fogunk:

1. A CSS fájlt átnevezni pastel.css-ről app.css-re és betenni a projektben a public mappán belül a css mappába (ha nincs ilyen, akkor létre kell hozni)
2. Az index.html tartalmát bemásolni a layout.blade.php fájlba. Gondoskodunk az összeköttetésekről és még a menüt is frissítjük majd.
   

Azt gondolom, hogy az 1. feladat nagyon könnyű, azt nem is magyaráznám túl. A 2. feladat sem túlságosan nehéz, de néhány apróbb módosítást el fogunk végezni a nézet fájljainkban.

A layout.blade.php fájlba tehát bekerül az index.html tartalma. Határozzuk viszont meg, hogy melyik részébe töltődjenek a dinamikusan változó (menüpontok szerinti) tartalmak.

Én a content azonosítójú (id) div-en belül az első pageitem osztályú div-be tettem bele a már előző blogbejegyzés szerint megtanult @yield('content') helyőrzőt. Ezzel kijelöltem, hogy ide kerüljenek majd a dinamikusan változó tartalmaink.

Ha most elindítjuk a webalkalmazásunk kiszolgálását (php artisan serve) és megnézzük a böngészőben a 127.0.0.1:8000 címen található oldalt, akkor egy elég csúnyácska, szétcsúszott valamit találunk. Közel sem azt, amit esetleg elvártunk volna. Ennek két oka is van: az egyik az, hogy a CSS fájlunk nincs jól "bekötve" a stíluslapok közé itt a layout fájlban. Ezt így oldhatjuk meg a legegyszerűbben (11. sor nálam):

A link href attribútumára érdemes figyelni. Ebben egy Laravel-es metódus hívása történik meg, ez az asset(), ami paraméterül kapja azt, hogy a public mappán belül hol található az app.css fájlunk. Ez főleg akkor hasznos, ha egy kiszolgálóra szeretnénk majd publikálni a weboldalunkat, akkor ennek segítségével könnyebb megadni a rendszernek, hogy hol is találja a CSS/JS fájlokat a rendszer és nem kell relatív / abszolút útvonal megadásokkal problémáznunk, hanem csak azt tapasztaljuk, hogy működik és ez jó.

A másik ok, amiért a nem volt túlságosan szép a weboldalunk, az a welcome nézet fájl tartalma. Úgyhogy változtassuk ezt meg úgy, hogy legyen benne egy h1 tag, amiben leírjuk, hogy hol van a felhasználó és alatta üdvözöljük a p tag-ben, például így:

A kapcsolati (contact) nézet tartalmát szintén frissítsük, például így:

Ennek következtében az oldalunk lényegi része már megfelelően néz ki:

És működik a dinamikus tartalom módosítás, ha átmegyünk a /contact útvonalunkra:

Még két dolgot csináljunk meg: (1) picit kényelmetlen beírogatással lépkedni az útvonalaink között. Módosítsuk, illetve bővítsük a menüt a layout fájlban a következőképpen:

A 20. és 21. soromban látható a linkek href attribútumainak módosítása, illetve a 21.-nél még a menüpont nevének is a Contact-ot adtam meg. Így most már jobban használható a menüstruktúránk, lépkedhetünk az első két menüpont között.

Viszont az még zavaró lehet, hogy amikor átlépünk a Contact menüpontra, akkor bár a tartalom megfelelően megváltozik, de az aktív menülink nem kerül át a Home-ról a Contact-ra. Ezt is oldjuk meg, mert jelenleg az "active" osztály be van égetve kódként a Home menüpont class attribútumába. Ezt tesszük programozottá a következőképpen:

A Laravel Request osztályának path statikus metódusa segítségével le tudjuk kérni, hogy mi is az éppen aktuális útvonal, ami betöltődött. Nyilván, ha a Home oldalon vagyunk akkor ez az útvonal a / , míg ha a contact útvonalon vagyunk, akkor ez a contact értéket veszi fel... ha pedig azt veszi fel, akkor adja hozzá a class attribútumhoz az 'active' osztályt, míg ha nincs azon az útvonalon, akkor ne adjon hozzá semmi érdemlegeset a class attribútumhoz (ne legyen aktív). Megjegyzés: a PHP nyelvben létezik ez a feltételvizsgálat, tehát ez gyakorlatilag egy "if", a kérdőjel (?) után van lekezelve az "igaz ág", a kettőspont (:) után pedig a "hamis ág".

Ez a weboldal tényleg nem a legszebb a világon, viszont, letisztult, könnyen használható és még responsive is, úgyhogy a továbbiakban ezt fogjuk használni ahhoz, hogy ismerkedjünk a Frontend és a Backend rejtelmeivel.

Az elvégzett műveletekhez tartozó commit itt található.