BF Summer sales
Pouze tento týden sleva až 80 % na HTML & CSS a JavaScript
80 % bodů zdarma na online výuku díky naší Letní akci!

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

V minulé lekci, Dokončení kalkulačky v Laravel, která byla věnovaná především základům a vysvětlení nezbytných principů, jsme dokončili velmi jednoduchou aplikaci.

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
    • 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
    • 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

Možná se ptáte, kde je složka s modely? Ve dřívějších verzích k tomu byla určená složka models/, od toho se však opustilo. Vývojáři frameworku považuji slovo "model" za nejednoznačné, protože pro každého to může znamenat něco jiného. Proto, jak už bylo zmíněno, je pouze na samotném vývojáři aplikace, kam si modely bude ukládat. Ve většině případů se ale používá pouze složka app/.

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.

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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é.

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 ještě následující příkaz:

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.


 

Předchozí článek
Dokončení kalkulačky v Laravel
Všechny články v sekci
Laravel framework pro PHP
Článek pro vás napsal Jan Lupčík
Avatar
Jak se ti líbí článek?
4 hlasů
Autor se primárně věnuje vývoji webových stránek a aplikacích v PHP (speciálně ve frameworku Laravel) a je jedním z vývojářů komunitní modifikace TruckersMP.
Aktivity (13)

 

 

Komentáře
Zobrazit starší komentáře (3)

Avatar
Milan
Člen
Avatar
Milan :14.12.2019 12:53

Ahoj,
príkazový riadok mi vyhadzuje chybu aj keď mám PHP 7.2.10
a neviem ako to opraviť.

*****[InvalidAr­gumentExcepti­on]
Package laravel/ui at version has a PHP requirement incompatible with your PHP version (5.6.38)

require [--dev] [--prefer-source] [--prefer-dist] [--no-progress] [--no-suggest] [--no-update] [--no-scripts] [--update-no-*dev] [--update-with-dependencies] [--update-with-all-dependencies] [--ignore-platform-reqs] [--prefer-stable] [--prefer-lowest] [--sort-packages] -o -a [--apcu-autoloader] [--] [<packages>]...****

 
Odpovědět
14.12.2019 12:53
Avatar
Tomáš Kreisinger:28.12.2019 21:52

Vytvářel jsem projekt podle návodu.
Čistý LARAVEL mi vyšel na cca 34MB, pak jsem podle návodu pustil "npm install", který ovšem zjevně nainstaloval asi všechny balíčky nmp, protože projekt nakynul na cca 120MB a cca 21 tisíc souborů, což se mi jeví zoufale hodně.......
Nemělo by tam být "npm install boostrap" ? Nebo bude něco chybět?

 
Odpovědět
28.12.2019 21:52
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Tomáš Kreisinger
Jan Lupčík:23. ledna 21:23

Ahoj, již předem se omlouvám za pozdější odpověď. Zřejmě mi unikla tvá otázka.
Můžeš tak učinit, avšak nebude ti poté fungovat kompilace assetů a celkově se tvá práce stane těžší. Pokud jde o velikost, nemyslím si, že se jedná zrovna až o tak velký problém, jelikož node_modules se na server nenahrávají (na rozdíl od složky vendor/; ta se také nenahrává, ale instaluje přes Composer, a je podstatná pro běh webové aplikace).

Odpovědět
23. ledna 21:23
TruckersMP vývojář
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Milan
Jan Lupčík:23. ledna 21:25

Zřejmě máš chybu v konfiguraci serveru. Zkus spustit příkaz v konzoli php --version. Jestliže se zobrazuje jiná verze než 7.2.10, kterou zmiňuješ ty, zkus PHP znovu nainstalovat. Avšak nedokážu ti poskytnout přesný návod. Nevím, jestli máš Windows nebo Unix

Odpovědět
23. ledna 21:25
TruckersMP vývojář
Avatar
Odpovídá na Jan Lupčík
Tomáš Kreisinger:23. ledna 21:43

Díky za odpověď. Zatím jsem na to šel přes integraci jako na jakékoliv jiné stránky. Pochopil jsem to správně, že vytvářený projekt má adresáře, které se potom do produkce nekopírují? :-) to jsem tedy něco zaspal :-)

 
Odpovědět
23. ledna 21:43
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Tomáš Kreisinger
Jan Lupčík:23. ledna 22:12

To jsem v seriálu nezmiňoval, jelikož soubory, které by neměly být na produkci, se nenacházejí ani v Gitovým repositáři (což je definováno .gitignore soubory). Jediný, co se musí doinstalovat, jsou knihovny spravované Composerem přes příkaz: composer install --optimize-autoloader --no-dev
Více informací lze nalézt v oficiální dokumentaci

Ve výsledku se tedy vynechá pouze složka node_modules. Vše ostatní složky jsou potřebné. Avšak pokud nahraješ i knihovny spravované přes npm, nevadí to ničemu

Odpovědět
23. ledna 22:12
TruckersMP vývojář
Avatar
Odpovídá na Jan Lupčík
Jaroslav Patrný:20. února 2:32

Po spuštění příkazu

npm run dev

mám chybu viz příloha. Log je u následující lekce. Jinak je vše O.K. :-), až na ten frontend. Jinak práce v PHPStormu je úplně jiný level než v NetBeans.

 
Odpovědět
20. února 2:32
Avatar
Jan Lupčík
Super redaktor
Avatar
Odpovídá na Jaroslav Patrný
Jan Lupčík:20. února 9:31

Ahoj, pracoval jsi podle článku? Chybí ti totiž node_modules/, tudíž jsi nejspíše nespustil instalaci. Tu můžeš nechat proběhnout pomocí příkazu npm install, jak je zmíněno v článku, popř. můžeš zkusit si stáhnout archiv z článku a v té verzi nechat zkompilovat assety.
Taky bych tě rád požádal, abys tohle neposílal pod více článků. Dotazy sleduji a vidím, avšak nestíhám odpovídat ihned.

Odpovědět
20. února 9:31
TruckersMP vývojář
Avatar
Jaroslav Patrný:21. února 7:28

Ahoj, pracoval jsem podle článku. Vím, že to tak vypadalo jak píšeš, ale node_modules/ tam byly. Odinstaloval jsem Node.js, smazal node_modules/, nainstaloval nejnovější verzi 13.9.0 (npm 6.13.7), výsledek byl ale stejný, až po druhém pokusu to už chodí.
Díky za rady i za tutoriál, studuju už 8. lekci. Jinak dotaz jsem dal znova, protože jsem ho chtěl dát pod lekci kam patří a ten původní mi samozřejmě nešel smazat, ne že bych chtěl "spamovat".

 
Odpovědět
21. února 7:28
Avatar
Jan Štěch
Super redaktor
Avatar
Odpovídá na Jaroslav Patrný
Jan Štěch:15. června 12:08

Stejný problém. Nemusel jsem nic přeinstalovávat, stačilo mi znovu spustit npm install. Stejně je to ale zvláštní... :-S

 
Odpovědět
15. června 12:08
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 13. Zobrazit vše