Basic Templating And Passing Data

In our last tutorial, we covered the basics of routing and setting up controllers. Now that our site is coming together, we are going to learn some basics about templates and passing data to templates.

We recommend to use the supplemental example sites to help you learn faster:

Helium-MVC/Examples

Template

From the past examples, you may have noticed our site has some “style” to it with html and css — but where does it come from and how do we change it?

Every view is wrapped by what is known as a template. Templates contain static content that is constant between pages such header and footer menu items, standard social media icons, css, javascript. These static templates wrap around the dynamic content that changes from page to page.

The views, which we created last tutorial, are dynamic and change between pages. To get started on templates, head over to site/templates/ folder. There you will see:
— _css.html.php
— _javascript.html.php
— blank.html.php
— default.html.php

We are going to start with default.html.php which contains the static elements you have seen up until now. As you go through the file, the key element to look at is the

<?php echo $this -> content(); ?>

This is where the content s of the view is displayed. The html above and below the $this -> content() function wraps around the view to create that static content.

Template Helpers

Above the $this -> content(), there is another function called:

<?= $this -> ShowAlert -> showAlert(); ?>

This function is showing our validation messages and is know has a Template Helper. To see where this file is generated, head over to:
site/extensions/template/ folder, and you will see the ShowAlert.php file.

Template helpers are easy to create and call. Another example of a helper Format.php, also located in site/extensions/template/. The class formats input for the view. Opening up we see one of its function that converts a number into a currency:

public function currency($number) : string {
   return ‘$’ . money_format(‘%i’, $number);
}

To call this function, in a view or template we simply write:

<div>
 <?= $this -> Format -> currency(5); ?>
</div>

All helpers when called from a view or template start with $this -> ClassName -> methodName() .

Passing Data Into A View

Right now our views are empty, but eventually, we will make models, call our database, and then pass real dynamic data into view. Starting slow, we are going to pass static data into a view.

Let's open up site/controller/indexController.php and we are going to create a few variables.

<?php
include('baseController.php');
class indexController extends baseModel {
  public function index() {
     $title = ‘My Blog Site’;
     $name = ‘Enter Your Name’;
     $date_today = date(“Y-m-d H:i:s”);
    return array(
     ‘title’ => $title, 
     ‘name’ => $name, 
     ‘date_today’ => $data_today
    );
  }
}

Now we are going to jump over into our views and output that data. Go to site/views/index/index.html.php. The way we passed the data in the array above is what can be used to reference the code in the view. Lets have some fun.

<!--Output the title -->
<h1><?= $title; ?></h1>
<!-- Output the name -->→
<p> Hi <?= $name; ?>, how are you?</p>
<!-- Use the Format template helper to output the date -->
The date today is <?= $this -> Format -> dateTime($data_today); ?>

Nice job! Have some fun with the views and passing data. Next we are going to dive into models and the database.