Locked lesson.

Upgrade

About this lesson

Building out additional web pages manually (controllers, routes, and views).

Quick reference

Adding Additional Web Pages

In this video we'll manually add an additional web page to our app.

When to use

Whenever you want to add a new web page to your app, you can do it manually fairly easily.

Instructions

To manually add a web page to your app, follow these three steps.

1. Add a new HTML file in your View directory. Be sure to name it with a .html.erb file extension.

2. Add a reference to that file in your home controller.

3. Add a new route to that file in your routes.rb file.

Hints & tips

  • Adding web pages manually is pretty easy
  • Add the html file, then add a reference to the controller, then add a new route in the routes.rb file
  • Don't forget to name the HTML file with a .html.erb file extension
Login to download
  • 00:05 In this video, I wanna add another web page to our app.
  • 00:08 Right now, we just have this index web page, but how do we add another one?
  • 00:13 Well, earlier, we used the generate command, and we typed in rails g,
  • 00:18 controller, and then, home, and index, and that created an index page.
  • 00:23 You can also then type in additional pages, just list them out on this line.
  • 00:28 So if we wanted an about page, if we wanted a contact page, whatever, we could
  • 00:33 just done it that way, and rails would automatically generated all that stuff.
  • 00:38 Unfortunately, we've already run the generate command.
  • 00:42 We don't wanna do it again, because that could screw things up.
  • 00:45 So let's create the next page manually.
  • 00:48 And it's actually pretty easy.
  • 00:49 We understand MVC.
  • 00:51 We know that a web page needs an actual HTML page,
  • 00:54 its own controller, and its route.
  • 00:56 So we can do that manually.
  • 00:58 Let's go up to our app directory, views, click on our home controller directory,
  • 01:05 and right-click here and just click New File.
  • 01:09 And let's call this about.html.erb,
  • 01:12 you got to remember to type the erb at the end, very important.
  • 01:17 And if we double click this and open it,
  • 01:23 let's just type in About Us and
  • 01:28 My Name Is John Elder, And
  • 01:32 This Is Pinteresting, save it.
  • 01:37 So, now what happens if we come back here and
  • 01:42 type in home/about?
  • 01:45 We get an error, because we haven't created a controller or a route.
  • 01:48 So let's come up to our controllers.
  • 01:50 And click on our home controller.
  • 01:53 And we've already got our index controller,
  • 01:57 so we just tab down here and type in define, about, end.
  • 02:01 And you can see, I've just copied this and changed the index word to about.
  • 02:06 Go ahead and save that file.
  • 02:08 Close it, hit reload and it still doesn't work, because we need a route.
  • 02:14 So if we come to our config folder and our routes,
  • 02:21 let's type in get, home/about.
  • 02:27 And you could see, I just copied this line here from earlier, and
  • 02:30 just changed index to about, but if we save this, come back here and hit reload,
  • 02:35 it should work, and that's all it really takes.
  • 02:38 So it's pretty easy to use the rails generate command, but
  • 02:41 it's also pretty easy just to do it manually.
  • 02:43 Most of the times, I'll just do this manually, and
  • 02:46 I don't think that's very hard at all.
  • 02:48 So finally, let's come down here and type in, clear the screen, and
  • 02:52 type in that rake routes command that, we talked about in the last video.
  • 02:56 And remember the last time we did this, it only showed this root thing, but
  • 03:01 now, we see this home about route.
  • 03:04 And that's gonna be important in the next couple of videos when we start creating
  • 03:08 links within our web app.
  • 03:09 We'll use this stuff.
  • 03:11 And you'll see how to do that, but just that easy.
  • 03:13 Now we've got two pages on our app, granted they're not very interesting
  • 03:17 pages, but coming up here real quick, we'll start to add some CSS, and
  • 03:20 some different styling stuff, and make this look better.
  • 03:23 But so far, so good.
  • 03:25 Moving right along, and that's all for this video.

Lesson notes are only available for subscribers.

Gift this course