Lekce 5 - Jednoduchý redakční systém v Laravel - Struktura projektu

V předešlém cvičení, Řešené úlohy k 1.-4. lekci frameworku Laravel pro PHP, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Dnes začneme s novým projektem a to právě se slíbeným jednoduchým redakčním systémem. Tento projekt už může být pro některé zajímavější, jelikož si vyzkoušíme práci s dalšími komponentami, které nám Laravel nabízí. Jedna z těchto komponent je například Eloquent, jenž zajišťuje ORM pro práci s databází. V dnešní lekci si však projdeme strukturu projektu a to také kvůli tomu, že tentokrát si už musíme projekt nastavit.

Struktura Laravel projektu

Reálné komerční projekty mají spoustu tříd a souborů a určitě bychom si v nich nevystačili pouze s rozdělením struktury projektu na kontrolery, modely a pohledy. Mít v jedné složce desítky souborů je minimálně nepřehledné. Kód by se špatně spravoval a dostali byste se do bodu, kdy byste psali podobné metody znovu a znovu místo toho, abyste parametrizovali nějakou existující, protože byste zkrátka ani nevěděli, že v projektu nějaká podobná již je. A to je začátek konce. Jak z toho ven?

Třídy rozdělíme do logických skupin a určitě vás nepřekvapí, že za tímto účelem využijeme jmenných prostorů. To je přesně ten nástroj určený k řešení právě problému s vysokým počtem tříd. Laravel však není pouze jednoduchý MVC framework. Obsahuje velké množství komponent, se kterými můžeme pracovat, tudíž si nevystačíme ani s jednoduchým rozdělením do několika složek.

Laravel nám dává svobodu nad uspořádáním našeho projektu. Nevytváříme si tak žádné moduly a ani se projekt nerozděluje na "balíčky". Hlavním kritériem pro rozdělení tříd a jiných souborů je jejich úloha. Každá část logiky aplikace má tedy nějakou vlastní hlavní složku, kam patří, a už je jen následně na nás, jestli si v těchto složkách vytvoříme podsložky pro jednotlivé části aplikace (například administrace článků), nebo ne. Každopádně vytváření podsložek se určitě hodí pro větší aplikace (lepší orientace, kam co patří) a my toto aplikujeme na našem projektu.

Struktura frameworku

Pojďme si nyní popsat výchozí strukturu Laravel frameworku, kterou budeme v následujících lekcích také rozšiřovat. Momentálně adresářová struktura naší aplikace vypadá následovně:

• app/ - Obsahuje jádro naší aplikace a zahrnuje všechny různé komponenty od kontrolerů až po vlastní události
  • Console/ - Vlastní Artisan příkazy Laravel konzole. Stejně jako existuje příkaz make:controller, který jsme použili v lekci První aplikace v Laravel, si můžeme vytvářet své vlastní. K tomu se však dostaneme v dalších lekcích
  • Exceptions/ - Výjimky
  • Http/ - Obsahuje téměř vše ohledně logiky zpracovávající požadavky
    • Controllers/ - Kontrolery
    • Middleware/ - Middleware třídy
  • Models/ - Modely
  • Providers/ - Obsahuje třídy, které se nám starají například o registrování vlastních událostí nebo nastavení zpracovávání požadavků
• bootstrap/ - Obsahuje zavádějící soubor frameworku a také mezipaměť vygenerovaných rout a balíčků. Této složky se během našeho projektu ani nedotkneme
• config/ - Obsahuje konfiguraci projektu
• database/ - Obsahuje databázové migrace a třídy pro zaplnění databázových tabulek falešnými daty
• public/ - Kořenový adresář celého webu (přístupový bod, kde všechny umístěné soubory jsou přístupné zvenčí). Také obsahuje soubor index.php, který zpracovává všechny požadavky na web
  • css/ - CSS soubory
  • js/ - JavaScript soubory
• resources/ - Obsahuje nezkompilované zdrojové soubory pro front-end a překlady aplikace
  • css/ - Nezkompilované CSS soubory
  • js/ - Nezkompilované JavaScript soubory
  • lang/ - Obsahuje soubory s frázemi a jejich překlady
  • sass/- Nezkompilované SCSS soubory
  • views/ - Pohledy
• routes/ - Routování našeho webu, API, vlastních Artisan příkazů a kanálů pro WebSocket
• storage/ - Obsahuje souborové relace uživatelů, logy, možné skladiště pro námi vygenerované soubory a mezipaměť vygenerovaných Blade pohledů a dalších souborů
• tests/ - Automatizované testy pro otestování funkčnosti částí aplikace
• vendor/ - Knihovny spravované přes Composer

I když se ze začátku může zdát, že struktura frameworku je až příliš složitá a rozvětvená, nezoufejte. Časem se naučíme používat mnoho z dostupných komponent a tím se také budeme více orientovat v našem projektu.

Vytvoření nového projektu

Je na čase si vytvořit nový projekt, se kterým budeme pracovat v nadcházejících lekcích. Základní instalaci a spuštění nové Laravel aplikace jsme si již ukazovali v lekci Instalace Laravel a zprovoznění projektu. Náš projekt si pojmenujeme jako laravel-cms (Laravel Content Management System).

Instalace Node.js

