WEBVTT
NOTE Copyright (c) GoSkills Ltd, 2013 - 2020
00:00:04.252 --> 00:00:07.141
Now it's time to dive right in and build our first web page.
00:00:07.141 --> 00:00:10.519
So if you haven't done it yet, go ahead and click the Run Project button.
00:00:10.519 --> 00:00:13.718
And this spins up our little internal server,
00:00:13.718 --> 00:00:16.844
which allows us to have this intro page here.
00:00:16.844 --> 00:00:18.858
We don't want this, we wanna create our own web page.
00:00:18.858 --> 00:00:23.262
And there's really two different ways you can create web pages in Rails,
00:00:23.262 --> 00:00:26.896
you could do it manually or you could have Rails do it for you.
00:00:26.896 --> 00:00:29.123
And I'll talk about manually a little bit later.
00:00:29.123 --> 00:00:32.714
Right now I wanna show you how to let Rails do it automatically.
00:00:32.714 --> 00:00:35.199
Rails has a little program called generator, and
00:00:35.199 --> 00:00:37.400
it will generate all kinds of stuff for you.
00:00:37.400 --> 00:00:39.437
In this case, we wanna generate a web page.
00:00:39.437 --> 00:00:43.115
But before we do that, think back real quickly about the MVC,
00:00:43.115 --> 00:00:44.900
model-view-controller.
00:00:44.900 --> 00:00:49.261
So whenever you create a web page, it has to have three different things.
00:00:49.261 --> 00:00:53.764
It has to have an HTML file for the view, it needs a controller to control it, and
00:00:53.764 --> 00:00:55.797
it needs something called a route.
00:00:55.797 --> 00:01:00.963
And the route is what tells our program what URL goes with what page.
00:01:00.963 --> 00:01:04.138
And we'll talk about routing a little bit more detail in the next video.
00:01:04.138 --> 00:01:07.344
The good thing is, the generator will create all this stuff for us.
00:01:07.344 --> 00:01:11.827
So to use the generator, we type in rails generate.
00:01:11.827 --> 00:01:14.293
You'll use the generator a lot,
00:01:14.293 --> 00:01:18.266
a shortcut is to just type in rails g, that works too.
00:01:18.266 --> 00:01:21.427
But for now, I'll just type in generate.
00:01:21.427 --> 00:01:25.211
Now we wanna generate a controller, and let's call that controller home.
00:01:25.211 --> 00:01:30.111
And we want to create an action for that controller, or a web page in this case,
00:01:30.111 --> 00:01:31.912
and let's call that index.
00:01:31.912 --> 00:01:34.962
Now, you don't really need to know what we just did here,
00:01:34.962 --> 00:01:37.215
it'll become obvious a little bit later.
00:01:37.215 --> 00:01:42.496
But just know for now this is the command to have Rails create a web page for us.
00:01:42.496 --> 00:01:46.955
Now, take a look, Rails just created all of this stuff for us, all of these files,
00:01:46.955 --> 00:01:49.470
all these directories, all this good stuff.
00:01:49.470 --> 00:01:52.350
So you can look through here if you want.
00:01:52.350 --> 00:01:55.172
I'm just gonna clear the screen here and resize this.
00:01:55.172 --> 00:01:57.810
Now let's take a look what happened.
00:01:57.810 --> 00:02:00.839
If we go to app, and our views, we have this new directory called home.
00:02:00.839 --> 00:02:04.641
And that is because we just typed in the word home.
00:02:04.641 --> 00:02:09.411
And inside the directory, there's this html file, index.html.erb,
00:02:09.411 --> 00:02:11.388
erb stands for embedded Ruby.
00:02:11.388 --> 00:02:15.466
It just a Rails' convention, it allows us to use the Ruby programming language on
00:02:15.466 --> 00:02:19.029
our HTML pages, which is really cool, we'll get into all that later.
00:02:19.029 --> 00:02:21.651
For now, just understand that here is our new page.
00:02:21.651 --> 00:02:25.749
And if we come up to our app and we type in this URL of home,
00:02:25.749 --> 00:02:28.630
'cause we called the controller home, and
00:02:28.630 --> 00:02:33.190
index, 'cause that's the name of the page, we get this, boom!
00:02:33.190 --> 00:02:33.762
Not much there.
00:02:33.762 --> 00:02:38.787
But if we play with this a little bit, type in Hello World,
00:02:38.787 --> 00:02:41.978
and let's call this Pinteresting.
00:02:41.978 --> 00:02:46.721
Save the file, come back here and hit reload, boom, there we go.
00:02:46.721 --> 00:02:50.199
So right away we've got our new page.
00:02:50.199 --> 00:02:53.276
So let's look what else the generator did.
00:02:53.276 --> 00:02:57.335
If we go to controllers, we now have a home controller.
00:02:57.335 --> 00:03:02.460
And this is just Ruby code, you don't need to know what any of this is right know.
00:03:02.460 --> 00:03:07.335
And there's nothing there, we've just defined our index controller, and
00:03:07.335 --> 00:03:09.141
it's just blank right now.
00:03:09.141 --> 00:03:11.174
But Rails has generated that for us.
00:03:11.174 --> 00:03:14.886
And if we come to our config file and click routes, Reload,
00:03:14.886 --> 00:03:18.241
we see this line is been added to the routes.rb file.
00:03:18.241 --> 00:03:20.484
You wouldn't know that it'd been added unless you'd looked to this file earlier.
00:03:20.484 --> 00:03:23.477
But trust me, this line has been added.
00:03:23.477 --> 00:03:26.603
And what this has done is it's created a route, and
00:03:26.603 --> 00:03:31.417
this is sorta home/index that corresponds with this home/index in the URL.
00:03:31.417 --> 00:03:33.212
So routing is complicated,
00:03:33.212 --> 00:03:37.636
right now it's simple because Rails has generated this route for us.
00:03:37.636 --> 00:03:40.768
In the future, if you wanted to do more complicated routing things,
00:03:40.768 --> 00:03:41.963
it can be a little tricky.
00:03:41.963 --> 00:03:47.732
If you wanna go to Google and type in Rails guides routing,
00:03:47.732 --> 00:03:51.418
there's a really nice Rails guide.
00:03:51.418 --> 00:03:53.213
And these are just sorta the default guides that come with Rails.
00:03:53.213 --> 00:03:56.871
It's called Rails Routing from the Outside In, you can read through here.
00:03:56.871 --> 00:03:59.706
It's all kinds of complicated stuff, we don't need to know any of this for
00:03:59.706 --> 00:04:01.875
this app that we're building, it's sort of beyond it.
00:04:01.875 --> 00:04:05.563
But if you wanna learn more, and you probably should at some point,
00:04:05.563 --> 00:04:07.450
definitely check out this guide.
00:04:07.450 --> 00:04:09.560
But right now, we've got a web page created.
00:04:09.560 --> 00:04:13.567
Like I said, this is automatic way to create web pages.
00:04:13.567 --> 00:04:17.990
There is also a manual way, we'll talk about that in a few videos from now.
00:04:17.990 --> 00:04:22.310
But yes, just like that, one single command, and we have a controller,
00:04:22.310 --> 00:04:24.621
a index web page, and some routing.
NOTE Copyright (c) GoSkills Ltd, 2013 - 2020