Start a free Courses trial
to watch this video
In this video, we introduce ERB, the default templating system for Ruby on Rails. We begin by looking at it's most common tag, the output ERB tag.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up[?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 download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up