Dnes uděláme za naším seriálem malou tečku v podobě implementace šikovné jQuery tabulky DataTables. Ukážeme si na tom jak jednoduché je použití Ajaxu v Nette Frameworku.

Seriál Webová aplikace v Nette pro začátečníky

Seriál provází tvorbou webové aplikace v Nette Frameworku, od prvotní konfigurace prostředí, až po hotový produkt. Napíšeme si aplikaci, která bude umět registrovat, přihlásit a spravovat uživatele.

DataTables

Poměrně často potřebujeme v aplikaci nějakou přehledovou tabulku s daty a potřebujeme tato data nějak řadit, filtrovat, hledat. Nette poskytuje podobné nástroje formou několika doplňků, které doporučuji prostudovat a vyzkoušet, mimo jiné i proto, že ukazují ještě víc z toho, jak lze v Nette pracovat s ajaxem. My se dnes ale vydáme trochu jinou cestou – použijeme jQuery plugin, který poskytuje přinejmenším srovnatelné funkce.

Plugin stáhneme a vyzobneme si z něj soubory jquery.dataTa­bles.min.js a jquery.dataTa­bles.css

Soubory nakopírujeme do projektu a nalinkujeme standartním způsobem

<head>
...
<link rel="stylesheet" type="text/css" href="{$basePath}/css/jquery.dataTables.css" />
...
<script src="{$basePath}/js/jquery.dataTables.min.js"></script>
...
</head>

Šablona výpisu uživatelů

V šabloně výpisu uživatelů Homepage/defau­lt.latte máme odminule základní výpis uživatelů v seznamu. To nám už nebude stačit – DataTables plugin vyžaduje html tabulku ve zhruba tomto znění:

<table id="users">
    <thead>
        <th>Jméno</th>
        <th>Email</th>
        <th>Role</th>
    </thead>
    <tbody></tbody>
</table>

Ze zápisu tabulky vyplývá, že jsme se rozhodli vypisovat jméno, email a roli uživatelů. Oživení a naplnění tabulky pomocí jQuery vypadá potom takto:

$('#users').dataTable( {
    "sAjaxSource": {link usersJson!},
    "aoColumns": [
        {"mData": "name"},
        {"mData": "email"},
        {"mData": "role"}
    ]
});

Tímto kódem jsme řekli, že tabulka s id users bude plněna daty z adresy {link usersJson!}, což znamená, že framework bude hledat v presenteru, v kterém se právě nacházíme, metodu handleUsersJson. DataTables zároveň očekává, že mu z tohoto místa přijdou data v JSON formátu takovéto struktury:

{
  "aaData": [
    {
      "id": 9,
      "email": "franta@vokurka.cz",
      "name": "Franta Vokurka",
      "role": "guest"
    },
    {
      "id": 10,
      "email": "lojza@lojza.cz",
      "name": "Lojza P\u0159echodn\u00edk",
      "role": "guest"
    },
}

Pomocí „aoColumns“ potom definujeme, jaká data z JSON chceme zobrazovat v tabulce.

Vyrobíme tedy požadovaný JSON – v (například) HomepagePresen­ter.php napíšeme metodu

public function handleUsersJson() {
    $all_users = array();
    $all_users["aaData"] = $this->users->findAll()->orderBy('id')->fetchAll();
    $this->sendResponse(new Nette\Application\Responses\JsonResponse($all_users));
}

Metoda si vyžádá z databáze všechny uživatele a jejich data a uloží je jako pole do proměnné $all_users pod klíč aaData. Tak to vyžaduje DataTables plugin. Data odešleme pomocí $this->sendResponse a JsonResponse ve formátu JSON.

Na tomhle místě, kde poprvé posíláme data o uživatelích na frontend, bude potřeba upravit metodu findAll() v modelu Users, protože ve stávající podobě posílá do tabulky i hesla uživatelů. Sice zahashovaná, ale jak bychom vypadali, že? Úprava může vypadat třeba takto

public function findAll() {
    return $this->db->select('id, email, name, role')->from($this->table);
}

Tak, a je to – hotovo.

Hotovo?

Máme co jsme chtěli a to, řekl bych, za dobrou cenu – máme tabulku, která umí data řadit ve sloupcích a umí hledat/filtrovat a řadit. To je ovšem pouze základní použití DataTables. K dispozici jsou rozšiřující pluginy, jako například poměrně zásadní columnFilter.

Data v tabulce také můžeme formátovat víceméně dle libosti. Například můžeme chtít z emailů udělat klikatelné odkazy – kód potom může vypadat třeba takto:

$('#users').dataTable( {
    "sAjaxSource": {link usersJson!},
    "aoColumns": [
    {"mData": "name"},
    {"mData": "email",
      "fnRender": function(o) {
        return "<a href='mailto:"+o.aData["email"]+"'>"+o.aData["email"]+"</a>";
      }
    },
    {"mData": "role"}
    ]
});

Závěr

Základní část seriálu je u konce. Ukázali jsme si na poměrně malém prostoru základní stavební kameny většiny webových aplikací – vkládání a čtení dat a jejich „chytré“ zobrazení. MacGyver by s tím dokázal vyrobit Facebook. Zdrojáky najdete na githubu.

Mnoho (docela hodně) věcí jsme si naopak neukázali a zde jsou možnosti otevřené – buď je časem dopíšu jako volné pokračování na přání a/nebo odkážu. Podle komentářů z minulých dílů vybírám:

Testování

Composer

Správa závislostí v projektu

Nette\Database

Alternativa k Dibi layeru

A to je už opravdu vše, dotazy, opravy, doplnění, atakdále prosím do komentářů, díky a zase někdy příště.

Komentáře

Potty před 4 lety

Pěkný článek, příště bych se přimlouval za to testování :)

reagovat

Vojta před 3 lety

Také se přimlouvám za testování.

reagovat

oamr před 3 lety

Zdarec, planujes pokracovani serialu? Dikes

reagovat

Peter Láng před 3 lety

Čau, já už radši nic moc neplánuju ;-) Jakmile se mi udělá trochu času, určitě chci pokračovat v psaní článků, jestli to bude pokračování seriálu, to nevím.

reagovat

Martin před 3 lety

Díky za přínosné články o Nette.

reagovat

Peter Láng před 3 lety

Já díky, jsem rád, že se hodí.

reagovat

pes502 před 2 lety

Škoda, že již nevychází pokračování. Seriál je celkem dobrý a v začátcích hodně pomohl :)

reagovat

Peter Láng před 2 lety

Díky, to byl přesně záměr.

reagovat

Jan Podlešák před rokem

Ahoj, díky za super seriál. Hodně mi to pomohlo :) Příklad s DataTables se mi dlouho nedařilo rozchodit, ale pak jsem přidal uvozovky do „sAjaxSource“: „{link usersJson!}“ a vše je ok. To jen kdyby měl někdo náhodou stejný problém.

reagovat

Přidat komentář

  • Můžete použít Texy syntaxi, HTML není povoleno
  • Například: *kurzíva*, **tučně**, "text odkazu":adresa