Halloweenská akce! Na stránce s dobitím bodů zadej dole kód STRASIDELNYCH20 a získej porci +20% bodů zdarma!
Akce končí 31.10. o půlnoci.

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

PHP Nette Framework Základy Jednoduchý redakční systém v Nette - Struktura projektu

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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, které 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 PHP 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 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) s PHP ve verzi 5.6 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 2.4. 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>

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

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, už zase všichni, 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/config.neon
  • CoreModule/model/
  • CoreModule/presenters/
  • CoreModule/templates/

app/config/con­fig.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:
    - ../CoreModule/config/config.neon # Načtení konfigurace z CoreModule.

Úprava složky www/

Nakonec se ještě přesuneme do složky www/, kde uděláme pár posledních úprav. Nejdříve zde můžeme smazat obsah složky images/, jelikož je opět zbytečný. V neposlední řadě pak přidáme 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
    • images/ - Obrázky
    • js/ - JavaScript soubory

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


 

Stáhnout

Staženo 455x (1.19 MB)
Aplikace je včetně zdrojových kódů v jazyce PHP

 

 

Článek pro vás napsal Jindřich Máca
Avatar
Jak se ti líbí článek?
20 hlasů
Autor se věnuje převážně webovým technologiím, ale má velkou zálibu ve všem vědeckém, nejen ze světa IT. :-)
Miniatura
Předchozí článek
Dokončení kalkulačky v Nette
Miniatura
Všechny články v sekci
Základy Nette frameworku
Aktivity (6)

 

 

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

Avatar
Zkusto s.r.o.:3.10.2016 21:44

Když přesunu složku "templates" o úroveň výše, tak přestane fungovat error presenter, respektive nenačte šablonu. Když složku vrátím, tak 404 chyba funguje jinak je chyba 500.

Možná jsem něco přehlédl, ale nepřišel jsem na to, čím to může být.

 
Odpovědět 3.10.2016 21:44
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Zkusto s.r.o.
Jindřich Máca:3.10.2016 23:14

Tak ji klidně nech tam, kde je... :-D

 
Odpovědět 3.10.2016 23:14
Avatar
danhosek
Člen
Avatar
danhosek:16.10.2016 21:28

Ahoj, ještě si chci opravit ještě jednu chybu. Jde o načtení css souborů do latte, sčímž je něaký problém.
Css soubory mám ve složce www/css a link na ně v layout.latte:
<link rel="stylesheet" type="text/css" href="{$basePat­h}/css/animate­.css">
<link rel="stylesheet" type="text/css" href="{$basePat­h}/css/style.css">
úplně totéž mám v app\CoreModule\tem­plates\Article uvod.latte (šablona pro úvodní článek).
V uvod se css načtou, ale v layoutu se ne něak moc nevím {$baseath} se definuje v .htaccess? takže nastaví base na www? a pro všechny soubory, které směřují do www/ dám na začátek {$basePath}?(myslim .js soubory a img).
Děkuji.

 
Odpovědět 16.10.2016 21:28
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na danhosek
Jindřich Máca:17.10.2016 15:12

No nazdar... Můžeš mi říct, jak se Ti takhle daří plést páté přes deváté? :D

Takže hezky popořadě si to ujasníme.

  1. Proměnou {$basePath} dosazuje Latte do šablon automaticky a standardně odpovídá právě složce www/. V souboru .htaccess se dá také definovat, ale tyto dvě spolu mají pramálo společného.
  2. Šablona @layout.latte se používá úplně vždycky, pokud si to nevynutíš jinak, a teprve do ní se vkládá obsah šablon jednotlivých akcí presenterů. Navzdory tomu, sama o sobě se nikdy neaplikuje, protože samostatně neodpovídá žádné akci presenteru.
  3. V šabloně layout máš tedy následující styly:
<link rel="stylesheet" type="text/css" href="{$basePath}/css/animate.css">
<link rel="stylesheet" type="text/css" href="{$basePath}/css/style.css">

Za předpokladu, že jsou styly správně umístěny ve složce www/ to znamená, že ony styly se Ti díky výše uvedeným vlastnostem @layout.latte aplikují v rámci každé stránky, kterou v projektu máš, pokud sis to nenastavil jinak.

Takže tohle jsou věci, které jsem z Tvého příspěvku pochopil. Můžeš mi pak ale vysvětlit, co znamenají výroky

úplně totéž mám v app\CoreModule\tem­plates\Article uvod.latte

nebo

