Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Šablónovacích systém PHP_JUI - Úvod

zdravím,

jedného dlhého dňa som sa asi naozaj nudil a preto som začal premýšľať o vlastnom šablonovacím systému pre PHP. Ako asi každý programátor v PHP raz dôjdete k okamihu, kedy sa vám naozaj nepáči neprehľadná kombinácia PHP a HTML kódu. Ako by povedal môj učiteľ algoritmizácia: "Je to prasácké!". A keďže som práve v tej chvíli zistil, že mám JSON radšej než XML, rozhodol som sa, že bude JSON "based" (len tak mimochodom, ak niekto napíše XmlSerializer a hodí ho do parsera miesto JsonSerializeru, nie je problém ani s XMLkem).

Došiel som až tak ďaleko, že pri použití tohto systému nenapíšete ani kúsok HTML kódu! Jediné, čo budete písať, sú JSON definície (hovorím im proste JUI - áno JSON (based) User Intarface). Toto je taký vzor:

{
    "com": "Nazev_komponenty",
    "param1": "hodnota",
    "param2": [
        "polozka 1",
         "polozka 2"
    ],
    "param3": {
        "asociativni": "pole"
    },
    "param4": {
        "com": "Dalsi_componenta"
    }
}

Zakaždým musia byt nadefinované o akú komponentu sa jedná (kľúč "com") a potom nasledujú voliteľné parametre, ktoré môžu obsahovať - text, číslo, pole, Component, objekt.

Inštalácia a sprevádzkovanie JUI

Keďže JUI používa namespace a Callback, je potrebné mať PHP minimálne vo verzii 5.3.

Na konci článku nájdete odkaz na repozitár JUI, stiahnite zdrojové kódy. Po tej môžete urobiť dve veci: 1) skopírovať rozbalené zdrojáky niekam do htdocs a spustiť. 2) alebo si do svojho projektu nakopírujte zložku JUI a Resources (obe zložky do rovnakého adresára), to sú jediné povinné zložky. JUI nemá definovanú povinnú zložku so šablónami, ani ich príponu (aspoň nie v tejto verzii), preto umiestnenie šablón a ich prípona (ja používam .json) je čisto vo vašej réžii. A stačí len upraviť súbor index.php, alebo si napísať svoj, tak aby spracoval aký sobor chcete. Teraz Vám ukážem, ako JUI "rozbehnúť".

Vytvoríme si prvú HTML stránku. A uložíme ju ako "Views / index.json".

{
    "com" : "Page",
    "title": "My first JUI page!",
    "meta" : [
        {"http-equiv" : "Content-Type", "content" : "text/html; charset=UTF-8"}
    ],
    "content": {
        "com": "H1",
        "content": "Hello world!"
    }
}

Váš index.php bude vyzerať takto:

<?php
//Includujeme soubor ze slozky JUI/Jui.php
require_once "./JUI/Jui.php";

//vytvoříme instanci parseru
$parser = new JUI\Engine\Parser();

//přidáme do něj JsonSerializer (ten se v souboru JUI/Jui.php vkládá i do Resources)
$parser->setSerializer(new JUI\Engine\JsonSerializer());

//a zparsujeme náš vytvořený soubor. Vrátí komponentu Page
$index = $parser->parse(file_get_contents("Views/index.json"));

//nyní vše vyrenderujeme
echo $index->render();
?>

Rovnaký kód je aj v súbore index.php vo stiahnutých zdrojácích. Používam autoloader, ak chcete používať svoj, stačí zeditovať sobubor JUI / Jui.php a zakomentovat vkladanie Autoloader, myslím, že to tam určite nájdete :)

JUI bude chvíľu kúzliť a máme tu HTML:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>My first JUI page!</title>
    </head>
    <body>
        <h1>Hello world!</h1>
    </body>
</html>

Vlastnosti

