Š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

Článok pre vás napísal jakub.kuritka

Užívateľské hodnotenie:

Ešte nikto nehodnotil, buď prvý!

...

Aktivity

Najčastejšie vyhľadávané

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

Inštalácia a sprevádzkovanie JUI

Vlastnosti

Ukážka použitia JUI