1 00:00:00,237 --> 00:00:05,117 [MUSIC] 2 00:00:05,117 --> 00:00:09,390 Hi, I'm Jason, your Ruby teacher here at Tree House. 3 00:00:09,390 --> 00:00:12,620 In this workshop, we're going to be going over how to create static 4 00:00:12,620 --> 00:00:15,490 pages in a Ruby On Rails application. 5 00:00:15,490 --> 00:00:19,230 And for the purposes of this workshop, we're going to consider a static page, 6 00:00:19,230 --> 00:00:24,740 something that isn't necessarily backed by the database, or a specific controller. 7 00:00:24,740 --> 00:00:29,670 We would use static pages for things like the terms of service, privacy policy, or 8 00:00:29,670 --> 00:00:32,770 anything that we don't really need to query in the database. 9 00:00:32,770 --> 00:00:33,990 Let's go ahead and get started. 10 00:00:36,230 --> 00:00:41,230 All right, so before we can go through and create our static pages in a Rails 11 00:00:41,230 --> 00:00:47,740 application, let's go ahead and create a fresh Rails application to try this with. 12 00:00:47,740 --> 00:00:51,235 So I'm gonna say, rails new static_pages. 13 00:00:53,450 --> 00:00:57,120 Now let's go ahead and go into this application and 14 00:00:57,120 --> 00:00:59,900 just type bundle to get everything working. 15 00:00:59,900 --> 00:01:00,470 Okay. 16 00:01:01,640 --> 00:01:02,700 Now clear my screen there. 17 00:01:04,230 --> 00:01:06,340 And let's go ahead and start the rails server. 18 00:01:06,340 --> 00:01:08,940 And just go ahead and make sure everything is working. 19 00:01:10,530 --> 00:01:15,010 I go to localhost on port 3,000. 20 00:01:15,010 --> 00:01:18,780 Alright we are riding Ruby on Rails. 21 00:01:18,780 --> 00:01:19,280 Great work. 22 00:01:20,640 --> 00:01:27,670 And now here is the Atom Text editor with the application we just generated. 23 00:01:27,670 --> 00:01:31,940 So now, let's go ahead and go back to our console here. 24 00:01:31,940 --> 00:01:35,850 And I am going to stop the rails server for just a moment. 25 00:01:37,060 --> 00:01:42,940 And I'm gonna say, rails generate controller pages, and since we don't 26 00:01:42,940 --> 00:01:47,940 want any CSS or JavaScript, I'm gonna tell it to skip generating the assets. 27 00:01:49,230 --> 00:01:54,450 So, our pages controller, if we head on back to the application here in Atom, 28 00:01:54,450 --> 00:01:59,600 we'll open up our controllers, and here is our pages controller. 29 00:02:00,780 --> 00:02:05,730 So, what we wanna do is, have a method in our pages controller or 30 00:02:05,730 --> 00:02:10,210 an action, to display our static pages. 31 00:02:10,210 --> 00:02:13,580 And for right now, we're just going to create a method 32 00:02:14,660 --> 00:02:18,560 called show that will render the page. 33 00:02:18,560 --> 00:02:22,050 Now the pages controller is going to display 34 00:02:22,050 --> 00:02:24,940 all of these static pages when we go in the application. 35 00:02:24,940 --> 00:02:28,180 So we have this views directory and pages, which is empty. 36 00:02:29,250 --> 00:02:32,450 Now, let's go ahead and open up our routes file. 37 00:02:32,450 --> 00:02:35,020 And that'll be in the config directory. 38 00:02:36,240 --> 00:02:42,800 Now, I'm going to go ahead and just take out all of the generated comments. 39 00:02:42,800 --> 00:02:46,625 And what we're going to do is say whenever we go to /pages, 40 00:02:46,625 --> 00:02:50,610 /whatever, we want to send that to our pages controller. 41 00:02:52,470 --> 00:02:58,150 So, when we get pages/page, this is gonna go 42 00:02:58,150 --> 00:03:04,150 to the pages controller we just generated, and the show method or action. 43 00:03:05,300 --> 00:03:09,430 So, once we set up this route, that goes to the pages controller and 44 00:03:09,430 --> 00:03:13,810 the show action, we're telling it that we want this page parameter sent in. 45 00:03:15,010 --> 00:03:23,357 Which means we'll have access to it inside of the show action, as the page parameter. 46 00:03:23,357 --> 00:03:25,653 So once we know that we have that, 47 00:03:25,653 --> 00:03:31,156 we can use some string interpolation to tell Rails to render that as a template. 48 00:03:31,156 --> 00:03:36,821 We can say render template and then we'll just say, 49 00:03:36,821 --> 00:03:40,683 go inside of the pages directory and 50 00:03:40,683 --> 00:03:46,750 grab whatever it is that comes in as the page parameter. 51 00:03:47,790 --> 00:03:52,975 So if we did something like pages/about. 52 00:03:54,030 --> 00:03:57,184 And we'll call this html.erb since that's gonna be our template. 53 00:03:57,184 --> 00:04:01,054 We'll just say, 54 00:04:01,054 --> 00:04:06,740 About this Application. 55 00:04:06,740 --> 00:04:09,890 And let's go ahead and generate some text in here. 56 00:04:09,890 --> 00:04:13,920 I'm going to use the cupcake ipsum webpage. 57 00:04:13,920 --> 00:04:16,250 To generate some text. 58 00:04:16,250 --> 00:04:18,820 We'll say we want three paragraphs. 59 00:04:18,820 --> 00:04:22,790 All right! And this is going to look delicious. 60 00:04:22,790 --> 00:04:24,340 Let's go back to our About page. 61 00:04:25,400 --> 00:04:26,230 Paste that in here. 62 00:04:26,230 --> 00:04:30,305 And I'll add some paragraph tags as well. 63 00:04:34,825 --> 00:04:40,041 Okay so we've got this about page and 64 00:04:40,041 --> 00:04:44,078 if we go to /pages/about, 65 00:04:44,078 --> 00:04:52,760 this should render the template that we just created. 66 00:04:52,760 --> 00:04:54,290 So let's go ahead and give that a try. 67 00:04:54,290 --> 00:04:56,840 /pages/about. 68 00:04:56,840 --> 00:04:59,400 Oh! Not available because 69 00:04:59,400 --> 00:05:01,460 we need to start our rail server. 70 00:05:02,700 --> 00:05:08,010 Okay, so now if I reload, we now have this about page. 71 00:05:08,010 --> 00:05:12,460 Which looks pretty good, and actually lets go ahead and 72 00:05:12,460 --> 00:05:17,470 just make sure that this looks great. 73 00:05:17,470 --> 00:05:22,440 We'll say, H1, this is static pages example application. 74 00:05:22,440 --> 00:05:31,470 And everything goes inside this main div. 75 00:05:33,820 --> 00:05:36,100 And I'll change this to an h2 tag. 76 00:05:36,100 --> 00:05:42,320 So, now if I reload. 77 00:05:42,320 --> 00:05:45,710 Okay. We know we are using the regular 78 00:05:45,710 --> 00:05:49,900 application layout and our static page is rendering correctly. 79 00:05:51,080 --> 00:05:57,200 But if we go to thing that doesn't work, it's going to say the template is missing. 80 00:05:57,200 --> 00:06:01,850 Now we're gonna fix that in just a second. 81 00:06:01,850 --> 00:06:04,340 First let's go ahead and create a home page. 82 00:06:05,430 --> 00:06:11,000 So if we look at our application right now, we have the regular 83 00:06:11,000 --> 00:06:16,310 default rails application, welcome to rails page. 84 00:06:16,310 --> 00:06:19,490 But, if we wanted to generate a static homepage- let's go ahead and do that. 85 00:06:19,490 --> 00:06:22,330 We're gonna save pages/home.html.erb. 86 00:06:22,330 --> 00:06:26,024 And let's just say this is our home page. 87 00:06:33,807 --> 00:06:35,450 So now we'll make sure that works. 88 00:06:35,450 --> 00:06:37,620 We'll go to pages/home. 89 00:06:37,620 --> 00:06:40,470 All right, so we have our static homepage that works but 90 00:06:40,470 --> 00:06:42,930 what happens if we go to localhost 3000? 91 00:06:42,930 --> 00:06:46,100 That doesn't work just yet. 92 00:06:46,100 --> 00:06:51,790 Now we can use a directive in our routes file 93 00:06:51,790 --> 00:06:56,730 to tell Rails that the root should be the PagesController, 94 00:06:57,730 --> 00:07:02,210 And the show action, and 95 00:07:02,210 --> 00:07:07,650 we can send in the parameter page to be the home page. 96 00:07:07,650 --> 00:07:12,060 So the route method inside of the route, 97 00:07:12,060 --> 00:07:15,820 tells rails what to use as the route of the application. 98 00:07:15,820 --> 00:07:17,750 So if we reload here, 99 00:07:17,750 --> 00:07:23,070 we can see that we now have a static homepage in our Rails app. 100 00:07:23,070 --> 00:07:24,470 So that looks really good. 101 00:07:24,470 --> 00:07:28,380 But let's go ahead and go back and handle that 404 error. 102 00:07:28,380 --> 00:07:32,710 So if we go to a page that's not found. 103 00:07:32,710 --> 00:07:36,110 All right, we need to render this template. 104 00:07:36,110 --> 00:07:37,580 So, how are we gonna do that? 105 00:07:37,580 --> 00:07:40,880 Well, we're gonna handle that inside of our PagesController. 106 00:07:42,090 --> 00:07:46,490 And, first what we're gonna do is create a private method inside of our 107 00:07:46,490 --> 00:07:51,440 PagesController called valid_page. 108 00:07:51,440 --> 00:07:53,830 And what this method is gonna do 109 00:07:53,830 --> 00:07:58,700 is check to make sure that this template exists on disk. 110 00:07:58,700 --> 00:08:02,340 And we're gonna doing that by just saying, hey, does this file exist? 111 00:08:03,440 --> 00:08:07,050 Now once we have this file exist method 112 00:08:07,050 --> 00:08:11,800 we need to pass in the parameter of the page that's coming in, 113 00:08:11,800 --> 00:08:16,480 so we'll say, does this page exist that we're looking for? 114 00:08:16,480 --> 00:08:20,240 Params page, that'll be interpolated. 115 00:08:20,240 --> 00:08:23,480 Then say .html.erb. 116 00:08:23,480 --> 00:08:27,520 Now, that's not going to do exactly what we want it to 117 00:08:27,520 --> 00:08:30,060 because we need to tell Rails exactly where it is, 118 00:08:30,060 --> 00:08:36,550 it's not gonna know just based on this small string where it is on disc. 119 00:08:36,550 --> 00:08:44,800 So we could say rails.root plus, and then send in the entire path app/views. 120 00:08:44,800 --> 00:08:47,310 Pages, and then the page that we're looking for. 121 00:08:48,960 --> 00:08:50,660 And we are almost complete there. 122 00:08:50,660 --> 00:08:55,750 We're gonna use the Pathname class 123 00:08:55,750 --> 00:09:00,080 to create an actual path name that Rails can look at. 124 00:09:00,080 --> 00:09:02,690 Just to make sure everything is completely working here. 125 00:09:02,690 --> 00:09:04,650 And let's make sure our parentheses close, as well. 126 00:09:06,060 --> 00:09:07,680 That looks like we need one more. 127 00:09:10,530 --> 00:09:14,980 Okay, so we can be reasonably sure that this valid page method works. 128 00:09:14,980 --> 00:09:19,980 Saying okay, hey, is this an actual page that exists on disc? 129 00:09:19,980 --> 00:09:25,980 Now we can say, If it's a valid page, go ahead and render that template. 130 00:09:27,080 --> 00:09:33,830 If not let's go ahead and render a 404 page. 131 00:09:33,830 --> 00:09:37,580 Now, Rails comes with one, and we're just gonna use that for right now. 132 00:09:37,580 --> 00:09:40,830 And that is in the public directory. 133 00:09:40,830 --> 00:09:46,260 So we're gonna tell Rails, okay, render this file 404.html. 134 00:09:46,260 --> 00:09:51,340 And we'll give it the status of not found because we wanna be 135 00:09:51,340 --> 00:09:57,330 a good net citizen and send back a 404 status if the page is not found. 136 00:09:57,330 --> 00:09:59,910 So let's go ahead and reload this 404 page. 137 00:10:01,060 --> 00:10:03,030 All right! The page you were looking for 138 00:10:03,030 --> 00:10:04,560 doesn't exist. 139 00:10:04,560 --> 00:10:06,520 That is exactly what we want. 140 00:10:08,000 --> 00:10:10,670 And let's just go ahead and make sure our other page works. 141 00:10:10,670 --> 00:10:12,470 Okay. The about page works. 142 00:10:13,720 --> 00:10:14,680 Home page works. 143 00:10:16,000 --> 00:10:19,260 And if we go just to the route, that still works as well. 144 00:10:20,270 --> 00:10:24,080 Now, that's pretty good, but let's say we wanted to create 145 00:10:24,080 --> 00:10:28,910 a marketing home page here, and we had a bunch of features in our application, 146 00:10:28,910 --> 00:10:31,940 and we were just gonna display them all, one by one. 147 00:10:33,020 --> 00:10:35,500 Then let's go to pages/features. 148 00:10:36,500 --> 00:10:39,520 And then we get this little routing error, saying, no route matches, 149 00:10:39,520 --> 00:10:41,359 get pages features one. 150 00:10:42,530 --> 00:10:45,200 Well, let's go ahead and create that, just so that we know it's there. 151 00:10:45,200 --> 00:10:48,544 New folder, pages, features. 152 00:10:53,727 --> 00:10:55,267 And this would be our first feature. 153 00:11:04,061 --> 00:11:07,873 Okay, so now if we reload, we know this exists, but 154 00:11:07,873 --> 00:11:11,700 still we're not getting any route for this. 155 00:11:11,700 --> 00:11:18,330 And the reason is, we are only getting an incorrect parameter being sent in. 156 00:11:18,330 --> 00:11:20,258 Right, if we look back at our log we're saying, 157 00:11:20,258 --> 00:11:25,830 we're getting pages/features/one.html.erb, and that's not getting a route. 158 00:11:26,870 --> 00:11:31,010 But, we do have a route set up in here. 159 00:11:32,170 --> 00:11:36,540 So, we can make one very small change to this and say, 160 00:11:36,540 --> 00:11:43,670 instead of getting page as a parameter, we're going to use this Splat operator. 161 00:11:43,670 --> 00:11:48,040 And what that's gonna do is, it's gonna break all of this up. 162 00:11:48,040 --> 00:11:55,550 So if we had a route pages/about, the page parameter would be "about". 163 00:11:57,350 --> 00:12:02,950 But, when we add this into a splat parameter, this will come in as an array. 164 00:12:04,930 --> 00:12:11,640 So pages features one doesn't come in as a page parameter, nothing's found. 165 00:12:11,640 --> 00:12:17,290 However, when we change it to the splat, we get features one. 166 00:12:19,238 --> 00:12:23,017 Then I'm gonna just take that out of here and let's go ahead and just reload and 167 00:12:23,017 --> 00:12:24,000 see how that looks. 168 00:12:24,000 --> 00:12:26,040 Oh, Not found. 169 00:12:26,040 --> 00:12:29,500 Here we go, feature one, and that worked. 170 00:12:30,740 --> 00:12:32,660 Now if we look back in our log. 171 00:12:32,660 --> 00:12:38,517 Page parameter is now features/one. 172 00:12:38,517 --> 00:12:44,430 It is one string here and the slash is part of it. 173 00:12:44,430 --> 00:12:45,680 So that will work. 174 00:12:45,680 --> 00:12:49,680 And let's make sure our other page still works. 175 00:12:49,680 --> 00:12:52,925 Yes pages/about works. 176 00:12:52,925 --> 00:12:55,645 Pages/home works. 177 00:12:55,645 --> 00:12:57,430 The home page still works. 178 00:12:57,430 --> 00:12:59,932 And let's just make sure our 404 page works. 179 00:13:02,114 --> 00:13:04,240 And that still works as well. 180 00:13:04,240 --> 00:13:05,250 So, great work everybody. 181 00:13:05,250 --> 00:13:08,890 That was a quick little tutorial on how to create static pages 182 00:13:08,890 --> 00:13:10,030 in a Rails application.