Teraz by bolo dobré spomenúť niektoré vlastnosti (prednosti?) JUI:

  • Jednoduché na naučenie aj vytváranie vlastných komponentov
  • Podporuje dáta modely, zatiaľ mám implementovaný JSON dáta model a PDO dáta model (takže prístup do databázy priamo z JSON zápisu, stačí len nadefinovať query, a v resources mať komponent, ktorý bude reprezentovať pripojenie do databázy a implementované interface JUI \ Components \ IConnection a vracať inštanciu triedy PDO, ale o tom až jidny :)
  • Ako už bolo vyššie spomenuté, máme aj Resources, také registre, ktoré sú prístupné každej komponente
  • data binding
  • Converters (každý Binding môže mať svojho "KONVERTER", ktorý upraví dáta pred tým, než ho odovzdá kompon. Ďalej je podpora konverter v komponente Text)
  • Je ho možné vytvárať pomocou JSON zápisov (definícií ..) či priamo v PHP kóde
  • Podpora Parital šablón
  • Container template - obaľuje komponent
  • Content template - obaľuje dáta (napríklad šablóna pre položku v listbox, naimplementované len v listbox, inde zatiaľ nie je potreba)
  • Existujú komponenty, ktoré zastupujú každý HTML tag. Plus špecializované ako napríklad listbox, ktorý podporuje dáta modely, a vykonáva autobinding dát do šablóny atp. :)
  • Pokiaľ Vám to trochu pripomína XAML, niečo na tom bude : D

Dúfam, že som Vás aspoň trochu navnadil a budete mať záujem pokračovať v čítaní tohto článku :)

Ukážka použitia JUI

Povedal by som, že je na čase ukázať zložitejšie príklad. Ukážem Vám ako vypísať zoznam mien používateľov z databázy, bez jediného Rakovi PHP kódu!

Najprv je nutné mať nadefinované pripojenie do databázy v Resources:

//resources mají speciální syntaxi
{
    "dbPripojeni": {
        "type": "com",
        "val": {
            "com": "PdoConnection",
            "host": "localhost",
            "user": "root",
            "pass": "root",
            "dbname": "test",
            "dbtype": "mysql"
        }
    }
}

Teraz máme nadefinované pripojenie do databázy pomocou komponenty PdoConnection. A teraz sa vrhene na vytvorenie šablóny pre zoznam užívateľov:

(Súbor: listBox.json)

{
    "com": "Ul", //tag <ul>
    "content": {
        "com": "Binding",
        "key": "containerContent" //sem se nabindují vyrenderované položky
    }
}

Nadefinujeme šablónu, ktorá sa uplatňuje na každú položku z listbox:

(Súbor: item.json)

{
    "com": "Li", //tag <li>
    "content": {
        "com": "Binding",
        "key": "user_name"
    }
}

Spojíme všetky časti dohromady:

{
    "com": "ListBox",
    "dataModel": {
        "com": "PdoDataModel",
        "connection": "dbPripojeni",
        "query": "SELECT * FROM users"
    },
    "containerTemplate": {
        "com": "Partial",
        "file": "listBox.json"
    },
    "contentTemplate": {
        "com": "Partial",
        "file": "item.json"
    }
}

Ak máte v databáze pod kľúčom "USER_NAME" meno používateľa výstup by mal byť podobný tomuto:

<ul>
    <li>Pepa</li>
    <li>Jirina</li>
    .
    .
    .
</ul>

Ešte niečo k parametrom containerTemplate a contentTemplate. Nemusia to byť Partial Componentu. Je možné do nich zapísať šablónu priamo, ale ak si dáte šablóny zvlášť do súborov, budete ich môcť používať na viacerých miestach a to je na nezaplatenie, teda pokiaľ nemáte radšej copy-paste metódu : D

Možno sa Vám tento zápis môže zdať zdĺhavý, ale vyhli ste sa tomuto:

<?php
$db = new PDO('mysql:host=localhost;dbname=test', $user, $pass);
$db->setAttribute(\PDO::ATTR_ERRMODE, \PDO::ERRMODE_EXCEPTION);

$prepared = $db->prepare("SELECT * FROM users");
$prepared->execute();

echo "<li>";
forach($row as $db->fetchAll()){
    echo "<ul>" . $row["user_name"] . "</ul>";
}
echo "</li>";
?>

výhody:

  • Nekombinujú PHP a HTML
  • Máte znovu použiteľné šablóny
  • väčšia prehľadnosť
  • Jednoduchá zmena vzhľadu
  • Môžete jednoducho zmeniť umiestnenie dát (zmenou dátumu modelu), bez zasahovania do kódu!

Myslím si, že ako úvod do PHP_JUI tento článok stačí. Bol by som rád, keby ste mi napísali do komentárov, či ak máte záujem o ďalšie diely.

Tu je odkaz na JUI repozitár: PHP_JUI - repozitár + wiki


 

Všechny články v sekci
Ostatné tutoriály v PHP
Článek pro vás napsal jakub.kuritka
Avatar
Uživatelské hodnocení:
Ještě nikdo nehodnotil, buď první!
...
Aktivity