LAB11 - nvbach91/4IZ278-2020-2021-LS GitHub Wiki

Cvičení 11 - Such pattern, much intel, wow!

Povinná četba (na doma)

Náplň cvičení

  • Model (Beginner friendly)
  • View (Beginner friendly)
  • Controller (Beginner friendly)
  • Teamwork

Model-View-Controller (MVC)

  • Softwarová architektura - Návrhový vzor (Design pattern)
    • Vzor/Pattern = Osvědčený přístup k řešení problému, vznik z výzkumu
  • Jedním z nejčastěji používaných (je základem populárních knihoven a frameworků)
  • Cílem je separovat funkcionalitu, logiku a UI v aplikacích
  • Snahou je dobře organizovat aplikace (organized programming) pro snadnou týmovou práci
    • Nejen u MVC, ale i jiných
  • Webové frameworky založené na MVC - i částečně:
    • Ruby on Rails - složky Models, Views, Controllers
    • Codeigniter - složky Models, Views, Controllers
    • Django - nemá striktní složkovou strukturu
    • Laravel -
    • Zend -
    • Express - velmi flexibilní
    • Angular - client framework - View
    • Vue - client framework - View
    • React - client framework - View
  • Je vidět, že existuje více způsobů implementace MVC

Standardní průchod MVC

image

Model

  • Mozek aplikace - získává data y DB a manipuluje s nimi
  • Interaguje s jakoukoliv databází pomocí nějakého driveru
    • Nemusí to být RDB nebo DDB, může to být i jednoduchý soubor
    • CRUD operace
  • Komunikuje s Controller
    • Controller si vyžádá data z Model a zaktualizuje View
  • V některých případech může Model přímo aktualizovat View

View

  • Uživatelské rozhraní, to co uvidí uživatel
  • HTML, CSS, zahrnuje dynamické hodnoty z Modelu
  • Komunikuje s Controller
  • V praxi se používá tzv. template engine - šablonovací pluginy
    • Blade
    • Handlerbars
    • Pug/Jade
    • EJS
    • ERB
    • Hammer
    • Mustache
    • Underscore

Controller

  • Přijímá a zpracovává vstupy z View nebo URL
  • Naslouchává tyto data na GET, POST, PUT, DELETE, ... requesty
  • Vkládá data do Model
  • Mění data v Model
  • Získává data z Model, vloží je do View v podobě proměnných
  • Lze poslat stránku bez jakýchkoliv proměnných (statická stránka)

"Pseudocode"

URL: https://example.com/users/profile/1

/routes
    users/profile/:id <- $Users.getProfile(id)

/controllers
    /Users
        require '../models/UserModel';
        class Users {
            function getProfile (id) {
                $profile = $UserModel.getProfile(id)
                renderView('../views/users/profile', $profile)
            }
        }

/models
    /UserModel
        require '../database/pdo';
        class UserModel {
            function getProfile(id) {
                return $pdo.prepare('SELECT * FROM users WHERE id = :id').execute(['id' => id]).fetchAll();
            }
        }

/views
    /header
    /footer
    /users
        /profile
            // include '../../header';
            <h1>${profile.name}</h1>
            <ul>
                <li>Email: ${profile.email}</li>
                <li>Phone: ${profile.phone}</li>
            </ul>
            // include '../../footer';

Návod k rozchození laravel projektu

  • Nainstalujte si laravel framework pomocí composer, vytvořte nový laravel projekt a spusťte ho
$> mkdir cv11
$> cd cv11
$> composer create-project laravel/laravel my-project
$> cd my-project
$> php artisan serve
  • nastavte připojení k lokální databázi test (v souboru .env) a načtěte všechny záznamy z tabulky users a vyrenderujte je na stránku v blade.

Týmová práce na cvičení

  • Studenti se rozdělí do 3 skupin - Model, View, Controller - a vytvoří webovou aplikaci v PHP pro NeoNASA
    • Aplikace bude umět zobrazovat seznam vesmírných stanic (space station - SS) a galaxií (GX)
    • Zobrazte i jednotlivé SS a GX podle jejich id z URL parametru
    • Každá SS patří do nějaké galaxie - je potřeba mít i tabulku galaxií
    • Když uživatel rozklikne jednu GX tak dostane ji včetně seznam SS, které se v ní nachází
    • Pro každou SS evidujte název, vesmírný 3D GPS a obrázek
    • Pro každou GX evidujte název, velikost a obrázek
  • Jeden student bude mít speciální roli Project Manager a bude mít za úkol koordinovat týmy, zkompletovat kód od všech skupin, rozchodit aplikaci na eso.vse.cz a dodat zdrojové kódy na GitHub
  • Práce bude hodnocena 2 body pro všechny účastníky
  • Práci odevzdejte do začátku příštího cvičení
  • Pracujte ve svých složkách
    • /models/
    • /resources/views/
    • /routes/

It kinda ends here

joke

⚠️ **GitHub.com Fallback** ⚠️