Na rozdíl od minulého projektu počítáme s tím, že budeme také pracovat s front-end částí aplikace. Proto potřebujeme něco, co se nám bude starat o externí knihovny a zkompiluje námi vytvořené soubory, jako jsou CSS, JavaScript, SCSS a další. Z toho důvodu si stáhneme a podle instrukcí nainstalujeme Node.js, jehož instalátor obsahuje i právě potřebný systém balíčků npm. Tento instalátor lze stáhnout ze sekce download.

Podrobnou instalaci Node.js lze případně nalézt v kurzu Node.js.

Po dokončení instalace již pouze stačí v kořenové složce projektu spustit příkaz npm install, jenž nám stáhne a připraví potřebné knihovny do automaticky vytvořené složky node_modules/.

Laravel UI

Jak už bylo zmíněno v lekci První aplikace v Laravel, stylování a využívání front-end frameworků bylo odstraněné ze základu ve verzi 6.0.0. Jelikož se však v tomto kurzu chceme primárně věnovat back-end části webu a nechceme ztrácet čas zbytečným stylováním, využijeme balíčku Laravel UI, kam byly tyto záležitosti přesunuté.

I když vývojáři frameworku Laravel doporučují jejich nový balíček Jetstream, který krom stylů a uživatelského systému též obsahuje funkčnost, jako jsou týmy nebo API klíče, nejedná se o vhodné řešení pro nováčky. Daná knihovna je totiž až moc komplexní a z toho důvodu se jí zde zabývat nebudeme.

V kořenové složce projektu spustíme následující příkaz:

composer require laravel/ui --dev

Nyní můžeme využít Artisan příkazu ui, kde předáme typ front-end frameworku, jejž chceme nainstalovat. Nebudeme totiž využívat vše, co je nám nabízeno (obejdeme se bez Vue a React):

php artisan ui bootstrap

Tím se nám do projektu přidaly CSS framework Bootstrap a jQuery rozšiřující JavaScript. K jejich instalaci použijeme následující příkaz, jenž nám byl doporučen samotným balíčkem:

npm install

Pojďme si teď ale o nich něco říct.

Front-end frameworky

Bootstrap

Bootstrap je dokonalé řešení pro projekty, které jsou zejména zaměřené na back-end, a jeho vývojáři se tak nemusí starat o složité designování. Místo toho se však využijí předpřipravené styly, ikonky a widgety vytvořené a naimportované právě tímto CSS frameworkem.

Na importování Bootstrap se můžeme podívat do SCSS souboru resources/sass/app.scss, kde používáme právě balíček spravovaný přes npm:

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

Bootstrap se následně vloží do hlavního souboru po zkompilování a nemusíme ho tedy linkovat z externí služby. Linkování našich souborů si však ukážeme v tomto seriálu později.

jQuery

Dalším přidaným front-end frameworkem je jQuery. Ten nám rozšíří JavaScript o důležité funkce a tím i ulehčí práci s HTML dokumentem.

Importování jQuery a dalších balíčků spravovaných přes npm probíhá v JavaScript souboru resources/js/boostrap.js přes Node.js funkci require():

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

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

Importované knihovny a frameworky se opět vloží do hlavního souboru po zkompilování. Jak však můžeme vidět na části souboru výše, nejedná se o jediný externí balíček, který Laravel UI při použití typu bootstrap definuje. jQuery a Bootstrap jsou však hlavními front-end frameworky, se kterými budeme pracovat, a stojí za to si je zmínit.

Kompilace front-end souborů

Kompletnímu vysvětlení a popsání procesu kompilace se budeme věnovat až v lekci Jednoduchý redakční systém v Laravel - Laravel Mix. Jelikož bychom však bez tohoto procesu neměli výsledné CSS a JS soubory s fungujícími frameworky zmíněnými výše, musíme již nyní využít jeden z dostupných příkazů. Pro jednoduchost spustíme příkaz, který nám doporučil balíček Laravel UI:

npm run dev

Konfigurování projektu

V dalších lekcích budeme pracovat s databází, a proto bychom se měli také podívat na konfiguraci našeho projektu. Tu překvapivě najdeme v souboru .env v kořenové složce projektu. Proměnné definované v tomto souboru jsou následně využité konfiguračními soubory ve složce config/ a tyto proměnné můžeme navíc využít i v našem vlastním kódu.

V následující část souboru upravíme zmíněné proměnné na vlastní hodnoty:

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

LOG_CHANNEL=daily

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

...

Jak si můžete všimnout, víceslovné hodnoty musí být uvedené v uvozovkách. Toho využíváme u názvu naší aplikace definovaného proměnnou APP_NAME. Hodnota APP_KEY je už vygenerovaná z instalace, tu měnit nemusíme. Změníme však hodnotu proměnné APP_URL na URL adresu odkazující na náš projekt. Také se hodí upravit nastavení LOG_CHANNEL na hodnotu daily. Nakonec také upravíme skupinu proměnných definující nastavení připojení k databázi, což se nám hodí do další lekce.

Zbytek proměnných zatím necháme tak, jak jsou.

Pokud je ve vašem .env souboru hodnota proměnné APP_KEY prázdná, použijte příkaz php artisan key:generate pro vygenerování nového klíče.

Nyní tedy předpokládám, že již máme vše nastavené. Tím ale také tato lekce končí.

V další lekci, Jednoduchý redakční systém v Laravel - Migrace, nás čeká ORM nad databází a práce s migracemi.

 

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.