5. diel - Jednoduchý redakčný systém v Laravel - Štruktúra projektu

V minulej lekcii, Dokončenie kalkulačky v Laravel , ktorá bola venovaná predovšetkým základom a vysvetlenie potrebných princípov, sme dokončili veľmi jednoduchú aplikáciu. Dnes však začneme s novým projektom a to práve so sľúbeným jednoduchým redakčným systémom. Tento projekt už môže byť pre niektoré zaujímavejšie, pretože si vyskúšame prácu s ďalšími komponentmi, ktoré nám Laravel ponúka. Jedna z týchto komponentov je napríklad Eloquent, ktorý zaisťuje ORM pre prácu s databázou. V dnešnej lekcii si však prejdeme štruktúru projektu a to tiež kvôli tomu, že tentoraz si už musíme projekt nastaviť.

Štruktúra Laravel projektu

Reálne komerčné projekty majú veľa tried a súborov a určite by sme si v nich nevystačili len s rozdelením štruktúry projektu na kontrolery, modely a pohľady. Mať v jednej zložke desiatky súborov je minimálne neprehľadné. Kód by sa zle spravoval a dostali by ste sa do bodu, kedy by ste písali podobné metódy znovu a znovu namiesto toho, aby ste parametrizovali nejakú existujúcu, pretože by ste skrátka ani nevedeli, že v projekte nejaká podobná už je. A to je začiatok konca. Ako z toho von?

Triedy rozdelíme do logických skupín a určite vás neprekvapí, že na tento účel využijeme menných priestorov. To je presne ten nástroj určený na riešenie práve problému s vysokým počtom tried. Laravel však nie je len jednoduchý MVC framework. Obsahuje veľké množstvo komponentov, s ktorými môžeme pracovať, teda si nevystačíme ani s jednoduchým rozdelením do niekoľkých zložiek.

Laravel nám dáva slobodu nad usporiadaním nášho projektu. Nevytvárame si tak žiadne moduly a ani sa projekt nerozdeľuje na "balíčky". Hlavným kritériom pre rozdelenie tried a iných súborov je ich úloha. Každá časť logiky aplikácia má teda nejakú vlastnú hlavnú zložku, kam patrí, a už je len následne na nás, či si v týchto zložkách vytvoríme podpriečinky pre jednotlivé časti aplikácie (napríklad administrácia článkov), alebo nie. Každopádne vytváranie podpriečinkov sa určite hodí pre väčšie aplikácie (lepšia orientácia, kam čo patrí) a my toto aplikujeme na našom projekte.

Štruktúra frameworku

Poďme si teraz popísať východiskovú štruktúru Laravel frameworku, ktorú budeme v nasledujúcich lekciách tiež rozširovať. Momentálne adresárová štruktúra našej aplikácie vyzerá nasledovne:

• app/ - Obsahuje jadro našej aplikácie a zahŕňa všetky rôzne komponenty od kontrolerov až po vlastné udalosti Console/ - Vlastné Artisan príkazy Laravel konzoly. Rovnako ako existuje príkaz make:controller, ktorý sme použili v lekcii Prvé aplikácie v Laravel, si môžeme vytvárať svoje vlastné. K tomu sa však dostaneme v ďalších lekciách

  Exceptions/ - Výnimky

  Http/ - Obsahuje takmer všetko ohľadom logiky spracovávajúci požiadavky Controllers/ - Kontrolery

  Middleware/ - Middleware triedy

  Providers/ - Obsahuje triedy, ktoré sa nám starajú napríklad o registrovanie vlastných udalostí alebo nastavenie spracovávanie požiadaviek

• Console/ - Vlastné Artisan príkazy Laravel konzoly. Rovnako ako existuje príkaz make:controller, ktorý sme použili v lekcii Prvé aplikácie v Laravel, si môžeme vytvárať svoje vlastné. K tomu sa však dostaneme v ďalších lekciách
• Exceptions/ - Výnimky
• Http/ - Obsahuje takmer všetko ohľadom logiky spracovávajúci požiadavky Controllers/ - Kontrolery

  Middleware/ - Middleware triedy