V uvod se css načtou, ale v layoutu se ne něak moc nevím {$baseath} se definuje v .htaccess?

Nejen, že tam jsou překlepy, ale minimálně ta druhá věta nedává vůbec smysl...

Takže doufám, že Ti můj příspěvek objasnil alespoň část z Tvých dotazů, na zbytek se hold budeš muset zeptat znovu a lépe. :)

Editováno 17.10.2016 15:13
 
Odpovědět 17.10.2016 15:12
Avatar
danhosek
Člen
Avatar
danhosek:17.10.2016 18:42

Jsem to napsal nepochopitelně, za to se omlouvám.
Mám pro úvodní článek zvláštní šablonu, v ArticleManager mám nastaveno:

if (!$url or $url == self::DEFAULT_ARTICLE_URL){
            $url = self::DEFAULT_ARTICLE_URL;
            $this->template->setFile(__DIR__ . "/../templates/Article/uvod.latte");

aby úvodní článek vypadal jinak.
zbytek vemu se vkládá do layoutu jak má, čímž je layout základ zbylého webu mimo úvod.
Na úvodní stránce se šablona zobrazuje správně a css styly se načtou, ale když najedu na zbytek webu (např.: výpis článků), který se zobrazuje přes layout, tak se css nenačtou. U obou latte šablon je to udělané úplně stejně a přesto to u jednoho se cdd načtou a u druhého ne.
I když u obou šablon ve zdrojovém kˇodu jsou css odkazovány na neeistující složku
href="css/ani­mate.css"
U {$basePath} mě zajímalo právě to, zda to nastaví cestu do složky /www/ a jestli to určí tuto složku pomocí .htaccess, na což jsi mi odpověděl :).

 
Odpovědět 17.10.2016 18:42
Avatar
danhosek
Člen
Avatar
Odpovídá na danhosek
danhosek:18.10.2016 1:32

Už jsem přišel, v čem byl problém. Měl jsem to udělané správně, ale zobrazoval se starý obsah, tak jsem smazal obsah \temp\cache\latte , čímž se pohledy udělali nové a funkční. :-)

 
Odpovědět 18.10.2016 1:32
Avatar
T-fon
Člen
Avatar
T-fon:8.11.2017 10:36

Díky mj. za návod na .htaccess.
Byl by někdo ochotný mi poradit, kam vložit kód s přesměrováním na https a bez www? A kam přesně?

RewriteCond %{HTTPS} off [OR]
RewriteCond %{HTTP_HOST} ^www\. [NC]
RewriteCond %{HTTP_HOST} ^(?:www\.)?(.+)$ [NC]
RewriteRule ^ https://%1%{REQUEST_URI} [L,NE,R=301]

Nevím jestli ho vložit do tohoto prvního nebo až do druhého .htaccessu v adresáři www.
Ještě bych se chtěl zeptat, proč se tam používá to <IfModule>?

Editováno 8.11.2017 10:36
 
Odpovědět 8.11.2017 10:36
Avatar
Odpovídá na T-fon
Lukáš Rajchl:5. ledna 17:38

Sice po dlouhé době odpověď, ale kdo ví, třeba ti ještě pomůže :)

Daný kód si vlož do složky www/.htaccess, za RewriteEngine On

Co se týká <IfModule> tagu, je to podle nastavení Apache serveru, pokud je daný modul vypnutý (mod_rewrite, mod_deflate standardně bývá v čisté instalaci Apache vypnutý), tak se dané části nespustí.

Editováno 5. ledna 17:39
 
Odpovědět  +1 5. ledna 17:38
Avatar
Michal Novák:2. dubna 15:53

Neměl by se ten .htaccess upravit raději takto?

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

Defaultní nette .htaccess zakazuje přístup všude a tím doporučeným .htaccess vlastně dovolíme přístupovat k existujícím souborům a složkám - podle mě zbytečné potencionální riziko nebo se pletu?

Každopádně tento seriál mi hodně pomohl, díky za něj! :-)

 
Odpovědět  +1 2. dubna 15:53
Avatar
Jindřich Máca
Tým ITnetwork
Avatar
Odpovídá na Michal Novák
Jindřich Máca:2. dubna 17:52

Ano, pro účely tohoto tutoriálu by to asi bylo lepší jak říkáš. :-)

Obecně se ale může chtít přistupovat k dalším podložkám třeba jako subdomenám a určitě bych všude pro jistotu ty výchozí Nette .htaccess nechal. ;-)

 
Odpovědět 2. dubna 17:52
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 29. Zobrazit vše