Node Js: Build Your E-Commerce Website Part 2

1. Introduction: Hello and welcome to a new class. In this one, we're going to implement the back end of our project that is to create an E commerce website. As we can see here, we have our front end pages that we created earlier in the previous class. If you haven't seen that, I highly encourage you to do so. However, if you already know the basics of CMLCSS and bootstrap, you can always continue with this course to learn the back end and how we can work with things such as going from one page to another, getting data from the database, and so on and so forth. So we're going to discuss all of these topics. We're going to learn about restful APRs, how we can get and post into the functions that we have. Now I'll give you some tour in this project. For example, here we have the home page. As we can see, we have the brands, we have the best sellers and the categories. For example, if I go to the brands, I'm going to get all of the brands that are available for us at the moment, for example, we have Johnson, press on Explore, going to be redirected to the product page where I'm going to have all of the Johnson's product such as Baby Johnson, by Johnson, and so on and so forth, alongside the price brand category and size. Of course, if I press on this specific item, I'm going to be redirected to the Baby Johnson or the product page where I can see the baby Johnson. Here we have the image, however, it's not showing right now because it's not fully loaded. Of course, we're going to have the price brand size, the quantity. Let's suppose I have five pieces. If I added to my card, I'm going to be redirected to the sign in page. In this case, I need to place my example, for example, in this case, I created this. Of course, if I press on sign, I can now purchase or add this item to the card. As we can see, once I added it, we're going to have this one right here indicating that I have one item in my card, and of course, sign out here instead of sign because we already signed in. Now, if I go to my card, I can see the item right here. I can also remove it. Of course, I'm going to need to add the address and the payment method. Then of course, if I have an item, I can also place the order. Let me go back to the brand, for example. Let's scroll down to Johnson, and let's choose any of these. Of course, I'm going to choose the quantity that is one. I'm going to add it to my car, everything looks good. Now I have it right here in my order. Of course, if I place the order, I'm going to be redirected to this page where I'm going to see my purchases. So I have a purchase three days ago, and I have a purchase right now, and both of them are pending. So we're going to be going through all of the pages 1 by one and updating each and every one of them until having this complete project. I hope you enjoyed this class, and with that being said, let's jump into the first task. 2. Databases 1: Hello and welcome back. In this part, as we said, we're going to deal with the back end of our website. We already built all of the front end. We built the home brand category contact page, and this is our home page. As we can see, we have the photos, we have the brands, best sellers, and then followed by the categories. And we also have this one, which is the place order, and we're going to place it in the place order file later on. Finally, we have the footer and it looks like this. Now, let's go back to our code and start with the back end. So the first thing we're going to do is we are going to require some new module that will help us in Mongo to build the database that we need. The first thing we're going to require is defined or create and this will be required by Mongo, as we said, Mongo find or create, and we're good. We just need to import it or install it using NPM. Here, let's go back and NPM find or create. We need to type Mongo right before. So Mongo a fund or create and going to wait a bit for it to be installed, and in the meantime, we can go back and continue with our code. This is the first thing we're going to do and now we need to connect and set Mongoose. Let's go ahead and do it right here between these two. To connect Mongoose, we simply write mongoose to connect and we're going to choose where we're going to connect it. Since we're going to store it locally on the Mongo dV compass right here. And we're going to type Mongo DB local host 27017, and then followed by the name of our database. Since we're going to create maybe this commercial website. Maybe it's better to name it commercial database and followed by DB. Then after that, we're going to use a new URL passer and we're going to set it as true. This is it mainly for the connection, and later on we'll see how we can visualize the database. We're going to need to install the Mongo DB compass, and I'm going to do it in the next video. But for now, let's just connect it and set M. Since we use the connection, we're going to need to set it also going to need to use find and modify Okay. As far as Then we're going to also set the use create index as true. We're going to create this index, and we're going to talk about it in the next videos. But for now, let's just set it Mongo finally find and modify as false. We don't whenever we call find, we don't need to modify our work. This is it mainly. This is how we can connect and set mongoose and create our database. Now, let's think about it for a second. What databases we really need. First of all, we're talking about brands and categories, it makes sense to have both databases for brands and categories. We also have the single items and we're going to need a database specified for the single items. Then we also have the e mails that we're going to extract from here. Once the user presses on CU, we're going to take this e mail and add it to the database. Of course, we're going to need a database specified for users. Each user. Each time a user signs up, we're going to take all of his info and store them in a specified database. We also need the best seller database. That is for the best sellers items. As we can see right here, we have three items for now, but maybe we might have more later, it makes sense to have a database specified for these kind of things. Okay. So this is it mainly. Let's start with coding the databases, creating them, and then maybe adding some elements or items to them. First thing we're going to do is to create the brand schema. This is how we create a database. Name it. Let's name it brand schema, and we're going to create use mango, Mongoose schema, we open the curly braces, and we're going to need mainly three objects. The first one is the brand that we're talking about. Maybe let's add the categories of this specified brand. For example, if we have a specific brand such as Johnson, we're going to need what categories do Johnson sell. For example, we have the shampoo, the body lotion, and etcetera. So it makes sense to have a string of an array of strings that contains all of the categories that this brand cells. We have the brand name and this will be a string. We also have the categories of this brand, and this will be an array of strings. Maybe let's add an image. This will also be string for later. This is the first one, create the second one that is the category schema. Category schema equal to new Mongoose schema. Let's open it as before. The category will be a string. Now, as you can notice here, if we have a specific category such as shampoo, we're going to need to have a list of all of the brands that sells shampoo. For example, we have Johnson, we have Sons and so on. This is the category that is the name, which will be a string. We also have the brands right here, and this will also be an array of strings. Then we have the image. Now let's move on to the e mail schema, and this will be a simple e mail. There is a string, so new Mongoose schema open it right here. And then we have the e mail that is a string as we said. Let's move on to the item schema, and let's build it right here. We have the item on clues schema up in it, and let's see. The first thing we're going to add is the title or the name of this item, and it will be a string. We also have the description that we're going to add which will also be a string, and we have the image URL. String. Basically, all of these are sting. The brand will also be a string, the category, and we're going to add a price quantity and size. The size will be a string and the price and quantity will both be numbers. Here we have the price, and this will be number we finally have the quantity which will also be a number. This is basically for the item schema. Let's move on to the user schema, so we still have two schemas to create the user and the best seller. Moving on, constant user schema equal to schema as usual. Let's up in it. We have the e mail of the user, the password And let's maybe add the Google ID if the user signs in using his Google account. We have the number. So this is the phone number. We have the name and we also have the orders and the address. Inside the orders, that's maybe an array. Inside this order, we're going to add a few things. Let's see. We have the order, we have the checkout date And maybe let's add something that is called received to specify if the user has received this order or not, and we're going to add the items that this person ordered. We're going to need the image, title price quantity, and size of these items. We also have the total and the date that the user ordered. Let's first, the received This will mainly be but before let's just add it as an object. This is the first object. And inside which we're going to add the received, it will be of ban and the default will be false. Now, we also have the checkout, which is also of type and the default will be false. So that's it for the checkout. Let's move on to the items. As we said, the items will be an array of items. So the user might order more than one item inside the single order. So inside the items, we're going to have let's add the image, and this will be a the title, which will also be a string price, which is a number. The quantity that the user has ordered, and it will also be a number, and finally, the size, which should be string. This is it basically for the items. And as we can see, We just need to add the total, which will be string, and the date that the user has ordered, which will also be a string. This is it mainly for the orders. Now let's move on to the address. So we're done here. Let's add the coma and create the address, which will basically contain just three components, the address as a string, the city that the user is living in and the telephone number. The address will be something like that, string city strength, and finally, the telephone number, which will be a number. This is it mainly. This is what we're going to do. This is our user schema. We just have to add the best seller schema. To do that, we're going to add constant best seller schema equal to b schema as usual. Let's open it up. Of the item will be maybe let's add the reference of this item, so it will be an item, and then we're going to have to add the name of this item, which is a string, and the image shod also be a string. And that's it mainly. I will just add the type which we're going to extract from the schema the types and object ID. I'm going to explain it later, but for now, let's stick into this schema. These are mainly our schemas. We just now need to create the model and then visualize them inside our Mongo compass and to do that, we're going to go and download Mongo B compass from here. As soon as it is downloaded, you just open it up and I'll see you in the next video. Okay. 3. Databases 2: Now that we finish with the schema, we can create the model. Let's go ahead and start with creating maybe the brand model or the item model. So let's start and it is pretty straightforward. We just need to time constant item. This is the item name, Mongo model, and we're going to model the item as the item schema that we just created earlier. And we're going to do the same thing for all of the others. We have the e mail. So the email will be modeled as the email schema. Of course, I'm not going to write all of them. I'm just going to copy it a few more times and add the rest. So here we have the best seller. And then it is modeled as best seller right here and as the best seller schema. Then we also have the three left to chart the brand, and it will be modeled as a brand as usual and brand schema here. We have the user schema. Is modeled as user and the constant would be named user. Finally, we have the category category, and it will be modeled as the category. This is it basically. Let's just check maybe if I missed anything. We have the best sellers, so we have six, one, two, three, four, five and six. We go for now, we created the databases for our items, categories, brands and so on. Now, since we're done with this, let's move on to maybe add some of these items, some of these brands or categories to the databases. To do that, it's pretty simple. We can go right here and start with creating maybe brands. I name it B one, should be equal to let's start with the best seller, for example, best seller, open it up, since we said here that the best seller will contain the name and image mainly. So let's stick to it. So we have maybe Johnson and the image will be we're going to add the P. For now, I'll add here a file folder called images inside this folder, we're going to add some images. But for now let's name it Johnson PG and we're good. This is the first one. Let's create another one, two equal to best seller As usual, we're going to need the name, maybe call eight, and the image will be as usual, the path of the image. And as we can see, it is a string. As we said, we have three best sellers. The last one will be of name maybe the der. Let's open it up. Name oder Finally, the image will contain the exact path of this image, and it will be in the images folder, oder. GPG. That's it mainly for the best sellers. Let's move on to the next databases. Let's add for brands categories and then add all of them to the actual databases. What we're doing here is we just creating some constants. This is constant B one, indicating the best seller, the first best seller, and we have the name of this and the following image. And we also have the best seller number two and three. But we didn't really add them to the database, and we're going to do it later once we finish the brands and categories. To create the brands, let's name it the brand one, and it will be maybe Johnson, since we've talked first about Johnson. Here we go. Johnson. As we said, we need out of the categories that Johnson has. We're going to up and up maybe Shampoo maybe Pica, and maybe the as we've done before the image will be the exact image that we've used earlier. That's set for brand one, let's copy it and paste it right down here. And we're going to create two more brands. So this is brand two, and this is finally brand three. So change them a bit. Here we have maybe eight. Let's say maybe just the category will be just teeth. So the image will be teeth DGG. We're going to add them later. Finally, let's move on to the last one. This will be baseline, maybe the categories will be maybe just bodica We'll go with this. The image will be bodyPG we finished both best sellers and brands for now. We're going to add some categories. Category one will be new category. Open it up and start right here. The category name will be maybe maybe Johnson, Johnson we have. Johnson and maybe let's do, for example. And finally, we have the image, which would be in the images folder. And as we said, since we're using shampoo, it makes sense to add a Johnson picture of a shampoo as the main picture. We go. This is the first category. Let's add two more Okay. And that's it. The second one will be a body care since we've talked about it earlier. Inside body care, we have maybe just Vasilin and we'll go. Finally, to change this. Maybe just type it. Maybe let's keep it as it is for now, we'll change it later. That's it for the categories. Let's just add one more thing here. Instead of shampoo, let's make it te Inside T we only have maybe coate as the brand. That's it mainly. This is how we can create the constants that we're going to use or we're going to add to the database. Of course, this is not the only method. There is actually a more straightforward method where you can simply add all of them at once or maybe add them using the compass and we're going to discuss it later in the next video. But for now, we're going to add them manually just to have an idea about how we can create them or how we can add them to the database using code. So that's it. Basically, let's go ahead and add them right now. So we talked about the category schema, and we created the model that is named category. And to insert in this category, we just type category dot insert many if we're going to insert many categories at once. So we open up the array one, two, and Category three. So this is it mainly. We just need to check for possible errors that it's pretty straightforward if an error occur just printed on the console, otherwise, Just print all of the categories that we just added. So we have category one category two and category three. This is it for the categories. Let's copy it and paste it for brands and maybe the best sellers later. For now, let's work with brands. Brand that insert many, we have brand one, brand two, and brand three. Here we go brand two. We're going to also check for possible errors, and if not, we're going to simply print out the three brands that we just added. Brand two and brand three. That's it mainly we still have the best sellers, but I think that we've got the idea about how to create these and how to insert them. Okay. So that's it for this video in the next video, we're going to discuss how we can work with the MongoDB compass, how we can visualize the data that we just added and how we can also edit or modify or even add new items or new databases from the application. So this is it for this video with that being said, see you in the next one. 4. Create Route: Hello and welcome back. In this video, we're going to learn how we can link between the web pages. For example, here we are in the home page. Maybe we want to go to the brand category about conduct page. For now, they don't work. We're going to create the forms for these pages. Of course, if we want to see this specific product, if I press on C details, I want to go to the C details or the details of this specific item. We're going to do that also. But for now, let's start with the web page, the home page, this one. So let's go to our visual study code. And here we said that whenever we have this one, the slash we're going to render to home. But let's keep in mind. Let's go back here and let's see. Inside our home, we need a few things from the Monge DB or the database that we have. The first one is the categories that we have for example here. When we show the categories, we need to have them here, and then we can list them like this in a cars. But for now, we need them, so we need to get them whenever we render to home. We also need the best sellers. Remember that we created a best seller here. We created the best seller schema, and we added a few things to it. These are the two main things, and of course, we also need the brands. As we said, it's the same as the categories, we also need it. Let's start with that. Let's go back to G slash in this case, what I'm going to do is to search through all the brands that we have in the brand scheme or the brand database, and we're going to search for everything, so we leave this one empty. And we're going to get the function. So we have the error and defound brand. In case of an error, don't do anything. If there's no error, let's search for the best sellers, and then the categories. Best seller. No find we're going to find all of the best sellers items that we have. As usual, we have the function that contains the error and the found best. Then let's open up. If we have no error in this case, we're going to simply search for the last one, that is the categories. Category find and function with and refound categories. Now we can render to home RESG render to home with the following items or the following components. We have the categories name categories double And this will contain def categories that we found earlier. We have the request also. Let's not forget it. Let's move on to brands, and this will contain the found brand and the best which will contain the found best. That's it mainly. We rendered to the home page with the following brands best and the whole request that we got from here. This is the first one. Let's move on to the second. Of course, before, let me just talk about what we can do with this here. So whenever we go to the home page, we're going to have the brands, the best sellers, and the categories with us. And if we go right here to the home, we can change this. What we're doing here is that we're just showing one picture, which is image two and the heading, which is my caption titled first image and the whole caption. So these are static. We can change them and make them change, for example, here, we're showing the brands. We can get all of the brands that we got from this list, and we can access them here using the Javascript built in inside the SML here, and we can show them right here in the home page. And we can also do this for the best sellers and the brands and categories, I'm sorry. So this is it. This is what we're aiming to do, but for now, let's keep it simple. Let's go back to the app to JS, and then let's finish with all of the requirements, and then we can also link between them here and we can change the captions titles and so on. Let's continue. Let's go back here and let's see. As we can see here, we have the stay connected. This one, stay connected where the user enters his e mail address to receive exclusive offers. In this case, we're going to take this and add it to our database. How can we do that? Let's go back and let's start. This is a post. So we're going to get a post. Ad post. Whenever we get something from the stay connected page, which is a post, we're going to maybe enter this function, so crass as usual, and we're going to create the e mail. I'll name it simply an e mail and this will contain a new schema or a new component that we're going to add to the schema. The email with this will be request body email. Now, if I go back right here, sorry to the footer, And as we can see if we scroll all the way down, we have the input the e mail with the name email. We can access this one using the name by simply writing request. This is the request that we're going to get that contains all of the components inside this foo this form right here, and request body email. We're going to get this e mail and add it right here. Then simply we're going to create it, email create this email with the function, so there is another and maybe just printed and let's print that e mail is added. That's it. I'm sorry, I forgot the quotations. We're good. Of course, after finishing from this, let's redirect to the home page, maybe. I think we're good. Redirect to this one right here where we're going to render to home. That's it for the stay connected. Let's move on to the second one. All right. Now, let's try to move between these web pages. So as we said, we have home brand category about and contact. So what I'm willing to do is that whenever I press on one of them, it will take me automatically to the associated webpage. In this case, all of these buttons do nothing for now, let's fix it. We're going to go to header. This is our header and in which we have all of the buttons right here. But of course, without the reference link to them. Let's fix this. The first thing we're going to do is to delete this hashtag and place it. Here we have the home, we're going to go to home. In this case, we have brand. I'm going to go to brands and here we have the category. We also have the about and maybe the feedback. Let's name it feedback. That's mainly, let's go back to the Apo S. So let's say, here we have the apt get for the home page. We'll go for that. Let's move on to the others. So we have a G. If we get from the About page, we're going to receive this function and render to the JS alongside the request that we got. So let me check this one. So let's refresh. And in the meantime, let's do the second one. But I think there might be an error here. We're good. So if we go back to the contact page that we name it feedback so feedback. Functions as usual, open up render and we're going to go to feedback JS. Or maybe we name it contact, I think. So yes, it's right here. It's contact JS. So we go for now, let's go back to app. And that's it mainly for the pages. Let's simply rejoin the request also. Let's go back. And let's see the error here. So now after JS run it and everything looks good. So local host. Okay. Yeah, we're good. We still have the category and brands pages. So let's do them right here and we're going to check all them together at once. To get the category, we're simply going to add category right here and function. As usual, we're going to search through all of the categories, find all all them, and then function with the error and defund categories. Open up. If there is no error, We're going to simply render to rent the render. So here, re render to the category, JS, and alongside the categories that we have, and of course, the request that we got. This is it if there is an error, we're going to simply maybe printed on the console like that, and we got the category. Let's move on to the brands right now. In this case, we're going to get the brands as the categories we have the open up search through the brands that we have find all of them and call this function as usual. So here we have the found brands. And if there is another console dot log it, otherwise, I'm going to simply render to the appropriate page, brands DGS alongside the brands that we have That is the found brands and the requests that we also got as usual. So that's it, we created the we have we already have the home page. We created about feedback category and brands. So that's it for this video and the next video, we're going to check all of these out. And of course, we're going to continue building the web pages linking between them, and that's it. See you in the next video. Okay. 5. Contact And About: Hello, and welcome back. In this video, we're going to set Mongo DB. As we said, we created all of these maybe constants, best sellers, brands, and calligories and the schemas for each and every one of them. Of course, we linked the Mongo to the Mongo DB, the local host 27017, and we need the database to be commercial DV. However, we don't really have a space or the software to use in order to visualize maybe these items, the data inside our database. To do that, we're going to go straight into Google, we're going to go to the Mongo DV and download. We have the software community servers a free and open document database, we're going to go all the way down and click on download. So A EXE file will be downloaded and then you click on it, you pass through the Wizard. It's very simple straightforward procedure. And once you're finished, this will pop up on your page. As we said, we're going to run this code again. However, now we have the database, we have the local host that we're going to run to. And then once we run it, we're going to get this database commercial DV inside our local. As we can see, we created the brands and categories, and if we press on them, we can see what the brands are or what the categories are. This is it basically for the commercial DV. Now we can go back to our commercial website. That we can see trans I think we have an error here. Let's check it. As we can see in the categories part, it's good. The, it works perfectly fine. In the contact, we have some modification that we need to do maybe in the CSS. We'll check that later. But for now, let's look into the brands DGS, let's go back here. As we can see it's brand DGS. It's not brands. Let's scroll down and fix it. I think now we're good if we go and refresh, we can get the brands right here as we get here, it works perfectly fine. Let's go back home and we're good for now. Let's see what should we start first with. As we can see inside the brands and categories, it will be a bit complicated to show the actual brands and categories, we need to have a for loop to look through all the brands and all the categories and show them in the screen. Maybe we'll start with something simple. That is the contact. We have the name, e mail, phone number, and the message. Of course, the send message button, and this will do nothing for now, but we'll make it work in a bit. So if you want to start with this one, we have the name e mail phone. This doesn't look nice, let's fix it. Instead of this one, we're going to write button with the class BTN and light, and maybe send message, if we go back, it will look nicer. Wever, let's add maybe MY two to the click refresh. As we can see, we got our send message right here and let's do the same for all of these. In this case, I'm going to add here Y one. Y one and Y one. And I think we'll go for now if we go back, we can see that we have some spaces between these. So this is it. Basically, we have the name, e mail phone number, and the tax area, and the send message pattern. So let's see. As we said, we have the information of the person and it's appropriate message. And we need to differentiate between if the user is authenticated. Okay. In this case, we have all of this information inside the user database. In this case, we just need to start the message, the new message that the user is sending. If the user is maybe it's not authenticated, he's not signed in, we will get his name, e mail number and message. In this case, we need to start them in a new user and then save this inside our database. Okay. So how do we do that? Let's start with creating the app post. And in this case, we have the contact function, and we're going to check if the request is authenticated and this is the way to do that. By the way, as for the sign in and sign up, we're going to do them at the end. We're going to maybe just talk about them right now while working with this, for example, here in the contact, we're going to use the request as authenticated. In this case, we're just checking if the if this user is signed in, and if so, we're going to just update this one user by selecting his ID and this is. So what we're doing here is that we're checking the user database, we're just checking for one user in which the ID of this user is equal to the ID that we're going to get from the contact page. As we can see here, if we go back and we're going to get the user ID. So as we said, here we have the user, and the ID method will just give us the D of the specific user. And if we find a match, then we're going to start by taking this message and adding it to the message box inside our user. As we said, we have this database, that is the user schema. We have the email password Google ID number, name orders address, let me check here. We still have just the message. We're going to add let's add it right now actually. Inside here, maybe add a message that is a string, and we're good. We can work with it right now. So that's it basically. We're just checking if the user is signed in. In this case, we're going to get this message and add it to the message box inside our user. And of course, if something happens such as an error, we're just simply going to print this errors log this error. Otherwise, we're going to consle log. Message received. That's it, basically, if the user is assigned in. Now, if this is not the case, we're going to need to create a new user and add it to the user database. A new user equal to a new user in the parentheses equally brass let's add the name by request text name. Okay. We're going to need to add the e mail, request body text e mail. And if you're wondering where I'm getting these from, if we go back to the contact, we have here the name text name. These are the inputs that we're going to get from the user, and we're going to access them as usual, using the requested buddy method. In this case, we got the name e mail, maybe the numbers or requested by the phone Finally, the message. This is the actual message that we're interested in, and this will be accessed requested by the text message. That's it. We still have to save it. New user that save, and of course, we're going to redirect the user to this route. This is the home page, and I forgot to add it right here, so I'm going to simply redirect redirect to the home page. That's it mainly. If I go back and refresh. Let's type a few things. If I send a message here, I need to add an e mail, so email at email T we good. All right. This won't work because we're just asking if the user is authenticated and we didn't really start with the authentication process yet. So we'll leave it for now and of course, we're going to come back to it later. That's it for the contact form. Let's move on maybe to something else. Let's go back to this one and check, we have home brands categories. As we set categories and brands, we'll do them later. For the a page, we don't really need anything. Maybe let's add these. We have home brands categories contact and examples. This is the e mail. Let's maybe add the references to them. For the e mail, we already have we already linked it. Just now maybe do this. Let's go back now to the footer. In this case. As we did earlier in this shaft, we're going to do the exact same thing as we did right here. So for example, in the home we'll simply render to this forward slash and the brands we're going to render to brands. Let me just check. Yeah, that's correct. Brands. Categories will be category. I think we're good. We still have the contact which is feedback check. Yeah, it's the feedback. Now, if I go back, crash the spaces on home. We're going to go back to home brands. Same thing. We're going to go to brands, categories, and that's finally check the contact us and we're good with these. So as we can see here, I just noticed that we would love to hear your feedback should be in the middle of this. So let's go back to the contact page. As we said, we have this one and maybe I'll add here a text symptom Let's go back and see how it looks now, and maybe add some lines. We still have to add maybe right here inside this new row. Yeah, I think This might be good. Let's go back refresh. I'm sorry. Let's add it also right here. Refresh. As we can see, we got it, but we just didn't notice this one. Let's now. Okay. As we can see, I think we're good for now. We would love to hear your feedback and he should enter he or she should enter the following information, and that's it. I think we're good for now for the footer, the header, the ao and conduct pages. In the next video, we're going to start with the brand page. We're going to display the brands that we have right here, as well as the categories. Of course, after that, we need to enter each brand. For example, here, if we have Johnson, We're going to explore it. Now if we press on explore, nothing will happen. But for later, we're going to press on explore and display all of the maybe brand, let's say, any brand, for example, Johnson, in this case, we're going to display all of the items that Johnson have, of course, Each item will be we can also filter by the categories. For example, For Johnson, we have maybe the body, the shampoo, and the shower gel. In this case, we're going to display all of these items and the user can also filter by category. And we're going to do the exact same thing for categories. We're going to display, for example, here, shampoo. And if the user presses on this explorer button, it would be redirected to the shampoo page where he can filter by the brands. For example, there's Johnson, there's maybe Sosk and so on and so forth. That's it mainly for this video if you didn't understand the point exactly, don't worry about it, we're going to discuss it maybe in details in the next couple of videos. See you then. Okay. 6. Brands And Categories: All right. Hello, and welcome back. In this video, we're going to display the brands and categories that we have inside the brands and categories web pages. If we go to our web page, this is the home one, and if we press on brand, we actually are going to go to the brands page. However, these are the same. So we have brand name and maybe the same picture, we change the picture here, but these are not from the database. So we have our brands inside our database, and we want to have a look at them or we want to display them right here. If we go to our Mongo DB compass, and this is our database, commercial DV, let's press on it. We actually save brands and categories. If you press on brands, We can find that each brand has the brand name, the image and the D of this brand. Let's go back to our brands, DGS. As we can see, we're displaying multiple brands. We're going to delete all of these and create just one brand where we're going to look through all of the brands and display them all at once. How do we do that? Let's actually delete all of these and start with maybe recreating or let's keep this one and delete all of the rest. So as we can see if we delete this, let's see. This is the last one, and I think we're good if we delete all of these. Let's check this is for zero, column six and zero, so we're good. Okay. So that's it, basically, this is the only thing that we need. However, we need to look through all of the brands that we get. So if you remember correctly, let's go back to the Apt get where we're going to get the brands. We look through the brands and we found all of the brands and maybe we sent them using the brands. So if we want to access all of the brands that we have, we can simply use this brand right here. Now, let's go back to the brand page. As we can see here, instead of the brand name, we need to display the actual brand. To do that, I'll simply create here. This is our cut, and this is where we're going to work. Let's just make a space right here, some lines. Let's start with creating a four loop to loop through all of the brands. This is our all of the brands but for each, we're going to create a new function that take a brand and let's open up the parentheses right here. That's basically now let's close here. And here. This is how we can implement Java Script inside the EJS file. And I'm going to simply cut this and paste it right here. Now we have our phone loop. We're going to take all of the names of the brands. So I will call the brand brand, and I think we're good. This brand stands for this one. This is the brand name. Of course, then this brand will stand for the name of the actual brand. I name it here brand. You can name it anything you want as long as it is the same inside the database and the way you access it right here. Now, whenever you want to take a name or something of value, you need to place this equal before maybe calling the function or calling the value. And whenever you want to implement a function or maybe do a for loop, you don't need to do anything for that. And I think there is a list of maybe suggestions or these things that is to use when we want to implement Java script in EGS and we'll have a look at it later. But for now, we just need these two things. That's it. We just displayed the brand. Now for the image, We're going to do the exact same thing. Now here, it is very critical to follow the exact same procedure. So we open the percentage equal and then the images and image plus the brand IMG as we said earlier, and now we're good. That's it mainly. This is how we can display our brands. Let's check if everything works. Let's Maybe. That's it. These are all of the brands that we have. Of course, we have some problems with the images. Let's check it. If we go back to here, we actually don't have the images folder or do we Yeah, so we don't have it. I'll create it right now and get back to you in a minute. All right. Go through the files, we found the images file right here. Actually, the problem was that we named the images here Johnson PG and JPG, and of course, bad we didn't really name them as here. So let's fix this actually. Let's name for example, this one as Johnson. Maybe the second one as bodic and the final one as D. So here, it's not capital, so let's just fix this and we'll go for now. Let's maybe do this. Actually, let me just create a new image. Let's copy this and base it right here. In this one, we're going to name it teeth. They are the same, but we just changed them for the sake of this example. Now if we go back and let's see the problem that we faced is that each time we save this, the app is actually adding all of these by just simply keeping this uncommented. We have insert many, we're inserting three categories and three brands, each time we save this one. Since not just take this whenever you save, it will re run again. So one way to fix this is to drop all of the database and then run the code again, to drop it just type the name of this database. Now, if you go back here and let's run node Man again. NodeJS and if we go back and hit refresh here, we're going to get our database which contains brands and categories. However, this time, we just have one, two, three, four, and five brands, and these following categories. That's it mainly, but before running it. Again, we need to make sure that these are combed. Okay. So that's it basically now if we go back to our commercial website. As we can see, we got Johnson Colgate and Vaseline as we want. This is the first part of our code. So we just looked through all of the brands that we have and implemented them using a simple for loop. As we can see, this code is very small. Just a couple of lines and we'll simply just showing the brand name and the image right here. Let's do the exact same thing for the category before moving on to the search and how we can search through these brands and categories. Let's delete the further contact header and home. Go to category, and we're going to do the exact same thing as we did before. Let's delete all of this. Let's check this would end here, delete all of them. Okay. And that's it. We're going to start from here and we're going to look through the categories that we have. But first, let's check all of the database, what do we have? Let's go back to the categories. As we can see, we have the category and the image that is for the specific category. Okay. Now, let's go back and let's check in the AJ how we are returning or how we're sending the categories from the apto J. If we go and let's check this is our apt get category. We're going to search through the category schema or the category database, and we're going to send all of the categories that we have in the form of categories with double. That's it may need, let's go back. We have all of the information that we need to look through this. We're going to start by getting the categories and not for each. In this case, we're going to create the function that will get us each category one by one, then open up nk braces, close this function here and there. We're goet's cut this out and paste it right here. Now we have all of the categories. We can show them by simply accessing the name as we did with the brand, we call the category that we created right here, and we check in the database. What is the name of this? It's a category also, D category. And we're good. This is how we can access it. As for the images, we're going to do the same exact thing. So equal to now open the parentheses, open the double quotations, I'm sorry. Images plus the category IMG, as we said earlier. Okay. So that's it mainly. Let's just check for the images. So they're the same. We don't have a problem. So let's go back and hit refresh right here. And let's go to category. Okay. In this case, we should have a list of all the categories. Yes, we have the shampoo, body care and teeth, and of course, followed by the explorer button, and this will do nothing for now. We need to adjust it, as well as the search bar right here. So let's start with the search bar right here. If we go back and check this is our search bar. We don't have the action of the form just yet. So what do we do with this? So first of all, we'll name it category and the action or the method will be post as usual. So method equal to post. And we'll go for now, we have the button with the type of submit. And whenever we press on this, it will go to the category right here. So going back to our app, here we're going to post this category, and we're going to search through all of the available categories that we have that matches the one that the user is searching for. So to do that, we're going to start with app post category. And in this case, we're going to create the function, which is crass as usual and start with getting the category that the user is searching for, and we can access it using request body. If we go back to the category, we can find that this one has a name, which is a brand name. Let's change it actually to maybe category name. I think it will be logical category name here. If we go back, we can access this by simply accessing request body category name. And then of course, if the category of length is greater than one, we need to maybe make it upper case because we're starting the categories in an upper case. Shampoo status with S, which is an upper case. Teeth, we're going to fix all of these. But for now, let's assume that all of these categories have uppercase letter or the first letter is upper case. In this case, if the length is greater than one, we're going to modify it by calling the category the first character at the category, so we can access it using chart at zero. And we're going to make it to upper case. This is the function that we're going to use, and then we're going to slice this category, and we're going to take all of the rest of this category. For example, if we have shampoo, let's say, We have shampoo like this. What we're going to do is that or for example, with this. What we're going to do is we're going to take this S right here, dot at zero. It will be a capital S plus H POOhich makes shampoo with capital S. That's it mainly for this video. The next one, we're going to continue this method, and of course, for the brand also. See you then. 7. Brands And Categories 2: Hello, and welcome back to a brand new video and this one, we're going to continue building this post method. Then we're going to do the same exact thing for the brands also. First of all, let's remove D continue as we said, here we're going to maybe just do uppercase for the first character, and we're going to assume that all of the characters are an uppercase inside our database. What we're going to do now is to search through our database by simply finding all of the categories. I have a typo category and that matches this one by the name. As we said, we took the name from the user, and if we go back to the categories, we can find that the category name is called category also. How do you find it, we simply type category and I'm going to search for category. In this case, we're going to find it. And of course, if found is equal to null, then we haven't find anything. So we're going to simply create just render to the home page. So rest to render, in this case, the home page is the category page with the categories As such, we don't have anything, and the request is equal to request as usual. If we actually found something, we're going to store it in something called categories, for example, we're going to consult the log it just to show it on the screen, and of course, we're going to render to the category with the following a parameter. Categories as we said, which will be the category that we just found and the request as usual. And we're good for now. This is the main function that we're going to use. We're just looking through the categories that we have and searching for something or a category that matches this one, and here we have a typo also. And if we find something, we're going to just render to the category page alongside this category that we found. If not, we're going to render to the category page with an empty string. That's it, mainly if we go back and hit refresh, let's search through the categories. Let's first try shampoo. So as we can see, we found Champ, we always forgot to delete this one. Every time I'm saving, I'm inserting many categories and many brands. Let's go ahead and delete and drop these before continuing drop this collection, and brand drop this collection also, and in this case, I'm going to maybe run this one more time. Now if I go back here, Let's modify something, for example, like this. As we can see, it's launching again, and if I go and refresh here, we have our brands and categories. Let's go back now and just commit these out. As we can see now, if I had to refresh, and we're going to find just one category that is the shampoo. Now, if I go back to the home page, let's go to categories again. We have shampoo alt and let's type something that is not in our categories search, and we'll have nothing to display in this case. We can maybe do something with this later, maybe keep it for the project that you're going to do. In this case, instead of displaying an empty space right here, maybe say something like this category isn't available, try something else or maybe show all of the categories with a message that this specific category is not available at this time, or you have a typo in your category naming. That's it for the categories, let's move on to the brands. As we can see, we also have three brands, and we want to make this code as before. If we search for some brand right here, it should show up as the category. Let's go back. Okay. As we can see, we need to create the same exact function for the category. But post, we're going to get brands. And in this case, function t cress, as usual, open up, and we're going to let brand equal to request body brand name. I'm going to check it now. So if you go to brand. As we can see we have here the brand name. We're going to access it using this one. However, the form here, we're going to need brands and the method will be always post. We have the type submit of this pattern, so we're good Now, what we're going to do is that we're going to take this brand and do the exact same thing with the naming. We're going to slice maybe the slicing depart from the index one to the end and making the first element or the first character as uppercase. We're going to check if brand to length is greater than one. We're going to simply modify it as before, so add zero and do two uppercase. In this case, we're going to add all of this at the end, we're going to search through the brands, we have the brand database. We're going to find all of the brands that matches the name of this one, of course, we have the function that do for us the work. I found not equal to null, we're going to show these brands. As we said, in this case, if brand or found not equal. Tal, we're going to take these and render to the brands of JS. So let's do that. Let's name it brands equal to found. And in this case, I'm going to console dot log these brands that we found before rendering to the brands page. So brands dot JS. In this case, alongside the brands that we got and the request that we also got from the user. In this case and if something else happened, if there is an error or we didn't find anything, we're just going to render to Brands dot JS alongside an empty y. So that's it, maybe I now, let's go back it reflash right here. And let's check. So for example, if serves for Johnson right here. Johnson search. So we have another fail to look up views brand DGS. I'm sorry, let's check it right here. What are we doing actually? We are maybe. So that we'll do the job. Set of brands. We're going to type of brand instead of brands. This is defile name. Now if we go back, let's say refresh, check if everything is working right here, so we're good. Let's type Johnson search. As we can see, we found what we're looking for. This is the Johnson and if I type anything. We're going to get nothing. This is an empty space, saying that we don't have any brand that is with this name. That's it basically for this video. In this video, we created the search button and the displaying option of these brands and categories. The next one, we're going to display maybe the items that we have inside this Johnson. We're going to create the route for the pler button. Whenever the user presses on this explore. He should also see all of the items that are related to this Johnson product or this Johnson brand. Of course, we're going to do the same exact thing for the categories. For example, if the user presses on Shampoo, he should also see maybe all of the items that are related to the shampoo from all the different brands that we have. That's it mainly with that being said, this is the end of this video, see you in the next one. 8. Products: Hello, and we'll come back in this video, we're going to do the Explorer button. And we're going to show all of the available brands or all of the available items inside this category. Let's go back to the categories here. As we can see, we have here this button with the type submitted. The form is empty for now, let's fix it. I name it products and method should always be post these kind of forms. In this case, we're going to go to the abs and we're going to create this method right here. Okay. So let's start with it here. In this case, we're going to start with products, and of course, the function, open up this function and start with taking the category that we have. As we can see, the category will be taken from this one right here. We have the name. And we can also store this one actually inside an input to keep it as the category. In this case, I'm going to store it right here. So the input will be of type in, and I'm going to set the value of this category name right here. Let's just maybe do the name, it will be category and the value will be the exact thing that we're going to display right here. In this case, it will be category category. All right. So that's it basically. Now if I go back to the app, I can access the category name by simply typing request dot body category. In this case, I'm going to have the category boy category, and I can search through the categories that we have and find the appropriate one to display it. So in this case, what we're going to do is that we want to display all of the items that we have that matches this specific category. So how do you do that? We are going to simply trying to search. So item, find all of the category that matches this one. And to be sure about this, we're going to go to the database. So found category. All right. So if we go back to the database, I'm sorry to the schema. And let's check inside these items. This is the scheme of the item. We have title description, and we have the category right here. Of course, we're going to add a few items, and we're going to look through them now. But for now, let's finish this category, and then we're going to maybe do it. So for now, we're going to open up this function right here. And let's work with it. So if we find something, if there is no error, we're going to check if found categories. Or maybe found items is a bit more logical, items, Okay. And in this case, found items is not equal to null. That means that we found something and we can render to the page alongside these items. So render, and we're going to render to the products page that we created earlier, and it is right here. Of course, alongside the items that we have so the items would be the found items, and the request will be just a simple request as. That's it mainly, we're going to simply search through the items for this specific category and return all of the items that matches this category. That's it basically. Let's now go and create some items and add them to the database to be able to display them in the products to the JS file. All right. So let's go up. And in this case, we're going to create some items. So let's copy the schema to have it in front of us right here. I think here is good. And let's just comment it out. In this case, I'm going to create item one, which will be new and this will be item. And up and up the braces with the title would be, for example, maybe baby Johnson and description sorry, I need to put them in quotations. So this is baby Johnson. And of course, these will also be in cations. Now, as for the image URL, MR L will be also a string. This case will be images and Johnson JPG. Then we have the brand, and it's obvious. It's Johnson for now. The category will be maybe shampoo. And size maybe 100 milli. And price, for example, it's $8 and deep quantity will be, for example, maybe 50 for now. I found the mistake here. I need to fix it, so let's scroll up. And here we have one. So that's it basically this is our first item. Let's copy and paste it a couple more times and change a few things. All right. So I think we're good. We have item two, and this one. Maybe we're going to have something like Sam. And let's simply change this one to body. And of course, the category anti branch should be dove and shampoo also. In this case, item three, maybe will be body. Let's say I don't know. Johnson, for example, depends is by body Johnson, I'm sorry, and the category is body cap. Now, in this case, we have a couple more items. Let's just change these. And I think we're good. We just want to insert them inside our item database. And to do that, we simply insert many we're going to insert item, item two, item, item four, and item five. With that being said, we simply want to check for an error. If there is an error, we're going to print it out. If not, we're just going to print all of the items. Item one, item two, item three, item four and item five. I think we're good. Now, whenever we saved this, we actually saved it, and these are the items that we created. Let's go back and comment this out and If we go back and had refresh right here, we're going to find this items database that contains five items for now. Of course, now we're going to implement this inside our products to DGS. Now we have the database. We have all of the information that we need. We have all of the items that we want and we can access them via this database. What we're actually doing is that we are getting these products. And sending them to the products page, which is this one right here. What we're going to do now is to go to the products, GS page and modify it in order to show these brands or show these items from a specific brand. So scrolling down, we can see that we have maybe two, so we have this one products. We have the images, and we also have the item titled. Maybe let's visualize it at first. Instead of sending these for now, let's delete them. I' going to just rerender to the products page for now. So if I press and explore, I'm going to render to this product page where I have the items and they are the same for now. So what we're going to do is that we're going to this one, delete the two of these. As we can see, we have a column. Let's delete all of these. We have quite a few. And let's check here. From here, all the way up till the second one. So we're going to leave one of them, and we're going to work with it. This is what we're going to work with. We have columns, and we're going to modify the price, the brand name, the category name, the size, the images, all of these, and of course, the title. Now, let's go back to the apps and take these items with us. To access these items, we're just going to write items here. So inside this one after creating the products, we're going to look through all of the items that we have. Items for each going to create this function with the item and up, and of, we're going to add these for the Java script embedded in ML or EJS Okay. And of course, we're going to take all of these items and print them out. So how do you do that? I'm going to simply take this one and paste it all the way down after this one right here. Now we can access this item. For example, if I want the item title here, I can simply write item that title, and I think we're good. Now if I go back here and hit refresh, I'm going to get I'm sorry, I didn't choose any item for now, so 5% category, plus on explore right now. Let's see what do we have. As we can see the title is not displayed, and I think this is because here we forgot the enter. Now if we go back and refresh, we're going to get baby Johnson, Campo, Baby Johnson, Baby Johnson. These are all of the items that belong to this specific category which is Champ. In this case, we're going to change the price, brand name, category, and size. Let's go back to our code, and let's change right here. By accessing item price, and here the brand will be as usual, item brand category also. So item category, Finally, this one, which is the size, item that size. I think we're good. We still have the image and we'll do it in a minute. Now if I go back and it fresh, we changed everything. We have the brand category size, all of these. Let's go back now. Of course, as for the image URL, we named it IMR L. We just access it right here, as we can see, we got everything that we want as want. That's it basically for the categories, we're going to do the exact same thing for the brands in the next video. See you then. Okay. 9. Home Brands: Hello, and welcome back. In the last video, we created the link between the category and the products page. For example, if the user presses on this one, it will take to all of the products or the items that are in this specific category. Now, we don't have any items in the ic. But for the shampoo, we actually have four items as we can see here. So we have these four and we displayed them using four loop by taking all the items from the aptoS right here. So we're simply taking all of the items that matches the specific category and simply taking them with the render to the product page, and of course, displaying them as we said earlier, using a four loop. Now, what we're going to do is that we're going to implement the same procedure for the category DGS. I'm sorry for the BrandG let's suppose that we are in the brand DGS page? So it's right here. And we're going to do the same thing for this, but we're going to check the brands. We're going to render to the products, DGS web page, however, with brands instead of categories. This is what we're going to do. What I'm thinking is to have as before. For example here, we went to let's check. Yeah. For example, the category to D JS, this form took us to the products with the method of post. What I'm thinking is to create a separate method for this kind of post, for example, instead of products only, let's name it products maybe brands in this case, and let's open up a function, g. Open up. Now, what we're going to do is that we're going to take the brand from request body, brand, and we're going to console log it right here. And of course, we're going to continue with the search in the items. So item find going to find the brand that is this specific brand up and up error and found items. In this case, if there is no error, we're going to check found items not equal to null, then we found some items in this brand, and we're going to print them before rendering to the product page with the items that are defoed items alongside the request that we have. Yeah. This is it. Basically, let's go to the brand or DGS here inside this form, we're going to actually go to products, brands, and the method should be post. That's it. I think we're good. Now if we go back and that's refresh. So don't worry about this it won't. It's just because we don't have the products yet. We don't have the products in here or the items to go to this products page. Now we're good we're at the brand, and if I press on explore, we're going to go to the products page. However, we don't have any items that falls into the category or the brand Johnson. In this case, let's open up a compress. Mongo DB compass and let's check our database. If there's an item that has Shampoo as a brand. I'm sorry, Johnson as a brand. In this case, if we want to connect to the database, we're going to scroll all the way up and take this as a link and open up our database. And as we can see, we have the items right here. We also have the shampoo. All right. So there's no problem here. The problem is that what we're getting is undefined and I'm guessing is because we forgot to input the brand. So maybe let's add it right here. And this will be of name. Brand and in this case, we're going to take brand D brand. By this way, we got the input which is hidden with the name brand, so we can access it using requested body brand with the value of the brand name from this brand right here. I think we're good for now if we go back and refresh, let's check for Johnson. And we'll wait a bit, if there is no error. And I think we're we're good. As we can see, we got all of the items that has this specific brand, which is Johnson. So we have four items from Johnson and three shampoo and one Bo we're good for now. This is what we are aiming to do. This is what we did for the brands also, as well as the categories. That's it basically for this step, let's move on to the next one. So let's see if we go back home, we can find that brands, best sellers and categories don't work well, so we need to get these from the database that we have and show them inside our home page. So going back to the home to D JS. That's it. We can start by the brands right here. This is our brands, check out our brands and here. We need to show all of the brands that we have or maybe some of them. And to do that. Let's go back to here as we can see inside the forward slash, which will render us to the home page. We are actually taking all of the brands, best sellers, and categories and rendering them to the home page. Here we have categories, brands, and best. In this case, we can access them directly in the home to GS webpage. In this case, I'm going to start with creating maybe right here after the feature. So what I'm thinking of doing is instead of impending this whole sa, I'm thinking of something a little bit simpler. Let's start with it right here. First of all, we're going to contain maybe the container, and inside this container, we're going to have the row and column middle 12 with alongside tax center. Up and up this one, and let's start with the heading, so it will be H two with the class of heading section. B three, and maybe Pb four. I think we're good. Let's without brands and the paragraph will be of class lead B five. In this case, we're going to write check out our various brands. Now if we go back and head to fresh, We can see that we've got brands, check out our various brands. Now we can create our actual carousel. In this case, I'm going to simply create it right here with column middle 12. In this case, it will be featured Carousel and old carrousel as before. Of course, now we can start with showing our brands, so we're going to create a four loops. We said that we have brands and from the brands. We're going to take for each and of course, we're going to pate the function with brand up and up this function. And of course, closing it at the end. That's it, basically, now we can start with creating our item. This is the class item. We're going to create a class called work. In this case, what I'm going to do is to create a form with an action of products or something like that, we're going to discuss it later, and the method will be post. In this case, we're going to create our button, which has a type Of submit, and of course, the class should be PT N as well. Now, after tating this button, we're going to create the division that is the card. So we're going to have the text centered in the middle. And of course, we're going to maybe add some style. For example, the width, I'll take it as 18 Rm. Now we can have our image with the source file as follows. For example, here we have the actual image which is in the images folder, plus the brand image as well. And in this case, We're going to take this image, and we're going to add the card body. Of course. This card body would be the actual brand name. So in this case, I'll make it H six, so this will be card text. And this will contain a brand brand and of course. Okay. Going to need to add this to make it readable. I think this is it basically. This is what we should be doing. If I go back now and hit refresh, we're going to get this image. We're going to get Johnson, Cogate and Basin. As we can see, we've got them all at the same location. Let's fix it. What I'm thinking is right here inside this one. I'm going to do is to take all of this and maybe let's create here. A row and copy all of this into the row. Of course, we're going to create a column of four maybe or let's have it like this. Here, column of four. In this case, I'm going to copy all of this one more time. Base it here and let's check it right now. So what do we have here? All right. I think I found out what the buck is. It's that we're creating each time a new row, each time we're entering this four loop. Now, I think if I go back and hit refresh. Yeah, we're good for now. We still have some modification to make. So for example, we can make the image size to be fixed. So we don't have something like this. This will be greater than the other images, and this will be not so good looking as well. So with that being said, I think this is the end of this video. And the next video, we're going to do the exact same thing for maybe for the categories and the best sellers, and of course, we're going to add the link to this one. So for example, if the user presses on this, So here we have what do we have here, we have Johnson. So if we press on Johnson, you should redirect him to the products that are related to Johnson and of course, Colgate and Basin also. We're going to do the exact same thing for the actual categories as well. So that being said, this is the end of this video, see you in the next one. Okay. 10. Best Seller Home: Hello and welcome back. In this video, we're going to continue our home page, and of course, we're going to start with the best seller. The last time we finished both brands and categories. We still have the best seller page, and let's go ahead and start with it. Here, we created the first container that contains the brands and here we have the categories. I'm going to place the best sellers in the middle of this. To do that, let's start with building the container. And I'm going to create the first class. That is the I'm sorry, the first division, where we're going to have row text muted and text center. And in this case, I'm going to have another column with margin of four on all places of dimensions. In this case, let's start by creating the heading. The class will be display or Mug and bottom four, and I'm going to call it best sellers. I'm going to follow this one by a new division. And I'm going to make the underline dark and all of these are boot strap classes, and you can go and check them out on the official website. But for now, we're going to use them as here. I'm going to create an underline then followed by a paragraph with the class lead, saying that check out some of our best sellers items. Now if we go back, let's sit refresh. Okay. And as we can see, we got the best sellers. Check out some of the best sellers items. That's it basically for the heading paragraph. Now, let's go back and start with another row, and in this case, we're going to need to create a row with a line items text and Maxto. Now we can look through our best sellers, and we're going to do that by simply creating a full loop. Best for each function, let's name it best seller. Of course, we're going to open this up. And close it right here. I took it as best. Let's go to the ApogS and check, what are we doing with the home page? We're going to take the brands, best sellers, and categories and we name it as best right here. We're going to get our best sellers as this one best. We can access them by simply creating this four loop and access them item per item. That's basically. Now we just need to create our columns. Column large four and of course, maybe make it ten if the user is using something smaller than a desktop screen. In this case, I'm going to add x auto, and I think we're good. We can start with creating the card. I'm going to name it card one for later, maybe for the CSS, and my four with x auto. Now, we can start by creating the image. The source of this image will be just as we said, let's go and check. For now, we didn't create any images or any best sellers. We're going to add them later. But for now, we'll assume that they follow the same format as the MMR L right here. We're going to have dot dot slash images the name of the product. So I'm going to access it using just the best seller, and going back here. Let's see in our scheme of the best seller, what is the name of this one? In the best seller, we have the name, we have the image, so we can access it using the image. In this case, what we're going to do is that we're going to create best seller image, and I think we're good. We can now continue by creating the heading in the card body. We're going to have the heading that is heading five with the class of text upper case. Maybe make it bold font white bold, margin pum three card list item. Inside this one, I'm going to simply display the name. So best seller, the name and to make sure I'm going to go back and see, we named that name. This is how we can access the name. Now, we still have to create the form to submit our buttons, for example, if the user presses on this specific best seller, it should redirect him to this specific page. In order to do so, we're going to just get here after the heading, I'm going to create a form and this form will be redirect to a specific thing. I'm going to do it later. But for now, the method, as usual, will be post. In this form, I'm going to create a bottom with type submit class BTN, padding two text upper case and front weight gold alongside some other price card buttons. This is for the CSS. We're going to use it later. But for now BTN warning for making the text yellow and text light. So BTN warning, I'm sorry, for making the button yellow and the text light for making the text light. And I'm going to simply write the detail. Okay. I think we're good for now, we have our form, we have our button, and all seems good. If I go back and hit refresh. Yeah, I nothing will happen since we don't have the best seller right here. What we're trying to do is that we're going to home and we're trying to access the best which is not available because we don't have any best sellers in our database. Let's fix this. We actually created some best sellers right here, but we didn't have the chance to add them to our schema. Let's go back all the way down. In this case, what we're going to do is to create best insert Many I remember B one, B two, B three. Of course, we're going to create the function with the error. So if there is an error, log it out, otherwise, just log the best sets. And we get now, if I go back, we can see that we created these we created name Johnson, Cgate hydrant, and the following ID. However, I think we missed a few things, for example, we missed the image. Yeah. What we did here is that we created the best seller with the name IMG instead of image. One way to fix this is to simply just delete this one. It will be IMG. Of course, we need to go back to our database, refresh it, and drop all of this best seller right here. Drop this collection, since we don't need these without their images. Now if we go back and save this one, let's refresh. Yeah. All right. So doing so. If we go back to here and it refers, we're going to find the best seller database. So I think we should wait a bit. But for now, we can see that we got it right here. We have the brands, the categories and the image. And in this case. If we go back now, let's As we can see, we got the best sellers, check out some of the best sellers. We have the Johnson Colgate and the other I think we have a problem with the mateRL and this is a typo. But the general idea is that we got all of our products, all of our items and the best sellers in the brands and in the categories. That's it mainly. This is how we can create the best seller page or best seller section. And of course, what we're going to do now is that we're going to make this button. Now if we press on this, it will take us to an error page, however, We need to take us to our actual product page where we're going to see the specific product. This is an item which has specific details, it has specific asizes and so on. If the user wants to purchase this item, he should also see all the details and he can do that by simply clicking on CDs. Now, what we're going to do is to do the same thing for the brands and categories. Now if you press on brands, it will take us to all of the items that are in the specific brands. As we can see if we press here, we have all of the items. We have some details here, but we don't have the description, we don't have the quantity, and of course, we can't order from here. What we're going to do also is if we press on this, should also take us to the product description page. And in this case, we already created here right here, we have products and we have product. This page should be displayed whenever we press on something like that. It's either in the brands or categories or even best sellers, should redirect us to this specific page that is the product of JS and show all of the details of this specific product that the user wants. Because that's it basically for this video. I hope you liked it. And the next one, we're going to do what we talked about now and see you then. Okay. 11. Product Page: Hello, and we'll come back in this video, we're going to continue the building of this products. So here we have the products, and as we said, we want to whenever we press on any specific product, we want to be rendered to the product page, which is this one mainly. As we said, we also want to do that if we are either on brand or category. If we're here in category, we pressed on shampoo, and we being granted to the product page. We have here now some specific products. I want to if I click on this specific product, I want to be rendered to the details of these of this specific product and as well as the best seller section. So if I'm here in the best seller and I want to see the details of this product, I should also be rendered to this specific page, which is the product of GS. So how do we do that? Now, going back to the Apo JS, we can see that in the best seller schema, we created something that is called the item, which mainly is the type, and this is actually the ID of this item. Reference item, and of course, we have here the ID. If we want to access this item, we can access it either by ID or by name or by image, but it doesn't make sense to access it by image, and also it doesn't make sense to access it by name, maybe we have more than product that has the same name, maybe different sizes or different quantities and so on and so forth. So that said, we can access this specific item via object ID. This is what we're going to do. Now going back to the home the DGS, and I said, I leave this empty for now. Now's the time to place something right here, where we're going to go. We are going to go to the products. However, we're going to add something, and this is a custom that Javascript allows us to do and do that. We're going to simply write the products. We're going to render two products. However, we're not rendering to only products, we're rendering to products plus the best seller item. And this item will allow us to take the ID and place it right here. So assume that we have this D here. Now, whenever we're rendering, we're rendering each time to a specific or different action. So maybe we're rendering to the first item, so we're going to have products. We're going to have something like that. Products. Assuming that the first ID is one. So products that one, the second time, if we're accessing the second product, maybe products are two, and so on and so forth. So the idea here is that it's not it's not the same each time we're rendering to a product. In this case, what we're going to do is that we're going to use something that is called custom. So with that being said, we need now to go back to the AppGS and create our function right here. So how do you do it? Simply, what we're going to do is to create the app get product, and of course, in this case, what we're going to get is products plus the D of this product. So how do you do that? Let's go back scroll all the way down. Maybe let's add it here after the product. Here we have the products right here. Maybe let's add it after products parent also. Here. What we're going to do is to get this products and we also know that this is a custom. What we're going to do is to place a c and type custom. In this case, we're going to create the function. As well. What we're going to do is to create the custom, which is basically just getting this custom from here. How do we access it? It's actually pretty easy with just type requests, custom. This is how we can get the ID from here and access it right here. That's basically now we can search through the items and find the specific item with this specific ID. Now, if we go back all the way up, we can see that what we're starting here is the Mongoose schema that types that object ID. So here we have the idea of this specific object, and it's not from the best seller. It's not from this sem, it's from the item. What we're doing actually is that we're going to the item. Okay. And if we go to the database, we can find it right here actually. So we have the item. What we're doing actually is that we're taking this ID from here and placing it inside our schema as a form of item. Okay. That's it basically. Now, going back to the products, we can search through the item a database, find by ID. We're going to find by custom function error and found items up and up. If there is no error, we're going to check if we have some found items, we're going to redirect. Maybe let's log them at first, items found. I'm sorry. And in this case, we're going to simply display the found items. If this is not the case, of course, we're going to display or render to the home page. So rest that direct to the home page. Now, if we find the items, we just want to create, take the brand of these items So let's first just display these found items. Let's just take these and take them to the product page. In this case, what we're going to do is to simply render to product alongside the request and the items. Which would be found items. Maybe let's name it found items or item. In this case, I think we're good for now, if we found something, we're going to render to the product page alongside these found items. Now what we're going to do is that we're going to the product page and then display these found items as a form or maybe as the details of these found items. Here we have just one item. However, we might have more than one, we'll just take the first one, so this is why I'm placing it as item. Now, if we go back and hit refresh, and I scroll all the way down to the best seller press. Here we have products undefined. Let's go back and let's see. Here we have products instead of product. Now if I go back. Now the thing that we're facing here is that I forgot to stop inserting the best sellers. Let's go ahead and drop all of the best seller database from here. And just save this one more time. So let's drop it now. What I'm going to do is that I'm going to maybe just turn on noto again. We're going to store them, and then save this one. Right now we're going to have our best database right here and it contains only three products that we're going to show. That's it, basically, it's refresh. Now we're going to do the exact same thing for all of the products. It's either brands or categories. Either way, we're going to be rendered or redirected to the products JS and we're going to continue from there. Here we are in the products of JS. In this case, what we're going to do is that we're going to create the each strap here instead of going to nowhere, we're going to fix this by simply adding the location or adding the link to the specific page. In this case, what we're going to do is that we're trying to type products, which is basically the products page. Let me just add the quotations, products and then open up here we have the items. I can add item Do ID. In this case, I can access the idea of the specific item. Of course, this is what we're doing. If I go back, let's try it out. We might face some errors, but we can see along the journey. If I go back fresh, let's go to category, for example, if I press on the specific shampoo, for example, I will be rendered this page if I press on this one. All right. So I'm running to the home page. I'm assuming that we have an error since what we said right here in the app to JS, if we face some error inside this app get the products, what we're going to do is to redirect it to be redirected to the home page. We didn't face an error, we just didn't find any item that has this specific ID. What we're going to do is that we're going to divide these into three categories. The one for the best seller, the one for the brands, and the one for the categories. So I just created the one for the brand. So I name it product of brand. So what we're going to do is to get this one, get the body name that we are going to create and then search through the items inside the item database. Search there's a title that is exactly as the custom. And in this case, if there's no error and we have found some items, we're just going to display them and, of course, render to the product alongside the item and the request that we got. Okay. So that's it mainly this is what we're doing, and we're going to do the exact same thing for the product of categories in this case, right? So let's do it right here. What we're going to do is that we're going to get to get product category. Here, I'm sorry, I have a typo, so this is and we get. Now inside this one, what we're going to do is to create the function. Acres open up this one constant custom with request that by name and log it here just to visualize it and then search through the items. Find the one that is matching this in terms of title, and of course, if we have an error, we need to display it and if not, we're going to find something. So if there's no error, we do something else display this error. And of course, we're going to check if we have found items and else just redirect to the home page. If we find some items, we're just simply to display them so items. Pound plus items. Of course, we're going to render to the product page alongside the request that we got and the item that we found. That's it, basically. This is how we can implement these in an easy way. We're just going to get this one and simply work our way through it. Okay. So that's it mainly in the next video, we're going to show or we're going to visualize these in action, and of course, we're going to continue by building. We still have the admin page, we still have the place orders. We need to add all of the user's information into our database, and of course, we're going to continue to placing his order, storing his order in our database, and of course, displaying them in the admin page as well as the user's order page. With that being said, this is the end of this video. See you in the next one. Okay. 12. Cart: Hello, and welcome back. In this video, we're going to have a look at the product page. As we said, we just implemented earlier the best seller page where we can click on C details, and it will redirect us to the product page. And this will be the item titled, the description, price, brand category size, and how many pieces the user wants. Then he can also add it to his card. In this example, what we're going to do, is that we're going to change these titles, the description, and prices. These are static, we want to make them dynamic. I'm sorry, we want to make them dynamic and they can be changed for each and every product. In this case, let's go back to the product page. And in this product page. Now, remember earlier, we sent these in here product of best and we rendered them using the item. So what we're going to do is that we're going to go to product page. And as we can see, we have the item title, some description price, so we want to change these. So how do you change them? It's pretty straightforward. We can call item title in this case. Okay. And here we need to call item D description, since we're describing this item, and we have it in our database. So as we can see, let's just delete these and we're good. So item description. Let me make sure inside the database, we can find that we have the description. Now we can display the img R L brand and category. As for the brand, let's display it right here. So as we said, item brand. Now for the category, the same thing. So item category as for the size, we can place it right here. This is our size, maybe add it right here, item size. Then we have how many pieces. This is not for us. This is for the user. We have the add to cut button. We don't really need to do anything right here. However, we need to change the image, and that is item image R L like this. I think we're good now if we go back and hit refresh, we're going to get the price. I'm sorry, we need to go back here. I think that the problem is that we're showing or we're taking the first or any title in the item. Remember, when we are searching for the item, we're searching for all the items that have the same title. In this case, we're returning an array of items and we just want the first item, so to deal with that, we'll simply use item at zero. This item is actually a list of items. We're going to need just the first one, to deal with that, we're simply going to write at zero. Right here, and we forgot the item price, and of course, at zero also, we forgot the equal, and we're going to do the same thing for this. I think we're good, we still have the size and the image. That's it for the image. We now if we go back and hit refresh, we're going to get something like that. We have our image, our title description price brand category and size alongside the quantity that the user wants. Here he presses on the quantity, and then he can add it to his card. In this case, what we did actually is that we link between the com here, we have the best seller and we link between this product and its description. The product page now is linked to the homepage and by simply creating this function that takes the item and search for it in the item database, and then get back to the product page and display all of the descriptions or all of the information of the specific item. That's it, basically, this is how we can link between them. Now what we're going to do is that we're going to work with this add to card. Now we're pressing on this add to card and nothing is happening. We're going to make it work. We're going to add this to the user's card, and of course, we're going to render him back, maybe to the home page or the products page. We'll see. Let's go back to code here. We have the button right here, and this button is of type submit and we have our form. So now the action of this form is to shipping, so we're going to have a shipping function, and method should be post as usual. Now, going back to the apo JS, we're going to create a new function, which is basically to link between the product and the shipping page. So let's do that right here and I'm going to first create the function and then we'll discuss it. Let's get into it. All right. First of all, app, but post shipping and create the functions as usual, up and up the parentheses. And of course, what we're going to do is that we're going to create a date for this function or whenever the user is entering or adding to his card. I name it created a and it will be a new date, and I'm going to make it to local string. In this case, we're going to start by creating the box. So request by the box. And in this case, the box is actually here. We have this input, which is the box, and in this box, we're going to have the quantity that the user wants. I'm going to add some inputs that are hidden in order to have them with us in the aptoS file. In this case, I'm going to have the name title. The value will be as the name indicate the title of this product, and I'm going to have a couple more, so we're going to have the name image and the value will be equal to item.rl, and then we're going to have finally the last input, which is also hidden, and this will be the price of value it will be equal to item price, and I think we're still have here to modify this one and we get. That's it, mainly. We have now our inputs alongside the quantity that the user wants, we can go ahead and work with the apto JS function here. First of all, we're going to get the box, we're going to get the size or requested by size. The requested by age, the title as usual, and the price as usual. Now, I'm not sure if we added the size. Let's go ahead to the product and let's add it right here. We have the input and then name size and value will be item that size. That's it, basically. Let's go back. Now we're ready to work with this function. What we're going to do at first is to find the user that is logging in and of course, we're going to add this to his card. So what we're doing at first is to check if the user is locked in. How do you do that? We are going to create the length. For example, let me create a variable at first, so this variable will be false, this will represent if the user is locked in or not. And if they request user that orders length is equal to zero, we're going to do something. What we're going to do is to take this Variable S and make it true. This S represent that the user is ordering for the first time and we want to display or take his information in order to have a better idea of his location, his phone number, and so on and so forth. S will be true in this case, and we're going to check if the user and length is greater than zero, in this case, checked will be this orders checked will be the last order that the order and check out. What we're doing mainly here is that we're asking checking if the user has any order before, and in this case, if he has some orders, what we're going to do is to take the check out of the last order. Now, remember, check out is a variable that is true if the user has checked out and falls if not. And in this case, we're going to take it and we're going to start by our code here according to these two. If one of them is true, that means that we want to add these into our database. How do you do that to check if S is true or if checked is true. In this case, what we're going to do is to find by ID and update. This is a method to find any item or any user in this case, which has the specific ID and update the following information. The ID will be request user ID, and then we're going to open up this, and this is how we can change, we write the dollar sign, push and we can start with updating. What we're going to update is the orders of this specific user. We're going to open up this and we're going to update each So in this case, we're going to open the array and specific items. So what we're going to do is to update the specific items, and in this case, I'm going to update the image title price quantity and size. As we said, image will be a will be price will be price and quantity will be the box that we got. Okay. And finally, this size will be the size that we got also. Now, if both of these aren't satisfied, if one of them is satisfied, we find we can work with it, in the case of both of them aren't satisfied, we need to do something else. In this case, let's start by finding the user, find ID and update request user ID, and we're going to use the same method, which is push and this is how we push or update, we're going to find the orders that are at last, and the items in this case, we're going to update the image, the title and the price, the quantity, and the size. So I think we're good. What you need to do right now is to simply go out from here and to filter according to the checkout. We want to make the checkout false. So how do you do that? We're going to simply type array filters. This is how we do it, we type array filters checkout equal to false. With that being said, this is the end of visit I will continue in the next one to see you. 13. Sign in: Hello, and welcome back. In this video, we're going to see how we can sign in and sign out right here. For example, if we want to sign in, I can go ahead and type my sign in, if there's something wrong, I will get this web page of your e mail or password are wrong, and they ask me to try again. In this case, if I want to sign up, for example, I can simply type my name, then my e mail. And of course, a password, let's make it a for now and then click on. Let's see. This is my name and this is any e mail, unis at example.com. Let's make it one and A. Now if I click on signp, I will be redirected to the homepage as we can see, we can see now this icon, and of course, we have the sign out option. Now, we're doing this because if we want to go to the brand, for example, as we said, if we score to the Johnson. Let's say we have these products, these images are not logging or not loading up for now, we'll wait a bit. But for the sake of our argument, we got this page where we have the products. In this case, I want to add this one to my car. If I'm signed in, I'm going to be redirected to the shipping page as we said. If not, let's just sign out. So if I'm not signed out, if I'm not signed in, I'm going to be asked to be signed in. So if I go back now and I tried to add this to my card, I'm going to be asked to sign in again. I want to enter the email and password. And this is what we actually did in this case. So here, when we implemented the product or the add to card function which takes us to the shipping, we also said that right here, if we see So if we're checking if the user is signed in or not, if this is the case, then we're updating the order of the user. Otherwise, we're going to just update the specific item in this order. Of course, I'm going to now see if the user or the user address is available. If not, I'm going to render to this shipping page as we said. Of course, if we have the user information, I'm just going to go ahead and go to the Place Order web page. Now, this is a general idea about what we're going to do. But of course, we're going to just get into the details, and of course, going to understand it better while we're working on it. All right. What I'm thinking now is to create the sign in fail page, since we have the sign up and we don't have the sign in yet, the sign in fail. What I'm going to do is to create sign in fail right here, and this will be fine this is the EJS file, and this is where we're going to be redirected if something wrong happens with our signing in. What we're going to do is that we're going to first include the header So from partials. And then we're going to start with the container fluid. So I'm going to create the row, which would be text center mainly with some padding and the column will be for medium at three. I think we're good. The second one will be six. And in this case, I'm going to write ups and followed by a paragraph of class lead and saying that your e mail or password are wrong. But that's it basically. Now we're going to ask him to try again. And I'm going to start by creating the actual form to try again. This form will lead us to the sine n. We're going to create it later, and the method will be as usual post. Now, let's start working with this form. I'm going to create the model dialogue. These are from. I'm going to create the model content. I'm going to start with the model header. Okay. So that's it, basically, now we can place our header. I'm going to write sine n. So this will be modeled. Title. I'm going to write sign followed by a button with the type button. The class will be BTN, close, and of course, what I'm going to do is to dismiss this and we're going to use it later. This miss and it will be equal to model. In this case, what we're going to do is to continue with creating the model body. And of course, I'm going to create the form group by Y two. And of course, I'm going to start with the label. So this label will be for email and the class would be label email address. And then I will follow it by the type mad, and of course, some classes such as form control. I'm going to have y two, P two and input as classes. The name will be mainly user name. Now, after that, I'm going to create another form group that is for the password. I'll go ahead and copy this. That's copy it and paste it right here. However, here we have for password, I'm going to write password. And the type will also be password as well as the name. Okay. So that's it mainly. This is how we can create the email address and password. So let's go ahead and visualize it right here. Let's suppose I made a mistake with signing in. It will take me to this page where I have Ops email address, password, I'll wrong. Try again, we have the sign, we have the email address and password alongside the sign in button right here. So let's create it down there. What we're going to do now is to create the model footer and I'm going to justify content. Start. In this case, I'm going to create the button that we're going to submit, and the class will be T N. Maybe let's add some style, such as background color. I'll make it I like the sclorthree 18f5, eight F five, and I'm going to write sine. That's it, basically. Now if I go back, as we can see, this is our page, and this will redirect us to as we said, this sine in form or sign in action that we're going to create later in the apto JS. This is our sign in fail. Let's go back to our apto JS and continue our work here. Now in the apto file, what we're going to do is to create the sign in function, and in this case, let me create it just after just below this one. What we're going to do is to create the apto post, sign, and what we're going to do is to create the functions as usual, and I'm going to create the user. In this case, the user will be in U user Okay. Let's open up these, and user name will be request by user name. As we said, now, we got the user name of the user from the request body, and what we're going to do is to check if this user is logging in. So how do you do that? We request to log in. We enter the user that we created, and we create the function with the error. If there is an error, just log it out, otherwise, We're going to check. If the passport is authenticated, then we're good. Otherwise, we need to redirect it to the sign in field that we just created earlier. So how do you do that? So we write passport authentic eight authentic eight and we're going to open up. We're going to say that failure redirect two, we're going to redirect it to the sign fail. This is another function that we're going to create later, and this function will be just responsible for rendering to sign failed DGS file. In this case after creating this one, what we're going to do is that we're going to continue by having the request, d and followed by the function, and this function will simply redirected to the home page. Okay. So that's it basically. This is how we can do it. Now what we're going to do is that we're going to create the app sine and fail. So as we said, if something is wrong, we're going to be redirected to sine phase. So how do you do that? Apt sine and fail as usual functions, up and up and render to sine and fail. Okay. So we have the request request as usual, and we're done now. This is how we can do it. First of all, we created the apt post to sign in. And what we're basically doing is that we're getting the user name from the user, we're creating a user. And we're checking. If this user is logging in right now, then we're good. We just go to this user is actually in our database. We can just go to the homepage and adjust the sign in to sign out. In this case, indicating that the user is signed in right now and he can also purchase or add to his card. If not, if this is not the case, we're going to redirect him to the sign in fail webpage. And how do you do that, we go to the AbdtGt we render to the sign and fail via the abd g sign and fail here route. That's it basically. Now if we go back to the home here, and as you can see, we have now design and fail. What we need to do now is that if I actually created this, and let's suppose I signed in and We're good now. If I go back, for example, to home, as you can see, I'm signed in, we have the sign out button right now and we have this card. If I press on card, what we're going to do is that we're going to display this web page where the user can maybe add in all of this information and then press next. Okay. And of course, we're going to add this payment. For now, we have just one payment which is cash on delivery. If the user presses on it, I'm going to be redirected to this page where we're going to have the order that the user have. For example, I just added this one to my card and you can also add this again, so he can go back here and then go back again, for example, if you want to change his address or something. And of course, after all of this, he can also remove or place the order. That's it basically. This is how we can do it. Of course, after placing the order, what we're going to see is the purchases right here and with the pending button, that is indicating that this order is still pending, it's not received yet, and of course, the total with the order date and time. So with that being said, this is the end of this video. The next video, we're going to implement all of these functions. They're pretty straightforward. However, we need to be extra careful while creating or working with these kind of functions since they are very into each other. For example, here, we have this address payment and then we're going to go back to the sign web page and so on and so forth. So that's it basically, see you in the next video. Okay. 14. Shipping: Hello, and welcome back. The first thing that we're going to do in this video is to learn how we can switch between the sign in and sign out. So as we can see, whenever we're not signing in, or we're not signing up, we can see the two buttons, the sign up and sign in right here. Let's press on sign in, write our e mail. And then press on the sign in button. In this case, we're going to see this icon followed by the sign out button. How do we do that? Let's go back to the abs right here, and let's open up the header. This header is in partial, as we can see, we're just displaying the sign up right here. Okay. So and the sign in followed, of course. What we're going to do is to create this right here. So let's say. Instead of just showing the sign up, we're going to check if the user is authenticated or the request is authenticated, that means that the user is signing in or is signed in. In this case, we're not going to show the sign up button. Otherwise, we're going to show the icon of this one, as we said. Okay. So in this case, let's do that right here. What we're going to do is to open up an if statement, so if requested is authenticated, if this is the case, we're going to do something. And what I'm thinking is to do this here. So what we're going to do is to check if the user of the request is not authenticated. If this is the case, we're going to show this button. Otherwise, what we're going to do is that we're going to show the icon. In this case, how we can do that, we can simply right here, open up another statement. So if the request is authenticated. In this case, what we're going to do is to create a class of P x one column two, and for large, I'm going to make it column large one. And let's open out. Let's open up the nav bar and I'm going to name it Nav item. And this one, I'm going to create a link that will go to the cart and we're going to use it later. But for now, let's create the Nank In this one, I'm going to create the icon that is from bootstrap. I'm going to get the icon that is a shopping cart. Okay. And then let's change the color to white, and of course, this item will stay empty. What we're going to do here is to just close this one for now, and we're going to continue with the sign in. What we just did here is that we checked if the user or the request is authenticated, so if the user is logged in. If this is the case, we're going to show this one. Otherwise, we're going to show the sign up right here. We're going to do the exact same thing with the sign in. Here, we're going to check if the user or the request is authenticated. We're going to show the sign if this is not the case and the sign out, if this is the case. How do you do that? As before, I'm going to just try if request that is authenticated. What I'm going to do is to open up right here and close here. I'm going to copy this or maybe I can type here L, for example, open up again. And then close it right here. So I think that would make sense. So what we're saying here if the request is authenticated, we need to show something, and if not, we're going to show sign in. So I'm going to copy all of this, paste it again right here and change sign in to sign out. So as we can see, now if we go back, class it refresh, now signed in, so the request is authenticated. It's true. We're going to show this one followed by the sign out pattern. Now, if you press on sign out, We're going to do something that is going to push back or render us back to the home page alongside the request that is authenticated to be equal to false. How do you do that? Let's go back and let's do it in the ab as before. What we're going to do is to get the sign out that we just created here as we can see. We have the sign out. What we're going to do is that we're going to let it go to the sign out Here. So how do you do that, we simply write sine out. Of course, what we're going to do to this one is to go to sign in. We're getting the sign out here. Let's go back to the apto JS and fix it right here. We're going to get the sign out. This is sine out, and then we're going to create the function as usual, up and up and render the sine in fail and request request. Or maybe I'm sorry, here we need to not render to the sign in fail. We're going to go to the home page instead of signed in fail because we just wanted to sign out, and of course, how do you sign out, we simply type request out. And then we're going to simply be redirected to the home page by redirecting to this one above and it will take us back to the home page. So now with that being said, we can continue with our function, that is the shipping card function. And in this case, if you remember, we just created this function and we also said that if the requested user that address address is equal to null. In this case, this means that the user hasn't added his address yet, so we need to add it. So what we're going to do is that we're going to render to the shipping card right here and alongside the request and of course, the address which is request that user that address. So that's it basically. This is how we can do it. Now, what we're going to do is that we're going to go to the shipping card and we're going to fix the address, of course, and then we're going to move to the card. Now, if the user is already added the address, we're going to simply go to or render to the card page. And in this case, what we're simply saying is that if the user has his address set up and everything is working correctly. We don't need to go to this page, which is the shipping cart page. That is this one, if you want to see it right here. If the user, let's suppose we want to go to Johnson and we press on Baby Johnson. In this case, if I press on add to card, I'm going to go all the way to here because I have added this address. Even though we have empty, remember that we pass through the process, so that means that I added the address right here. If I want to edit it, I can go back and edit it from here. All right. So what we're going to do now is that we're going to get this shipping. So how do we do that? We're going to get At the shipping and alongside the function drag followed by the render. Then we're going to go to the shipping card and of course, going to follow it up with the request alongside the address that we have request that user that address, and we're good. So this is how we can do it. Now, what we're going to do is that we're going to go to the payment, and in this case, as we said earlier, so if we are in the shipping right here and we're good we press on next, we want to go to the payment method, and in this case, let's create the function for this payment. So to do it, I'm simply going to write payment, and of course, I'm going to up and drag as usual, and I'm going to render now the payment card GS need HS and just type payment card and we're good. Since we only have one payment method, we don't really need to take it with us. We know that this is cash on delivery, so we just take the request with us. Okay. Now, after getting the payment, we can also work with the post method of this payment. So how do you do that? All of these functions are going to be implemented in a bit. But for now, let's just write them, and of course, we're going to discuss them in detail after. So the post method for payment will be function, reds and open up these. We're going to take the information that we got from the shipping function or the shipping method. So I'm going to store them in constant. So request body dot number. Okay. Constant add equal request body dot address constant City request to by city. And the ID equal to request to user dot ID. And in this case, what we're going to do is to search for the user by ID and update the following information. In this case, how do you search for it. So I'm going to type user to find by ID and update. I'm going to find by this ID that we sat right now. And what we're going to update is the following. So how do we update or how do we set actually something that is not available for us for now. We can simply write set, then open up and We're going to change the address that address, go to make it equal to the address that we got, going to change the address be equal to the telephone number and address city be equal to city. So that's it mainly now, we're going to just return the function. So if we have a net, we're going to so if we have an error, we're going to just log it out. Otherwise, we're going to just log the no error is No. Error and followed by the user address that we just got indicating that everything worked fine, and this is the address that we got and we saved in our user. So if you want to make sure that this is the correct way we can go to the user And as we can see inside this user, we have the user name and orders. Of course, for now, we don't have the address. However, we have it in our schema right here. So as we said, this is the user schema. We have something that is called address and inside this address, we have the ADD R S city and telephone number. And this is what we did. We just created this address and added all of these to this specific address. Okay. So that's it basically. Now let's go all the way back all the way down. Now, what we're going to do is to go to the pages page by page, starting with the shipping card, and let's check it out. Let's suppose that now we're on this shipping card. What we're going to do is let's scroll all the way down. As we can see here, we need to adjust this form and this will take us to the payment, which is the method post. What are we doing here? First of all, we're add this function right here. We store all of the addresses. So we have the user address city and phone number. And whenever we press on next, we're going to be rendered to the payment or the payment webpage. In this case, before being rendered to this one, I'm going to go to this action, which is payment with the method post, and this is it basically. I'm going to take all of the information that I just got. Find the user by the ID and store all of the information. And then of course, I'm going to render to the payment card. Okay. And this is it basically. Now, we're good. In the next video, we're going to continue with the shipping and the storing function. So see you then. Okay. 15. Place Order: Okay. Hello, and welcome back. In this video, we're going to continue our discussion and our implementation of this specific function. That is, for example, if I press on Johnson and I choose one of the products, and I added to my card. As we can see, we got to this page where we are going to display all of the orders and of course, the place order pattern right here. Of course, we want to also add the address and payment. So to do that, let me go back and let's start by creating the post method of the card function. As we said, the first thing that we're going to be rendered to is the shipping card. And in this case, if we already added the shipping or the allocation of the order, we'll go so we don't really want to go to this one, we can go ahead directly to the place order card or the Place Order file, and in this case, this will pop up here in front of us. Since we already added the address, now it's empty, but we already added it in the previous video, we are going to be rendered to this page automatically. For example, if I sign out, let's sign up again and let's name it die. And let's change head at example.com pass a. And if I click on sign up, I'm going to be rendered to this page. Now, if I go and choose one of the products, as you can see, right here, so if I choose Baby Johnson, and I added to my card I'm going to be rendered to the shipping instead of the place order since I didn't add my full address yet. So how do we do that? The first thing that we're going to notice is that whenever there is a shipping card whenever we are on the product page. Let's suppose I'm right here in this product page and I press on the add to card button right here. We're going to be rendered to this one. This is the form. We're going to be rendered to the shipping method. Let me just delete these. Okay. So we don't need them. All of them. Now if I go to the abs, and as we can see if I search for the shipping. This is the shipping function that we just created in the previous video, and we have it right here. We're saying that if the order length is zero, we're going to or the order or the checkout is false in this case, we're going to do something else. Otherwise, we're going to add this order to the specific item or the specific orders box. Of course, if not, we're going to find the user by his ID, and update the order in this case. This is what we're doing right here, and then of course, we're going to render to the next page. We're saying if the address is null, so the user hasn't entered any address yet, we're going to render to the shipping card. Otherwise, we're going to render to the card right here. Now, let's suppose that we are at the shipping card. If I go back to the shipping card, and let's see, we have the button that is to submit and our form is to action to payment, actually. Now if I go back and type payment, we already created the two methods. The first one. It is the post method that is to find the user's ID, and of course, update all of this information and then render to the payment card. Now, if we go to the payment card as we can see right here, we can see the payment method that is only cash on delivery for now. However, we have the button that is of type submit and our form is still empty. So now we can update this form, and of course, work on this method later. So for example here, I'm going to create a function that is card and the method will be always post. Now, if I go back, let's create our method right here. So app post. We're going to post the card and function as usual, s of course, we're going to find by ID, and we're going to push this ID through. So we're going to find by this ID, and of course, we're going to upen the function. So if we have an error, we're going to log it out. Otherwise, we're going to take the orders from the user. I'm going to name it orders. So user orders, and I'm going to take the first order, that is the one that I recently added, and then we're going to do something. What I'm basically doing here is that we have our list, let's suppose it's up and actually the MG DB let's see it in the database. So what we're basically doing is that we have the user who ordered something, and the orders are actually in a list of orders. So let's suppose I ordered today. I have an order today, and if I order tomorrow, I have a completely different order that is different from the one of today. However, they are both in a list of orders. So now if we can see here, Let's open up the latest one, and this is the m to edge database. Let's open it up, as we can see we have the users. For now, for example, we have three users, and we have orders right here. As we can see if I press on this, I have zero orders for now for this first user. Now if I scroll down, we can see this one, I think we have some orders, all right. So we have order number zero, We have order number one, and we have order number two. As we said, the first thing that we're going to get is the received, which is false. We didn't update it yet. The checkout is false. This is the order ID, and we have the items inside this order. As we can see inside this item, we have an array of objects. So the first object is actually the object ID, the image, the title, the price, and the quantity. Okay. So this is how we can get them. So what I'm basically doing is that whenever the user is pressing on the place order button, it will be redirected to the card. And in this case, what we're going to do is to display the last order that he's getting. So for example, if he have three orders such as 012, we're going to display the last one, this is it. So this is the last one that the user has ordered. And in this case, we're going to do that by simply saying that the order is the orders at zero. Now, what we're going to do is to check again if the address is not null, just to make sure so in this case, it's not null. And if this is the case, we're going to render back to the shipping and the request will be as usual, alongside the address. So that's it basically. Now, this is not the case. What we're going to do is to render to the place order file. So how do we do that, we simply render the place order and we need to take with us the parameters that we need. So in this case, we need the request, we need the items, and that is we can always maybe take this item or access this item by simply taking this order. So this order, we have the first item or it's the first element inside the orders list. And in this case, we could have said that order or maybe we can say users, the orders at zero items. So we just took all of these and put them outside and we can access these items by simply adding user or items, and then we have the actual order. So I take it like this and the orders as usual. So that's it basically now here, we have a function, so we're good. Now, let's move on to the place order. As we can see, we have at first this progress bar, then if we scroll down, we have the city and we need to change all of these and make them dynamic. For example, whenever the user presses on the place order, we're going to display his address, the city, telephone number, and of course, we're going to change this orders right here. So if you have items, we're going to change them according to the items that the user has ordered before. Okay. So that's it basically. This is what we're going to do. And with that being said, this is the end of this video. What we did for now is that we just took all of these information and added them so let's suppose. Let's see if I add a few things right here. And let's go to next cash on delivery. So what we're basically doing right here is that we're going to display all of the information here. So we'll discuss it furthermore in the next video, that is your project. And hopefully, you'll have a clear idea about your task and what you're supposed to do in this project. So I hope you enjoyed this class. I hope it was beneficial. With that being said, this is the end of this video. See you in the next one. 16. Project : Hello, and welcome back. In this video, we're going to discuss the project. So remember in the previous video, we added all of these or gated this card function that is responsible to render us to the place order if everything works fine. In this case, what we're going to take with us is the request, the items that the user has ordered, or the actual order, and the orders. Now, your task is to make this page look like this. As we said, we got all of the information, and for now, it won't display the orders here. It will display dummy variables that we just created. What you're going to do is to take these orders and add them to this order right here. Going back to the code, if we go to the place order right here, we can see that We placed some dummy variables right here, and we need to change these into actual variable. Your task is to basically create a fold loop, look through all of the items that the user has ordered, and of course, display them right here, and then maybe compute the total of these items, display here the item with maybe its price, then display the total right here. Of course, as we said, let's suppose that the free delivery for order, maybe less than $50. So you want to compute the total of this order. If it's less than 50, you're going to write delivery free. Of course, if it's less than 50, you're going to write maybe $10 for delivery, and if it's higher than 50, you're going to write free. For now, this is it, and of course, we just have one more task that is the payment method. Let's Maybe, of course, I can always go back from this added button, and of course, if I press here next, I'm going to be render to this payment. So what we're going to do here also is that you're going to go to this page and make this next button not displayed such as this example here. Now, if I press on this cash on delivery, I can now access this next button to go to the place order page. The first task is to simply display all of the information that we got from the app function or the post function that we created earlier and display them on this page, such as the order summary, the orders, and of course, the second task is to add the payment function that is to display the next button once we press on the cash on delivery. Now the last task of your project is to create this dit or do the function of this added. In this case, whenever we press on this added function or this added button, we're going to be redirected to the shipping page. This is a simple task that you can do with a couple line of codes, and that's it for this whole project. We created all of the components that are useful and that are essential for us. With that being said, this is the end of this video. Don't forget to drop this project in the project section, so I can have a look at it and give you my feedback. With that being said, this is this video. I hope you enjoyed this class, and I can't wait to see you in more classes.