ERB Templates: Part 1

[?mellow guitar music?] 0:00 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 0:03 Ruby on Rails: Views - ERB: Part 1 with Jim Hoskins 0:07 Ruby on Rails views are what allow us to format our data for the user, 0:13 whether it be custom HTML, XML, or any other format. 0:16 In this chapter, we're going to look at how to work with views in Ruby on Rails. 0:20 The default templating system for views in Rails is ERB, 0:24 or embedded Ruby. 0:28 Now, there are other templating systems available, 0:30 like HAML, but we'll be looking at those later. 0:32 Right now, we're going to learn about the default templating system, ERB. 0:35 Now, ERB is pretty simple, because it's just a normal text file 0:38 with special bits of Ruby embedded into it. 0:42 There are 2 ways to embed Ruby into an ERB view: 0:45 with an output ERB tag, and a non-output ERB tag. 0:48 Now, here we have just an example of an ERB page, 0:52 our index.html.erb, 0:55 and we've manipulated some of this in the past few videos. 0:57 So, as you can see, it's just a basic HTML file-- 1:00 we're printing out an h1 here. 1:03 Here, we see an ERB tag--and we'll look into how these work in a second-- 1:06 and we have some more text right here and another ERB tag. 1:10 Now, an output ERB tag looks like this, 1:14 with a "less than" sign, a percentage, and an equal to open it <%= 1:17 and a percentage and a "greater than" to close it %>. 1:21 Everything inside of this tag will be executed, 1:24 and the string representation of the value 1:27 will replace the actual tag in the template. 1:30 So I'm going to switch over to our show.html.erb, 1:33 so we can start experimenting with ERB tags. 1:36 Towards the top of the page, I'm just going to use a simple ERB tag 1:39 to print out a string. 1:42 So here, I'm opening the ERB output tag-- 1:44 you can see by the equals <%= 1:46 and I'm just going to place the string "Hello" 1:47 and let's see what that does. 1:49 So if I go to a show view, 1:52 you can now see the string "Hello" has been printed. 1:54 We can do things other than normal strings. 1:57 We could put any expression in there, like 5 * 6 1:59 and we'll save it out, and we'll see that it evaluates 5 * 6 2:02 and will replace the tag with the string representation of 30. 2:07 We flip back and refresh, and we can see 30. 2:11 So it doesn't have to be a string in order to be an ERB tag, 2:14 so long as it has a string representation. 2:17 Similarly, we can print out properties of an object, 2:20 like @project.name. 2:23 So if we refresh, we can see that "Renovate Kitchen" is now in this tag. 2:28 You can see that's what's being done on this page. 2:33 By default, the template that it generates 2:35 just prints out a list of keys and values 2:37 by printing the name in the .name, the description in the project.description, 2:40 and so on, through all of the properties. 2:44 Now, an ERB tag will simply print out the string value of the last expression, 2:47 so if you have several sub-expressions separated by semicolons, 2:52 they will all execute, but only the final expression will be printed. 2:55 So, in this case, here I have 3 expressions separated by semicolons. 2:59 First, I'm setting a variable "a" to "Hello" 3:04 a variable "b" to "World" 3:07 and then my last expression is a + b + "!!!", a string full of exclamation marks. 3:09 So when we save it and we refresh, 3:14 we can see that only "Hello World " is printed. 3:17 Even though these executed, we don't see the results "Hello" and "World" printed out 3:20 before the final "Hello World" string. 3:24 So this is nice if you need to maybe set a variable 3:26 or do something quick before you echo any code out, 3:29 but you don't want to put too much code into an ERB tag-- 3:31 you'd like to really keep your code separated. 3:35 Now, even though you can put just about any Ruby code into an ERB tag, 3:37 it's best practice to write as little code as you can inside of the views. 3:41 For instance, if you have a model with a first name and last name field, 3:44 and you wanted to print out the full name in your view, 3:48 you could do something like this: 3:51 and use an ERB output tag <%= 3:53 put the @person.first_name + 3:56 add a space " " + @person.last_name and close the tag %>. 3:58 Now, having this in many places in your code is going to be a nightmare 4:02 for maintainability, so instead, 4:05 it would probably be best for us to actually write this as a method for our model. 4:08 So, for instance, if we had a Person class, 4:12 we could write code like this, where we define a full name method 4:14 that just returns a first name plus a space, plus a last name. 4:19 Then, we could just simply put person.full_name 4:23 instead of having to construct the full name inside of the view. 4:27 Whenever possible, it's ideal to move any code like this 4:30 into your model, or sometimes, into helper methods, 4:33 which we'll be looking at in a future video. 4:36 Now, in previous versions of Rails, 4:39 an ERB output tag would simply output the string. 4:41 Now, outputting content that may have come from a user or a third party-- 4:44 like a user name or a comment-- 4:47 it presents a danger. 4:50 The content could contain HTML code that could mingle your page, 4:52 or worse yet, it could even execute javascript 4:55 that could target other users' personal data. 4:57 This is known as a cross-site scripting attack, or an XSS attack. 5:00 Before Rails 3, we would have to use a special method, 5:05 like the h method, to make sure content is safe. 5:08 For instance, if project.name came from a user, which it does, 5:10 we would want to wrap it in the h method. 5:14 So you'll see this in a lot of pre-Rails 3.0 code. 5:17 What this does, is it takes the string and it escapes any HTML characters, 5:20 making sure that if there's any HTML tags, 5:24 they will be escaped into the literal < or > sign, 5:27 making it unable to execute in the page. 5:31 In Rails 3, however, it is now escaped by default. 5:36 Let's look at this simple example. 5:40 If I were to just output this string, which contains an h1 and a closing h1 tag 5:42 inside of the string, you would think that it would print out the h1's and the HTML. 5:48 Well, if we refresh the page, we can see that it's printing out the literal > signs. 5:52 If we look at the code, we can see that they have been converted to < and > signs 5:57 inside of the code. 6:03 Now, this means that if a user put a closing div tag 6:05 or something in the code, they couldn't screw up our layout, 6:08 and more importantly, they couldn't inject a javascript. 6:11 We can display this on escaped in a couple of different ways. 6:14 The first is we could call a method raw 6:18 and pass it the string that we want to be output literally. 6:20 So when we do that and we refresh, 6:23 we can see now the h1 is the real h1 tag in the code, 6:26 because it's displaying without any escaping. 6:30 The second thing we could do is mark the string as HTML-safe. 6:33 A new method has been introduced, called html_safe 6:37 and when we call that, 6:41 the same effect happens. 6:44 What's nice about this is if we're creating a helper method 6:46 that generates HTML that we know is safe, 6:49 inside of the helper method, before we return the string, 6:52 we can mark it as html_safe. 6:55 That way, when we call it in our ERB tag, 6:57 we don't need to call raw or html_safe on it again. 7:00 Now remember, you only want to call html_safe or use the raw method 7:03 if you know for sure that the HTML code is absolutely safe, 7:06 and this means it didn't come from a database that a user might put in, 7:10 or a parameter or a cookie or anything else that the user, 7:13 or another malicious user, 7:17 might be able to manipulate. 7:18 In part 2 of this video, we're going to take a look at the non-output ERB tag 7:20 and when it should be used. 7:24 [?mellow guitar music?] 7:26 Think Vitamin Membership - Est. 2010 membership.thinkvitamin.com 7:29

You need to sign up for Treehouse in order to set up Workspace

Sign up