(Frissítés: a projekt futtatásához 7.4-es PHP-ra van szükség, sajnos a 8-as verzióval vég nem fut.)

Az, hogy a Github-on rengeteg hasznos, kész webes alkalmazás projekt érhető el, az nem annyira meglepő. Laravel projektből is van számos példány, amit ha mi magunk is ki szeretnénk próbálni, akkor képesek vagyunk "lemásolni", klónozni azokat. Ennek a folyamatát tekintem át ebben a blogbejegyzésben. Ehhez a gyakorlás szempontjából egy olyan projektet érdemes választani, aminek nem csak backend-je (pl.: PHP fájlok), hanem fontend-je (pl.: js fájlok) és adatbázis háttere is van. A projekt, amit fel fogunk használni a teszteléshez: https://github.com/guillaumebriday/laravel-blog

A Github projekt megnyitása után másoljuk ki a HTTPS linket (előtte a Code gombbal nyitható le ez a kis ablak).

Nyissunk egy parancssort (vagy terminal-t) és lépjünk be a C:\xampp\htdocs mappába a cd parancs segítségével, vagy már közvetlenül abban a mappában nyissuk meg a parancssort. Ezután következhet a projekt másolása:

git clone https://github.com/guillaumebriday/laravel-blog.git

Az utasítás hatására létrejött a laravel-blog nevű mappánk itt. Nyissuk meg a mappát a VSCode segítségével. Szemfülesebbek észrevehetik, hogy a mappaszerkezet "karcsúbb", mint a már korábban meglévő projektünknél (myfirstproject vagy example-app névre hallgat az). A mappa jelenlegi mérete nálam 4,49 MB. Ez a karcsúság abból adódik, hogy itt nincsenek még telepítve a Laravel projekt függőségei, úgyhogy nem is tudnánk még futtatni ezt a projektet a böngészőben. A megnyitott VSCode ablakban nyissunk egy új terminal-t azért, hogy először a composer segítségével telepítsük a PHP csomagok legfrissebb verzióit:

composer install

Az utasítás kiadása után remélhetőleg települnek azok a csomagok a projektbe, amelyek a composer.json fáljban (kvázi, mint egy tartalomjegyzék a csomagokról) definiálva voltak. (Előfordulhat, hogy hibát kapunk az utasítás kiadásakor: "Your requirements could not be resolved to an installable set of packages". Ekkor a composer install --ignore-platform-reqs parancsot futtassuk, ami megoldja a problémánkat.) Az utasítás kiadásának hatására jó sok csomag töltődik le és települ a projektünkbe. Ezek a vendor mappába fognak eltárolódni. A vendor angol szó magyarul beszállítót jelent, ide kerülnek tehát az úgynevezett 3^rd party, 3. féltől származó csomagok, amelyekhez közvetlenül sohase nyúljunk hozzá, ne oldjunk meg úgy problémákat, hogy ezeket szerkesszük, hiszen ezek egy következő composer update parancs hatására úgyis felülíródnak, amikor frissítjük például a csomagok verzióját. Mindeközben a feltöltött vendor mappával 55,2 MB-os lett már a mappánk, tehát több mint tizenkétszeres méretűre hízott. Ez a nagy méretbeli különbség is az oka, hogy a Github-on csak a függőségek leírása (composer.json és a package.json) fájlok vannak fenn, hiszen a "tartalomjegyzékek" alapján mindenki maga tudja telepíteni a csomagokat, amikor már klónozta a projektet. A .gitignore fájl emiatt tartalmazza is a felsorolásában a vendor mappát, hogy azt senki se akarja feltölteni a git-es repo-jába, mivel felesleges pazarlás lenne ott.

Következhet a további (főleg kliens oldali) csomagok frissítése az npm-mel:

npm install

(Ha valakinek hibát adna, akkor ezzel javítható: npm install --legacy-peer-deps ). Ennek hatására a package.json fájlban lévő csomagok és azok további függőségei fognak települni a node_modules mappába. Az így kapott projekt mappaméret: 193 MB. Fú, jó nagyra megnőtt a kezdeti 4,49 MB-os méretről. Ez azért is van, mert ebben a blogban számos olyan funkcionalitás van előre telepítve (vagy telepítésre kijelölve, ha a klónozás szempontjából nézzük), amely hasznos lehet egy blog oldal menedzseléséhez. Ezekről a szolgáltatásokról a projekt Github oldalán olvashatunk a mappa- és fájlszerkezet alatti leírásban.

A következő fontos lépés, hogy beállítsuk az .env fájl tartalmát, azon belül is főleg majd az adatbázis elérést. Adjuk ki a parancsot:

cp .env.example .env

Ezzel lemásoljuk a projekt mappájában lévő .env.example fájlt az .env fájlba. A Laravelnek szüksége van egy kódoló kulcsra, amely egy véletlenszerűen generált karaktersorozat és ezt sokmindenhez felhasználja a működése során, például a felhasználók jelszavainak hash-eléséhez. Hozzuk létre a kulcsot a következő utasítással:

php artisan key:generate

