Ruby on Rails Tutorial | Build a Book Review App - Part 2

all right welcome back everyone to the second part of this Ruby on Rails series where we build a book review application from start to finish to recap what we did in the first part we added the functionality to create a new book we added a show page for each book and we also added edit and delete functionality for those books we set up our routes and we installed these simple form gem and blue straps sass and we also added the root page as our index action where we're looping through all of our books here on the root path now I went ahead and added three new books I just added those so when we add our categories we'll have a book for each category we're gonna have three categories we're gonna have technology we're gonna have fantasy and we're gonna have biography alright so like I was saying about categories in this section we're gonna be creating users for application using HM called devise we're gonna be adding categories to our application and we're gonna be adding a navbar with links to add a book we're gonna have an ability to filter by category and we're gonna have sign up sign-in and sign-out links so without any more delay let's get into adding these components so to begin the second part let's get the device gem installed in our application and let's add the ability to create new users sign in and sign out of our application so let's head back over to a new tab let's go to rubygems again we're going to be grabbing a gem called devise the buys is a user authentication gem which allows users to sign in and sign out of our application so just like we did for bootstrap sass and simple form we're gonna copy the gem to the clipboard and we'll go into our gem file and we're gonna paste that in and just like we did before as well we're gonna run bundle install okay so once our app is using devise we'll head back over and it's go to the documentation for devise and see what we need to do so with devise there's not too many commands it's actually very straightforward to get it going the first thing we're going to do is install devise with the command rails generate devise install so go back to our terminal rails generate devise install this will install devise to our application bundle install allows us to use device but running this installation actually allows us to install devise so now what we're gonna do is it's gonna have some things that's kind of making sure you do in my case already have a route path and I'm going to add these alert and notice messages these are just messages that will print out text when we sign in and sign out it'll tell us if we had a successful sign up or a sign in there is helpful for the user to know really what's going on and we're gonna place these in our layout file now I didn't cover this in the first section but what our layout file does is this yield tag right here inside the body tag this is just basic HTML structure and you've got your head in your body the yield tag is where all these views that we created will get inserted so all the content that lies outside of the sealed tag is gonna be common to every view page in our application so in our case we're gonna go down here we're going to paste in these alert and notice tags and now when we sign it in sign out we'll get sort of a little idea if it was successful if it wasn't successful all that fun stuff and we go back to our terminal it also we can copy devise use now this rails generate devise views is optional but when using bootstrap I would recommend generating the views because it will allow your devise views to get that bootstrap styling so we're gonna do rails generate devise views and also in the very end when we layout inside our application it will actually it does it right now but we'll we'll go into this at the very end of the app so if we go into views watch you have a folder now for devise and this has basically all the views we're going to be using with devise we're actually in this app only gonna be using new user registration which is our signup form and we're going to be using new users session which is our login form these are ones I will be styling direct at the end of the app but without that I don't get ahead of myself we'll head back and see what else we need to do so says rails generate devise model now in this case model is going to correspond to the model name and for this app we're going to be just calling it user so we'll go back and we'll do rails let's clear this I'm clearing the terminal with command K so run rails I figured it was already rails generate devise user so this is going to create our essentially our user model and our user table so as you can see right here we have the user model user dot RB and we have the user's table users table migration files in the DB directory and the user model file is in the app models directory so to effect these changes we're going to run rake DB migrate and this will update our application to have the users table and after this what we're gonna do is we're gonna restart the server because when you install devise and just like any other gem it's always wise to restart your server so we'll go into our second tab here control c and rails s again so we start our server we'll head back to our application or fresh make sure nothing's broken you'll see we had a little bit of padding here this is where those alert and notice messages will go but one thing that devised us which is really nice we want to do ourselves is if we go into config routes dot RB will see that devise already added our routes for us so we'll go back into the terminal and I'll just show you the routes that it made to rake routes and we'll see that we have routes for sign in sign up sign out all these right here now all we're really going to worry about is the sign up path right here and the sign in path right here and also the sign out path those are the three we're going to be worrying about the most when we add that functionality to the navbar which is actually what we're going to be doing right now so I'm gonna use command W to clean up a lot of these windows I'm not using and we're actually gonna go back into our layout file and like I said this is gonna be something that's common across every view that we render in our application so what I want to do is I want to add our navbar to this so we don't have to copy that code you know 15 times for every single view and every single possibility so we're gonna have the navbar right here and since I'm using bootstrap we can go back over here I'll just reference the documentation so you can see where I'm getting this if you go to components navbar let's go down a little bit right here is the basic navbar structure now in this application I'm not going to be spending too much time on making it super responsive at least for a mobile-first aspect of design I'm just gonna be making it so it looks nice and it's pretty easy to make bootstrap site responsive because it's responsive by nature and it's really easy to make it mobile first so what I'm going to do is I'm just going to be following this code right here to create a simple navbar so go in I'll create a nav tag and this is gonna have a class of navbar navbar default navbar default is that basic gray styling we're gonna change that to be a little just a white styling at the end and I'm gonna create a lot of spacing here for you guys so it's easier for you to see when I create a div with a classic container container simply adds margin to the left and right of your content it centers it so it's a not pressing the edges of your of your screen and inside the container I'm going to add another div this is going to be a class of navbar header now the navbar header is gonna contain our navbar brand which is simply just going to say book review and that is going to link to the root path so we'll go ahead and add that just create a link to tag link to and the text is going to be book review and it's going to take us to the root path now one cool thing with rails is we can add HTML classes right in Ruby code so we can just go class : and then quotation marks we're just going to put our classes one thing you'd be sure of is it's not equals its class : so we'll do a class of navbar brand so let's save this and go back over to our app and see our nice little ugly and a half bar wait here's our navbar brand so say we click on one of these images here or one of these show book links see how the navbar stays with each view and if we click book review will be taken to the root path cool so now we have the navbar header let's add our actual links I'm going to do is with an unordered list and I'll just call us a class of what is it nav nav bar now this is specifically the navigation so it's going to give it that the link styling that blue straps known for and in here we're going to have a list item and it's gonna have this is gonna be our signup link signup and the path that corresponds to signup is I keep getting ready to break routes so these usually wise to keep write routes up because you're gonna be referencing it a lot but once you use a framework like devise and you just create URLs more and more they'll become kind of second nature to you so you don't have to worry too much about doing the paths because you'll kind of know them in your head but sign up if we go down here it's new user registration and remember we add the underscore path at the end of that so new user registration path and if we go back and we refresh we'll see a sign-up link we click that will be taken to the signup page and as you can see the signup page has that bootstrap styling that's because we generated those devise views awesome let's go back and let's keep adding some more links now one thing I want to do is if a user is signed in to our application they should not see a link to signing in because if a user signed in they have no reason to sign in again so if users signed in we're gonna link to a sign out a sign out link and if a user is not logged in they'll see login and they won't see sign out so I'm blabbering on you guys just I want to see this so go in here I'm going to do a little bit too much spacing I do an if statement so if user signed in this is checking if a user is signed in to our application you know and that tag right away and if a user is signed in to our application we're going to link to the sign out tag so the link to sign out and sign out corresponds to destroy user session and it has a method of delete so destroy user session method delete all right and I spelled that wrong okay so we come back over here we're not gonna see it because we're not signed in and we'll add an else statement so the else statement is going to correspond to if a user is not signed in which is what we are right now or do another link to but this time it's going to link to login so link to login and the sign-in or login is new user session new user session Oh need add path here that would been a mistake so we're refresh and we'll see login awesome so with our navbar having some conditional styling let's let's actually go ahead really quick here and I shall add that when we add the categories the add book link I'm going to add up here in a little bit but let's just go ahead and create a user right now so go to sign up I'm going to create a user just calm John Snow I'll create a password will create a confirmation so we'll sign up and we'll see right here's our alert message in action welcome you have signed up successfully awesome and now since we're signed in we see the sign out link and we don't see the login link so let's make sure that works we'll sign out signed out successfully and let's login again John Snow let's login and we signed in successfully awesome I'm just gonna refresh the page to get rid of that so I should just go ahead and add that add book link so this one right here that takes us to the new book page throw that up here in our navbar so to do that let's just creates another unordered list reason we're creating another unordered list and not just adding it to this one because we want to float this to the right we don't want to have too much cluttered on the left side of our page it's gonna have the same styling class of nav nav bar nav and this is just gonna say actually we're going to do the same conditional we don't want a user to see the add book link if they're not signed in so we'll make it sort of a requirement that you have to have an account to post a new book to the website so just like the other one will do if user signed in and we'll end that so if the user is signed in then we will oh boy I my mouse works pretty bad so if the user signed in then we'll link to add book link to add book this is gonna be new book and right before we do that let's actually get rid of the the old link right in here and we'll go back over we're fresh and I forgot to add each class of nav bar right this will float this little nav bar section over here to the right awesome like that and we get taken to the new book link the next thing we want to deal with is associating a book that's posted by a user with that current user so what we want to do to start is we want to add the user ID attribute to our book model so if we right now if we go into the rails console the arounds console and we're gonna look at what book has we added the user model but it's not associated yet with book so what do you book that connection and we'll just do book and what we want to see here we want to see user ID but we don't see that right now so the first thing we want to do is we want to generate a migration now in rails a migration is a way of update the database without creating a new table or creating a new model essentially what we're gonna do is we're just gonna add user ID to books so we can get out of the console I'm gonna run the command rails generate migration and now we're gonna do ad underscore user underscore ID I'm gonna score to underscore books a lot of underscores but it's just the way it works so add user ID to books now we're going to specify what user ID is user ID is an integer so rails generate migration and user ID to books user ID integer all right so generate that migration and we'll see we got a migration file add user ID to books so let's go back to here and let's just see what that migration file looks like so add user ID to books and we'll see we're changing we're adding user ID which is integer to the books table awesome that's just what we want so now let's do rake DB migrate update our database and now if we go back into the rails console can we connect to a book again and we look at the book model we'll see right here we have a user ID even though book has a user ID when we create a book it's still not going to get associated with that current user so what we need to do is we need to change the way we create a book instead of just creating a book as it is we're gonna create a book from the current user so let's go ahead and dive back into sublime into our books controller we're going to do is we write the new action and the create action because right now is just creating a standalone book it's not associating it with a user so what we're gonna do going to new it's gonna be a current user top books that build so what this line of code is doing is its building out books from the current user we're gonna do the same exact thing down here if I can actually copy this there we go doing the same thing down here create but this time create is taking in book parameters like it was beforehand when the user fills out the form those are the parameter name passed in so now if we go back to the browser lost my train of thought there for a second and let's just say we want to add a book we're gonna get an undefined method books now what this means is we don't have associations right now and to add associations we're going to go into our model files and we're gonna add them associations are just ways of well associating one model with another so if we go into the book model first there's two basic ways we can do this you can have a has many and belongs to now a book belongs to a user so we're gonna do belongs to user and user has many books so a user can make many books and a book can belong to a user so with that added we'll go back here we refresh don't go to add book and now we won't get that error because now we have the Association so let's go ahead and create a book my case I want to do what I want to do let's do the third game of Thrones book so Game of Thrones book three I'll get the title right here storm swords paste that in and good some more hipster text here paste that in and the author again is george RR martin and it's create that book alright so we didn't get an error and let's dig into the rails console and make sure that our book was created with respect to who were signed in as and we're signing in as the first user with the email of jon snow so we'll go back here again what do you book that connection and we'll do at book gets book that last if we look in here this is one we just made a storm of swords and it has the user ID of one now it's being associated with a user ID and just to show you that the other books don't have a user ID we'll do a book dot first and we'll see the user ID for that is nil so what we want to do is we want to update those books that have a user ID now we'll just assume that the first user made all those books so you'll have to delete them all and remake them so to do that we access the book we won and we do app book dot user ID we're accessing the attribute we're gonna set it equal to one the first user then we're gonna save that and now we'll do the same thing we're a new book that we need to find the other ones book that fine too as user ID of 1 because we delete the we deleted the book with an ID of 1 if you remember back when we deleted the first game of Thrones book look to find 3 and I'm just hitting the up arrow to do this set the user ID and save I'm gonna be doing the same thing for these just up arrow set the user ID find the book set the user ID and then save it and save and I think that is all of them yeah right here storm swords again okay so with that now being done all these books are oh sorry for the motion sickness there all the books are associated with a current user now what we want to do is we want to create another user just for the purpose of sort of having another user so we'll sign out let's just create another one this one be at Starke create a password and let's just create a book with him quick it's to the Fellowship of the Ring and wise has such a long title see the Fellowship of the Ring maybe I'm picking these books is because I downloaded all the images beforehand so be easier for me to include all those grab some text and this is j.r.r tolkien create that and I'll just make sure that this book we just created is associated with the second user so do book that connection AB book it's book dot last and this should have a user ID of two which it does suite an important piece of functionality we want to implement for this application is we don't want a user who did not create a book to be able to edit or delete that book so to do that we're gonna add another conditional so we're gonna go back to our book show page that's where we have our links views books show and we're gonna add a conditional around this edit and delete links you always want the back link to be there so we're gonna check if any book that user ID so if the books user ID is equivalent to the current users ID so that's essentially saying what it means we want these links to appear and if not they won't appear so we'll do and now one thing I also want to wrap another if statement around this and this next one's gonna check if a user is signed in this is gonna save a problem where if we don't have a user signed in they can still review the show page for a book and if there's no user signed in the current users gonna have a nil value if it has a no value you can't call a method or an attribute on it so before we even do that we want to check if user that we've been doing we want to check if the user is signed in so if user signed in we want to do all this and if user is not signed in it still will not show this stuff so we go back over we're signed in is Ned Stark who only created this book so we'll see edit and delete for him but if we go to another one we won't see it so we're preventing a user who didn't create a book from being able to destroy or edit that book alright we're making good progress so the next thing we want to do is we want to add categories to this application if you remember from the final application up here we have a categories drop-down we want each time we click on one of those categories you want to filter these books so that only the books with that category are shown so the first thing we want to do so you want to go into our rails console I mean we want to go into our terminal and we want to create a category model now the category model is pretty simple all it is is a name of the category so gonna do rails generate model in this case it's gonna be the category model and so you have a name attribute which is a string so rails generate Model category name string and we'll see we have the create categories table and we'll have the category model let's go in and see that migration file just to show that it's there here create table categories with a name attribute which is a string awesome so we'll go back in here and now we want to update our database rake DB migrate and we'll wait for that to be done so the current state in our app the category ID is not associated with a book and that's what we want we want to associate a book with a category ID because we're going to use that ID to then filter those books so just like we did for adding a user ID to book we're gonna do the same thing for adding a category ID to book we're gonna do a rails generate migration can we do add category ID to books and the category ID is going to be an integer integer so rails generate migration add category ID to books category ID being an integer so run that migration and then we'll run rake DP migrate again to update our database and once again let's check out that migration file that was created see we're adding category ID which is an integer to the books table awesome so everything's looking good so far now what we want to do is we want to go into our rails console and make sure that category ID is part of the book book model so we do book that connection and we'll look at the book model and we'll see we have category ID is part of book and now just like we did previously let's add associations between category and book we're not going to have an association between category and user because the category is going to be set up by default users won't be able to create categories so let's just go into our book and a book is gonna belong to book belongs to category and now since we have our category model file open that up which is currently blank and a category has many books so those associations set up now we have an association between category and book even though the books and the category are now associated we need to have a way that when we create a new book we can select one of the categories to put it in so we don't have to keep going into the console and adding it after the fact so to do that we're going to go back into our books controller let's clean up some of these windows here clean up some of these collapsed files here and we'll go into books controller now what we want to add to start is we want to add a way to access categories when we create a new book so to do that run to act categories in our new action because we want to be available in the new HTML a or B view template so at categories gets category which is gonna access the model of all of our categories dot all that map I'm gonna map when I represent it as C do C dot name C dot ID all right so now we'll swing into our new dot html' ARB template here and remember we're rendering the form so we have at categories available in here which means we also have it available in here because this is being rendered in the new template and we're gonna add in a way to select a category and do that we're gonna use a select tag so we're gonna add hello here we do select tag I'm gonna select category ID I'm gonna set options for select and these options are gonna represent all the categories we have which will be three we're gonna have member technology biography and fantasy options for select is going to be the categories and then we're gonna actually have a little prompt and the prompt here is simply going to display text on the Select field so it's not just gonna have the first category showing it's empty hey select a category so it can tell the user what we wanted to do select a category all right so now if we head back into our application and we go to add book we're gonna see a drop down here I select and what we want this to show below here is the three categories we want but we haven't defined any categories yet and I see a little typo there let me get rid of that okay so to add categories we're actually going to go into the console to add these categories actually one thing I want to do before that let's go back to our books controller here and in our create action before we run this problem later we want to associate a book with a category ID even though we're selecting the we can select categories now once we add them we still don't have a way to associate the book with that category so do that we're gonna do a book and we're gonna set its category ID attribute to the category ID that it's passed in when we submit the form so when we submit a form it'll now associate the book with the category ID we selected and now like I said it's going to the rails console and let's add some categories so do category thought connection I'm gonna have all this mumbo-jumbo there and to do that we're gonna do category dot create remember our attribute is the name attribute so we're gonna set name to the name of the category so we'll do fantasy so category dot create name fantasy hit the up arrow you want tech nology now these are saving automatically because we're using the create method that automatically saves if we used category new we'd have to do we'd have to save it but this just makes it a lot quicker so category that name go to where that create and we want the last one to be biography all right so now we have three categories so we'll do category dot all and we'll see we have fantasy we have technology and we have biography that's what we want now in a real application you would want more categories in just three but for the sake of this application we're just gonna stick with three make it simple and easier to understand so now we have those we're gonna go back into our add book here and we're gonna see we have select a category still and we're gonna see those three categories that we selected so with that being now implemented when we file a form here and we create it it'll be associated with a user but there's one last thing we need to do we need to update the book params here to also permit category ID since category ID is now part of book we need permit it even though we're setting the books category ID to be what we're passing we still need to permit it or it's not gonna set the categoryid so we'll do category ID stuff we head over and we refresh let's add a technology book I think one was do the principles of object-oriented JavaScript add some text for that I'm actually not sure author on the top of my head Nicholas C Zachos add that it's the author and let's get some filler text so when we create this and we look into the console for this book it should be associated with a ID a category idea of two because technology is the second category we create that book and it was created successfully going to the rails console again rails see I'll do book connection and we'll do AB book gets book dot the last and we'll see right here we have a category ID of two meaning it's associated with the technology category awesome so with newly created books now being associated with a category we need to associate all the other books we have previously with a category so to do that we're gonna do what we did for books and user ID we ran into that same similar approach and we're gonna do it for the category ID so let's do that book gets to book that first to start and this is a classic Kings this is a fantasy book and remember a cool thing about our drop-down here is it puts him in order of ID so fantasy has an idea of one technology ninety of to and biography and ID of three so fantasy was an ID of one so we want to do at book that category ID gets one a book save and we're gonna repeat this process for all of the other books let's go ahead and do that we'll do a book gets book that find idea - okay that's the one we already had that was actually the first book but that three is HTML and CSS that is gonna be a technology book which is an idea of - and let's save that and I get I'm just using the up arrow to do this as quick as I can this is another game of Thrones book so that's kind of a category idea of one because it's fantasy save that five we have Steve Jobs that's actually gonna be a biography that's an idea of three save and I think we have one more book I'm still my swords again that's our Game of Thrones book categoryid it's gonna be a fantasy so idea of one save that book and to make sure that's everything actually no we have the fellowship still and that's also a fantasy book fantasy heavy book review site here we'll save that and that should be all of them eight yep this is the one we added when we created it the object only a JavaScript which is technology alright let's get out of the console and let's go into the next section so one thing I want to add really quick is on our show page for our books I want to add just the category it has this will be deleted later on but it would just help us know that everything's working fine so go into the show page for a book and under the author let's do just do a header for and it's gonna be at book that category that name so this is getting the category of the book and it's getting the name of that category and let's just do what's actually prefix that with category and this should then show the name of the category awesome category technology so if we go back here this should be biography this is also a good way to check to make sure you had all of your categories updated correctly in the console and this is technology alright awesome everything is looking pretty good we have books being associated with categories when we create them and we have all the other books also associated with categories now if you remember we didn't add any code to the edit or update actions in the books controller so we're gonna add the same thing we added to the new action up here the mapping the categories we're gonna add that to the Edit action this is just so when we edit the form we have access to all those categories that we had when we created a book so we'll add that and then for update we're gonna add the same thing we added to create when we set the books category ID to the params that we passed into the form so it will paste that in as well and now if we go over we're gonna run into a problem here say we want to edit the Steve Jobs biography and we're not signed in with who created that so let's do Fellowship of the Ring and we go to edit we're gonna see that the category is not filled in by default now this was something that gave me a lot of frustration when I was recording or making this app for the first time trying to figure out how we can pass in in this case it'd be fantasy here when we first click on edit form but as you see we don't have that right away so a user could simply just go to update and then it's not gonna have a category which is a problem so what we want to do is we want to make sure that this has a category filled in when we click on the edit book form and to do that we're gonna actually use a new or a different tag I different instead of using the Select tag like we used for the form partial we're just going to be using a F dot select so to do that we're not going to create another form partial but we're gonna copy this form partial and in our edit view we're gonna add this form but we're gonna change this select tag everything else is gonna be the same but this is now just gonna be F dot select category ID category ID and at categories so this is gonna fill in the categories select with the current category that we have that was selected beforehand and one thing we also want to add is we want to add a little thing up here HTML and it's a multi-part true one thing I forgot to add I'm just gonna add this right now when we add our when we had the ability to upload images for our books we need to add HTML multi-part true so I don't forget to do that when we add the paperclip gem and add the ability to upload images so like I said we have the F dot select category ID that's gonna have all these categories so we'll go back into the form partial here or and add the multi-part to there as well so now if we go back over here and we refresh we'll see fantasy is filled in by default so we go back here and we also got rid of the prompt because I don't think the prompt would be necessary when you're editing so you already created one so we didn't create that either principles of object-oriented script when we click Edit it should say technology and it does awesome so now our edit form is working with the with the category ID we're able to create books associated with the category ID and what we want to do now is we want to focus or we want to add the ability to filter by category ID let's begin by adding a drop-down of all the categories we have in our navbar and when we click on a category we will filter out all the books that aren't associated with that category so say we have a drop-down click on technology all we want to see is principles of object-oriented JavaScript and HTML and CSS and it'd be the same for other categories but different books would be shown so to do that let's go into our application layout file we're going to add the category drop down to our nav bar right here let's put it on the right side so create some room what we're gonna do is when I have a list item again and these classes are going to be boostrap classes so a new class of drop-down class drop-down and inside here we're gonna have an anchor dref is just gonna be filled in their class of drop-down toggle now these are still all bootstrap classes out of a data toggle but believe it should drop down I have a roll of a button area expanded false now all this can be found on the github or on the get bootstrap website and that's a meal for that and now we're gonna do categories and then after that we want to have a little downwards caret to new note that it's a drop down so do a span tag with a class of carrot and bootstraps awesome you can just to know a classic carrot and we'll have a little carrot symbol okay so inside here now we want to list all the categories so we're going to create another unordered list inside our drop-down and this is gonna have a class of drop-down menu class drop-down menu and it's gonna have a roll of menu and in here we're gonna loop through and create a list item for each category so we're going to get all of our categories by category dot all and then for each category represent each category with oops creat we represent each category with just the word category and that right away so I don't forget and in here we're going to create a list item tag for each category and now to get each category what we're going to do is we're going to link to link to the category that name remember category represents each instance so we're gonna get the name of each instance and it's going to go to the books path now the books path is the index page so if we go back to over here and rake the routes rake routes and we look at the index action it is if it would load here we go books so in next section is books and you add the underscore path so books path and what we're gonna do is when we visit the index action we want to pass a prams which will appear in the URL it's gonna be the category and the category name so category gets category dot name so this is gonna pass the name of the category to the sort of in the URL as params so then we're gonna access that category name when we filter out when we go into our index action for the books controller we'll be able to use the params that we're passing in right here the category name to filter the books so it make a little bit more sense when I implement it and then we're also gonna add a class of just link so we go back over here you're fresh I'm gonna see our category drop-down with our three categories awesome it's working good but if we click we'll see that we go to category we'll get category equals technology so like I said category and it's getting assigned the name of the category we're going to use this to filter out what we want here so we go back here and what we're gonna do is we're gonna go into the books controller and in our index action we're gonna add some code we're gonna add a conditional and we're gonna see if the category params that we passed are blank meaning that we didn't pass anything and we're just on the root page we want to display how we've been displaying we want to display all the books because we're not filtering so we'll tab that in and else meaning that if we pass Rams in so depending what the Paramus we're gonna display just those books so we'll do at category ID its category that find by name which then we're basically finding the name that is being passed into the params so params category the ID this is getting the ID of the category that we're passing in up here so we click on this this is what we're getting right here we're being the category ID of this category oops am I do that back over here and AB books so instead displaying all the books we're gonna get the book where the category ID equals the category oops category ID attribute so the books category ID equals the category ID which we calculated up here we're gonna order that just like we did the other ones by created at descending so let's refresh and let's try this out again and I said to word end OOP I forgot to end the if conditional here we're fresh again and let's filter for the fantasy book so for fantasy we should see the Game of Thrones books and Fellowship of the Ring click that and we see Fellowship of the Ring and the Game of Thrones books awesome that same thing for technology and same thing for biography sweet so the conditional is checking to see if the category params ID so it gets this name it checks the ID for that name and it basically checks it against the category ID for each book and if they're equal they display books here and if they're not they won't display the books and again if there's no prams up here it's not going to display any filtering it's not going to filter it all it's just going to display all of our books I want to clean up the output a little bit though of the when I filter by category so I click on technology it doesn't say this is B like technology category a typical user is not going to really be able to understand that this is the technology one for sure because it just has some URL parameters so I'm gonna do is I'm going to go into our index page and we add another conditional now what this conditional is gonna do is it's gonna first output if there's a category give it a class quick of current category and in here I'm gonna output params category remember the category programs is the category name so we go over here now refresh I'm gonna see the word technology so this is basically outputting the name are you here is a biography okay awesome that's working so another thing I wanna do is we're not gonna see this right now but I want to add another conditional that checks if books that count remember books is available because we defined it up here in here if books that count equals zero meaning that if there are no books in the category we want to display a message it actually says you know hey let's just say there are no books currently in this category so we'll save that and we'll run an else statement and if there so if there are books in the category or if there are books at all we will output those books like we've been doing this is just a little detail that would be something you would want in a finished application and let's add some spacing okay awesome so if we go in say I want to delete Steve Jobs here sign out so I'll show you that conditional login it's Jon Snow Steve Jobs will delete that we delete it and we go to biography we'll see there are no books currently in this category so it's just telling the user hey you know nothing's wrong on your end there just no books currently in this category so what the last thing we want to do for categories is we want to add a conditional this is more of a styling thing but when we click on or when we're on a category we want that to be highlighted as the active category so to do that we're going to go back into our application layout file which is right here and we're gonna add a conditional for setting a class of active so right here is the category name so in here we want to add the conditional so class equals and here we're gonna add the conditional that will set a class of active when it's active so to set a class of active if params category so if the category name or the category params which is corresponding to the category name equals the category name I should be category name so if the params that are passed in here equal the category name they'll be active so it's saved let's refresh if we look here we'll see technologies now highlighted as the active one so we've got a fantasy and we click here again fantasy is now active awesome so with that piece of functionality this section is now complete let's do a little overview of everything that we did we'll go to the root page we'll see all of our books and we can filter based on a category now which each book is associated with if we have no books in a category we'll get a message here and again technology there's those books and when we add a book we can associate it with the category so since we deleted the Steve Jobs book we will add it again let's just grab some filler text they set in and this is by Walter Isaacson remember we're selecting the category of biography and we'll create the book and if we filter biography Steve Jobs now appears awesome so that is the second part down in the next part which is part three we're going to be adding the paperclip gem so we can finally display the book images instead of this I guess title this title set up we got going here and we're also gonna lay this out a little bit so it looks a little bit nicer so I'll see you guys in part three

Channel: Ryan Hemrick

Views: 28,643

Rating: 4.9411764 out of 5

Keywords: Ruby On Rails (Software), Ruby (Programming Language), Computer Science (Field Of Study), Web Design (Interest), Web Development (Interest), Web Developer (Job Title), Programmer (Profession), How-to (Website Category), Tutorial (Media Genre), HTML (Programming Language), HTML5 (API), Cascading Style Sheets (Programming Language)

Id: lXnK4foYtCk

Length: 53min 5sec (3185 seconds)

Published: Wed Jun 03 2015