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

V minulej lekcii, Dokončenie kalkulačky v Nette , ktorá bola venovaná skôr začiatočníkom, sme dokončili prvú jednoduchú aplikáciu. Dnes by som sa tak chcel posunúť niekam ďalej. Začneme nový projekt, ktorým bude jednoduchý redakčný systém s editorom článkov. To je už zaujímavejšie webová aplikácia, na ktoré si môžeme vyskúšať ďalšie veci, ktoré nám Nette ponúka (hlavne prácu s databázou). Dnešný diel bude venovaný predovšetkým štruktúre nášho projektu a jeho základnému nastaveniu.

Štruktúra projektu

Reálne komerčné projekty majú veľa tried a určite by sme si v nich nevystačili len s rozdelením štruktúry projektu na modely, Presenter a šablóny. Mať v jednej zložke desiatky súborov je minimálne neprehľadné. Kód by sa zle spravoval az vlastnej skúsenosti môžem povedať, že by ste sa dostali 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?

Menné priestory a moduly

Triedy rozdelíme do logických skupín a určite vás neprekvapí, že na tento účel využijeme PHP menných priestorov. To je presne ten nástroj určený na riešenie problému s vysokým počtom tried. Pretože budeme počítať s tým, že náš projekt porastie, čo je vždy dobré, neuspokojíme sa ani s jednoduchým rozdelením zložiek podľa MVP do niekoľkých podpriečinkov. Celú aplikáciu rozdelíme ešte do tzv. Nette modulov.

Moduly vo webovej aplikácii môžeme chápať ako samostatné časti, z ktorých sa aplikácia skladá. Pokiaľ si napíšeme raz modul napr. Na Eshop, môžeme ho neskôr dodať do ostatných projektov, ktoré sú na našom systéme postavené a to bez toho aby sme niečo zložito upravovali. V každom projekte budú zároveň len tie moduly, ktoré sú potrebné, aby nebol príliš zložitý alebo aby sme zákazníkovi jednoducho nedávali všetko naše know-how. V tomto projekte si vytvoríme iba jeden modul, ktorý nazveme CoreModule (v Nette je obľúbený názov tiež FrontModule):

• CoreModule - Hlavné jadro, ktoré dokáže spravovať články a užívateľa. Ide v podstate o základnú CMS (C ontent M anagement S YSTÉM - systém pre správu obsahu)

Mimochodom, všimnite si, že som moduly pomenoval anglicky. Celý náš web budeme programovať v angličtine. Čeština je v programovaní len pre začiatočníkov a v reálnych aplikáciách by sa objavovať nemala. Dôvodom je najmä fakt, že sa angličtine v kóde nevyhneme (už len samotné PHP je anglicky a budeme používať aj ďalšie triedy tretích strán) a miešať 2 jazyky do seba je neprehľadné.

Potrebný softvér

Pre náš projekt budeme potrebovať klasicky webový server (napr. Apache) s PHP vo verzii 5.6 alebo vyšší a MySQL databázu (môžete použiť aj inú SQL databáze, ale za funkčnosť priložených SQL skriptov potom neručím) a postavíme ho klasicky na Nette sandboxe vo verzii 2.4. Ak neviete, ako rozchodiť webový server s databázou, odporúčam článok Inštalácia Apache, MySQL a PHP na Windows a ak neviete, ako získať a sprevádzkovať sandbox, vrelo odporúčam prečítať si Nette sandbox a IDE. Teraz teda predpokladám, že máme pred sebou čerstvý sandbox a my v ňom vykonáme niekoľko nasledujúcich zmien.

Úprava sandboxe

Za predpokladu, že ste to už neurobili, tak priamo do koreňového priečinka nášho projektu (sandboxe) si pridáme .htaccess, ktorý zabezpečí automatické presmerovanie všetkých požiadaviek do zložky www/. Tento súbor samozrejme nájdete v priloženom archíve a môže vyzerať napríklad 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>

