book
  • Book
  • Nette Framework
    • How to start developing multilanguage website with Nette Framework and Kdyby\Translation
    • Jak na multijazyčný web s Nette Framework a Kdyby\Translation
    • Načítání Facebook postů v Nette Framework
    • Jak začít a propojit Doctrine a Nette Framework
    • Zkrášlujte formulářové prvky, snadno pomocí setOption
    • Jak řešit překlady flash zpráviček v Nette Framework
Powered by GitBook
On this page
  • Vytvoření projektu z Nette/Sandbox
  • Pročištění pískoviště
  • Přidáme trošku Facebooku
  • Cache, ať při vývoji nečekáme
  • Ukládáme posty do databáze
  • Zobrazení postů z importu
  • Zobrazení postů na homepage
  • Zapouzdření do modelu
  • Import do modelu
  • A co to heslo v kódu? Pryč s nim
  • Korektury od Nette Guru
  • Použití Kdyby/Facebook
  • Latte filter
  • Drobné vylepšováky
  • Administrace postů
  • Výkop administrace
  • Akce disable, enable
  • První verze zajaxovní
  • Úprava JSON komunikace
  • Použij signály než action
  • Snippety a nette.ajax.js
  • Bacha na F5
  • Posílání opravdu jen toho co je třeba
  • Zničíme duplicitní kód
  • Drobnosti

Was this helpful?

  1. Nette Framework

Načítání Facebook postů v Nette Framework

PreviousJak na multijazyčný web s Nette Framework a Kdyby\TranslationNextJak začít a propojit Doctrine a Nette Framework

Last updated 4 years ago

Was this helpful?

Na jednom projektu jsem narazil na potřebu zobrazovat posty z Facebooku na klientově stránce. Inu začal jsem psát prototyp jak bych danou věc řešil. Prototyp jsem "spíchnul" za hodinku, ale bylo to uděláno tak trošku na hulváta. Tak jsem si řekl že to postupně přepíšu tak jak by to třeba napsal nějaký zkušený programátor s Nette frameworkem. Na jsem danou věc přednesl a Nette guruové mi přislíbili odbornější konzultace.

Článek není psán jako how-to (na takovém článku zapracuji) Je psán jak jsem postupoval, co jsem napsal, následně zavrhul nebo přepsal. Proto se nedivte, že tu třeba pracuji s Nette Cache, kterou v zápětí odstraním. Při čtení je dobré koukat na konkrétní a článek brát jako "přemýšlení nahlas" k těmto commitům.

Výsledkem je aplikace co naimportuje posty z dané Facebook zdi do databáze, v administraci si pak zvolíte, které posty chcete na své stránce zobrazit.

Techniky co se používají: Nette\Caching, Facebook SDK, Kdyby\Facebook, Nette\Database, Custom Latte Macro, Snippets.

Celý projekt je k naleznutí na Githubu

Vytvoření projektu z Nette/Sandbox

Začneme čistým projektem vycházející z Nette/Sandbox

composer create-project nette/sandbox Nette-Facebook-Reader

cd Nette-Facebook-Reader

zápis do "log" a "temp" folderu

chmod -R a+rw temp log

commit:

Pročištění pískoviště

vyčistíme homepage šablonu a připravíme si nový Import Presenter se šablonou.

/app/templates/Import/default.latte

{block #content}
    <h1>Import</h1>

a /app/presenters/ImportPresenter.php

namespace App\Presenters;

use Nette,
    App\Model;

class ImportPresenter extends BasePresenter
{

    public function renderDefault()
    {

    }

}

Přidáme trošku Facebooku

Přidáme si do composer.json závislost na Facebook SDK

    "require": {
        "php": ">= 5.3.7",
        "nette/nette": "~2.2.0",
        "dg/adminer-custom": "~1.0",
        "facebook/php-sdk-v4" : "4.0.*"
    },

a stahneme si ho pomoci composer update.

[ /data/articles/1/facebook-developer.png .(Facebook Developer) ]

Stačí nám vyplnit pouze její název

[ /data/articles/1/create-new-app.png .(Create new App) ]

a zjistíme si Facebook App ID a App Secret

[ /data/articles/1/facebook-app-ids.png .(Facebook App IDs) ]

Na hulváta si zkusíme načíst data skrze Facebook Graph Api. V našem Import Presenteru přidáme do hlavičky

use Facebook\FacebookRequest;
use Facebook\FacebookRequestException;
use Facebook\FacebookSession;
use Tracy\Dumper;

a metodu přepíšeme podle ukázky z dokumentace k PHP Facebook SDK

public function renderDefault()
{
    FacebookSession::setDefaultApplication('YOUR_APP_ID', 'YOUR_APP_SECRET');

    $session = FacebookSession::newAppSession();
    $data = array();

    try {
        $request = new FacebookRequest($session, 'GET', '/nettefw/feed');
        $response = $request->execute();
        $posts = $response->getGraphObject()->asArray();

        $data = $posts['data'];
    } catch (FacebookRequestException $ex) {
        // Session not valid, Graph API returned an exception with the reason.
        echo $ex->getMessage();
        exit();
    } catch (\Exception $ex) {
        // Graph API returned info, but it may mismatch the current app or have expired.
        echo $ex->getMessage();
        exit();
    }

    Dumper::dump($data);
}

po zkouknutí výstupu bychom měli vidět dump pole o 25 položkách

[ /data/articles/1/dump-array-25.png .(dump array) ]

Malinko si zjednodušíme ošetření chyb jen na ukončení aplikace.

} catch (\Exception $ex) {
    throw $ex;
    $this->terminate();
}

