Effectively Theming long stringed dynamic html - php

Question

I'm making several HTML popups that always follows a defined template.
Since there is a template (header,content,example table,more button),
I thought I can save a lot of recurring html by passing the data to a wrapper function like so:
$device_popup_data = array(
'header' => 'Header text',
'content' => 'some text<span style ="bold"> Some more text</span>',
'example' => '<table><tbody><tr><td> A lot of text here, multi lined and messy',
'more' => '',
);
echo theme_uxt_expanded_popup($device_popup_data);
function theme_uxt_expanded_popup($data){
$head = isset($data['head'])?$data['head']:'';
$content = isset($data['content'])?$data['content']:'';
$example = isset($data['example'])?$data['example']:'';
$more_html = isset($data['more'])?$data['more']:'';
$output= '<div class = "expandedTooltip">';
$output.= '<h1>'.$head.'</h1>';
$output.= '<p>'.$content.'</p>';
if(!empty($more)){
$output.= '<a class = "popupShowMore"><p>'.$more.'</p></a>';
}
$output .= '</div>';
return $output;
}
This seemed like a great idea, until I have seen that some of these fields, like the example field, may contain around 100 lines of HTML.
Pushing these long strings into the example variable seems to make very unreadable code. Something like this :
$device_popup_data = array(
'header' => 'Header text',
'content' => 'some text<span style ="bold"> Some more text</span>',
'example' => '<table><tbody><tr><td> A lot of text here</td>,<td> multi lined and
messy, and if any one</td>
<td>wants to change this string it will be very hard</td>
Real string is much longer ... </table>',
'more' => '',
);
Do you know of an efficient and readable way of doing something like this?

Answer 1

Do you know of an efficient and readable way of doing something like
this?
The only readable, maintainable way of doing this is to adhere to the Separation of Concerns. The points here are 1) Decoupling HTML from PHP 2) Implementing a container, like name => HTML content
You should really wrap that into a class, in order to take full advantage of DI and SRP
(see below). So, a class itself would look like as:
class TemplateBlockManager
{
private $blocks = array();
public function define($name, $file, array $vars = array())
{
ob_start();
if (!empty($vars)) {
extract($vars);
}
require($file);
$content = ob_get_clean();
$this->blocks[$name] = $content;
}
public function getBlock($name)
{
return $this->blocks[$name];
}
}
File : test.phtml
<p>
<b>Welcome to <?php echo $foo; ?></b>
</p>
Usage:
<?php
$blockManager = new TemplateBlockManager();
$blockManager->define('header', '/path/to/test.phtml', array('foo' => 'bar'));
// Should output "Welcome to bar"
echo $blockManager->getBlock('header');
This approach has a number of advantages:
You can prepare several blocks at a bootstrap stage, thus your blocks can be shared
across your pages. This reduces code duplication
You can inject an instance of a $blockManager to another classes that generate an output. This is good for unit-testing, as it adheres to the Dependency Injection
You also adhere to the Single-Responsibility Principle
You totally decouple HTML from PHP, since your templates contain basic (or none) php logic
Since your templates are totally decoupled you don't have to worry if they are long or small. You would simply define a path to the one
And finally, both HTML and PHP code are easy to maintain