Nyissuk meg az .env fájlt és vegyük észre, hogy be is került a kulcs az APP_KEY attribútumba értékként. Ezután tekintsük át a "DB_" kezdetű attribútumokat. Itt fontos megjegyezni, hogy ez a "laravel-blog" projekt, amelyet klónoztunk, úgy lett kialakítva, hogy képes legyen futni egy virtuális környezetben is, azonban ehhez többminden mást is telepíteni kellene, amelyet most nem fogunk mi megtenni, hanem maradunk helyben, a fizikai környezetünkben (akit mégis érdekelne a virtuális környezet létrehozása, az nézze meg a projekt Github oldalán előkövetelményként feltüntetett VirtualBox és Vagrant alkalmazásokat). Maradva tehát helyben, szükségünk lesz egy adatbázisra, ahova majd bekerülnek a blog adatai. Maradhatunk a mysql-nél, mint DB_CONNECTION, hiszen ezt már korábban úgyis telepítettük a gépünkre. A MySQL adatbáziskezelőnket többféle módon el tudjuk érni, használhatjuk a mysql console-t, ha asztali alkalmazást akarunk használni hozzá, akkor javaslom a MySQL Workbench-et, ami egy ingyenes alkalmazás (https://dev.mysql.com/downloads/workbench/), vagy használhatjuk a böngészőben futó PHPMyAdmin-t is, amit a XAMPP szerver telepítésekor kaptunk meg. PHPMyAdmin (http://localhost/phpmyadmin/) esetén mindenképpen szükség van arra, hogy az Apache szervert futtassuk, mivel ez egy webes menedzselő alkalmazás. Bármelyiket használhatjuk az iméntiek közül, én a MySQL Workbench-et használom, mert nekem az a legkényelmesebb. A MySQL-hez való kapcsolódás után a Workbench-ben létrehozok egy új adatbázist, aminek a neve: laravel-blog-db

Utána a kis ablakban kattinthatunk az Apply gombra, majd újra Apply és Finish. Ezzel létre is jött a laravel-blog-db nevű üres adatbázisunk. Ezt az adatbázisnevet a Laravel projekt .env fájljában be is állíthatjuk a DB_DATABASE attribútumnak értékül (a DB_HOST attribútum értékét meghagyhatjuk változatlanul). A DB_USERNAME és a DB_PASSWORD páros alapértelmezetten MySQL esetén: root a felhasználónév és üres karaktersorozat a jelszó. Ez tehát a végeredménye a szerkesztésnek:

Következhet a klónozás folytatása a következő utasítás kiadásával:

php artisan migrate

Az utasítás hatására láthatjuk, hogy mely adattáblák jöttek létre az adatbázisban, ebből egy részlet itt van:

Ezt ellenőrizhetjük is az adatbáziskezelő és -menedzselő alkalmazásunk segítségével:

Az adattábláink jelenleg még üresek, viszont lehetőségünk van arra, hogy feltöltsük őket mintaadattal például a users táblát:

php artisan migrate --seed

Az eredménye itt látható:

El is készült az alkalmazásunk, amely képes kiszolgálni egy blog működését. Indítsuk be az alkalmazás kiszolálását: php artisan serve és nézzük meg a weboldal kinézetét... sajnos még nem tökéletes a megoldásunk, ugyanis hibát kaptunk, de gyorsan tudjuk ezt orvosolni. A hiba:

Ennek oka leginkább az, hogy a public mappa részei (css, js stb. mappák) is lokálisan generálódnak (hiszen a .gitignore fájl is tartalmazza őket). A public mappa elemei a resources mappából származnak. Az ott lévő SCSS és JS fájlok, valamint függőségeik kerülnek lefordításra és optimalizálásra, majd így kerülnek át a public mappába. Az összerendelés alapja a projekt gyökerében található webpack.mix.js fájl, ebből egy részlet:

Az tehát megvan, hogy mi az összerendelés alapja. Most már csak el kell végezni a fordítást és optimalizálást. Ez a folyamat egy művelet kiadásából áll: npm run dev Viszont, hogy átlássuk, hogy ennek hatására milyen utasítás megy végbe, nyissuk meg a package.json fájlt, annak is a scripts részére koncentráljunk.

Az npm run dev parancs hatására a yarn development parancs fut le, a development részben látható paraméterekkel. A yarn-ról (weboldala) annyit érdemes tudnunk, hogy ez is egy package manager, hasonlóan mint az npm és a composer. Adjuk ki a yarn csomagkezelő telepítéséhez a következő utasítást: npm install --global yarn majd utána ezt:  npm run dev az utasítást a terminal-ban, majd frissíthetjük az oldalunkat és most már szerencsére tökéletesen működik:

Utána nézzük meg a weboldal adminisztrációs részét is (http://127.0.0.1:8000/login) és teszteljük a belépést a példafelhasználóval: darthvader@deathstar.ds az e-mail cím és 4nak1n a jelszó. Belépés után már láthatjuk a blog alkalmazásunk adminisztrációs felületét:

Megjegyzés: a MySQL adatbáziskezelőről annyit érdemes mindenképpen tudni, hogy régen a használata ingyenes volt, de néhány éve megvásárolta az Oracle cég, emiatt a minden funkciót tudó változata már nem ingyenes, viszont amire mi használjuk, arra bőven elegendő. Akinek esetleg a MySQL már nem lenne "szimpatikus", az használhatja a MariaDB-t, ami gyakorlatilag a "régi, ingyenes" MySQL továbbfejlesztése továbbra is ingyenes, nyílt forráskódú vonalon.

De lehetőségünk van arra is, hogy már meglévő Laravel projektjeinkbe telepítsünk hasznos kiegészítőket a Github-ról, ilyenek például:

• Fejlesztőeszköz: https://github.com/barryvdh/laravel-debugbar
• Adminisztrációs felület: https://github.com/the-control-group/voyager
• Talán a jövőben készítek majd egy listát, az általam leghasznosabbnak tartott csomagokról...
  

Ezeket a Github oldalukon lévő leírás szerint kell telepíteni, többnyire a composer vagy az npm csomagkezelők segítségével.