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

V předešlém cvičení, Řešené úlohy k 1.-4. lekci frameworku Symfony pro PHP, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Dnes začneme nový projekt, kterým bude jednoduchý redakční systém s editorem článků:

Administrace:

Kontakt:

To je zajímavá webová aplikace, na které si můžeme vyzkoušet nové věci, které nám Symfony nabízí (hlavně práci s ORM nad 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, kontrolery 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 systém bundlů

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. Pokud pak např. potřebujeme sdílet určitou funkčnost mezi více projekty, můžeme ji zabalit do tzv. Symfony bundlů.

Bundly můžeme chápat jako samostatné části, ze kterých se aplikace skládá. Jak již bylo zmíněno, můžeme vytvářet vlastní nebo využít bundlů třetích stran. Těch může být i v menší aplikaci relativně velký počet a slouží jako obdoba pluginů. Mimochodem, samotný Symfony framework je implementován pomocí různých bundlů.

Pokud si pak jednou napíšeme vlastní bundle, můžeme ho později použít i v ostatních projektech, které jsou postavené na stejném systému a to aniž bychom něco složitě upravovali. V každém projektu budou zároveň jen ty bundly, 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 zatím vystačíme pouze se základní projektovou strukturou webové aplikace v Symfony. Pokud ale plánujete větší projekt, nikdy není na škodu promyslet si jeho potenciální rozdělení do bundlů předem.

Mimochodem, všimněte si, že 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 7.2.5 nebo vyšší a MySQL databázi (případně můžete použít i jinou SQL databázi) a postavíme ho na klasické kostře webové aplikace website-skeleton pro Symfony verze 5.x. 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 vytvořit projekt v Symfony, vřele doporučuji přečíst si lekci Instalace Symfony a IDE na začátku kurzu. Nyní tedy předpokládám, že máme před sebou čerstvě nainstalovaný Symfony projekt a provedeme v něm několik následujících změn.

Příprava projektu

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

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

Dále můžeme odstranit pro nás nepotřebnou složku jako tests/ dle libosti (v rámci kurzu ji nebudeme potřebovat).

Přidání vlastního CSS

Na závěr si ještě přidáme vlastní CSS.

public/css/style.css

Vytvoříme si ve složce public/ složku css/ a do ní umístíme soubor style.css, který bude vypadat 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;
}

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

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

button[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 web spustit, vidět úvodní stránku a naše adresářová struktura by měla vypadat přibližně takto:

• bin/ - Obsahuje spustitelné PHP skripty, především bin/console
• config/ - Obsahuje konfiguraci projektu (např. routování, služby apod.)
• public/ - Kořenový adresář celého webu (přístupový bod, kde všechny umístěné soubory jsou přístupné zvenčí)
  • css/ - CSS soubory
  • ...
• src/ - Obsahuje PHP zdrojové kódy našeho projektu
  • Controller/ - Kontrolery
  • Entity/ - Entity
  • ...
• templates/ - Složka pro šablony (standardně obsahuje další podsložky pro jednotlivé kontrolery)
• translations/ - Složka pro potenciální soubory překladů (slouží pro jazykové mutace webu)
• var/ - Úložiště automaticky generovaných souborů (např. logy, cache, sessions aj.)
• vendor/ - Knihovny třetích stran poskládané pomocí nástroje Composer

Tímto dnešní lekce končí a těším se na vás příště:)

V příští lekci, Jednoduchý redakční systém v Symfony - Model článků, se vrhneme na modelovou vrstvu, konkrétně na repozitář pro práci s články.

Měl jsi s čímkoli problém? Zdrojový kód vzorové aplikace je ke stažení každých pár lekcí. Zatím pokračuj dál, a pak si svou aplikaci porovnej se vzorem a snadno oprav.