• Controllers/ - Kontrolery
• Middleware/ - Middleware triedy
• Providers/ - Obsahuje triedy, ktoré sa nám starajú napríklad o registrovanie vlastných udalostí alebo nastavenie spracovávanie požiadaviek
• bootstrap/ - Obsahuje zavádzajúce súbor frameworku a tiež vyrovnávaciu pamäť vygenerovaných rout a balíčkov. Tejto zložky sa počas nášho projektu ani nevezmeme
• config/ - Obsahuje konfiguráciu projektu
• database/ - Obsahuje databázové migrácie a triedy pre zaplnenie databázových tabuliek falošnými dátami
• public/ - Koreňový adresár celého webu (prístupový bod, kde všetky umiestnené súbory sú prístupné zvonku). Tiež obsahuje súbor index.php, ktorý spracováva všetky požiadavky na web css/ - CSS súbory

  js/ - JavaScript súbory

• css/ - CSS súbory
• js/ - JavaScript súbory
• resources/ - Obsahuje nezkompilované zdrojové súbory pre front-end a preklady aplikácie js/ - Nezkompilované JavaScript súbory

  lang/ - Obsahuje súbory s frázami a ich preklady

  sass/ - Nezkompilované SCSS súbory

  views/ - Pohľady

• js/ - Nezkompilované JavaScript súbory
• lang/ - Obsahuje súbory s frázami a ich preklady
• sass/ - Nezkompilované SCSS súbory
• views/ - Pohľady
• routes/ - Routovanie nášho webu, API, vlastných Artisan príkazov a kanálov pre WebSocket
• storage/ - Obsahuje súborové relácie používateľov, logy, možné skladisko pre nami vygenerované súbory a medzipamäť vygenerovaných Blade pohľadov a iných súborov
• tests/ - Automatizované testy pre otestovanie funkčnosti častí aplikácie
• vendor/ - Knižnice spravované cez Composer

Možno sa pýtate, kde je zložka s modelmi? Vo starších verziách na to bola určená zložka models/, od toho sa však opustilo. Vývojári frameworku považujem slovo "model" za nejednoznačné, pretože pre každého to môže znamenať niečo iné. Preto, ako už bolo spomenuté, je len na samotnom vývojári aplikácie, kam si modely bude ukladať. Vo väčšine prípadov sa ale používa iba zložka app/.

Aj keď sa zo začiatku môže zdať, že štruktúra frameworku je až príliš zložitá a rozvetvená, nezúfajte. Časom sa naučíme používať mnoho z dostupných komponentov a tým sa tiež budeme viac orientovať v našom projekte.

Vytvorenie nového projektu

Je na čase si vytvoriť nový projekt, s ktorým budeme pracovať v nadchádzajúcich lekciách. Základnej inštalácii a spustení novej Laravel aplikácie sme si už ukazovali v lekcii Inštalácia Laravel a sprevádzkovanie projektu. Náš projekt si pomenujeme ako laravel-cms (Laravel C ontent M anagement S YSTÉM).

Inštalácia Node.js

Na rozdiel od minulého projektu počítame s tým, že budeme tiež pracovať s front-end častí aplikácie. Preto potrebujeme niečo, čo sa nám bude starať o externé knižnice a skompiluje nami vytvorené súbory, ako sú CSS, JavaScript, SCSS a ďalšie. Z toho dôvodu si stiahneme a podľa inštrukcií nainštalujeme Node.js, ktorého inštalátor obsahuje aj práve potrebný systém balíčkov NPM. Tento Inštalátor možno stiahnuť zo sekcie download.

Podrobnú inštalácii Node.js možné prípadne nájsť v kurze Node.js.

Po dokončení inštalácie už len stačí v koreňovom priečinku projektu spustiť príkaz npm install, ktorý nám stiahne a pripraví potrebné knižnice do automaticky vytvoreného priečinka node_modules/.

Laravel UI

Ako už bolo spomenuté v lekcii Prvé aplikácie v Laravel, štýlovanie a využívanie front-end frameworkov bolo odstránené zo základu. Keďže sa však v tomto kurze chceme primárne venovať back-end časti webu a nechceme strácať čas zbytočným stylovaním, využijeme balíčka Laravel UI, kam boli tieto záležitosti presunuté.

V koreňovom priečinku projekte spustíme nasledujúci príkaz:

composer require laravel/ui --dev

