- 720p
- 540p
- 360p
- 0.50x
- 0.75x
- 1.00x
- 1.25x
- 1.50x
- 1.75x
- 2.00x
We hope you enjoyed this lesson.
Cool lesson, huh? Share it with your friends
About this lesson
Let's build our first Rails Web Page!
Exercise files
Download this lesson’s related exercise files.
Creating Our First Web Page58.9 KB Creating Our First Web Page - Solution
248.4 KB
Quick reference
Creating Our First Web Page
In this video we'll be creating our first web page with Rails.
When to use
Rails gives you two main ways to create web pages in your app; manually or automatically using the Rails Generator.
Instructions
To create a web page with the Rails Generator, use this command in the terminal:
rails generate controller home index
Remember, all pages need a controller, an HTML file, and a route. The command above gives us a controller named home and a web page named index and creates a route for us automatically.
Hints & tips
- Rails gives us two ways to create web pages; manually or automatically using the Rails Generator
- Rails generate controller home index is the terminal command to create a web page automatically
- All web pages require a controller, an HTML file, and a route
- Routes are located in the /config/routes.rb file
- Controllers are located in the app/controllers/ directory
- Webpage HTML files are located in the app/views/home/ directory
- When using the generate command, a shortcut is to type g instead of generate
- .erb stands for embedded Ruby and allows us to use Ruby code on our web pages
- 00:04 Now it's time to dive right in and build our first web page.
- 00:07 So if you haven't done it yet, go ahead and click the Run Project button.
- 00:10 And this spins up our little internal server,
- 00:13 which allows us to have this intro page here.
- 00:16 We don't want this, we wanna create our own web page.
- 00:18 And there's really two different ways you can create web pages in Rails,
- 00:23 you could do it manually or you could have Rails do it for you.
- 00:26 And I'll talk about manually a little bit later.
- 00:29 Right now I wanna show you how to let Rails do it automatically.
- 00:32 Rails has a little program called generator, and
- 00:35 it will generate all kinds of stuff for you.
- 00:37 In this case, we wanna generate a web page.
- 00:39 But before we do that, think back real quickly about the MVC,
- 00:43 model-view-controller.
- 00:44 So whenever you create a web page, it has to have three different things.
- 00:49 It has to have an HTML file for the view, it needs a controller to control it, and
- 00:53 it needs something called a route.
- 00:55 And the route is what tells our program what URL goes with what page.
- 01:00 And we'll talk about routing a little bit more detail in the next video.
- 01:04 The good thing is, the generator will create all this stuff for us.
- 01:07 So to use the generator, we type in rails generate.
- 01:11 You'll use the generator a lot,
- 01:14 a shortcut is to just type in rails g, that works too.
- 01:18 But for now, I'll just type in generate.
- 01:21 Now we wanna generate a controller, and let's call that controller home.
- 01:25 And we want to create an action for that controller, or a web page in this case,
- 01:30 and let's call that index.
- 01:31 Now, you don't really need to know what we just did here,
- 01:34 it'll become obvious a little bit later.
- 01:37 But just know for now this is the command to have Rails create a web page for us.
- 01:42 Now, take a look, Rails just created all of this stuff for us, all of these files,
- 01:46 all these directories, all this good stuff.
- 01:49 So you can look through here if you want.
- 01:52 I'm just gonna clear the screen here and resize this.
- 01:55 Now let's take a look what happened.
- 01:57 If we go to app, and our views, we have this new directory called home.
- 02:00 And that is because we just typed in the word home.
- 02:04 And inside the directory, there's this html file, index.html.erb,
- 02:09 erb stands for embedded Ruby.
- 02:11 It just a Rails' convention, it allows us to use the Ruby programming language on
- 02:15 our HTML pages, which is really cool, we'll get into all that later.
- 02:19 For now, just understand that here is our new page.
- 02:21 And if we come up to our app and we type in this URL of home,
- 02:25 'cause we called the controller home, and
- 02:28 index, 'cause that's the name of the page, we get this, boom!
- 02:33 Not much there.
- 02:33 But if we play with this a little bit, type in Hello World,
- 02:38 and let's call this Pinteresting.
- 02:41 Save the file, come back here and hit reload, boom, there we go.
- 02:46 So right away we've got our new page.
- 02:50 So let's look what else the generator did.
- 02:53 If we go to controllers, we now have a home controller.
- 02:57 And this is just Ruby code, you don't need to know what any of this is right know.
- 03:02 And there's nothing there, we've just defined our index controller, and
- 03:07 it's just blank right now.
- 03:09 But Rails has generated that for us.
- 03:11 And if we come to our config file and click routes, Reload,
- 03:14 we see this line is been added to the routes.rb file.
- 03:18 You wouldn't know that it'd been added unless you'd looked to this file earlier.
- 03:20 But trust me, this line has been added.
- 03:23 And what this has done is it's created a route, and
- 03:26 this is sorta home/index that corresponds with this home/index in the URL.
- 03:31 So routing is complicated,
- 03:33 right now it's simple because Rails has generated this route for us.
- 03:37 In the future, if you wanted to do more complicated routing things,
- 03:40 it can be a little tricky.
- 03:41 If you wanna go to Google and type in Rails guides routing,
- 03:47 there's a really nice Rails guide.
- 03:51 And these are just sorta the default guides that come with Rails.
- 03:53 It's called Rails Routing from the Outside In, you can read through here.
- 03:56 It's all kinds of complicated stuff, we don't need to know any of this for
- 03:59 this app that we're building, it's sort of beyond it.
- 04:01 But if you wanna learn more, and you probably should at some point,
- 04:05 definitely check out this guide.
- 04:07 But right now, we've got a web page created.
- 04:09 Like I said, this is automatic way to create web pages.
- 04:13 There is also a manual way, we'll talk about that in a few videos from now.
- 04:17 But yes, just like that, one single command, and we have a controller,
- 04:22 a index web page, and some routing.
Lesson notes are only available for subscribers.