Dancer2 Template-Toolkit Integrations with Routes
Tags: perl, dancer2, webdev
Published: 2020-02-18 06:18:13

# Dancer2 Template Integration with Routes

This article is in continuation of our previous article Basic Dancer2 Routes. If you are a new visitor, you can visit the previous article [here](https://ashutosh.dev/blog/post/2020/02/basic-dancer2-routing).

In this article, we learn about the templates (Template::Toolkit), and, it's integration with the Dancer2 routes. Assuming you already have a basic understanding of Dancer2 framework, HTML and CSS, we directly jump into the subject.

open the config.yml file

![template_toolkit_conf](https://user-images.githubusercontent.com/12954663/74707259-32e4d280-5211-11ea-815d-c3db0429cfc8.jpg)

Let's open the app name.pm file and write the following:

```perl
get '/home' => sub {
	template = 'home.tt';
}; 
```

As you observe by using the 'template' keyword, we tell the route to look for the template file under the *views* folder. 

PS: 'home.tt' is the name of the template file.

At present, we did not create the 'home.tt' file, hence if we go to the /home on the browser, it throughs an error. Create the home.tt under the *views* folder, and, write the following text **I am at home** in it.

![Screenshot 2020-02-17 at 10.40.17 AM](https://user-images.githubusercontent.com/12954663/74632417-39167880-5157-11ea-9d4a-dc0dd1beb93e.png)

We are on the right track. 

Have you noticed, we didn't write any CSS, headers, and footers but, we can still see CSS on our page. How we get these style sheets on our page? 

We got the design from the main.tt template under the '*app_dir*/views/*layout* folder'. 

Here is another question where we tell the application to include the main.tt template in the home.tt file?

The answer is in the *config.yml* file. See the screenshot for more details.

![Screenshot 2020-02-17 at 10.49.48 AM](https://user-images.githubusercontent.com/12954663/74632414-387de200-5157-11ea-94fb-e910edc032a6.png)

Instantly, delete all the contents of the main.tt template, and refresh the browser. What do you see right now?A blank page??? Where is the content vanished? We already defined the template in the config file, however there is no content on the web page. It is true the layout is defined in the config file but in the main.tt file we did not specify to render the content from other templates. Add [% content %] to the main.tt template and refresh the webpage.

```perl
[% content %]
```

![Screenshot 2020-02-17 at 10.49.48 AM](https://user-images.githubusercontent.com/12954663/74632408-34ea5b00-5157-11ea-9059-e1e1d4b0bd00.png)

This is what we want to see.

## Pass Template Variable

While developing the web application implementing the framework, the idea is to make it as dynamic as possible. For this, we need rendering the data at the server side and then pass to the standard template to display it on the web page.

```perl
get '/home' => sub {
	my $name = 'Michael.';
	template 'home.tt', { name => $name };
};
```

And to render the "name" in the home.tt template.

```html
I am at home. You can call me anytime [% name %].
```

Refresh the webpage and you can see the content.

### Pass array to the template

Just like variables, we can pass arrays and hashes to the templates.

 ```perl
get '/home' => sub {
	my @numbers = ("One", "Two", "Three", "Four", "Five");
	
	template 'home.tt', { numbers => \@numbers };
};
 ```

And in the template.

```html
Following are the numbers:
[% FOREACH num IN numbers %]
    <p> [% num %]  </p>
[% END %]
```

### Pass Hash to the template

```perl
get '/home' => sub {
	my %hash_to_pass = (
		{
			1 => 'one',
			2 => 'two',
			3 => 'three',
			4 => 'four'
		}
	);
	template 'home.tt', { hash_num => \%hash_to_pass };
};
```

And in the template file, write the following

```html
Following are the numbers:

[% FOREACH num IN hash_num.keys %]
    <p> [% num %] - [% hash_num.$num %] </p>
[% END %]
```

If you notice the FOREACH loop to iterate array and hash is almost same. The only difference is '.keys' which tell the template, this variable is a type of hash.

*[% hash_num.$num %]* is to print the value of the keys.

Refresh, the browser.

![Hash_Pass_To_Template](https://user-images.githubusercontent.com/12954663/74706718-a38aef80-520f-11ea-9784-59da3eb37a6f.png)

Nature of the hash, keys are not sorted. 

Use *[% FOREACH num IN hash_num.keys.sort %]* for sorted results.

We can also hook the templates in the routes. We will cover it in a separate story of 'Hooks'. Stay tuned.