Templating Page Moodle Plugins With Mustache (moodle plugins chapter 3)

 This is a continuation of the previous chapter so you better read the previous chapter. for moodle users maybe this is already familiar but this is quite difficult to understand if you see it on other websites so I will give an example simply. Now I'm going to try to make a page templating for the plugin that we made yesterday.

1. First create a "templates" folder in your plugin directory then create a file with the name "basictemplate.mustache",and create a template.php file in the myplugin directory. So the directory structure will be like this.

myplugin/
├─ db/
├─ lang/
├─ templates/
│  ├─ basictemplate.mustache
├─ index.php
├─ lib.php
├─ template.php
├─ version.php

Such as "db" folder for database installation, "lang" for language settings, and "templates" for storing mustache templates.

2. The basic data settings that we will display in the template are like this

$data = [
	'name' => 'This is basic template',
	'description' => 'Lorem Ipsum',
	'users'=>array_values($datauser)
];

echo $OUTPUT->render_from_template('local_myplugin/basictemplate', $data);

in the $data variable we have 3 data namely name and description which has a single data

and data users have multiple data which we will later fill from the user table. 

The string "local_myplugin/basictemplate" means that it is in the directory "local/myplugin/templates/basictemplate.mustache"

because the type of plugin that we created yesterday was of type "local".

3. The whole script for the template.php file.

<?php

/**
 * @package     local_myplugin
 * @author      Deril Lab
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

//CALL CONFIG.PHP
require_once(__DIR__ . '/../../config.php');
GLOBAL $DB;
GLOBAL $CFG;
GLOBAL $USER;


$PAGE->set_url(new moodle_url('/local/myplugin/index.php'));

//SET TITLE PAGE
$PAGE->set_title(get_string("pluginname", "local_myplugin"));
$PAGE->set_heading(get_string("pluginname", "local_myplugin"));


//PRIVATE PAGE FOR PUBLIC
require_login();

//SET BREADCRHUM
$PAGE->navbar->add(get_string("pluginname", "local_myplugin"));

//GET HEADER
echo $OUTPUT->header();

/** TEMPLATING WITH MUSTACHE EXAMPLE **/

$queryuser = "SELECT * FROM {user} LIMIT 3";

$datauser = $DB->get_records_sql($queryuser);

$data = [
	'name' => 'This is basic template',
	'description' => 'Lorem Ipsum',
	'users'=>array_values($datauser)
];

echo $OUTPUT->render_from_template('local_myplugin/basictemplate', $data);


/** END MUSTACHE **/

//GET FOOTER
echo $OUTPUT->footer();


?>

4. And finally, the following is the script for basictemplate.mustache.

<section>
    
        {{$heading}}<h1> {{name}} </h1>{{/heading}}
    
    <div>
        {{$content}} <h3>{{description}} </h3>{{/content}}
    </div>
    
    {{#users}}
    <li>
    	{{firstname}}
    </li>
    {{/users}}
    

</section>

The way to call the data is quite easy to understand from the array script that we created cukuk call with the variable declaration, for example: {{name}} to call the variable name in the array.

For looping a lot of data / multiple data for example:

{{#users}} {{/users}} users is a variable declaration that contains data from the database, so to call the data table, simply put the field name in the middle like this {{#users}}

{{firstname}}{{/users}}.

5. Then try to run template.php