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 bych se tak chtěl posunout někam dál. 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, co nám Nette nabízí (hlavně práci s databází). Konkrétně dnešní díl bude tedy 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 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. 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 MVP do několika podsložek. Celou aplikaci rozdělíme ještě do tzv. Nette modulů.

Modulů je ve webové aplikaci obvykle poměrně nízký počet (např. kolem 3) a můžeme je 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, správa 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é.

Struktura webu

Pro náš projekt budeme potřebovat klasicky webový server (např. Apache) s PHP ve verzi 5.3.1 nebo vyšší a MySQL databázi (můžete použít i jinou SQL databázi, ale za funkčnost SQL skriptů pak neručím) a postavíme ho klasicky na Nette sandboxu ve verzi 2.3.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 přidáme .htaccess, který zajistí automatické přesměrování všech požadavků do složky www/. Tento soubor samozřejmě najdete v přiloženém archívu a 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>

• Poté můžeme odstranit pro nás nepotřebné složky jako bin/, tests/ a temp/sessions/.
• Pro ty z vás, kteří používají Composer, můžeme odlehčit vendor/ od některých závislostí a to konkrétně od celého require-dev, protože nette/tester potřebovat nebudeme a potom od dg/adminer-custom, protože Adminer také potřebovat nebudeme. Pak nezapomeňte spustit:

composer update

Konfigurace složky app/

Dále, už zase my všichni, se přesuneme do složky app/ a pokračujeme v nastavování a mazání nepotřebného:

• Prvním důležitým krokem je přesun složky app/presenters/templates o úroveň výše, do složky app/, kvůli vyhledávání výchozího @layout.latte z vnořených modulů.
• Poté zde smažeme složku forms/, kde je předpřipravený formulář pro přihlašování, který ale nebudeme potřebovat a naopak zde vytvoříme obecnější adresář components/ pro naše budoucí komponenty. Bohužel po smazání složky forms/ musíme smazat ještě ještě presenters/SignPresenter.php a složku templates/Sign/, kvůli nenaplněným závislostem a v souboru config/config.neon umazat řádku - App\Forms\SignFormFactory.
• Dále zde vytvoříme složku pro náš modul CoreModule a v ní podsložky a soubory klasické Nette adresářové struktury např.: CoreModule/model/, CoreModule/config/config.neon, CoreModule/components/ a CoreModule/templates/. A do vytvořeného souboru config.neon doplníme následující:

# Konfigurační soubor pro CoreModule.

parameters:

# Nastavení služeb dále přístupných pomocí DI v rámci celé aplikace.
services:

• Dále pak na konec globálního konfiguračního souboru app/config/config.neon vložíme konfigurační soubory z obou modulů takto:

# Vložení konfiguračních souborů z jednotlivých modulů.
includes:
    - ../CoreModule/config/config.neon

Konfigurace složky www/

Nakonec se ještě přesuneme do složky www/, kde uděláme pár posledních úprav:

• Smažeme zde složku adminer/, kterou nebudeme potřebovat.
• Vymažeme obsah složky images/, opět je zbytečný.
• Můžeme si zde také rovnou vytvořit složky, které využijeme později a to files/ a fonts/.
• A v neposlední řadě zavedeme vlastní CSS a to tak že upravíme soubor css/style.css takto:

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:

Tímto dnešní lekce končí. Vše jsme si hezky připravili a příště, v lekci Jednoduchý redakční systém v Nette - Výpis článku, se tedy rovnou vrhneme na programování. Vytvoříme si databázi a začneme pracovat na CoreModule