[MUSIC] In this video, I'll discuss the fifth and final iteration of the blog application that will be a part of this course. But don't be surprised if you see the blog application show up in a later course. I'll show you how to add some ajax to the blog application. So as we add this ajax, I'd also like to refactor the application. Let's take a look in our blog application, let's go to app, let's go to views, and then let's go to the show.html.erb. And this is currently what happens if you try to show one of your posts. We'll show the title, and then we'll show the body of the post and there'll be some links at the bottom of the page. I'd like to refactor this and let me show you how. I'd like to refactor the posts/show.html.erb file as follows. What I like to do is first at the very top, I'd like to have the code for displaying a particular post. Underneath that I'd like to show all of the comments that are associated with that post. Beneath that, let's have a form for adding new comments if you'd like to that particular post. And then let's put the same links at the bottom, the edit and back links. The places where I'm going to have to change some things are these. Do we have the code for displaying a post? But we don't have yet the code here for displaying comments or a form for creating a new post. Now as a part of this refactoring, I'm going to create something in Rails called a partial. And what a partial is, is it's a fragment of view code. And the first one I'm going to do it for is for posts. So to display a post I'm going to create a div and this is a helper method for creating a div. I'm going to hand it the post and we're going to print the post title, and this is within embedded Ruby as an h2, second level heading here. And this h method here, what that does is it escapes HTML. So if you have some funny things in the title It'll still be able to escape it, produce the appropriate HTML to allow it to display in your browser, the next line displays the body of the post, so again, we're first escaping any unsafe HTML and then simple format will produce a very simple HTML formatting. Store all of this under views > posts in the file_post.html.arb. Very important, partials have to have an underscore as the first character in their file name. The whole goal with partials is to refactor your code to create these snippets that can be used over and over again. Let me show you how. Going back to our show.html.arb, I can remove all of this code, this was the code for showing the title and the body, and instead just call that partial. And here's how it's done, just render post. And post, it knows to look for _post.html.arb In the post sub directory. Now let's create a partial for adding comments below the posts. So go to your views comments subdirectory, and create a file called _comment.html.erb. And let's put this in it. We're going to create a div for our comments and here's just a little HTML formatting. The first says that this is a paragraph. That's what the p is. And then I like it strong so we want this emphasized in however emphasize is being styled. And then we're going to put posted and we're going to use this helper method time_ago_in_words. So this will tell us how long ago this particular comment was created. Now notice that I'm not using an @ symbol here. That's because I'm going to be dealing with a whole list of comments. So this div is going to need to work for each of those comments. Let's go ahead and use this partial now in our post show method. So we'll place it right here and what I'm going to do is I'm going to create a div for all of the comments, I'm going to give a div id for all of those comments. And here is the partial, I'm calling that partial on each of the individual comments. So this goes post.comments, and then I'm using reverse because I want to display these In reverse chronological order. The most recent comment should appear on top and the oldest at the bottom. Let's go ahead and save this, start up or server, and see if everything's still working. I've started the server, and if I go to local host 3000, we see there's the rails app. Let's see if I can still view my posts, and there they are. And if I take a look at a particular post, and we see that everything is working. Here's the title of the post, the body, and then all of the comments in reverse chronological order, and finally the links at the bottom of the page. Here's the code for the form. So we're going to use the form_for method and just copy some of this, we'll explain more of it later when we have an opportunity to get deeper into HTML. But I'm going to pass a post and then we're going to create a new comment. And that's going to be the basis for how we fill in this form. This remote true, this is how we're going to end up calling JavaScript. And then there's going to be a label called new comment that will appear in the browser. And then this is a control. This text area is we're going to be able to enter our text for the new comment. And then there's a Submit button that will appear at the bottom. Let's save this and start up the server and see if this now works. I'm just going to hit Refresh and see what happens. And we'll see an error was generated. There's a problem here. There's no path, there's no route for post comments path. And I'll show you the reason for this and how to fix it. To show you what the issue is, go to the root of your Rails application, and type rake routes. And you'll see that there are a bunch of routes that are available to us, but there are none for POST followed by comments. Let's fix that. Go to the config subdirectory and select routes.rb, and this is what it looks like n ow. What we need to do is add what's called a sub-resource, and it's actually described further down here. It talks about the fact that if you're going to create sub Resources, you do it in this way. And so, this is what we're going to need to do, because a comment is a sub-resource for a post. We'd like to create a set of routes that has post followed by comments, and here's how you do it. You add the do statement and then you nest this resource comments within this do statement. Let's go back to our operating system console and see if we have any new routes. Again type rake routes and you should see a bunch of new routes associated with the sub resource for comments, and here they are. Now let's reload that page and see if we can get that form to display properly. I restarted the server, because every time you change your route you need to do that. Let's reload this page and see if it fixed things. And sure enough, everything now works. This looks much better. So, now we have our posted self. We've got the comments underneath it, and at the bottom we have a form. There's a little more we need to do, however in order to make this form work properly. Recovered I told you that this remote true, because it is JavaScript to be called. The forum will call the create method in our comments controller. So we need to tell our commentsController to support JavaScript and here's how you do that. Go to your commentsController, scroll down to you find create method and we need to create a new line here. Called format tut js. This will qualify create.js.erb if it exists. So you need to go to views, comments, and you need to create a new file called create.js.erb. I've created it and here are the, here's the jQuery commands that I've placed in it. So the first line creates a new variable And what it does is it renders the content and then it uses this J method to escape anything that's unsafe for Java script. And then I'm hiding this. This is a jQuery method. I'm hiding this and then I'm going to prepend a new comment to the comment div that we created and then I'm going to fade it in slowly. So for the new actual comment that's under the comment div, is going to fade in slowly. And so this gives it a nice appearance that the user can actually see the comment coming in. And then the last thing is you need to reset the form, so a user can enter yet another comment. Let's take a look at how this looks in a browser now, let's enter a new comment and see what happens. So I'm want to add this comment and take a look up at this top area and you should see it fading and fairly quickly. Hey we just got JavaScript to working on our blog application, this is pretty cool.
