Placeholder Image

字幕表 動画を再生する

  • in today's video, we're going to be looking at creating the index new and create fuse for the books, as well as flushing out the homepage of our site.

  • We're going to be looking at doing multipart form up loads with files as well as some more complex searching that we didn't get into with the author's page.

  • So let's get started now to get started was first, look at what we're going to create.

  • So we have an idea of what we need to do is out of our routes and models.

  • We're going to be creating this search books page, which is going to have a title published after and published before Field that we can search by as well as it'll lists all the books down here that matched that search.

  • Also, we're going to have an ad book page which will allow us to add a title to a book and author, which we select from a list of authors that we've already created.

  • We can select a published A Here we can select page count will just stay 200 for example.

  • We select which book cover that we want to use, and we can add a description, your book, and then we can hit, create, and that will bring us back to this book page where, as you can see, we could see the title of our book here and we can search.

  • So if we titled our book title, for example, in this case we concerts and we could see that book.

  • But if we search for something that's not the title, you'll see it does not show up, and this is what we're going to work on.

  • Creating these pages are very similar to the pages that we created for authors in the last video.

  • So instead of our Roots folder here, let's take our authors file, let's copy it and change it to be called books instead of called authors so we can call its books dot Js.

  • And instead of here, we're going to find all of our routes are books.

  • So the first thing we can do is we can select our book model instead of our authors model, which we have not created yet, but that's okay.

  • This is going to bear all books route, and we'll just believe everything inside of these routes for now because we don't really want to worry about what's inside the ropes.

  • We just want to worry about the actual rouse themselves.

  • So we have a great book route and our new book, Crabs, and there we Go and these methods inside of here for these different functions.

  • They're going to be very similar to what we created for the author.

  • But since the book is more complex, they're going to be quite a bit more complex.

  • The next thing that we want to do is set up our model for our books, which again we can copy our offer model here, change your name to be book Js, And then, instead of corn and author schema, we'll call it a book schema.

  • Give it a title here, a book.

  • You can change this variable to book ski myth, and our book is going to have a bunch of different properties inside of it.

  • While offer only had name, the book is going to have a title.

  • We're also going to have a description which is going to be very similar to the title, and the description is not going to be required so they can remove this required field here.

  • Changes to be description.

  • This will just allow us to add a book that has no description.

  • We're also going to want a public date for our books.

  • And this published date is going to be of the date field so we can just set that type here is equal to date, and we want this to be required.

  • So where s that required?

  • True.

  • We're gonna have a page count.

  • This is going to be an imager.

  • So we'll say type is number.

  • Since in mongo, D B uses the same types as Jason, which is going to be number for any number.

  • And we also are going to require this so we'll stay required true.

  • Then we're going to need another date.

  • This day is going to be the created at date.

  • And the reason we're having a created at date is because inside of our application, our main page is going to show all of our recently added books in order from when the most recent one to the least recent one.

  • So we need a date at which these books were added to the application.

  • So we know which books were created when this is going to be, of course, of the type date, and we want to require this, obviously And also, we want to set this to a default value.

  • We always just want to set this to the current date.

  • So we can just say date dot now And this will set the creator that date to the current date every time that we create an object so we don't have to manually set this every time we create a book.

  • Next, each book is going to have a cover image, and instead of actually passing in the image itself into the database, we're disappointed past the name of the image so we can restore a single small string, and then we could store the actual image itself on our server in the final system.

  • Since you always want a store files in the file system, when you can, we're gonna put this as a type of strength and we're also going to be required true for this, then lastly, as we all know, every book has an author, so we need to set an author type for our object.

  • And this is going to be a little bit different because we want to actually reference the author from our authors collection that we created over here.

  • So instead of putting the type here to be some kind of author type or I d type we're going to be using the mongoose dot schema dot types dot object i d.

  • And this essentially is just referencing another object.

  • This is just the I d of the author object.

  • This is telling mongers that this reference is another object inside of our collections.

  • So we also want to put this to be required true, since every book must have another And then lastly, since we're referencing something else, we need to tell Mongoose what we're referencing.

  • So we can say we're referencing Theo author collection, which we created earlier, And this author name must match the name that we set here for our model.

  • Now that's all we need to do for our model for now.

  • So inside of our server, what's actually used the book routes that we created so we can copy this off The variable changes to book changed this to books.

  • So now we are have all of our book droughts in here and down here we can tell our route that we want all of our slash books routes to Goto, our book writer that we created looks like a spell that here we go.

  • And as you can see in her application over here, when we're at books, it's just slash books at book is going to slash book slash new and so on, just like it was for the author's, it'll be slashed.

  • Authors and Slash authors News.

  • Let's go back to our route here for our books, and we just want to send some information to the page so that we know are rendered in these pages.

  • So we'll say rez dot send all books copy is down, we'll say new book and right here will also do create Look that what?

  • We actually can see these rocks when we go to them.

  • And then let's start up our server and can run.

  • Don't start, which we created earlier.

  • That'll start up our server locally.

  • We see that everything works successfully.

  • So if we open up our local host Port 3000 refresh this zooming in.

  • So it's easy to see and we go to our slash books page.

  • You see that we get all books and we can go to our slash books slash new, and we get new book.

  • So we know that these routes are working perfectly and they're hooked up as we want them to pay.

  • Now we can actually work on implementing them in the same mother we implemented, our author wraps.

  • The first thing we want to do for that is actually add links to our headers because right now we need to type in the euro manually.

  • So if we go into our partial here for our header, we could just coffee these two author links and change these to be book links.

  • So we'll change.

  • Offers two books here, and we'll also change this to, say books and will say this to say, add author for at book.

  • I'm sorry we'll save that refresh.

  • And now we have links to our books page, and we'll suddenly tore at book page.

  • Now the first thing that we want to do is actually set up our new books page so we can add books which we can view later.

  • Let's look at this ad view book page.

  • Resume this out so it's easy to see and you see that we need Fields for the title author published eight page count, cover and description.

  • So let's get started with that.

  • First, we need to create a new folder here for our books views, because this is going to be the same as our rap name up here to be easier.

  • And we can just copy the new view here that we're using for our author.

  • Hasten into books because it's gonna be very similar.

  • We'll say we want to create a new book.

  • The action is going to go to the books Euro instead of the author's Euro and instead of one we canceled.

  • We want to go back to the books instead of back to the authors, and we'll still render a form fields partial in here just like we did for authors.

  • So let's copy that partial into our books page here and now we need to just change this to be all the book fields that we want.

  • So if we look over here, we see our first field is going to be titled type of text.

  • We're going to give it a name here of title so that we can reference this on the server and this will be our book, that title, which we're going to be using as the value.

  • And let's just copy this.

  • Hey, sit down and do the same exact thing here for author.

  • But author is going to be quite a bit different because this isn't actually Text Field.

  • This is a select box.

  • As you can see, we can select a different values for author from A list.

  • So we need to actually create a select input here and populated with all the offers to do that we need to look through.

  • All the different authors are Paige and one way that we could do that very easily.

  • It just by accessing that authors collection, we could say dot find passage in that we want to find everything and then we could say dot each, for example.

  • But this is really not the best way to do this because this is a synchronous.

  • We don't want to render all this code inside a bar.

  • A few files.

  • We want this to be inside of her actual server.

  • So we're going to remove this and actually pass a variable into our view here.

  • What, you're going to be called authors, which is all the authors that we want to look over and inside of our actual server, we're going to pass the author's very book down into our view.

  • Next, we can actually create each one of our options.

  • So to do that, we create an option here.

  • We want to slip the label.

  • This label is going to be equal to hear the value of our author dot name so they can say author dot name is going to be the label that the user will see way want to set the value here to be the actual idea of the author.

  • So we'll set that author that i d.

  • And there we go.

  • That is our option variable created.

  • But if a user has already selected an author, we want to set that option as selected.

  • So we're going to create an if statement here.

  • This if statement is going to say that if the author di Di is equal to the book dot author and remember the reason we're doing booked out author here instead of booked out author, that I d is because this author field is actually I d.

  • If you remember, instead of our model, this is a I d object.

  • So our author is actually I d of the author inside of our book, so we can check to make sure that the I d of the author is equal to the author of the book I D.

  • And if so, this is going to be our selected value.

  • So this option here, we'll just set it to be selective.

  • You just put the selected attribute on your option, and now this is a selected option.

  • But if, for example, this author idea is not that so we'll put an l statement here.

  • Then you want to do our option, but without the selected attribute so that this will be de selected for our options by default.

  • And then lastly, we wanna put in our brackets here so that we know that this is right there.

  • This is going to be opening up our l statement.

  • And finally, we need to close out our brackets for l statement just like that.

  • And this is the hardest part about writing your code in the server like this is you need to make sure that you have all of your opening and closing brackets properly lined up inside of these tags here, with the percent simple so that the server knows where to open and start.

  • These if statements and these loops.

  • And that's all the code that we need to do in order to render this author's loop right here.

  • Let's remove this extra input here, save this and actually view what we have.

  • So we can go to our ad book page and you'll see that we're actually not rendering anything on here.

  • And that's because inside of our server for our books, forget this.

  • We're just doing rez dot send all books.

  • So instead of doing that, we actually want to render our new page that we just created here.

  • So instead of here, we want this to be an asynchronous function.

  • As I mentioned in the last video, we're going to be used in a sinking dysfunction.

  • Since it makes working with Monty, it's much easier.

  • So the first thing inside this sink in a statement we want to do is we want to create a try and catch block so that we catch any airs from our asynchronous code.

  • And since we're passing the authors into that page, we want to first get all the authors.

  • So we'll say that our authors are going to be equal to the author model dot find.

  • And we just want to find everything what has passed a heavy object.

  • And we wanna wait this so that our code will wait here until it gets all the different authors.

  • We also need to make sure that here we employ our author model so we can actually use our offer model in order to get all the authors So it will pace that and they're just like that.

  • And then we want to actually create a new book.

  • So we'll just say our book is equal to new book, and this is just like we did with the authors.

  • We create this new book so that when the user modifies it and we send back data saying that they incorrectly entered their data, we can populate the field so that they already created, and that's all we need to do here.

  • We'll catch any heirs.

  • And if we do get in there, what is going to redirect the user to the book's page so we'll just stay here slashing books and this is going to send them back to the books in case there's an area getting any of this data.

  • But if there's not an air getting it is data, then we're just gonna say rez dot render And we want to render that book's page that we just created still say books slash new.

  • Make sure you put our slash at the beginning here, and we want to pass some variables into that.

  • So we're gonna pass the author's variable that we created as well as the book Variable just like that.

  • And now we have all the author is being sent to this new page as well as the book information.

  • Now, if we save that and refresh our page here, you'll see that we couldn't air.

  • That's because I accidentally put this slash at the very beginning here so we could just remove that we save our page and refresh, and you'll see that we get our title being created here, as well as a list of authors inside of her application.

  • And since none of our authors are currently selected, it'll just like the very 1st 1 in the list by default.

  • So now let's go back to our farm fields here open up what we should be having inside of our page and you'll see that the next thing we need to do is the published date.

  • So this is going to be very similar to how we did our title.

  • Just paste this down here.

  • We're going to want this to be the publish date.

  • We're going to want to get this input a type of date.

  • Since this is going to be a date field, we want to set the title here to be published date, and the value here will be published.

  • One thing that we will notice, though, is that this value here for this published date inside of our Jason object of book is not in the correct format to be used inside of this input data opted, so extra need to convert this to the correct notation.

  • So in order to do that, we're going to do a little bit of tricky job a script here.

  • So I'm gonna put this on a new line so that it's easier to see what we're doing.

  • We're going to first say that if the published book is equal to know because we first want to check to see if the object is no before we actually try accessing it.

  • And if it is no, we're going to be using this turn ery operator.

  • So this is pretty much like an if statement, so we'll say if it is no.

  • Then do what's after the question mark, which is just going to be returning empty string as the value.

  • But if it's not?

  • No.

  • So that's what this Colon is.

  • This is essentially the else section.

  • So if this is false, it does everything after the colon and what we want to do here is we want to say, look dot published eight and then we want to convert this to the correct format so we'll set too high.

  • So string.

  • And we just want to split this on the tee variable here because this converts it to a string that has time inside of it.

  • And we don't want the time section.

  • So this string will be date, then t so it'll have date here.

  • So if you like 2019 0909 for 19 and then we'll have tea, for example, and then it'll have like 12 23 for example, for time, so we only want this date section of its.

  • We split it on that tea and we just get the first section of that string which will get us this date section since we only want a date and out of time.

  • So now that we have that all done, this will actually populate our published a field for us and it would be safer.

  • Refresh.

  • Over here we have our published date field showing up right here and is defaulted to nothing for now because there's actually no value for published date because it is no to make this form a little bit easier to work with addicts.

  • Everything's on one line right now.

  • Let's just wrap all of our different inputs in dibs to break these up on two different lines so accredited here, draft this section also do the same thing for our author in dental.

  • This this is just going to make it a little bit easier for us to visualize this form instead of its non created CSS state that we have here right now.

  • And there we go Now If we say that, refresh our page.

  • You see that over inputs are on a different line, which makes it much easier to follow.

  • What's going on now.

  • Let's move on to our next input, which over here we can see is our page count will copy over published eight, and we'll change this to be here instead of Polish state.

  • It'll be page count.

  • We want this to be a number field instead of a date field.

  • Change the name to be page count, and we don't have to do any fancy transitions for the value.

  • So we'll just set the value to be equal to book dot page count and remove all this other fancy stuff that we did for the date.

  • Fields were also just going to put a quick minimum value on here, which is going to be equal to one because we could never have a book that's less than one pages long.

  • Now I can move on to our last two sections, the first of which is going to be our cover so we can change page count here to be cover, and instead of putting our name here to be cover image name because this is what the variable is our model, this isn't actually going to be the name of the image.

  • This is going to be the file itself.

  • So we're going to set us to cover so that we know that this is the actual cover file image, as opposed to just the name.

  • We also want to change the type here, to be filed instead of number removed the minimum and also, unfortunately, file inputs don't allow you to set a default value.

  • So we have to remove the value field as well.