- Read Tutorial
- Watch Guide Video
Now that we have our layout in place and we have an active nav bar. The next set of items that I think we should attack is with the actual blog posts and this is not just going down an arbitrary list of things. The reason why I want to do this next is because I personally feel like being able to focus on live data and getting the real data integrated is more important than focusing on the layout itself. Tthe reason for that is because there are a number of steps we're going to have to take in order to replace this kind of placeholder data and have our real data coming in from the controller and rendered onto the view. Imagine that we spent all of our time first cleaning up the layout getting the sidebar up there fixing the footer and those kinds of things. Then came in tried to refactor this entire live data pool here for our list of logs we might actually run into more issues as opposed to if we did it in reverse. So first and foremost I want to bring in our blogs get them out of this ugly table and put them right here so that they look like real blog posts.
So let's switch to Sublime Text. We're done with our now and continuing down. You can see that we have our header and we have a container and then a row and then the yield is actually where everything is going to be coming in. So the yield is what makes it possible for our content to come from the blog index page. So if I open up blog index we have all of this hard-coded data in here. Now this is going to be very cool because notice here that we have a blog post class and scrolling down. You can see we have a blog post and moving down. We have another blog post because of this. We can actually get rid of we know that these represent the blog posts so we can come here and get rid of all of those because we only need one. We don't care about having all of them we only need one and then we're going to iterate over this one. So here we have this div and this is going to be really neat because remember how we have this table but the table really was just kind of a placeholder render blogs is what brought all of our data in. So what we're going to be able to do is we're going to be able to render blogs we can come here drag up and delete all of this table information scrolling up and going right underneath the blog post class. I can now paste this in and that is all we're going to have to do now from this point I can grab this content here which is the actual blog post. This represents a single blog post. And in fact I'm going to clean it up a little bit because we don't even need all this data. We simply need one paragraph tag because our data is going to fill this in automatically so I can delete all of this. And that looks much easier and much more manageable to work with. One thing that I kind of noticed here is I made one little mistake this blog post class needs to be inside of our partial. So this render blogs is going to do exactly what it was doing with the tables but instead of calling and rendering table rows it's going to render blog posts so it render and this special collection render can do anything you can render anything we want not just table elements. So I can come just get all of this out of the way and this is what our index page is going to look like.
So now if I come up and go to underscore blog this is our partial and at the very top. I'm going to paste in this code and now instead of having all of these table rows let's slice and dice this content and put it right up here so, we know we have this sample blog post that is the title. So with that in mind, I'm going to cut this out and I'm going to put it right up here. Now I also want our title to link to the show page so we don't need to have a link that says show. I can just have this title say show so I can come up here say link to and then just grab all of this. Cut it out delete that line of code for the show hit paste and that is going to have a link to the show page which is exactly what we want.
<%= link_to blog.title.upcase, blog %>
Now down here this is blog post metadata and this is the date. So we already have something for that so we can come cut out our cool little distance of time in words helper.
Published <%= distance_of_time_in_words(blog.created_at, Time.now %> ago
Paste this into this paragraph tag and we're good to go. Now, this blog post this is where the content goes. So I'm going to put it right here and now we can put our blog body inside of this. Then we have a few other items such as blog status and all of these right here. I think it makes sense. I'm not sure this is going to be the final version of this but I'm going to simply have a placeholder where we put all of this content and then we can adjust it later on. So I'm going to say actually let me put this all on one or on multiple lines just so it doesn't get all crammed up. So here we have a paragraph tag I'm going to put a little slash here and on the next line I'm going to put edit and then delete post. I also see a little error that I made before so we're going to have to fix that as well. It has to deal with authorization. You may notice something that would be very bad from a user point of view and that is that for this blog status our toggle status blog path the special method where you can change a blog from being a draft to being published. This one does not have our authorization code. So that is very important. So first we need to add it here. But then also we need to check our controller's blog controller because remember that we have the user has access to everything just a plain vanilla user accessing the site. He can do everything except these items. But if we come down we need to add this toggle status to that list or else they would technically be able to toggle the status which would be very bad.
So now that we have all of that let's come and see if this works. I'm going to come to Chrome and hit refresh and it will probably help to startup the terminal server. Now if I hit refresh it's going to load this up and look at this. We have our real live data so we have my blog post we have. How long ago it was published and everything right there. So that's good. Now looks like we have a little error with our link so let's see exactly what's going on here and it may just kind of be the way that this is set up with all of these links all on one line. I'm not too worried about this right now I'll just make them into their own individual links for the moment. It's going to look good. But right now I'm not too worried about it because we're going to give them their own little component here shortly. So this is going to give each one of these their own spot. Now if I come back. Hit refresh. And now they're all gone. So something is going on a little bit odd right here. So let's see what we're what is happening. We have a blog post medic class here and maybe there's a chance that it needs to maybe there can only be one on the page or something because we see this published is here. But let's come back and let's click on inspect. This is the first thing and I think it's something that's very important to be in the habit of doing is as soon as you see a bug. Don't simply stare at the screen and wonder what in the world is going on. Just start investigating it. So I'm going to hit inspect and if we dive into this section here and we see there's a row there we have blog main and then we have each one of these blog posts. If I click on the arrow I can see that I have blog post meta which has this content and then look at this. We have the the actual classes are showing up but nothing is inside of them. So first what we could do to test this out is let's just replace one of these. So I could just delete it and just put any kind of content inside. Now if I hit refresh you can see that that shows up. So what that tells me is that there is something having to do with links possibly maybe in the CSS links are hidden or something's going on with the way that links are rendered inside of the meta tags. So the next thing that I would do is I would just close out and delete this meta tag to see what happens when we have a link by itself. When I do that it also goes away. So that's pretty interesting. So we have a link to and nothing here really looks like it should be causing that. Oh and wow I need some more coffee or something. I just realized that makes perfect sense why that wouldn't show up. It has nothing to do with these things being hidden. I completely forgot. I'm probably logged in as the wrong type of admin. So that's what happens when you when you go there a little bit of a marathon filming session. Ok, let's come back and let's log in as a user. Yes. I'm not even logged in so I click login. Log in as an admin user come back to blog and look there are links. Ok wow, that was embarrassing. So now let's go back and refactor this to be kind of what I wanted to go with. So I'm going to actually instead of putting all of this here in putting this line by line I'm actually just going to create one conditional and then inside of this I'm going to create something that only the admin is going to be able to see. So I can say if logged in and then end so in other words this entire component will only be seen by the site admin. And now I can bring in this blog class meta and we're not locked into having to use this but this will at least give us some spot where we can put it and then we can go from there. Now I'm going to take this out and now the cool thing is because we know that the users logged in and that it's an admin user I can get rid of this so we can remove this duplicate code and then I can do the same thing here for editing and get rid of that.
Then as you may have guessed we can do the same thing for deleting and I'm going to also put these kind of like I had them before. I'll put them on separate lines simply because it's going to be a little bit easier to read. Also to make changes to when we need to. OK. So there we go we have three links but they should all be separated by these little slashes.
Now if I come back and hit refresh There we go those looks a million times better. And now this is all functional so if I click draft then it doesn't look like it changed but that's because of the way the scope is, it is going to by default. It's going to sort by which log was updated last and so will change that eventually. But notice if I clicked draft it changes here and if I scroll all the way down to the bottom you can see that it has these other items so it's going to have three which is the one that we just did. You can see it's now published. If I click it'll take us to the edit page. So so far so good. And I'm not sure if you notice this but on the show page this is all working properly. So our little bug in terms of this not showing up in the raid area is only related to the index section.
So I think that now that we have our blog posts and if you click here you have this show I'm sorry the show isn't working and the edit one that is working then that means that our issue is related to something a little bit different. So let's go and take a look at that. Now you open up Sublime Text again. And now that we have this what my guess is occurring and this is simply based off of dealing with bootstrap quite a bit. Whenever you have a grid if you have a grid that goes beyond 12 then this would happen. So in other words if my blog posts are this whole index action was a 9 and then the sidebar was four then it's going to assume that hey I cannot fit in this area so I'm going to go below it. I don't think that's what's happening because we simply copied and pasted the template. So what I'm guessing is happening is we are outside of the row and that's my guess. But let's actually take a little bit more of a scientific approach to it. So if I come in click inspect and come down let's see and let's go find the row. So if I click on row you can see that row is right here. So that is good now let's come and let's take a look at the very bottom see what this looks like and look at that. So if I come here you can see that this is actually it looks like our side of the row so I think that could be the issue. I'm not 100 percent sure that that's going to be the first starting point and that's definitely the issue for the future. But first let's go and let's find out this problem. So this is all working for the most part.
Let's come to the blog. You can see that we have a row right up here. Going to get rid of the comments get rid of those at least. Now you can see that we have all of this but our row here is actually going to probably have a few items that are getting cut off so have the row let's scroll down and see where this row ends. Moving down ok so the shared now for one thing we need to get rid of that and then the footer. Then this row needs to go above the footer. So if I save and come back that fix. There we go that fix the footer. Now we still have this little issue. So we need to see what is causing this to not be there. I'm also going to move the blog where it can say a new blog right here in the masthead and take it away from where where it is just kind of hanging out in the index action. So I'm going to come here cut this out and let's also close this just remove these excess comments and inside of the masthead where it says the bootstrap blog I'll just say my blog and eventually I'll put some content here. Feel free to do that if you'd like and here I can say write a new blog. Only a signed in admin will see this hit refresh and there you go. So that link was taking up the little section. So this is looking a million times better. I like this. Now if I open this blog up from a non signed in user you can see that it also looks nice and clean where you don't have those edit Links but you can still see everything else. And if you come here you can see everything. So so far I am liking this a lot. I think this is exactly what we're looking to do.
So in the next guide, I want to go and let's focus on the show page so I will see you in that guide. But I almost forgot we need to come here and let's see all the files we changed. OK. So we updated the blogs controller and with best practice. I don't want to lump all these together because remember what we did to the blogs controller had nothing whatsoever to do with the design. We just implemented in the index action. So here it's considered a better practice to go and isolate the controller.
git add app/controllers/blogs_controller.rb git commit -m "Updated auth to include draft and published status toggle controls"
Now I can say git commit say updated auth to include draft and published status toggle controls which essentially just means we made it possible and put it in place where only an authorized user is able to do that. Now if I type get status you'll see that has been removed. Now, all do get at all because these items are related to what we want to do.
git add . git commit -m "Implemented index styles for blogs" git push origin design
So this is implemented in decks styles for wogs push origin design very nice. If you went through all of that. Great job. I will see you in the next guide where we work on the blog show page.