Teraz môžeme využiť Artisan príkazu ui, kde odovzdáme typ front-end frameworku, ktorý chceme nainštalovať. Nebudeme totiž využívať všetko, čo je nám ponúkané (zaobídeme sa bez Vue a React):

php artisan ui bootstrap

Tým sa nám nainštalovali CSS framework Bootstrap a jQuery rozširujúce JavaScript. Poďme si teraz o nich niečo povedať.

Front-end frameworky

Bootstrap

Bootstrap je dokonalé riešenie pre projekty, ktoré sú najmä zamerané na back-end, a jeho vývojári sa tak nemusí starať o zložité dizajnovaní. Namiesto toho sa však využijú predpripravené štýly, ikonky a widgety vytvorené a importované práve týmto CSS frameworkom.

Na importovanie Bootstrap sa môžeme pozrieť do SCSS súboru resources/sass/app.scss, kde používame práve balík spravovaný cez NPM:

// Bootstrap
@import '~bootstrap/scss/bootstrap';

Bootstrap sa následne vloží do hlavného súboru po skompilovaniu a nemusíme ho teda linkovať z externej služby. To si však ukážeme v tomto seriáli neskôr.

JQuery

Ďalším pridaným front-end frameworkom je jQuery. Ten nám rozšíri JavaScript o dôležité funkcie a tým aj uľahčí prácu s HTML dokumentom.

Importovanie jQuery a ďalších balíčkov spravovaných cez NPM prebieha v JavaScript súboru resources/js/boostrap.js cez Node.js funkciu require():

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

Importované knižnice a frameworky sa opäť vloží do hlavného súboru po skompilovaniu. Ako však môžeme vidieť na časti súboru vyššie, nejedná sa o jediný externý balík, ktorý Laravel UI pri použití typu bootstrap definuje. jQuery a Bootstrap sú však hlavnými front-end frameworky, s ktorými budeme pracovať, a stojí za to si ich spomenúť.

Kompilácie front-end súborov

Kompletnému vysvetlenie a popísanie procesu kompilácie sa budeme venovať až v lekcii Jednoduchý redakčný systém v Laravel - Laravel Mix. Keďže by sme však bez tohto procesu nemali výslednej CSS a JS súbory s fungujúcimi frameworky spomínanými vyššie, musíme už teraz využiť jeden z dostupných príkazov. Pre jednoduchosť spustíme príkaz, ktorý nám odporučil balíček Laravel UI:

npm run dev

Konfigurovanie projektu

V ďalších lekciách budeme pracovať s databázou, a preto by sme sa mali tiež pozrieť na konfiguráciu nášho projektu. Tú prekvapivo nájdeme v súbore .env v koreňovom priečinku projektu. Premenné definované v tomto súbore sú následne využité konfiguračnými súbory v priečinku config/ a tieto premenné môžeme navyše využiť aj v našom vlastnom kóde.

V nasledujúcej časť súboru upravíme zmienené premenné na vlastné hodnoty:

APP_NAME="Laravel CMS"
APP_ENV=local
APP_KEY=base64:2QMv19PNck4Yo4VFsiLXhznApNffWzBccxfsfUvbKOc=
APP_DEBUG=true
APP_URL=http://localhost:8000

LOG_CHANNEL=stack

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_cms
DB_USERNAME=root
DB_PASSWORD=password

...

Ako si môžete všimnúť, viacslovné hodnoty musia byť uvedené v úvodzovkách. Toho využívame pri názve našej aplikácie definovaného premennou APP_NAME. Hodnota APP_KEY je už vygenerovaná z inštalácie, tú meniť nemusíme. Zmeníme však hodnotu premennej APP_URL na URL adresu odkazujúce na náš projekt. Nakoniec tiež upravíme súbor premenných definujúce nastavenie pripojenia k databáze, čo sa nám hodí do ďalšej lekcie.

Zvyšok premenných zatiaľ necháme tak, ako sú.

Ak je vo vašom .env súboru hodnotu premennej APP_KEY prázdna, použite príkaz php artisan key:generate pre vygenerovanie nového kľúča.

Teraz teda predpokladám, že už máme všetko nastavené. Tým ale aj táto lekcia končí. Všetko sme si pekne pripravili pre ďalšiu lekciu, Jednoduchý redakčný systém v Laravel - Migrácia , kde nás čaká ORM nad databázou a práca s migráciou.