Define view templates using HTML - Ruby on Rails Tutorial

- [Illustrator] We've seen how controllers can either redirect or render a view template. In this movie, we're going to take a closer look at the view templates. So far, our templates have been composed of only simple HTML. But that's not going to to be very dynamic or database driven. It'd be better if we could embed Ruby code into the templates. So we could use dynamic information. To do that, we're going to use ERB. ERB is short for embedded Ruby. It's a templating system to embed Ruby into our pages. You may remember those letters ERB were part of the template file names that we saw earlier. We had hello.html.erb. What this means is that the templates name is hello, it's going to be processed with ERB. And the final output format will be HTML. There are other templating systems and you can have other output formats. But this naming scheme is always the same. So the first step in being able to embed Ruby code is to have the correct file name. Once you have that, you have .erb at the end of the file it will be processed with eRuby. And then we just need to use the correct ERB tags to tell Ruby what it should put in the code. There are two ERB tags, the first uses a less than sign and a percent followed by any code that we want to use. And then it's closed with another percent and a greater than sign. The second ERB tag is the exact same, but with an equals sign right after that first percentage. The difference between them is the first one executes Ruby code. The second one executes Ruby code, and outputs the result into the template. The first one doesn't actually output anything into the template. The equals sign is telling it that this also should be output. It's an important difference. If you're familiar with using Ruby before, you may be tempted to try and use puts or print or something like that. Those don't apply here. This is not Ruby we're working with, it's the ERB template, and we have to use its conventions. So let's start by adding some ERB into our hello template, I'm going to just comment out this redirect because we don't want it to redirect anymore. We want it to render the hello.html template. We'll leave this as the hello page at the top, but let's get down and let's use our ERB tags. And let's start with just doing one plus one, very simple Ruby code inside those ERB tags. And let's see what we get. Let's save the file. Let's go over here and let's launch our web server. Once it comes up and tells us that it's listening, we'll jump over here to Firefox and let's load up /demo/hello. This is the hello page but we didn't get any output. You know why that is? Well, we didn't tell it to. We used the ERB tags that calculated but did not output. So this did in fact, add one plus one and then it did nothing with that at all. If we instead put the equals sign there. Let's save the template, come back to the page and let's reload it. Now, you can see that it output it too, that's a very important difference. Now, you're going to use both. For example, let's do a BR tag here. And then let's use the ones without the equals sign. And let's set target equal to world. And then let's do another one, it's going to use the equals sign. And it's going to say, in double quotes, it has to be double quotes, hello. And then we'll interpolate. That's what this is called when we do this where we have a pound sign or hash sign, followed by the curly braces, and then a variable name inside. And then let's put an exclamation point at the end. Let's save it. Let's go over here and reload the page. You'll see now it output hello world, right? So it's very common that we'll do things like set variables inside the tags here. When we actually are ready to do the output into the template, we'll use the equals sign. Let me just do one more illustration here. Let's do another BR tag. And let's do, a typical Ruby expression might be three times do in, that's going to be a loop. And then we'll close our tags. And then inside there, you might be tempted to do some basic Ruby like puts in, right. That's going to output some numbers as it loops through each time. Let's save it. Let's see what it does. We'll come back here and reload. And it doesn't output anything at all, right. puts didn't do it, even though puts normally does output. What it did do is it actually put it in the console, it's over here so we can see it because it output it to the standard out. And that's what's considered standard out. That's not what we wanted. What we wanted instead, was to output it to the page. So it's be more common to do something like this. Give me a second to make these changes. And then let's say we're going to have some paragraph tags. And then we'll close our paragraph tag at the end. So here you see, I've got some basic Ruby code that starts my loop three times do in. Then I've got some HTML, then I'm doing an output of the number. And then I'm ending my loop here. So it's perfectly acceptable to jump back and forth between the different parts of Ruby code, HTML and Ruby code that you want to output. Let's save it. Let's go back to our page and let's reload it. And that's what we want zero, one, and two. So you're going to surround any Ruby code that you want to be processed by the page using these ERB tags. And if you want it to output something to the page, then you need to use the one that has the equals sign too.