{"id":2236,"date":"2020-01-19T11:06:28","date_gmt":"2020-01-19T17:06:28","guid":{"rendered":"https:\/\/thepizzy.net\/blog\/?p=2236"},"modified":"2020-01-19T11:06:36","modified_gmt":"2020-01-19T17:06:36","slug":"phpbb-extension-template-partials","status":"publish","type":"post","link":"https:\/\/thepizzy.net\/blog\/2020\/01\/phpbb-extension-template-partials\/","title":{"rendered":"phpBB extension Template Partials"},"content":{"rendered":"\n

I’ve been working on replacing the front-end for the-spot.net<\/a> and thus, the front-end of phpBB forums<\/a>, using only the phpBB extension framework, trying to avoid having to put custom code into the core files, as was required pre-3.2 for some of my features.<\/p>\n\n\n\n

It turns out that the existing topics on the phpBB forums are not entirely helpful for doing something as advanced as this project has turned out to be, and most topics are trivially solved with clearing cache or reading the documentation<\/a>.<\/p>\n\n\n\n

Occasionally, I need to do something that requires multiple help forum threads and documentation pages, so as I come across those solutions, I’ll combine them into a post here, because that’s the purpose of this blog, after all.<\/p>\n\n\n\n\n\n\n\n

Rendering Template Partials<\/h2>\n\n\n\n

The first super complicated issue to solve was rendering what amounts to “part” of a template (hereafter referred to as “Partials”), without the html<\/code> shell. So, let’s get right to it then…you didn’t come here for my life’s story.<\/p>\n\n\n\n

Goal: AJAX HTML Response<\/h3>\n\n\n\n

To start, I have an infinite scroll that delivers a set of Topics, instead of using pagination. To avoid duplicating twig templating engine in JS, I’ll just deliver HTML, and use JS to update any existing elements, or append new elements.<\/p>\n\n\n\n

Step 1: Create template<\/code> class<\/h3>\n\n\n\n

First, create a template.php file to add a method for rendering Partials. I’ve placed mine for the extension “tsn\/tsn” at tsn\/tsn\/framework\/logic\/template.php<\/code>. Here’s a look at the basics of the file.<\/p>\n\n\n\n

<?php\n\nnamespace tsn\\tsn\\framework\\logic;\n\nuse phpbb\\template\\twig\\twig;\nuse Twig\\Error\\LoaderError;\nuse Twig\\Error\\RuntimeError;\nuse Twig\\Error\\SyntaxError;\n\n\/**\n * Class template\n * Adds functionality for rendering template partials\n * @package tsn\\tsn\\framework\\logic\n *\/\nclass template extends twig\n{\n\n    \/\/ Directories\n    const TEMPLATE_DIR = '@tsn_tsn\/';\n    const PARTIALS_DIR = self::TEMPLATE_DIR . 'partials\/';\n\n    \/\/ Partials\n    const P_MYSPOT_FEED = self::PARTIALS_DIR . 'tsn_myspot_feed.html';\n    const P_TOPIC_CARD = self::PARTIALS_DIR . 'tsn_topic_card.html';\n\n    \/**\n     * @param string $templateConstant A template path name or constant\n     *\n     * @return false|string|null\n     *\/\n    public function renderPartial($templateConstant)\n    {\n        try {\n\n            $output = $this->twig->render($templateConstant, $this->get_template_vars());\n            \/\/ Usually this is via AJAX, so compress the whitespace\n            $output = preg_replace('\/\\s+\/', ' ', $output);\n\n        } catch (LoaderError $e) {\n            $output = false;\n            error_log('Template Loader error: ' . $e->getMessage() . ' :: ' . $e->getCode());\n        } catch (RuntimeError $e) {\n            $output = false;\n            error_log('Template Runtime error: ' . $e->getMessage() . ' :: ' . $e->getCode());\n        } catch (SyntaxError $e) {\n            $output = false;\n            error_log('Template Syntax error: ' . $e->getMessage() . ' :: ' . $e->getCode());\n        }\n\n        return $output;\n    }\n}<\/code><\/pre>\n\n\n\n
It inherits phpbb\\template\\twig\\twig<\/code>, and thus its constructor. It has constants to help combine the various directories and file names should any of them need to be changed along the way. And it adds a single method to allow the render of a partial template.<\/p>\n\n\n\n
This new method is a wrapper for the call to the inherited twig<\/code> property and its render()<\/code> method. This new method receives a single parameter for the Partial template name to render. The template name (or constant) and template vars are then passed into the twig’s render method, and the HTML is returned. If the render method fails, it throws exceptions, so catch them and handle them as appropriate for your needs.<\/p>\n\n\n\n
Optional: In my case, I am using this for AJAX right now, so I am reducing all sequential whitespace to a single space character.<\/p><\/blockquote>\n\n\n\n
Step 2: Service Decoration<\/h3>\n\n\n\n
Now that we have the class, let’s put it in play. This is done with Service Decoration<\/a> in phpBB 3.2.x, which tells the phpBB code to use this class instead of the original class. In this case, anywhere we would have used $this->template<\/code>, it will invoke our class instead of the original class.<\/p>\n\n\n\n
This block goes into your services.yml<\/code> file<\/p>\n\n\n\n
tsn.tsn.framework.logic.template<\/strong>:
    class<\/strong>: tsn\\tsn\\framework\\logic\\template
    decorates<\/strong>: 'template'
    arguments<\/strong>:
        - '@path_helper'
        - '@config'
        - '@template_context'
        - '@template.twig.environment'
        - '%core.template.cache_path%'
        - '@user'
        - '@template.twig.extensions.collection'
        - '@ext.manager'<\/pre>\n\n\n\n
The key line is the decorates: 'template'<\/code> to tell the extension manager which service to replace.<\/p>\n\n\n\n
Step 3: Method Usage<\/h3>\n\n\n\n
As mentioned above, I am using this implementation in an AJAX controller to return HTML strings for further processing. When standing up my AJAX controller, I hint that this template variable is of my new template class.<\/p>\n\n\n\n
For context, my AJAX controller route looks like this in services.yml<\/code>:<\/p>\n\n\n\n
tsn.tsn.controller.ajax<\/strong>:
    class<\/strong>: tsn\\tsn\\controller\\ajax_controller
    arguments<\/strong>:
        - '@auth'
        - '@auth.provider_collection'
        - '@captcha.factory'
        - '@config'
        - '@content.visibility'
        - '@dbal.conn'
        - '@controller.helper'
        - '@language'
        - '@path_helper'
        - '@request'
        - '@template'
        - '@user'
<\/pre>\n\n\n\n
And for now, it looks like this in routing.yml<\/code>:<\/p>\n\n\n\n
tsn_tsn_ajax<\/strong>:
    pattern<\/strong>: \/tsn\/ajax\/{route}
    defaults<\/strong>: { _controller<\/strong>: tsn.tsn.controller.ajax:doIndex, route<\/strong>: \"index\" }<\/pre>\n\n\n\n
So the actual controller looks like this (with the extra stuff commented away)…<\/p>\n\n\n\n
<?php\n\n\/\/ ... use statements\n\n\/**\n * Class ajax_controller\n * <\/em>@package <\/em><\/strong>tsn\\tsn\\controller\n *\/\n<\/em>class <\/strong>ajax_controller extends <\/strong>AbstractBase\n{\n    \/** <\/em>@var <\/em><\/strong>stdClass the JSON response *\/\n<\/em>    private <\/strong>$response = null<\/strong>;\n\n    \/**\n<\/em>     * ajax_controller constructor.\n<\/em>     *\n<\/em>     * \/\/ Other Params\n<\/em>     * <\/em>@param <\/em><\/strong>\\tsn\\tsn\\framework\\logic\\template $template<\/em>\n     * \/\/ Other params\n<\/em>     *\/\n<\/em>    public function <\/strong>__construct(\/* other params... , *\/ template $template \/* , ... other params *\/)\n    {\n        parent<\/strong>::__construct<\/em>(\/* other params... , *\/ $template \/* , ... other params *\/);\n\n        $this->response = new <\/strong>stdClass();\n        $this->response->status = 0; \/\/ 0: error; 1: success, 2: info\/warning\n        $this->response->data = []; \/\/ whatever is necessary\n        $this->response->message = null<\/strong>; \/\/ message for 0\/2 status\n    }\n\n    \/**\n     * <\/em>@param <\/em><\/strong>$route\n     *\n     * <\/em>@return <\/em><\/strong>\\Symfony\\Component\\HttpFoundation\\Response\n     * <\/em>@uses <\/em><\/strong>url::AJAX_MYSPOT_FEED_PAGE\n     *\/\n    <\/em>public function <\/strong>doIndex($route)\n    {\n        \/\/ ... Setup User Access\n\n        $statusCode = Response::HTTP_OK<\/em>;\n\n        switch <\/strong>($route) {\n            case <\/strong>url::AJAX_MYSPOT_FEED_PAGE<\/em>:\n\n                \/\/ ...do work to set template variables\n\n                $this->response->status = 1;\n                $this->response->data['html'] = $this->template->renderPartial(template::P_MYSPOT_FEED<\/em>);\n                break<\/strong>;\n            default<\/strong>:\n                $statusCode = Response::HTTP_NOT_FOUND<\/em>;\n                break<\/strong>;\n        }\n\n        $headers = ['Content-Type' => 'application\/json; charset=UTF-8'];\n\n        if <\/strong>(!empty<\/strong>($this->user->data['is_bot'])) {\n            $headers['X-PHPBB-IS-BOT'] = 'yes';\n        }\n\n        return new <\/strong>Response(json_encode($this->response), $statusCode, $headers);\n    }\n}<\/pre>\n\n\n\n
The key line for usage is $this->template->renderPartial(template::P_MYSPOT_FEED<\/em>);<\/code> with the constant for the template to be rendered as the only parameter.<\/p>\n\n\n\n
Step 4: The Partial<\/h3>\n\n\n\n
And finally, the partial for this example looks like any other Twig partial:<\/p>\n\n\n\n
{#\n    This template spools up a page of Topic Cards for the MySpot Feed\n    This template requires a `topics` blockvar to iterate over\n#}\n{% if <\/strong>topics %}\n    {% for <\/strong>topic in <\/strong>topics %}\n        {% include <\/strong>'@tsn_tsn\/partials\/tsn_topic_card.html' %}\n    {% endfor <\/strong>%}\n{% endif <\/strong>%}<\/pre>\n\n\n\n
Key Takeaway<\/h2>\n\n\n\n
Avoid duplicating code where necessary.<\/strong><\/p>\n\n\n\n
  • Use the existing template engine, and avoid recreating it in either PHP or JS.<\/li>
  • Use Partials to render the same Template everywhere, in as generic a way as possible. Using wrapping elements with modifier classes to affect minor visual changes to the inner elements.<\/li>
  • Add your own PHP classes & traits to handle shared logic between Controllers.<\/li>
  • Use Service Decoration to replace\/extend existing phpBB Services with your own classes.<\/li><\/ul>\n\n\n\n
    <\/p>\n","protected":false},"excerpt":{"rendered":"
    I’ve been working on replacing the front-end for the-spot.net and thus, the front-end of phpBB forums, using only the phpBB extension framework, trying to avoid having to put custom code into the core files, as was required pre-3.2 for some of my features. It turns out that the existing topics on the phpBB forums are […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"How to render Template Partials with a phpBB extension","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[506,25,910,3,9,347],"tags":[974,152,47,973,951,359,970,972],"class_list":["post-2236","post","type-post","status-publish","format-standard","hentry","category-how-to","category-programming","category-tech-fixes","category-tech","category-the-spot-net","category-the-spot-network","tag-how-to-render-phpbb-template-partials-extension","tag-php","tag-phpbb","tag-phpbb-ext-partial-rendering","tag-the-spot-net","tag-tsn","tag-tsn9","tag-twig"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_likes_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/prOO4-A4","jetpack-related-posts":[{"id":2213,"url":"https:\/\/thepizzy.net\/blog\/2020\/01\/new-decade-new-projects\/","url_meta":{"origin":2236,"position":0},"title":"New Decade, New Projects","author":"[[Neo]]","date":"January 2, 2020","format":false,"excerpt":"A new decade rolls around, and with it some ideas for new technology projects to get started on.","rel":"","context":"In "Programming"","block_context":{"text":"Programming","link":"https:\/\/thepizzy.net\/blog\/category\/tech\/programming\/"},"img":{"alt_text":"tsn9 View Topic Mockup","src":"https:\/\/i0.wp.com\/thepizzy.net\/blog\/wp-content\/uploads\/2020\/01\/ENPfnSJXUAE0pKv.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/thepizzy.net\/blog\/wp-content\/uploads\/2020\/01\/ENPfnSJXUAE0pKv.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/thepizzy.net\/blog\/wp-content\/uploads\/2020\/01\/ENPfnSJXUAE0pKv.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/thepizzy.net\/blog\/wp-content\/uploads\/2020\/01\/ENPfnSJXUAE0pKv.png?resize=700%2C400&ssl=1 2x"},"classes":[]},{"id":96,"url":"https:\/\/thepizzy.net\/blog\/2008\/04\/tsn7-style-in-progress\/","url_meta":{"origin":2236,"position":1},"title":"tsn.7 Style in progress","author":"[[Neo]]","date":"April 30, 2008","format":false,"excerpt":"I've started work on the tsn.7 style and theme for the new forums, and I must say, it's lookin' pretty sweet. Once I get a working set going, I'll redo the splash page to give a bit of a preview and then load it up to the forum index. Let's\u2026","rel":"","context":"In "Programming"","block_context":{"text":"Programming","link":"https:\/\/thepizzy.net\/blog\/category\/tech\/programming\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/thepizzy.net\/blog\/wp-content\/uploads\/2008\/04\/Untitled-2.png?fit=400%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":25,"url":"https:\/\/thepizzy.net\/blog\/2006\/04\/update-tsnx-sub-forums-80-complete\/","url_meta":{"origin":2236,"position":2},"title":"Update: tsnX – Sub-forums, 80% complete","author":"[[Neo]]","date":"April 5, 2006","format":false,"excerpt":"This is the longest mod to do by hand, because it's sooooo long. It was one I was hoping to do with the EasyMod script. But it's about 80% done. After that comes the Profile Control Panel mod, and hopefully I can still use the EasyMod script on it, but\u2026","rel":"","context":"In "Technology"","block_context":{"text":"Technology","link":"https:\/\/thepizzy.net\/blog\/category\/tech\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":97,"url":"https:\/\/thepizzy.net\/blog\/2008\/01\/tsn7-style-in-progress-2\/","url_meta":{"origin":2236,"position":3},"title":"tsn.7 Style in progress","author":"[[Neo]]","date":"January 2, 2008","format":false,"excerpt":"I've started work on the tsn.7 style and theme for the new forums, and I must say, it's lookin' pretty sweet. Once I get a working set going, I'll redo the splash page to give a bit of a preview and then load it up to the forum index. Let's\u2026","rel":"","context":"In "Programming"","block_context":{"text":"Programming","link":"https:\/\/thepizzy.net\/blog\/category\/tech\/programming\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/thepizzy.net\/blog\/wp-content\/uploads\/2008\/04\/Untitled-2.png?fit=400%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":55,"url":"https:\/\/thepizzy.net\/blog\/2006\/05\/update-tsnx3-registrationlogin-fixed\/","url_meta":{"origin":2236,"position":4},"title":"Update: tsnX.3 – Registration\/Login Fixed","author":"[[Neo]]","date":"May 15, 2006","format":false,"excerpt":"The issues that we had with the cache and logging in after you registered have been fixed. There is nothing more frustrating than going through a mod that has worked in the past, but doesn't work this time, because everything else that it had interacted with before has changed. The\u2026","rel":"","context":"In "Technology"","block_context":{"text":"Technology","link":"https:\/\/thepizzy.net\/blog\/category\/tech\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":91,"url":"https:\/\/thepizzy.net\/blog\/2007\/05\/update-new-rss-code-in-the-works\/","url_meta":{"origin":2236,"position":5},"title":"Update: New RSS Code in the works.","author":"[[Neo]]","date":"May 28, 2007","format":false,"excerpt":"Earlier I posted on the RSS Code that I'm working on. I've done quite a bit of work on it so far - learning about the various functions that PHP offers. Most of what I thought I was learning while setting up the forums was not actually PHP's functions, they\u2026","rel":"","context":"In "Programming"","block_context":{"text":"Programming","link":"https:\/\/thepizzy.net\/blog\/category\/tech\/programming\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/thepizzy.net\/blog\/wp-content\/uploads\/2008\/04\/Untitled-2.png?fit=400%2C400&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/posts\/2236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/comments?post=2236"}],"version-history":[{"count":6,"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/posts\/2236\/revisions"}],"predecessor-version":[{"id":2442,"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/posts\/2236\/revisions\/2442"}],"wp:attachment":[{"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/media?parent=2236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/categories?post=2236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thepizzy.net\/blog\/wp-json\/wp\/v2\/tags?post=2236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}