Creating Links with Embedded Ruby vs. HTML

Locked lesson.

Upgrade

About this lesson

How and why to use ERB to create web links.

Quick reference

Creating Links With Embedded Ruby vs. HTML

In this video we discuss creating links with embedded Ruby.

When to use

Any time you want to add a link to your app, you should use embedded Ruby instead of basic HTML.

Instructions

Embedded Ruby links look like this:

<%= link_to, "Anchor Text", link_path %>

Where "Anchor text" is the text that you want to appear in the link on the web page, and "link_path" is the route to the actual file that the link points to.

You find the link_path by running the "rake routes" command from the terminal.

Hints & tips

  • Embedded Ruby links are always better than plain HTML links
  • Embedded Ruby links automatically update whenever you change your app, HTML links do not
  • Api.rubyonrails.org is a great reference to look up how to create links in case you forget
     
Login to download
  • 00:04 In this video, I wanna talk about links.
  • 00:06 Right now, we've got a couple of different pages, but
  • 00:09 there's no way to navigate between those two pages, so we need links.
  • 00:12 So I've opened our about.html page, and let's just create a basic HTML link.
  • 00:19 And let's aim it at the root,
  • 00:25 Home page, don't need a space there.
  • 00:29 This is just a basic HTML link, so if click reload,
  • 00:32 actually let's get rid of that HIYA thing, that's annoying.
  • 00:37 And then save that.
  • 00:38 Okay, so if we click on here, boom, go back to our Pinteresting,
  • 00:43 okay, no big deal.
  • 00:44 Well, that's the old way to do links.
  • 00:47 Rails actually has a better way, and
  • 00:49 it uses something called Embedded Ruby that I talked about a little bit earlier.
  • 00:53 You can see this .erb, that allows us to use Ruby on our pages.
  • 00:57 So Rails has a function called link_to, and it allows us to create links.
  • 01:03 So first thing first, in order to use Embedded Ruby on a HTML page, we do this.
  • 01:11 So this is an Embedded Ruby tag, this is the start of the tag, and
  • 01:16 this is the end of the tag, and anything in between is Ruby code.
  • 01:21 And we're gonna be using, like I said,
  • 01:24 some Ruby code to do link_to, so how do we create a link?
  • 01:28 Well, let's go to Rails API, and you'll use this
  • 01:34 quite a bit, so I wanna show you how to use this.
  • 01:39 This is the Rails API,
  • 01:41 it has all the information you could ever wanna about Ruby on Rails.
  • 01:44 Or if I type in link_to and click here,
  • 01:47 we see a quick little guide on how to use link_to, and even some examples.
  • 01:53 So here's the first example, link_to, this is the anchor text,
  • 01:58 and this is the path to the page we wanna go to.
  • 02:01 Let's try this out, we want link_to, and let's call it Home Page.
  • 02:09 Now, we need the path, where do we get the path?
  • 02:11 Well, remember we did that rake routes command, and we got the path,
  • 02:16 and it's listed right there, our path is the root_path.
  • 02:21 So if we save this, in fact, let's get rid of this one so we're not confused.
  • 02:27 Click Reload, boom, that worked.
  • 02:30 So let's real quick do the same thing on our index page.
  • 02:36 So Embedded Ruby, close our Embedded Ruby tag,
  • 02:42 link_to, and let's make this About Us,
  • 02:47 and what path do we want?
  • 02:50 Well, we can go down to our rake routes thing, and we want the home_about_path.
  • 02:56 So type in home_about_path, and for
  • 02:59 all of these links, they always end in _path.
  • 03:04 And you could see that by looking at the Rails API here, and
  • 03:07 reading about it, if you're interested.
  • 03:10 So let's save that, come back, hit Reload, and now, we can navigate between the two.
  • 03:17 So this all begs the question, why are we doing this complicated thing when we could
  • 03:22 just use a regular HTML link, like we did earlier?
  • 03:25 Well, this is really cool, because from time to time,
  • 03:28 while you're creating your app, things will change, and paths will change.
  • 03:31 And you might have 1,000 links to 1,000 pages on your app, and
  • 03:36 then one of those pages changes, and then from then on, all those links are wrong.
  • 03:41 Well, if you use Embedded Ruby, the links will dynamically update automatically.
  • 03:45 Rails will know that your home_about_path changes, and it'll update it accordingly.
  • 03:50 So what that means is you won't have tons of dead links in your app if anything
  • 03:54 changes.
  • 03:55 And that's huge, that's a big time saver, it's a big hassle saver,
  • 04:00 it's just really important to do that.
  • 04:02 So very quickly here, now we have two links, and actually I'm gonna copy this.
  • 04:10 And let's start to build a navbar, so if we save this, hit Reload,
  • 04:15 so now we have both of them on this page.
  • 04:18 But we don't wanna go through here and do this on every single page.
  • 04:22 So I'm gonna copy this and delete it, and
  • 04:25 I'm gonna delete the link from this page too, and save that.
  • 04:29 Instead I'm gonna come to our application.html page, and
  • 04:33 I'm gonna paste this stuff right above our yield sign at a line break there.
  • 04:38 Actually let's save this, and save this, now hit Reload.
  • 04:42 Now we have the beginnings of a navbar up on the top, and
  • 04:45 if we click on the About Us page, it's up there, the Home page is up there.
  • 04:49 It's on every page of our site, even though it's not in the actual HTML file.
  • 04:55 Because we added it to this application.html file that we talked
  • 04:59 about in the last video.
  • 05:00 And right away we're starting to see how cool this application.html file is,
  • 05:04 that we can do that.
  • 05:05 So that's links, that's the beginnings of our navbar.
  • 05:09 In the next video, we're gonna dive in and
  • 05:12 start using Bootstrap to make some CSS styling so
  • 05:14 that our app starts to actually look good, or at least better than it does now.
  • 05:18 So that's all for this video.

Lesson notes are only available for subscribers.

Gift this course