[Music] with NJ in this series we are going to implement an e-commerce website without any Frameworks or libraries before I give you the demo of the website let me entice you with the key features of the of this project because this single website implementation is going to teach you so many professionally valued skills we are going to implement this website as a restful website so at the end of this series you will not only know how to consume third party apis into your application but also how to build such application that offers its services through rest apis the second professionally in demand skill that you are going to learn is to develop efficient and fast websites by building them as single page applications since SPS don't reload whole page each time a user interacts with the page and only those resources are requested from the server which are not already requested this makes websites serve to its customers much faster another worth mentioning skills that you will learn is to design your code with key with keeping in mind the long term maintenance of the code the most important thing for code maintenance is to keep the code separate for example in our case we are going to keep the front-end code separate from backend code this way our code is not jumbled together and if we ever need to find any error or any bottleneck in our core it's much easier to find it or replace a fetchup code with new code that's also going to be easier now I know you are getting impression but allow me to break about one more skill before I move on to demo because we are going to implement website as a restful website you will also learn the integrities of how to handle course related issues and what you need to do at both front end and they can protect this issue with that let's move on to the demo okay this is the landing page of our website which is implemented in HTML JavaScript and CSS enable backend is implemented in PHP the communication between the two is going to be done through the fetch apis as you can see at the top you can see the navigation menu and the menu items that you can see over here these are all basically brought in dynamically from our backend so these are all categories in one of the tables in our database and all these categories are currently active so their status is active if any of these activities status is inactive then we won't be able to see this category over here so this way since it's Dynamic it has been pulled from the back end that means we don't have to hard code the categories and the moment we add new category to our categories table in the database that category is going to be dynamically placed over here and we don't need to do any further programming to make that category available over here then comes the printer and again all these banners have been pulled dynamically from the back end they are not hard coded so if we add one more Row in our banners travel in the database that panel will be made available dynamically over here and if we set any of these Banner status to inactive that panel won't be displayed over here next comes new arrival section so this section represents one of the Recently Added items to our products category in the back end and the way they are designed is that if I click on any of these I'm being brought into this model page where I can see the name of the product description price and how many are currently left in the stock so if the stock is less than five I will see in the red how many how much stock is currently left and if the stock is greater than 10 then we will only see um the text in stock in green color over here then from here I can select the number of products that I want to buy and then I can add it to the card then if I click somewhere outside this card this model disappears and if I go up you can see the item over here so if I go there and let's say update the category the total value will also be updated you can see this is the price of single item and this is the total lengthy change it one more time from three to let's say four and you can see the total updated as well let's go back to the main menu sorry for the dashboard next to the newly arrived items we have featured items so this is going to pick random items from the from our products database table so each time we refresh this page we are going to see different products being featured so this is also dynamic so as you saw the featured products have been changed however new arrivals are same Let me refresh it one more time again our featured products change and the new arrivals are the same then we have this footer section where we have linked social media links to our website and some generally ask questions and information and other stuff such as the locations store locations and things like that currently I'm doing the shopping with a guest user as you can see I'm not logged in so let me add one more item [Music] click this one add two categories now we can see we have two products displayed over here let me add it one more time we will still be able to see the two in the circle because the products are two the quantity of each product would be different but the product themselves are true so let me change the quantity again from two to five again the number of products Remains the Same and if you want to delete them we can delete if you like let's go to the main section over here we can see all the items which comes in men's category then we have women's section and we have different products related to women likewise we have girls category boys babies and boys and accessories so the pictures are random please ignore those because the focus of this tutorial is not the pictures rather the overall website building logic and skills now let's try to log in one more item so that I can show you the difference so basically now we have two atoms let's add one more item so the guest user has three items in its car so I'm going to log in as user1 and this user has already done shopping earlier and it has some items in the card so you will be able to see those items now as you can see the card over here displays number one that means there is only one product and this product was placed in by the username user one now you can see this user icon with Stickman and the name of the user over here so that means this is the user who's currently doing shopping and he's a logged in user and his card is completely separate from the guest card now if you log out now the guest card is disappeared because when you do shopping as a guest no information regarding your shopping cart is going to be stored but if you do shopping as a login user your shopping cart is going to be saved until you purchase it so these are some of the features that we are going to build in the initial episodes of this tutorial later on when we have progressed further along in this series we will be looking into the checkout section the search bar and other stuff as well so we are going to start off by implementing this navigation bar so the approach that we are going to take is that we are going to implement this navigation bar it's front end its back end and its database related stuff and once we are done with the with the navigation bar we will move on to the next section which is this banners and then we will move on to the rest of the stuff the process I'm taking is that I am going to develop front-end back-end and the database at the same time for each of these different components of our website so that we can understand much easier how these components related to each other rather than implementing the whole front end first then moving on to the back end and then to the database so that's the process I'm taking because in my opinion that's the best approach to learn something now without further Ado let's start putting together so we are going to use Visual Studio code editor is our editor of choice for this project and the root folder of our project is called shop online and within this root folder I've only placed one one folder named images which consist of many subfolders basically each of these folders represents images for our categories in the database for example this women's folder contains all the images that you see in our image products on the database so likewise we have accessories folder baby Banner so Banner folder contains images for our webinar boy guard main beside these category images we have a logo image that will display as the logo of our website now we are going to start off the code so basically we are going to implement our menu bar so these two kind of rows are part of our menu bar in the first one we have this logo in search bar and in the right side we have login and registration related icons another card in the second row we have all the categories as our navigation links so let's start off with index.html and let's get some idea from our demo project for the top level structure of our index.html page over here our index.html starts with this navigation stuff then we have winner then new arrivals featured and finally we have some business related information stuff so what we are going to do is that we are going to define a header for our navigation related stuff and then we are going to have another child in the body element which is going to contain all the products and their information so we are going to use HTML element name Main so this main will contain in return this Banner new arrivals and feature parts and then finally for this bottom level section we are going to create a footer so let's go and Define this structure first [Music] let's create a folder name user because all the logic that we are going to Define we are defining it because eventually the consumer of our business is going to interact and buy stuff from there so everything over here is going to be user facing we eventually will Define the admin section for this website as well and for that I will give the name admin to that folder so that's why I have chosen the word user for this filter now inside this user folder we are going to have two more folders Ubuntu is going to contain all the front-end logic and the second is going to contain all the back end logic so for the front end logic I have given it the name front end so this front end is a subfolder inside the user folder but we are seeing it this way because currently we don't have anything in our user folder we only have one subfolder in the front end folder the moment we put anything else in the user folder then we will be able to see the hierarchy like this one so images folder and inside this image is folders We have these subfolders but this seems like a different type of hierarchy because currently we don't have anything in the user folder other than front-end folder so anyways in the front end folders let's create index.html file and since we will be using CSS styling and JavaScript so let's create those files as well for the Javascript file I'm going to give it name global.com.js so in the head section we are going to link our CSS file and since we have given it the name style.csa so we are keeping it the same now at the bottom [Music] at the end of the body tape let's attach our global.js file now let's define the children of our body as we just discussed the body is going to contain free children header Main and footer so let's create those elements first header Main and Twitter currently all of them are empty let's go and Define some contents for our header section now to decide on the structure of the header section let's go back to our demo project so for the header section if you notice it looks like we have two children in the header section the first one seems to contain again two children at a left side it contains Loco and search bar and at the right side registration and login and card related stuff whereas the second child of the header contains navigation links since these are Dynamic links so they will be coming from our backend anyways let's define the top level structure first and we will worry about the vacuum part later so in the header it contains two children the first one I am going with the name heading and the second one I'm going to give you the name location so in the heading as we notice it seems to have two further children so let's give it name left heading the second child let's give it the name right heading in the left heading we have again two children the first one is logo and the second one contains search bar in the logo we are defining an incorrect 3ml element because we want our image to be clickable and no matter how deep we are in our navigation hierarchy when we click on the logo we should be redirected back to our dashboard page that is index.html5 so the URL for the href is going to be starting from our root folder which is shop online but we will refer to it with this forward slash so this forward slash means root and which is shop online in our case so starting from this root folder that is shop online we have to go to the user folder and over there we have another folder named front end where when they start HTML file now this is the href link and let's define the contents for the center and these and the contents of this anchor text is going to be an image so let's define the source for our image so our image is a logo in the images folder this one again starting from the root folder named images and there we have a file named logo dot PNG let's remove this now for the search bar the second wave trial since it's a search bar so that means we are going to need a form so I've given this form the class name search icon form you don't need to Define action if you did over here because we are going to Define everything through JavaScript and inside the form we have an input field type set let's give it the name search as well and we don't need ID find placeholder in its place and give it value search and three tops the second field of thumb is again an input field of type submit then and it also needs to have name this form data is going to be submitted to the server and server will be able to distinguish between these two Fields three of its names so every input field in the form must have the name attribute defined so let's give the name submit as well let's go and have a look how it currently looks in the browser so let's let's open this index.html with our live server okay so this is how it currently looks but we can't see the logo I must have done some mistake in this filing are the path somewhere oh it's not Ong it's PNG okay so this is how it looks currently looks now let's go and Define the the second child of our heading dip which contains this registration in login related stuff and the card so basically again the right child of this heading leave is again going to contain two children the first one is going to contain login and registration related stuff and the second one is going to contain this card [Music] so let's go to the right heading and over here we again have to have two children defined over here the first one is going to let's give it name login status div and the second div is going to be third day in the login div we need to have three children defined one for the login second for the registration third for logout and fourth one is going to display the user icon along with username once the user is actually a locked in user so let's define those children Define login this is our first child I'm putting the text login over here later on we will remove this text and bring in the font awesome icons the second child is going to be named register that's put text register as well so login register the third chart is going to be log out and the fourth chart is logged user let's remove zero so over here we will have an icon which will indicate that that currently the user who's visiting the website is not a guest user or Anonymous User it's actually a registered user and we will also be displaying the user's name over here as well so let's put temporarily block user text and since we will also be displaying the user's name as well so let's put as class name let's give it class name logged username I think change it back to username that that user friendly okay and for the second one we will put cart over here so now let's go and get the font awesome icons I'm going to use font assam's website and we need to bring in link and place it over here in the head section so let's go to the foundation website now you need to have access created with it I have my kit already created with font awesome so if you are a free tier user for the font awesome then you can only create one kit I am free to your user so this is hit I have this font awesome I'm going to copy this code and I have to place this in the head section before our style file now since we have this formed as some fit code in our index.html we can go and choose the icons that we want to use so let's go and click on the icons then over here it shows the the current version of font awesome for some reasons this version doesn't seem to be working for me so I choose the relatively older version and now I am going to click on this free because I am only interested in free icons let's start with login so this is login icon let's copy the link and let's go and place it instead of this login text text not register user so I'm going to choose this one this says this cross says that you are not a registered if you are not a registered user you can register with us so copy and paste it over here so this is the meaning that I have associated with this cross you can associate any meaning you like and you can choose any other icon if you like for the log user I am choosing this user icon with a tick mark that will indicate that you have already been locked in copy and over here instead of this logged user tag let's paste this now we have to go and select an icon for the log out copy and let's let's paste it over here now let's go and choose choose the icon for the cart let's choose this one copy and in place of this card text we have place this tag now let's go and have a look in the browser okay so we have got all the icons but they are way too small so I want to increase their size so for the font assumes the way to increase their font size is to use one of the classes that phone awesome has made available for us which is if you want to double their size you have to use a class called fa hyphen 2x if you want to Triple their size you have to use fa hyphen 3x and so on so I only want to double their size so wherever I have inserted the eye tags I am going to use fa hack12x copy paste paste paste and for the card rest okay though they look better now so now for the first child of our header header table we have everything in case so we have a locker then we have search bar then we have this login and registration related stuff and the shop in the shopping cart now let's go and Define their styling before we move on to the second child which was this navigation links so in our start.css file the first thing that I want to do is that I want to bring in the Google form that I'm going to use for the website so the form that I have chosen for this website is Roboto so let's go and get the link for that Roboto font foreign so whatever style you are interested in you can click on this plus sign and it will be included in this list over here since I've used the same phone for my demo project so I have all these three Styles already selected so I'm simply going to do is let's go down and I'm interested in the import version of this link so copy everything in between the style text and paste it at the top of the standard c65 now let's define some basic styling part we hold HTML page and over here the general styling that I want to apply to every HTML element is I want to remove their margins and add things and the second thing that I want to do is that I want to set its box sizing to be border box okay the reason for removing the margins and cutting farm everything is that every HTML element has a default margin and padding set and since we don't know that what is the default margin and padding for those HTML elements it's better to remove the margins and settings and assign them the margin and paddings that suits our needs the needs of our current project this way we will know for certain that these are the margins and paddings we have assigned and no default margin and preparing has been appended to our elements and the reason for setting box sizing to waterbox is that if we Define a width in height by any HTML element and then we Define the margin and threading then the total width in height is going to be the width in height that we have defined for the element plus the margin inflating so overall the HTML element will look different than what we have visualized in our mind by setting box sizing to border box whatever height and width we have defined for the HTML element the margin and padding that we Define they are going to be subtracted from the height and width of the dhtml element so they won't be like editor on height and weights to our HTML element they will take up the space from the width and height that we have defined for the HTML element now we want the whole HTML element to have the font property so therefore we have to define the phone over here so let's go to [Music] Roboto phone and let's copy this thing font family and paste it over here so the Roboto phone will be used as the font of choice but if for some reason this phone cannot be brought in and sends serif will be used as the second choice let's define the background color for the body which is blue okay now we want this image and search bar to be the left side of its parent and these icons to be the right child average parents so if we Define the display property to be flexed for the parent then this will happen automatically the parent is heading display is flex okay these are side by side this is the first child and this is the second child now we want some space between the first child and the second child so for that we are going to select we justify contents to be space between okay now you can see as much space as possible now we want these children to be defined next to each other as well therefore for each left heading and right heading we are again going to set the display property Flex this way the first child up left heading will sit next to its second child so this the search bar will come over here and likewise this card is going to be come next to these icons over here so left heading display is flex and right heading display is okay now let's define the background color now let's assign the height to our heading this one let's define the height so the height that we want to assign is eight percent of viewing height so viewing height means whatever the screen in which you are viewing this website so eight percent of that height is going to be assigned for the heading div background color and let's give it a shade of black this is how it currently look now if you notice the image is quite bigger than the height that we've assigned for the div it's parent div and the second immediate problem that you can see is that some of these phone custom icons are not visible anymore so let's try to change the size of this image so that it fits inside this inside the height which is which has been assigned to its parent okay so to make an image fit inside that eight percent of viewing height we have to explicitly Define the height for its parent container which is logo in our case so inside this heading div we have two children left heading and right heading in the left heading again we have two children logo and such bar so let's assign explicit height over logo which is it's going to inherit from its parent so that means it's going to be eight percent of viewing height now for the image which is inside the logo let's give it high hundred percent and let's see if it has worked [Music] it seemed to have worked now let's try to bring this search bar in the center of this horizontal bar so since this is left heading we have already set with display property to flex so justify contains to Center and align items to Center as well what happened as well explicitly height explicit height [Music] okay now fine okay because because we had now explicitly defined the height for this left heading so therefore again the image called disaligned explicitly defining the height inherit from its parent also gives this left heading the height of eight percent of doing height so this way the image has no choice but to fit in its container and they are in the center as well now let's go and work on the right heading div so again for the right heading table let's sit it's Justified contained in align items and height to inherit as well because we don't want any kind of surprise is there okay now the right heading Divas two children the first one of which was given the name login status display property to flex as well because it contains four children and we want all of them in the same row since these are four awesome icons so we are going to set the color to White okay sell it better is not visible because it's in black color we have to do the same for the card [Music] okay now we need some space between them so let's go to the login status and underneath the login status [Music] we are saying all the children are blocking status should have some margin and cutting defined so let's define some heading and I want to define the petting tools right so let's give each of them temporarily some margin let's give it one ram yeah that's better and since there is no space between the card and the and the right side of this window and likewise there is no space over here so we need to Define some heading for this whole row as well which is heading so let's go to The Heading class then give it some heading so for the top and bottom we are not defining any heading so it remains 0 and for the left and right let's give it two percent okay that's better we will be making these icons appear in disappear dynamically through JavaScript but currently since there is no JavaScript so they are all visible but we will need a class called within such that when any of these icons contains this class that class that icon won't be visible so let's define this class as well so let's go with the top since this hidden class can be attached to any HTML element so after the party let's define this class the only property we are defining over here is display is none now let's see if this works so what we are going to do we are going to index.html and let's select this user icon the username when the user is logged in this one and over here it is class setting and now one of the icon should be invisible which contains this username okay opinion so as you can see if you look at the hidden class to any of these accounts the icon disappeared so we will be appending and removing this class from these icons dynamically according to our needs but currently let's remove this class name so that we can see all the items all the icons there so let's move this class okay now we need to Define some styling for this left child again we have to make this icon turn into a circle and we have to increase the height of the search bar as well and end likewise the button so let's start working with the logo image there is this logo image now we have to set its border actually it's not model it's border radius and we have decided to 50 percent okay that's better now we need some space between the search bar and the image so let's assign some right margin so instead of giving the margin to the image let's go and give the margin to the container of this image which is no good betting right let's assign one ring okay that's better now let's work on the search bar so search bar is active and inside this search bar we have this form with the class name search hyphen form so basically we have to say the display property for this form to be flexed as well so that these two input Fields must always stay on the same row and that can and that can happen when the display property is set to flex [Music] now we want to make the search icon slightly higher in the height and we can do that by defining its heading so we are going to define the padding for this first input field and the second input field so we are looking for input field this time is search let's work on this one first it's still replacing the top let's give it five pixels and top and bottom is 5 pixels left and right 10 pixels and let's give it okay let's have a look first okay so the case slightly increase in height and width let's put some space between these two elements so if I did at left margin right and let's give it 10 pixels that's better now we have to do the same forever input field or type submit okay that's better now we have to define the Border bottom for this first child of the header element so that when we Define the second child that is the class name navigation we can see a clear separation between the two so since this whole div is given the class name heading so let's go back to The Heading part [Music] where it is heading and let's give it border bottom Solid 2 pixels and gray and color it's not clearly visible at the moment because it gets Blended in with the color of the body element the ls blue color and the gray color gets Blended gets Blended in but once we have defined the background color for the second child of the header which is the navigation then we'll be able to clearly see this line over here that we can see over here so let's go and work on the second child of header which is navigation so everything in the navigation that is these links they are coming from the back end from the server So currently we haven't got any back end so the only styling that we are going to apply over here is the background color [Music] let's give it a slightly different share than this one we can't see any color because the navigation is currently empty so it's not rectifying any space in our browser but once we assign it a fixed High then we will be able to see it so let's give it height the height is going to be the same as its sibling which is eight percent of viewing height so the header in total has now 16 percent of viewing height and each of its two children have half of 16 percent of you in height okay now we can clearly see these two children of the header element the only thing left to do is that we have to bring in the navigation links the categories from these backend and display them over here now since those are brought in from the back ends that means now we have to make a fetch request for our back end and request it to get the category data so now we have to work on the JavaScript logic which will make a request over backend so that means we have to define the back end which listens for this particular request and once that back end gets this request it will ask the database server to give us all the categories which are defined in the category table since we haven't defined any database table either so let's start by creating a database and then creating a table called category which is going to contain all of these categories for the database I am using MySQL and what you see on the screen over here is MySQL workbench if you are more comfortable using PHP my admin then you are more than welcome to use that one I prefer to work with mySQL work range so over here first of all we need to create a database so let's click on this icon which creates a schema that schema assembly means a database so we are going to create create a schema or database let's give it the class name eShop sorry not the class name the three shop and click apply so this statement is going to be executed behind the scenes which says the schema has been created with the name eShop happy with that so apply and finish now we've got eShop database created so let's refresh it so there we have the C sharp now over here in the temple since we don't have any tables or you don't see any triangle over here so let's right click it and create a table so the table I am going to create I am going to name it categories now we need to create columns the first one is always ID it's applied integer it's a primary key it cannot we null and we have to click on this Auto increment so that this ID is generated automatically you don't need to provide it the second one is going to have the class name since the category purpose so let's give it name so this represents the name of the category bar chart 45 I'm okay with it and it cannot be null and it has to be unique as well so you cannot create two categories both having the name let's suppose baby or accessories okay then the third is going to be the status the category name is status and let's choose a data type to be Boolean Boolean will mean the same so when I select Boolean it's going to be tiny end automatically okay so the default value for its for it is going to be 0 and it cannot be null when a new category is created the default value is set to 0 that means it's inactive when set to 1 that means it's active so when we request from our front end for the categories then the server will respond back with all the categories whose status is set to be one and all the categories whose status whose current status is set to zero those will not be same with the reply to our front end the reason for this is that for example a user is doing shopping in summer so obviously he's not interested in winter stuff so in summer we can set the winter category to 0 this way no stop related to Winter is going to be displayed by the user so I think we are happy with the columns in our category field ID name and status apply so it's going to be a terrible in the eShop schema or database with the name category it is idea type in to not null and automate then we have a field named name watch r45 is its length it cannot be null and Status which is Tiny into one magnitude one so it cannot be null and default value is 0 as well so this basically means it's a Boolean type then our ID is a primary key and this has been an index is automatically being created for the name because our names are going to be not null and unique so wherever we click on the unique tag the unique icon over here an index is automatically going to be created so apply finish again refresh now we can see this icon over here that means this table contains actual tables let's look at its data currently it's empty so let's define some rows in this table the first category name is Main and set its status to 1 then women set status to one then we have a category named boy it's active category 12 also an active category [Music] baby and active category accessories is also an active category we are going to Define attempts category setting its status to zero so that when the data is pulled in from the back end and displayed in the front end on our web page we can verify if this is working so if we are able to see this temp category in our navigation that means this logic is not working and if we don't see this that means our logic is working let's create this table data finish now we are going to define the front end which is going to request our backend to send all of those names in the category table whose status is set to one so let's go and work on the front end since it's going to be defined through the JavaScript so global.js the first thing that we have to decide is when shall this request be made so we want all of these categories to be available when the user first types in the index.html in its address bar and hits Intel that time those categories should already be populated so that means we want this request to the server should be made when the Dom contents has loaded so at that time the request should go from over front end to the back end asking for those category names and the moment those category names are made available to our front end they should be displayed in the browser so that means we have to Define an event listener for Dom contains loaded and down content plotted is any event listener which can be attached to a document and event listener the event listener is the event is sorry the event is term contained loaded and when this event is triggered we want the following function which are defining next should be executed so the name that we are going to give to this event listener is request categories now let's define this event listener a function so request categories now since we want to make a request a HTTP request over server so we are going to utilize an API which is by default available in all the browsers called hedge APM now this phase API takes two parameters the first one is the URL endpoint where our server is listening and waiting for this request and the second one is going to be an object which is an optional parameter and this object contains different request related settings that we will provide if you are not using the default settings if you are using all the default settings so we don't need to provide this second object so let's start with the URL endpoint where our server is listening for this request so it's going to be http and over there the particular endpoint should be now this is the URL the domain name next to domain name we have to specify the end find the specific endpoint so I am going to give that the name must just received this endpoint will return us all the names of the categories the second one is an object but since currently we don't need to Define any settings other than the default one so I'm not specifying the second parameter so yeah we need to put this so once this fetch request is made then whenever the server responds back we get a promise therefore we have to use a then verb and since we haven't yet defined any backend but when we Define we want to make this website work as a restful service rest API service that means the data that is going to be responded back from the server it's going to be in the form of Json objects so that means whatever the data has been returned in the form of a promise we have to convert This Promise into normal JavaScript object So currently what we have received in the promise is actually a Json object so then class takes an arrow function and we are passing the promise that has been sent from the server to this error function so let's give it a name let's call it response and now the body of the error function since we are only applying a function called response.json so we don't need to provide curly brackets or the return keyword so what this is Json method is going to do is that it's going to convert the Json object into JavaScript object in the form of Promise so since it's a promise that is being returned from this Json object therefore we need to have defined another 10 block so this thin block will will get the promise which is return from this execution so now let's call this one Theta because now in the second inbox error function we actually have data so over here we can apply the logic that fulfills the needs of our project requirements but currently we simply want to console off whatever has been returned from the server so that we are certain that actually we have received some kind of data we should also Define a catch block so this sketch block is going to be executed if for some reason the server was unable to same as the reply back in that case this page is going to be executed this sorry this sketch is going to be executed so again this takes in an arrow function and that Arrow function will get the error object that has been written from the server not the positive reply but the error and we simply want to console log that error and blocks executes then the sketch what this thing could not be executed successfully okay anyways so we will come back and revisit this part and redefine the logic over here but for the time thing this is all that we needed now we have to Define its counterpart at the server side which will listen on this endpoint and when it receives this request it will return us the all the categories in the database table so now let's go and Define this backhand side of our website so in the user folder let's define another folder now if you notice this backslash disappeared and the front end is being displayed separately that's because now we are putting something other than this front end into our user folder so when user folder has more than one folder then it will display it in the normal hierarchical form since desktop that we are defining it has to do with the back end so let's give it the name backhand as well now in this backhand let's define a file named menu dot PHP so before we Define any logic in this menu.php let's create another folder in scan and let's give it a name in choose now this include folder is defined inside the backend and in this include folder we are going to keep the files with whom different end will never interact directly so all the files which are directly in the backend so these are going to serve as the URL endpoints with which our front end will communicate but in the include folder we are going to place supporting files which are going to help these URL endpoint files perform their tasks so one such thing that we are going to put in this include folder is a file which is going to connect with the database since database is going to be required by all the URL endpoints which we will Define over here so this is a common functionality which is going to be required by every server file and it is never directly requested from the front end so therefore we are putting this in include folder so let's create a file let's call dp.php and this is going to contain database connectivity related code to turn this file into a PHP file by putting the stake over here now we need to define the logic which will make this PHP talk to our database so we are using mysqli for this connectivity let's Define a variable connection which is going to be an object of type mysqli and this Constructor takes four parameter the first one is going to be the URL where our database is listing the second and third parameters are going to be the username and password to log into this database and by database I mean the database management system the whole this what we are interacting through work range and the last parameter is going to be the actual database schema or the database with whom we want to communicate so our database is going to listen on localhost port306 this is the default four if you want to submit this port number you can because it's a default code but I am keeping it the second parameter is the username and password to log into dbms system in my case the username and password are both root if you have set different username and password for your database management system then you have to provide those username and passwords over here the last parameter is going to be the actual database with which we want to communicate and since we have just created the database with the name eShop so that is the database we want to communicate with next we have to make certain that we have actually got a connectivity with a database in this object if not then we should terminate the program so if this connection object now contains some value in one of its properties called connect error number if this property is not null in this object that means some error did occur and it has been stored in this property so if that is the case then we simply want to form the user and since we are only sending Json data so we have to apply Json and coding by calling Json in code method and this Json encode has been passed in Array associative array to be specific so the first element in this associative array has the index named error and this index contains some error message which is going to come from connection objects another attribute because connect error so this connect error num returns as the error number and this one the actual error message and then we want to execute program however if that is not the case then this statement will never execute and we will have a connection in the connection object now we have to go and work on the menu.php file let's convert this file into FJ PHP file by placing this PHP text now the first thing that we need to do is that we have to bring in that database file to that we are going to use require now we have to provide the path of this database file since this database file is inside include folder which is in the same folder in which our menu.php file is so we are going to say starting from the current folder that means the backend folder there is a subfolder named in blue and in there we have a file named db.php this many.php file requires it if this requiring action does not take place successfully then this logic will not proceed any further but it does then we can proceed further and Define our further logic which is we are waiting waiting or a request from the front end so if there is any request it's going to be stored in one of the php's super Global variables named server which is actually an associative array with its index is being named so we are interested in one of its index which is named request method thank you now what is this request method so whenever a request is sent from the front end to the back end we always Define what kind of request we are sending when we don't Define this request type that means the request type is supposed to be okay since we did not Define anything in our fetch request here we have not defined the request type that means it's assumed to be get had we defined it we have defined it in the second optional parameter by putting the word method to be like this but since it's a default one so if you don't place it there it's automatically assumed to be get now I have already placed it so I am going to keep it that way however the point is if you don't Define it it's always assumed to be get therefore we are saying if the request that we have received from the front end if that is of type K then I am ready to serve that request and how am I going to serve it so what I'm going to do I mean by I over here is the server the menu.php server file it's going to use the connection object which it received from this statement and using get connection object it's going to ask our database to return us the category name in the categories table so let's define this statement first Sunday category equals 1 semicolon now all the rows in in the category table that have status set to 1 return the name column of all of those rows this is what this statement is saying now we have to execute this statement using connection object to execute a we are going to call a query method and we have to pass this statement that we want to execute which is in our statement variable now if we have successfully executed this query in that case we will return a result that we are storing in this result variable but we have to make certain statement execute successfully or not if this is statement didn't execute successfully then this result variable will contain the value false however if this statement executed successfully in their case this result will contain the data set returned from the database therefore we have enclosed this whole thing inside the if block to make sure the certain that we have actually got the result set and not the first value so this if clock will execute only if the result variable contains the data set if the now if the result does contain data sales then we are going to Loop through it one row at a time using while loop so why result and call a function called Fetch a sock on it now our display case of is going to do is that it's going to take one row at a time from this result variable and convert it into an associative array and returns that associative array so therefore we have to store this in some variable so I am going to give it a name row while this result set keeps returning a row in the form of associative array this y group will execute and inside the while loop we can Define the logic that what shall happen so what we are going to do is get above this while loop we are going to create an empty array this is an empty array and inside this while loop we are going to keep populating this array with the rows that have been written now since we know that we have only requested one column from this request so therefore this switch a shock is going to contain just one value in each row so therefore what I am going to do is that instead of bringing that one value as an array and storing this as an array that contains only one field or one value at a time I am going to put square brackets over here and in the square brackets I am going to mention the name of the column that I want to be extracted from the row that has been returned so since we know that we have only requested from one column and whose name is name so I am saying the associative array which is going to be returned by this fetch a soft take the index value whose name is name and store it in this row now this row actually contains just the name field so let me link it to name and we have to push this name in our empty array area underscore push is one of the PHP methods so first parameter to this area underscore code is the array to which we want to push the data and the second one is the data which is now this array consists of all the names of the categories now once this expression has complete and all that data has been pushed to the array we are ready to send this array as a response back to our front end so we can do this outside this Y block now remember if this white block never executes that means an empty result set was returned in that case this error will be empty but it's okay we can send empty array if we don't have any data so either this error is populated with names of categories or it's going to be empty so outside this white block within the if block now we are all set to send the data back to our front end so we are again sending it as a Json object so Echo Json encode and we have to pass in associative array the first one I am going to give it the index name categories and its value is going to come from this this area that has been populated with names and then at the very end let's put the exit we can put an else over here this will handle the case if the query didn't execute successfully so in that case we want to send an error message back to our server so now the index name is error and not categories and the data is going to be something went wrong try again later so either this statement will execute are this else statement will execute and then we will exit now I hope everything is working properly let's start our backend server [Music] it port number 8081 PHP access is localhost 8081 now this is statement with execute because I am going to start the built-in development server which is provided with the PHP itself now hit enter foreign [Laughter] [Music] okay now our server is listening this is going to act as a backend server and it's listing on the port 8081 our request is also being sent to the port 8081 now let's see if we are able to make this request successfully so let's go to our browser [Music] let's refresh it and because this fetch request should have already gone when we refreshed it and the Dom content got loaded so if everything worked fine then we should have data in the console so I'm going to open developers tools and turns out we haven't got any response rather we have a error message it says access to Faith and this URL endpoint from origin which is this has been blocked by the course policy no access control allow origin header is present on the requested URL since our front end is a completely independent website in our backend is a completely independent website because we are serving front-end sample double 501 and back in from code 801 that makes these two front end and backend is completely independent websites and the request that front end is making to the back end is actually considered an external request a request from someone who is Outsider and the default settings in PHP are that they only serve the request which come locally means which come from the same domain on which the server is listening so we have to provide some headers which will tell PHP to serve external request as well so we have to Define this Access Control allow origin header in the PHP and through this header we will inform the PHP that you should serve any request that comes your okay so let's go and do that in the menu.php we are going to Define this header [Music] a lower origin and we are for the time being putting an extras it means no matter where the request comes in you must serve it later on we will see this asterisk will create their own problems but for the time thing we are keeping it estrous so that we can see when does things again stop working we will discuss the reasons why this happened and how to resolve this issue as well but for the time being this is going to work fine so let's go to the browser bag and refresh our page and let's see if we get the response back from the server this time refresh nothing will you define this hydrogen so what could be the reason well if you notice over here I'm saying the URL for the pattern that I have provided over here is after the domain name I'm saying the menu.php should directly be in the root holder because this is the domain and after slash starts our URL endpoint so after slash we have directly menu.php that means it's in the root folder whereas that is not the case our menu Factory file is inside a folder named backend which is inside another folder name user so we have to provide the proper URL so we have to go to this fetch request in our front end in our JavaScript file and make this modification so in this page after this root let's put in the folder named user inside this user we have another folder named backend and this is where menu.hp is now let's go and refresh the browser okay it has already been refreshed because we are using live server and you can already see the categories and object with one attribute a property named categories and the value of this categories property is an array which contains six elements which is Men Women boy girl baby and accessory and remember we had one more field in our category table which was named him and since it was set to status 0 it's not been sent back in the response so now what we need to do next is that instead of displaying this data in the console we need to make these elements available as categories over here so now let's go and work on that in the fetch fetch second then class where we were displaying console.log conflict comment is out now we need a reference to the navigation div which is empty this one we need the reference to this div so that we can append new elements in it so let me get reference to this command dot by the selector and the class name is so now we have got a reference to this but before we start appending anything in it we have to make certain that the data that we have received actually contains a property named categories because if something goes wrong then the data that we have received will contain another property called error rather than the categories so we have to check if data dot categories data object has a property named categies that means we have received category names from the server so now we are ready to create and append them to this navigation div so in that case we are going to create an ordered list see it element card URL now we have required through this categories array categories Far East and this part each text and arrow function as long as we have elements in this categories array one element at a time will be passed through this error function and it will be reference to this element name rely we can short form it to get means category so now we can create Li elements for each of these categories name we will be assigning click event listeners to these Li elements and whatever element has been clicked we want the product belonging to that category to be displayed in the browser so we must know which navigation link or which LIF element has been clicked so that we can make another request to the server to send us all the products that belong to that category so therefore we need to have some kind of way to identify these list items as unique list items so for the class name we are going to give them the same name which is the name of the category so which is has been played we want the following event listener to be executed let's call it category for this okay we have to Define this function yet but before we do that let's finish the logic over here now we have created an ally element we have to applying this Li element to UL so UL Dot a fan chart alive now outside this part each Loop once this Loop finishes its execution then we have an unordered list with all the list items representing the category names but this unordered list has not been appended to our job yet so we have to append it to the term so that we can see it in the browser as well since we are appending it to the navigation and pass in the UL variable so now let's go and have a look in the browser okay since the text is also played that's why we can't see it okay no nothing has been appended if that's because we have only assigned class name but no text contents are defined this contents are also going to be cut still nothing [Music] get categories product is not defined okay so let's define this function first let's put console.com now let's give a try okay we can already see these so no matter where we click we can see the message being printed so we are able to bring in the categories in our browser and we have successfully attached even listeners as well however we need to get properly to find the logic product currently it only has one console love message but before we do that now we have to Define The Styling factors so that we can see them inside this second row in the navigation links like this one okay so let's start styling them now first of all we are going to set the display property for this unordered list to be Flex this way all of its elements are going to go in one row then we will set the color to be white so that we can see it against this black background so let's do at least these two things and then we'll see what we need to Define next let's go to start.css now since this a lie is inside the navigation link so so the u n which is inside the navigation class let's say display property into flex and color to be in white nothing happened spelling is dead [Music] okay now you can see all of these but they are stuck together so we have to put some margins and headings between all of these [Music] which are inside this UL we have to Target those because we have to apply heading to those list items let's give it okay now we have to set the justify contents and align items to Center for the flex so that they are in the center so let's go back to the URL where we are setting display property to flex justify contains Central and align items to Center as well but they don't seem to have been aligned so let's export first what's the matter [Music] okay So currently my uh is selected as you can see there is this equals equals dollar sign 0 this means that this unordered list is currently selected now I have to check its striking properties so starting properties over here so if I hover over this line now you can see that whatever is the total height of this ulh cell according to that height contents are aligned so it turns out that the URL itself is not occupying as much space as its parent that is the navigation give so we have to give this UL the same height as its parent and hopefully then all the items in the U.N will align Center according to our visual needs as well so let's go to UL let's give it high and make it inherit from itself now you can see the items are aligned visually as well because now UL has the same height as its parent element which is 8 viewing height and now the items are aligned according to that height okay now we have to remove this dot which is appended with each Li items so let's say let's start dot com now we have to make this size bigger the font size we have to make the font size bigger so let's go to a live wait let's make it 500 and size to large let's have a look now we have to make sure that the First Data of each of these categories is bold [Music] it's called text transform and we have decided to capitalize let's change the home size to let's make it let's see okay maybe that's way too much that's better let's close this end okay that's my turn but we need some more space between each of these elements so threading right make it folding maybe four point five cents good now press and let's click on these categories and see if the event listener is working so yes it's working let's click on the menu and this is working as well so before we work on this event listener let's further Define The Styling which bring this what shall I say this blue background button so that reminds me we have to give the same color to our search pattern as well so what we are going to do is that we are going to Define a look the color so this is the color let's talk to this let's give it a brown color okay so this is how it looks that's because we have only defined the paddings for each of these list items however we haven't given any margins if we give any margins then we will be able to see the bricks between these list items so let's make the threading let's make a 2 RAM and let's give it margin left to be three and so in total five times distance between each of these list items that's better however since we have only defined the painting rice so therefore we see the cutting over here and not over here so let's change this and equally divide the padding between left and right parts so instead of saying credit card we are saying threading now let's give it one ring top bottom and two Ram Computing two Rhymes too much one ram left and right and let's make it 0.5 frame so point five frame top and bottom and one gram left and right let's go and have a look that's better now let's give it quarter radius let's define border radius I'm seeing what should be the Border radius just give it one ram let's see happens 1.5 ten let's make it 1.4 so that we can see this horizontal line rather than complete all this is almost round or if we decrease the threading top and threading bottom then we might be able to see that horizontal line so let's make this cutting top and bottom four okay that's better let's decrease three yep that's better however I think would you decrease the font size they are protruding so it decrease the size foreign [Laughter] I think I'm happy so as far as oh we need to give the same color to our submit Button as well so what I'm going to do is there let's go to the top let's define a global variable so if we want to define a local variable we have to put it underneath column now let's Define a variable and to Define a variable in CSS we have to prepare it with two hyphens then the variable name so let's give it a name primary color the value that we do test it over here now let's go down over here we have to use the kind of function curve but it's always named wall and over here we have to use the variable name primary color so it's working now we have to give the same color to our submit button since we Define the input button only want to view color to just submit button if you define the color over here it's going to have the color applied over the search input field as well and we don't want that so we have to Define another block input 5 equals submit background color should be variable primary color this way we don't have to define the rgba values separately and the benefit of that is that if we decide to change the primary color from this color to something else we only have to make changes at one place and there will be applied wherever that variable is used so this is the value but I think we should give it some smooth edges as well to both this search bar and the submit [Music] it's important for the radius let's give it three piece Pizza that's better but let's increase this cutting top 10 pixels and left and right to 15 pixels okay that's better we need to increase this margin between these this items as well [Music] margin left changed from three pixel 3 range to five frame okay let's make Home Credit 700 okay next question okay so we are done with the first top level child of body element and we have successfully finished our navigation path in the next part of this series we will be working on how to bring in the banner in previous episode we built this navigation bar there is still little bit of hiding up that we need to do over here such as these backgrounds that you can see against these categories there should only be visible when we click on them but since this logic is going to be defined in the event listener which is associated with these categories and we yet have to work on that even business so for the time being they are going to remain as such when we finally get to work on that event listener then we will Define the logic which will make these backgrounds only appear and only with the category that has been clicked with that said let's start working on our today's objective so today we are going to start off by creating this footer and then we'll move on to defining this planner so let's get to it let's go and have a look at the footer and figure out the basic structure of the footer so our footer consists of at least two children the first one contains these social share icons and in the second child we have this help and locations in Pharmacy and legal stuff so the first child we are going to Define an unordered list and each of the items in this unordered list is going to contain the four thousand icons for these networks and likewise for the second child we have three more divs in it one day consists of this heading L and these are all list items in the unordered list likewise for the second deal in the second child this is heading and then these are all list items okay and not at least franchise also contains a heading and then these two list items and the rest is styling so now let's go and Define this footer so this is our index.html and as you can see uh Twitter is currently empty now let's define two divs in it the first one is going to be questions here I did with the class name social here and for the second day let's give it class name [Music] foreign related to this link such as the Twitter account associated with our website but since we don't have the social share Network so I'm going to keep it simple and I'm just going to bring the remote now let's go and bring in [Music] our Facebook let's use this one copy and paste it over here [Music] [Music] foreign custom icons and now let's go and have a look in the browser let's go to the demo project and you can see the icons over here again we need to increase their size [Music] 2x class with on these items okay that's better okay now let's define the second child of the footer element so our second base in the footer is got a class name called general info now this div contains three divs the first year is the class second wave has the class name let's make its store location and third view let's do the name start working on the first element in the air team is going to be a H3 element for the heading now the second child is going to be unordered okay that's the help button now let's move on to store location let's give it H3 locations now let's Define Google if I get started and then Paris New York from Instagram now let's move on to Legal again let's give it H3 okay prophecy [Music] now it's defined and not at least cookies and privacy policy that's it as far as our HTML is concerned for the footer we are done with that part now let's go and have a look in the browser okay so this is how it currently looks and we have to now Define The Styling which gives its the appearance of this thing over here so let's get to it so the first thing that we need to do is that we have to bring all of these icons in a single room and likewise for these three divs in the second child we again have to bring them in the single room so that means we have to define the skip property Flex for both of these children of the footer let's go down and since we are starting styling for the photo section so it's better in some kind of bound Ary so that later on when we need to do some modification in the footer section it's easier to find where does our footer lie in the sea of CSS styles test it and put here okay now Within These two comments we have to write all the styling that belongs to footer section so the first thing that we need to do is that we have to define the flex property for both of the children's of the footer so the first child has the class name social share foreign flags and we want these items to be in the center and Justified as well in the center okay they haven't come in the center I wonder why oh that's the reason so the thing is this we have another block inside the social share if we have to define the style property for this unordered list to be Flex not for the div because the div contains just one child which is an ordered list it is unordered list whose children we want to be placed in a single row so let's go and put over here here okay that's better now we need some space between them so what we are going to do is that copy let's give it some margin [Music] margin half let's give it 0.5 percent and the left and right let's make it one person and see how it looks yep that's better we need to remove these dots which appear with every list item and because this is default style of unordered list so we have to go up to UL let's start to learn that's better now let's go and Define the flex property for the second div as well so the second child is called general info [Music] the game display is flex let's have a look okay that's great now we need some space between these three divs and to give them space we have to set its justify contents to be placed between justify contents to be set to space between justify contains space between yep now we have to set the Align items property and this time we are not going to set it to Center because if we set it to Center so if you look at the third child it has just two children so if the Align items has been set to Center this third side will look like to be placed in the center with respect to these two so we want all of these children to start off from the same position or the same horizontal line and then it won't matter if one of the two has fewer number of children so align items do we want it to be rather than starting from the center we want them to start from the sub position so the value that we have to use is this one Flex sorry this one Flex start now visually it hasn't had any effect they still look the same but it's always better to have a property explicitly specified now let's move on to the rest of styling so let's go to the demo and and try to get some Clues from there what shall we do next so our demo has this background color and then there is some space between each of these list items so let's give some background color and then think of how can we put some space between these so since color is only in the second child which is Journal info so let's define background color to be so now we've got background color in our second date as well now we need to remove these list Styles and then we have to think of placing some space between each of these list items since all of these list items are inside this general info so we are going to say [Music] do it so any unordered list which is inside this channel info there to set its list start property so this way this style is going to be applied to all of the three unordered lists which are in three different tips of this journal info div let's change the spelling otherwise the style will not apply okay billion now we have to play some space between all of placed items so I'm going to Define margin bottom for all of these list items this way each one will have a bottom margin and as a result some space between these different elements so again since I am going to apply to all of the list items which are in three different unordered lists so let's try over here let's remove this thing now let's define bottom let's go temporary 10 pixels and see how you look let's make it 15 15 pixels good now we need to Define some margin bottom for our H3 elements as well so that there is space between this H3 element and the first li element so again what we are going to do is that since all of these h3s are within this general info div so [Music] let's put it over here now H3 and again margin bottom let's define the same margin bottom or maybe some more because it's a it's a heading let's make it 25 pieces probably we should have some margin top as well so let's remove this and make it a margin that applies to all four sides so for the top and bottom I'm going to make it 25 pixels and left and right I'm going to take it okay that's better now if you notice some of these headings end list items have capital letters and some have small letters so we have to keep it consistent so again we are going to apply text transform and capitalize each of these letters and since we are going to apply everything inside this another info so we need to have this property applied over here Channel info so this way no matter how nested a child is inside the journal info this property is going to be applied to all of them so text transform and we are capitalizing it okay that's my thing now we have to figure out how can we make these list items slightly grow in size and change their color when the cursor hovers over them like this one so to do that we are going to use transform property on each list items ever class so we have list items in both of the children operator element which is the journal info child as well as the social share child so what we are going to do is that since we want this effect to be applied both of these children's list items so I am going to foreign this Logic on the footer element itself so comes inside the footer here we have to Define transform the easiest way is to say that we want this transform property to be applied to all of these filing properties so this way any of the values for the set properties for this element changes then this transform property is going to take effect then we want this transformation to take place 2 seconds to complete and the way it should start and complete is we want this to be ease in means when we when we move the cursor over it it will slowly start in and when we move the cursor away from the element it will slowly come back to its original form so over here we have defined how shall this transformation take place how long should it take and on which properties change should this transformation be applied so we are over here saying all now again Hotel Li and this time we are going to capture the have a class so when we are hovering over this list item which is inside the footer element following should happen so we want to change the color to be the primary color for each of these items so color is timely color the other thing that we want to do is we want the size of these elements to be slightly get bigger the font size [Music] I'm going to set font size to larger now let's have a look [Music] okay that's better so we are done with the styling the only thing that we need to work on is since this is a footer so this is supposed to be always at the bottom of the page so why do you think this footer is not at the bottom of the page but the reason for the footer being not present at the at the bottom of the page is that after this header we have made the but that main div is currently completely empty so it's not occupying any space on our browser so that's why the footer is the next thing that comes after men and since main is not occupying any space this has made footer get pushed up to the top so we have to make sure that even if our main is empty this footer always remains at the bottom and one of the ways that we can do that is that we have to assign minimum height to our main element so this way even if the main element is empty it will always have certain minimum height and that will push footer always to the bottom let's go and assign this minimum height to our main since we are defining main so it's supposed to come before the button s here height 55 Wing height 45. now if you notice the contents of general info are squashed against the walls of the browser so we want some petting between the contents and the walls of the browser so if you remember we assigned two percent belting to the left and right in the header section so we have to assign the same kind of padding to this second to the second child of the putter so that these contents appear to be aligned with the putter contents so we have to go to the second child of the footer which is channel info and we have to give it the same heading that we kept our heading div in the header section so the top and bottom we kept it to zero and for the left and right we made it two percent okay now they seem to be aligned with the content in the heading div now we are done with the additive we can move on to the we can move on to displaying the banner section but before we move on to the banner section there is one more thing I need to sort out before we move on to deepenger session so far that let's go to the demo project so if you look at the demo project now we have this scroll bar now even if I scroll down I will still be able to see the header and it feels like the product seem to be sliding underneath this header section and the header section remains fixed there so currently this isn't how our header section is going to work if we put some elements in it and we have a scroll bar over here so once we get scroll bar over here and we scroll it down then this header section will be pushed up and out of the screen so to make this header section stick there we have to set its position property to be fixed but once we do that we are going to encounter new set of problems so let's let's go and first set the position property to fix and from there on we will see how to move forward so let's go up to the header section let's put a comment here [Music] [Laughter] now over here we have to Define styling for the header element itself so far we have defined styling for its children but not for the header section itself so let's set its position to be fixed and let's go and have a look in the browser how has this affected in the browser so as you can see it appears that whole organization of the elements in the browser seems to have gone Haywire first of all our header doesn't seem to stretch out throughout the browser bit and our Footwear have also seemed to have gone up as well so what could have gone wrong well before we dissect that out I am going to assign temporarily a background color to our main section now remember this is going to be a temporary color just to explain what's happening let's give this light salmon color so this has happened now we must be thinking that since we have defined the main element after the heading element so this color should start from this position and that will push the main section further down and eventually that will push the footer section to the place where it was in the beginning but for some reason setting the position fixed part of our footer element have not only shrunk its size but it has also brought the main section to start from the very top left corner of the browser So currently it appears that our main section as well as the header section they are both starting off from the same position and since the header is a smaller element so it's occupying less space and Main section is applying more space but they are both starting from the same position but the way we have to find them in the HTML clearly our header section comes before the main section so this should not happen so what has actually happened is that when we assign acquisition to any HTML element other than static which is default and therefore we never Define the position so that element goes out of the normal flow optic elements in the HTML page so now the normal flow is this is the first element and this is the second element in the HTML party element whereas this header is some Rogue element which does not obey the normal flow but then you must be wondering if it's a rogue element so why it has still chosen to start from the top left corner just as we had initially put it there well that's because once you define your position to be fixed for any element it will always start off from the top left corner of the browser so that's why it's starting from the top left corner because its position is fixed not because it was the first element in the HTML body element so that means if we assign position to be fixed for our footer this footer will also be placed over here at the top left corner of the browser so whenever we assign a position fix to any element it will always be placed against the browser so that's why it has come over here now the next question is why is it occupying just three quarters of the browser width and not the rest that's because the contents that are in this header element they are occupying that much is if they had occupied lesser space then we would see even a smaller header element so that leads us to the second part that once we Define a position to be fixed for our any HTML element we have to Define its starting position where we exactly want to place it with respect to this starting position of the browser the top left position of the browser so with respect to that where do we want to place this element we have to define those properties or attributes our cell so we still want it to be placed where it is placed but we want it to stretch out throughout the browser with so therefore the three properties that we are going to Define are we have to say that top to be at 0 means from the top of the browser it should start exactly where the browser screen starts then left should be 0 and right should also be zero what this is going to do is that it's going to make the header section stretch out throughout the width of the browser nothing has happened oh we have defined these attributes in the main section whereas we are supposed to Define them in the header section over here first brilliant now our header section is fixed there is one more property that we need to Define to make sure this header is always at the top and if there is any other elements which are starting from the same position as header they will always come underneath it just like our main section currently is but to make it always the case we have to define a property called Z index for this header section and give it value 100 or some higher value so that index is 100 but now the problem is that that our main section still starts from the top left corner so we have to somehow bring this main section down and start it where our header section ends so the quick fix to this problem is if we give some margin to this main section such that that margin is as high as the total height occupied by this header section this will bring down the actual main section and it will start off right after the header section so let's go to the main section give it some margin so we are interested top since our header section contains two children and each of them occupies eight percent are viewing height so that means 16 of viewing height will bring our main section down so rather than giving it 16 let's give it 20 section of being high so that we can be certain that our main section is actually starting after the header section and it's not being overlapped by the header section okay very end so now we can clearly see that this is the point from where our main section starts and since our main section is at its proper place so this brings the footer section at the proper place as well so now we can remove this color and we should also decrease the margin from 20 to let's first make it 18 and see the effect okay okay 16 is fine yeah now before working on the logic to bring on the banner let's remove this temporary color okay now finally we can work on the banner section now this Banner is also a dynamic planner that means we haven't defined all of these pictures in our HTML they all are Dynamic we request it from the back end and not only this image but also these contents that you see that you can see over here the title and description they are all coming from the backend as well so basically we have to define a turbul in our database where we will store all this information plus the link to this image and once we get this data from the back end we will display it in the banner section that we are going to Define in the main section dynamically three over JavaScript the other thing that you must have mentioned that this Banner is actually a slider so as you can see these arrows this left and right arrow and these pagination links this whole logic is basically coming from the slider that we are using so the simplest slider that we have used is a JavaScript based slider and it's called swipers lighter the reason for choosing this slider is that there are many different sliders available but most of them are dependent on some kind of libraries swiper is one of the most basic sliders which doesn't depend on any external Library so basically we have to include the CDN link for this swiper and then we simply have to use it we don't have to install any other Library if you want to use this file per slider let's click on getting started and there are different ways through which you can integrate this swiper slider in your HTML or in your project so the the method that I am choosing is this CDN based so basically I have to copy this link and insert it in the head section of the index.html page let's go [Music] and let's let's paste it over here now we have link swiper slider CD and Link with our project now let's go back to swiper slider and let's look at what we need to further do [Music] so these are the contents that we need to add to our HTML where we want to add the swiper slider so these three games they are going to act as slides in the slider so that means the image that we want to behave as a slider or slide you have to give it class names like and these all there is should be wrapped around another day which is called swiper wrapper so that means this part is mandatory and beside this part there is another div which is called swiper pagination and then we have two modules so I call Button previous and Swiper button next and we have a module swipe scroll bar but all of these divs are optional for example if you want to have designation in your project this one these blue dots that you can see so these dots they represent pagination so if you want to display this pagination icons then you should include that other div as well this one if you are not interested in that recognition then you can remove it likewise the previous and next buttons these two buttons they are being displayed over here because I I have included these two divs as well I haven't included this swiper scroll bar so it's not available [Music] [Music] so let's go and Define the structure in our index.html file so let's go down where is our main section there it is now within this menu we are going to Define three sections one section is going to represent banner and the section is going to represent feature and third one is going to represent new arrivals So currently we are working on the banner section and your class name Banner now within this Banner we have to define a div with the class name wrapper foreign we have to Define three divs one called the slide one for the pagination and one for the previous and next buttons [Music] swiper height is one day then another div swiper hyphen ation and two more divs swiper button previous and superb button and we don't need to Define anything for these divs this div however the swiper slider deal is supposed to contain sorry this is swiper wrapper and within this div we are supposed to have different views and each of them should have a class named swiper slide and each slide is going to represent one Banner image along with the text contents on the screen but since we are going to Define them dynamically so we are going to leave it empty and this is not wrapper it's just right there so the first topic of the class is swiper and inside that we have software wrapper swiper pagination swiper button previous swiper button next videos now let's go to our MySQL workbench and Define a table in our database which is going to provide all the information related to these vendors since we have eShop selected already now we can create a table right click create table let's give it a class name let's define ID field int family not null comment then let's keep it towards r45 can't be null then thirdly it is going to be let's make it watch our 255 so we can't have a lot of text there we should have enough space for the tech to describe the winner properly now again continuous and let's define the image field which is going to contain the address where our wherever image exists let's make it 255 as well it can't be null either we need one more field status [Music] but then if we reset it to 0 then that when I should not be displayed on the browser [Music] and the default is zero pop your legs create this field for table because there is spelling mistake in the status so let's cancel it and fix this [Music] now we have a table created let's put some data in it let's give its name [Music] more than 50 percent of the test let's set it to one an image the path is starting from the root folder we have a folder named images and in there we will put Banner then a two dot PNG this one row now it's amazing [Laughter] images [Laughter] [Music] [Laughter] Christmas [Laughter] [Music] [Laughter] images okay now let's create those tables by some clicking apply finish now we have five feet but one of the banners have status set to zero so we should be able to display four images in the banner slider on our index.html page now let's go and work on the JavaScript which makes the request over if I can to get this Banner data so let's go to uh Javascript file which is global.css and since we want this request to be made at a time of page being loaded just like the request from the categories so we are going to attach another even listener event Dom content loaded so let's copy this paste it over here now in the second they want to smell we are sending a request to bring the categories data sorry business data request banners and this request is also going to make a fetched request so what I'm gonna do is that I'm going to copy this function as well copy paste now let's go and change this function's name from request categories to request Defenders [Music] now we have to change the url and find because this time another file is going to serve us which is going to be planner.php now this banner.php and menu.php these are different endpoints which are serving us different resources so when we are using this endpoint many dot PHP then we are being served by resource from the database table category so any data that we are being served from a database table that data are data database table is called resource at the front end so at the front end which appears to us as a resource is actually but it have a stable exhibition so this menu in the terminology of rest API is called a resource and this resource is giving us all the categories that we are displaying in the index.html page as our menu categories whereas the second one is giving us another resource called banner and it's going to give us all that data in the banners database table okay so which URL since this is also a great method so let's keep it there and likewise the response that is going to come from banner.php is going to be in the form of Json so the first then block is converting that Json data into a JavaScript object and returns that JavaScript object as a promise then we are using then we are using second block and now we have that response in the form of JavaScript object and over here we can apply different kind of logic so for the time being what we are going to do is that we are committing this whole logic out so let's uncomment the last one over here what we are doing we are just requesting data from the data pair and displaying it in the console then we will figure out how can we organize it and append it in our index.html page so that's why I have commented this part out now let's go and Define this banner.php file at the back end so in our backend folder we have to define a file named banner.php so the top part for this banner.p3 is going to be the same is the top part for the menu.php so I'm copying these these four lines and testing it in the banner.php so basically over here we are as you are requiring database connectivity file so that we have an access so that we have access to our database through that connection object then we are telling this that you are supposed to serve any request no matter where it comes from and then we are checking if the request that has come is it a type HTTP get request if that is the case then we are going to serve it and again what are we serving is we are again going to select everything from so we are going to have almost the same logic so rather than just bringing the name of the category we will bring we will take everything whose status is one and get up is stable in this case is then rather than category so we have to do some minor changes over here so 2 is I'm cooking everything and inserting in the planner.php's if method test now let's go and start my changes so instead of just requesting name we are selecting everything from notificable rather when a table where status equals one then we are executing this statement and if the and if this result variable contains data set or result set then this won't be false and then we can get inside the if block then we are creating an empty array and we are saying while now this time let's move this name because we are interested in whole row that comes from the database and since it's a row we are changing the variable name from name to row let's make it to row edit so what this while loop is doing it's going to get one row at a time from the result variable and applying the effects of method on it which converts that row into an associative array and that array is being stored in this variable named row array now we are pushing this row array into this empty array that was over here we just created so row array now this array is being populated with all the rows which are being fetched from the result set that has been received from the database now the data that we are sending we have to change the indirect's name from categories to Tenors and we are providing the whole array that we have been calculating with each row that we received from the database table if something goes wrong means if statement doesn't execute in that case this Edge block will execute and it will it will inform the user or the front end take something went wrong now let's go to the browser and we should be able to see Dana related data in the console let's refresh and open developers tools okay we have received an object and an object contains a property named banner and this property has as its value and error which contains four elements at index 0 we have an object whose ID is one name is Easter sale this is the URL of the image and this is a status and if you notice we have got id1 2 3 and 4 right the ID id4 is missing click out we set its status value to zero so that's why it hasn't been returned now all we need to do is that we have to display this information as a banner over here in our index.html page now to display my being displayed in the console is it Banner images on our HTML page let's remove everything and the first thing that we should do over here in our global.js file over here is first of all we have to make sure that we have actually received banners so if data not banners then we can be sure that we have actually received banners and not an error message so now we can Define the logic over here so basically what we want to do is that we are going to create divs with the class name swiper slide this over here so now we are going to attract you these banners and assign these step we don't have to write each time that are advances we have to iterate through this banners array now this for each text and error function so we are going to pass one panel at a time to this error function and over here we are going to Define all the logic which is associated with this Banner so the first thing is that we have to create a div with a class name swiper slide and attach that then our image into that div as a background s applied pH element slide class name equals swiper slide now within this swiper record if we are attending swiper slide tips to your JavaScript so over here we are creating a div and we are assigning a class name swiper slide next what we are going to do is that we are going to attach this image as the background for this div Slide the style Dot background image now for this background image we are going to use URL function and we will be using the URL from this Banner object so we are going to use string interpolation and to use the string interpolation we have to use these back tips so this backticks allow us to use a variable name a restring interpolation so first of all we have to use URL function and within this URL function we have to provide equation marks because now we are going to provide the URL so this URL is going to come from this Banner object so this Banner object has different properties and one of the properties image this property so we have to Target this property so the banner object that we have received it has these different properties ID name description image and Status so we are currently targeting this image property because it contains the URL where our image is but this URL is not a complete URL it only contains from the root the path from the root folder so we have to attach the domain name to it as well so http localhost column eight zero eight one this is where the server is running then from here we have to attach the string interpolation so so color sine square brackets and Within These square brackets we have to use planner tops image now the spanner dot image contains slash Images slash banner and then the name of the banner now we have attached this image as a background to this step but as we know that this div is currently empty that means it's not occupying any space in the browser so if it's currently empty it doesn't have contents this image is serving as a background it's not the contents of the image so therefore we won't be able to see this image in order to be able to see this image this background image either this div should have some contents in it or the other option is that we have to assign certain fixed height to it so that even if the div is empty it will still occupy a certain amount of area on the browser so that's what we are going to do slide that style height let's give it twenty percent of viewing height for the time being put it in items now before we go and have a look in the browser we have to attach this day we slide it to the panel so I am temporarily attaching it as the last Tire to this panel just to be certain that we are able to see the image in the browser later on we have to change that so in that section [Music] query selector the class name now Banner section pen child the friend will also do then we have to print this slide as its last chance now let's go and have a look in the browser that if you are able to see this winner in the browser okay so this is how the currently looks since I have only assigned 20 of viewing height that's why we can only see the smart portion of an image the other problem is there as you can see the image is being repeated so we have to increase the height and then we have to set a property such that the image is not being repeated so let's go and do that let's make it 45 percent of viewing height and then background size equals cover this is better now as you can see that these are not being displayed as sliders so now we have to define the logic which makes them display slider and then we will figure out how to put the text and the shop button over each of these images so let's go and make them sliders first and to make them sliders now we have to define the last remaining part that is needed to make some divs into a sliders so to do that we have to initialize this swiper in JavaScript file so we have to create an instance a class name swiper this wiper class is going to come from the DCd and that we have linked in our head section of index.html so we are passing in the class name of the div the swiper div and over here we have to Define certain properties so we will not be using this property we will be defining this property because this way once we have displayed all the images if there are four images and four Images have been displayed in a slide when you click on the next button we will see the first image again so there is going to be this Loop of these images then since we have also used question so we will be using this as well and likewise for the medication we are going to use this one but we are not including this one because we haven't used this program so since we are bringing in the contents for the slider dynamically so we have to make sure we Define this dynamically as well so where should we Define them what we are going to do is that we are going to define a function call Carousel because this slider is also called carousel over here we are defining and over here we have to define the logic that has been given in the soil press writer web page so what I'm going to do is that I am simply copying it testing it over here over here since we haven't used we don't need this direction okay now let's go up where we are defining this now instead of appending these slides in the banner section directly we have to append them in the this Viper wrapper class so let's change this to [Laughter] [Music] sweater last name to foreign [Laughter] let's hope we are able to see those images as the sliders we can see at least this Arrow forward one but not the previous one so most likely we have made spelling mistake in the index.html page yeah a piece let's see okay now we can see these images now we have to now what I'm gonna do is that I'm going to change these images to the one that we have in the demo project and then we'll figure out how to display the text over here as well so let me go and change the images in the database table okay now I have changed the images and we can see the proper images that we have in the demo project as well okay now we have to figure out how can we display the text that we can see in the demo project this one so this is the name in our database table and this is the description and then with each Banner we have this button which we can click and go to some other place where we can do shopping so currently I have attached this button with the index.html page so it will take us back to index.html page but of course if it was not a proof of concept kind of demo project then we would have placed the proper URL for the link where this Banner should take us anyways now let's go and figure out how can we display these in the center of each winner so to do that we again have to go back to the for each Loop and after setting all the properties for the background image now let's define a H3 element [Laughter] [Music] and let's set its text contains to banner.name for the name field from the banner object is going to be displayed as h36 contents then we have to Define a paragraph where we are going to display the description contents of each Banner foreign [Laughter] [Laughter] [Music] paragraph [Music] finally slider franchise the third child is [Music] okay we can see everything here now we have to bring them in the center so we are going to do this is tiling through our CSS file let's go to our CSS file and since this Banner is inside the main section but so where does our main ends over here then our section starts now over here the class that we are targeting is dark smoker slide we have to set its display Flex Now setting the display properly to flex will bring all the contents in single row so we have to set its Flex Direction bottom justify contains Center and align ment of Center now that's better now we have to convert it into this so let's figure out how to give it this look so the first property that comes immediately to the mind is that we have to set its color to white then if you notice this text has shape to attached as well [Music] this one and the size is slightly bigger as well and besides that we have some margin as well so let's go and do that [Music] color to be white let's increase font size to length that's better now let's give it shadow so the first verify that is horizontal Shadow which is in pixels and for the vertical Shadow again two pixels for the ruler I am going to use three pixels and for the color let's give it primary color [Music] okay that's better we need to increase some margin margin bottom so that is going to be applied to all the children of this swiper slide so copy all right this and then Express means all the children of the swiper slide Apache import let's give it 0.8 frame its effect okay that's better now we have to work on this short button so again since this button is one of the children in the swiper slide switch is the same color as primary color and these font size is even bigger some background color is primary color font size is 2.5 gram I think that's too much let's make it 1.59 now give it ready chopping bottom let's make it five pixels left and right hand pixels okay not bad now let's give it smooth edges and remove this border so order bottom but the smooth edges five itself outline is none so it's not water bottom it's water radius the Border color let's give it same color as the butter background okay that's better now I have given this one the text has different color as well and it is slightly higher heading but but for this project I am keeping it this way we have completed our navigation banner and footer now we are all set to implement these two sections new arrivals and feature products so in order to bring the products from the back end we have to first of all Define tables in the database table from where we have to fetch the data so let's go and create those tables we are going to create two tuples first table is going to represent categories and the second table is going to represent the products themselves so let's go and create those tables okay so the database that we have created for this project is eShop and we have only and we have only created two tables in its profile and our contact we have already created this categories Temple [Music] obviously we have created that's why we were able to see those categories in the browser how can I forget that never mind and so now we only have to create just one more table which is going to represent our products table so let's create that level pH level with the name [Music] product [Music] cost column is going to be ID integer type primary key and Auto included the second one let's give it a name category ID through this column we are going to link the category of this product with the with one of the categories in the category table so this is going to act as our foreign key right as well here's a try [Music] final okay okay then we have the name of the folder what chart is fine it can't be null product name should be unique then the description for the product [Music] okay it's for the description watch our let's make it maybe we can keep let's move on let's give this one the name choice [Music] let's give it decimal or let's use float okay then [Music] a column where we are going to store the path for the image Associated image with the product okay let's make it 255 again we are going to not include any mandatory properties so it can be null if currently we don't have any image associated with it so it can be empty then it does [Music] it will automatically select tinyint [Music] okay it can't be melt and the default value is 0. put it on let's select date time and that the default value for this is going to be current date and time so Now function and it can't be null either but this is going to be automatically provided by the dbms system itself okay so we are done with the fields now we have to make our 33 IDC this one a foreign key with which we are going to link our categories table so let's click on this foreign Keys here now we have to provide any name that we want to give this foreign key so let's make it f k underscore one foreign key one and we have to choose here a reference table so we only have Banner's double and category double so we are going to link this foreign key with the categories table so eshop.com is database and the category is one of its typos and over here this is the column from a current table that is product table that we want to turn into a foreign key so this is the table that we want to turn into a foreign key and from the reference column we have to select the one of the columns in the category table with which we want to link this foreign key so we want to link it with the primary key of the category table okay and over here it's saying that once the category table is subtited what shall happen to this associate foreign key so if there are any rows in the product table whose category ID is linked to one of the categories in the category table and then that ID is changed then what shall happen so if the value is updated we want it to Cascade that means the update should also be applied automatically to all the foreign keys in the products table and what happens when that category is delete in the category table so if the category is deleted all together what should happen to the products that belong to that category so if we select again cascad then all the products that belong to that category will also be deleted so we are going to select it to take no action because we might not want to delete those products rather we might want to change the category name for those products so on the lead if the category is deleted nothing should happen to the product associated with that category however if the category is updated then that effect should also trickle down to the product table as well now let's click apply so let's check that we have selected the correct options it's going to create a capital name product in eShop ID is International Auto increment and this ID is also primary key so where does it say this primary key we haven't selected this that's why we couldn't see the primary key option now let's click apply now over here it says our ID is a primary key then category ID into not null and we are turning this category ID into a foreign key which references ID column of the categories table in eShop database so on delete note Sim should take place and on update the upper should trickle down to our products table okay so we are happy with the statement now let's take a guy and execute it finish okay now we have a product stable now let's start filling in some data in it so basically we don't need to provide the IDS because it's going to be generated automatically the category is supposed to come from a categories table season so the main has it1 women his id2 boy ID3 and so on so all the rows that you are going to fill in must have the values from one to six because if this row has the category ID one that means it belongs to man's category if this row has a category id2 that means it's belonged to women's critically likewise name you can select any name I'll be just saying boy one boy two girl one and girl three and likewise in description again it's going to be some random text price again it's up to you images I'll be providing the path through the images folder so each category has different folder inside the images folder in the in our project just like what we did with the banner table status again I'll be putting one over here otherwise it's going to be default to zero which means it won't be returned in the HTTP reply and edit on is going to be again filled in automatically so since there is no rocket science over here and we have already covered this part in the part two as well so what I'm going to do I'm going to fill in this information and then we'll continue from there okay so we have created all the categories so in total we have 45 products the product with category one are all Mains category and product with category id2 are all women's products and with the category ID3 are all voice products likewise with category id4 we have girls products category id5 baby's photos category id6 accessories products okay now we are all set to start working on our code since we are going to work on our new arrivals category and featured products category which are both going to go as sections in the main element so let's find out the main element [Music] now this penal section after this Banner section we have to Define one section for the new arrivals and one section for the featured products so we are going to make our new arrivals our second section new arrivals let's create another section for the featured products [Music] um I'm thinking of clicking this feature products uh second section the reason for doing that is that since the contents of this feature products are going to be displayed randomly each time we refresh the page whereas the products in the new arrival section are going to remain relatively static and the new products are added in so since this is going to make our website more Dynamic and more different each time we refresh the page so that's why I'm making this feature product second section and new arrivals our third section so now let's start working on the featured section so in the featured section everything is going to be brought in and integrated dynamically through JavaScript once we have got the data from the back end the only thing we are going to put here manually is the H3 element maybe let's make it H2 now let's put the text feature let's make it simple feature product now the rest is going to be stitched in dynamically so now we are going to work on our JavaScript through which we are going to make a request to the backend so that means then we have to go and Define the PHP logic and then once we are able to get the feature products and display it in the browser only then we'll be working on the Styles so this time the styling is going to come at the end so let's go to JavaScript and make a request for the featured products lower back end now since these feature products should also be brought in the moment we enter the website address in the address bar that means we again have to attach another event listener with dom content loaded event of the document so let's copy this and paste it now we only have to change the name of the favorite list event handler so this time we are requesting featured products so request featured and since the the logic is going to be almost same is the first two event head event handler so I'm going to copy this whole function and at the bottom I'm going to paste it so let me put it for this call corozal because this is kind of our helper function I'm going to paste it thank you [Music] okay now we have to go and change the name from request categories to request featured we have to change the url from the menu to feature.php so that means we have to Define this file in the back end then again we are not sending any data we are just requesting to pull in some featured products so therefore the method is going to get nothing changes over here once we get the reply so this part is going to be changed okay since this part is going to be different that is once we receive the data how are we going to display it and integrate it in the browser so that part is going to be different so we are going to comment out everything except for this console of data because we want to see in the console the data that we receive in once we are certain that we have received the data then we will figure out how to integrate it in our Dom so this is the starting bracket let's go and check where it ends since this is wrapped in a rectangle so that means this is currently selected and that also means that it's matching closing bracket will also be in this rectangle so we have to look for that one there it is so that means that's the end so we have to comment out everything in between since we want to keep the console.log statement for the rest comment out okay so we are done with our front end it wasn't it quick because actually the hard part which is displaying it and integrating it in the Dom is still left to be done but for the time thing we are done with our front-end code now let's go to the backend and create this file feature.php I didn't put the name over here feature.php now let's go to the backend now now feature.php now for the back end again we can actually copy one of the PHP files because we are going to make slide changes the rest of the logic is going to remain same so I'm going to copy the whole winner.php and test it in the feature.php file now we have to change this SQL statement so the first thing is that we have to change the table name from Banner to product that was the name that we gave to our table and we are asking for everything where status equals one but now in order to make it Dynamic so that each time it gives us three different photographs randomly so we have to add some more tweaking to this statement so if we are supposed to put like this further by ascending what that would have done it would have returned all the tables in the product table starting from ID number one up to the last one here we put it the same name the ESC then it would have again returned all the rows but starting from the highest ID number up to the number one ID in the bottom if on the other hand we say order by and then call a function called rent that means random so what this is going to do is that it's going to assign random numbers to each of those rows and then it can return those rows randomly so there is no ascending order according to IDs there is no descending order according according to ID rather all the rows are returned in random order but we don't want all the rows we are only interested in displaying just three products so we can place limit three that's it so in order to be certain that this is actually going to work I'm going to copy this statement between the quotations and let's go to our workbench and over here let's let's paste it so select everything from from product order by random which says where is not valid at this position [Laughter] okay now let's try to run this statement so as you can see we have only been returned three rows which is limit three and let's check their IDs one is ID number 45 one is ID number 44 and ID number 19. two are from the accessories category and one is from the women's category so let's execute this statement one more time and this time we are going to get different result okay so id21 6 and 8. one more time eight six and eleven so as you can see every time it's returning us three different fields so let me copy this insert it back over here okay [Laughter] and we are also certain that this statement executes properly because we have actually executed it in our workbench so now let's look at the rest of the code and see what kind of changes do we need to do so again we have to keep everything over here we don't need to make any changes over here except for the associative error that we are returning is just one object that need to have a different index name since we are returning featured products so I'm changing it from Banner to feature and again if something goes wrong then this is the message which it gets displayed okay so turns out we are done with our backend as well now let's go and check in the browser if we are able to get this data three featured products so let's refresh it and now look at the developers tools okay this is featured product the first one returns as the banner second one returns is the categories I'll look into the featured products featured object sorry and now the object that has been returned consists of one property named feature name feature and its value is an array which contains three elements and each of these elements are objects themselves so at index 0 we have this object with the category id2 description women's clothing IDE 14 images NM price and everything now we have to bring this information and put it in the browser so that it's being displayed in the browser so let's go and do it so let's go to globals.js and over here let's remove everything now over here first thing that we have to check is that we have to make sure that this data which is the main object that has been returned does it contain a property named feature so if it does contains a property name feature that means we have actually got our products then we can go on and Stitch them in the Dom otherwise if we haven't got this featured property that means we have got replied from our backend but it contains something else so obviously we cannot assume that something else to be product and try to stitch them in the browser so if let me create a variable okay data dot feature so this way we only have to write feature so if featured means if this feature contains data then in that case it won't be null in that case we can Define all the logic Within These yellow curly brackets that is going to display these products in the browser so before we write down any logic within this if glove let's go to the demo project and try to get an idea of what we are trying to build over here so this is what we are trying to build so for the new arrivals we have one section for new arrivals and then basically this is the card that we want to build and likewise for the feature So currently we are working on featured but obviously you can see the logic is going to be the same okay so let's look at one of these cards so that means we are going to have at least one div which is going to contain each of these cards and for each of these cards we are going to create within those cards at least two top level children one is going to contain image another is going to contain this information the product's name and the price so what we are going to do is that we are going to create one div and we are going to give it class name catalog because that tip is basically going to represent the catalog of featured products and within that day we are going to create these different cars for each of these products that we have received so let's go back to our JS file so the first thing is that we have to get reference to that section in which we are going to insert all of these elements so since the section that we are targeting is featured section we gave the class name this featured products so first of all we have to get a reference to this section [Music] subconscious feature section document dot by the selector and the class name was featured products since this feature is an object let's go back to our console [Music] okay now since the value of this featured property is an array so so that means we can iterate over it using for each Loop so feature dot or each and since for each Loop takes an arrow function which will be given one product at a time from the featured array so now within the body of this Arrow function we have to define the rest of the logic so as we discussed we need to create one div which we are going to assign the class name threat Lock And since this catalog is going to be the div in which all the products are going to be appended so that means that they must be defined outside the for each Loop otherwise it's going to be we overwritten with each expression so const let's keep this simple catalog is document dot create element let's give it the class name same class name so that it's easier to remember okay it's actually it's that incomplete so now we have access to our featured section and we have created one div with the class name catalog now let's go inside the feature tip sorry the for each Loop and Within These curly brackets let's define the whole logic so over here again we have to create one div with a class name card this card is going to contain two divs as its children in one day we will insert the product's image and in another day we will display the product's name and price so let's start with the card so quotes [Music] let's give this card the class name card as well we must assign those classes because using these class names we are going to Define their CSS styling as well as if you have to apply some processing using JavaScript so we need to have some kind of unique identification for those so therefore it's important to have class names assigned to them accounts image to create element here thank you image data class name let's make it hard image second child which is description View and let's give the class name card description give to the card so card.10 child the first chart is going to be Image Day power Dot a friend child description there but currently both of these divs are empty so now we have to Define an image element and attach that image to this image team and we have to Define two paragraph steps one paragraph is going to contain the product's name and another one is going to contain the price those paragraph are going to be attached to the second div the description day so now let's create image element pause image is document.ph element image now image.source equals we are going to use string interpolation so that takes now we have to provide the URL wherever image lies so HTTP localhost x081 now the next part is going to come from a this product which represents this whole object so from this whole object we have to Target this image property so let's go down and over here we have to Define product Dot so this is going to contain the rest of the URL which is going to be attached this part as a result it's going to give us the URL where our image lies and and since this is an image so another request will be automatically made to our backend and image will be automatically brought in we don't need to do anything else now we can attach this image to our image table and we are going to append this image now we have to Define two paragraphs one is going to contain the product's name and another and other one is going to contain the products price and we are going to attach those two paragraph as children to description name p document or create element paragraph let's give it a class name it's not name it's name let's create another paragraph [Music] and vice p let's give it the class name product price now obtain these two paragraphs as children to description there so description and then description D dot friend chart high speed okay that's it now outside this part each Loop this one so when we reach over here that means our catalog has been populated with different cards and each card represents one product but this catalog is not yet stitched over Dom so we have to obtain this catalog there is a child the featured section so feature section dot append child and we have to attach this catalog here that's it I hope this will display all the images in the browser though they are going to look ugly because we haven't defined any styling but there will be there nonetheless hopefully fingers crossed doesn't seem to let's have a look cannot read properties of null reading a friend child so apparently it looks like this is the element which seems to have so it seems to contain value null but it should contain reference to our feature section so I wonder why caught it since we are using queries and we are targeting featured Section 3 class name so we must put a dot over here without this door the theory selector will look for an HTML element with the name featured products and we don't have any HTML element with this name so hopefully now everything will work fine and we will have an ugly looking products in our browser [Music] we should have by now so at least we don't have any error in the front end and our back end seems to be working fine as well the only thing that we need to check is [Music] here we attached all these divs in the catalog div so let's start from the beginning in the Far East Loop we are creating a day with the name card assigning class name then we are creating another div imitative assigning class name then description div assigning class name then we are appending this image div and description div is children to car then we are creating an image and it's to its source we are assigning this URL then we are attaching this image to our image div then we are creating name paragraph a paragraph giving it class name oh text contains where are the text contents okay so name p Dot text contents equals fraud dot name because this front object contains all the fields for each of the products that you have receipt from the Tekken then we will do the same for the price so Price p dot text contents equals now this time we have to append dollar sign for the price that we have received so I'm going to use dectix so false data science is for the symbol and for the for the string interpolation second dollar sign curly practice and within those curly brackets fraud dot price okay now we are attaching this name key to description view Price p to description there okay okay so we have to attach the card to this catalog as well because we have been creating cars but we have never attached it to the catalog div so at the last statement in the for each Loop catalog dot hand child let's applying the card element I'm not making any promises but hopefully this time we will be able to see the products in the browser let's go refresh okay now we can see the product now let's go down this is product one its name and price this is product 2 name and price and this is product three okay now let's refresh it and hopefully we will see different images yeah Yep this is one image which this is the this is the repetition this is a different image [Music] more time so we keep getting this image at least never mind at least we know it's random now all that is left is that we have to give it styling so that these images look like these images so let's go to our demo project and try to figure out what kind of styling shall we apply okay the first thing is that the heading is in the center so we have to bring our heading in the center as well currently The Heading is [Music] left Justified besides that we have to give it some margins and headings as well and then for the catalog we have to give it some padding and then we have to define the display property to grid so that we can only get three products per row and then for this we have to again set its display property okay let's go to global.js sorry style.css now since this is going to be more like a general type of styling which is going to be applied at many different places so I'm going to go at the top because at the top we have defined styling which is General so we have root thin body and hidden since everything is inside the body element so this is also kind of Journal so I'm going to Define all the styling for the catalog and cards over here [Music] then let's start with H2 now again this H2 is going to be in the feature as well as the new arrivals so this is also kind of Journal text align property to Center now let's define text transform let's make it uppercase let's give it some margin so for the top and bottom we are going to make one frame then we'll see how much well let's maybe 1.5 frame and for the left and right let's put it put zero maybe we should capitalize it rather than a focus okay that's better now let's go for catalog [Music] since this catalog is going to contain different products in their own respective days with the class name card the first thing that we are going to do is that we are going to set its display property to grid because we want to display three products per row and to make that happen we have to set another property which is grid template columns and since we want three products per row so I'm going to use a function which is the feed and this repeat takes two parameters the first parameter is going to be the number of columns per row so I want three products so therefore three and then for the next parameter we have to specify that whatever is the total width of the row in which these columns are being displayed how much space shall be occupied by each of those columns so I want it to have equal spacing and here since we are talking about columns per row so that means this is this represents the width so we are saying divide the total width into three parts and assign one part to one product then let's set margin to Auto this way if there is any space still left then these columns are going to be properly aligned in the center okay now let's work on individual products which are presented to your day with a class name card and since this this car contains again two divs one is representing the image and another is representing the price and the name of the product so again we are going to save its display property to grade but this time instead of placing the elements in columns we are placing the contents of this card div on two separate rows so therefore we have to set its display for the grid template rows we have to select because now we want each child in a separate row and since we know that it has two children however the first child contains the image and second child contains the description and since we are talking about different rows that means over here we are talking about how much height shall be reserved for each of those elements so we want to assign more height to the div which contains an image and less height for the day which contains description so what we are going to do is that whatever is the total height which is being assigned to this grid so we want to divide into four parts out of those four parts we want to assign three parts to the image tier and one part with the description so to say that we are saying 3fr and one f r so total height is 3fr plus 1fr that is 4fr so whatever is the height it's being divided into four parts out of those four parts three parts are going to be assigned to the first child which contains an image and the one part is going to be assigned to the description View we are going to assign margin 10 percent of bottom and 10 left and right so that between those cards we can see some space around okay now let's go and have a look in the browser okay so this is how it currently looks this is first Cardiff and its image which is occupying a lot of space and then this is the card second child then as we move towards the right we can see the second child our second card [Music] over here okay this is a third one now since this image is occupying a lot of space because we haven't yet specified how much the image should scale with respect to its container so now we have to do that now since we know that the image is inside another day which is named card image so we are targeting an image which is inside a deal with the class name card image so remember this is the class name that we gave to the deal which is the first child of this card and within this deal the contents of this div are actually an image so we are going to say x with hundred percent and then object free and set it to contain so this will ensure that the image is scaled down such that it's going to fit in the container in which the image lies now let's go and have a look okay so as you can see the images have been scaled down to fit inside its parent div now we have to apply rest of the styling such that it creates this look so first of all let's go to the card and we have already given it some margin okay now let's give it background color and the color is light steel blue fits better but we need to now give some margin to the card as well not much the margin is already there heading let's give chopping bottom let's say five pixels and left and right make it eight six okay that's better probably we should also make half and bottom eight pixels as well so that we have same amount of heading all around it so make it pixels now we have to give it smooth edges so water radius let's make it five pixels okay that's better now let's give the image smooth edges as well border radius again five pixels okay now we have to define hover properties at such statement we hover over a some box Shadow sheet of here okay so for the box here row we have to Target this image cover our super class so let me copy this first probably now in the hardware image which is inside the card image tube let's define box Shadow now since we want the Box Shadow to appear all around so therefore we have to set the vertical offset and horizontal offset proper values to be zero then for the bullet let's make it 20 pixels and for the spread let's make it 10 pixels and quarter color we are using the primary color okay now let's try to hover over them okay that's better now look at the width of each card in the demo so they are slightly smaller than the one that we are building so we are going to shipping the size of each card and then if you notice the Buller effect over here is slightly more prominent in the one that we are giving so to make it more prominent what we are going to do is that we are going to decrease the cutting that we have assigned to our cars in the in the project that we are building then perhaps this Builder effect will be more prominent so let's go and make those changes and see how it affects okay so first of all let's go up to the catalog div itself because this is where all the divs are all the cards reside so I'm going to set its a bit ninety percent off window so this will decrease the overall width of the catalog in which all the cards reside and as a result this will showing the size of the cars as well okay much better now let's decrease the cutting as well so let's go to the card and for the settings I have chosen 8 pixels so let's make it 5 pixels yeah that's better now the blur and spread effect is more prominent maybe we should decrease calculator clock even more foreign yeah I think that's better okay now we should work on styling the the description there so we simply have to bring them to the center put some margins and settings and make the font size slightly bigger okay so let's get to it so let's go down and since the class name for the second do is part description I think so since we have two paragraphs inside the card description so that means here we can only set the margins and settings so let's first of all let's go and start with the paragraph itself let's make it next align Center setting top and bottom let's make it 10 pixels and left and right zero yeah that's better now we should have some space between the image and the description so now let's start with the card description there and simply give it some heading on top so heading top let's give it 10 features pixels okay now we should Target this form and slightly increase the size so let's go back to the paragraph let's make it 1.2 Ram yeah that's better maybe we should also make sure that the name of the product is also capitalized okay okay so I think we are done with the we are done with the styling feature products now we have to work on the new arrival sections so human right section is going to be exactly the same as featured products the only thing different is going to be the name of the section in which we are going to insert these elements and even at the back end the logic is going to be almost same except for this order y class which in the case of featured products was random function and in the case of new arrivals we are going to order the rows in descending order and then return the top three ones so this means we are going to have almost the same code both at front end and back end so let's look at the front end and try to figure out how can we refactor this code such that we don't have to rewrite the same code again so the parts that are similar in both front and backend we are going to put them in a separate function and then wherever we need to use that same code we are going to call the function so let's go to our Javascript file and try to look for the code that can be resected so the first thing that we have to do anyway is we have to attach an even prisoner with the Dom content loaded event so now over here instead of requesting featured products we are going to request new arrivals then let's go to the featured products foreign so this is the function now even though we can see this reputation of H everywhere wherever we have made the request to the back end so this part is same there as well but for the time being we are ignoring this part and we are only focusing on this part once we get the data so the second then Clause inside this second then class everything is going to be almost the same part of a new arrival except for the name of the section in which we are going to insert these contents so what I am going to do is that I am going to copy all of this and comment this out [Music] we have to comment this output from here if featured so we are going to comment this if section and this is the yellow color package so this is where our if section ends so copy now we have to put this whole logic in a separate function [Music] what should we call this function foreign [Music] catalog and this function ometer should take the data data the product that we want to populate in the catalog so let's give the class name and then the catalog name let's make it just catalog these two things okay now let's paste everything over here that we copied from the this block so over here instead of featured we are saying if products then next over here we were getting a reference tool to the section in which we want to insert this catalog so now since we are turning it into a general function so instead of getting a reference to this featured section directly inside the function we are receiving a reference to it in this way if we want to insert the elements in the featured section then this catalog will represent the featured section if you want to insert the data in the new arrival section then this catalog will represent the new arrival section in fact let's make it catalog and because we are creating a day with the catalog and then we will insert this catalog to this parent so now this parent will represent the featured section for request featured function and this will represent new arrival section for request new arrival function so now we have commented this out now catalog we are creating this catalog and class name is catalog it's going to remain the same for every section and we have to change this feature to this product because we changed the name so products are for each [Music] everything is going to remain the same over here instead of featured section we are going to say catalog parent the rest is going to remain the same I hope I have changed everything now let's go back up [Music] and [Music] we have to get the reference to the section in which we want to insert this catalog so in this particular case sorry in the case of featured request featured so we want the we want the reference to feature section and then next we are going to call popular and the first thing that we have to provide is going to be this featured [Music] so this since this feature contains the products so we are passing this and the second part is going to be the section in which we want to insert this catalog so in this particular case it's the featured section so the threat knob that is going to be created by this popular catalog function once it has been populated with all the products which are coming from this featured variable or parameter then the whole catalog is going to be inserted into this feature lecture now let's go and test it out in the browser and see if our refactoring is working so let's refresh okay so we are able to see it so that means our refactoring is working now next time when we are creating this request new arrivals function so we don't have to we write this code code [Music] okay so our this function has shortened a lot now we have to do the similar Logic for this function request new arrivals so what I'm gonna do is that I'm going to copy this function because featured [Music] request new arrivals start request new arrivals and let's test it let's go R and over here we have to change the resource name from feature to you let's make it new arrival [Music] then it's again going to be a get method we will get I promise we are converting it into two JavaScript object and then we are and that object is being returned again is a promise so the second then block and over here again we have got data but this time this data object is going to contain a property named so we have to make sure that this is the name that we gave to our associative array in the back end okay change the variable name as well new arrivals [Music] three new arrival section instead of saying pick your product let's go and check the class name [Music] this is new arrivals [Music] new hours now we are calling populate catalog function but we have to pass your hours variable as a first parameter and new arrival section variable is second parameter and we are done with the front end logic for the new arrivals now let's go and Define this file at the backend new arrivals [Music] new arrivals.php okay now this new arrival.php is going to be almost same as the featured file so I'm going to be everything and testing it into new arrivals now with the first thing that we have to do is we have to change the order by expression so order by [Music] what was the exit parameter [Music] it's added on [Music] edit on and since we want the most recent one so they are going to be at the bottom so we are saying order by edit on and descending then the next thing that we have to do over here is instead of giving this associative area name feature give it to me [Music] saying that we are done with both front and in back and for our new arrival section and now let's go and have a look in the browser fresh methane so at 12 request new arrivals is not defined did we forget to change the name or make some spelling mistakes [Music] control F new arrivals one not one so we have definitely made some mistake spelling where we are defining this function which happens when you copy stuff oh we haven't changed the name at all so request new arrival now it says okay now we haven't got any error this is featured products and this is new arrivals but it doesn't have the heading so to be certain that this is coming from the new arrivals I have to refresh the page and if I still get the same images then that means this is actually coming from the new arrivals resource [Music] because we are ordering it by the most recently edited element and these are the most recently added elements now we have figured out why did we miss the heading did we not give it to our new arrival sections click Start HTML Oh Yes actually we haven't [Music] find any H2 sets um any element in this new arrival section [Music] arrivals oh okay it should go over here [Music] okay good [Music] okay so we are done with the featured in new arrival section now we still have to work on our refactoring part because we can already see repeatation of fetch requests okay so as you can see we have four fetch requests and this part is kind of same everywhere so we are trying so we have to try to refactor this fetch request as well so let's go down and let's create option [Music] I'm going to give it function name it's called okay so this page card is going to take certain parameters let's go up and try to figure out what are mandatory for the time being later on we will keep on updating our this fetch call function as we progress further along this project and make request other than this gate and then we will eventually have to handle the cost at the front end as well so that means we have to add some more information in Fetch request but currently this is all the information we have so we are trying to refactor this page called according to this request so this fetch text the endpoint URL endpoint where this request is supposed to go and if you notice in all of the four phase requests this part is same the only thing different is the the ending part the actual file where this fetch request is supposed to go so we can again extract this as a separate variable a global variable that we can use in the fetch request or we can make this variable in the fetch request as well so let's try to do that so we are going to make this a local variable [Music] URL is [Music] localhost 8081 then user folder and then backend then slash okay so this part is going to remain constant so therefore I have created a constant with the name URL now this part is changing with every request so we have to provide this as a parameter and then again this method is correct so we have two options we can make this a local variable as well but later on when we are using the methods other than get such as post put page then we will have to provide the value for this method as a parameter so it's a good idea to straight away make this method as a parameter as well [Music] so the first function is going to be resource name and the second is going to be method and its default is get so that means if we don't provide it it's always going to be there so so far these two are the pieces of information that we currently have so we are going to refactor this fetch request according to these two pieces of information let's make the first call now since we have this URL part and this endpoint bar so we have to concatenate them together to get the whole URL so URL Plus resource then the next part is actually an object currency we have just the method method attribute which is going to come from over here okay so this is the method property of this fetch request and this is its value which is coming from this parameter okay so next to this page now we have to use then clause the first thing is common in all of the four fetch request which is the response that we get we have to call Json method on it and this will return us another then block so let's create that same block [Music] here we will have actual data and inside the body of this this Arrow function which takes data as a parameter and this data contains the actual response now we have to define the logic over here and remember we have got things which are different let's go down and put the sketch block [Music] display the error in the console now we will think about what shall we place over here okay so since this is the part where we are going to apply different logic depending on the reason we made this fetch request so if we made this page request to get the categories then we have to attach those categories in the header section if we made this Flex request to get the new arrivals then we have to call the method for the new arrivals once and if we made this request for the featured one then obviously we have to apply different kind of logic so that means over here we have to think how can we manipulate it [Music] so that means once we enter inside this function we have to think of how can we handle different situations because situations are different in every fetch request when we reach this part so what we are going to do is that instead of handling this part over here we are going to call another function and we will pass this data to date function and that function is going to be different for each of these fetch requests so that means thanks a little bit [Music] so we have to call some function let's say candle response and we will pass this data to that function but this is again one function but even that doesn't solve any problem because we are going to have different kind of data for different fetch requests so we want to handle them differently so that means putting a function name over here will not solve our problem so what we are going to do is that when for this fetch call method we are going to pass third parameter which is going to be the function that is going to be called over here [Music] so let's give it a name call back and over here let's call this callback function and pass this data now this callback function can be different functions so whichever function is pause at the time of calling this function over here that function will be called inside the body and the data is going to be passed to that function now since this method parameter has a default value assigned to it so that means this should come at the end foreign value to any parameter that parameter becomes optional so that means at the time I'm calling this function we can omit this parameter and for those which requests which has a method gate we are going to omit the third parameter so that's why it must come at the end so any parameters that have default value assigned to them they should always be at the end now let's go up let's start with the fetch request for the categories so over here we were sending FX requests to get the categories so what we are going to do over here is that since this part so basically everything inside this function [Music] and first of all commenting this out so now our request characteristics function is basically a function with empty body now let's call this function fetch calls and since this part is coming from the URL which is a local parameter to this fetch request so we only have to provide menu.php then second parameter should be the function which is going to be called once we get the reply from the server so since this is the request category and that callback function is going to handle the data that we are going to receive from the server so I'm going to call this function response categories now I'm going to Define this functions response categories as a local as a local function so this request categories that means this function is going to be defined inside the request categories function [Music] now this function is going to get the data that has been returned from this server so now over here we have to basically Define all the logic that handles the data which was this one so everything in between these curly brackets so basically let's start with navigation copy we need to copy copyright so copy of paste it over here and let's unblock it okay so we got the data we are getting reference to navigation so if data contains a property called categories then we are creating URL and appending this okay so that's it everything should work fine now now let's go and test it out in the browser okay so categories are not usable oh okay for some reason this user and front end is getting attached to this URL so let's try to figure out why this is happening okay so I have identified the problem I forgot to put everything over here [Music] and now we can clearly see the category so first page call is working [Music] now let's go up and clear this path [Music] okay so as you can see the code has shortened by great degree and when we apply this refactoring to rest of these three fetch requests so it's going to get even short so basically what we are going to do is that inside the function which is which was making fetch request we are basically using this facade this is called facade design pattern in which this function is kind of hiding all the nitty-gritties of the fetch call and we are just given with this simple one segment and behind the scenes the hfh request is making the call but we don't know about that only inside this function all those nitty gritties are defined so we don't have to define those nitty gritties everywhere okay now since we have passed this function is a callback so that means the actual fetch request once it gets the data it's going to call this function and when this function is called it will get the data which has been received from the server so over here inside this response function for the response categories function we are defining all the logic which attaches thet categories into our Dom now we have to do the similar Logic for the get correctly products so so we have any idea defined we have to do this we have to define the similar logic or request Banner so again let's first of all comment out everything which is inside the dependent function now let's use this function call Fetch and we have to pass the actual resourcing that we are interested in which is PHP over here we have to define the quadratic function so since this will return us the response break from the server related to the banners so response trainer and again let's make this Nina function Splendor and this will have been passed the data from the server over here we have to Define this logic over here so if there are better then everything copy and paste it over here and comment let's go and check if you are still able to see the banner good so we can see the banner over here so that means this refactoring is working fine as well now let's go down and of everything [Laughter] now let's work on the request featured call so over here again let's comment out everything which is impacted we request feature function and since we have already already applied one set of refactoring so if this one looks smaller than the other two calls and we are going to make it even more smaller so let's call now resource which is PHP then callback function so response featured [Music] now inside this let's make this local function our inner function response feature this will receive all the data return from the server and over here three lines of code okay first now since this featured function has already been one set of Reflections applied in the form of this popular catalog function so that's why it's very small now let's go and check in the browser if everything is working fine good we are still able to see the featured products so it's working good [Music] which we already have commented out okay now let's apply the refactoring to the request new arrivals as well so again the first thing let's comment out everything between brackets fetch for and let's provide the URL endpoint which is new arrivals.php now let's provide the call with function which is forms [Music] and let's define this response new arrivals as inner function response new arrivals it will receive data from the second piece 3 lines of code copy of test uncommon let's go and have a look okay so we can see new arrivals so that means it's working as well now let's okay so everything is working and as you can see we have much less code than we had before now even though we are done for today I made one small mistake in my second tutorial so let's go and fix that that mistake was basically in my CSS which was in the footer section basically I had defined some transitions such as when I hover over it the list item should change color and smoothly get slightly bigger but as you can see it's not happening smoothly this transition is not happening smoothly rather it's happening quickly that's because while defining this transition instead of using the word transition I use the word transform so we need to go and change the property from transform to transition which is over here so I have to set it here and I have to change the time from three seconds towards one second otherwise it's gonna take edges to get this transition completed refresh let's go down okay now as you can see this is much smoother okay so with that we are done with today's Target as well in the next episode we will be working on bringing in the categories related data and it's going to be much easier because we have to basically apply the same styling logic over here in the same way to integrate this catalog into our HTML page so everything is more or less complete just the smaller minor things that we have to do and then we will be done for that part as well in the previous tutorial we managed to bring these feature photos anywhere I will come back in and integrated them into the room therefore we are able to see it in the browser in this tutorial we need to work on these categories such that when you click on any of these categories the products related to those categories should appear and rest of the contents of this landing page should disappear except for the header and this footer so that means this Banner should disappear as well as the feature products and new arrivals should disappear as well and the only product that we should see must belong to the category that we have clicked the other thing that we need to work on is that each of these menus should not be highlighted in the beginning and only the category that has been clicked should show this background the blue background and the rest should not have any background so this is another thing that we need to do and the third thing is that when we click on any of these products whether the project is a feature product new arrivals or one of the categories products when click on them we should be able to see an overlay which covers our whole browser and within the center of that overlay we should be able to see all the information related to the card or the product that has been clicked and from there we can select the quantity as well as edit to the card let me show it in the demo project so this is the front end of our demo project and as you can see none of these menu items are currently highlighted and when we click on one of these menu items such as this Devi then as you can see the banner has disappeared as well as new arrival and featured products and only the products that we can see are related to the baby category women and accessory now when we click on any of these items we should be able to see this overlay and within the center we can see this card which contains the information about this project so the name the title this is the description the price and how much items are currently left so if the items are 10 are listing 10 in the stock we should see this in highlighted in red which says only X number of items are left and from here we can select and exit the card like that so this is the work that we need to do in today's tutorial so without wasting any time let's get started let's go to the project that we are working on let's open developers tools now let's click on let's say this voice category and the moment that click on this ball category I got this message practically clicked so that means we already have an event listener attached with each of these categories in the very first tutorial so it has been a while since we worked on that run so so we might have forgotten the function which is acting as an event listener for these categories so therefore I've opened these developers tools and as you can see this message seems to have come from global.js file on line 24. so let's go there and that will directly take us to the function which is being called when you click these categories I lost track my own territory so this is the one this is the message that we are getting it's on line 24 and the function is get category products that means this is the function that we have to start our coding coding from and the first piece of logic that we have to Define over there is that when we click on these categories only that category should be highlighted and the rest of the categories should stay unhighlighted so let's go to this function and start working on this logic let's search for it get category Code Red okay this is the function now as we discussed the first thing that we need to work on over here is that we have to define the logic which makes the click category stay highlighted and rest up there and rest of the category should not be highlighted that means they don't show their blue backgrounds which is currently being shown by all of the categories now in order to Define this logic first of all we have to get hold of the exact category that has been clicked now as you know that this function is acting as an even Handler for the click event associated with those categories that means this function has wide report being called a parameter which we can name anything but it's usually named event so if we print that out to figure out what information has been passed through this event and if we can get hold of the category that has been clicked from this event then that's also a problem if not we have to think of other ways so let's go back to our project and figure out what information this event object holds okay now let's click on the main category it says the pointer event now this object is pointing to a mouse click event because we clicked on it so that's why it says pointer event and it doesn't tell us which category was clicked anywhere let's click on some other category again we got the pointer event so that means the event object that has been passed along as the result of this click event is of no use to us so we have to think of something else now other thing that we know that every function by default has a variable called this associate with all the functions because JavaScript is an object oriented language or object prototype language to be specific which have some differences but for the time being we are considering it as simple object oriented programming language so since JavaScript is an object-based language that means every function has a variable called this within each function so let's click on this sorry let's print this and figure out what information this variable contains since we don't need this event object so I'm removing it now let's go and click one more time on the categories and see what kind of information this this keyword displays for us now let's click on women now as you can see first profile we got the message and then we got actual list item which has been clicked so the list item which has been click is alive with the class name women and the contents of this Ella is women as well now if we want we can extract this content spot from this list item if you like to and this will solve our problem of figuring out which category has been clicked but there is an even better way to get hold of this category name which is a function called bind which is by default available with our JavaScript so what we are going to do is that we are going back up where we are defining this function as an event handler for for the click event associated with the list items so let's go back up and over here we are attaching this function get critically product as an event handler to this event click event associated with these list items so what we are going to do is there since we know that we cannot put these parenthesis and pass parameters over here because this will turn this function into calling this function so we were not calling this function over here we were merely passing the reference to this function to tell this event listener that when this list item is clicked this is the function that should be called but if we put these parenthesis over here it will directly call the function right here at this point and that was not our aim we didn't want this function to be called straight away we just wanted this event listener to know when this list item is clicked this is the function that needs to be called not called straight away only when this particular item is clicked only then this function should be called so this is called passing the reference and since we are passing the reference We cannot put parenthesis with it and therefore we cannot pass any parameters so the other solution is to use the buying function so when we are using Barn function with anything that bind function is going to change the value of this keyword which this function is supposed to naturally have so this function is supposed to naturally have the whole list item as this keyword and now we are telling it change the value by using this bind function so the function name dot bind and parenthesis and over here whatever we pass over here that will act as the value of this keyword inside this function so what shall we pass over here since we know this K contains the name of the category we can pass this K as a parameter to this bind method this way let's go back to the function itself [Music] over here this way the value of this variable has been changed from the list item to whatever the value of that cat variable was and that cat variable contains the name of the category over here so we are passing this K which contains the name of the category and we are binding it to this get category products function so in order to test this out let's go back to our demo project not the demo one rather the one we are working on so now let's click on the curl and now you can see we have got one string variable with the value girl let's click on accessory so string variable with the value accessory Main and again string variable sorry the string object with the value main so now we have direct access to the category that has been clicked now since we have got hold of exact category that has entered so let's comment this out we don't need this anymore let's store it in a local variable okay since this get category product is going to perform different tasks the first one of them being only highlight the categy that has been clicked so what I'm going to do is there the logic Associates with only highlighting the clip category in a separate function so we are going to define a function active category and because this K variable to it now let's define this set active category function [Music] function because we will come back and further Define the logic over here but the other subtask that we need to perform within this function set active category and over here what we are going to do is that we are going to get hold of all the list items and then we will look through them and compare the category name with the one that has been passed and if those two names match then we will set the background color for that particular list item to Blue and for the rest we will set it to the initial color so initial color is the default color which is associated with any HTML element by the HTML itself so in order to get hold of all the list items let's go back to our web browser let's inspect one of these list items so as you can see these list items are part of UL which are inside this navigation div so we are going to get hold of any Li which is inside this navigation class [Music] category list document our query selector or we need to use Query selector or because we know we have more than one list item inside that navigation div so the class name for the navigation tube is dot navigation and now we have to Target any this item which is inside this navigation div no matter how deeply nested this list item is as long as it's inside a deal with the class name navigation we want the reference to that list item as a result all the list items which are inside this navigation deal will be returned as a collection in this categories [Music] now we can Loop through this category list and while we are looking through it we will match the class name for those list items with this name so if any list item whose class name matches with the name provided in this variable that list item's background color is going to be set to the blue one and for the rest we are going to set it to its initial color and then we set any value to initial that means the record value which has been assigned by the HTML itself to that particular element and for the list item this is going to be transparent okay so let's Loop through it about it we know this part each X and error function to which we are going to pass some category value at a time and inside the body of this error function we are going to define the logic which is going to be if category dot class list a class which matches this name in that case we have found the category that has been clicked so now we have to set its background color to the one which we have defined in our CSS primary color variables that means we have to get access to that primary color that we have defined in the CSS so this is the variable that we have if I said and it has a name primary color and it's defined in the root element so we need to get hold of that variable in our JavaScript so what I am going to do is let's first get hold of the root element which is defined in the CSS and Dot query selector [Music] Now using a method which is defined in the window object which is by default a variable in the JavaScript we are going to access one of its CSS properties and in this case the CSS property that we are interested in is the variable name primary color that we have defined inside this root element so no computer style text element whose particular CSS property we are interested in so since we are interested in one of the CSS properties which are defined in which are defined inside the root element so we have to pass the reference to this root element which is the root variable that we just defined now we have to call another method in fact we are chaining this method to this one and the method is get property value and within this property value we can ask for any of the properties which are defined inside this root element and since we are interested in the variable name and color [Music] so now our primary color variable this one holds the value which we have defined in this variable in our CSS file now before we further Define the logic in our for each group let's console log this message just to be certain that we have actually got hope value because our logic is going to depend on the value defined over here and if we haven't successfully got the exact value from our CSS variable then the rest of the logic isn't going to work either okay let's click on this any one okay now these are the RGB values for this background color and just to be certain that that is the case then no matter which list item I shall click I should get the same RGB values so as you can see the number is increasing but there will be the same okay so now we have actually accessed to the RGB values of the primary color which we have defined in the csys file now let's go back in our file E2 so over here we were saying if category.class list contains this name that means that is the category that has been clicked so in that case we want to change its color so background color synthetically Style Dot background color equals color and set this color to the initial value that means the default value part of our color signed by the CSS itself [Music] okay now let's go and test it out now let's click somewhere let's click on the boy now as you can see only boy is highlighted and rest of the colors have been removed lemon it's working however if you refresh this page at the start all of these categories are highlighted that is because in our CSS file we have defined the background color for all of these list items so until we click on any of these categories our function set active category is not executed and hence we are able to see the breakdown with all of these categories so we need to remove that background color from a CSS file so let's inspect [Music] this file and look for this particular item and then remove this background color Ctrl f or navigation [Music] so this is the one we are interested in and let's comment this out let's go refresh now as you can see initially we don't see any of the category that is highlighted now let's click somewhere girl now we can see only this particular category is highlighted because that's the one we have clicked Main and accessory now this part is working with a second part which when the category is clicked then our landing page should also change and we should only be able to see the product over here which belong to that particular category so we have to remove this to another feature products as well as new arrivals so let's start working on that let's go back to the JavaScript files up to 30 products position now we are setting the active category only now next thing that we need to do is that we have to make a fetch request for our backend and ask for products that belong to this category that has been clicked so fetch call s to define the end point that is PHP now this is the name of the file but we have to attach the query string to this one with one key value pair technically and the value is going to be this correctly name and since we have used a different interpretation so put it inside Matrix this batch request is going to be a get request as well so the only other parameter that we need to provide is the Callback function response category products so this is the name response category code ref with the name that we are going to use as a corporate function and now let's go and Define this category function so now we have two options either we can Define it as a independent function outside this get category product in that case we have to bind this kit to this function so that we have the access to the category as well or we can Define it inside the category products as a inner function in which case we don't have to bind anything with this function so since so far we have been defining the function that angles the fetch response as an inner function in which differential request is made so we are going to continue with the same logic and we are defining this function inside this get category function as its inner function function response category products complete the data so before we Define any further Logic for the time being let's just console log whatever we have to see and then we will figure out how to integrate this data in the Dom and hence as a result in the browser but for the time being this is enough now let's go and Define this PHP file for the backend so that this request is handled by this PHP file so we have to go to the backend folder and let's define this file now let's go to any of the other PHP files if I've opened this new arrivals.php copy everything and paste it in product.php file now start changing this file so let's start from this if request method is scared and now since we are expecting some query string so we need to make sure that there is some query string attached with this because in that query string we expect the category name whose data we are supposed to get from the database and return it as a response so we have to make sure that there is this query string attention so to check if there is query string attached with the name category we have to use color sign underscore kit making this request in the front end but we have to pass this as a parameter to another function set so we have to make sure that within this get Global array there is an index with the name category if there is such index in this array that means we request that we have received contents a query string with the name category and its Associated ready so if that is the case we can continue further now over here let's change the select statement select everything from product where status equals one so we don't need this part because we want all the products that belong to this particular category and over here we have to set say here category ID equals and over here we have to provide the critical ID which matches with the category that we have received as a query string because in our products table as you can see we have the product IDs we have products ID then category ID Products name description price image status and edit on columns but we don't have any category name however from our front end we have received category name not category ID so we have to make sure that from the category we somehow get access to this category ID that we will place over here so now we are in this dial amount that we have only category name and not category ID we do not know the idea of that particular category however our products table demands category ID matching the category so what we are going to do is that over here we are going to use sub query and sub query is simply a SQL statement whose value whatever is returned is used as a value to one of the columns in another query so this is our main SQL query and inside this we are using a sub query and whatever we Define over here the value that is going to be returned from that sub query is going to be used as the category ID columns value so now over here we have to define the sub query then the sub query is going to be select let's go and check the category table first so that we know the column names so the column name is name and this is the ID to select ID wrong category table where name equals now we are going to place a question mark over here the reason for placing the question mark over here is that now we are going to use prepared statements and justification by using prepared statement is there over here basically we are supposed to write whatever value is available in this particular index get that value and use it as the value for this column name but since we have received this value from our user and at the back end a user cannot be trusted because if the user is malicious then we are opening ourselves to SQL injection attacks and in order to avoid SQL injection attacks we have to use prepared statements so the first step towards using a prepared statement is wherever we are supposed to use data from the user we are putting question marks in its place then one more time this sub query so this whole thing will select ID from category with a name equals whatever is the category name so if that category name matches in the database the ID associated with that category name is going to be returned and which would become the value for this category ID column so suppose the value which has been returned is 5 in that case this will become select everything from product where status equals 1 and sorry and category ID equals 5. okay so this is first part two words using prepared statement now next thing that we need to do is that let's create another variable prepared statement and now we have a connection variable and we have to use one of its methods that is a method defined in this connection variable which is called and to this prepared method we have to pass this statement so this is Step number two now from now on we have to use this variable and in Step number three we have to find the value with the question mark that you have put in the step one so to do that we are going to use thread underscore statement and bind now this bind method always takes one more parameter then the number of question marks that we have go to in step one so in step one that is in this statement we put one question mark so over here we have to find a value for that question mark now since there is one percent Mark so this bind is going to take two parameters the first one is going to Define what is the data type of the value that we are going to bind with that question mark since we are giving categories name so that means it's a type string so we are going to put s over here in in the next one we are providing the actual value that is going to be binded with that question mark so over here we have to define the value now we can do this since we know the value is going to come from get super Global variable which is an array whose index is category but but the thing is this this is since this is an array so that means this is a reference value and this bind method does not take a reference value it has to have some kind of scalar value so what we are going to do is that we are going to cut it and let's Define a variable category this category contains the radio which is provided through this super Global variable now we can provide this category variable in a second parameter to our bind method so this is Step number three why is this between 9 over here okay now we have done all the preparations and we are ready to actually actually third statement so step four is to execute this technique so statement call a method on it which is called execute okay so now our statement has been executed a step one is to get the data from this statement [Music] so over here we are going to say if result equals let's remove this and effect statement and call the method called get result so if any result has been received from this prepared statement that is going to be returned and stored in this result and if this result contains a value we will go inside this if statement where we are creating an empty array and then we are going to get one row at a time from this result set as an associative array and storing it in this row array then we are pushing this row array into this empty array that we created over here and when we are done with it we are going to return this response back to our front end for the name that we are going to give this index is products and over here before exiting the function we should actually make sure to close this prepared statement so this one small statement close okay I think everything is set now let's go and test it out in the browser okay now let's open console [Music] let's click somewhere curl and we got it error oh if you notice you know it has attached HTTP localhost 80.1 twice so okay the thing is this over here we only have to provide this part because the rest is already defined in this page call so product.php so let's go to this page called so this part is already provided through this URL function so URL constant and you are again defining it so that's why it was being attached twice as a result a different URL so we say sorted out [Music] and replace it just to be certain even though my live server already refreshes it another kind of error contact ing Channel server error so it seems that this file does not exist at the back end and Define variable threat statement okay so call an internal error since the PHP couldn't figure out how to respond from 920. now we got four products belong to boys category so let's check do we only have four boys products yeah boy one two boys let's click mains quickly we have seven products okay main one to mention so that means we are getting proper data depending on which country has been created so now all we need to do is that we have to integrate the data in the Dom so that we can see it in the browser so let's go and work on that part so this is the get category products which is an event handler when any categories clicked once this function starts executing it sets the category that has been clicked as an active category then it makes a threads call and this is the data this will here we have to Define the logic which is configured data and the Dom and hence okay so now we have to display this data in the in our landing page we have to remove the banner feature products as well as the new arrivals from there and just display this data so just to refresh how is our index.html defined let's go there so this is main element in which we have a section named winner then we have another section named feature products and then we have another section named new arrivals so what we are going to do is that we are going to get a reference to this main then we will set its contents to empty quotations this is going to delete all these three sections which are its children and then from that empty select we are going to integrate the content into this main element message if data contains a property named products because this is the name that we have given to our associative array with which we have sent back the response so if we have products in the response in that case we need to get a reference so let's get a reference at the top HTML element because this is HTML argument okay now [Music] main Dot inner HTML equals MP condition and now we don't need to do anything except for calling a function called populate popular catalog the first one is going to give actual products that we want to populate in the catalog so data the cost parameter and second one is going to be the the parent or the encompassing element in which we want to populate all these products so in our case so this main is the catalog and these products are going to be its contains and I think we are done with everything because already done the hardware in our previous parts of the series so let's go and test it out in the browser just to be certain refresh and because all the women's related products let's click conquer good accessories threads now let's click on the main and we again got key check products newer hours so we are done with this part as well now what we need to work on next is that when we click on any of these products we should be able to see this this overlay So currently when we click nothing so this is our next task that we have to work on so in order to initiate this next task when we click on these products something should happen that means we have to perfect and eventually with each of these cards So currently as you can see when you click nothing happens so what we are going to do is that we have to decide do we want to attach event with this image only or if you click on this part down below that means if you click anywhere in the car we should be able to see that overlay which contains all the information related to that product so I am going to go with this card such that when I click anywhere I should be able to see that overlay so that means let's inspect it and as you can see this is is inside this card div that means we have to go to our global.js that we are defining this card element or Cardiff and attach an event listener with that one let's look for the card over here this is card or class name equals card so this is where we can Define the events and event listener and since this is going to display all the data related to the project so the name that we shall give is okay so let's go and Define this function with one console Dot message such that we are actually able to see that it's working let's refresh and click somewhere [Music] and use it as you can see message says product somewhere else so two product link messages three product three messages somewhere and again we get the same message so that means we are on the right track next we have to decide what kind of data do we want to display in the overhead that is going to appear once we click on it so let's go to the demo project and from there we can see we are going to get the title description price and the stock a drop down list from which you can select the quantity that you want to buy for this product so where should we get this data let's go back and this is the function that is going to be executed once we click on the card so that means this is an event handler so let's go back where we are making this function and event handler okay [Music] details [Music] so this is here we are attaching this function as an event listener to this click when this card is clicked so over here we can find the data that we want this function to have access to once it's called so we are going to use line and whole product to the spine method so this way any information which is in this product is going to be made available to this get foundress details through its this keyword or this variable [Music] now let's go back to this function all display this permission that we have received through the binding okay now let's click somewhere okay so this is all the information that we have got so the product ID is 1733 id2 so this is so this is basically all the information from the product table so edit on category ID description ID image image URL name price and status now the only thing that is missing is how much stop for this particular product is available in the warehouse so for that part we will do is that we will make a fixed request to the database and request it to return the stock associated with this particular product so before we think of how to integrate the data that we have available through this this keyword let's make a fetch request to the back end and ask for desktop and then we will think of how can we integrate it with the Dom and then finally it's styling so let's make a fetch call let's call and this time the URL endpoint that we are going to hit is going to be named [Music] and we should provide the particular ID whose associated stock we are interested in so let's make it plot ID it's not just simply ID equals and the ID is going to come from these keywords category ID category underscore ID [Music] so therefore first of all let's put it written tactics so control X let's remove this press back and now this uh underscore ID [Music] then we have to define the Callback function which is going to get the data returned through this fetch request so the response inventory now let's define this function as an inner function to this get product details function the reason for making it in another function is that so response inventory [Music] we need to receive the data okay now so for the time being what we are going to do is that we are just going to print the data that we are going to receive from the back end it's going to continue now we have to Define this inventory.php file as well so let's go to the backend let's define a file inventory.php now since this inventory.php is also going to receive some query string so that means we will be using prepared statement there as well so I'm going to copy everything which is available in the product.php and [Music] before we modify our inventory.txt file I need to show you one table in the database that I have already created which is this inventory Chapel so let's go there and look at it so it contains three columns id id column product ID and stock so this product ID is a foreign key which has been linked with primary key of this product table this one so this way this particular product main one has an id1 so that means we must have a row in the inventory trouble [Music] and this row shows that this particular product has a stock 56 available in it likewise this this particular row with the product ID 7 suggests that currently we don't have that particular item in the stock so let's go to our product table and see which product has this ID so that means that product is out of stock at the moment so let's go to the product table in id7 this one main four is currently out of stock so since it's a very simple table and we have already created three tables in which we have also seen how to link one table with another q primary key important key relationship so it's a very simple travel therefore I don't think you will have any trouble creating this Temple the only thing is that for this stock you have to put some random values so for some you have to make sure it has a stock greater than greater than 10 because the logic if you are going to Define is is as such that if the stock is greater than 10 we will only display the message in stock and if the stock is 10 or less than 10 we will show only that particular number of items available in stuff like for this 6 we will display the message only 6 left in stock and part 0 we will display the message out of stock so you make sure you have these different varied values so that we you can see all the flavors in your website okay now let's go back to our inventory.php file and update that file according to our needs so again the request method is get and over here we have to check if this request contains a query string with the key named ID so if that is the case that means we have already received an ID for the product and we can continue further now over here we have to say select just stop from inventory where [Music] the rest [Music] where [Music] product ID equals question mark then Step One prepaid statement and we have to call this one this is going to remain the same now over here we have to change the variable property to ID and then bind it and now since we have this category ID as a numeric value and it's basically an integer value so I ID [Music] now over here since we know that we are going to get only one row for each product ID because let me show you the structure [Music] of the inventory sorry now if you look at this product ID I have set it to Unique so that means we can't have duplicate rows with the same product ID so this means when we are defining the logic over here we can be certain that at most the result that you are going to get over here is going to contain just one row at a time so we don't need to use this while loop so what we can do is that we are coming this out and when we are pushing this data into the array [Music] let's remove it and take this thing okay and press it over here what this is going to do is that [Music] going to get the and convert it into an associative array and storing it into this empty area the rest is same now we can simplify this even further because since we know that in our select statement we are only requesting for one column that is this top what we can do is that we can get rid of this array as well and let's comment this out as well and over here let's make this stock and for this value [Music] press since since we already know that once this first row has been turned into an associative array that area is going to contain one index with a key named stop so I'm extracting that stop key and its value is going to be assigned to this stock value I hope I haven't done any mistake let's go and check in the browser if that is the case just to be certain refresh now okay response inventory is not defined so let's go to global.js [Music] response inventory [Music] let's click internal server error [Music] actually over here we forgot to put assignment operator in our SQL statement so hopefully everything is set now okay now let's test it out [Music] why does yours stop null this one shows top six again none oh I see we are not supposed to synthetically ID rather we are supposed to send product IDs which was just ID I think [Music] so let's get something okay now the ID of the of this product is 21 and its top is zero so let's check in our table so an inventory with the ID product identity [Music] so for the product which is the product and 521 stock zero so when we are sending the category ID then probably that category ID didn't exist in the product IDs values so that's why we were receiving null okay so now we have all the data and Associated stock now we are ready to stitch it in the Dom and display it in the browser so let's start working on that the first thing is coming out this console of messages now two divs over the positive is going to act as a C3 overlay and the second layer is going to contain the card in the middle which is going to contain all the product related data so first let's define that over native response over a equals document or create element if and let's give it the class name [Music] foreign [Music] [Music] the logic that we are defining is going to go in the main element of HTML so let's go where we are defining all the classes related to the main section main element [Music] let's go down [Music] yeah okay the main section starts over here so let's go to the very end before the Hotel starts so this is where the photo starts [Music] over here [Music] [Music] now we want this overlay to cover the whole area of the browser so therefore we have to first of all set position to fix then top 0 to start from the very top current top left corner and we want it to stretch out that all right zero as well now we have to define the total width in height so these three things Define the starting coordinates let's define the percent of viewing with height also hundred percent of medium height background color a shade of clay now we want it to be semi-transparent so let's set the opacity to 0.8 now since we have already given Z index to our header so that means no matter how many elements we Define the adder is going to stay at the top so we want this time this overlay to sit even on top of header so that means we have to Define a value higher than the one that we have given to the header element so let's make it 200 we have given value 100 to our header so this is 200 that's refresh and test it out [Music] nothing happens oh that's because we have defined this overlay but we haven't yet attached it to our Dom element so let's get a reference to Main [Music] and let's append it as a last start with this video [Music] and we are not removing the contents of main data quality there rather we are appending it as a last child [Music] so now we are able to see this overlay and as you can see it's got it's covering the whole area of the browser okay so this part is working fine now let's go refresh it because we haven't yet defined the event listener to remove this overlay so therefore we have to refresh it if you want to remove that overly until we Define that event listener so now let's define the second div which is going to be the model inside that overlay so let me copy these three elements three lines and paste it change the name give it the class name model as well [Music] the main path let's go and Define this usage style before we have a peek at it in the cloud model we are going to have the smell of styles that we have defined for the overlays when I'm going to copy it [Music] paste it now we don't want this to be okay so sorry I'll remove this opacity property background color we want it to be white and red index I am giving it 10 200 because I want this model element to sit even on top of the overlay then I don't want it to occupy the whole Space the whole area so for the left for the sorry left is top is going to be 0 for the left I want it to push it 25 percent towards the neck in fact let's make 25 down as well probably we don't need this part of it let's make it fifty percent [Music] and for the height let's also make it fifty percent now let's go and have a look from here okay so there's the overly gone [Music] oh let's change this model click somewhere no that's better let's give it smooth edges [Music] whatever it is yes that's better now what we need to do is that we have to integrate the all the product related data within this model card and then attach an event listener with this overlay such that when we click anywhere outside this model this whole overlay as well as model should disappear so which one should we do first shall we Define that event listener first okay then let's go [Music] over here we were defining the overlays so foreign [Music] function is [Music] Okay so since it's a separate function so let's create a reference to the main element query selector Main let's also get a references to the overlay and model division [Music] [Music] foreign [Music] so now even though we know that when this function is called it's going to contain the main element is going to contain an overlay element as well as a model element but before we remove it we still are going to check if overlay that means if this particularity of X is only then remove it foreign [Music] [Music] click it's working good so now our event listener is also refined now now let's start working on how to bring all the data related to the product and display it in this model name so let's go to the demo project and have a peek at its contents so basically the contents in this div are divided into two parts the first one represents the image and second one represents all the description related to the product and inside this description tab we are going to have one Tier 1 spawn for this title another one for accessories third one for the price and the fifth one is going to represent the stock sixth one is a drop down list and the seventh one is add to cart button so let's start working on it working So within this response inventory functions you are working and so far we have created two tips overlay and model and we have appended them to the main div now we have to create the rest of the element and keep appending them to this model name so first of all let's apply the image to this model so therefore let's create an image element element image [Music] start Source equals so use selective now our images are directly inside the root folder you can see they are directly inside the root folder so just the domain name localhost 8081 and for the rest they start image now open this image element to the model element okay image now let's create second tip element let's exclusive let's give it a class name model description the class name model description now within this day we are going to create rest of the contents the first one was title and let's give you a typo it's content close the stock name here open this title to model description so description [Music] thank you description Box contents equals this is the description [Music] a modern description that a friend child description now we haven't appended this model description to the model so let's append it franchise description let's go down now create a deal for the price element dude [Music] it start text contains equals [Music] Mr Price append it to the model description here in the dollar sign with this as well so that's it the dollar sign the first dollar sign is for the symbol dollar the second dollar sign is part of modern sorry sorry okay we are done with the price now for the stock since the stock is in data dot stock variable [Music] create a variable at the top ICS [Music] now since the data that we have received we have received it as a string so TP of the safe side we are going to open it with plus sign so this is going to convert data.star into the numeric value never mind things [Music] now let's create a dip for the stock so [Music] deal now for the stock we are going to have three different values depending on the contents of the stove so if the value is greater than 10 we will display the message in stock in green color if it's 10 or less than 10 but greater than 0 then we will we will display the message only X collected stock X being the number of items correctly in the stock and if it's 0 then we will display the message out of stock so therefore we are going to use switch statement for the contents of this tip currently I'm keeping this empty for a reason and within cases of the switch statement it's okay stock greater than in that case [Music] tense equals in stop and we want it to be in green color so stop here that's time cut the color activity then break let's define second case stop less than or equal to 15. stock greater than zero and less than or equal to 10. in that case talk to Dot text contains equals four brexit on the [Music] stock price color equals what color should we put yellow for gardening [Music] I mean because we still have some stock available to buy and yellow might not be that much visible now case stock equals zero in that case copy this and make it out of stock and make the color red now make fold let's paste it [Music] what shall we put over here I'm not sure anyway [Music] okay now let's go back and decide what should we put over here as you can see we have used install strength with all the cases so the first is that my your mind is stuck over here but the thing is that this is a numeric reading whereas all our cases are Boolean values so if we do that we will never be able to display any of these cases we will always end up with the default default Boolean value as well so we are going we are going through over here so it will always be true and then it will try to look for the case whose statement also values to true so whatever is the stock best for that stock on the deck case will return true and as a result we will get the message which is part of that case okay now let's append this instructive to moderate description as well so outside the switch statement [Music] type [Music] is wrong with the user can select the quantity because select equals documentary create element select now next we have to Define its drop down list so over here we have to make the decision that how many items should be selected at a time by the customer so let's make this decision that at most a customer can put 10 items in a card so that means we have to Define 10 option elements for this select statement for wait a second what happens when the stock is less contained let's suppose if the stock is three then should the user still be given the choice to select more than three items even though we are clearly saying that only three items are left so in that case clearly we should only be able to see just three elements to choose from likewise when the product is out of stock we should not be able to select any item from this list so that means in that case the drop down list should be disabled and we should not be able to select anything at all so how shall we tackle these different scenarios so let's start off with the scenario when we have run out of stock foreign [Music] now we are going to create a loop which is going to run this many number of times r uh so we are starting our loop with value 1 because obviously we don't want to select zero items body of this car Loop let's create an option elements because option the option that is also equals we have to obtain this option to the select element okay child option now outside this District yellow brackets then outside this if statement which is being represented through these these new curly brackets we are going to append the select over model data description select element the last item to insert in the in this model description tip is the add to cart button again [Music] you might need text equals into car now open this button to model description view as well model description now let's go and have a look in the browser since we haven't yet defined any styling so it's going to look ugly click ok we have got so many problems we can't see an image prices and defined out of stock let's go up and start with d image period Element image image start source I'm so loud [Laughter] [Music] okay this is undefined [Music] oh I see so this keyword is only for the top level function get product details because this inner function has its own deals so let's bind it cleaner function is click now we can see the image good good okay let's define the dimensions for this image so that we can see the rest of the details so this image is where is it so we are defining this div inside this model description there the class name to our model description here model python description so let's go to CSS file now let's define some more properties for this model here since we know that in this model we have two main components one is image another is a div which contains all the description so we are going to say display property to grid [Music] okay now let's define bottle image the image that is inside this model did let's define this image now since we know that this model div itself has a height of 50 are viewing right so for the image we are going to say 47 percent okay that's better now we have this title we should capitalize this one as well then in the description Enterprise and in stock over here there is still something wrong so let's go to our options okay okay so this should not be option itself it should be the I variable and even over here over here E7 this one out of stock so now it's not visible is this a button here okay let's go down where we were defining a button so yes that's better now we have to Define this type of elements so it's display property next Direction column justify contain Center align items let's start so we want it to be very close to the image but let's give it some heading so heading back so that there is some space between the image and contents of the model description let's make it okay that's better now I'm comment styling for each of these children of this model description there so since this is going to be applied to all the children therefore esters margin bottom 25 pixels border bottom solid one pixel and the color is going to be exactly which parent I think five features of top bottom and 0 seconds we have to remove the rest of the powder except for the Border bottom and for the edge card button we are going to give it family color so let's work on it is in this thing but then we want to shorter bottom so copy and paste it's better now the button inside the model description but since we have given it the class name last name that we gave yeah add to cart a ground color solid one pixel and again top bottom and pixels left and right Crosshair is pointer EST and color and make it slightly let's give it some more edges as well water radius five pixels that's better let's increase the size of this text as well one size large good okay my name is title bold as well so this is the first child in modern description first child part weight let's make it 700. so we are done with the styling as well now even though we have achieved our today's goal but before we go there is one not exactly a problem but kind of a new sense that we need to handle that is our global.js file has become way too large and now it's very hard to find when we are searching for some things so it's better if we can somehow reorganize it so let's go to our global.js file and take a look so that we can figure out how can we recognize our code in two separate files so as you can see we are attaching four event listeners to our document one is going to request for the category second one request Banner third request featured and false request new arrivals so what we can do is that we shall keep these four lines of code where we are defining event listeners into this file but for the functions themselves we are going to Define separate files so let's go to our front end over here create a file named for the categories that we display as menu .js and [Music] let's look for this function where have you defined it it's over here so this option starts over here on this yellow curly brackets like let's look for the closing cut bracket over here so what I'm going to do is that I'm going to copy this whole function [Music] copy and comment this out in this global.js file and let's go to main.js file [Music] paste it over here [Music] save then in our index.html file let's go down after this logo.jscript now let's go back to global.js [Music] any event listener that we have defined within this function so we have to find this event listener which is get category products so let's find this function and also take this function to the menu function to the menu file as well so Ctrl f [Music] this is where it's defined let's remove this one first and console of data as well okay now as you can see this get get category products function also calls another function set active category so that means we also have to take this function to our mini.js minus wave so this is starting bracket let's hope it's closing bracket so this is closing bracket but then we said active category stars and this is where it ends so copy set executed then get category projects functions copy and over here come into town okay now let's get it to menu.js file paste it over here let's go to the browser refresh click menu it's working 12. [Music] let's go to global.js now the second one is request plane create banner.js file [Music] for the definition of this function this is where this function is defined this is starting bracket and this is ending bracket but it's calling a function called call karusa so we have to do this one as well this one turn this out [Music] fantastic over here and let's apply this banner.js overindex.html file as well foreign [Music] [Music] [Music] [Music] no something has gone wrong which is request category it is so it says this functional request categories is not defined but why was it working a while ago maybe I hadn't saved it think I know the problem [Music] set go to index.c15 okay since request categories function Excel is defined in this mini.js file so we have to make sure that this file gets loaded at the very end as the last JavaScript so therefore I am going to put let's see your data [Music] this way this global.js will be the last file to be loaded and executed and because in this global.js file we are defining event listener and passing the reference of the functions so that even listeners so if this file is loaded before these ones this will complain that that the call Tech function that you are passing is a reference has not been defined so we have to make sure that this these files get loaded first and only then we should load this file let's go in the browser and see if that trick has worked it definitely helps [Music] so now let's go to global.js let's work on the request featured function but first let's create a file name feature.js [Music] now let's look for this function control F [Music] let's see where does it end [Music] okay comment interested in DFA chart and let's see finds any different listeners or anything you know [Music] let's check this file that is let's do the same for new arrivals [Laughter] [Music] okay so this is [Music] foreign [Music] [Music] [Music] comment down see it's called feature and paste it over here and let's go to the top X because this is supposed to go in the uh [Music] we are still able to see the featured as well as new arrival reporters so everything is going to be fine [Music] address now let's remove the comment report so that you can see what further between organization we can still apply [Music] [Laughter] [Music] [Music] so you are still able to see everything [Music] okay now let's go to global.com so we have this calculate catalog function in the global.js and I think this is the right test for it because this calculate the clock is being covered by new arrivals.js file feature.js file as well as critical products menu.js so it's there it's going to stay there then over here we are defining we pass out for fetch request again this is the right place for it because this is being used by rest of these files so it's available thing get product details this should also stay there because this function is also being called by a new arrivals feature products as well as the category ones so this is the right place for yourself [Music] remove overlay so this should this should also stay over here okay so now our code is better organized and hopefully now as you progress further along we won't have as much difficulty understanding the code is we would have if we had all the code in one place we still need to apply some reflection to our baking code as well but let me take that for some other time in today's tutorial we will be implementing our login and registration system so let's start our photoshooting by creating a separate file for all the logic related to login and registration purpose so in our front end let's create a new file let's give it name login.js now let's go to index.html and Link that file with our HTML file [Music] [Music] okay so we have linked the login.js file with the HTML5 but let's go up and where we have defined all those icons before I concept we can see in the browser [Music] let's give all of those types over those icons we can see we could see the tooltip which will help the user know what is the purpose of that icon so this icon when the cursor hovers over it it will show the login and this one [Music] register log out [Music] let's go and check in the browser if it works [Music] so login we can see this toolkit register log out and log user now let's go and start working on login.js file so before we Define any login or registration related logic let's define some helper functions which will basically help us show or hide all of those four icons let's start off by defining a helper function let's give it a name show height icon and we need to pass it two parameters the first one is going to be the icon that we want to either show or hide and second one is the play is a Boolean value true means we want to hide the icon and false means we want to show the icon so let's use Canary operator and check the value of Lake if it's true in that case we want to set its display property to none else [Music] set its display property to block and that's all we need to Define for this helper function over here let's get references to all four of the icons login documentary selector okay [Music] register account query selector log out [Music] part-time user okay now we can pass any of these references to this show height icon and if the second value we pass to be true then that icon will get invisible and if the second parameter is fast then that icon will be made visible so let's call it on register and let's set it to true [Music] so now when we go to the browser you will notice that we won't be able to see the register icon because we have hidden it by calling this function passing the register reference to it along with the true flag so let's test it out in the browser and as you can see there is no registration related icon you see put the false there it will be made visible again now you can see the icon over here likewise if we pause log in with the menu true [Music] now you can't see the login icon so this function is going to come handy when we are defined the logic for all of those four icons okay now we can start working on the actual logic so before we Define any further logic over here let's go and have a peek at the table that is going to be used for logging and registration purposes so this is our database table that we are using and this is the table that I have created user let's go and look at its properties first so it has a column ID which is primary and not null username is not null and it has to be unique email also not null and it has to be unique as well password is not null first name and last name can be null so these are the properties now as far the data is concerned I have already put in lots of users data so what I'm going to do is that I'm going to keep this one and for the rest I'm going to delete them [Music] oh I think I deleted everything [Music] let's make it chocolate [Music] password as well now of course you can make this table is complex as you like such as instead of putting password straight away you can put the hashes over here but I have chosen to skip that part so that I can focus on the other things that I want to show you guys okay now let's create this row a user with the name AAA and password AAA as well okay so this is the table our username is unique and email is also unique now let's go back to our login.js file so let's start by associating an even personality login icon [Music] callback function for this event handler is user login now let's define this session [Music] let's start the event so then we can prevent the default Behavior associated with it oh this is actually user so R was missing now let's work on this user login function now when we click on this login icon we want the login form to appear in the visual appearance that we want to give it is the same one that we gave for when you click on any product something like this so we want an overlay top here over here and within that overlays we should have this model in which instead of displaying these content we want to see a form with username and password fields and a button to submit it so that means we can reutilize the logic that we have defined for this overlay but the thing is this the contents of this model are different so for the product these are the products that we want to see for the login functionality we want to see a form with only two fields and for the registration purpose we want to see a field with more than two Fields username password email first name and last name so what we are going to do is that we are going to revisit the logic that we have to find for the overlay and model and if you remember from the previous video we actually defined two days one for this overlay and one for this model now what we are going to do is that we are going to add one more div to that logic so when is going to contain this overlay one div is going to contain this empty model the white background and this area and the third div is going to contain the actual contents because contents are the ones that are different for each of the functionalities so this way we will only be focusing on redefining the contents of that div and we don't have to work on redefining the overlay as well as this whole model and make it appear and disappear because this way we can reutilize the logic that we have already defined so let's go back to that overlay function and make slight freaking stairs I think we have to find the overlay in the global.js file so let's open it yeah this is so move overlay and in this function get get product details which gets executed once we click on any product so over here we were defining a div with the class name overlay and we attach an event listener remove overlay to it then we defined a model deal with the class name model as well and then we appended everything the contents of the and the contents that you can actually see in that model directly so what we are going to do is that we are going to create one module over here and what name shall we give to it let's make it modern container [Music] with element model container dot class name let's give it the classy model hacker container now if you notice over here we are appending the module directly to the main element of HTML now what we are going to do is that we are going to append the model to the model container so model container that thank child is Suits to it and now for the main instead of appending the model to it let's pause so the model is inside another deal which is named model container and we are attaching the model container to the main element we don't have to make any further changes to this function now let's go to remove overlay function so over here we were getting references to Overlay and model and then we were checking if they are present then remove them now what we need to do is that change this model to model inner [Laughter] okay so if modern container is present then remove it now since the model is the child of model container so if a model container is removed then so is the model one more thing I have noticed we don't need this reference main over here because it was never used anywhere inside this function so I have commented it out now the only thing left is that we have to go back to our CSS file and make some changes according to the changes that we just made now let's look for the model class of this model is going to become model headphone containers [Laughter] however this display created these things let's remove them and let's define the model and put it over here [Music] so this model container is defining the white model that was appearing and this model is defining the content which in this case upgrade now what we need to do for the rest of the two functionalities that is the login and registration we are going to have these two we utilize for those ones so this overlay and this model this model container we are going to reuse them however instead of having the third div as model we will give it some other class name and we will separately Define vcs's style for that we still need to make some more changes over here but before we do that let's go and test it out in the browser that the changes that we have made so far if they are still working or not be afraid to be certain now click somewhere so we are able to see the model overlay and model now click so everything is working now let's go back so what we are going to do is that we are going to cut the day which is creating the overlay as well as the reference to Main and where we are appending it to the where we are appending the overlay to the main and then model container lines so copy and comment them up over here let's create display overlay so this will be passed the actual model content that we want to attach to it okay I have tested back the the lines that I committed out in the get products details so now let's have a peek at them so over here we are creating Eddie with the class name overlay then attaching an event listener to it and over here we are attaching to main this overlay but we don't have a reference to this main over here so let's the time being comment this line out where we are creating a reference with the main in the get products function and put it in this function over here okay so now we have a reference domain and then we are passing this overlay as a child to this main then we are creating a div with the class name model container so let's go back over here we have to remove these two lines as well please comment this out [Music] here press them back so the model that we are now receiving is a as a parameter we are appending that as a child to model container and then we are attaching the model container to the main as well so the logic which was creating the overlative as well as the model container div we have moved it from the product details function to a new function with the name display overlay and we have also removed the reference to the main element from product details function to the display overlay function as well now we need to call this function inside the get products details function so let's go to the end of the function this is yellow starting curly bracket so let's call this function display overlay and we are passing this model this model that we are creating to this function and hopefully everything should work fine let's refresh to be certain thing happens one quart reference model is not defined at model is not defined hmm so the thing is this this yellow curly bracket is for this get products details function but we have actually defined the model the model inside this inner function this forms inventory so we need to bring that display overlay function call Within These frame brackets because this is where inside this response inventory response inventory function we have actually defined the model so let's go down and cut it and test it before this pink color because that's the ending curly bracket of the inner function where we have defined our model okay let's refresh one more time click somewhere and we are able to see the overlay good so everything is working fine let's do a little bit of Tiding up which simply means just guys that we move to another function now wherever we need to display that overlay we simply have to call this display overlay function and cross the only div which are going to be the contents of the model and for only that we will have to Define The Styling the rest is going to be already defined okay so we are done with that part now let's go back to our login.js file now let's get back to user login function once more and over here we want to display an Ola and within that overlay we want to display a login form so let's create that form first so let's create a div and within the active we will create the form and then we will call the display overlay function and pass that to that function and as a result we will be able to see the overlay when we click on the login icon you do button from here because we are going to Define different styling for it okay last name equals now let's create a H2 element create element H2 H2 X contains equals in form from div dot pain child H2 create a form let's give it class name foreign now let's create two input Fields one for username another for password s input username DOT type equals text username dot name equals username username dot placeholder equals let's create one more input field for the password foreign this way we won't be able to see the actual key that we are typing in rather we will be seeing the dots or address in place of those keystrokes prosper.com password or placeholder equals password now let's create a input field of type submit .create elements submit submit that time equals submit submit.name equals submit as well let's make it login now it is all of these fields to the form element the name that we get to our form is login form so login form dot append check the first field is username is password okay child last week we submit now applying this login form to the form child form we have already appended the H2 elementaries now we have to call display overlay function and pass this form due to it as its argument now let's go and test it out in the browser okay where is login icon [Music] we were not able to see the login icon okay now let's click on the login and we are able to see this overlay and within this overlay we have this model and inside this model we have this H2 element it's going to respond so we can't see the submit but it's there now the only thing left is that we have to apply we have to define the signing for it but before that we have to check that wire aren't we able to see the submit button okay thank you [Music] man is good so we have already defined some styling for the input element of type submit so that's why you can see some styling defined for this now let's go and Define the actual styling for this form let's go to the end of the CSS file [Music] s so the class name that we gave to farm was let's say display reflex [Music] Direction copy paste and put extras because we are going to Define some margins and cuttings for all of these so let's start with margin let's each give margin top let's make it [Music] let's make it 5 pixels heading top bottom let's make it three pixels and left right [Music] go back to the login form margin all around so for top bottom let's make it pixels left and right let's also make it make you think that's better [Music] let's make this one five pixels okay size let's make it large okay that's better now you can see this submit button is slightly shorted in those input Fields that's because the supplement putting is getting the styling that we have defined when we are defining the sublet button for this search element so let's work on that so within this login form we are looking for an input field of type submit 100 percent [Music] okay that's better now let's put some more space between these input fields so margin top let's make it eight pixels the reason I'm being focused with these margin spaces is that once we are defining the registration form then we will need to put more into fees so those input Fields might overflow so that's why I'm being Crucible at the moment so when we get to registration we might encounter that problem and we might have to revisit these values but for the time frame I am keeping it as such and moving on okay so now what we have to do next is that we have to associate an event listener with this circuit button that's that when it's clicked a request should go to our backend along with the values in these input Fields And once the backend receives those values it will try to look for a user with the provided username and password if there does exist such user with the matching username password then the user will be logged in otherwise the login will fail so now let's define this event listener so let's go to login.js and over here we are defining the submit button input field so now let's associate an event so when it's clicked user login the quest now let's define this user login request function [Music] let's pass in the event which got triggered and called pre-identified function on that event pH a reference to our login form [Music] put the data from the form so we are going to create an object of type form data so form data is another type of API which is available by default in our browsers and it takes a form as its parameter then from that form it is going to get all the input fields and their values and converts them into a query string [Music] we have to pass our form reference to it this way this form data object will be created which will extract all the input fields and their respective values from this form and transforms into the query string which we can then send along with the fetch request now over here we are ready to make a fetch code so fetch call let's define the URL endpoint let's make it login.php now if we want to send this form data as a query string in our URL so we can put like this key equals name but since our data is very critical we don't want to send it attached in our query string this way anyone can see it therefore we want to send it in the body of this fetch request so that means the request method that we have to use is not gate rather this time it's going to be a post method but first let's provide the second parameter which is the call pick so user login response is the Callback now the third parameter is supposed because this time we want to send this page request as a post request not as a get request but we also somehow need to provide this form data to this fetch request so the currently the way we have defined our fetch call is that it only takes three parameters at most the URL endpoint and the Callback function which will receive the response from the server and the default value for the HTTP request type and since we had used a follower you get therefore we never provided that value but this time since we are not using default value we are using another HTTP method which is posed therefore we must provide it but we are still missing one thing which is the actual form data that we want to be sent along in the body of this request so that means we have to go back to our original fridge called facade where we were defining it and give it fourth parameter so let's go to global.js and this is the facade that we were creating this one after this yellow curly bracket so it only takes three parameters now we are going to attach four parameter which is going to be body so we are also giving it some default value so let's give it undefined we can also use null as well but let's start with undefined so if you don't provide it it means the body is undefined because the get request cannot contain any body so having an undefined value for body will make it not create any problems okay so this is the parameter now in the body over here after the method let's attach one more property which is body and we are going to give it this body to avoid any confusion [Music] let's change the name okay so now this is the property name and this is so the body contains data okay now let's go back to our login.js [Music] now we can pass the from data to it and it will be attached in the body of this fetched Quest and sent along with this fetched request to the back end okay now we are ready to work on this concept function user login response so let's define this user login response function as an inner function [Music] we don't need to but since this is the practice we have taken so far so we are going to continue that the only place where it is very important to define the response as an inner function is when we have some data defined in this main function that we want to utilize within the inner function so at that time it is mandatory to Define this responses and inner function otherwise it's not mandatory but since we have followed that practice so therefore I am going to continue following the same practice now within this function for the time being I'm just logging the response that we are going to receive from the back end later on when we are able to see the response then we will figure out how to further proceed but for the time being we are good to go now let's go to our backend and Define this file login.php so let's go to our backend folder and PHA login.php file it shouldn't be an issued it should directly be in the thin folders [Music] link our database connectivity file with this file choir in the current folder we have a folder named include and within this include we have a file name TV now since we will get a post request from our login.js file so if you request method [Music] that means we will get some data in our first Global in our first super Global variable which will contain two key value parameters one is going to be with the key username and another one is going to be with the key password so let's store them in our local variable [Laughter] [Music] now since we are going to use the data that we have received from the user in our SQL statement so we must make sure that we are shielded from the SQL injection attacks therefore we have to use prepaid statement over here as well so let's create a statement select everything from user here equals question mark and the password also equals customer now let's create a filtered statement which we are going to get by executing a method on connection object which is called prepare and we have passed this technical statement next we have to bind the parameters with these question marks which are actually the placeholders so we have to bind the values with those placeholders gripe statement 9 param and since both of these values are going to be a type string so that means 2 is username and the second is password now we are ready to execute this filter outside frame so prepare statement execute now the thing is this this prepared statement will return true if we have successfully got some result from our database if we didn't find any row matching the provided values then in that case the execute will return as false since it returns a Boolean value so that means we can use it is a condition for if statement so now rest of the statement will only execute if we have successfully got some result from the database that means we have found a user with matching credentials so in that case we can proceed further and the next statement is to actually get hold of the values the row that has been returned from the back end so what we are going to do is there we are going to use we are going to call another method on this prepared statement which is called get underscore result now we have we have done a type result set in this variable we have to convert this into an associative array which PHP can understand and process so let's make it user array serve we have got one row then Associated array in this variable user underscore array now why we were interested in getting the data from this result set is that because now we want to start a session and we want to store all the information which might come handy once the user is logged in and has put some items in the cart as well such as tracking the user that which user it is has you put anything in the car if yes what are those items what are the quantities of those items prices Etc so from this point onward we must have a session started and the event values should be stored in these session variables so we came to session underscore start here but we start our session here then this session will not have started in the other PHP files such as inventory featured and all these things but we want to keep track of the user from this point onward so that means we have to put this line session underscore start in all of those PHP files manually so this is one solution the another solution is going to be if we put it inside this file dp.php then we won't have to make any changes anywhere in the other PHP files and the session will have started in all of these files so let's go to db.php now even though we have named db.php and we were making a connection with the database over here foreign start over here as well this waiting session has started but now the db.name is not an appropriate name because now this file is doing more than database connectivity but if I rename this file then I'll have to manually go to all of these files and rename it that might confuse the beginner so I'm going to keep this file name the same but we might include some more information over here which might have nothing to do with database connectivity okay so now let's go back to login.ph file so we don't need this file sorry line over here because our session has already started now even though it does not contain anything and by any I mean user defined variables in it so at this point what we are going to do is that we are going to create two session variables one is going to remember the user's name username and the other is going to remember the user's ID this might come in handy when we are checking out so let's create a session variable with the name logged user and let's make this locked user in Array a two-dimensional array so the first value so the first index is log user and another is going to be name where we are going to store the array username so the name that we have got from the database system not the one given by the user three login.js because we want to be certain that we have actually got this in our database table so that's why I am using user underscore array I could have used this username variable as well because this also contains the username but I want to be certain that it has actually come from our database so therefore I am going to use this user array now the second one is going to be the same session variable but its second index is going to be ID which is again going to come from the database [Music] since our usernames are unique in database so we might not need this ID but I'm going to keep it anyway over here just in case we might need it in our future videos if you don't need it then I'll simply remove it from here but let's keep it for the time being and just to show you that how can we create a two-dimensional array in PHP as well now we are ready to respond back to the user so Echo Json and code let's pass an area and the key is going to be user and the value is going to come from this thing so so that we are certain that our session has set this way we will know for sure if the user value is empty at the front end that means something went wrong when we were storing the values in the session variables so whatever is wrong it is wrong with the session creation thing so that's why I am using this longest version I could have used this over here because it contains the same value and I could have also used but doing this lets me know if anything goes wrong exactly where that thing has gone wrong okay that is not the case then outside this if statement p let's make it else and paste but change the value to invalid thank you now let's close the prepared statement and exited now let's go to login.js we should receive some data which is going to be user so either it will contain the user's name or the text invalid username and password now let's go and test it out in the browser [Music] we start in login so so I think we created AAA as username and password triple as well F12 something is not right hmm okay I forgot to include the access control hello header in my PHP file so now I have two options over here I can include the header over here like I have been doing in other PHP files let's see this one like let's copy this and paste it in the I'm sorry login.facebook I can do that but I think the best option would be to include it in db.php file this way I will never forget to include this header in in PHP files and this also means that I can remove this header from the rest of the PHP files as well [Music] because now it's included in this dp.php file [Laughter] [Music] okay now let's close these files Banner feature product and db.php has this header so we can still see all the contents that means everything is working fine let's try to log in one more time so we've got an error console is not defined so e is missing it login.js line 45 and 47. okay login.js line 45 [Music] so we've got some result but it's a null that means something went wrong okay so I've identified the problem the problem is that we are storing the value in this variable username over here we have made spelling mistake empty everything will [Music] work Triple A and password also Triple A okay so we have got this user with a value AAA so that means we have successfully looked for the user in the backend and identified that this user exists let's put something in item so this should have returned as invalid username or password instead it returned null [Music] okay so it turns out this execute will still return true even if no matching username and password has been found and the reason for that is that this statement did execute successfully it's just that no matching user was found and it's not execute methods fault so execute is basically saying I did execute successfully I made a successful connection with the database executed a query found out no such user exists and I told you so so I am going to return true because I have executed successfully so that means we have to move this get the statement because it's not serving our purpose so prepared statement execute we also have to move this one out let's discuss these two lines what they are doing that we have moved up so basically this is going to execute and it's going to return true if it successfully executes it doesn't matter a matching result was found or not as long as it executes successfully it will return true then what we are going to do in the next statement is that we are going to get the result set in storing it in the result variable again the result set could be mtsl so what we are going to do over here is that copy this that's it and test it over here so what we are saying is that what we have got in the result variable apply fetch a swap function on it convert the result into an associative error which the PHP can understand and then store it into this user array now if this user array is null in that case we won't get into in the body of this if statement we will directly move on to this end statement however if this user array is not empty or not null in that case we will get inside this user if statement so I hope this will work now let's go and test it out in the browser let's put something random okay invalid username or password good now let's put the credentials so we have a user the name AAA and password Triple A as well okay good so this is working now now before we move any further I have one certification I directly store the password I am not applying any hashing on it however had this been a real commercial website then I would have applied that hashing as well but since over here the aim is to understand the overall working of website so I have removed this complication from this project it's not very difficult you just have to add few more lines but since I thought it will already have a lot to cover so I thought I should not include it in this project okay with that clarification now we can proceed further with the project now the thing is this once we have successfully logged in the immediate thing that should happen is that this overlay should disappear so we have to Now work on that so let's go to our login.js before we go to login.js in this as blog instead of putting the keyword user let's put the key error now let's go to login.js now so now if we have got data it would contain two properties either it could contain a property called user or it will contain a property called error in case of error so what we are going to do is there we are going to say if data contains a property named user then call a function let's say a display logs user so the shortest way to define this is data without user and let's make it log user and pass data without user because it contains the username in it so if this is true then this part will execute if this is not true then this part will never evaluate and never execute so now let's go and Define this display lock user function [Music] display log user and it will take user as a parameter the reason for defining this as a separate user is that we are going to call this function from other places as well so over here the first thing is [Music] remove overlay because we have been logged in early what we have to do is that let's go to our demo not a mother one that we are creating we need to replace this username with the actual name of the user that is logged in so let's see where does it exist so this is actually a Spam with a class name user and and it's inside the logged user logged user div so we can directly access this username and change its value some cons let's make it blocked user documentary selector username Cloud user now let's change the text content of this log user to be user the other thing that that we want to happen is that since now we have logged in so we want to remove this login option as well as the registration icon and we want only to make these two icons appear so we have to call the function show Heart icon and we have to pass the created at the beginning and since we want to hide it so let's ask to likewise show height function once more we have called and this time we have to pass the reference register and one more time so you can see the name over here and we have just two options log out now here's the problem even though we have successfully logged in if I refresh the page you can see the logs user is gone and again we are back with all of these four icons so the reason why that happening is that when I refreshing it the website starts getting loaded from the beginning and only those contents are being loaded whose requests are loaded with dom content loaded event and since this login does not happen at the time of the Dom being loaded in the memory so that's why we don't see any update over here so what we need to do over here is that we have to associate another event listener with dom content lauded event that will request the server and ask if the user has already been signed in if that is the case it will request the username and then call the same function which we just defined which was this display logs user pass the username to it and this function in turn will again hide these two icons display only these two ones and replace this username with the name of the user that is logged in so let's define this logic and see if our problem has been resolved or not now since all event listeners which are associated with dom content loaded we have defined them in the global.js so we are going to Define this one in the global.js as well [Music] document that a different listener contain floated and the event handler called the function is let's give it name check login status now let's define the check login status function in the login.js [Music] you simply have to make a face card over here to again login.php this is going to be a get request because we are not sending along any data in the body so the only other thing that we have to Define is the the Callback function which is going to handle the response returned from the server let's make it responds [Music] user login now let's define this function we will have to revisit this function and attach some query string over here but I'm not doing right now because right now there is no need and if I attach query string right now it might not make much sense to you guys so we are going to wait until the moment when it becomes mandatory to put it because at that time the reasoning for putting a query string will also be clear so let's keep it like that for the time being and let's work on the response user login function because this is the practice we have been taking [Music] and this will receive data from the server for the time VPX just comes out this data then once we have defined the counterpart or this request at the back end we will revisit and figure out what to do with this data Okay so let's go to login.php now we have to Define the logic which is going to handle this request okay so we are creating another if block but this time the request method is get smartphone because we haven't got any data along with this fetch call okay so over here what we have to do is that we have to look for the session variable name to log user if that session variable is set that means the user has already logged in and we can get the user's name from that session variable and return it back to the front end otherwise we will send the message that user is equal to guest which will imply that no user has signed in here and whoever is visiting the website he or she is visiting as a guest so if is set data sign underscore session and the key is blocked user if that is say in that case we are going to incubate user and its value is going to be is going to come from this session variable name because this is where we accept the username over here if that is not the case then we are going to send another Echo message but this time the value for the user is going to be and exit so this was the second Logic for our check login status so let's go to the browser let's login okay now let's refresh it says the user is guess that means no user is logged in now I wonder why so at least this part is clear that we are able to get the response to pick from the this get method so what front end and back-end logic is working the only problem is that it's going it's written as a guest as a user who is currently visiting the website however we just logged in okay so it was supposed to return as AAA is the user but instead it has sent guest as the user who is currently visiting the website now can you think of a reason why this is happening now let me try to explain this with a simple explanation as possible since we are serving our front end and back end as two different websites and the different behavior of PHP is that the moment a session is started a session ID is created which is sent back to the front end which is part of the same domain as backend which simply means it's sent back to the browser the browser stores that session ID and and for each subsequent request that it makes next it sends back the accession ID to the server and from that session ID the server identifies the session of this particular user and if there are other session variables associated with that particular session the PHP server can return back values from those search and variables but in our case our front end is a completely independent website so even though when the is created and the response that has been returned at the time of session creation the PHP session ID is returned back to the browser but now since browser is a part of a completely different website so it cannot store that value that session ID value in the browser because now the domains are different and since sessions are sent as cookie values and cookies values are only supposed to exist are make sense for one domain and our front end being different domain the browser fails to register that session ID is part of its own so let me show you let's go to the network now these are all the requests that have been made to the server so that we can see all these data in the browser so let's look for the login.php so this is the one and so we are saying get request to the server from login.php which is going to check if the user is logged in or not and the header that we sent sorry the headers that we receive from that we have got a session ID [Music] so that means we should have that session ID stored in our uh application Tab and we have this cookies and this is the domain of the content 127001 and then four double five zero one this is the one so this is our URL but as you can see we don't have anything stored over here that's because the the front end domain is this thing and the cookie is sent for a different domain which is localhost 8081 so this cookie can be stored in the browser if the browser also has the same address but since we don't have the same address so even though we have received the cookie the cookie get discarded now since we need this cookie ID so that we can send along with each HTTP request and make the server know that we are the same user who got logged in earlier we have to change this default Behavior so to change this default Behavior we have to make certain changes at the front end and certain changes at the back end as well so let's start with the front end changes we have to go to global.js and where we were defining the phase facade let's go there this one and over here we have to Define two more properties one is more the value is course cross origin resource sharing and the second is credentials which is so these two values will inform the back end that the request is between multiple domains and with each request we are going to include those some credentials now these credentials can be many things but in our case it's going to be just a cookie so this is the front-end part setting now we have to go to the backend and make some changes at the back end as well so let's go to PHP where we were defining the header over here we have to replace this s stress for cross origin allo origin from esterase to the exact URL of the front-end domain which is http 127.0.0.1 column double 501 the exact URL that we see in the browser and now since we are sending some credentials with the request so we have to set another header to accept to accept those credentials okay Access Control hello credential and we have to set it to three these two are mandatory now let's go and let's test it out one more time pulley okay now let's refresh still not working now what could be the reason let's inspect the network tab login.php so this is get request so our response as a cookie name PHP session ID but if you notice over here this yellow triangle it says the cookie header didn't specify same side attribute and was defaulted to Samsung equals legs and was blocked because it came from a cross-site response which was not the response to a top level navigation because they said cookie had to have been set with the same site it was none to enable cross site usage so now when we solve first set of problem that we encountered at the beginning now we are getting second type of problem keep saying if the cookie is supposed to travel between cross domains then we should have certain attributes defined as well which was same side should be set to none and since we haven't defined anywhere so it's going to take the default value which is legs and with the legs the cookies cannot travel between domains so where can we Define these settings well we have to go back to where we are starting our session let's go to gp.php and over here provide an associative array with certain attributes So currently it says same size should be set to none he underscore Samsung okay now let's go and try it out one more time and see if it has worked okay so now let's inspect login.php never mind let's refresh this first again we are getting the same problem so it says this time the message is this attempt to set a cookie by a set cookie header was blocked because it had the same size equals none attribute but did not have the secure attribute which is required in order to use same site equals none so that means we have to set another attribute called secure if we want same size equals none to work so comma Q and get value true so I keep forgetting I have explained everything with cooking underscore so the property same side we have to append it with cookie underscore and their property is secure we have to append it with two key underscore in PHP in order to work okay now one more time login okay now let's sleep right okay so it seems we are still going to square one but I wonder why because we have done all the settings we are supposed to let's check console okay we have got the user oh I see okay that's because in the login.js we are just displaying the message in the console we are not calling the display logs user function that's why we are getting back with the original state so let's go to login.js and over here instead of displaying it in the console call this function there but first we have to check if the data that user is not equal to guest then we should display the loud user so we are going to use again conditional short circuiting okay data that user not equal to test call this message and we have to pause data dot user equals to this in that case in that case we want to call another message should be display login register icons so let's define this function so let's define this function so this one is displaying the log out and logged users icon and this one and this one should display the login and register icons and hide these two icons so we are going to copy this and let's set it to false so we are setting this login to fast that means we want this login to be visible on the page likewise we want this register icon to be visible on the page as well they're called false it means we don't want to hide them however the other two however for the other two icons which is log out we want that to disappear so set it to True likewise logged user as well set it to True setting them to makes them disappear and setting the icons first make them appear so we should have these icons in the display log user as well here we are going to set the plate fast because we want we want them to be visible in the browser so when the user is logged in we want the login and register icon to disappear and log out and lock user icon to be present likewise when we are not logged in we want the login and register to be present on the browser and log out and log user to be not present on the browser therefore we have set these two now let's refresh so we can already see logout and log user however [Music] why is this underneath this icon okay so I have identified the problem so let me show you let's inspect now if you notice this text triple is inside a spawn with the class name username and then this spawn is inside a div which is named blog user so at the top of noggin.js we got references to all of the four divs which contained icons so the day which contains loud user got a reference to it with directions reference variable log user and inside the display log user function where is it over here we were interested in getting a reference to this form with the class name username but if you notice we have given the same reference variable name that we gave to the div which contains this one is the child so that's why over here it's actually trying to make the spawn disappear as well so what we need to do is that with this we have to open the text spawn [Music] this will resolve the issue okay let's login okay now if we refresh we don't lose the logs user so that means this logic is working as well now we have to work on the log out part such that when we click on this log out the session should get destroyed and we should not be able to see this log user's name over here so we have to attach an event listener with this log out so we have already created a reference to this logout this one now we have attached an event listener with this log out a dimensioner click do that logout now let's define this function log out [Laughter] now over here we have to make a fetch call to login.php to log the currently large user out so let's make a page call login.php and since it's a get request or we don't need to provide any parameters just the Callback function which is going to handle the response from the backend so response log out now here is the problem before we Define this function response to our group that is a problem if we notice when we are checking this login status we are making a fetch call to the same URL endpoint with the get HTTP request method and we are again making one more request to login.php this is also a get request however the purpose over here is different so this time we want the user the log user to be logged out because both of them are presenting the same information to the backend how would they can differentiate between these two the purposes of these two requests that is however they can decide that when they get request for login.php comes should it just take the status of the locked user and respond with the user's name or should it log out the currently loud user so we have to provide some kind of mechanism through which the backend can differentiate between the two requests so what we are going to do is that we are going to attach a query parameter with these two or maybe with just one so question mark few for query and the value should be check status you can write anything over here the important thing is that this check login status has a query string attached to it whereas this one doesn't have any quality string attached to it so now based on that we can go to our login.php and since we have attached the query with the check login status so therefore let's go and make some changes over here foot and is set color sign underscore get a query with the name Cube so if this is set that means it's a request to check if the user is logged in or not however if a request comes and we are not looking for any query stream then probably we are interested in logging out the user now inside the if block we are going to put another if block just to be extra careful if is set the sign underscore session log user if we have dialogue user that means we have already created a session and some session variables as well in that case session underscore unset this is going to unset all the user defined session variables as well as the PHP session ID now we can destroy the session so session underscore destroy Json and code an associative area lockout you said else so let's copy paste and account settings with false and then no matter if this energy blockages are the else plot execute at the end we simply want to fix it that's it so even if we don't put this if there it will still work but we want to be extra careful just in case somehow this this request gets triggered when no user is locked in in that case we want to display this s block let's go to login.js because we haven't defined the response logout function let's just also log for the time we just log out the data then if data DOT log out if the value is true in that case display login register icons so we are logged in let's click on the logout and we got logged out successfully let's check our console as well so the logout is true and as you can see we have now login and register icons made visible so that means we have successfully logged outside now the only thing left is that we have to define the logic for registration in our last part we completed the login system today we are going to complete the remaining section that is the registration of new users so we want this registration logic to trigger when we click on this register icon at that time we want an overlay to appear over here with a registration form in the center which when submitted obviously will go to the back end and ask for the registration of new user to take place which if succeeds we will notify the user that you have been successfully registered so let's get to it Okay so we need to create a new file register.js and register.php so let's create those files in the front end [Music] register.js now in this file we need to have reference to our register icon but in our login.js we have already created this reference so we can't create another reference over here because at the end all of these JS files are going to be considered as one single unit so that means we can take advantage of that and and directly use register reference that we have actually created in login.js and create an event listener with this reference so the click to see if it is register new user let's define this callback function So currently it's empty before we write any code over here we need to go to our index.html file [Music] and we have to [Music] our HTML file now since this register.js file is going to use a reference which is defined in login.js so we always have to make sure that the register.js file is appended later then login.js because we want to make sure that login.j is loaded and only then register.js is loaded because registrator.js is dependent on a reference which is defined in login.js so we have to make sure that this register.js comes after login.js in our index.html file the other option that we can use is that we can take all the references from this login.js to our global.js and that means we will also have to move these two lines where we are attaching event listeners with login and logout functions because our global.js file is the last file which gets loaded so if these references are over there in that file and in this one we are trying to directly attach an event listener to them then by the time login.js file gets executed at that time global.js has not executed so that means these references are not created and we are already trying to attack even listeners with those files so that's why not only we will have to move these references but also these two lines where we are attaching event listeners to global.jsy so this is another solution it's up to you whatever solution you want to keep I'm going to continue with the one that I just mentioned the first one that is just directly attach an event listener in register.js file and the only thing I have to make sure is that register.js file comes after login.js file in our index.html page okay now for the register new user function we can take the same across that we took for logging in a user that is we create a form and then append that form in the overlay the new user submits a form and it gets registered or not depending on depending on the values of the fields but over here I want to show you a different approach so rather than creating a form from scratch and manually defining all the input Fields what I'm going to do is there I'm going to make a fetch call and ask for it to return the structure of the user table and the data that I'll receive as a result will contain all the information related to different columns that are present in the users table and then a loop over those columns the data that I receive in response will contain all the information related to different columns in that user so I'm talking about information related to The Columns not the data in the rules but information about all the columns in that user table so once I get that data I'm going to Loop over those columns and I'll keep on creating those input fields in the form so this way I don't have to write lots of code for each single input field we took the approach of manually creating input Fields with the login form because we only had to create three Fields username password and sub inputting but over here we have more than three Fields so let's start with that by making image call to our backend foreign [Music] function response user table info so when affects request goes to register.php it will send it will respond back with the information related to the user Temple so now let's define this function [Music] and for the time being just console log it whatever we will receive from the back end now let's go to overplay game and create this file register.php [Music] okay let me close this login.js file and index.html file we won't be eating them let's go to login.php file and let's copy this these three paste it over here [Music] should happen so let's start with creating the statement the SQL statement which is going to be this guy user which is the table name so before we write any further logic let's go to our workbench and execute this command and see what comes up okay so this is our work paint and our database is already selected so let's just write the command file user so this is the information that we've got we are getting multiple rows the first row contained information about a field named ID it's data type yes or no is it a primary key does it have a default value and extra information is up increment then username of type Watcher with company and it has to be unique email Watcher a continent and it has to be unique as well password Watcher it can't be meant however it doesn't have to be unique likewise first name and last name again they are type Watcher and they can be left out so this is the information and we will get this information once we execute this statement describe user and since we are not taking any data from the user and using it in this statement so we don't have to go for prepared statements we can use Simple queries so let's create a variable result and using our connection object it's called query method and cross this statement yes how to create an empty array now since we are going to get multiple rows so we are going to use while loop while [Music] convert it into fetches so get one row at a time from the result set and convert it into an associative area and store it in this row variable now inside the body of this while loop let's keep pushing [Music] here that we just created that has been returned from the result set and since this is the only statement so we don't need to use the packet spot this while loop let's send it this data key that we should use is less statement column Matrix plural because it is more than one column [Music] and let's put in the array let's exit it now let's go to our browser time to open the developers tools foreign columns which is an array containing six elements okay at first index we have an associative array or an object so the property name of this object is field value is ID second properties type values in third property is null value is no four properties key values p r i for Prime D default default is done okay and likewise the second index is an object with the field name username third one is email password and all these things so this ID is the one which has the value auto increment that means if we don't provide the value for this this will automatically be incremented so that means we don't want to have this ID field as our info field in the form so that means if we remove this first index from this array and same determining data that would be good because we are going to use for Loop to iterate over all the elements in this array and create corresponding input fields in the form for each of those elements so it's better if you don't have this ID field in the array [Music] ID is the first element in the array we can remove that first element and to remove an element from the array we are going to use a method called array underscore slice it takes three parameters the first one is going to be the array from which we are deleting certain elements so the array is named a double r then what particular index that we want to delete in our case it's index 0 a very first element then over here we have to Define from this particular index how many indices you want to delete or how many elements you want to release since we only want to delete the very first element in the array so we are going to put one if we put 2 then starting from index 0 it will remove the first two elements we only want first element to be removed so one okay now let's go back to browser again let's give it one more try and now you can see we have an array with five elements earlier we had an array with six elements and if you notice we don't have any field with the name ID in it now we are going to registrate.js file and back to the function we are working on [Music] and now we can Loop through this data and create input field for each of those elements in the array so first let's create a div which we are going to populate with this form element okay formative dot class name equals firmative I think this is the name that we gave to so this date in login.js and since we want this one to inherit all the CSS that we have defined in that evenly login.js so we need to put the same class name okay now let's create the H2 element [Music] s contents is closer registration apparent this H2 as its first child in the form View so formed if a pen child H2 now let's create a form so cons document dot create element form next is this class name that I confirmed from now we are ready to iterate over the data that we have received keep on creating input Fields with respect to those arguments in this data and then one by one keep attaching that in between to the form and finally we will append the farm to be this Farm div so since the actual units are in a property named columns in this data so let's simplify it by creating a column and assigning data Dot columns to it let's make it two let's type over these columns constant so columns Dot for each this takes an arrow function and it will take one element from a column at a time so let's make it singular column and in the within the curly brackets let's define all the logic so let's create an input field element since it's compulsory for our input Fields you have name associated with them so input name equals we are going to get this name from column dot C because field contains the name and we want the same field name to be the placeholder for this input really as well so input dot Place model equals column chart field with capital F because that's the name that we have been returned now about the type of this input field we are going to have different heights so if the column is password we want to appear dot dot dot when the user types in the password rather than displaying those keys in the input in the input field so that means we have to Define type of that input field to be our type password and when the field is emailed we want the type of that input field to be of type email as well so for the type of input field what we are going to do is that we are going to use switch statement so switch on column dot feed name again name so now case if the name of this field is password because that's the name that we gave in the database this is password if that is the case then input that type password as well [Music] case 2 is if the name of this field is email this one this is the name that we have to make the case of so if it's email and then click the third case is default [Music] if it's neither password nor email then in that case we want the input field of type text so input that type equals text [Music] okay now outside this painting bracket of case statement we are done with the definition of input field now we have to append that input field to the form so from that a pen child now outside this for each Loop which ends over here so outside this far each Loop we have created input fields and appended them to the form the only missing input field is the submit button so let's create that submit button for cons ENT or create element type input submit that type is submit if that name equals register child [Music] submit now everything is defined so at this stage what we can do is that we are going to call display overlay function and we are going to pass the form div oh I need to let's put it but before that we have to attach this form as a child to farm day found this type of pink child we have to pass in the form so now this form becomes the second child of this and now we are calling display overlay function and passing date to this overlay function and if we haven't made any mistake so now when we click on the register icon we we should be able to see an overlay with all the input fields for the form [Music] okay now let's click on register now you can see the form the only thing missing is the styling so what we are going to do is there we are going to give this form the same styling that we gave to our login form so the class name that you give to this form is [Music] and let's look for the login form okay [Music] um [Music] and again over here paste [Music] coffee yes [Music] so these were all the styles that we get defined for the login form and we are giving the same styling to our registration form as well now let's go it hasn't worked oh this is supposed to be found not done [Music] okay brilliant so this timing has also been applied the only thing is that now our farm is overflowing so let me close this and see okay that's better but the point that you have to remember over here is that the CSS styling that we have developed is not mobile friendly I have tried to make it as generic as possible by using Rams and percentages but in some places I have used the exact pixels so that's why when I shrink that browser window the input fields in this form overview so I leave this up to you to make it more adaptable I will not be focusing on tweaking these parts as long as it works I am happy with this now what we need to do is that once the register films in all the input fields and click on submit button then another request you go to the backend to register this particular user so now we need to associate an event listener with this subject button so let's go to our code editor and register.js so we have defined the circuit input field over here now we have attached an event listener to this one I want this click the name for the corporate function is [Music] register form submit now let's define this function so copy option okay let's pass in the event so that we can decide with the default Behavior associated with the submission foreign [Music] data and pass this form to get constructed so cons [Music] new form data and process now this form has all the input fields and their values as a query system within this form data constant now let's make a page call to the back end same endpoint register.php the call Base function is response register form pass in the third parameter or five course because we are sending form with this request so the method has to be posed because we don't want to attach the query string in the URL we want to attach it in the body of this HTTP request now the fourth parameter is going to be the from the object okay now let's create this function see function paste this will get the data back from the backend and I'm being let's just also not whatever you see from the backend now let's go to register.php [Music] and Define new hit block but change the method from get to post [Music] okay so now we know that our farm contains some data so let's first store them in the local variables username post username [Music] password email first name [Music] last name okay now let's create a split statement and since this time we are going to insert data in our database which we have got from the user so we have to use prepared statement in order to avoid SQL injections statement equals [Music] insert into user [Music] username password email [Music] first name last name then value [Music] one question mark for username another of our password third one for email code for first name and last one fifth part last name semicolon now let's create a prepared statement another sign right underscore state name equals connection here and cross in these technique variables now we have to bind the patterns with this prepared statement and we have five placeholders and all of them are of type Watcher so string one two three four five now let's pause in the first variable for this username placeholder which is going to be the username and the second one is password that is email then first name then last name now we have bound all the parameters with the placeholders and we are ready to execute this statement so prepared pigment execute now this execute successfully then we will get true as a response otherwise we will return we will be returned fast so if it executes successfully that means a new row has been added successfully in the database so in that case we want to inform the user [Music] cross into as its value and since this is one statement so we don't need these early brackets let's move on to the else part foreign before we exit let's close the prepared statement and then exit okay now let's go and try to register a new user through our phone register so we already have one user with the name Triple E and let's try to put a new new user with triple B 8 p.com which will be submit so we got registration successful let's go and check in the okay so we have got this new user registered so that means we are successfully registered now if we have successfully registered we want this overlay to disappear so let's go to our register.js and Define the tweaking so register.js coming this out so if data contains a field or property named registration in that case we want to alert registration successful and then you overlay okay now let's go and try to register the user this time let's make a Triple C Triple C is triple c.com submit so we got a message registration successful okay and now the overlay has been removed as well I forgot to test what happens if you try to register a user whose username or email already exists in our database so let's work on that part [Music] so this part executes if we get a property named registration however if that is not the case in that case we want to display another alert error message and then we want to reset the form the form dot reset so that so that user can get one more attempt at registration with with clean form no previous data in the input fields okay now let's try to register AAA once more since this username already exists let's use same email again AAA I think we have made one more mistakes so this password should not be visible instead of these keystrokes we should have been able to see these the dots over here so let's go to our for each group so input type is password this is correct okay okay K is fast password okay so over here we have made scaling mistakes so rather than executing this case in the case of when the field name is password we were going to this default portion so that's why the password was visible [Music] let's give one more try a h a aaa.com password Triple A now we can see the dots foreign registration field try again later so maybe we should have given the message this username or email already exists something like that but this is more generic so let's keep it that way unless you want to be more specific then you can make those changes yourself but for this project I am happy with it after all there should be something for you guys to look forward and modify as well so with this our registration logic is complete as well now we are ready to work on our shopping cart which we will do in our next tutorial but in this tutorial I want to correct one minor not actually a mistake but evolving sign that I keep receiving so we need to fix that thing so for that let me take you to backend and let's open the server let's go uh if I fixed it let's check menu.js sorry not many.js menu dot PHP [Music] okay well it seems that one warning sign that I kept receiving has magically disappeared but since I noticed it earlier and I also figured out why I was getting that message so why not I should tell you so this is our menu.php file and in this file I am requesting all the categories from the server so it's going to exclude a statement select name from category where status is equal to 1. then over here I am executing a while loop so basically when the query executes it stores the whatever result in the result variable then in the while loop I am converting that result into an associative array but one row at a time and then from that row that has now been converted into an associative array I am only taking the element with the key named name and storing it in the name variable and then proceeding further so it works fine in the older version of PHP it even didn't give any warning sign but now recently in the newer versions of PHP it has started to give not a relative warning sign so the program works perfectly fine no issues the only thing it's doing is that it's giving you a warning sign and the warning was we are trying to extract name from the null object and storing it in the name variable so when the object is not obviously it can't have a property named name so while we were getting this message is because let's suppose we have been returned three rows when we execute this statement and this effect is Optics one row at a time and converts it into an associative array so when this while loop starts first time the effect s of X first and convert it into an associative array then from that associative array it extracts the key with the value name and so and gives it to name fine second time the second loop executes again we have second row it converts it into an associative array and from that array it gets the key with the name named and stores it in the variable name third time also it works fine but a fourth time when this while loop executes so we are saying convert the fourth row which doesn't exist into an associative array and on top of that we want to remove this name from that row or that associative array and store it in name since when this while loop executes the fourth time there is no row to be converted into associative array so this part has returned as null when the fourth time while loop executes and from that null we are extracting a key with the name named since the object is null obviously it can't have any property associated with it so on the fourth go we are getting this warning sign that you are trying to get a property name name from a null object so I don't know why this warning has disappeared but in case it appears again for your future awareness as well let's amend this once in forever so I'm going to remove this key and now since I've already given this the word name name so I'm keeping it as such and remember at this moment in time this is actually an array because we are converting whole row into an associative array and giving it to the name okay so now this name is actually an array and when we are pushing this name from this name array we want to only push key name to name and push it into this array so everything works just as it was working earlier no changes the slight warning sign that I was getting and for some reason I'm not getting any more so I thought I should let you know just in case okay this specific video that you are currently watching in this one we are going to learn to implement a shopping cart for our guest users this shopping cart is going to be implemented through PHP sessions at our back end in our future videos we will be implementing a shopping cart for our registered users who have currently logged in which we will Implement through your database tables okay so that was introduction now let me give you a demo of what we are going to implement today so as you can see currently I'm not logged in means I'm against user over here and since you can't see anything above our icon so if I try to click on this icon I get this message that the card is empty [Music] so let's put something in our cart let's click on this and let's select the quantity from one to two now add it to the card so currently you can see there is nothing above this card icon let's click on this A2 card now you can see there is one above width so even though there are two products we can see one in this circle this is because the unique product is one however its quantity is true so let me add one more to it add to cart still we see the number one over here because this number represents Unique Products not their quantities now let's click something else this is out of stock [Music] let's add this one now you can see the number one has been changed to number two because there are two unique products in our car now let's click on this card icon now we have been redirected to our kind of view card button I'm saying kind of because we have not actually been redirected if you notice we are still at our index.html this is because the logic is implemented as a single page application that means our page doesn't refresh only some of its contents have been replaced by new contents okay and as you can see we can see certain information regarding each product so this is the item this is the current selectric quantity over here we can see its availability and this is the collective price for three units of this product and this is the delete button if you want to completely remove this item from our shopping cart and over here we can see the total now let's change the quantity from three to one you can see the price changed as well and our total has also changed now let's delete the item deleted and since our car got empty so we got again kind of redirected back to our work index.html page to our dashboard and let me be clear we are not actually redirected only the contents have been replaced by these new contents because we are implementing everything is our single page application which doesn't require refreshing and reloading the page so it's single page in which we can see different contents okay so that was the demo now let's go and start working on coding coding okay so we are going to start our core by creating two files one for front end and one for backend so well so for the front end EXP [Music] and [Music] the car.php okay now let's connect this car.js file with our index.html file [Music] okay so we have everything so we have 32 files and we have Associated our car.js file with that HTML file now watch your video find over here so let's go to our demo project so this is not the demo project this is the one that we are defining so there are certain things that we want to happen so the first thing that should happen is that as soon as this page is loaded into the browser a request should go to the backend and it asks for the current status of the car and if currently there are any items in the card it should display a circle blue circle over here with the number in it and that number represents the current number of items in the card so we have to start with that part so we are going to attach another event listener with dom content loaded event for this card so let's go to global.js file where we have defined all event listeners which are associated with the Dom content flow detergent so let's open global.js file foreign [Music] status to okay now let's go to card.js and Define this function [Music] okay so this function is going to make a fetch call to the backing and ask us for the current status of B shopping cart let's call card.php response [Music] update card so this is going to be a get request therefore we don't need to provide this parameter and this doesn't send any data along with this request so we don't need to provide the four parameter either just two parameters point [Music] so what we have really done is that we have defined this function and the local function our inner function within this main within this top level function but since this function is going to be called from many different places in our card.js file therefore we are not going to create this as inner function because if we create this as enough function that means the other functions will not have access to this function and we will have to redefine the logic which we are going to Define for this function at multiple places we don't want to do that so we are going to Define this as an independent function response update card it will be seeing data from the fetch request so at the time being we are simply console logging the card from the beginning the rest of the logic such is the contents of the card or display name and if this card is not empty it contains some data then depending on the number of products in the car we want to make a blue circle appear on the cart icon with the number matching the number of items in the card but that logic we are going to Define later for the time being we are only console logging whatever we receive from the backend next we need to define the counterpart for this request which will handle this request in court.php so first thing is let's create another PHP file and let's copy this part close okay [Music] okay now if the request is applied K in that case we want to return whatever is the current status of the car now since we can't to have two different kind of Cars one for guest user which is going to be implemented through session variables and the other are logs user which is going to be implemented through database titles so even though we are currently working on the guest user's card but in future we will be making the other card as well so we need to make some preparations such that this file is able to render both kind of requests so the first thing that we are going to do over here is we are going to check if color sign underscore session log user so if this session variable is set that means we have allowed user so we will be handling the requests differently so in that case we want to call a function which is going to handle the session which is created through database tables so we are going to call get [Music] logged user card foreign okay so we need to Define both of these functions and since we are going to have many more if blocks with a different kind of HTTP request get post foot patch and delete so what we are going to do is that we are going to create two more files let's define those files in in viewed folder because these are going to be internal files as well no request is going to come directly for these files so the request for the cart is going to come to cart.php file and this PHP file is in turn going to utilize these two files so Cloud user card PHP and the other one is going to be test user card.php now include both of these files over here so inside the current folder we have a folder named include and there we are just user card.php file foreign is going to delicate the request to one of these files so what we are going to do is that we are going to cut this database connectivity file and test it over here in both of these files because these files are going to do the actual work coffee and test [Music] now we have to Define this get log user card function in the logged user file so let's rename this file I have actually create a logger user I was supposed to get logged user file okay so let's define this function in get log user file currencies and so now you can see red wiggly line it has disappeared because we have definition for this function now we have to create this function in guest user record file so let's define this function this is empty so now we keep it over here and then okay now since we are working on the card for guest user so let's close this part for the time being and let's open this test user card and over here we have to Define all the logic if the request has been redirected to this function this means it has already been figured out that the customer is actually a guest user now since each time the web browser is refreshed or the website is loaded for the first time in the browser in all of these cases a request will come over here so that means this function is going to be executed multiple times so when this function is executed for the first time it means the user has just typed in the URL address and hit enter and the website is being loaded for the very first time in the browser so at that time obviously there won't be any card variable created in this session for that user so we have to check if this is the very first time in that case we will create a new session variable named card and then return that empty car to the user otherwise if such variable already exists in the session then whatever is the current state update session variable we will simply return that session variable to the user so we are going to check if is set color sign underscore station so within the session do we have a variable named car if it exists let's make it if it not exists in that case we are going to create this variable [Music] it's going to be an empty array so this statement will only execute if this if statement returns true if not this part will never execute then we simply want to return this session variable named call to the user foreign the index name is card and the value is going to be the session variable okay and that's it so let's go and test it out if you are able to receive an empty cart in the browser okay now that let's refresh it and let's open the console so let's check this object because we have received this object from card.js file so it is this object is one property named car which is an empty array because currently we haven't put anything in the in the card session variable we have just Define this card session variable to be an empty array and that's what we received [Music] okay now for the time being we are going to leave this function and not Define the logic for this function because currently we don't know what kind of data is going to be stored in that card array and if you don't know the actual data there we can either Define the business logic now we can Define the presentation logic so for the time being we are going to leave this function as it is and let's move on and think about what else do we need to Define for this card functionality so the the other thing that we want to do is that when we click on this this or any item and we reach over here then whenever we click on this add to cart button then that item should get added to our actual card so we have to Define this logic so basically we have to attach an event listener with this add to cart button and that event listener should have certain information related to the product because we are going to send that information back to the back end and that information is going to be stored with each product in the card so that each product could be uniquely identified this that which particular product has been added in the card what is its price and how many quantities have been selected so let's inspect this Edge card button and see where it has been defined [Music] come here okay so this is the button with the class name eight to card now since this button is inside an overlay which we defined in the global.js file so that means we have defined this button in the global.js file so let's open this global.js file and look for add to cart Plus now we have to attach an event listener with this button so that's the card Dot edit event listener click and let's define the Callback function and now when we are defining this event listener it is called with custom we are going to bind some values because this add to cart button need to have information about the product which has been clicked so that it can pass that information to the back end now since this add to cart button is being defined inside the function get product details and get product details has all the information related to this product through its this keyword the only information which is not present in this this keyword is the current stock for this product for which we are making a request to inventory.php and because of this inventory.php request now we have the stock in this stock variable as a response so all the information is going to come from this keyword and the stock is going to come from this stock constant so all we need to do is that bind the information from this keyword and this stock to our new A2 card button so what we are going to do is that we are going to pass an object to this add product to cart function the first property for this object is ID and its value is going to come from this dot ID the second one is image and its value is going to come from this dot image third is price which value is going to come from this dot price and the last property is stock now since the property name is stock and its value is going to come from stock constant as well so this is the short time since when the property and its Associated value both are same then we can write a shorthand that is just stop now we have downloaded all the information as an object and since this function has to do with curve functionality so what we are going to do is that we are going to Define this function in the car.js file so copy [Music] Define this function just console log istics now let's go and try to add an item for the card by clicking the a to cart button so let's click over here to cop in 12 it has come from car.js at line five so this is the information that has been printed from this keyword so id43 image is this price and the stock so the fact that we have we have got the stock as well that means we are actually seeing this data from the add product to cart function okay so before we make a request to backend along with this data there is one piece of information that is missing which is the quantity selected so this is the quantity so we have to access this quantity and send it along with the rest of the data to the backend so let's go to the function that we are defining let's get a reference to the select statement foreign [Laughter] so this is the object associated with this keyword and this is the value of the select element change it to it and now we've got it so now we have got all the data that we need to send to our backend so now let's go make a fetch call and send this information to our backend now since we have data that we want to be sent along in the body of our fetch request so that means we need to figure out a way to attach all this information to the bodily object request or HTTP now since we are sending some data that means the request is going to be post request and usually with the post request we really have at the front render form from which we extract the data and send it along to the backend but over here we don't have any phone so what we are going to do is that we are going to create an object of type URL search theorems using this object we can create key value pairs that are going to be part of the query string so a query string is the part of URL which comes after question mark so let's create that query string so let's make it better or we can make it payroll as well because that's what it's called in the HTTP terminology you you are in such patterns now we have created an object of type new URL search params whose name is payload now we have to attach all this information one by one so hello this takes two parameters the first one is the key the second one is its value so the key is going to be ID and the value is going to be the start ID foreign price it's really going to come from this start files then payload dot end and the stock is going to come from this dot stock [Music] quantity is going to come from now we are ready now we have all the data in the form of query string and we are ready to make the fetch comp to r.php the Callback function is going to be response update card the same one foreign now its response is already defined to this function so we don't need to to any more front-end charging let's move on to card.php which is going to accept this request so again p P card users new case now request method is again if it's a logged user so we are going to call a function which is going to add air to log user card that's required test user card so let's just find this function in the [Music] launch user file and this one in the [Music] test user card [Music] [Laughter] [Music] [Laughter] [Music] so we are not working on lab juicer again let's close this and let's work on test user card options now over here first of all we have extract the data which is present in our post Global super variable and store it in the local variables so ID because ID foreign [Music] now it is possible that the user tries to add an item multiple times in the card so in that case when add to cart button has been clicked we have to make sure that the ID of that product does not already exist in our card if it already exists simply increase the quantity and update the collective price otherwise this is a brand new item which is not already in the car so let's create a new element in our cart array and appendate element so what we are going to do is that we are going to check if is not set another sign underscore session with the index name car and use second index matches the ID of the product so if no such index element is present that means it's a brand new product so we have to foreign card for the very first time so we are going to store it in the session variable at the index ID so this is its unique identification so now this is a two dimensional array the First Dimension has the index name car the second index keeps changing depending on the product ID and this element is also an array so basically this is going to turn into a three-dimensional array so the array whose first index is called second index is ID and the third index is image if you want to store the value this one over here P test first index is card second index is ID but the third index changes stock and the variable value is stock as well third one is price sorry quantity now the fourth one is going to be price so even though we have this price variable so that means we have received the price of the product from the user but I don't think this is a good idea because if the request is coming from user so the user can select let's suppose a quantity 10 and for the price it can manipulate it and change it to where you will expose one dollar or one pens so we should not reuse this price so that means from our front end we have to eliminate this price as well we are going to calculate this price at the back end ourselves so there is no possibility that the user can hack into the system and buy multiple products for let's say the price for 0.01 friends or something let's comment this out for the time being and let's work on the rest of the information so if we don't have already an item in the card which matches this ID that means it's the new folder that we are adding so this information these three pieces of information gets attached to an index which matches the ID of the product however if that is not the case that means this particular ID exists in the cart in that case we already have this product so we are basically increasing the quantity so whatever is the new quantity that we have received we have to add it to the old quantity and update the current quantities so in that case the quantity is going to be copy test so old quantity plus new quantity now since now when the quantity is updated the price needs to be updated as well so we are going to create this price outside if and else block now the price for the price what we are going to do is that so ignore this price you shouldn't get this price from the user so let's create a new variable over here price and now we are going to call a function get product price and we have to pass the ID of the product whose price we are interested in it's called a time being just in case to avoid this error that we are getting so now we have defined this function foreign [Laughter] statement equals guys bucket where I equals step two create prepared statement of this statement step three bind parameters which is placeholder represented 3D question mark press statement assigned the type of this ID is integer so I have virtual ID finder prepared statement if result equals five statement so if we do get the result it's going to be stored in result variable hence it won't be null we that is the case in that case will return fetch a sock is return now let's go back up so over here we've got the price now next we have to apply this price times quantity but since this multiplication can result into a decimal value which is longer than two decimal points so we want to round it to two decimal points okay now the next thing is we have to call another function called and this is going to attach another variable to this card which is going to contain the total cost of all the products and their quantities so let's define this function [Laughter] let's define a local variable total and everything is 0.00 so this is going to be the default value for the total in case our cart is empty and then since we are going to look through all the items in the card so that means we have to use for each Loop foreign now since this is the first index so that means each of this item is going to be the two dimensional array whose first index is going to be the product ID and the second index is going to be different indexes such as the image price quantity these things so what we are going to do is that total is going to be total plus the current value of total test current item that is going to be the the second index so all the elements of that item are going to be accessed through this item and then this is going to be the third index so we are interested in the price so take the price for each of those products and add them to this total now because we are adding floating Point values so this addition can result in a a very long decimal point value so again we have to restrict it to two decimal points hotel is going to be it's rounded to two decimal places and two so now we have got the the total value of all the products accumulated in this total variable and then session card and the second index is going to be total and give it the value okay so that's it so these are helper functions foreign this is another helper function [Laughter] so I think we are done with the trading item for the card so once we have the total card as well now we can send the reply back to the user to Echo code again the index is hard and the value is going to be session card so what is being returned is exactly the same is the one that we Define part of our get request so these two functions are also returning the same value so this thing and this thing they are the same a different end the same function can handle both the requests so the same function was this response update card which is currently just console login whatever it receives try to update this item to the card and now this card object contains two properties the first property name is 10 which is actually the ID of the product that is in the car and the value of that property is another object which contains all the information related to that quarter and the second one is a property name total and whose value is 9.99 so this is the price of single unit of this particular product now click on this a to card one more time and see what happens we should still be able to see one item in the car however our total should increase to around 198 something 599 and the quantity should increase from one to two so let's click it one more time and let's see so the total has an increase however the quantity has increased so there is something wrong with our total calculation so let's go and let's figure out okay so I figured out the problem so the first time when I edit the product that product was not in the card so this part was excluded the else part of the script and then we moved on to this part so everything worked fine and we got the correct result however when I appended the second time the same product this part was not executed we moved to this else part which again did its job then we moved on to this thing this this function again executed properly however over here we are making slight mistake and the mistake is that we are storing this to this price index and what is this it's saying the current price times current quantity so the current quantity is one because the second time again the quantity here was one so what we are supposed to do over here is that we have to get this quantity that we have recently updated so we have appended the quantity to the already present quantity that means the exact quantity is stored in this session variables so copy this and replace this quantity with the one that we have received from the user because what we have received from the user is represents just one quantities however this one quantity plus previous one quantity makes it two and now our logic should work fine now since we haven't made made any changes to this particular item so the total is going to remain same which is incorrect so what we are going to do is that we are going to application and remove our session because the session contains incorrect data console now array is empty cart is empty for we have received an object with two elements or two properties so let's click it one more time now the quantity is two and the price has also increased properly properly so that means our adding item to the cart is working let's try to add another product let's save this one change its quantity to three edit then our cart object contains two properties the name of the first property is 10 and its value is again another object the name of the name of second property is root 4 and its value is an object so remember these 10 and 44 are their IDs unique IDs of the products and in our cart object we they become the property names and then we have this total which is 2218.8 so let me get an item so the cartridge is working perfectly now the next logic that we can work on is the user interface so let's close this so the user Enterprise is that if there are atoms in our cart we should be able to see this blue circle over here with the number representing the current number of unique products in the card and the second piece of user interface logic that we have to work on is that when we click on this car if the card is not empty we should see the detailed card page from where we can update the quantity as well as delete the product as well so let's start working on this circle that appears over here once our cart is not empty so let's go to cart.js but we are going to before we Define the logic for this response update card we are going to create an object called local code which is going to consist of few properties one of them is part initiative length initially it's zero and a paradise total and initially is 0.0 as much as possible so whenever a fetch response returns us the latest state of the card we will store it locally and because of having that card available globally in an object we can access the card through this local object this will help us decrease the number of pledge calls to the back end as long as it's possible so every time any of the functionality makes changes to the cart object at the back end that functionally will get the new state of the card as a result and then we will store that new functionality in this local cart object and the other functions which want to access this card they will get it locally through this local card object rather than making a trip to the back end and getting it from there so the only thing that we have to take into consideration all the time is that whenever our card is updated at the back end we make sure that this local card object reflect those changes as well okay now let's go and Define this function okay so by now we know that the data that we have been written actually consists of an object and object has one property named cart in it and inside the cart object we are going to have all the product IDs if the properties update cart object and the rest of the information related to those projects is going to be stored as a value for those properties the last property in that cart object is going to be a property name total which is going to contain the accumulation of all the prices of all the products in the card so let me show you in the browser okay so this is the object that has that we have been returned which has one property named card and this card again is an object and it has three properties one is a property named 14 and the value of this property is object which contains all the information about the product whose ID is 14 and the second property is 30 whose value is again another object which contains all the information about the product whose ID is 38 the last property is a property named total which contains the total of all the prices of all the products in the card so basically we have to separate the products in a separate variable and the total in a separate variable then it will be easy to process them so to do that we are going to use object restructuring since we are restructuring an object so we have to use value brackets and right now I am just extracting the car the whole card along with the total from the Theta object that we have been received now from this card actually we can do something so let's use data Dot card sorry ethernet card and over here so now this represents the card object so from card object what we are going to do is that we are going to extract total and the rest of the contents are going to be in the another variable which we are going to name is card now let's console log total n card to verify if we have done this restructuring properly so console log total then [Music] card okay so you can see this total and then this card and this card doesn't have any total anymore because we have D structured this card data at card into two variables so basically we are assign extract the property name total from this card and store it into this variable and over here we are saying after extracting total extract the remaining properties of this variable are this object into this new object or this new variable so now card contains just the products and total contains just the total [Music] okay so now we have the current status of the car in these two variables so let's update our local card [Music] so we have a property named card in available card length and total that card we are going to assign this car to our local cart property then local card dot hotel which is going to get the total that we have just restructured from our object data.card now for the local code length what we are going to do is that we are going to so basically what we want to know is that how many products are currently in our card have this pin and add a then we would have used car dot length but since it's not an object so object doesn't have any property three which we can count it's all the properties and that object so what we are going to using so what we are going to do is [Music] we are going to use objects or keys and we are going to pass the object whose number of keys we are interested in whose all the keys we are interested in so we are passing it we can pass the card our local card.com both currently represents the same thing so I'm putting in the car now this will return as all the keys and by Keys we mean the properties all the properties in our cart object so product IDs are going to be returned as keys as a result of executing this method now on that we can use the length [Music] because we have been returned an array so this is object with capital O not smaller so now we have caught in local cart property total in local cart or Total Property and the number of items in the cart in local product length property now until we make another request to the phase which makes changes in our card we are going to use this local object the local carton if in the meantime we need to access the card at the front end now after updating this local card we are ready to work on bringing the cursor over the cart icon so to make this cursor appear and disappear over the card icon first of all we have to go to our CSS and create a CSS class there click let's go to index.html let's look for card [Music] and over here let's add one more class to this car not now let's go to CSS file so that's called the not class so there it is so what we are going to do is there we are going to Define certain style for cart not empty class but we are going to Define this style car it's after C2 class sorry it's after C2 element and what properties are going to set for this so let's go back up to our root and to find one more variable card and let's temporarily put 6 in it let's make this card size okay now let's go back down [Music] here 10th [Music] is [Music] card size so whatever is the value of this variable those are going to be the contents of this after C to class sorry 0 element let's give it to it let's make it 28 pixels [Music] is also 28 pixels the crown color is going to be primary color now let's convert this to Circle by setting its border radius to 50 percent okay so this is how it currently looks remember now if you notice dividend height property has in hasn't taken effect so to make width and height take effect we have to set its display property either to block our inline block but if we do that even though the width and height will take a bit but six won't be properly aligned within the center of that Circle if we not only want to make width and height take effect but we also want the number to be exactly in the center of the circle we have to set its display property to flex and then set the contents to be centrally aligned as well as centrally Justified so that's what we are going to do display is flex justify contain Center align item Center and let's increase the width in height a little bit more to 25 pixels now you can see it's centrally aligned but since now it's occupying a lot of space and it doesn't have any more space on these at the end so it has moved to the kind of next line and because of that the card icon has moved further up as a result it's not aligned with these two icons anymore so now we have to bring this card icon back to its original position and we have to move the circle to the top left corner of this discard icon so so to do that what we have to do is that we have to take this circle out of the normal flow of these items in the browser and to protect element out of the normal flow we have to set its display property either to be fixed sorry not the disk your property the position property either to be fixed or to be absolute and then we can set the top left bottom right Corners to place the element anywhere in the browser so if we set the position to be fixed then we are basically positioning the element with respect to the starting position of the browser and if we set the position to be absolute then the element is going to be positioned with respect to the first parent whose display property has been set to something other than static here so we we want this circle to be positioned with respect to Icon this card icon therefore we have to set its display property the surface display property to Absolute and we have to make this icon it's apparent so that this circle takes this card's position as a parent property that means we have to say it first display property of this sorry the position property of this cart icon to be relative and then we can set the position property for this circle to Absolute and then we can using top left bottom right properties we can move the circle around with respect to the cart icon so let's first give position relative to setting the relative property and then not defining any top left bottom right properties has practically no effect to the original position of this element so this statement is not making any changes to the cart icon however now because the position property is set for the card now this card will act as a parent however after 0 element if we set the position absolute now when you set the okay let's comment this all for the time being and let's go and have a look on the browser So currently it has no effect the only thing that has changed is that the card has moved to its original position and with respect to the card the circle has moved on previously it was trying to fit into the same place so therefore the cursor got moved up and the circle moved down now we have to move this up and slightly towards the left [Music] that's the top which is zero so we have to move it beyond that initial position so we are going to say minus 20 pixels and left let's make it 10 pixels and see where it places our Circle okay we have to move it further towards the left and slightly down so let's make this 15 some Dynamics 16 15 and let's make this 15 as well okay that's better now let's remove this cart not empty glass from from index.html [Music] and we will add and remove this class to this div dynamically through JavaScript and the contents of that Circle are going to be changed dynamically as well [Music] by accessing this variable from our JavaScript so let's do that so let's go back.js and now over here we have to say if local card crack length is greater than or equal is greater than zero so that means there are content in our car in that case we want that Circle to appear and we already have access to this card don't we Okay so let's get a reference to our cart icon [Music] dot class list dot a [Music] part dot empty [Music] and now we have to change the contents of that aftercito element to reflect the length of this card so that's why we have to get access to the root 0 element that we have defined in our CSS [Music] this is selector [Music] root and what's the variable that we created courtside [Music] so group CSS that style dot set property root CSS that style that said property and the property that we are interested in is card size and the value that you want to give it is going to come from this cart length so tactics now the value that we have to set for this card size from our JavaScript we must append the quotations so the first two Matrix represents the quotation marks for any text in our JavaScript and the second one are part of the contents so the actual contents must have this quotation without this quotation the value will not be set now the value is going to come from foreign [Music] however if a length is not greater than 0 in that case part icon dot class list card not empty class now since we have I think two elements in our cart okay so it has already worked since we have two elements in our card so we can see two over here let's add one more item it's out of stock [Music] three now you can see the value in the circle has changed as well to reflect the number of items in the card so this is working as well now we can move on to defining the the detailed card page such that when you click on the card we should see the card page over here so let's work on that for that we have to attach an event listener with this card such that when we click on it the card contents should appear over here and these contents should disappear so let's go and do that [Music] we have this cart icon now attach an event listener with this cart icon [Music] the event is Click and the function is going to be show car now let's go and Define this function let's go and test it out if this works okay so this is working okay now the first thing that we want to happen when this function is called is that if any of the category is highlighted we want all the categories to be unhighlighted because let's suppose if main category is selected and in the window we are seeing the cart items so it doesn't make sense so first of all we have to make sure if any category is selected it has to be deselected so I want to select all of the categories we are going to call the same function that we created in in one of our earlier videos which was a protective category foreign Ted let's go and see if it works so let's select boy and now click on the cards and you can see the boys unselected baby and it's unselected so that means it's working now the next thing that we have to do is that we have to remove everything which is inside this Main so let's get reference to the main over here HTML element and search is nrhtml to an empty string so everything is erased from the main now create a div let's give it [Music] let's give this class name container date sorry card container now let's create some divs which are going to represent the headings on our detailed card page prawns image heading document.create element do image heading dot text contents equals item [Music] this is now append this tape as a child to container deal so container a pen child so much heading okay now we need to repeat this process for our other headings [Music] first now let's change this [Music] okay first again now this time availability deal [Music] press now order radio [Music] [Music] okay so we are done with the headings now we have to attract through the card and one by one keep adding those elements to this container so to attract to the card which is available through local cart variable or property so far [Music] let's make it ID and product foreign [Music] [Music] [Music] so this object that entries is going to return us each property in this cart into this ID and that properties value into this product variable at a time and then within this curly brackets for this for Block we can Define the rest of the logic so the first thing that we should do is that we structure this product funds and now we know this product contains properties one of them is image there is another one price quantity [Music] one more called stock which is going to represent the availability okay so now instead of writing product dot image is so now instead of writing product.image we can straighten the Right image instead of saying product dot price we can straight away save price product.quantity instead would say just quantity and likewise just talk now let's create a div where we will insert this image so [Music] image div is document Dot create element div now let's create another HTML element image element document create element image image element dot Source equals Matrix http [Music] localhost 8081 and then we are going to append image this is what this because this image variable contains the rest of the path now attach this image element to this image div image tape and child image element so this is imitative now let's create quantitative foreign [Music] we have to insert select statement since we have already defined the logic for select statement so instead of writing the logic for this let's go and get that code we have to find that code in the global.js file search for select [Music] there is [Music] copy and paste it over here now let's go and check if we need to do any modifications so we are creating a select statement over here then we are checking if stock equals zero so in global.js we did have a variable named staff let's go and check if we have a variable name staff over here as well yes we have so if its stock is equal to 0 select our disciples equals true else counter is equal to [Music] less than or equal to counter I plus plus then we are creating options in option dot wedge equals i options are text equals I as well then we are appending this option to select now when we are creating these options over here we need to add one more statement which is going to by default select the option which matches the quantity selected by the user so if I equals we have a variable named quantity but there is a possibility it's in textual form so append plus sign this will convert the string into numeric value which will then write the I if it matches the quantity in that case option dot set attribute select it and we have to put an empty string so this is going to select that element so if the quantity is 3 we will be able to by default see number three there is the displayed value in the options drop down list and we know this stop cannot be zero so let's we need to remove this part okay [Music] because if the stock is zero obviously they cannot be in the card now we need to append the select element to quantitative and then append the quantity group to the container we haven't attached this image different containerizer maintenance image deal and let's do the same for the select [Music] quantity Theft Auto select in container quantitative [Music] now let's create a tip for the availability [Music] so over here we have to use the switch statement because we have to display three different messages if the stock is zero then we will display the message out of stock if the stock is less than 10 we will display only 7 left or only three left and if the stock is greater than 10 we will display the message in stock so again we have defined this switch statement in our global.ts file [Music] and paste it over here okay since we have stopped the name over here so let's change the name stock tag over here otherwise we will have to make changes at many cases this way we only had to make change over here so now if the stock is greater than 10 the tax contains are going to be in stock color is green otherwise so okay so everything is working fine now [Music] okay to the container okay so we are done with the stock as well let's work on the price per product [Music] text contents equals your variable and price that we have this that we have restructured from the object now within this table we also have to create delete button [Music] delete product button as well [Music] delete button container for container that affect child price okay let's go and test it out the logic that you're defined so far is it working or not right [Music] so something wrong there doesn't seem to be an error so it should work I think I haven't appended the container to the main div to the main HTML element outside the far Loop name Dot and child container okay so this is these are the headings item quantity availability order value then this is first image and it's selected to stop selected quantity and it's showing its in stock and this is the price then we delete button then second image selected quantity in stock price and delete button third image selected quantity in stock price and delete button so everything seems to be working we need to put a dollar sign with the price so this is price put it within Electrics [Music] now we can put the dollar sign [Music] okay good so we also need to attach at the bottom a deal for the total and then two buttons one for continue shopping another for checkout but let's style this element first and then we will append those elements or shall we finish it before applying styling let's do that okay so we have to attach those elements outside this for each Loop because we don't want repetition of those divs if we want the total tropical ones and those buttons navigation buttons to appear as one as well so therefore we have to put them outside this far each loop as well so let's create a tip that represents total [Music] let's give it class name because [Music] we'll copy it through our CSS filing [Music] total view.text content equals backtrack turn and then the total is going to come from the total variable that again we have D structured from our local car sorry this is separate it's not destructured so we have to use local card now let's append this to container container that attend child [Music] now let's create a div in which we will put those navigation buttons so navigation [Music] let's give this one class name as well because we need to Define separate CC styling for this as well so name the class name equals now inside this tail we need two buttons one for continue shopping and one for check out cons continue shopping button document create element let's give this class name as well [Music] okay let's give it a text [Music] and hit the shopping button [Music] for the checkout copy paste [Music] copy and paste we have some spellings over here okay let's give this about 10 different class name [Music] check out [Music] now we are ready to append this nail clip to the container so container the brand child [Music] okay now let's go and have a look in the browser again there is something wrong [Music] French art oh card 119 and parameter one is not a price okay we are not supposed to put it any quotations [Music] okay so let's go at the bottom we have already tested checks it's working now this is total and can you see these tiny buttons probably I think we did give a text content so okay it's text content not just text okay so now we can see the total continue shopping button as well as check out now the only thing left is give it proper styling so let's go to our CSS file okay now let's go to the very end [Music] and styling card container typing aims Target card container sets display to liquid columns 25 so equal size four columns on each row the total width of this container is 80 of window or viewport window margin a frame now let's target each of the dips in the container the divs which are direct children of this container not the tubes which are children of these days so so that means each sale of this grid so it a percent display Flex justify content Center align item Center [Music] heading to name top bottom two lamps left and right border bottom solid one pixel screen now let's start with the image which is inside [Music] 35 percent that's better okay now let's start to select imagine now let's work on this delete button so we have given this button the class name delete products [Music] the ground color red marching left because we need space between text and the button to run here five pixels per smooth edges border color is red so that we we don't see the Border color later spacing 0.1 frame font size is large okay that's better now we have to work on total and these two buttons so we have to make sure this total is occupying space equivalent to this whole row because only then these two buttons will be on the next line so we have given the last two the class name great quality four columns so respond to four and we want the text to be present at the very right side so for that we have to set its display reflex and then justify content too right this is not working the contents are still in the center however if we put this class name and Target the direct child with the class name total drill this time hopefully it will work yeah we need to put dollar sign over here as well okay now let's work on continue shopping and check out buttons so let's target [Music] negative credit column again respond to the four columns display grid grid template columns column get 40 ranking that's better now we have to Target these buttons like brown color primary color setting Wi-Fi frame and zero water radius 5 pixels per smooth edges watercolor should also be primary color [Music] let us pressing 0.1 gram font size is large okay so we are done with the styling now the only thing left is that when we change the value in this drop down list we want the price to be updated as well for the product as well as the total price and the second thing that we need to do is that when we click on this delete button the item should be deleted from the card so let's get to it so let's first work on updating the quantity and for that we have to attach an event listener with this options element and the event that we are interested in is change so whenever this quantity is changed we want that event to get triggered so let's go back to where we just defined the select element and attach an event listener with it this is quantitative and within this tip we Define the select statement so let's attach a debit listener with this so let's start Exchange [Music] let's name our conflict function date quantity now let's define this function for V [Music] we need to pass the event which card regard as a result because u-bit we are going to access the changed value so log e dot Target dot value is going to return as the updated value okay let's change this from seven to two nothing happened refresh [Music] okay did it change let's change one more time let's select nine and it's working let's do the same for this element okay so it's working now what we are going to do is that first of all we are going to create a query string payload new URL search patterns and [Music] foreign so the key is going to be quantity the value let's write p now let's make a pinch call now since this time we are updating certain value so we can use either HTTP fetch request or put request so I prefer the fetch request because it it makes more sense we are fetching something so the Callback function is we are going to again call the same function that we created response update card [Music] okay now provide the method type so we are here this time using Fetch and the last one is the data that we want to send along hello okay so that's it in fact let's not use this one right away let's cut it and response [Music] take quantity now let's define this function [Music] and within the body of this function let's call this function response update card and pass along whatever data we received and the reason I removed this responsibility car from here and instead to find another callback function and within the equality function the first thing that I am doing is again calling the same function so you must be wondering then what's the point why don't we use this straight away over here where the reason for using a different call break function is that within this function obviously the first thing that we are using is calling the response update card function but once this function is done its job then we want to call another function which is show card because this is going to kind of reprint the new card with the updated quantity and Associated price and the total price so we would not have been able to do these two things if we directly pass this function over here okay so this is all that we needed to do at the front end now let's go and Define its counterpart at the back end so car.php [Music] and let's copy this and let's go down [Music] paste it the first thing that we need to do is change the method type fetch then let's comment these things out at the time being we will uncomment them in a while but now let's focus on how to extract data from the request you see the PHP by default provides us two so the global variables get and post so if the HTTP request is kept we can use super Global variable talisign underscore get to extract the data from the request if the HTTP request is false we can use super Global variable dial sign underscore post to extract the data but with page put and delete there are no super Global variables associated with them so that means we have to find other ways to extract the data so what we are going to do is that we are first of all going to get data by using a function called file get content and to this parameter we can pass a file name or we can pass a an input stream PHP is input stream so we are passing in that input stream PHP colon two forward slashes and then the word input so this is going to get the data from the input stream which in our case is going to be the HTTP request now this is data in the raw form we want to convert it into associative array like we have with super Global variables get and post so to convert this data into associative array we are going to pass this whole thing as a first parameter to another string card pass string because the this first parameter represents the string and the second parameter is going to be the array name to which we want to store this string as an associative array so let's follow super Global variable conventions and let's create a an array so now this thing extracts the data from the HTTP request converts it into string and then pass string take that string as an input converts it into associative array and stores in in this array third sign underscore page you can pass any name but I have matched it with the others about local variables get imposed now uncomment these things so now again if it's a loud user then let's call another function let's make it and we are passing along this fetch array else get guest user card and pass along [Music] now we have to Define both of these functions in the relevant file so copy where is log user and [Music] paste it over here and empty body [Music] okay close it now copy this guest user card and at the bottom [Music] function update guest user card and this is the body and in the body let's extract the data that reminds me over here we have only at least one query string key value pair which represents the quantity we need to pass along the ID as well so how can we get the ID this function doesn't have access to ID so that means where we were attaching this function as an event listener we have to go back there and bind ID with it [Music] okay bind and since the ID in this function is represented through there is a for Loop [Music] ID [Music] let's pass ID okay [Music] okay now let's attach one more key value pair with the value ID and the value is going to come from this keyword okay now let's go back to car.php test user card okay now over here expect both of those values in local variables dollar sign underscore h ID Al assign ment T equals [Music] quantity now if we are updating the quantity that means the product already exists in the car so we don't need to check if this product exists or not underscore session card the second parameter is going to be ID sorry ID and the third parameter is going to be quantities [Music] and let's assign it new value this one and if the quantity is changed obviously we have to update the price as well so let's create a variable price so the price is going to be quantity times the price of one unit of this product which is which we are going to get from this get product price function so we have to call this function get product price and pass around the ID so this will return us the ID of one unit of this particular product 10 times quantity it gives us the total quantity this function returns as the price of one unit of this particular product and then the times quantity gives us the total price for the number of units user is in the card but now since they said you could have a very long fractional value so we have to reduce it to two decimal points so we have used round so far to kind of rounding it up to two decimal points but now I'm going to use a different function which is again going to do the same job let's learn this both ways so the function is VC div and this takes three parameters as a string price then we have second parameter is going to be the number with which we are going to divide this number with so we actually are not interested in dividing the price so we place one so if you divide whatever value with one the value is going to remain the same now the third parameter is primarily fractional places do you want after the decimal point so we are interested in two now we have this price so now all we need to do is update pricing [Music] and since the price for single product has changed that means the total will also be affected because the quantity is changed hence prices change their thought total price is also going to change so we are going to call update total what was the function name update total card now let's send the updated card back to the kind okay [Music] let's move this function above the helper functions these two were helper functions foreign [Music] [Music] [Music] 2285 or something [Music] um H is not allowed okay we have received a course issue it says the method page is not allowed by Access Control hello methods in pre-flight responses okay so that means we have to add one more header in our PHP so all the headers are defined in [Music] this db.php file and by default PHP only allows HTTP request after type get and post so we have yet another header [Music] Chrome hello header okay h delete now we've got a cyber will accept these four type of HTTP request I haven't included put over here that means if any request comes with the HTTP then it won't be accepted so hopefully now it will work [Music] three again okay I figured out the problem the problem is that it's not actually Access Control alone matter it's it's Access Control allow methods because these are HTTP methods okay now let's change the properties three and you can see the property is three and the value has been updated the price and so is the total let's change it back to one [Music] 56 and 22 000 let's change this to one the price has decreased as well so quantity change is working as well now the only thing left is we have to attach an event listener with this delete button and then you have to send a request to the backend to delete this particular product from the card so let's go and attach an event listener to this button so smart.js so I think we gave this button the class name delete photos button okay so this is where we were defining this button now attach an event listener with this [Music] is events that you are interested in is Click [Music] okay and the method is delete [Music] and again this will need the ID of the project so let's bind the ID with it already pass the ID now let's go and Define this function three [Music] [Music] so this does get ID as it's this keyword now we have to make FH request to the backend that means we have to create query string cons [Music] and key is ID and the value is let's make a page call r dot PHP and the Callback function is going to be response it's going to be the same as this one so what we are going to do is that let's generalize this this function response update card [Music] and let's bring this function response update card let's bring it outside cut [Music] over here so now this is a global function response update card so now over here we will again use the same function response car method is [Music] hello that's it now we don't need to do anything so both of these pitch and delete requests are calling this function response update card and passing it the data which it receives from the backend then the first thing that they are doing is that they are updating the card and then showing the updated card okay okay now let's go to the back end and work on the counterpart at the back end so Carter PHP again let's copy this copy [Music] delete [Music] first let's change the request to delete and change the area name to delete as well if we set log user then delete loud user card product index [Music] now let's define this function in the log Chooser file so this is this block user [Music] function and put empty curly brackets for the body [Music] copy go to guest user card [Music] thank you [Music] okay now let's extract the ID from this delete array [Music] now again this product with this ID does exist that's why we have this ID in the first place so we don't need to check if this product exists we simply have to call unset function and power session card and the second index is going to be ID so this is going to unset the product associated with this ID basically it's basically it removes this particular element from this card now since a product has been removed so that means the total need to be recalculated because it's definitely going to change so update card photo card now our total has been updated now we are ready to send the response back that is the updated card back to our customer to our front end okay that's it now we have done something wrong over here let's go to the cartouches okay so the thing is this when I change the name from response update quantity I gave it name response updated card I fail to realize that this function also has the name response update card so let's change this name to something else notified [Music] paste it over here and paste it over here as well [Music] okay one more time let's update the price has changed and I'm sure the total is also changed [Music] the price has changed oh sorry the total is also changed and now let's delete this one it's not working fail to execute fetch on window delete payload is not a very method okay it's because rotation is supposed to come over here [Music] foreign okay we got one item deleted and our cart is updated as well delete this one now the thing is this when our card gets deleted then we should be redirected back to our dashboard and by redirect it I don't mean the change in the URL but rather the different contents the dashboard contains so now we have to work on that part let's go to our show card function because this is the one that is showing [Music] okay so over here the first thing that the show card function should do is that it basically checks the length of the local car dot length if the value is greater than 0 then we should be able to see the card otherwise we should see the dashboard contents [Music] now over here we have to check if we are already on the car details page so if you are on the card Details page which I remind you is not the page just that it contains of the main contains the card details if our main basically contains the card details and there is nothing in the card we have deleted all the items from the cart now our cart is empty in that case we want to change the contents of main from the cart pages to our dashboard contains so that means we have to move this statement at the top so that now we can use this main reference so if names are children if currently our main is showing card details now that means the name Will currently have one child so at index 0 we will have a child whose class list will contain a class named card container so if that is the case so account is empty and we are seeing the card Details page so if that is the case we kind of redirecting location dot replace [Music] and since this is a single page application that means we don't have actually different patches to move to so what we are going to do over here is that we are going to access the URL which is currently being shown in the browser address bar so location dot path name is going to give us the address in the address bar and we are replacing whatever is currently on the page with that page this in turn is going to reload the page so this is the only time when our whole page is going to be reloaded so basically in a sense it will give the illusion of we being redirected to the main page or dashboard however if that is not the case it means we are already on the dashboard so in that case if the cart is empty then we should just see an alert which says the cart is empty [Music] to alert card is and then now we simply return from the show called function that means the rest of the logic doesn't execute so now let's go and test it out this logic is working so currently our cart is empty we just a pop-up when we click on this cart icon the cart is empty okay and we are still on the same page now let's add something to the card [Music] let's add this item [Music] and this one as well now we should be able to actually see the car details page because now our card is not empty [Music] okay so we have these items now let's delete one by them one by one now to see number since our card is empty so we got redirected over dashboard so with this we have finished all the logic related to our car which is associated with our guest users and at the back end we have implemented this card through the PHP session variables in our previous tutorial we implemented a session based shopping cart for our guest user and in this tutorial we are going to implement a shopping cart but for a large user a registered user and that card is going to be implemented through data vegetables and since this card is going to be implemented through database tables so let's go and have a look at our travels before we start our code shooting so as you can see we have already three users in our database who are registered the username for them is AAA triple V and Triple C and the passwords are to put Triple A Triple B and Triple C as well so these are three registered users which we can use to log in and create a card for them in our database cables now let's have a look at those tables and see how those tables Implement our shopping cart so we basically need two tables one is called this card which is going to represent a user's card so when the user is logged in a row is implemented over here this card table basically contain just two column the first one is auto generated ID which is going to be unique and it's a primary key and the second one is user ID this is actually a foreign key to our user table over here and whatever is the ID update uses over here that ID is going to be placed over here the actual items that are in the card are going to be placed in another table card card item now this table has four columns first one is ID which is unique for each row the second is card ID which is a foreign key to our card table and this product ID is a foreign key to our product so any product that has been placed by the user in the car that product ID is going to be placed over here and this last one represents the number of quantity selected by the user for that particular item our product the unique thing about this table is that this table doesn't have the ID column as its primary key so let me show you the structure [Music] so as you can see the ID is not our primary key however it can't be null and it it has to be unique and it's Auto incremented as well we actually have a composite primary key which consists of two columns the cart ID and product ID so collectively these columns are going to represent a unique value and that combination of uniqueness represents our primary key the reason for making these two columns a family key is going to be made clear once we have implemented the update card Logic for the logs user by the way these two are also part of foreign Keys as well so we have FRN key cart ID which is going to refer to our car table and the product ID is referencing to the ID column in the products table so individually there are foreign Keys as well and collectively they make one primary key as well so this is all there is troubles that we have to implement in our database in order to implement a database based shopping cart now let's go and Define the logic and when it comes to logic since we already have implemented a session based shopping cart for our guest users that means our front-end logic is already implemented we don't need to Define any further front-end project except for few minor changes just the addition a few lines of code the only thing that we need to work on over here is those empty functions that we created in our log user card file in our previous tutorial so this is our let me close this index.html so this is our log user card.php file that we created in our previous tutorial when we implemented the get user card.php file all we need to do over here is that we have to fill in those functions so let's get to it the only thing that we have to take into consideration while implementing these functions is that they return exactly the same data in exactly the same format to our front end is being sent by the session based shopping cart implementation otherwise our front end might fail to properly display their data in the browser okay so now let's start with this function get logged user card so this function Returns the current status of the card back to the front end so that the front end can update the card and if there are any items in the card it will display that Circle above the cart icon in the browser with the number representing the number of items in the card but before we implement this function I have noticed one minor mistake which is this one require include db.php so we are saying in the current folder we have a folder named include and in that folder we have this database file but if you remember our these two files guest user card and log user card are within this include folder so that means we have to remove this part So within this current folder we have a file name db.php include that file into this file and now this file has a connection variable which is now part of our this file we simply have to pass that connection variable to a work function and since we are interested in that connection variable so we are going to say global connection so this way we are even though declaring this variable inside the function but because of this keyword Global this function is not creating a local variable named connection rather it's going to use the global variable connection which is inside this db.php file now let's create an empty array let's give it an name card now the Crux of this logic is going to be step one is going to be get the ID some card people via user ID equals [Music] user ID so that means we have to look in the r table and look for any row where the user ID is equal to the ID of the last user now if you remember at the time of logging in when the user is logged in let's go to login.php file [Music] so this is the method which is logging in a new user and when this user is logged in successfully we are creating two session variables which is a two-dimensional array so index name for the First Dimension is logged user and the second dimension is name and for the second variable again the first index is log user and the second index is ID and in this session variable we are actually storing the user's ID so that we don't have token and again go to our database and look for its ID so we are going to utilize this session variable this one to get the ID of the user so we can say user ID equals private sign underscore session log user and ID from here we will get the user's ID then we are going to use this user ID to look for a row in the car table whose user ID matches this ID and that ID will represent the card ID so we will Define a separate function which is going to perform this logic so card ID is going to be defined in a function get card ID and let's pass this user ID as a parameter to this function so we have to Define this function now we will be using this user ID in many other functions that we have defined over here so we have to write this line at multiple places so what I am going to do is that I am going to place this logic in another helper function so that I don't have to write this longer sentence so let's cut this line and get user ID now this function will return as the user ID that we store in this variable and then we pass this user ID to get card ID so these two are helper functions we have to Define both of these so let's go down and Define those first [Music] so we are simply returning this session variable okay now let's define as a helper function [Music] [Music] it takes one parameter user ID since we need to communicate with the database so let's be clear connection Global variable so this way we have access to the connection variable in our function now let's create a local variable which is going to store the cart ID initially it's null create statement select ID from card where user ID equals the parameter that we have received in this function [Music] so we are saying written as the ID for the row whose user ID is equal to the one that has been passed as the parameter over here so if there is any such rule in our car table that Row's ID is going to be returned and that ID represents the unique card for this particular logs user now let's execute his statement [Music] if this part executes successfully we will have some object in the result variable hence we will enter in the body of this if block now over here we have to check if the number of rows that have been returned is greater than zero or not so it can either be 0 or 1 so if it's 0 that means no such row exists in the card table in that case we have to insert a new row in the card table whose user ID is going to be the one that we have received as a in parameter in the get card ID because if you don't have any Row in the car we cannot have subsequent rows in the cart item table where we will actually place the items or products that the user puts in the card so if [Music] result numbers so if this is greater than 0 the result will be true in that case okay after the card ID variable by calling fetch a soft function on this result object and since we are only interested in the ID and in fact we only have ID in this associative array so we are performing these two steps in single line first convert the row that has been returned into an associative array and from there return the index whose name matches this ID and store it in the cart ID variable if that is not the case that means the num rule is actually 0 that means we don't have any Row in the card whose ID matches the logs user's ID so in that case insert a new row in the car table matching this user ID [Music] user ID we'll use is going to be dollar sign user ID again result is execute the query [Music] so if this statement executes successfully then if [Music] zero is affected [Music] if this is greater than 0 that means that means Arrow has been successfully created in the cart table [Music] so assign the idea of that newly created row to this cart ID variable and to get the ID of the newly created row is going to come from connection variable insert ID so whatever neuro has been inserted if you are interested in getting the ID of that row we have to use this insert ID property of this connection variable and finally we will have the ID of the newly inserted Row in the cart ID table okay now at the very end simply return part ID okay now both the helper functions are defined let's go back to our get log user card function now once this get card ID function finishes its execution this card ID will actually contain either the ID of the ID of the card which is associated with this particular user object will be null if no cart has been created for this particular user so we are going to check if card ID that means if it's not null in that case let's call another function and store the values that are going to be returned by that function into this cart or level so cart is going to be kit on all card items and let's pass this card ID so this part will only execute if this card ID is not null outside this if block we are going to Simply return whatever is the current status of the card array Vector over front end and we have to over here make sure that the index should be the same exactly same that our guest user card is returning because based on those values we have already defined our front end so if we are putting something different over here let's suppose capital c the card with capital c this will not match with the one based on which our card our front end logic is displaying the data in the browser so we have to make sure we are returning exactly the same data and exactly in the same format to our front end that our gets you the card is returning let's return this array now this card can be an empty in in which case it will be an empty array otherwise this will contain all the cart items which could have been returned from get all hot items function so now we have to Define this get all cart items function let's go down [Music] [Music] let's get access to our connection variable statement that we have to use in order to get all the necessary fields that we have to send back to our front end now the SQL statement that we are going to execute over here is going to be the most complicated SQL statement that we are going to use in this whole project so basically we have to use join statement to join three different tables together in order to get all the data that we have to send back to our front end so before I write that statement over here let's go to our workbench MySQL workbench and try to construct SQL statement that joins three different trebles make sure that that statement is returning as the results and once we are certain the text statement is executing properly then we will place that statement over here so let's go to our workbench now in order to verify that the statement that we are going to write is returning as the correct result we need to have some data in our car table as well as cart item table so let's put some data so that we can verify the result so we have three users with ID 1 2 and 3 let's use this first user with id1 so in our card let's insert a new row with the user id1 apply okay so now we have a row in our cartable with the user id1 let's put one more row with the user id2 finish now let's go to our card cart item sorry [Music] so the first row which belongs to the user with the id1 has the cart id1 as well and the second user with the user ID 2 has also has a row with the id2 so the current ID is going to be two so let's let's put some data in the cart items this is the user one with the cart id1 product let's put product one and let's make quantity two for the same user with a cart ID one so the cart ID is one that means it's the same user product ID 5 and the quantity let's make it three now let's put some data for the second user whose cart ID is two and let's put the car product id5 as well so this product is in both cards the product with id5 is in both users cards but the quantities are different and let's put something different so cart ID is two and the other product that this user has in the cart is let's make it seven product ID seven in the quantity let's make this two apply okay now we can get the product ID from this card item double and the quantity the user has selected from this quantity but we also need these products image and the stock that this product currently has and we also need the price of this products single unit so that information is going to come from the product table so we have to join these three tables the cart item product and the stock is going to come from the inventory table [Music] this one so we have to join these three tables so let's make a statement select product.id so this p is going to be an alias for the product table so from product table we are going to get the ID and from the same table we are going to use the image column then from the current item table so CI is going to be the third items as Alias from that one we are interested in the quantity because the quantity is selected by the user is in cart item table then from the inventory we are interested in the stock so the actual stock of the product from the product above let's get the price so this price is for the single unit of that particular project from [Music] sorry that is just p so this P becomes edges for this product now we are going to use inner join and we are going to join this product Apple let's put this down on the second row from product p and let's move this inner join with a table card item and let's give it Laci because this is the Alias that we have used over here now we have to define the condition for this inner join so on product ID equals cart item Dot [Music] product ID we also Define another condition for selecting the row where CI dot cart ID [Music] equals what data we have in the card let's use this one cart id1 [Music] Let's ignore this inventory for the time being so we are saying we are joining two tables for product and cart items so we are saying join the rows in both the tables based on where where the ID in the products table matches the product underscore ID in the card items table and where cart underscore ID is equal to one so join those two rows and from that join row return the ID image quantity and price so this is one half of the statement let's execute this for the time being and we got an error unknown column c i that quantity don't we have this column in the quantity cart item we have the spelling mistake it's q-u-a-n not n a okay now let's execute it okay so now we have been returned two rows a product with id1 and product with id5 let's check this in the cart item so the rows whose cart ID is one that has two products one with the ID one another with ID find this is what we have got over here then these are the images and the quantity selected by the user and the price the only thing that is missing is the stock availability for this particular products with id1 and file so now we have to use another inner join with the inventory table and from there we are going to get the stock so let's put I thought stock and at the very end add one more inner join with the inventory table and its aliasis I on let's define the condition where product ID is equal to I Dot product ID this is the column in this inventory table so any row whose product ID column in the inventory table matches this ID column in the product table returns those rows and in fact only return the stock so now let's execute this one more time so now we've got again two projects it1 and five images quantity price and this price is for the single unit of this this particular product this is not the price for two units of this product or three units of this content but the stock availability is 56 by product 1 and 18 for product five now if we change the cart ID from one to two with the return the other two products in the other user's card so now we have in return a product with the id5 and id7 the quantity product 5 is 1 and product seven is two so these are their prices this is the car that belongs to the other user so that means if we replace this value with a variable then this statement this whole statement is going to be a dynamic statement which is going to return all the products and all the field which we need to get from these trebles that we can send back to the front end the only fees that we still have to modify over here is that this price should be the collective price for all the units for each of these products like for the second product since the quantity is due so the value over here should be 240. we have to Now work on this part so what we are going to do is there for the price we are going to multiply it with quantity and the quantity is going to come from the cart item so times CI dot quantity [Music] so this is going to give us the price is the alias but now this can give us a decimal value with more than two decimal digits so we have to truncate it to two decimal places so what we are going to do is that we are going to pass this whole thing as a first parameter to trunciate function which is part of MySQL so Ctrl X concrete first parameter comma since we want two decimal process after the the point so two now let's execute this statement one more time so now you can see we are seeing the collective price for the number of units for each product let's change this back to one [Music] now this is the Collective price for all the units of each product so now this is working let's copy this whole statement and over here [Music] here the only thing that we need to do is that we have to replace this cart ID with this variable now let's execute this so if pulse connection and pass our statement to it so if this execute successfully then we have to check if we have been returned any number of rows so if result number rows that means if this is greater than 0 we will get inside the body of this second if clock the inner block and since we might have been returned more than one row so we are going to use while loop let's pass one row at a time to this row [Music] keep inserting all of these rows into that array and return that array back to our front end but if we do that then even though that array contains all the data that is needed by the front end but when it's received by the front end it's not in the same format in which we want it to be for our front end to understand and display it in the browser so now we have to convert the data that we received from this row into two dimensional array and send a two-dimensional array back to our front end because that was the format that we put our data in when we are defining the guess user card so first of all let's create a temporary variable ID is going to contain ID from this rows now create a two-dimensional array product array the First Dimension is the ID and the and the second dimension is going to be different let's make it first one image and give it the value from [Music] Pro Image copy paste the second one is going to be stock [Music] first third one is going to be quantity [Music] test and the fourth one is going to be price [Music] so now our product area is two dimensional array the First Dimension is going to be the ID for each of the projects and the second dimension is going to be the rest of the information [Music] now at the end we can return array but this product array doesn't contain the total price and our front-end project this product area to contain total price as well so what we are going to do over here is that we are going to create another function update Hotel [Music] so we are calling another function update with a log car and passing this product array and whatever is returned from this update total log part function that value or that area is going to be eventually returned since we don't have this function defined so we have to Define this function [Music] foreign [Music] this product array which contains all the items which are currently in the user's card so what we are going to do is that we are going to iterate through this array and we will keep on adding the prices together into a separate variable named total and then at the end we will add another index to our product array that will contain the total and then return that array so let's create a variable name photo with initial value is 0.0 let's try to do this okay [Music] is I'll make it like inside the body of this part each group because total equals to tal Plus item price now the current hotel after the addition with the current price can have a decimal value greater than two decimal points so we have token truncated total equals round total of the two decimal places okay so that's the logic inside the for each Loop now now outside the far each Loop we have our total variable updated which contains the total price for all the products now we are going to append this total to this product array [Music] array and give it the index total because this is not a lot of front-end expert exported variable then we have to return this product array [Music] copy I have used different function names please [Music] okay so we have defined the logic for get log user card but while you are defining this logic we have implemented most of the logic which is going to be utilized which is getting all cart items which are currently in the user's card another helper function which returns is the user's ID and user's card [Music] as well as we have defined the function which calculates the total we have manually put two products for the user id1 and user id2 so let's try to log in with user id1mc if we are able to see the circle with 2 in it over the top of the card in our browser so to refresh let's open console so we have already got an error unexpected and it says internal error so there is something wrong with the PHP okay so the error that I've received is failed opening required tv.php so the thing is is now since this allows user now the thing is this this locked user card.ph file is going to be included [Music] so it's being included over here so so that means the path to this DB file should also be with respect to this file car.php file so that means our previous path which was include folder was correct because this whole code is going to be inserted into this card.php file and from this car.php file the path to our database file this DB file is in the include folder starting from the current folder go to include folder and from there you have a file name db.php so we didn't need to make this change anyway okay so now let's go and test it out okay so we haven't got any error now let's login is AAA because this user is id1 so even though we have got this user logged in successfully but we don't see any cart item that's because when we are logging in we haven't called the update card function so let's go to our login.js file [Music] foreign [Music] function and let's go to the end of this function actually this is the system we have to go to because when the login button is clicked this is the function that's that gets the response back so let's go to this function user login request which is this one user login request and let's go to the end of this function so over here we are saying if the data that has been written if that object this object has a property name user that means the user has been successfully logged in so we have one more if data.user then update card we are going to call this function update card refresh let's log out [Music] let's log in one more time AAA submit and you can see we have the circle over our cart icon with two in it because there are two products in the card okay select click there and we can see this part is already sorted out now what we need to work on is that we have to define the logic which actually inserts the item into the card because currently these two items were manually put through the database table now we have to define the logic which adds a new item in the car updates the quantity and deletes the item from the cart as well so these three pieces of logic that we have to work on but we have already done most of the work so let's go towards working on updating the cart item so if I change the quantity from 2 to let's say 3 now we got an error because now this request went to the logged user card and there the function is empty which is supposed to handle updating the card so let's go and work on that one add new product to the cart let's work on this one first then we will work on updating the log user card okay so as we have already figured out when we are defining the guest user card that when this function execute it it actually contains some data in the post super Global variable and that data is the ID of the product which is being added to the card as well as its quantity so let's first extract those two values in local variables let's make it product ID [Music] now it is possible that the product that we are trying to add to the card is already in the card so we have to take into account that possibility as well so if the new product that is being added to the car is already in the card then simply updates the quantity and price otherwise insert a new row in the cart item table so the way to do that is through SQL statement cart ID [Music] product ID quantity value since we are receiving these values from the user so we can't rely on them therefore we have to use prepared statement so question mark situation is update quantity equals the old quantity or the current quantity plus the new quantity that is being received from the user so question mark now this on duplicate this on duplicate update this part only works on the family keys so if the primary key is duplicate then we can update the quantity but the thing is this we were not applying this condition based on the ID because ID is going to be unique for each row therefore we had to change the primary key for this cart item from ID to the composite values the product ID and the cart ID we made these two columns as a primary key a composite primary key had we made one of these a primary key then that could not have served our purpose because there can be multiple rows in the card in the cart item table with the same cart ID so cart ID cannot be unique and the primary key is supposed to be unique and likewise a product is unique for for each card but different cards that mean different users cards can have the same product so this product ID cannot be unique either so we have to keep this possibility that both of them can be repeated in multiple rows but in order to make it a primary key we have to make it a composite primary key so there cannot be any two rows with the same cart ID and same product ID so that's why we had to make it a composite primary key because the collective combination of both two rows is going to be unique and since now these two are unique we can apply duplicate on this one so if there already is a row with a card id1 and the product id1 that means the user to which this card belongs to has already a product in the table and we are trying to insert new ones so if that is the case then that means it's a duplicate Row in that case just update its quantity I hope this is clear [Music] the cart ID so for the part ID call the function since this requires user ID as a parameter so let's call another function get user ID this will return as the user ID which is being passed as a parameter to get cart ID function and this in turn will return as the cart ID now pair display statement we need to Define this connection is a global variable now going to parameters is a prepared statement [Music] our parenting teacher so one two three four four eyes because there are four parameters the first one is plot ID then product ID which comes from over here [Music] t which comes from this variable fourth one is also quantity [Music] the quantity is quantity plus the new quantity which comes from this quantity variable copy okay now we are ready to execute this statement so prepare statement close this vpf statement otherwise it will keep clicking the memory next with the name car and call a function it all cut items fast card ID is a parameter now this card area contains all the items in the card so we have to Simply Echo this deck to our end so just sign in code is card editing it and with this we are done with the logic to a new item in the card let's go and test it out in the browser [Music] let's add one more item [Music] we got an error [Music] okay it says we are getting a point theorem error on line 25 in log user card so it is called to remember function on both really happens when the parameter names are not correct line 25 [Music] the cart ID product ID [Music] please the keyword cable is missing now let's try to add one more item extra careful let's refresh it even though they couldn't have made any difference Okay so we've got three over years that means uh the product was edited successfully let's check the content so we have three over here okay brilliant now let's update the card and delete the card so for update when we change the quantity over here everything should get updated over here and when we click on this delete button the product should get deleted from the card so these two Logics let's go and work on them okay update user card let's first okay invariable [Music] if you have watched the previous video you know that this page is an array which contains two values ID and quantity so let's extract them into local variables first in U and this is paste and now just change the name over here from post to now cart ID you will need access to cart ID so okay ID which will require user ID forget user ID now let's create a statement put it start item set T equals question mark where the cart ID equals cart ID we don't need to put question mark over here because you got this card ID from session variables we haven't got this cart ID from the user so this value is safe to be put directly and product ID equals this plot ID so question mark let's go and let's copy all of these that they call up there Let's test okay this is fine prepared stack when you are passing this variable statement now we have how many parameters one is quantity here that is product ID so what are them are integers but just two so two eyes first one is quantity so the first one is quantity so quantity and the second one is paste okay then we are executing the statement and we are closing these prepared statement then we are calling it all cart items and we are sending it back to the front end okay should work now let's go and test it out in the browser click subject the car from two to one and it got updated let's change this round one to two and see if our total updates as well good the only thing left is delete items from the card removable the item of the product that needs to be deleted which is going to come from delete error now again we record ID which requires user ID as a parameter we are going to have almost the same logic as this one so oh copy and paste everything will change the change the statement from object to so it will become the item we have card ID equals data sign cart underscore ID and for that ID equals question mark because we are getting this product ID from the user but we have just one question mark so one I the product ID same variable okay execute close items function and send the car to take the user next I need this one and it got deleted successfully now let's delete delete front end or the the dashboard now the only thing that we need to do is that let's put some items in the card first to show you what I mean so this is one item in the car now lock out now even though we have logged out but we can still see the one item from the previous key log user's card so we have to make sure that this gets erased as well because the user is no more logged in so for that we have to go to login.js file and in our logout function we have to again call update card function so where is GS5 this one and we get the code to logout okay logout is successful then call update card function this is going to update the card and as you can see we can't see the one over here so just to be xsr team let's log in one more time add an item to the card this is out of stock and this one okay the one item was already in the card when we previously logged in now let's log out and the two disappear design let's log in one more time and you can see the two over here because this triple here has put two items in the card they are still in the database table so therefore it is still there now even though our logic is complete and it will work fine but just to put extra safety we are going to our login.net file and when a loud user has logged in successfully at that time we want to destroy the session variable name card so even though it's not going to affect our logic is already working fine but just to be extra careful we want to destroy the card session variable if it exists so let's go to login.php and over here this post method so this is where we are logging in so before echoing back to the front end let's unset data sign underscore session name car so this session variable contains the card which is associated with the guest user so we are and setting it okay so that's it this is all the logic so now we have completed both session based card as well as database double based card session based color plus for guest users and the database card is for registered users so in our last few tutorials of the series we learned how to implement a session based card for our guest users and then database table based car for our registered users in today's tutorial we are going to learn to implement the checkout process so before we get our hands dirty with cotton trading let me give you an overview of what we are going to build today this checkout logic that you are going to implement today is going to be a very basic but a complete checkout Place logic in which the user will be detected among using some card as well and we are going to implement this logic using services from a payment Gateway name style so before we get our hands dirty with cotton sorting let me give you a demo of what we are going to build today so currently as you can see I am not logged in so let's put some items in our cart this one okay now we have two items let's click on it and we have these two items in our car let's click on the checkout so now over here you can see we are being asked and some very basic information such as the name of the customer because when these items are delivered to the customer through mail we need to have the name of the customer and since it's a guest user that means we don't know that user's name so now we are asking for the name for the people something some random strict now for the street again something random let's say 12 Northwest City one two one two something random submit and we got redirected to the payment Gateway named strike and this is the amount that we have done the shopping for over here we have to provide the email of the customer let's say something random QQQ aqq.com and since this is a demo project and we are using this types test Services as well so the only part that we can put in as a valid card is four two four two four two [Music] name on the card something random again okay postcode one two one two one two something okay and now we got three done into a page with success in it so currently I haven't put anything in that place except for this Tech success okay so now we need to go and check out that if this payment has actually been made so let's go to our stripe and this is our stripe dashboard let me go to the permit and this is the most recent one that we just made with the QQQ that is the email address and if you notice this apartment 168.11 that's so we have successfully made this payment now let's go and check our database we need to have some record over here as well in the product table already so this is the name Trail North Face for the address that we put the city was ABC and this is the information and this payment ID is the same payment ID that we have got in the stripe so this is the same payment ID over here so once the payment has been made then this particular business can come and check if currently the order status is pending but we can go to strive and look for this particular payment ID and see the status over the year so now it says this particular payment has been made successfully that means we can change the status from over here from pending to success and from and once the status has been changed to success then the next process in the workflow begin where the items are being packaged and mailed to the customer but that part is obviously we have not implemented we are only implementing the checkout process now if you notice over here in the column user ID many fields are null except for this one so when a customer is being checked out as a guest customer that means in this column we won't have any value in it rather we will have null values in it and when a registered user is being checked out we will have user ID over here in that case we won't even be asking for the user's name so this is the outer table which will contain the general information regarding the order now the actual items in the order can be found in this order item table so we are going to look for other items with the order ID 17. so let's go to the order item now this step will contain the information recording all the particular products that the customer is taught so if you notice we have two columns sorry we have two rows with the order ID 17 that is the most recent checkout that we just did and it has two products with the product id4 and product ID 13 quantity for both is one and if you add up those two values together you will get 168.11 so we basically have two tables the order table which contains an ID column and then user ID this one is a foreign key with the user table however this particular column can be null in case our user is a guest user in that case we will not have any value in this particular column then we have named for the user so if the user is a registered user the name of the user will not be asked at the front end because we already have in our users table however if we customize a guest customer in that case name will also be asked then this is the address field City postcode total price so this is the total price of all the products and these are the payment IDs of the stripes so using these IDs you can actually go to that particular payment and check it status and then you can change the status over here and then for the order item we have this ID field then in this order ID which is a foreign key with the order table with the ID column in the order table then product ID is again a foreign key with the ID table in the projects table quantity and price so now let's go and do shopping as a registered user and see how the process continues it's login foreign now we already have one item in this particular card so this user has already put one item in the car let's go and put something two items let's add one more three items now let's go to cart and now the price is 1199.98 so let's go check out and since we already know the name of the user so that's why we don't see a field with the name name in it we only have to provide the address so something 40 something submit 1199.98 dollars email let's make it let lhl.com then the test mode we can only verify this process using this particular card number one name on the card let's make it elevated as well again again we have successfully made this payment now let's go to the database first and let's check the order the user ID the user AAA has the user id1 let's verify this let's go to user table and we only have one user registered user AAA with id1 so this one is user id1 as well name is AAA we didn't provide this name at the time of checkout this has been taken from the registered users triple 10th Street and the price and this is the payment ID Pi 3495 and ending is qow let's go to try let's refresh pi3m95 qrw lll.com so we have this price you can look at the further information as well if you are interested okay so this is these five payment Gateway which we will be using so now we are all set and ready to implement this whole logic from this page so let's get to it so for the checkout logic implementation and the first thing that we need to do is that we have to attach an event listener with the checkout button [Music] so this one currently if you click on this checkout button nothing happens because we haven't attained any even prisoner to this button so we have to touch an event listener with this button but first let's inspect this and figure out its name so that we can quickly identify where to go where to go in the code so this button has a class name check out hyphen button and it is it must be in the card.js file [Music] can't touch it and look for check out hyphen button so this is the checkout button now we have detect an event listener with this one account dot a different listener click and let's give it the name the Callback function name now we are going to Define this checkout button in its own separate file check out rjs so let's create a file [Music] named checkout checkout.js and and Associate this checkout with HTML as well our HTML file so it takes.html [Music] script check out that is okay let's go to check out that is function check out let's also lock check out let's see if the logic so far work okay let's close this card.js file and index.html as well now we have to define the logic over here so once this checkout button is clicked we should be redirected to another page where a form will be displayed in which the user has to provide the delivery address and if the user is a guest user the user has to provide his or her name as well so let's comment this out now the first thing that we need to do over here in order to display the form is that we have to clear out the page so therefore we need to get a reference to the main HTML element [Music] now we have to erase its content so main dot in our HTML equals empty contents now let's create a div which is going to hold the form cons name formative as well let's create a H2 element for the heading [Music] Apprentice H2 is the first child deformed if so now let's create the extra [Music] document.create element I just found your class name is now we have to create input fields for address City postcode as well as the name if it's a guest customer since the name is going to be optional depending on whether the customer is a guest customer or registered customer so what we are going to do is that we are going to create the input fields which are going to be part of both the customers forms coupons address element input so let me start 5 equals x we set text into three let's give it name [Music] address as well start placeholder is going to be addresses as well let's assign this address into field to the address form so a transform dot a pen chart now we have to create another input field for the city let's change the name from address to City [Music] okay now one more for the postcode paste change the name from address to postcode [Music] let's create one more input field for this option button [Music] admit document create element input [Music] height equals submit we don't need to provide any more information I just found that in child okay so these are the future which I'll be part of any form either it's a guest customers related form or registered user related form now we have to work on the optional input field which is only present if it's a guest user and if it's a registered user we won't see that input field so in order to figure out when to display that input field we have to check the login status so that means we have to make a fetch card forward backend and ask for the login status if it's a logged user then you will get the name of the user in that case since the name is there we don't need to attach input field however if the name is guessed then in that case their customer is not a registered customer so we will attach an input field in this form so we have to make a fetch call since we are already making this page call in the login.js file so let's go there each call so we are going to copy this foreign information in a certain way and here we are not interested in changing any front-end appearance or anything we only want to check if the particular user is a registered user or a customer so we have to provide another callback function over here instead let's give it that name so over here we have to check if [Music] data.user if if it is equal to test in that case we are going to attach a another input field to the form [Music] so let's copy [Music] yes now change the name from postcode to name [Music] now we have to make one more change over here that is if we do this startup and child since this is the very last input field that we are attaching so the name will be at age at the very end since we want the name to appear at the very top so we have to change this from a friend child to insert before that we are attaching is name and now is the second parameter we have to provide HTML element we want to insert this name before so we have to provide the name of the very first child of this form at this form the first element child so now this address is attached at the very first child okay so now our farm is complete now we have to attach this Farm to the farm div and then we have to attach the farm drive to the main argument if you already attached it we haven't attached the form div for the main so we have to do these two things Okay so Farm day start append chart address form and then child found it now we should be able to see this whole form when we click on the checkout button [Music] okay so we can see the address field and since we are logged in so that's why we can't see the name field however we need to work on the CSS styling of this form as well so what we are going to do is there we are going to have a CSS file style.css and we have to give it the same styling that we have given to our login and registration form so control F login you have to look for login form or something yeah [Music] but here let's let's attach address form as well and comma address on estrus [Music] let's go down [Music] he comma paste and change it from register to address [Music] that's better but I think there's still something wrong with The Styling because this isn't the starting that we get with the login and registration forms so let's go check oh it's address.com not from [Music] yeah that's better now the next thing that we have to do is that we have to attach an event listener with the farm such that when we fill in this data over here in these input field and click on this subject button a request should be sent to the backend along with along with this data so that the checkout process should continue at the backend as well so let's go and work on that partner with the form no and the current that we are interested in is the Callback function that you want to associate with this event listener is send account request now let's define this function let's pass this one the event object which is created when this event is triggered so that we can call children default on it [Music] now over here we need to make a fetch request to the backend and send the data which is inside the form along with that request so we are going to create an object of typeform data and over here we have to pass the form and since this event is associated with the submission of the form that means inside this function we can access the form to you it's this keyword so we are going to pass this to this form data contains all the data from our input Fields next we need to make a fetch call to our backend and the end point that we are going to hit is check out our PHP the corporate function that should be that should be executed once we get the response break from the server is [Music] response send checkout shelter now we are interested in making a post request so third parameter is forced and the fourth parameter is going to be the data which is going to come from the form data object now we have to Define this function is an inert option [Music] I'm going to receive all the data from the fetch response from the back end so for the time being we are simply console logging whatever we receive the back end now we have to work on our deck end so let's go to our backend and create this file checkout.php [Music] now in all of the PHP files we have been including this file db.php because this contains database connectivity as well as all the headers that are needed to communicate between different domains those letters are also said in that db.php file but in this particular file checkout.php instead of including this db.php file we are going to include this logged user card.php file and because this file already contains this DB file therefore we don't need to explicitly include this DB file over here as well so let me just in this file first and then I'll tell you the reason for including this block user card file over here so in the current folder we have a folder named include there we have a file name now let me tell you the reason for including file since our checkout session depends heavily on the contents of the card therefore we need to have access to the customer's card now if the customer is a guest customer that means the whole cart is available through these session variables therefore we don't need to include the guest user card dot PHP file over here we can access the session variables from here but if the customer is a registered customer and he is currently logged in that means his or her card is available through database tables and in order to access or manipulate that card we must have to use the functions which are defined in this file so therefore we have to include this file over here now we are ready to receive the request and serve it from the customer but we are only going to serve the request which are type HTTP post type so we have to check if server [Music] request type was false then we are ready to serve this request now inside this if block we are going to enter the checkout process slightly different depending on if the customer is a guest customer or a logged in customer so therefore we have to [Music] create another if block if dollar sign underscore session user [Music] and the logic is going to be defined over here is if it's a guest customer then the logic is going to be defined over here but before we Define any of the logic for these if and else blocks let's go outside the main if block and Define some Global variables the reason for defining some Global variables is that we are going to be dependent on data which is going to be used by multiple function that we will Define in this file so rather than passing the data between these functions I'm going to Define some variables AS Global variables so that all the functions can have access to those global variables then another one foreign [Music] [Music] name [Music] okay since we are going to use stripe pavement category which is going to collect payment from the customer on our behalf so we have this variable which is in which we are going to store information which we received from the stripe once we make a request to the stripe so it will return us some information that we are going to store over here this card is going to contain the contents of the card now either those contents are going to come from the session card or from the database table card the log user ID is going to contain a logged user's ID if it's a log user otherwise the value of this variable will be null typewise this card ID will only contain value if it is a logged user who is doing the checkout otherwise cart ID will also be total price will contain the total price of all the products times quantities of the card and this name variable is going to contain the name of the customer who is doing who's doing shopping so either this name is going to come from the farm which the guest user has submitted or it's going to come from the cloud user's name okay now let's go and Define the logic for the inner block so if it's a large user we have to put it inside is same so if so if this variable is set in that case it's a log user and the name for that user is going to come from clock user [Music] Cloud user ID is going to come from session variable log user we can also use get user ID which is defined in this file blocked user card as well but over here I've used the session variable since name and IDs of large users are also stored in the session variables so I am getting these values from the session variables now for the cart ID I am going to call a function which is defined in log user card file we have to pass in logged user ID so provided this log user ID we will be returned a cart ID for this particular user and for the contents of the card we are going to call get all cart items and we have to provide cart ID as it helps again this function is defined in the logged user card.php file as well however if it's not large user in that case cart is going to come from [Music] session variable named card [Music] and the name is going to come from four super Global variable [Music] name so in this case log user ID and cart ID are going to remain null outside this inner if else block we are going to assign some value to total price which is going to come from card variable since card this card is a two dimensional array and the last element of this card is a one-dimensional element named name total so the so from the card we are extracting this total and then we are going to unset this total element from the card the reason for unsetting this total element is that since we have already stored the price in this variable total price so after storing the price in another variable we can safely unset this variable in the card array and the reason for that is that for the rest of the contents of this card the structure is same the rest of the contents of cart is a two-dimensional array So eventually we will iterate through that card using for each Loop so if you are retracting through cart that is going to work fine until we reach the end where this total has a different structure so that's why we have stored this total in another variable and then unset this total now we are going to assign some data to this type data variable by calling a function initial we have to Define this function this function text total price as a parameter [Music] so once this function does its execution it returns us some data which is an array which is going to be stored in this stripe data area then we will call another function name order table so what this function will do it will store the contents of the card into two tables order and order item tables and finally we want to clear the current contents of the card then we will send the response back [Music] to our front end with an array so let's keep this area empty for the time being and exit so now we have to Define these three functions now let's define this initial checkout function X price is a parameter now this initial checkout process is basically going to communicate with these stripe API so what we are going to do is that we are going to follow the steps which are provided on the stripes website to integrate a pre-built checkout session with our web application so this is a previewed checkout page and it consists of different steps so I'm not going to explain this process in detail over here because I already have a beginner friendly series about this stripe where I have explained everything in detail so if you are interested you can go and check out my that playlist over here I'm going to quickly go through steps and integrate this checkout page with our web application so the first step is we have to install a library card stripe slash stripe hyphen PHP so let's go and do that I already have this package installed but I'm going to install it anyway so that you can see it Stripes list try iPhone PHP now this has installed this package and in it has created a folder named vendor as well as composer.json and composer.log files so these two folders are inside this vendor folder the next step we have to do is that we have to require a file named autoload.php from that render folder with our file since our render folder is correctly inside inside our root folder of this project so the path for this code file is going to be from the current folder which is inside user and in the back end so we are currently in the backend folder so starting from the current folder that is the backend folder we have to go One Step Up into the user folder and then another step up to a root folder it's in fact let's remove it so go one step up this will take us to the user folder and from there one more Step Up that will take us to the root folder and there we have a folder named vendor where we have an autoload.php file then we need this stripe key now this key that you can see over here that's my style key my secret API key in the test mode I can see this key over here because currently I am logged into the stripe dashboard as well had I not been logged in there I would not have been able to see this key over here but since I am already logged in so therefore this key you can see over here is my key so what I'm going to do is that I'm going to copy this line then we have to copy this header line as well and then this Ur domain so copy these three lines press them over here for this your domain I have to change this domain to my front end domain which is [Music] everything it comes before and extra thp so copy and I'm going to replace this thing with my domain in fact I can cut this from here and bring this in the initial checkout function as well that's where it's needed okay let's go up now let's go to rebuilt checkout the next thing that we have to do is that we have to copy this so what's happening inside these lines of code is that a session object is being created which sends a request to the stripe and the stripe does some job over there and sends the response back into the same object the checkout session object copy let's go down paste it over here and the only thing that we are going to change over here is that instead of this price which requires price ID we don't have this price ID so we are going to replace it with price data price data now again I'm not explaining in detail why we are doing this but if you are interested you can go and watch my stripe related playlist there I have explained everything in detail so this tutorial is not about the stripe okay now this is stripe data is an array which takes certain elements though so the first one is currency and in our case it's US dollar so USD then the second element is product data product data the only mandatory element is named which represents the name of the product so in our case we are going to write customer then the third element for this price data is unit amount which in our case is one okay that's it now this success URL as you can see your domain and then success.html so if this checkout process is done successfully then the customer will be redirected to the success.html file and if something goes wrong during that checkout process then the user will be redirected to the cancel.html page so we have to create these two files in our front end next we have to return some data back to the calling function so we are going to return an array consists of two elements the first one is the key name URL and this one is going to contain [Music] this checkout session objects property named URL the second element that we want to return is payment ID and again it's going to come from this checkout session objects payment intent so these two values are being returned to the calling function and stored in this stripe data next is this add to Auto table okay over here we are going to create data for the order table as well as the order item tables so we need to access these Global variables that we have defined at the top these ones so therefore copy paste and we have to prepare each of these with the keyword global because we are not defining local variables over here rather we are using the global variables so that means these variables already contain data now this cart is going to contain the cart whether it's guest customer or a logged customer we don't need hot ID over here rather we are interested in the connection variable which represents the database connectivity now this log user will either contain an ID or it will be null so if it's null we want to store the string null in our database table so we have to sort this out first so let's create a variable named user ID and we are going to use ternary operator copy so if this allowed user contains some value in that case or let's make it if this log cubes are equals null in that case store null in the user ID otherwise the log user so this way this user ID will either contain string null which will be converted into null in the database or it will be user ID now let's define another local variable payment ID and we are going to [Music] get stripe data's particular element with the key name payments the reason for creating these two local variables is that this way when when we are defining the SQL statement it will be a very simple statement and everything can be defined within the single quotations sorry within double quotations so we can use string interpolation however if we had not simplified these two variables then we would have to break our SQL statement with the dot operator and that complicates the statement and then we lose track of the whole SQL statement so this way of our SQL statement is going to be a simple statement with everything defined within double quotations and no breaks there now let's define the statement [Music] but before we Define this statement we need to get the address City and postcode data from the super Global variable so address is [Music] foreign [Music] names are user ID address CT post underscore code this is the column name inside the database table total underscore price payment underscore ID status [Music] and the values are going to be for the user ID we have a value in the user and import then when the second one is name third is address code is T fifth is postcode then comes the total price foreign [Music] okay so this is the statement but before we proceed any further while entering the video total price I remember something so I need to check if I have missed some data over here okay so this unit amount is not one it's actually going to be this price [Music] the reason for multiplying this price with hundred is that okay the reason for multiplying the price with hundred is that the stripe expects the lowest common denomination of any currency so for the US Dollars the lowest denomination is since each dollar contains 100 cents therefore we are multiplying the price with 100 this converts the dollars into cents okay now let's go back on the statement now let's execute statement using connection variable query method and we are passing statement to this query method now obviously this statement can be this execution can be successful or unsuccessful so ideally we should have defined the logic which handles the case when something goes wrong and the statement is not executed successfully but I'm assuming everything goes smoothly otherwise we will have lots of failure cases to handle and that would have expanded the length of this video and the focus would have been scattered as well so over here I'm just focusing on the bare minimums and if you notice over here I haven't used prepared statement either just so the code is little bit more simplified okay now once this statement is executed this connection variable container property named insert ID from there we are going to get the ID for the row which got inserted into this order table we are going to cover this in a variable named order ID [Music] okay now using this order ID we are going to insert rows in order item table for each product in the cart so let's start that process so for each car is ID so as you remember in our card this is a two-dimensional array the First Dimension always contains the ID and the second dimension contains different attributes of that particular product so over here the ID is going to be stored in this ID variable and the rest of information is going to be stored in this product when we iterate over each of the card element so now let's extract quantity in a local variable [Music] then the for the price [Music] now let's create this field statement [Music] order item item the column names are order ID for the title quantity and price [Music] the values are going to come from this order ID then the product ID is going to come from here and the quantity and product price are going to come from over here these two values so [Music] I forgot [Music] X double quotations press back okay now [Music] order ID then quantity and then product ID what's the actual name prod price [Music] so all of these are numeric values or plot were used so that reminds me we have to go back to our first insert statement [Music] user ID is integer value so we don't need to do anything however since name is a string so we have to enclose it inside the single quotation address is again string so this needs to be enclosed in the quotations cities also string single quotation postcode is also string total price is float value so we don't need to enclose it inside the quotations payment ID is also a string so quotation [Music] okay now let's go back down to our second statement now let's execute it [Music] so this will put one row for each of the product in our order item table now at the end of this for each Loop we simply return back to the calling function okay so we are done with eighth order table as well now at this point we want to clear out the card because the payment has already been made all the products have been inserted into the order table the reason for inserting all this information into order tables is that otherwise how will the business people at the at this e-commerce website will know who shall this order ship to so we have to add all this information into Auto table along with the name addresses and what items that customer has bought so that those could be shipped in mail to that particular customer so now let's work on the clear card function [Music] so if the if the customer is a guest user that it is said not a sign in this code session card in that case simply unset it p [Music] EST is a large user customer so in that case we have to remove this user's entry from the card table and cart items table as well so let's define the statement delete from a couple named card where again I do single quotations so text double quotations test where I T equals cart ID we only okay we need to get access to global variable cart ID [Music] as well as connection variable [Music] we only need to delete this entry from the card table because in the cart item table there is a foreign key which links all of those rows with this ID in the card table and the properties of that quarantee is that when the row belonging to this ID is deleted in the parent table that is this card all the rows in the child table that is cart item table that has the cart ID matching this ID those will automatically be deleted as well because we have set the on delete to Cascade and on update to Cascade as well so once this row is deleted from the card which matches this cart ID all the rows in the cart item table which matches this cart ID in the foreign key those rows will also be automatically deleted we don't need to explicitly delete them so this simplifies our job allowed now we have to Simply execute this query and pass the statement [Music] let's go back up the only thing that we left out was what are we sending back to our client so what we are sending back to the client is that if you remember this is file data received an array as execution of this function the first one was payment ID and another was URL so that URL is the one which will contain the link that will take the customer to the checkout page so we are sending that URL to our front end and from there we will redirect the customer to that page so what we are going to do with it inside this function in sorry inside this array which is being returned back to the front end we are only passing it one element name URL and to that we are going to send Sprite data its URL element that's it so our second is complete now for the front end which was checkout.js now we know this data contains a property named URL so what we are going to do is that if data start URL in that case redirect the user or customer to another location [Music] this will redirect the customer to their checkout page that you could see where you type in your thoughts information okay there is one piece of information that we need to attach at the front end from the stripe which is in our HTML page and what we need to do over here is that the only thing that we have to do is that we have to take these two script tags with our index.html file so in get start HTML and they need to be attached in the head section so press time over here and I hope this should work fine now let's go and test it out in the browser [Music] let's refresh and we are logged in user so check out address City directed so there's something wrong okay the reason for receiving that error was over here if we request height it's not type it's method so that's why the request was never being served by the server and hence no matter what you did you got the response that Json error because no response was written so hopefully now it will work fine replay check out address let's say 20 23 key my city postcode 111 [Music] submit and we got this 899 okay so now let's fill in the details kkk.com [Music] that's the only dummy card that will be accepted by the by the stripe name something oh we forgot to create this success.html file so that's why it says cannot it could not find this file so never mind let's go and check the payments [Music] and this is the one with the KK at kk.com so Pi 3 M9 mnz now let's go and check our database [Music] now let's open the order table first hmm I think there is something wrong over here because this information has not been added to our database so let me insert into order hasn't been executed successfully so let me find out the problem then we will continue from there okay so I have identified the problem the problem was you know the order table [Music] so we are inserting we are actually inserting something into order tables now order is a reserve part in MySQL or SQL in general so that's why we have to append it with the database database name eshop.com now this will work fine now before we test it out let's create success.html and cancel.html files as well so let's create HTML and it's in the body just excess let's create one more file cancel the experiment cancel okay so let's go to [Music] let's go to checkout address is my electricity is minus t equals what is we are being redirected now over here let's ppb http okay [Music] one two three 112.43 okay so we have been redirected to success page let's check the payment bbpdb.com so we have successfully made this by 912.43 pi 3m9 g6k [Music] let's refresh it is about the username my address my city11 the postcode 112 143 pi 3m5 so we have successfully inserted the order table along with the pyramid ID now the next person on this in this business line will look at this payment ID in the stripe page and it will notice that this payment has been made successfully then it will change the status from order status from pending to what should we change it to let's make it prepared for something apply finish now the next person in line we look at this order is being prepared so it will start collecting those items and then dispatch it to the customer so this is how this whole process will work so since it is working for the log user now let's go and let's test it out one more time for the can't use that as well okay let's log out now let's do some shopping and stuff there's one item 92.92 dollars [Laughter] something [Music] easy [Music] okay again success now let's go and check the database table now as you can see since the user is a guest user so there is no user ID this name is provided while typing in the information related WordPress and everything and it's payment ID is pi 3M foreign [Music] so this is a at aqh and the name is easy so that means we are able to check out as a guest user as well so this is the end of our tutorial I hope you liked it if you did please don't forget to comment like subscribe and share thank you so much