Cache, ať při vývoji nečekáme

Přidáme si možnost cache pro požadavek. (Hlavně si tím urychlíme další rozšiřování, přeci jen čekat 10 sec na každý refresh mě nebaví).

O cachovaní se nám postara Nette Framework a jeho Nette\Caching\Cache;

Přidáme do use sekce

use Nette\Caching\Cache;

A ten si necháme poslat (injectnout) do třídy pomoci Nette Dependenci Injection. Jediné co musíme udělat je definovat public property $cacheStorage typu \Nette\Caching\IStorage a pomocí anotace @inject nám framework zařídí vše potřebné.

class ImportPresenter extends BasePresenter
{
    /**
     * @var \Nette\Caching\IStorage @inject
     */
    public $cacheStorage;

hup, a v našich metodách se ke storage dostaneme snadno pomocí $this->cacheStorage

$cache = new Cache($this->cacheStorage, 'facebookWall');
$data = $cache->load("stories");

V našem případě pokud se nám nepodaří načíst data z cache (a to se nám napoprvé určitě nepovede) tak si je načteme z Facebooku a do té cache si je uložíme:

$cache->save("stories", $data, array(
    Cache::EXPIRATION => '+30 minutes',
    Cache::SLIDING => TRUE
));

Výsledkem je

public function renderDefault()
{
    FacebookSession::setDefaultApplication('YOUR_APP_ID', 'YOUR_APP_SECRET');

    $session = FacebookSession::newAppSession();
    $cache = new Cache($this->cacheStorage, 'facebookWall');
    $data = $cache->load("stories");

    if (empty($data)) {
        try {
            $request = new FacebookRequest($session, 'GET', '/nettefw/feed');
            $response = $request->execute();
            $posts = $response->getGraphObject()->asArray();

            $data = $posts['data'];
            $cache->save("stories", $data, array(
                Cache::EXPIRATION => '+30 minutes',
                Cache::SLIDING => TRUE
            ));

        } catch (\Exception $ex) {
            throw $ex;
            $this->terminate();
        }
    }

    Dumper::dump($data);
}

Nyní by nám druhý request měl trvat výrazně kratší dobu.

[ /data/articles/1/with-cache.png .(with cache) ]

Ukládáme posty do databáze

Dalším krokem je uložit si získána data do databáze. Pro práci s databází použijeme třídu Nette\Database. Vytvoříme si databázi a uživatele (díky klonování Nette Sandbox máme výborný nástroj Adminer přímo u projektu /adminer/).

Uživatel bude facebookwall a s heslem 'tajneheslo' bude mít přístup ke všem databázím začínající facebookwall_ v našem vývojovém případě konkrétně k databázi facebookwall_devel

CREATE DATABASE `facebookwall_devel` COLLATE 'utf8_czech_ci';
CREATE USER 'facebookwall'@'localhost' IDENTIFIED BY 'tajneheslo';
GRANT USAGE ON * . * TO 'facebookwall'@'localhost' IDENTIFIED BY 'tajneheslo' WITH MAX_QUERIES_PER_HOUR 0 MAX_CONNECTIONS_PER_HOUR 0 MAX_UPDATES_PER_HOUR 0 MAX_USER_CONNECTIONS 0 ;
GRANT ALL PRIVILEGES ON `facebookwall\_%` . * TO 'facebookwall'@'localhost';
FLUSH PRIVILEGES;

a vytvoříme si tabulku kam si posty budeme ukládat.

CREATE TABLE `facebook_wallposts` (
  `id` varchar(100) CHARACTER SET ascii NOT NULL,
  `created_time` datetime NOT NULL,
  `updated_time` datetime NOT NULL,
  `type` varchar(100) CHARACTER SET ascii NOT NULL,
  `status_type` varchar(250) COLLATE utf8_czech_ci NOT NULL,
  `name` varchar(250) COLLATE utf8_czech_ci NOT NULL,
  `link` varchar(250) COLLATE utf8_czech_ci NOT NULL,
  `message` text COLLATE utf8_czech_ci NOT NULL,
  `caption` text COLLATE utf8_czech_ci NOT NULL,
  `picture` varbinary(250) NOT NULL,
  `status` char(1) COLLATE utf8_czech_ci NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`),
  KEY `type` (`type`),
  KEY `created_time` (`created_time`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_czech_ci;

V presenteru si řekneme ať nám framework předá objekt Nette\Database\Context

/**
 * @var \Nette\Database\Context @inject
 */
public $database;

v konfiguračním souboru /app/config/config.local.neon si doplňíme připojení k databázi.

nette:
    database:
        dsn: 'mysql:host=127.0.0.1;dbname=facebookwall_devel'
        user: facebookwall
        password: tajneheslo
        options:
            lazy: yes

Pozor na zápis, liší se od Dibi a občas mě to dokáže zabrzdit ;-)

V presenteru si pak na hulváta doplníme ukládání jednotlivých řádku, připadne po opakovaném importu aktualizaci postit

// save data to database
if (is_array($data) && !empty($data)) {
    foreach ($data as $rowPost) {

        $post = array(
            'id' => $rowPost->id,
            'type' => $rowPost->type,
            'created_time' => $rowPost->created_time,
            'updated_time' => $rowPost->updated_time,
        );

        if (isset($rowPost->name)) {
            $post['name'] = $rowPost->name;
        }
        if (isset($rowPost->link)) {
            $post['link'] = $rowPost->link;
        }
        if (isset($rowPost->status_type)) {
            $post['status_type'] = $rowPost->status_type;
        }
        if (isset($rowPost->message)) {
            $post['message'] = $rowPost->message;
        }
        if (isset($rowPost->caption)) {
            $post['caption'] = $rowPost->caption;
        }
        if (isset($rowPost->picture)) {
            $post['picture'] = $rowPost->picture;
        }

        // post 'status' use story, we need message
        if ($rowPost->type == 'status') {
            if (isset($rowPost->story)) {
                $post['message'] = $rowPost->story;
            }
        }

        try {
            $this->database->table('facebook_wallposts')->insert($post);
        } catch (\PDOException $e) {
            if ($e->getCode() == '23000') {
                $this->database->table('facebook_wallposts')->where('id', $rowPost->id)->update($post);
            } else {
                throw $e;
            }
        }
    }
}

můžeme se přesvědčit, že se nám vše uložilo

[ /data/articles/1/save-to-database.png .(save posts to database) ]

Zobrazení postů z importu

Předáme si výpis práve přidaných postů do šablony a tam si je vypíšeme.

// send data to template
$this->template->wallPosts = $data;

a

{foreach $wallPosts as $post}
    type: <strong>{$post->type}</strong> <br>
    <small>
        id: {$post->id}<br>
        created_time: {$post->created_time} <br>
        updated_time: {$post->updated_time} <br>
    </small>

    {ifset $post->name}
        name: <h1>{$post->name}</h1>
    {/ifset}

    {ifset $post->status_type}
        status_type: {$post->status_type} <br>
    {/ifset}

    {ifset $post->message}
        message: {$post->message} <br>
    {/ifset}

    {ifset $post->picture}
        piscture: {$post->picture} <br>
        <img src="{$post->picture}" />
    {/ifset}

    {ifset $post->link}
        link: <a href="{$post->link}">{$post->link}</a> <br>
    {/ifset}

    {ifset $post->caption}
        caption: {$post->caption} <br>
    {/ifset}
    <hr>
{/foreach}

Zobrazení postů na homepage

V HomepagePresenteru si načteme posty co jsme načetly importem. Jelikož, ale nechcem zobrazovat všechny posty nastavíme si u některých v databázi status na 1 a budem zobrazovat pouze tyto.

public function renderDefault()
{
    $facebookWallPosts = $this->database->table('facebook_wallposts')->where('status','1')->limit(5)->fetchAll();
    $this->template->wallPosts = $facebookWallPosts;
}

a nesmíme zapomenout na přidání public property $database;

/**
 * @var \Nette\Database\Context @inject
 */
public $database;

šablona pak může vypadat nějak takto:

<div n:if="$wallPosts" class="facebook-posts">
    <div n:foreach="$wallPosts as $post" class="post {$post->type}">
        <h3 n:if="$post->name">{$post->name}</h3>
        <img n:if="$post->picture" src="{$post->picture}" />

        {if $post->message}
            <p>
                {$post->message|truncate:250:'...'}
                <a n:if="$post->link" href="{$post->link}">více</a>
            </p>
        {else}
            {if $post->link}
                <a href="{$post->link}">více</a>
            {else}
                <a href="http://www.facebook.com/nettefw">více</a>
            {/if}
        {/if}
    </div>
</div>

Zapouzdření do modelu

Pokud se nad úkolem zamyslíme tak je to taková věc co by se nám mohla hodit i na jiném projektu. Připravíme si tedy modelovou vrstvu. Do ktere přepíšeme náš prototyp.

Všiměte si jak si v konstruktoru řekneme o Nette\Database\Context

app/model/FacebookWallpost.php

namespace App\Model;

use Nette\Database\Context;
use Nette\Object;

class FacebookWallposts extends Object
{
    /**
     * @var \Nette\Database\Context
     */
    protected $database;

    function __construct(Context $database)
    {
        $this->database = $database;
    }

    public function getLastPosts($count = 5)
    {
        return $this->database->table('facebook_wallposts')
            ->where('status', '1')
            ->order('created_time DESC')
            ->limit($count)
            ->fetchAll();
    }
}

a v presenteru přepíšeme vypisování postů na

/**
 * @var \App\Model\FacebookWallposts @inject
 */
public $wallposts;

public function renderDefault()
{
    $this->template->wallPosts = $this->wallposts->getLastPosts();
}

Property $database jsme nahradili za $wallpost a změnili typ třídy co chceme po frameworku aby nám předal. Aby to celé fungovalo musíme ješte danou servisu zaregitrovat v config.neon

services:
    - App\Model\UserManager
    - App\RouterFactory
    router: @App\RouterFactory::createRouter
    - App\Model\FacebookWallposts

Import do modelu

To samé uděláme i s částí pro načítání dat z Facebooku.

Při přesunu odstraním používání cache, jelikož už jí při vývoji nepotřebuji ba naopak pokud chci zadat import tak chci aby se provedl vždy.

public function importPostFromFacebook()
{
    FacebookSession::setDefaultApplication('YOUR_APP_ID', 'YOUR_APP_SECRET');
    $session = FacebookSession::newAppSession();

    try {
        $request = new FacebookRequest($session, 'GET', '/nettefw/feed');
        $response = $request->execute();
        $posts = $response->getGraphObject()->asArray();
        $data = $posts['data'];

    } catch (\Exception $ex) {
        throw $ex;
        $this->terminate();
    }

    // save data to database
    ...

z Import presenteru přemístíme use sekci do modelu a presenter se nám rázem zjednodušil na

class ImportPresenter extends BasePresenter
{
    /**
     * @var \App\Model\FacebookWallposts @inject
     */
    public $wallposts;

    public function renderDefault()
    {
        $this->template->wallPosts = $this->wallposts->importPostFromFacebook();
    }

}

A co to heslo v kódu? Pryč s nim

Jako pěkný, ale. Ale nám se ještě nelíbí

FacebookSession::setDefaultApplication('YOUR_APP_ID', 'YOUR_APP_SECRET');
$session = FacebookSession::newAppSession();

hesla chceme v konfiguraci a zde si jen řekneme o funkční session. Nahradíme tedy za

$session = $this->facebookSessionManager->getAppSession();

a do konstruktoru přidáme předání závislosti. plus nezapomene na deklarovaní property.

/**
 * @var \App\Model\FacebookSessionManager
 */
protected $facebookSessionManager;

/**
 * @param Context $database
 * @param FacebookSessionManager $facebook
 */
function __construct(Context $database, FacebookSessionManager $facebook)
{
    $this->database = $database;
    $this->facebookSessionManager = $facebook;
}

a našeho "hloupoučkého" managera definujeme v /app/model/FacebookSessionManager.php

namespace App\Model;

use Facebook\FacebookSession;

class FacebookSessionManager {

    protected $appId;

    protected $appSecret;

    function __construct($appId, $appSecret)
    {
        $this->appId = $appId;
        $this->appSecret = $appSecret;

        FacebookSession::setDefaultApplication($this->appId, $this->appSecret);
    }

    public function getAppSession()
    {
        return FacebookSession::newAppSession();
    }
}

registrujeme ho v config.neon

services:
    - App\Model\UserManager
    - App\RouterFactory
    router: @App\RouterFactory::createRouter
    - App\Model\FacebookWallposts
    - App\Model\FacebookSessionManager(%facebook.appId%, %facebook.appSecret%)

a v config.local.neon přidáme sekci s kódem a heslem k aplikaci

parameters:
    facebook:
        appId: APP_ID
        appSecret: APP_SECRET

Korektury od Nette Guru

parameters:
    database:
        dbname: facebookwall_devel
        user: facebookwall
        password: tajneheslo

mnohem čitelnější.

teď ale příjde ta zajímavější část.

Použití Kdyby/Facebook

    "require": {
        "php": ">= 5.3.7",
        "nette/nette": "~2.2.0",
        "dg/adminer-custom": "~1.0",
        "kdyby/facebook" : "dev-master"
    },

a aktualizujeme composer pomocí composer update. Smažeme náš "hloupoučký" FacebookSessionManager.php a odebereme i jeho registraci do services v config.neon, zde naopak přidáme sekci extensions a do ní registrujeme Kdyby Facebook

extensions:
    facebook: Kdyby\Facebook\DI\FacebookExtension

services:
    - App\Model\UserManager
    - App\RouterFactory
    router: @App\RouterFactory::createRouter
    - App\Model\FacebookWallposts

Tato extension vyžaduje v configu Facebook App ID a Facebook Secret. Proto do lokálního config.local.neon přemístíme tyto informace ze sekce params (kam jsme si je uložili) do sekce facebook.

facebook:
    appId: "APP_ID"
    appSecret: "APP_SECRET"

(APP_ID dejte do uvozovek, jinak je brán jako integer a Kdyby/Facebook vyhodí excaption.)

A ve FacebookWallpost.php uděláme pár změn. Prvně si upravíme use sekci. Odebereme Facebook SDK a nahradíme ho za Kdyby\Facebook a přidáme Tracy\Debugger.

use Kdyby\Facebook\Facebook;
use Kdyby\Facebook\FacebookApiException;
use Nette\Database\Context;
use Nette\Object;
use Tracy\Debugger;

Pak nahradíme inicializaci session managera za Kdyby\Facebook

/**
 * @var Facebook
 */
protected $facebook;

/**
 * @param Context $database
 * @param Facebook $facebook
 */
function __construct(Context $database, Facebook $facebook)
{
    $this->database = $database;
    $this->facebook = $facebook;
}

a zjednoduší se nám i volání samotného požadavku. Plus si budeme logovat případnou chybu.

public function importPostFromFacebook()
{
    try {
        $posts = $this->facebook->api('/nettefw/feed');
        $data = $posts['data'];

    } catch (\Exception $ex) {
        Debugger::log($ex->getMessage(), 'facebook');
        return array();
    }

    // save data to database
    ...

Q: Proč return array(); namísto $this->terminate();

A: ???

Teď, když si znovu spustíme import, tak bychom měli v Tracy vidět novou ikonku Facebooku a u ní základní informace o volání jeho API. Krása.

[ /data/articles/1/kdyby-facebook-tracy.png .(Kdyby Facebook - Tracy extension) ]

Další vychytávkou co Kdyby\Facebook má je metoda iterate. Pokud jste si všimli tak volání Facebook API vrací cca 25 záznamů a adresu pro další (paging) toho tato metoda využívá umožnuje nad výsledkem iterovat třeba ve foreach a donačíst tak úplně všechny posty.

Nahradíme tedy volání api za iterate. Zde už dostáváme čisté "pole" všech postů tak poupravíme i samotné procházení výsledků.

try {
    $posts = $this->facebook->iterate('/nettefw/feed');

} catch (\Exception $ex) {
    Debugger::log($ex->getMessage(), 'facebook');
    return array();
}

$imported = array();
// save data to database
foreach ($posts as $rowPost) {
  ...
}
return $imported;

Když teď, zkusíme import, v Tracy panelu uvidíme že se Facebook Api volalo vícekrát a v panelu je vidět detail každého volání.

use Nette\Utils\DateTime;
use Nette\Utils\ArrayHash;

a pak ve foreach

$post = array(
    'id' => $rowPost->id,
    'type' => $rowPost->type,
    'created_time' => DateTime::from($rowPost->created_time)->format('Y-m-d H:i:s'),
    'updated_time' => DateTime::from($rowPost->updated_time)->format('Y-m-d H:i:s'),
    'name' => isset($rowPost->name) ? $rowPost->name : NULL,
    'link' => isset($rowPost->link) ? $rowPost->link : NULL,
    'status_type' => isset($rowPost->status_type) ? $rowPost->status_type : NULL,
    'message' => isset($rowPost->message) ? $rowPost->message : NULL,
    'caption' => isset($rowPost->caption) ? $rowPost->caption : NULL,
    'picture' => isset($rowPost->picture) ? $rowPost->picture : NULL,
);

// post 'status' use story, we need message
if ($rowPost->type == 'status' && isset($rowPost->story)) {
    $post['message'] = $rowPost->story;
}
// add to return array
$imported[$post['id']] = ArrayHash::from($rowPost);

Latte filter

Filip do kódu přidal i ukázku jak se poprat s if peklem v šablonách pomocí Latte filtru.

protected function createTemplate()
{
    /** @var Nette\Bridges\ApplicationLatte\Template $template */
    $template = parent::createTemplate();
    $template->addFilter('fbPostLink', function ($fbPost) {
        if (!empty($fbPost->link)) {
            return $fbPost->link;
        }

        if ($m = Nette\Utils\Strings::match($fbPost->id, '~^(?P<pageId>[^_]+)_(?P<postId>[^_]+)\\z~')) {
            return 'https://www.facebook.com/nettefw/posts/' . urlencode($m['postId']);
        }

        return NULL;
    });

    return $template;
}
  • filter se jmenuje fbPostLink

  • pokud daný post má definovaný link vrací tento link

  • pokud se podaří z post id (které obsahuje {pageId}_{postId} ) získat postId vrátí link na konkrétní post na facebooku

  • voláme ho nad objektem $post

šablona se nám pak zjednoduší na

<div n:foreach="$wallPosts as $post" class="post {$post->type}">
    <h3 n:if="$post->name">{$post->name}</h3>
    <img n:if="$post->picture" src="{$post->picture}" />
    <p>
        {if $post->message}{$post->message|truncate:250:'...'}{/if}
        <a href="{$post|fbPostLink}">více</a>
    </p>
</div>

Drobné vylepšováky

Administrace postů

Jako poslední úkol jsem si nechal administraci na povolování postů. Vytvoříme si nový presenter AdminPresenter a u vypsaných jednotlivých položek přidáme tlačítko enable, disable. To celé pak z "AJAXujem".

Výkop administrace

Začneme úpravou modelu, kam si přidáme metodu co nám vrátí všechny posty.

public function getAllPosts()
{
    return $this->database->table('facebook_wallposts')
        ->order('created_time DESC')
        ->fetchAll();
}

a následně si je načteme presenterem AdminPresenter a pošleme do šablony

/**
 * Admin presenter.
 */
class AdminPresenter extends BasePresenter
{

    /**
     * @var \App\Model\FacebookWallposts @inject
     */
    public $wallposts;

    public function renderDefault()
    {
        $this->template->wallPosts = $this->wallposts->getAllPosts();
    }

}

šablonu je možno vidět v commitu.

Akce disable, enable

Následuje vytvoření v modelu metod co se nám postarají o samotnou editaci postu.

/**
 * enable post
 *
 * @param $postId string
 * @return bool
 */
public function enablePost($postId)
{
    $this->database->table('facebook_wallposts')
        ->where('id', $postId)
        ->update(array('status' => '1'));
    return TRUE;
}
/**
 * disable post
 *
 * @param $postId string
 * @return bool
 */
public function disablePost($postId)
{
    $this->database->table('facebook_wallposts')
        ->where('id', $postId)
        ->update(array('status' => '0'));
    return TRUE;
}

a v presenteru si vytvořím dvě akce co funkcionalitu budou obsluhovat

public function actionEnablePost($postId)
{
    if ($this->wallposts->enablePost($postId)){
        $this->flashMessage('Post enabled');
    }
    $this->redirect('default');
}
public function actionDisablePost($postId)
{
    if ($this->wallposts->disablePost($postId)){
        $this->flashMessage('Post disabled');
    }
    $this->redirect('default');
}

v šabloně si upravím odkazy ať fungují

{if $post->status == '1'}
    <li><a n:href="Admin:disablePost $post->id" class="button alert">disable</a></li>
{else}
    <li><a n:href="Admin:enablePost $post->id" class="button">enable</a></li>
{/if}

a fungujeme.

První verze zajaxovní

public function actionEnablePost($postId)
{
    if ($this->wallposts->enablePost($postId)){
        $this->flashMessage('Post enabled');
    if ($this->wallposts->enablePost($postId)) {
        if ($this->isAjax()) {
            $this->payload->message = 'Post enabled';
            $this->sendPayload();
        } else {
            $this->flashMessage('Post enabled');
            $this->redirect('default');
        }
    }
    $this->redirect('default');
}

to samé uděláme i pro druhou metoru actionDisablePost. Upravíme si šablonu tak že budem zobrazovat obě tlačítka a jen skrze css budem schovávat to, které zrovna nebudem potřebovat.

<li n:class="disable, !$post->status ? hide"><a n:href="Admin:disablePost $post->id" class="ajax button alert">disable</a></li>
<li n:class="enable, $post->status ? hide"><a n:href="Admin:enablePost $post->id" class="ajax button">enable</a></li>

a pak celé to rozhejbání v JavaScriptu. Pokud kliknem na odkaz co má třídu .ajax tak stopnem klasické volání, a zavoláme XHR požadavek. Pokud se nám vrátí message, že je post disablován, tak prohodíme zobrazení tlačítek. (v opačném případě také) Plus pár visuálních drobností (disablování butonu po kliknutí, změna kurzoru na hodinky)

// Ajax click in admin
$('body').on('click', 'a.ajax', function (event) {
    event.preventDefault();
    event.stopImmediatePropagation();
    var link = $(this);
    if (link.hasClass('disabled')) {
        return false;
    }
    link.css('cursor', 'wait');
    link.addClass('disabled');
    $.post(this.href, function (data) {
        if (data.message == 'Post disabled') {
            link.parent().parent().find('.disable').addClass('hide');
            link.parent().parent().find('.enable').removeClass('hide');
        } else {
            // enabled
            link.parent().parent().find('.disable').removeClass('hide');
            link.parent().parent().find('.enable').addClass('hide');
        }
        link.removeClass('disabled');
        link.css('cursor', 'default');
    });
});

Úprava JSON komunikace

Porovnávat message co se stalo není moc "profi", tak si zavedem nějakou proměnou s akcí a status zdali se provedla správně. To s použitím payload proměnné je vcelku snadné

if ($this->isAjax()) {
    $this->payload->message = 'Post enabled';
    $this->payload->action = 'enable';
    $this->payload->status = '1';
    $this->sendPayload();

} else {

v JavaScriptu se pak zeptáme co se dělo a jak to dopadlo a zobrazíme dynamicky flash zprávu.

var flashMessage = function(message)
{
    $($('body')[0]).prepend($('<div class="flash info">'+message+'</div>'));
}

...

if (payload.action == 'disable' && payload.status == '1') {
    // disabled
    link.parent().parent().find('.disable').addClass('hide');
    link.parent().parent().find('.enable').removeClass('hide');
    flashMessage(payload.message);
}

Použij signály než action

Další radou od zkušených bylo použití signálů (handle).

Handle je na změnu stavu aktuálního view. Tj na smazání, zaktivnění položky etc. (Většinou totiž po provedení chceš znova vykreslit tu samou stránku).

Patrik Votoček

nebo

Handle je „subsignál“ aktuální akce, je to jako když odešleš formulář. Když máš akci, tak většinou by měla něco zobrazovat, nebo připravovat data pro formulář. Zpracování formuláře taky nedáváme do akce, ale napíšeme na to metodu, kterou dáš formuláři jako callback. Tak přesně to je signál, zpracování nějaké operace (třeba smazání řádků, nebo označení řádku jako hidden) pro aktuální akci (což je třeba výpis jednotlivých řádků).

Filip Procházka

Přepracování bylo snadné. Přejmenoval jsem metody z actionDisablePost na handleEnablePost a volání z

<a n:href="Admin:enablePost $post->id" class="ajax button">enable</a>

na vykřičníkový signál

<a n:href="enablePost! $post->id" class="ajax button">enable</a>

TIP: piš méně

pri odkazovani na akci ve stejnem presenteru staci uvest nazev akce, nemusis jiz uvadet presenter

Matej21

Snippety a nette.ajax.js

{snippet flashes}
    <div n:foreach="$flashes as $flash" class="flash {$flash->type}">{$flash->message}</div>
{/snippet}

druhým bude tabulka wallpostů

{snippet wallposts}
    {foreach $wallPosts as $post}
        <div class="row">
        ...
    {/foreach}
{/snippet}

v tuto chvíli se stali tzv. controllem který v případě, že víme že se změnil tak ho necháme překreslit redrawControl. V našem případě pokud chceme změnit status postu tak necháme překreslit snippet flashes a wallposts

public function handleEnablePost($postId)
{
    if ($this->wallposts->enablePost($postId)) {
        $this->flashMessage('Post enabled');
        $this->redrawControl('flashes');
        $this->redrawControl('wallposts');
    }
}

jediné co potřebujeme je zavolat její inicializaci.

$(function () {
    $.nette.init();
});

pěkné zjednodušení, že? Kabelama se nám přenáší jen co se "opravdu" změnilo

[ /data/articles/1/snippets-response.png .(json snippets response) ]

Bacha na F5

Zpracování formulářu v Nette funguje na bázi signálu (handle) a tam abychom se vyhnuli problému s refreshem použijeme redirect(). Stejně je tomu i v našem případě se signály na disablování a enablování postu. Pokud se nejedná o ajaxový požadavek, tak přesměrujem.

// F5 protection without JS
if (!$this->isAjax()){
    $this->redirect('this');
}

Posílání opravdu jen toho co je třeba

každý řádek zabalíme do jednoznačne identifikovatelného snippetu (použijeme n makro)

{snippet wallposts}
    {foreach $wallPosts as $post}
        <div class="row" n:snippet="item-$post->id">

a přidáme trochu logiky do handle. V případě že se jedná o ajaxový požadavek, načteme jen aktuálně zpracovávaný řádek a do šablony ho pošleme jako "seznam všech postů", v normálním požadavku pošleme do šablony posty všechny.

public function handleEnablePost($postId)
{
    if ($this->wallposts->enablePost($postId)) {
        $this->template->wallPosts = $this->isAjax()
            ? array($this->wallposts->getOne($postId))
            : $this->wallposts->getAllPosts();
        $this->flashMessage('Post enabled');
        $this->redrawControl('flashes');
        $this->redrawControl('wallposts');

[ /data/articles/1/dynamic-snippets.png .(json dynamic snippets response) ]

public function renderDefault()
{
    if (!isset($this->template->wallPosts)) {
        $this->template->wallPosts = $this->wallposts->getAllPosts();
    }
}

Zničíme duplicitní kód

Metody handleEnablePost a handleDisablePost($postId) mají dost kódu úplně stejného. Proto mě napadlo že bych je nějak předělal.

První nápad byl mít metodu handleChangePostStatus($postId, $actionType), kde by jako druhý parametr byl typ akce, disable nebo enable. Dva parametry se mi nakonec nelíbily.

TIP: rezervovaná slova

zde jsem původně měl parametr pojmenová pouze $action a ouhle nějak to nefungovalo. Narazil jsem na pojem rezervovaných proměnných. Tak bacha na ně ;-) Proto i submit button ve formuláři by neměl mít jméno action. Další slova jsou: $do, $_fid, (TODO) .. a $action

Druhým nápadem bylo mít metodu handleTogglePostStatus($postId), která by si zjistila zda je článek povolen a zakázala by ho nebo opačně. Zjistil jsem, že by status ani zjištovat nemusela jen by SQL update otočil hodnotu (nezkoušel jsem). Toto řešení jsem zavrhl kvůli zobrazení ve dvou oknech současně. Chování by mohlo být nelogické.

Třetím nápadem bylo vytáhnout společnou logiku do vlastní metody a u něj jsem zůstal.

protected function afterTogglePostStatus($status, $postId, $message)
{
    if ($status) {
        $this->template->wallPosts = $this->isAjax()
            ? array($this->wallposts->getOne($postId))
            : $this->wallposts->getAllPosts();

        $this->flashMessage($message);
        $this->redrawControl('flashes');
        $this->redrawControl('wallposts');
    }
    // F5 protection without JS
    if (!$this->isAjax()){
        $this->redirect('this');
    }
}

public function handleEnablePost($postId)
{
    $status = $this->wallposts->enablePost($postId);
    $this->afterTogglePostStatus($status, $postId, 'Post enabled');
}

public function handleDisablePost($postId)
{
    $status = $this->wallposts->disablePost($postId);
    $this->afterTogglePostStatus($status, $postId, 'Post disabled');
}

Drobnosti

Dobré je mít v repozitáři šablonu pro config.local.neon

Chtěl jsem oku lahodící výpis postů na homepage

A pomocí CSS animované zmizení flash message

Tím končí tento delší rozbor jak jsem připravoval aplikaci na zobrazování postů z Facebooku.

Díky

commit:

commit:

Přihlásime se na Facebook Developers a vytvoříme novou aplikaci.

commit:

commit:

commit:

Abychom mohli vytvořit instanci třídy Cache tak jí musíme předat nějaký cache storage kam si bude ukládat data. Viz API dokumentace

Více o cache si nastudujete v dokumentaci .

commit:

commit:

commit:

commit:

tuto verzi najdete pod tagem

commit:

commit:

commit:

tuto verzi najdete pod tagem

Jako první poslal pull request .

commit: odebírá zbytečné kontrolování složky kterou nepoužíváme

commit: Upravuje jak se zapisuje přihlašování k databázi. Nyní jsou parametry (jméno, heslo, server, databáze) vytáhnuté do sekce "parameters". Proto si ze souboru config.local.neon odeberte sekci nette - database a nahraďte ji

commit: přidává zmíněný SQL table creator do kódu

Jako první nahradíme v composer.json Facebook/SDK za

Filip pak přepsal mé ifové peklíčko do mnohem čitelnější podoby pomocí . Nahradil datum ve stringu za DateTime obalené v a vrácený záznam je přetypován na (nezapomenout definovat v use)

V HomepagePresernter definujeme metodu , která vrací presenteru template object, který se použije pro render šablon. K této šabloňe přidáme filtr, který se bude starat o odkazy na posty.

commit:

tuto verzi najdete pod tagem

Na doporučení Davida jsem odebral z projektového .gitignore soubory Sublime editoru a PHPStormu a zapsal jsem si je do globálního gitignore

Než začnem s php úpravama, provedem pár drobných změn na frontendu ať se na náš výtvor dá aspoň trošku koukat. Osobně mám rád , ale tu samou práci, pro tento případ i možná vhodnější, odvede

commit:

commit:

commit:

commit:

není to žádná hitparáda, ale funguje, a to se počítá ;-) Začnem úpravou presenteru. Ten pokud se bude jednat o ajaxový požadavek, tak na místo flashMessage nastavíme do proměnné payload message co se stalo, a následně pošleme uživateli tento payload. Metoda sendPayload je ulehčení ať se nemusíme starat o posílání JSON Response, vše je čitélne z obsahu

commit:

commit:

commit:

Teď přichází pořádné kladivo. Představme si že nechceme ručně ošetřovat ajaxové volání. Prostě ať se udělá co se udělat má a změní se jen potřebné. K tomu slouží . Snippet chápu jako pojmenovaný prvek na stránce, který v případě potřeby je možné nahradit za jeho aktuální verzi. V našem případě si pro začátek označíme dva snippety. Prvním bude blok kódu co se nám stará o výpis flash messsages

kód se nám dosti zjednodušil. Ještě dáme pryč celý náš JavaScript mechanismus co se staral o zpracování požadavku a použijeme knihovnu , která umí pracovat automaticky právě se snippety a s jejich přenosovým "JSON protokolem"

commit:

commit:

Ajaxové požadavky sviští o 106 jen se nám v každém requestu ajaxem posílá celá tabulka postů. Ale my změnili jen jeden, co kdyby se tedy posílal jen tenhle jeden spolu s flash message? Lze. Technika se nazývá

jelikož se handle zpracovává dříve než render viz , tak pokud uživatel bez JavaScriptu změnil viditelnost postu, tak už do šablony poslal seznam všech postů a render už tuto věc dělat nemusí, tak si to ošetříme.

commit:

commit:

commit:

commit:

commit:

commit:

tuto verzi najdete pod tagem

http://srazy.info/nettefwpivo
commity
https://github.com/chemix/Nette-Facebook-Reader
Init from Nette Sandbox
clear homepage template and presenter
added blank Import Presenter
http://developers.facebook.com
add dependence on Facebook SDK to composer and small typo updates
load data from Facebook - dirty version
only one catch and application->terminate()
Nette\Caching\Cache
Caching
added cache for request
save posts to database
show post in template
show posts on homepage
:prototype
model - section for read from db
model - section for import data from Facebook
extract session generator to new service FacebookSessionManager
:model-di
Filip Prochazka
removed useless folder
Refactored default configuration for database
export db schema to project
Kdyby/Facebook
ternárního operátora "?:"
Nette\Utils\DateTime
ArrayHash
createTemplate
Use kdyby/facebook
:kdyby
podle návodu na githubu
Zurb Foundation
Bootstrap
added zurb foundation 5 and updated templates
tabs indent
basics for admin init
enable and disable post
metody sendPayload
ajax version of enable and disable post
better payload status and javascript behaviour
use signals for enable/disable posts
Snippety
nette.ajax.js od Vojty Dobeše
use snippets and nette.ajax.js
redirect after handle signal without JS
dynamické snippety
životní cyklus presenteru
Add method getOne to Model\FacebookWallposts
use dynamic snippets
refactor handleDisable and handleEnable
add config.local.neon template
better homepage render with masonry plugin
css autohide flash messages via
:admin
Filip Procházka
Jiří Zralý
David Matějka
Patrik Votoček