Ďalej môžeme odstrániť pre nás nepotrebné zložky ako bin/, tests/, www/adminer/ a www/checker/ podľa ľubovôle (v rámci seriálu tieto nástroje nebudeme potrebovať).

Tí z vás, ktorí používajú Composer, môžu odľahčiť aj zložke vendor/ od niektorých závislostí pomocou úpravy súboru composer.json. Konkrétne môžeme odstrániť celú sekciu require-dev a závislosť na dg/adminer-custom, pretože nette/tester ani Adminer potrebovať nebudeme. Pre aplikáciu zmien nezabudnite spustiť príkaz composer update

Úprava zložky app /

Ďalej, už zase všetci, sa presunieme do zložky app/ a pokračujeme v úpravách.

Prvým dôležitým krokom je presun zložky app/presenters/templates/ is jej obsahom o úroveň vyššie do zložky app/ a to kvôli vyhľadávania predvoleného @layout.latte z vnorených modulov.

Druhým krokom je vytvorenie zložky CoreModule/ pre náš modul a v nej konfiguračný súbor aj podpriečinky klasické Nette adresárovej štruktúry:

• CoreModule/config/config.neon
• CoreModule/model/
• CoreModule/presenters/
• CoreModule/templates/

App / config / config.neon

Ďalej na koniec hlavného konfiguračného súboru programu vložíme prepojenie s novým konfiguračným súborom nášho modulu:

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

Úprava zložky www /

Nakoniec sa ešte presunieme do zložky www/, kde urobíme pár posledných úprav. Najskôr tu môžeme zmazať obsah zložky images/, pretože je opäť zbytočný. V neposlednom rade potom pridáme vlastný CSS.

Www / css / style.css

V globálnom CSS súboru našej aplikácie nahradíme existujúce štýly za nasledovné:

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;
}

Ak sme všetko urobili správne, mali by sme byť stále schopní spustiť web, vidieť predvolenú stránku sandboxe a naše adresárová štruktúra by mala vyzerať asi takto:

• app/ - Zdrojové kódy našej aplikácie config/ - Konfiguračné súbory aplikácie

  CoreModule/ - Hlavné modul jadra našej aplikácie config/ - Konfiguračné súbory modulu

  model/ - Triedy modelu modulu

  presenters/ - Presenter modulu

  templates/ - Šablóny modulu

  forms/ - Triedy formulárových komponentov

  model/ - Triedy modelu

  presenters/ - Presenter

  router/ - Trieda / y routeru

  templates/ - Šablóny (obsahuje ďalšie podpriečinky pre jednotlivé Presenter) ...

• config/ - Konfiguračné súbory aplikácie
• CoreModule/ - Hlavné modul jadra našej aplikácie config/ - Konfiguračné súbory modulu

  model/ - Triedy modelu modulu

  presenters/ - Presenter modulu

  templates/ - Šablóny modulu

• config/ - Konfiguračné súbory modulu
• model/ - Triedy modelu modulu
• presenters/ - Presenter modulu
• templates/ - Šablóny modulu
• forms/ - Triedy formulárových komponentov
• model/ - Triedy modelu
• presenters/ - Presenter
• router/ - Trieda / y routeru
• templates/ - Šablóny (obsahuje ďalšie podpriečinky pre jednotlivé Presenter) ...
• ...
• log/ - Súbory logovanie (napr. chýb)
• temp/ - Dočasné súbory (napr. cache)
• vendor/ - Knižnice poskladané pomocou nástroja Composer
• www/ - Súbory webového obsahu css/ - CSS súbory

  images/ - Obrázky

  js/ - JavaScript súbory

• css/ - CSS súbory
• images/ - Obrázky
• js/ - JavaScript súbory

Týmto dnešnej lekcie končí. Všetko sme si pekne pripravili a nabudúce, v lekcii Jednoduchý redakčný systém v Nette - Výpis článku , sa teda rovno vrhneme na programovanie. Vytvoríme si databázu a začneme pracovať na CoreModule

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.