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

V minulé lekci, Dokončení kalkulačky v Nette, která byla věnována spíše začátečníkům, jsme dokončili první jednoduchou aplikaci.

Dnes začneme nový projekt, kterým bude jednoduchý redakční systém s editorem článků. To je již zajímavější webová aplikace, na které si můžeme vyzkoušet další věci, které nám Nette nabízí (hlavně práci s databází).

K dispozici budeme mít také přihlášení

Dnešní díl bude věnován především struktuře našeho projektu a jeho základnímu nastavení.

Struktura projektu

Reálné komerční projekty mají spoustu tříd a určitě bychom si v nich nevystačili pouze s rozdělením struktury projektu na modely, presentery a šablony. Mít v jedné složce desítky souborů je minimálně nepřehledné. Kód by se špatně spravoval a z vlastní zkušenosti mohu říci, že byste se dostali 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?

Jmenné prostory a moduly

Třídy rozdělíme do logických skupin a určitě vás nepřekvapí, že za tímto účelem využijeme PHP jmenných prostorů. To je přesně ten nástroj určený k řešení problému s vysokým počtem tříd. Protože budeme počítat s tím, že náš projekt poroste, což je vždy dobré, nespokojíme se ani s jednoduchým rozdělením složek podle MVP do několika podsložek. Celou aplikaci rozdělíme ještě do tzv. Nette modulů.

Moduly ve webové aplikaci můžeme chápat jako samostatné části, ze kterých se aplikace skládá. Pokud si napíšeme jednou modul např. na Eshop, můžeme ho později dodat do ostatních projektů, které jsou na našem systému postavené a to aniž bychom něco složitě upravovali. V každém projektu budou zároveň jen ty moduly, které jsou zapotřebí, aby nebyl příliš složitý nebo abychom zákazníkovi prostě nedávali veškeré naše know-how. V tomto projektu si vytvoříme pouze jeden modul, který nazveme CoreModule (v Nette je oblíbený název také FrontModule):

• CoreModule - Hlavní jádro, které dokáže spravovat články a uživatele. Jedná se v podstatě o základní CMS (Content Management System - systém pro správu obsahu)

Mimochodem, všimněte si, že jsem moduly pojmenoval anglicky. Celý náš web budeme programovat v angličtině. Čeština je v programování pouze pro začátečníky a v reálných aplikacích by se objevovat neměla. Důvodem je zejména fakt, že se angličtině v kódu nevyhneme (už jen samotné PHP je anglicky a budeme používat i další třídy třetích stran) a míchat 2 jazyky do sebe je nepřehledné.

Potřebný software

Pro náš projekt budeme potřebovat klasicky webový server (např. Apache či přímo vestavěný PHP server) s PHP ve verzi 7.4 nebo vyšší a MySQL databázi (můžete použít i jinou SQL databázi, ale za funkčnost přiložených SQL skriptů pak neručím) a postavíme ho klasicky na Nette sandboxu ve verzi 3. Pokud nevíte, jak rozchodit webový server s databází, doporučuji článek Instalace Apache, MySQL a PHP na Windows a pokud nevíte, jak získat a zprovoznit sandbox, vřele doporučuji přečíst si Nette sandbox a IDE. Nyní tedy předpokládám, že máme před sebou čerstvý sandbox a my v něm provedeme několik následujících změn.

Úprava sandboxu

Za předpokladu, že jste to již neudělali, tak přímo do kořenové složky našeho projektu (sandboxu) si můžeme přidat .htaccess, který zajistí automatické přesměrování všech požadavků do složky www/. Tento soubor může vypadat třeba takto:

<IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteRule ^$ www/ [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteCond %{REQUEST_URI} !^www/
        RewriteRule ^(.*)$ www/$1
</IfModule>

Pokud se vám ale vestavěný PHP server z minula líbil, bude určitě lepší variantou (z důvodu bezpečnosti). Já osobně využiji také tento vestavěný PHP server. Pro připomenutí uvedu kód pro jeho spuštění z kořenové složky projektu:

php -S localhost:8000 -t www

Dále můžeme odstranit pro nás nepotřebné složky jako bin/, tests/, www/adminer/ a www/checker/ dle libosti (v rámci seriálu tyto nástroje nebudeme potřebovat, můžete je však využít).

Ti z vás, kteří používají Composer, mohou odlehčit i složce vendor/ od některých závislostí pomocí úpravy souboru composer.json. Konkrétně můžeme odstranit celou sekci require-dev a závislost na dg/adminer-custom, protože nette/tester ani Adminer potřebovat nebudeme. Pro aplikaci změn nezapomeňte spustit příkaz composer update.

Úprava složky app/

Dále se přesuneme do složky app/ a pokračujeme v úpravách.

Prvním důležitým krokem je přesun složky app/Presenters/templates/ i s jejím obsahem o úroveň výše do složky app/ a to kvůli vyhledávání výchozího @layout.latte z vnořených modulů.

Druhým krokem je vytvoření složky CoreModule/ pro náš modul a v ní konfigurační soubor i podsložky klasické Nette adresářové struktury:

• CoreModule/config/common.neon
• CoreModule/Model/
• CoreModule/Presenters/
• CoreModule/templates/

config/common.neon

Dále na konec hlavního konfiguračního souboru aplikace vložíme propojení s novým konfiguračním souborem našeho modulu:

...
# Propojení s dalšími konfiguračními soubory.
includes:
    - ../app/CoreModule/config/common.neon # Načtení konfigurace z CoreModule.

Úprava složky www/

Nakonec se ještě přesuneme do složky www/, kde uděláme poslední úpravy. Přidáme si vlastní CSS.

www/css/style.css

V globálním CSS souboru naší aplikace nahradíme stávající styly za následující:

body {
    font-family: verdana, serif;
    font-size: 14px;
    width: 900px;
    margin: 0 auto;
}

h1 {
    text-align: center;
    color: #444444;
    text-shadow: 3px 3px 3px #aaaaaa;
}

footer {
    font-size: 11px;
    text-align: center;
    padding-top: 20px;
}

article {
    text-shadow: 3px 3px 3px #aaaaaa;
}

nav ul {
    list-style-type: none;
}

nav li {
    float: left;
    margin-right: 15px;
}

nav a {
    background: #6FA4F8;
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    text-decoration: none;
    border: none;
}

nav a:hover {
    background: #2976f8;
    color: #EEEEEE;
    text-decoration: none;
}

input[type="submit"] {
    background: #6FA4F8;
    color: white;
    padding: 5px 10px;
    border-radius: 10px;
    border: 0;
}

input[type="submit"]:hover {
    background: #2976f8;
    color: #EEEEEE;
    cursor: pointer;
}

input[type="text"], input[type="email"], input[type="password"] {
    width: 250px;
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    padding: 0.3em;
}

input[type="submit"] {
    padding: 10px 25px;
    display: block;
    margin: 20px auto 0;
    font-weight: bold;
}

textarea {
    border-radius: 5px;
    border: 1px solid #aaaaaa;
    width: 483px;
    height: 90px;
}

.message {
    border: 1px solid #9DC2F8;
    background: #DBE8F8;
    padding: 3px;
}

Pokud jsme vše udělali správně, měli bychom být stále schopni spustit web, vidět výchozí stránku sandboxu a naše adresářová struktura by měla vypadat asi takto:

• app/ - Zdrojové kódy naší aplikace
  • config/ - Konfigurační soubory aplikace
  • CoreModule/ - Hlavní modul jádra naší aplikace
    • config/ - Konfigurační soubory modulu
    • Model/ - Třídy modelu modulu
    • Presenters/ - Presentery modulu
    • templates/ - Šablony modulu
  • Forms/ - Třídy formulářových komponent
  • Model/ - Třídy modelu
  • Presenters/ - Presentery
  • Router/ - Třída/y routeru
  • templates/ - Šablony (obsahuje další podsložky pro jednotlivé presentery)
    • ...
• log/ - Soubory logování (např. chyb)
• temp/ - Dočasné soubory (např. cache)
• vendor/ - Knihovny poskládané pomocí nástroje Composer
• www/ - Soubory webového obsahu
  • css/ - CSS soubory
  • js/ - JavaScript soubory

Vše jsme si hezky připravili a tímto dnešní lekce končí.

V další lekci, Jednoduchý redakční systém v Nette - Výpis článku, se rovnou vrhneme na programování. Vytvoříme si databázi a začneme pracovat na CoreModule

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.