Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

[Tutorial] Using the new Template Class.

Difficulty: PHP-Fusion Developers

As per the very beginning, we have issued a development plan that we are deploying a new "MVCT" method that many people do not understand as it differs from all other known system. This article aims to guide people to use the Template class is recently released after Stable.

Instructions:

In your current active theme:
1. Create a folder called "custom_templates"
2. and make a new file called "forum.html"
3. and a file called "forum_items.html"

Now, we'll be using plain HTML for this simple tutorial, and we'll be modding the front page of the Forum at forum/index.php only.

Please find the code below for each relevant files and paste them in.

Forum.html
CodeDownload  
<style>
 .card-columns {
 -webkit-column-count: 4;
 -moz-column-count: 4;
 column-count: 4;
 -webkit-column-gap: 1.25rem;
 -moz-column-gap: 1.25rem;
 column-gap: 1.25rem;
 }
 .card {
 display: inline-block;
 width: 100%;
 margin-bottom: .75rem;
 position: relative;
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: vertical;
 -webkit-box-direction: normal;
 -webkit-flex-direction: column;
 -ms-flex-direction: column;
 flex-direction: column;
 background-color: #fff;
 border: 1px solid rgba(0,0,0,.125);
 border-radius: .25rem;
 break-inside: avoid-column;
 }
</style>

<h3 class='text-light m-b-50'>{%custom_title%}</h3>
<div class='card-columns'>
 {forum_block.{ {%container_block%} }}
</div>



forum_items.html
CodeDownload  
<div class='card'>
 <div class='list-group-item' style='min-height:250px; border-color: transparent; padding: 10px 20px; border-radius: 8px !important;'>
 <div class='display-block'>
 <div class='display-block center-x spacer-xs'><img src='{%forum_image_src%}' class='icon'></div>
 <h3 class='text-dark'>{%forum_name%}</h3>
 <div class='text-left'>{%forum_description%}</div>
 </div>
 <div><ul class='block'>
 {subforums_block.{
 <li>
 <h4>
 <a href='{%forum_link%}'>{%forum_title%}</a>
 </h4>
 <div class='text-left'>{%forum_description%}</div>
 </li>
 }}
 </ul>
 </div>
 </div>
</div>



Finally, this is the code that we'll be taking from the $info and work on the template class.

The Template Engine

The Engine Object is created simply using \PHPFusion\Template. Since we're on PSR-4 autoloading, things have been far more simpler than require files one by one.

The Template Engine has 5 primary methods which is sufficient for all designing needs. I will attempt to describe what each do.

Quote

1. getInstance( $template_id );
This is a static method. The $template_id is a unique name that is given to the instance so it will not conflict with another. By instancing the template engine, it minimize system resource consumption and ensure it is very fast.


Quote

2. set_template( $path_to_your_html_file );
This is where you set and define which html file you want to use for this template instance. The path in $template_path is a relative one, and you can simply use BASEDIR, THEME, INCLUDES, or any path you would want. For best result, each unique instance should be bind to one single template path.


Quote

3. set_tag(string string $tag_source , string $html);

If you have only 1 single replacement element in your HTML, you can simply use the Single Replacement set_tag method.

The $tag_source is the marked macro label {%tag_source%} equivalent in your HTML file.
The $html is a single string value you wish to display.


Quote

4. set_block( string $block_name, array $html);

What if you have multiple items that you want to show, then the set_block method can be used. Each set_block method call will create a duplicate of the block. If you run set_block 5 times, it will create 5 elements duplicate in your final output.

The $block_name is the block title of HTML block.
The $html array is a series of elements of a tag_source and value as described as method 3 above. This changes the values of the block elements.


Quote

5. get_output(); // returns string
Displays the Final Output string which you can print echo or bind it to another template class.



In Forum, we have a master page and we have many child blocks of a forum category and then each forum category has subforums and subforums within.

In your theme.php, we'll activate the override procedures. I will explain what each step do.

Declare a new function with this:

CodeDownload  
function render_forum($info) {

// Create an instance for the index page
$html = \PHPFusion\Template::getInstance('forum');
// Set the path of our forum HTML file.
$html->set_template(THEME.'custom_templates/forum.html');
//print_p($this-info['forums']); // uncomment to see the MVC data

// If we have root forum category
if (!empty($this->info['forums'][0])) {

 // for each of the forum category
 foreach ($this->info['forums'][0] as $forum_id => $forum_data) {
 //print_p($forum_data);

 // Create a Item Container html using the Forum_items.html

 $item = \PHPFusion\Template::getInstance('forum_child');
 $item->set_template(THEME.'custom_templates/forum_items.html');

 // SIngle Replacement for the Forum Block Container, such as image, title, description
 $item->set_tag('forum_image_src', FORUM."images/".$forum_data['forum_image']);
 $item->set_tag('forum_name', $forum_data['forum_name']." Forum");
 $item->set_tag('forum_description', $forum_data['forum_description']);

 // Check if there are any sub forums for this category
 if ($forum_data['child']) {
 foreach ($forum_data['child'] as $child_id => $child_data) {

 // Use the set_block method to duplicate
 $item->set_block('subforums_block',
 array(
 'forum_link' => $child_data['forum_link']['link'],
 'forum_description' => $child_data['forum_description'],
 'forum_title' => $child_data['forum_name']
 )
 );
 }
 }

 // Finally, from the $item->get_output(); we have the child, and use a duplicator set_block to create container of the same in the master index file.
 $html->set_block('forum_block', array(
 'container_block' => $item->get_output()
 )
 );
 }
 }

// Finally display the entire html template.
echo $html->get_output();
}



Really simple right?

The template class is the best way to get the both out of HTML, and PHP to work in one, where Theme Developers will create the function during distribution and template designers can just work on the HTML file itself - without the need for PHP Knowledge at all.

That's it, if you have troubles or questions, please feel free to ask away.
The template class is not available in the sourceforge version. It is only available in the Github version.
very helpful.
is there a special profile.html or profile.inc template like the profile on this site. thanks
Yes, most of the pages on this site work on html so I can easily edit without going through the core files.
love the script code profile.html like this main site profile page so you can see and learn.
sorry my english is very bad
Thread Information
Author
Replies
6 posts
Views
86 times
Last Post
Last updated on 1 year ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You cannot start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Chan, hervan, RobiNN