Learn Laravel Vuejs from scratch - Part 2 - Build a TESLA web app | Mohammad Rada | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn Laravel Vuejs from scratch - Part 2 - Build a TESLA web app

teacher avatar Mohammad Rada

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

39 Lessons (5h 52m)
    • 1. Class Preview

      1:28
    • 2. Laravel advantages and disadvantages

      4:16
    • 3. 1 Installing vue cli and creating the project

      3:07
    • 4. 2 Designing the navbar component

      5:00
    • 5. 3 Designing the promo component

      4:18
    • 6. 4 Designing the Specifications component

      11:07
    • 7. 5 Designing the interior and Car core features component

      6:09
    • 8. 6 Designing the order now component

      2:39
    • 9. 7 Vuetify Project Summary

      0:53
    • 10. 1 Creating and setting up the project

      5:49
    • 11. 2 Setting up vue router

      6:40
    • 12. 3 Setting up vuetify

      1:50
    • 13. 4 Designing the navbar component

      2:59
    • 14. 5 Implementing the Model, View and Controller for categories

      18:57
    • 15. 6 Add category route and button

      1:36
    • 16. 7 Designing the category form

      5:51
    • 17. 8 Connecting the category form with the state of the component

      1:10
    • 18. 9 Implementing the store category function for submiting the f

      13:41
    • 19. 10 Implementing the delete category function

      4:23
    • 20. 11 Designing the edit category component and implementing the

      8:09
    • 21. 12 implementing the products model and controller

      3:19
    • 22. 13 Designing the Add Product component

      5:41
    • 23. 14 Submitting the product form

      8:48
    • 24. 15 implementing the Products browse page

      10:04
    • 25. 16 Deleting Products

      3:41
    • 26. 17 Editing products

      14:38
    • 27. 18 Designing the client AppNavigator and HomePage component

      11:39
    • 28. 19 Configuring things in web php file

      1:19
    • 29. 20 Designing the Login component

      7:40
    • 30. 21 Setting up laravel sanctum ans submitting the login form

      12:20
    • 31. 22 Implementing the logout button

      3:06
    • 32. 23 Switching the AppNavigator based on authentication

      11:00
    • 33. 24 Setting a relationship between the products and categories

      4:43
    • 34. 25 Adding products to a specific category and setting a base u

      21:46
    • 35. 26 Designing the shop component

      42:24
    • 36. 27 Designing Product Details Component

      24:03
    • 37. 28 Designing the Category products component

      24:56
    • 38. 29 Designing the Cart component and setting up vuex for the car

      29:37
    • 39. 30 Summarizing the project

      1:38
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

36

Students

--

Projects

About This Class

‌Hello and welcome to this course.

‌This course will teach you how to use the Laravel and Vuejs frameworks completely from scratch.‌ In this course we will be building and going through a few projects.

‌In the first project, we will design and build a tesla web application. ‌We will first try to somewhat replicate the Tesla website's homepage and then we will program the complete web application which is comprised of the backend for the admins to manage, and the front end for the users to use.

‌We will use many libraries for Vuejs to implement the projects such as Vuetify for making beautiful designs effortlessly, vuex to allow us to implement a global storage system which allows all components to connect to it and access the core data of the web application. We will also use the Event bus to allow different components to communicate between eachother and we will use other tools such as css, bootstrap, and more.

I hope you enroll and make the most of this course.

Meet Your Teacher

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Class Preview: Welcome to this course preview. My name is Mohammad and I will be your instructor for this course. This course will teach you how to use deniable and VGS frameworks completely from scratch. We will be building and going through a few projects together. Firstly, we will start that says, what application? We will first try to somewhat replicates the Tesla website design. And then we will program the complete web application. This web application is comprised of the backend for the administrators as you use, and the front end for the users to browse. We will use many libraries for VGS to implement the projects, such as Phi for making beautiful designs effortlessly. Ux, which will allow us to implement a global storage system for the web application, which allows all the components to connect to this view x and access the core data. We will also use a boss to allow us to, to allow different components to communicate between each other. And we will be using CSS, Bootstrap and much more. So by the end of this course, you will have a good understanding and you will be able to apply for jobs because you will have the knowledge to use novel and VGS together. So make sure you enroll to this course. And I hope you enjoyed this course. 2. Laravel advantages and disadvantages: Welcome to this class. My name is Muhammad Radha, and I will be teaching you this class. So I am a master and computer science graduates. And larval is one of my favorite frameworks as well as VGS. So as you know, there was one of the most popular PHP frameworks. And in general, I think larval is one of the best backend frameworks out there. And that is in comparison with all the other other languages like NodeJS and, and other backend systems. So it's a great free open-source framework. And so this gets stuck in the advantages and disadvantages. Let's go through them. So first of all, one of the advantages of larval is that it has a specific and MVC framework. So this means that it uses models, views and controllers, and others to develop the backends. So developers don't need to use old methods of writing entire PHP and PHP code in the same files. So we can basically keep the code modular and concise. Another advantage is that larval comes with its own dedicated to. So larva comes with its own integrated command line interface, which is artisan. And artisan allows developers to build skeletal codes. It also controls the database system, so developers don't have to execute through gene programming tasks. Artisan is also a great tool when it comes to generate, generating, and also maintaining simple MVC files such as modules, controllers, migrations. It makes, it makes development a lot easier. Another advantage is the great documentation. Each version of the framework was released with appropriate accommodation and it's very comprehensive and easy to understand. And description is very clear. So another advantage is the foster development cycle. And this one can be great selling point for most developers. So using variable cannot, can noticeably reduce the entire development cycle. System integration a lot quicker. If you happen to get stuck, there's a huge larval is a community out there. So you can ask them and they will help you out. So the chances of you getting also, the chances of you getting stuck on a problem is a very strong chance that someone else has already been stuck on the same problem and someone already solved it. So you can easily find the problem that you are facing on Google and it's easy to find solutions for it. And another one is the eloquence ORM. So with eloquent or, um, you can have a smooth Active Record implementation to work with the database. In other words, desirable feature enables you to create models which have a corresponding table in the database. And each, each module represents a record in the database, the database table. And the advantages, the abundance of packages and resources. So if you need something, there's a good chance that you will find it as a library and adults, like as a package and edits your level so that you can basically use it instead of having to write it all over from scratch. Another advantage is the automatic authentication. So authentication, what level is easy? An out-of-the-box feature, organizing authorization logic, and control, access to resources, also very simple. So parable is really easy to set up authentication using artisan cover. The main advantages of larval. Now I'm going to discuss the main disadvantages of larval. So one of them is problematic with certain upgrades. So PHP platforms in general have a few issues regarding versions with long-term supports and therefore sometimes gets gets critiqued because of this is true that updates may be able to cause minor problems. However, what's proper attention? Developers can smooth out the process. Another disadvantage is it might seem as complex as first, because there's a lot of stuff to do. And as an office of student, there are a few elements that can be a bit bizarre. Even though it's quite complex and it's quite, there's a lot of lives, a lot of stuff to learn. That's what this course is for. And I should be strictly hope you get started level and understand the main foundation of the during this class. 3. 1 Installing vue cli and creating the project: All right guys, So we're moving on to our second project. Now. For this project, we are going to be making a turn their website. So this will feature the Tesla cars and we'll have a specification is page, promotion page. So okay, so to start off this project, we're going to need to install the Vue CLI first. So using MPM install, saving it into our package JSON. And we're going to actually going to sue this globally so we can use from anywhere we want. So it's not our usual and PM is two. So now we already did this one so we can read this in the future for making new Vue projects. Okay, so press Enter and students. All right guys, soon as you get into documents. And let's make our project now using the Vue CLI command. Now it's going to give us three options. We're going to select the menu option, which is the last one. So we're going to be using, we're going to be using the UX and router. And we can go ahead now. We're going to be using, we'll be using Version 2 because it's suppose beautified version 3 doesn't support it, fair? Now? Yes, we are going to be using history for which are in packages on No. Okay, so let's cd into our projects. And we will review as you decide to add to our project. Now select configure advanced. We're going to click No, if we're going to type note with this one, uses a customer team, no. Huge custom properties, no. We're going to be using MD Material, Design icons, use fonts as a dependency. We're going to click no for that type now. Use a necrotic components now. Usually plentiful Yes. And select locale English. Okay, So now that we've made our project, let's cd into it and open it. Open for diverse good. So there's also serve it. So let's check out the link will click on this link. And this is the boilerplate code that you get when you install Vue JS application. 4. 2 Designing the navbar component: So it is good to our components folder. Let's use the so we have hello world view. We don't need that. We can delete it. And then we need to make our Navbar component. Okay, so let's start working on our AP Navigator. So first of all, this do this template using the D command. Okay? And now we're going to be using span to hold everything in Russia and then reach the V2 bar. O and other gates are going to give you a few props up. And then for color, we're going to give you a black state as a black tuba. And then who you dock. So for the two, both sides, who, who is the tuba title? And we'll use a logo. We have decided to use a specific logo. You can go ahead and choose a logo of your choice. We have done a dot PNG logo and h2, which we will be using. And we'll give it a height over a 110 pixels and a width of 200 pixels. So now let's add the specific agents water. So this website is going to lead directed for the model X Tesla. And this button, it will take us to the core. This down to the specification is components. So now that we've made the button indiscriminate some props. So we're going to be hiding it for smaller screens. And also making it flaps will make your flats using the flux prop will make it weighs as well. And we'll give it a bold font weight. And black text. As the main theme is basically going to be black. I mean punish. Okay. So now less or the another button could older now, so you can order a to the x. To x. Again will hide it for the smallest screens because we're going to be using a draw for this moment for 2016. So these, you can click the hamburger icon and you can select these pages using the grow. So for this, the double chin going to be making gets whites again and giving a bold font weight and black text. And we'll give it a margin of modern left three. And that's our tuba. Okay, so now let's go to abduct you. And let's get rid of this boilerplate good that we don't need. To start with a fresh template creation. Now, this app.vue components will be the root component of the application. And it will basically hold all the other components inside these components. So, so now let's make the, will use the app, which if I component. And we'll use the content, which will hold the content of the router. So we've transitioned for other components I did. And we'll use slide decks and transition. That means is when I go we navigate to a different component, will have a animation. On. Now let's import our navigator. And let's go on Chrome analysts have a look. Okay, so you see soul's purpose node 0 because we deleted her world. We need to unlink this from the home component because you wouldn't think there. So we can have a freshness to have a fresh template for home component. And as you can see, this is how it looks. You know, it fixes up rich, add some spacing between them. So let's go back to our app navigator. And there's a spacer between the x2 bar and the spatial collisions. Unless she, There we go. Now we have a, everything's nicely positioned. 5. 3 Designing the promo component: So now let's get on and do the promotional page, which will be right onto the Nakba. So let's make a new component and we'll call this premolar view. So this will be the main page of the application and we will have like a Moto X Tesla Model X car image on there. And you will have some, some heading. So we'll have only the view container. And we'll make this fluid so it's responsive and get will be, will be national or displace all concerns and tablets and desktops. So we'll give it a class primer, which we will need to make. And we'll give that a background image which will who need to go and find the image. So there's this little upset and take the image from there. For now, we're just going to use the link that they have. You can download this on yours is 0, but in this case both disputing the link will give the background size cover. So this will cover the entire viewport. And we'll do we'll give you a 100 percent width. And for the Hajj will just use a 100 percent of the viewport height. So as she heard, that looks okay. So things are right. So currently the view is not linked with the mean your application. So if you go to Home Depot view, we need to import it in here. Make sure you put the pro pro component and using the Vue extension it automatically poster for us. We can also go to router. We can see how this is all links. If we go through. So you can see that the roots are the home components, the first component, and not the default components, sorry. And that component holds the promo code that we have just linked. And the under root chart is linked inside the app.vue. So the app.vue would take whatever the router uses it. And the home components, the default component for the router. So it would return the home components. Inside the home components we have pro components. So now that everything is linked, we should, should work. If we go to the, as you can see, it does work on, we have the proper components working in order. So now let's finish building the promo components. We'll use the content syrup, a div. It will be a wrapper for the components inside the elementary. And we'll center this using text center. And it will do a margin top 13, 30%, just to cover the head area, navigation area. And we will use one class. We'll just have a slogan, has some, just some plain, some plain promotional texts. And we'll just write go electric. And we'll give it a display to us. And we'll have another H1. We just have another is to save the planet. And then it will, should be done for these components. Let's have a look. Well that looks okay. So see if the parent needs some styling we'll do this day. One will be the class will display one. Let me Perfect. Okay, so now let's continue on to the next component. 6. 4 Designing the Specifications component: So let's go to the website. So we have this section on the website and we will try to learn this unimplemented now. And we will implement this in our specifications components inside our web application. So let's go back to our project. Let's make a new component called specification dot view. And this will hold and make a new template using View command And so to speak, of the container. And we'll style it with the background color of black. This is our main theme. Will be the margin top of 10 pixels will do fill with us. And we'll make it fluid sewage responsive on all devices. Will then we'll use V layout will be 0. So we'll have three rows. And inside that true, we will have a reflex excess 12. And this is, this will basically divide up the, this will take 12 slots from the row. So as you know, just like Bootstrap, the test of columns. And this will take up the entire area of that room. And we'll use a class, we'll use to basically hold a small string that the heading on this section specification. So make it extra small center. We'll give it a display one. And we'll make it white. And we'll make it black font weights black. And we'll wrap it with the Module 10. And we'll write specifications for the hitting. Show nervousness. Make another row using Bureau. And we'll give it a margin of 60 pixels on the top. And it will have a, would have a column. And this column would take up six slots from this whole floats. As you can see, your finger to nose, right, right now. Let's go to section. As you can see, we have this row. This row has 12 slots, and we have this root is divided into two sections. So each section will have six slots. So right now this section has, has six dose which we are building under section will have six slots. So inside that will have a bureau. And we'll have two columns. One will be useless and will be time slots. And for the two plots will have the image there. And we'll give it a 100 percent width. So we need to find the image for this. Just quickly. Grab the image is cropped the image here. Just use the image URL that they have. And then we'll make another column. Under this column, it will take six loads just explained. It's, we'll have worked text. We will center on eggshells center. So inside this huge fight couldn't component. We will have a, will make a div. We'll give it a margin left four. And we'll style it with the, what's the execution. And this will hold a text to finish, done. And make the font size 23 pixels. I will give it a margin bottom of 2 and b2. And we will put in the contents lawsuits, which is low tides. Then she went to have my dish gaming. Okay. Okay, so now we'll have another span under it as you can see, this good job site. So we have some more texts over here, so we'll just have another another span with this text for BreakLine just to make sure that the separated okay, so now we'll have a will go back. Let's have a look at the website that we're building. Let's see how it looks now. Okay, so knowing too, because she got we haven't linked it. So we need to add the specifications and our home component, which are important. They haven't voted no. And the other to the components x0 the error. Look at this. Okay? Because the thing is when components or if you have more than one component, then they need to be erupt on the one-component. So before we just had promo, so that was a component by itself, was this we are, there's another component now which specification? The view wants to be your optimal components so we disrupt you're under. So that should solve the issue. Yes. And as you can see, we have implemented it like that. Who needs a few industry, we fixed it. So after looking at the code, that alignment issue was due to the spelling mistake. If you go back to the code, we had because that was wrong, it's meant to be a vehicle. And thus the veto component, that's the official name. And now the issue is resolved. So now let's make another bureau. Bureau will just copy paste to actually specifically almost as incurred, which new too. I change the position of the image and the text. Okay, So now first of all, we need to change the position of the image. Patch on the right is currently on left to an interpreter on the right. And then only to modify the text and fix it up a bit. So it's a nine to the right. Now it's aligned to the left. Okay, So just for the image, we have to collaborate before the foot, the image we want to add it after it so that it's an anterior left align to the right because before we had the aligned to the right. Okay. Also we need to fix up the text. So we're just going to record the event and align everything properly. 0, 0, justify end. So that's an anti the right. Who have a div and have a margin bottom q under model right for you at 36 percent. And we'll have a span inside it, which is basically it takes it we're going to have. And for size firing correctly pixels is good to do it outside so we can see what we should be adding. Connected, okay. And debris can add some more text. Let's go to the low side. Okay. Let's see how our app looks. Okay, something is okay. So the issue is the image was insuring property because we have a rubber the column around the image. So we need to wrap it. And we have the wearer. She issue. Let's go to the Iran cheeky. We call cool 6 wisdom. Okay, Beautiful now works. Okay, so now let's fix up the image. The image, is it a duplicate of the first one? So we want to get the other image. And we'll put the file in here. And let's have a look. Perfect, perfectly. So for the third row, I just copy and paste the first one. Because this exact same, well, we'll just all differences that we need to change the image and text. So we'll go to this website. We'll see what they have for the text cookies that w, w. And so the image, it'll grab that URL, paste it in here. And as you can see, looks beautiful. 7. 5 Designing the interior and Car core features component: Let's make a new component called interior w. And this will basically, this will be used for building the interior page for the Tesla Model X. And for now we'll just have the image of the interior of the Tesla. And in the future, we will develop it more and add more features. And I will design it better. For now, I'm just going to be an image here. So what does the website? So we can grab our software image, should look like a beautiful image. And again, we'll just use the URL. And we need to link our interior component to home. So and as you can see, looks wonderful. Just a quick note, let's move the heights. Just remove it from there and give us a better should give us a bit insane. All right, so now let's move on to the next component. We are going to be making a new section which is core features. And this will, this will display the core features of the Tesla Model X. So again, we'll have a fresh template and we will do, we'll have a div. And this will be, this will have a background color of black. We'll give it a margin top of minus ten, so that it can be stuck to the section for that. And then we'll have the div fluid to make it responsive. And we will customize the cell. We didn't get background class. And we'll do a display for the cell will have discrete table. Now let's go and implement their background class. So for the background image, for the background, we're going to have an image. And who find a nice image shown that it is, it looks like this. Move it to the right and districts like a beautiful image, showDish. Take that quickly. Let's take that URL, paste it here. Okay, so for background size, we're going to have hover. And for the width we're going to have a 100 percent. For the height, we're going to have 70 Vh. Okay, so let's see how that looks. Or before that lists also connected to our home w. So w components. And as you can see, it looks very beautiful. Now we just need to finish up designing it and add some more elements to their kidneys components. So for the image that we added, we decided to download and then upload it to the project. And we think just looks a bit better. So you could do that yourself if you want to. So moving on. This other div. And we'll do display table. So and we want to put a vertical line will have the bottom. And we'll also add some padding bottom 50 pixels. And inside that div will have a bureau. And we'll have a view column inside the Euro and we'll have a one which will hold. Yeah, So which one will be white? And it will have font-weight lights and texts, right? And this will be the horsepower. The performance of the culture 2020 was power. Then we'll have a paragraph to navel this specific immediately. So we will have class white text and we'll align it right. After this, you will have another column. Trusses, we need another two colors, is going to be the same. Good to just copy and paste this column. And we'll do that. For the second one. We don't want to have extra will have it centered, so we will just take center. And this will be the quota model feature which is put nice seconds. And we'll have the label which is AutoML. And then also for the last one for the loss. And we will move the text, right, so we don't need that. And we'll change the label which is to perfect chickens. So this is the time of the car, will have labeled your 60 miles per hour. So let's see how that looks. Okay, something's not right. We need to wrap it inside a euro. We have done that. So we need to add text, right? And change it to center. Same thing with the last one. We need to move that text, right. That was the issue. And now it looks perfect. Just as your miles per hour. That's when everything's perfect here. 8. 6 Designing the order now component: So for the final components, we're going to have an order page so the user can see how we can right-click. It allows him to audit the call. So we'll have a fresh template and we'll link this to the home screen. Again, we can show Patreon and you get to now let's move on to styling this page. So we're going to have a div and we're going to use, we're going to start it with a background color of black and we'll do margin top minus temperature. And then it will have a div inside this to align this to the left. And we'll give you a batting padding top of three. And then we'll have a Roman side. It's bureau will have the image, and we will give it a height of 600 pixels. Again, we're going to go to the physical absurd. So on those are the website. There's a nice image. If you get to the end of the upside, we can find this image. We'll just copy the image address. And again, we'll just use it and for the source. Okay, and after the image, we're going to have v layout and align that to the center of the screen. And this will hold the H1 and the button. So for the H1 we're going to have, we're going to make it white text since we have a black background. So I would look for a nice and we'll have a right to Tesla Model X. And we have the Watson for the ordinal and will have already is 18 pixels then this button. And we'll give it a margin left of three for the class and the class area. And that should be done for now. August, you will need to fix this. Something's not right over here. Is the image. Okay, now, perfect. So over here we have a syntax error that was wrong. We should have just closed it like that. And that should be fine. 9. 7 Vuetify Project Summary: So that concludes our ED50 lessons. I hope you have enjoyed these lessons and unifies a really good library to allow you to design very nice websites in a very short amount of time. So I hope you have learned how to use Speechify and the components that it provides us with. And I hope you can use this to advantage to help you save time and effort and your when you're designing your own projects. As you can see, VG phi has helped us design the Tesla homepage. So we have cloned the homepage, that of the tunnel oxide. And it looks really nice as you can see. We have all the components that we implemented and we have put them together to form our homepage. 10. 1 Creating and setting up the project: All right guys, so we are going to be working on the project. So first of all, we're going to be making a new layer of a project which will serve as a back-end to the application. So let's get on with that and use the Laval command. First of all, actually the cd into our documents so it can make the project there. And we'll use the usual composer to make the composer for a project and then bearable. And we'll call a Tesla admin panel. All right guys. So first of all, let's make the database for the project. So let's go over to PHP, my admin, and we can make a distribution for the so cool it Tesla database. So now we'll link the database with the rubber project using the EMV to open the database name and the username is root and new password navigation. And we can go ahead and service, check, everything is working. Let's go to the website and everything seems to be running fine. Now we need to make an authentication system. So we have to, the suitors go ahead and check the wind play for this. So let's go ahead and Google. Bearable or parallel VSCO fording rules. So let's search for the authentication. And we need to use this command. Now we need to. So we have three options who scaffolding we can use Bootstrap view or react. In our case, we'll be using view. So we'll copy and paste these commands. If Yat-sen UIView. And now she's please run PM. So now I have shown in humans to just USU libraries in the package.json file. So up to NPM has finished installing the libraries. We can go ahead and we can use the OAuth two. Let's go and check the PRBs Yat-sen, your eye view. This would basically everything up in terms of authentication. So it gives us a login controller, register controller. And it allows us to register new uses and allow the registered you just login. And we can check if the, you can check the OAuth authenticated users ID as many helpful functions, everything. So there's going to be very useful. So now it has been successfully authentication scaffolding generated successfully. Okay, so now we can go ahead and check it on the browser. So if we go slash login. So something is not working properly. When we actually run npm install again. Now that we have set up the scaffolding for authentication using view, let's go ahead and do PHR and serve. We also need to run VGS using npm run Watch. So we need to install npm and watch for PMI and an APM watch. And that should allow us to run the JUCE application. And it would automatically render it and compile everything when we see when we make any changes. So now that we've installed MPM run launch norm, we can do simply MPM an arch 2. And that should run the application and it will automatically update when we receive any change. So now we can go ahead and register a user. Call him Bob. Bob at schema.com or gmail.com for the user. For the password, we'll just do Beaumont degree registered. And it tells us when we need to run the migrations for the authentication is something that we forgot. So PHP artisan migrate and should fix it. No need to read. So you need to question 1, 2, 3, 4, 5, 6 because it requires a character. And there we go. We are logged in for I guess so let's go back to VS code. And then that's good. And connect the welcome to place first we're going to clear it because I wanted to go to the head. So let's go ahead and clear the stuff that we're learning it. And we'll make a new div with the id up. So we can connect app.js with our PHP. So the front end of level is now configured to a quick VGS. So it becomes a Vue JS application. 11. 2 Setting up vue router: All right guys, so now we need to go to work dot PHP and we need to define a route that is dynamic. So that way, wherever we put for the roots, it will go to VGS and then the roots on refugees will be working, wouldn't be spending on the elbow PHP damage can just simply whoever which we get before that over two years and you reach MGS, it will decide which screen to display. So by doing any and then doing a question mark. Now, you can just like with anything, without any dynamic routes or it can be with a dynamic. That's what the question mark makes. It makes the dynamical optional. And will this will forward the request. She will come to bleed. And as we know, welcome to ablate. We will be connecting it to my core competency is going to be connected to ab.js using these components, registration, app, ID app, and then it's going to be connected to welcome the blade. Now, we need to link the router with app.js. So let's define the return. Let's make a return. Make sure you stood by running npm. I reach up. And we'll use this reason out. And overhead. We'll pass in the props, return of a person, our pitch, our router that we get just fine. And we, we need to give it the roots paths, which begin with the ribs. So we need to define a rich file locally urge to GS. Now we need to now and you should define all the paths along with the corresponding components for each one. That's way. One we navigate to a route every years. It will see what should we try and navigate to it. We'll get the component and it will return the components. So it would do the routing that way. So a very rough path. So for each routes, we're going to have path. And then the components for that route. Sometimes the ultimate port can be annoying and educational. We want to, for now we don't have any components, so we'll just use the example component. We'll call it a home view. And the template which to NIH one just to see just like she from exchanging. Okay, and then we will give this a name, which is bone, and it will go to app.js. So we need to import home, we need to import. So we have just so we can connect it to the return. And also you need to import the whole 20 seconds. Now we'll go to roots and we're using the home components. We need to import it into this file so we can use it. So now. So now whenever we get a slash, so if we go to the path, you can see the path overhead. And there's one other good to this. Whenever you get the slasher root, which is basically a nothing inside the forward slash nothing. This would direct the user to the home component, which is basically the homepage. And this is, this component however, is over here, which is where now we should get hello. So after we are done sitting, the surface should be yellow. But we still need to do our main app components to connect the router with the root components. So we'll just call it index over and over. We will do a fresh template and we'll define the return of inherited view. So this would be basically, this would be the main routes of the original and go to import them incomplete ahead and register inside app.js. And we will update in the component section. Also at the main components, which is what we have just defined and x-dot view. The welcome doublet so that it shows the content of whatever the router gives us. So in our case, the actual routers home and the router should give us some and index should display whether it returns given us. So now if we were to go and check it in a browser and refresh, we should get home. But there's something obviously if we plan on console.log quickly, something. All right guys, Let me just check and I'll be back. Okay. So we've managed to find the error was due to the fact that we didn't think ab.js would welcome that late. So we need to add a script tag and link the app.js. We would come up late. And now we get another error which is, which we have view, we didn't make a habitual capitalism for me. So there has to have chemical attack. And now there we go. Like I said, we need to add Madu words. The roots took is 0 because you're going to have a front end and we're going to have a back amplitudes loss and they can add their own products and everything. So we need to make sure that the authenticated before they can access these roots. So to do this, we simply for issue that we want to use a middleware for who will specify, all specify as a prefix to the roots. For example, admin slash products or admin slash add clubs, for example. And we will make sure that they authenticate using the middle of the head. We do, We're all and this will make sure that they logged in before they can actually add the products to. You're going to have to use the types, one for the authenticated stuff and one for the people that they can browse. And I've production that you go to the court. Okay. 12. 3 Setting up vuetify: Hi guys. Now we need to add each batch are VGS application. You actually go and Google Fi with Level 8 setup or how to set up, we divide by x. And we simply have to follow this term cereal. So first we need to do you have the production of already? Now we need to install each file. We just do a PMI, which Phi. And this isn't few minutes. We'll be sure to add the dash S, so we'll save it in your package JSON. So whenever you want to reach to the modules again and just add them, put the MPM. Okay, so now we need to make verify.js and we need to put this inside resources such AS will make new file, each file of years, and then copy and paste this stuff from her. And then she wells. And above cool, you have important beautified JS and CSS, and I'll put digits with you. Also, we have created our own theme with it. Now, the last part is left over two places and reconstruct. So we have to copy and paste this Speechify patient page to try and make sure to linkage inside the main app components by adding which phi. Okay, so let's go to undo CSS. There's a few things that we need to add to our project. And I have, I have put them in a text file in this folder so you can find them in a text file, copy paste them up with them, and as CSS. 13. 4 Designing the navbar component: All right, so now we need the toolbar in our application. So we need to make it up Navigator component. This will basically hold the toolbar. Let's go to the virtual reached via website, and let's find the to pledge to buy that we can use. When looks nice. This one before I let go of I think one of them was when lunch. Okay, let's try this one. Let's just copy the template. Good. And let's see how that looks. Paste in. And simply unless we also need to link the ABC, navigate to the index W. So we need to include the row where we need to wrap it inside a div so that it can take more than one component or robot. Whenever we have more than one component inside the roots components, we need to wrap it in a div and it's working perfectly. So this is, I think there was one that was bestsellers have a comparable the one. Okay. This one, I like it more. Looks better. We need to keep the sublevel designation to change the code. And after we get two components, is known as she got the code. That looks nice. We just need to make is to the height issue much we need to decrease the height. Yeah, that exclusively. Yeah. We'll stick with this to one. Okay. So now that we have added the V2 boilers, modify the title, let's call it test the admin panel. And we need to add two more buttons inside this wall. So the administrators, they can add categories and unproductive zoning to add them as buttons. So instead of athletic reason is changing and make it a category page. So that way we can have just a category page and then we can see the categories and subcategories and a single page. And for products, same thing as well. Have a product's Watson. And this would take us to the products products page and we can add products and the products that we have added. Okay, So we need some margin between these two. I mean, the release of gaba. Okay, we need some margin between these two buttons. Let's give it some modular 2. And yep, Linux better. Okay, perfect. 14. 5 Implementing the Model, View and Controller for categories: We need to screen folder, so we can have folders for each screen. So we need, so we need one for categories and one for products. Okay, so let's make a new folder inside this four categories. And we need another one for products. So now we can start off with the categories. Let's make a screen that will show us all the categories. And we also need another one for allowing us to edit the categories and add new categories. So make a view template and then we'll make another one for great overview. Let's change the name from Crete, the school, add category and category that way it's easier to control when we're trying to find the file when we're editing it. You guys agree? Because agrees. I'll just sketch a greater good. Okay? Now we need, now is work on the categories. So first we need to find a way to show that as degrees. So let's make a categories table first of all, and using migration. So let's make a new migration. So the periosteum make model that we will have a module for this table. We're not good at category and we'll call it dash m. It makes us, it makes a migration for this model. And as you can see, I already made it. We can go to it. Migrations. So as you can see, we've made the middle of it. Now if you go to the migration and we can modify our how we want and add the grid columns that we want to use. Okay guys, so this, add the name to this category. So it will be a string. And then let's add a else. So the image. And it could it emerge AGE? Just so it's more clear. But you get novel first two can be nullable and we'll make it image AG. And we will also read a quinone for ordering. So we know which order the categories. And that will be an integer. It can also be nullable. So we will have to pitch in. And then let's do you actually migrate to the new table? As you can see, she's migrating and migrated. It has been stable for us. Okay, So now let's do the gods is property of the kinds of readers allows us to modify older properties when we're trying to modify them in at Motorola. So would you do protected garden and we'll have the empty so we can basically modify any property we want. Okay, So now that we know that we have a module, we need a controller in order to store and update and delete and want to find the actual model. So it doesn't make a controller which had to do peace and may controller. And then we'll call it category controller. And we'll also add the arc to make as a resource. And it would automatically give us the methods, which I will show you right now. Tourists initiative. You controllers, scheduled controller, the index that creates store, the show. I did update, destroy all of these common with the resource. So now we can get, now you can stop making the functions and implementing them. So for the index we want to return all the categories. So we just wanna do more apt important. If you have a PSP intelligence, you should do as much a key important for you when you type in categories. But in this case we just have put ourselves, which is the boss abstract model slash category. And overhead will get the catch-up news from the database. We just have to do category and then we'll use the all function from the category moodle. And that should give us all the categories from the TVs, everything. And now we should return the return response. And we will use all your JSON in order to return to the viewer application and industry categories and the categories are, and how to find which is the categories variable. So now let's head over to api dot PHP so you can add our roots. So this roots will basically We'll get the categories. And I would tend response with the category to manage to find knowledge base. So the name of it. So the URL will be api slash categories. And we'll use the categories controller and we'll use the index method call we have just implemented. And now we also have to import the categories controller inside the file so we can use it. And after we do that, we can try head over to the semicolon hand should have, but your crew Shall. We can see just our slash api slash categories. And John and we have noted secretions. We haven't added any execution. So now let's go to the distribution and some categories. Good statistically be going the catch-up reason or just do some research over here. Just random ID, JD one for the name could t-shirts. And whatever you eat that null for now. Or they're only there now, go. And which over there if we go and we refresh right now, as you can see, we have a category. Okay guys, so now let's go to the website and find a simple table templates. So let's search symbol table using beautified. We get this simple table components. And let's go with the black option. Let's go with the blank template because our website uses black and white. So that's perfect for our website template now we need to cope with the scripts as well. So this cognitive scripts for now, Let's see how it looks. So simply just run the script and then there's good to the browser and see how that works. Musical. So now we need two other image and order. We need to accept the headings. So for now, we're going to choose data. We don't need this. Actually considered a quadrant. We need to eat the deserts, we need to remove that. So for return, deserves data constructors empty for now. And now when you use axiom. So you get the categories from the, also we need to fix up the headings. So let's remove this. This is everything for now and we'll get, we'll get on with the extra row of the table data. Unless fix up the headings. Let's change the name. Okay, So then things look good. Resume document, okay. Category name is that it's named and for the ordering when each other nonetheless. So it should have one for LH. All we need to have one for ordering. Say waiting for ordering. We need to do, we need a button for a change. And Boston flew to eating. Okay guys, so now let's make him with its function. And let's make this recommended could get categories. So this function will give us the categories from the database using the API, the PHP. And we will store those categories and our states. And we will display them in salad table. So it has to shrink. And the shrink actually. And we'll do localhost 8000 basically where we're meant to be using a visual URL and API client. But since we are, since we only have like two or three API calls, we only going to be using the prefix link, the URL link. We're going to hotwire it inside that axis. So the best way to do it is using a black line for now we're just going to use just because we don't have any API calls. Okay, so now we get the response. And we're going to do this to list their responses to see if it's working. So now let's, let's call this function mountain. So when the component is actually mounted, we would call getCategories and this chick and console log. Okay, so we have Object, perfect. It's reassuring the categories from the distribution is we'll console moving that. So, so now let's check if their responses successful by checking the cities of the sequences between 200 and 300, that means the response has been successfully obtained. So do check that right now. Then if that's the case, then we will basically store the categories in our state. So there's no category which is states and who isn't responding to two categories. Okay, guys, so now let's loop over the categories to do a default category and category. So basically take each category from the categories array and we can access it. And also we need to have an index. We have a key for the, for each, for each. So for the key would just use the category ID. And now for the table data, we'll just put in category dot name. For the first one. Let's go back to the table, table headers. Let's see how they are formatted. So first we have the image that we have the name, then order, then edit and delete. So we need to follow the structure. We will do. So firstly the imagined and have the name, and I have the order. So it will be the image blank forever for now. And for the Buddhist be using the Neymar or the distance, test it out for now and do the restriction. We have an Arab and see the issue. So the issue guys was that we had to remove this. This is codon wasn't needed and that was causing us issues. So if we remove that and we refresh, yes, everything works now is giving us the categories that we have. So now we can move forward under the name order, delete an image. Okay, so let's try and sum to these columns. First of all, right, now the aligned as text cleft, we want them to be text centered. Just use the control replaced to just press control FM and we should get this controlled breacher places. So now the table headings or centered. Now we need to have the table detail sensitive. Wonderful. So now let's get on and do the ordering and images and other columns. And I'm getting buttons. But first of all is make the background black as well. Because I'm in China, stick to black and white kind of thing, like a dark theme. So let's give the background black color. Okay, So it should do heights, a 100 percent height. Height. So that does the job. Okay, so now let's do the image and it's just a random image phrenologists just to see how it looks and we can style it. So this is an image from the scan image from Tesla. Okay, this looks like a perfect dimension. Let's just copy image address and let's see how that would look in our table. Now let's give it a height and width. Height of 100 pixels and a width of one and pixels. So you can make it a square. And now they, we might need to make it a bit more actually is perfect. Because you're not going to have many categories anyway. So I think that's good. Okay, Let's head over to the feature FI website. And let's find a nice button that we can use for our edit and delete wasn't. Okay. This one looks nice. The shoes, that one right over there. This one looks good. Nice me. Show you how that looks. We need to go the issues. We need to wrap our components using the app. And that should allow us to use coloring in the bottles. Okay, Perfect. Are guys soon only to Install Font Awesome. So we can add an Edit icon. So let's go over and NPM JS and find the MPM is to Font Awesome package. So make sure you go to this one is at Font Awesome slash view Font Awesome. So now let's copy and paste these commands. As you can see, these two commands over here, which is two. So there's two libraries, awesome as vehicle. And the other one which is the, which is featured as VJ cons. Okay, so notice NPM, NPM install their second library. Okay, So this copy and paste this code from the Font Awesome package. So pasted in app.js. And we want to use the icons that we want to use regrets you. And then the rubbery. And then we can use them in our app. So now let's copy and paste this inside the template. And we can now use what we want. For example, pen. And we have an ArrayList double check. Yes, you what we have. So let me save that. I'll come back to you. Okay guys. So now let's install this additional. Usually we choose, we didn't have to install this library. So we can make, so we can Import Font Awesome icon. Otherwise we get era. Okay, so now let's check it is to see how it looks. Refresh. Perfect. It's working just like we expected. Now, let's, I think it looks perfect. Distributed delete wasn't as well. So there's going to be the same thing you're just going to have like a trash bin doesn't achieve trashes actually icon. Just going to put this all into our beautiful. So we want to make it red. Danger. Okay, something's red. Perfect, beautiful. So now we just need to add some more categories. We need to find a way of adding categories. And then you make a page for anticodon region and we can go ahead and added the categories and I'm going to, we'll go forward from there. 15. 6 Add category route and button: Okay guys, so now let's add a new category button so you can add categories. So let's just copy and paste the categories watching. And we'll just change the labeled as category. And this will use the Add Category roots. So let's change the categories to add category. And let's also give it some see how it looks less than some margin, right? Margin, right. Okay, so let's go to the roots so we can configure this as category rich. So just copy and paste this one and change it. And this is going to be linked to the at catching fish screen. So just unfold as categories, components, exchange, you can convince this one. Okay, So now let's the advocacy green screens. So if we click on this now it should take us to the script secrete screen. As you can see, it does take us to the correct route. But now we just need to build the components. And then we can have a page for adding categories. 16. 7 Designing the category form: So now let's build our app categories page. So we basically mean the form. So the user can add the right details for the category and then submit the category and will be added to the categories. So first look at the forms, unless it's fine. The nice one that we can use. The scoop. This one looks nice. So let's copy this template. And to our screen. Let's also add the scripts. Okay, so now let's make this TO blend in with our theme. So first of all, we're going to wrap it inside the container. And we're going to make the hole. We're going to make each element as a dog, a dog prop. So this will make it, I use dark colors. We're going to remove the checkbooks and the Vc Let's do is Julia. And we'll see how that looks now. Okay, looks so much better now. And this adds relation to these cheaper solution are now learning them. You also need to allow the user to add a, well, actually let's make a Boston. She submits it's gonna make it white. So the user can save they contribute by clicking on the Submit constant. We also need to add a way for the user to the file input so you can upload the image location anonymous, modify it a bit. So let's go on the V texture. We're going to reverse. We're going to remove these V-model and lazy validation. We don't need them. And for the VMO do we're going to remove that as well. For the counselors, make it 35. For the rules, we assume that the Layer MOOC keep that. Now for the e-mail, we're going to change it. We're going to make you owe them because we have an odor filled for each category. So we can enter them one by one. And then we're going to see how it looks now so that it doesn't, and that's going to be our form for adequate secretion. Now we just need to add inputs so the user can add an image. So let's go to the beach. If I understood of our uncles list, choose one that looks that looks nice. Cool down sheep were other options we have. Okay. We're just gonna go with the simple one. Let's go back to this open select one from the top. Okay, we'll just use this one. So let's copy and paste this elements and added into our form of to the older, the other element to adults. And we're just going to meet you too to make it dark because we're using without came. Beautiful icon. Let's see if we can start making adulthood. Okay, so now let's modify this. If our inputs, we want to make it blend in with our team. So let's have a euro. And inside the bureau will add a, we found foods and also we want to have a place holder for it. So we'll use the VDD, a MOOC, losing a mood, and we'll have image inside the label. And we will change the dog to dog. That was a mistake. And also the style attributes, a knowledge are the icon next to it. So useful, awesome. And we'll use a camera icon, camera icon, and we'll give it. We'll make it white. So we'll use class white text. And we'll be there margin top of 41, the lives of two and stylet. So that's it will be shifted to the right of it. So you want to increase the font size, 20 px font size. And blue shifted to the right, it's by 20 pixels. So that's, this will be stuck with the revolted. And see how that looks. We'll just give it a margin bottom shell that looks something wrong with the image that she would often Awesome icon. I think we have the West and the Font. Awesome icon. I have one dash. So the reason why the icon was showing was because we have an important, It's so important the camera icon using FA camera. And now that should work. So the other two libraries or three refresh this. We should get the perfect mix furnished and we can select our file and submit the form we now need to work on submitting the form so you can actually add the category. 17. 8 Connecting the category form with the state of the component: So now let's set up the states so that we can bind the elements with the state. So we'll use the data. Have the function which I did. I would return the state. For the state, we're just going to have a name. And we're going to set its energy and we're going to have a border. We will also need the MHC is also at the end, and that should be it. Now, we need to connect the elements with these would be stage C variables. So for the first one, for the name or the name, and then for the they'll put the order. And now whatever that changes, the state will actually change. Okay, so now to get the file from the file onto it, we're going to be using V-model a prop. So now one of the image changes in state. It will basically update the state with the new image. So now, whenever we update the fall, whenever we select New File and then found that it should automatically take the file's contents and put it inside the state image. 18. 9 Implementing the store category function for submiting the f: So now let's get all the contents from this form and store it into our database. So we need to have a route that will take the data from the form and it would store it in a little bit. So we need to define a roots inside api dot PHP, so we can have a post request that's when taking the data. So simply copy-paste the roots and that she needed to post. And we're going to cool it. Safe category or add, can't agree. And go to the store function. And it's gonna pull up categories controller. So now there's over to the Categories Controller. And let's implement this TO function over here. So now they're just dD the requests to she was happening. If we were to just this out, just to make sure everything's all right. So now if we were to cool. So if you open postman or Thunderbolt, we add the extension, good, thunderbolt. Okay, so now let's add, let's return a response and we'll just return the request. So that's one will be submitted a request on the VGS application. We can console log and see the response to who gets to make sure that we're actually, we're actually reaching this function. So now let's go to the VGS application and add categories screen. And inside the cell will want a user clicks on submits, we will call a function. So reckoning function will submit, submits form and then we'll implement this inside the script area section. So now let's copy the URL so we can use the actual root. So changing your API gives us our three prefix and add category. So now let's submit the actual parameters of the post request, which is named order an image from the state. And then we will suffer response. So the response we get from the so for the imagery shim, make it null. Initializing with no days or so. Then, and then we should get response. And then we'll console.log my response to see what response we're getting. Just to make sure that the data is actually being, that we're actually reaching the store function. So now let's go to the gas console.log. Our application is open the console. And this is just a name, an order, and the foul. And submit this form and assuming again that console. No, we should GB and you she's been named that we've submitted. So we are actually reaching the store function controller. So now we can go ahead and actually make a new category and store the category contents with what the user has inputted and the VGS application. And we can go ahead and save this inside our database. So we will make a new category and then for the name, we will taken wherever the court requests name, whoever's name, and then for the orders will have all taken the contents of their quests. So the order of the request. And for the image, the image is going to be a bit more code. So we're going to have to go and check online to see the boilerplate code for adding storing files. So for now we'll just leave it without the image and your churn request category, category and the category. So now restore the image. So we need to get the contents of the image from the request. So first we want to check if the request has an image like the image is not. Now, we just do this by every question, Mitch. And that should regenerate Shruti value and the notion and share this if statement. And now we will do image request Image and then Image new name. We would, if we need to prefix this with a unique ID or something, or random numbers on absolute. But if the user, the user uses the same image, it wouldn't have any conflicts. Because then we will have two different names that they will be stored as two different names for each category. So we're going to be using time in this case. So time. And then we're going to call concatenate. This would the images original name. So we're going to use getline original name for the image. And then we're going to be, now we need a place to storage. So we need to store it in a folder. So let's make a folder. And inside public. And there's just Cooley categories. And we're going to move this image and put it inside the categories. So we are going to be doing image. And then we're going to use the move function. And we're going to move it inside the categories. And we're going to pass it, pass the name of it so we can be stored. So we're going to present an image name and then we're going to be saving it. So now we should be category should be stored with the name, with the image under the ADA. So now for the image, we also need to not only store it inside the folder, but also at the image name and send our country great. So now we have it. So now the image name is also stored in the category and category sing. And was. Once all of this is done, we're going to return a response with the strictest success. That means we have successfully or unsuccessfully sought the category. Okay, so now we need to navigate back to the categories page. So when the user adds a category, you can see the consequent I added inside the categories page and you can see who the other categories there. So we want to navigate to that page. First of all, let's check the status. So let's make sure that our category has been, has actually been added in the database. So we do this by checking the status of the response, which is 10, choose between 200 and 300. Then we navigate him over to the contribute speech. So we're gonna do this, the router, push the contiguous fish. So let's just test it out. Now. Let's put in a category name, order, given image and the image. So Mitch, and as you can see, our category has been added. The only thing is the image. This is because we're using a fixed image. We will now need to make it dynamic. Okay, so now let's display the image dynamically by checking the property of the category. So we want to, first of all, we want to check that the image property exists for the category. Otherwise you will get an undefined property, ARAF. So we will check using the VF inside, using VGS. So VF category, that is the case. Then we will check, then we will use the category image. And we will also need to prefix it with the website's URL. So, so let's put the URL over here inside the US state and a component states. And then after that, Let's prefix our image. So we'll just do the leakage, the origin. And then we'll prefix our image with our URL. Because the image just the image name that doesn't include the URL. So we also want to prefix it with the categories. Who is we're storing it inside our categories folder. And we're going to then use our image name. We're going to concatenate it with our image name and then that should give us the image. And now let's just look in and physics. As Kasey greed is just add the category with the image. We also need to go. This could be religious and she was the issue was fixed elements. The issue is that on our backend we had a comma and we had a sorry, a full stop. Which means that we need to reverse. The move function takes in two arguments. The first argument is the folder, and the second argument is the image name. So we had it concatenated, that was wrong. We should have been the folder separately and the name separately. So which just inside the store function and the categories controller, particular controller, we need to change the move, the 950 overhead. We need to change it to an apostrophe to make, to make them feel super augments and the statistic now. So at a store new, a new image because this image has been stored. And now let's shift that they should. The image name has been sold, but the image for hazard be subjects of this issue. So now we're going to try and upload the image again. And they USE, that works. Okay, so for the images that don't have the image, like if we add the category without an image, we want to have a default image. So let's go over to Google and search for a test the image, which one of us? So just use this type in just a little bit. Okay, so this one looks addition religious commune basis. This distributed Actually. This one. This one is two. This one has beautiful perfect. So they're just copying the immediate dress. And we want to use this image when we don't have a image property for category. Because if we want to use the image categories, sometimes you will give us an undefined property. So we want to use VF. So if you don't have a category, if we don't, then we'll use a default image. So if we hadn't used the v-if will have actually gone for the images that don't have a nice property that the category story that doesn't have any attributes that we need to make that smaller, much smaller. So we'll just give it some style. A 100 two shoes unless you know that. That looks much better. Okay. Perfect. Sure. Now and is used as well for the words is also high analyte. Just give you some padding. Okay, perfect. 19. 10 Implementing the delete category function: Okay guys, so now let's work on the deleting, deleting button. So let's go on to API, the PHP when to make a route that will get the ID of the category that we want to delete. So when we're watching it would cool this roots and we'll make a request to delete the category. So this is going to be a GET request with the Delete category. And then we'll pass also the ID delete category flashcard again, the idea of the category. And we will use the destroy function inside our category controller. So let's go over to the category controller, and let's go over to the destroy function. And we need to basically find the category that we want to. We can also just use a destroy bone. In this case, we'll just do category and an older delete nasa. And it will return a response that the category has been deleted. Success, success. To that, we can confirm that the app has been, that category has been removed database. So now let's go back to our deletes Watson inside the categories view component. So now when the user clicks on the trash button, which will cool this request that we have. We have just defined inside api dot h b. So we'll just do delete category. We would make a method inside our components coolish, and we would pass in the category ID. So let's go over to our method section and the view component. And let's define a new function called BD category. And this would take the ID. And we will use to cool, to make a request for the eating the category. So let's copy and paste this prefix. And let's change the chart. So delete the categories should be slash during dodge. And we'll use the ID, which will listen for our response. First ones to make sure that the category has been successfully deleted from the detector. So we took the response status to make sure it's 200 and 300. And we can alert the user that it has been successfully do it. You can also navigate back to our categories future refresh it. So that these so now after we have successfully deleted the category, we want to refresh the categories. So we just call the getCategories. And this should get the latest data from the database. And it will set it in our components. So if we were to now try it out button, we click on that, that it wasn't. And nothing happens. Strange. Let's go to our other schools. We had deleted, sorry, the roots is wrong. We should have put a delete, said we're going easy to reverse. Now successfully deleted it, removes it from our category speech. Perfect. 20. 11 Designing the edit category component and implementing the : Okay, so now let's work on the edit category Watson. We want to make a route for it so that we can actually go to the screen. So let's define a root inside routes.js. So we want to give the path for the edit category Watson. And we also want to import and use the components. So when the user navigates to this category, he can access the catechol screen. Now I also want to do the proxy so that we can receive permitted because when we go to the other category, we're going to pass in the category that we want to edit the actual category object to which causes the category screen. And we also need to give it a name and the category. So now let's go to the category view. Let's make the button is clicked. We want to use a router and navigate to the category screen. So we can modify the category that we want to edit. And we wanted you to this router push. And we will navigate over to the edit category screen. And we also want repose in the category that we want to add it as a probe to add in the parameter, which is the category that we want to edit. And now let's go over to the edit category. Now the advocates agree is going to be just like the category, just like the ad category. The only difference is that we are going to be pausing in the category with the defined values, which is a postman as a probe. So now let's copy and paste stuff from catching add category and just copy and paste the template and modify it so that we can use the same elements is just that we want to give the value of the Casio video editing. So computing the container from the health category. And we're feasting inside the template of agitated category. Just before we continue. I believe we have an error soon is good to the causing consequences of view. And listen to referencing these components scripts inside the template. So we'll just return a push. So just fix that for you. Continue. Now, let's go over to the adult category. So let's get the properties from the category and the elements with the values of the category properties. So the name will be using it in the input field as the value of it. So let's define those types inside the state to inside our data function that returns the state who have the same order and an image. And these are all taken from the, from this category that we're pushing it. Okay, So does Google categories. And now let's make a new function in the method section. And this will be for submitting the object is form. So let's just copy and paste stuff from autocratically. So the submits form. Tricky question. Okay guys, so now let's add the function for submitting the form. The object is warm, so there's just copy and paste from that category. Then we need to change the route from ADHD to update and also need to pass in the ID so we know which which category we're trying to modify. So now let's go over to the QRS, go over to the roots so we can define the new roots. So we're good. If you had of history and copy fish, this is going to change it updates category and it's going to take the ID Israel. And let's go over to the machine is the update function inside the category controller. So now we need to go to the category controller. And we need to implement this function. So we want to find the category. We want to exit space ID. And then we want to update the name with a new name. And we want to update the order or the new order. And we also want to check if we have a image, then we need to update our image. So if your question has image, do request image undefined or no, no and no equal to the category image, parent category image. So does, so basically vision or equal to the category image that's already existing and its existing zone and the Gatsby Image is no, no. We need to check because if we do know is we're checking is equal to the beginning. Because if we're checking often than OCO, poverty undefined because we're trying to check a property against something when it's not even there. So we have to first check that is existing. So we just have to copy and paste this before. And I just need you do undissolved. And so if that is existing that we can check if it's equal to the category image. And if it isn't, then we just updates the category image with the new category image. And we also need to copy the code for moving the new file over to the category's folder. And we need to save it. Yes, that should be good. Just to make each disjunctive the code, let's remove the skeptic reshape and copy paste from the other parent. So in both cases to say, Okay guys, so before we add each element deforms liter, we want to also check that it has a would check it out it has a value. So first of all, for the image we want to make it null because we want to check that it has a value before we can append it to the one liter. And for the other ones were taking you from the category properties and wasn't engaged. So now for each one, we want to check as a value by doing this.name for example, and then appending the name to the formula. This is the order and appending the orders deform the time. Same thing with the image. Now, the category controller, we can check if there had been said, they had been said I mean, they do have anybody. So the and basically will check if that property has a value, then it will also apply the form data to depend. Okay guys, to know that we've finished with Watson. Now let's test it to make sure everything is working. So there's just change t-shirt to T-Shirts. And then the other two like five. And then this is submit. So as you can see, it's been updated. Perfect. So now let's move on to adding the products. 21. 12 implementing the products model and controller: So now we want to, as production, Let's go to the ABA, have the gator, and let's just copy the category and change it to add products so that we can allow the user to outlooks. So let's go over to the roots now, to configure the rich will actually first we need to make a component screen so that we can actually configure it with the roots. So let's cool products and products. So we already have products over here. So you just need to New File and then add product of u. And listening to me give you a good. Okay guys, so now we need to move on to the products. So we need to make a table for it. So we will use PHP artisan, make migration, making a modulatory. And then we need to call it product. And with the dash m, this room was a migration with it. And then we can, as you can see, migration that had been made and thus the name of it. So you can go and open this file so we can customize the actual table. So if we go into this schema, so we can now give the table a name for the product name. And we can give it a description. It's going to be a love that can hold characters. So we need to make it a text type. And it can also be nullable because it is optional. We also need to give it a price. And also the nuclear bit quantity. How much imagery? We don't need to worry about quantity for now. I just want to keep it simple so we'll just give it an image. And that should be It's. So now let's go over to the model and the gardener to nothing so that we can solve it, that we can make all of the properties for the product and model. All of them would be fillable. So we just actually make projected Godwin and make it empty. And this will make one of the properties window. Now, let's migrate the actual migration that we have done. That's where all the properties will be added to the table and the table wouldn't meet. So now there's also make controller for the product. So we can update, store, undo, order. All the fancy stuff that we need to do for our controller. And we'll just do dash r, which would automatically generate these methods that we would need to use. As you can see in the store. David Irving has to be made. 22. 13 Designing the Add Product component: So for the products is going to be quite repetitive, just like what we've done for the categories. We're going to be repeating the code. So we'll just go and copy and paste the code from the templates in categories and add category, the view. And we'll paste it inside at productivity. And we're going to modify the inputs for the name. We're going to keep it the same for the order. We're going to change it to price. And same with the label for the order. We're gonna change that to price. So now let's set the state for this component. So we will do a data function that return the state of the product component. And this will, this will have the name of the product, the description, price. And well, should we have for the product image. Okay. Okay, so now let's add the roof for the product so that we can navigate to it whenever we want. It's going to be like that category when a combusted. And we're going to change it to add product. The component, we're going to actually have to import it. Surge of copying and pasting and changing. Okay, so now let's go over to the app navigator and let's look at the ALP product button. This is the same thing and we will just navigate to add product screen. Just like we don't for the categories. And now let's just do quickly to make sure it's working. Refresh. Let's console the logo looks like we have an era. Was the era sake. We haven't put to the probability. So let's go back to unless change from screen into categories to pull it. This happens when your communities. So now that we have modified it from categories to products to products. So now hopefully we don't have another era. Perfect. Logan's doing some margin to the left. Without product. A multi. Beautiful, beautiful. Let's click on it. There you go. She works. So for the description, we also need to add the end. Let's go over to each file unless the nice description. So we just want a nice 6 area that we can use flowery description. Okay, so now which one should we pick, guys? This one looks nice. Let's have a look at the textural noise, any tissue on six areas. Let's go back. Let's go back up. Also. Which sigma one on the left? This one on their own? I think this one. What do you guys say is one, okay. Okay, so let's copy and paste the template. And this is copy and paste it in our product. So let's go back to our previous screen and we're going to put it right under the name, right under it. And you're going into for much, she gosh, what a noise hidden unit you make a dog cannot write. Beautiful. Okay, Show for the name. We're going to change it to description. And for the label, we're going to, we're going to enter a description. And for the value just going to remove it. And hence texts. They should note that description Ueno. And we're just going to format this good, remotely connect to that description and the state. And then, and then we're going to make it empty shrink so that whenever the write, the description would be obligated to whoever the right. This just 0. Now, we need to, we need to make a rich actually for this. So let's go over to our trusty api dot PHP. And let's make a route for adding. Adding products is what communities as something to change it. Yeah, I'll product and then change it from category controller over to the controller. 23. 14 Submitting the product form : So to just import the categories controller, just copy paste. I would advise you to write it yourself so you get used to everything. But because we're professionals aware, so we can. So let's go back to the product controller and let's implement the store function. So just like what we learn in category controller, we want to copy paste. Well actually I'm not going to go to Aneesh, going to put side-by-side and then I can explain the good. So everything mixins. So we're going to put the category controller one side and the production side. And we're going to go through it together so that she does to function. And that's good. Yeah. And we're going to first, we're going to make a new product in this case, just like what we've done with the category, really easy guys. So new product. And for the mutual put it inside our product controller. So you should use API slash models, fresh products controller. So a productive model. And we're going to be saving the name personable and the request name. And then we're going to be getting the price from the request. And living is either product's price property. And for the product description, that's correct. Description equal to because description. And then for the image, we're going to be. So for the image this new, if we want to check if the request image is actually existing before we actually get the image content and everything and move into a thousand. What I may show steadfast and then access their request image, you're going to get undefined property. So now we're going to be giving it a new name. Name. This is so that if we have two images uploaded with the same name, we don't have any conflicts because we're going to be using goose, make sure that the name is unique. So how do you distribute them to me using the time. And we're going to be we're going to be combining it with the image. And we're going to be combining, combining it with the original name. And then we're going to be storing it inside products. So we need to make our products folder. So let's go over and make a public folder, so we continue. And we will also have to put in the function takes in two arguments. The first argument is the products folder, and the second one is the name of the image, which is what we have just done up of the slant of good. So now let's go over to the our explorer unless make a production folder. So in public and you're going to do New Folder, can include products. And then we're going to be continuing with the implementation of this function. So for the catch-up for the product image, we're going to now save it with the image that we have just done, the image name. And then we're going to be saving this product using the c function of the model. And then we're going to return a response. We don't really need this poll just to anyway. This JSON and status is success. This is if you want to alert, the actual response will be much easier on the view side of that, on the application side, front and side. So that should be done for the store functions which now need to test it. So let's go over to our ad products view. And let's implement the actual function so that we can post. So when the user clicks on submits, we can push the form data, the database over to the backend. And the back-end can use the str function to store the product inside the database. So let's open our product. The view on the right side under sensory. And we'll now let's also we need to copy this stuff just like we as category who used the axis and we made phone data and we pushed from data. So when you do the same thing, but they're so close form data, equilibrium data. So equals require phone data. First we need to import the form data. And then we need to make a new form data object. And then we need to append it with the name, with the description and image. So now for the name we want to do, this dot name gets you from the state. Also want to append the price. And we just get it on the stage again. Little description, image, firstname description. I've decided not to copy and paste is much better to actually do this by hand. And that way it will become muscle memory. And when you want to come back to your code, you would, you don't have to go find the old code and copy basically, you can just do yourself and you admit, and all b is much easier to explain it you guys, because I can go through, okay, so now let's do the actual post function. That way we can post our form data over to arable and level from Jew with it. So let's copy and paste. You are all boosters, just no point typing it. And then release is going to change it to product. And we're going to shift over our form liter. And then we're going to wait for a response. And we want to navigate back to their products screen. We will check if the response status is between 200 and 300 and to make sure that the product has been added to the database successfully. And then we'll just navigate to the product training so you can see that the product has been added successfully. Push. And we'll just go to the production. And let's just do our knowledge issue where we have this other products. So give it a name which will be cooling Tesla Model 3. So the shirt will be a description. And then for the first, which is going to be a price, thousand dollars, we have it as an integer, I think. Actually, no, we didn't do it with a string. And. 24. 15 implementing the Products browse page: So let's check PHP, my admin to see the product we have added has been added. And it has actually been added. Now we can go ahead and implement the product screen. We have an aggregate so we need to document it. And then you can see our products inside our application. So you need to make a new file in product. And the product for Daniel could have products view. And just good to be a to B. This link it with the router. So we're just going to copy, paste the categories and then paste in our gene you to production. And we need two important components, an Azure components with the Shrew which are productive in a import products from screens. Flesh product slash product. Notice to make sure that we do have a new array. Beautiful, perfect, she works. Okay, so now let's, let's do what we have done for products, green certificates, every screen. Just going to copy versus who shouldn't be fishing. So just put on we'll go through it again just to make sure that you guys understand it. You can phosphorylate if you know how to do this. Perfect. Okay, So now for the products is going to be again, just like we did for category screen. I mean, we should companies are going to be explaining you for coming so that everything is clear. So over here we have a subroutine which Phi, and we made the dark theme. And inside that table we have slots. And we have a table header. For the table header, we have images, we have image name or the edit and delete. So each one will be a label at the top of the table. So we're going to G that you price from order. And for the other Andrey, but you're going to keep it and description. We should improve it anyway because it's too long, it's going to mess up the sable. And thus the header of the table. Now for the body, we are going to be looping over the products and products. And we're going to be using the product ID as a key for each table row. And we're going to be using for table data, we're going to center everything. And that it will do is for the image. And we are going to be using the, we are going to be checking that the product's image exists. If it does exist on a donkey, be taking that full image and sharing it using the image elements in HTML. And if it doesn't exist, then we will just use the just like we don't four categories. We'll just use a Tesla logo and just show that it is not empty. And it also, if we just use the productivity without checking that it's exists, then I would say undefined. So we want to, we don't want to get the error. So we'll division Vf and Vi house. And now for the second table data, which is the name, which is going to take the product name and center it using the text center. And same thing with the order as for the price. And then for the button, which is this is for editing, want to change it from degree to product. So again, this person, all it does is it just navigates us to the other products and we pass in the parameter which is the product. We also need to make sure that the roots are we, we accept the parameter. We want to make the other products. We want to make sure that the retard, the circuitry, we'll get to that when we do the root for it. And true thus, the Watson done. And for the fun, awesome a UTI company. For Watson, same thing. We will use the products method which we need to define the product. And this would take the product ID. Okay, so we'll use the trash icon. And I think that's everything extinct for the products template. Now let's get on to the product scripts and we will program the script of the file or the view components are. So there's program, the deletes products. And also there's this first program that really productive and gone to the other. So now, first of all, going to be working on the states of the scripts. So they have a data function which will return the state of products, components. So we have inside the states, we're going to have a product's property. And to go also have, so you can have the products and we're also going to have the URL, which is one, location origin. Now we can get on to programming the message of you guys. You know, we need a way to get the product from a database and we can access them from the Vue application. So we need to define a region inside if you end up PHP, that's what our queue. Get the product from a database and serve them to then ingest application. So we can do this in a giga bps. And just like that, It's just like the other roots. Basically, the root name is production and we'll use the product controller. And we did that when we use the index function for the journal. So there's implement this index function by going to the controller. And then we'll go to the init function implemented. So first we want to get all the products from the database using the old function from the product funnel. And then we'll just return the products. So we'll response JSON parsing the products. So now let's go over to our products components. Now we need to use axiom to get, to use this route that we have just defined. So this is going to be the same thing as categories. Categories. Using your shoulders, open up the categories components. And if you go down to get categories, we can see how we've done it over here. So it's going to be more or less the same. We just we're going to change the name to categories, the product, sorry. And we're going to set the state with the, with whatever we get from the database. So let's go ahead and use anxious. So only the actual slot gets communications sure, OPEX versus no exchange products. And then we need to check if the response if it was successful or not by checking this week is good. So again, if you see this going in between 200 and 300, this means that the response was successful. And we'll just state would respond to that later. And now let's just 0. So we also need to, so when the component is mounted, you want to Google cause function. So, okay, so when it's mounted, we will call this the products. And they should put their products and sediments states of the ISO was all we had an issue with this key value pair women to use this symbol to have a key value in JSON. So we need to fix that, make sure you fix those low, and we also need to use it up the obligatory now, so let's head over to our app Navigator. The products where we haven't defined the products screen roots. So one of the products, a button has been clicked. We need to use that in the event cataclysmic event. And we will navigate over to the product screen. So we'll just do this real push products. And this should take us to the blue screen when the user clicks on the products Muslim. So now let's go over to this. It will basically use this route which we have used Scott discussed. So I would take us to the products components, which is the perhaps screen. So that's just 0. Now let's go to the, our app. Let's click on the products. Let's go categories and then Google products. Perfect. She's working. 25. 16 Deleting Products: Okay guys, so now we need to do our delete Watson. So let's get, let's head over to the API, api dot PHP. So we can define the root for the reaching products. And also listed at the bottom. We'll do this, we'll do after Watson. Okay, so let's have the root which is delete slash products slash products slash ID to the idea of the product I want to do. And then we will use the product controller and we will use the describe function. So we can destroy the production. So now let's implement the destroy function and the products controller. So let's go to the product controller and good down to the strip function and as a group. So find the product first using findall fill. The product founder felt. And we'll pass in the ID. And I will just do product. And the and the production is just out. Response, message or service. One reason for it is written response, which is a Chicano Studies. And let's go back to our products screen. And let's make a new function that will allow us to use this API function that we use. We just couldn't get product. So the product will take the ID of the product and then it will use the rule that we have defined in api dot PHP. So we will use you tried to overhead. So we're defining it now, takes in the ID. And just like we didn't catch agrees if we go to the categories of you again, this repetitive stuff, just like we used it for deleting categories. As you can see over here to the category ID. And we use the axiom to cool the request. So we want to do the same thing goes there. Actually was no good. And then we'll just have the same. We'll just change the URL to delete slash products slash ID. And then we'll listen for response so we can refresh if we're responsible, successful. So again, all shook the city, skirt the fissure between 200 and 300. Let's just say this RNA polymerase don't get production so we can get the latest products and we can see the, the, sorry, you can omit the deleted groups. Let's also add a message, so I respond to data that message. Let's make sure that we're sending this message and the Coca-Cola. So when it's written response JSON message. So let's also add a message. You have to alert the user that product has been created successfully. Okay, Let's start out as been to Google Chrome. So let's press the button, is pressed a button and it should delete the product. So now we have finished doing the Watson. Now let's go over to the other what's there and implement that. 26. 17 Editing products: For now, we need to define a root for updating a product. Let's go over to api dot PHP. And lets me can you route it moved to be a Slack post. And we'll call it update slash product, flesh ID, which is the ID of the product that we want to edit. And we will use the product controller. And Lou use the update function in the controller controller. Okay, so now let's head over to our product control. Unless you implement the update button, update function, sorry. Okay. So let us go over to pollutions ruler. This is W function fill. We want to, just like what we've done with the category controller. We will implemented for the controller. So let's go down to the update function. And firstly, you want to find the product that we want to update by the ID. And then we wanted to update the name. First of all, I don't want to then update the description. We'll go over the description and in the request. Now we also want to update the image. Actually the price first nor do they mature price. I want to check if this image and the request before we, before we update the image, we want to check that the request image exists. And the request image is not basically different to the one that, that is already there for the production has changed. And then and then we will go inside the if statement. And we will get the image from the request image. And we'll make a new name for this image. The time to make sure that it's a different name so that they don't have that they should have no conflicts on the server side. If we have some names, like I explained before, they get kind your name. So we can have the extension with it as well. And this image over to the products folder. Make sure that your server. And then we will update the product image. The image name is basic. And we will save this product. So now we need to head over to the Vue JS application so we can actually edit prologues and save them to our database. So first of all, we need to have edit products, components, the components we have already so new file with your product. Let's make a little bit to the root now. And let's connect this new component and give it a path. And registered with our navigator. Also important that the product component in Java roots. And we can return the components. Okay, perfect. So let's see. So we also need to pass in the props because we're one-way added a product. When we edited product, we need to pass in the actual product so we can access the properties and put them inside the HTML elements. And that way, the user can update whatever he wants to update. This will also give this a name which edits product category. So that's what we had to do, was equal to shoot every campus and the products to the edits permit screen. Let's go over to the Uh, just like you can see over here, just to screen. When we click on the Edit products, we will also pause and the products, the product object, and we will access it inside iceberg screen. Let's test this out to make sure that we are, we can navigate to this sort of overhead. We're registering our props, which is product. There's just one and I just make sure that we can access the screen. So just make one with the white ticks because we have a black background. And I should put sure the name of the product and this refresh. We have an error, I think niche. Real bugs you over sculptural. Well, so the logos that are now. So we'll have an unquoted that correctly, I think. So import will have slash products should be slash product. So make sure to update that as well. And now we can access this. So it is good to add product because we deleted the Roswell data now we don't have any products. So we need to add something that we can put some candidate. This could be a price. Okay, Now let's click on Edit Watson and they go, we are displaying, we are parsing in the products, inside the edit products and we are showing the the product's name. So now let's add in the elements for the Edit Product screen. Just like what we've done for the category. Let's open up to the template. Actually lists open up at its open up outputted string, which is going to be the same thing, the same elements Swedish want to, we just want to pass in the values of the product. So again, we're going to have the name input field and we're going to have a description before other wanted to compete on an experiment first before I work on my PhD and then add the values to each element. So just like I explained before, we have a name elements, description element, and the price is going to museum thing. The only differences is that for each element and we're going to have, I'm going to pass in a value to the value of the elements. So that is basically the user can institute where he left it off. So there's just go, go vicious now and telescopes the top. And we need, we need to hover states. Also, we can connect the, connect to each element with the students. So this returns a state. So the name, the description, price, and the image. And let's so for each we'll go to the top. So for the name I'm going to have, there's going to be connected to the model. And the value would be the name. And let's go down to the description changing. So we have to put in a codon so that whatever the name changes, this will also change depending with daughters change. Same thing with the text area. So we went to a given value semicolon the beginning, to make a dynamic same thing with the price. Initialized the value over the price of the products prices for the image. We don't wanna do that because the user can upload your own images you wanted to. Otherwise it will assume the same and the user can submit it. So now we need to use the request that we have implemented in our product controller. And we will consume the route that we defined an API that piece. So we'll have a function called submit form. So when the user clicks on the submit button, which we'll call the Submit Form function. Just like we've done in the L configuration. Pitch it to the side so I can explain it. As you can see over here, we have the submit form. Whenever the user clicks on the Submit, Submit button to call this function. And we will submit the form to the database and we will add the data challenges, which so let's continue our, so this first of all is how the form data by importing goods from one data. And notice declare a new form data object. So we can append each attribute to the form data. And now we will append the name. We want to check first if we have the name. So that's the request. We're going to have empty attribute. And the controller said we can check if these are existing or not. So if we have a name, then we will append the name. If we have a price, then we will upon the price of the home data. And same thing with the ADA and the image. Well, you're English, we will prevent undefined properties. Irish. Let me occur. Finally, the image. We will append it to the form. Okay, sure, No, we have the form data is ready to be shipped over to the database. So we will use axioms. Again. We'll do actually. And then we'll just use the oil. Change it to the judge root want to use which is updates. Productive ID. So we want to change updates were not. And then we will wait for a response. And we will check the response status. The fish between 200 and 300 to make sure that the request has actually been register. So over here we'll check if responsible for the fetus. It's bigger than or equal to 200 or more than 300. Then we will, we will navigate back to our production. Our production being shown. You can see that the production success for the update. So we've made the mistake by using the values and also we don't want to use the States we are, we are passing in the product, which was a mistake for muster. This on like this. So this will be this dot products dot name plot, plot. That's crucial. So getting each value from the products are always initialized with the products or original values. I'm also the V-model does the job so we don't need to use the value attribute shortage issue of the value attributional. Just keep going. You want guys who were also, I just realized something that I didn't include the phone data, whether personal, so we actually posting nothing. Okay. So let's include the form data and to our post request. And now let's go over to our browser to test everything to make sure it's working. So that's good. The product screen. And let's refresh this product. Less cool. Tesla t-shirt and jeans, the price to $1500, and it's updated perfectly. So that's it for the edits proceed. 27. 18 Designing the client AppNavigator and HomePage component: Okay, so now we should have, we should be done with the admin back-end side. Now we need to do, now we need to do the front end for the user. So you can browse through the website and check out the products and checkout the categories. But first of all, before we do the user side, the front end client side, we want to do the, we want to segregate all the admin functionality and put them in a folder. So let's make an admin folder, and let's put all the admin stuff aside into that folder. So we're just going to drag and drop it into the admin folder. And now we need to tell the impulse because now the impulse has changed. So let's go and search for, let's click on the Search button. And let's search for thought. So, so category. Let's go back to, let's go back. So the sewage one. Okay, so we have screens category, So the category slash add category, search for that. And we should have these two. So the roots, uh, leniency on nutrition in them now, we need to, this is oxygen-rich didn't include. We learned to do interval. This one is due to the root. We just need to configure the roots now to match the new folder. So you have to do slash, admin slash category and then we'll do for the rest of the law. So administers category. We can even just use the replace two. But let's just do your best to make it faster. So we'll just copy and paste the screens and then reduce cash. And ungroup places where now we have this one which you are increasingly disapprove that the first one, there's no. Okay. Now let's see if everything's working. Okay. We didn't break anything. She goes. Okay, so this one has degree products. Let's check out the edits. That it's Watson. Okay, it works categories but soon, okay, everything is working. So now we can make a new folder. We can, let's make a new folder for clients. So we can secondly, the admin site and the site, so we don't get mixed up with the US. Okay, so now let's make just like we've done for those screens, which are the containers, will do the same thing here, will have the admin, admin folder, and now we need the app navigator for the client side and for the admin side. So we've done the admin side. We use income, income for the client side. Okay, So this update the path as well for the applicant against that because we have participants said inside the folder. Okay, so now we need to make another app navigation for the clients. So let's make one. So we did a photo with your phone. Let's review scaffolding. Okay, so now let's open our test, the SBA project. So we can basically get a lot of stuff from the amplitude inside our inside this project. So let's copy the navigator. So we will put the template inside here, inside our kind of navigator, who's only the images. So let's go over to alter this pH or we can use these images that we have. So we just copied them from the public folder. I will put them in our public folder. So we'll make actually afford the hood assets were typing over their magnitude, typically there. And let's just copy and paste them into here. Okay. So now let's update this image URL, image source so you can access it from our new project. So we're storing it inside public slash assets. So listen to the public because it defaults to public. And now let's make a home. The homogeneous components. This will be used for the client side home, home screen. So now we'll do the scaffolding. And then we're just going to basically were basically segregated, segregated everything over here to make it easier to extreme and meet each section its own component. But it shouldn't be necessary. We can just get everything up for them and more companies due to the permanent view. And let's get whatever's inside it and paste it inside the templates. And our new home losing. Okay, so let's do the other components. So as you also there. So we have specifications so that the specification is component. And let's compute template and controls it because you have era. We are and we container or shouldn't have been container. So let's just remove the view container. Or religious guys. Let's disrupt everything. Because everything has to be erupts under one live on, under one element. So that's the issue. So make sure you have a div and then you would paste all the components. Now let's go back to our other projects and she will also do so we have interior. So the anti-rejection. So let's copy and paste that, which you just enrich. And little blue box the other now, okay, should listen to. So we have core features and an ordinal, and then we'll be done. Now let's have a look and see how it looks. We'll actually, we have to connect it to our router. Also the styles for the promo, we have to do that we haven't done not. So there's abdomen. And let's have a look if there's any other styles that we have included. Yes. And core features we haven't included that. So let's copy and paste up interior. Nothing. We should be done. Not sure, No, that's good. Two roots. And let's configure this, these new components with their roots so we can navigate to it. So the path. And then we'll go to components home. So we'll need to prefix for the client side. Or the other rules were for admin, these awful client. So the client Oh, we live in have to incline to me. We are we just keep it just normal. So we'll just put it was in home. And then for the component will have to import it and connect it to the right component, which is how we don't use books for now. Azure is we already have the home components and how do they change the name of this machine name? This new there's coolidge. Host me or homepage, the homepage. And machine, your homepage. And she lists important. It's not just read comes router will do that. Okay, perfect. Now we can test it out. On page we have just Russia will obtain 0. The issue is that we have already made a home router where we need to get rid of that because we're using the, we're parsing in all the roofs over to our view JS for it, for the retouched, handled it, and then it would return whatever component machinery. So we'll just have to think is with the other one. We have to be always using admin slash any, so we have to now use it for the front. And the other one is only made for the for the logged in Administrators. Now, this is for anyone, for any integration was futures for the clients basically After the same thing, but we just need to Genie the root name which is any. Okay, Now let's just try out. Perfect also goes for the public image. We need to change a lot with other image. So we need to find it. So what are these worms, others. So let's remove that defaults to public school district and the public. We substitute your assets and then slash. Okay. Now let's refresh that. And beautiful. She works just like we did in the last project. Now we can basically use this. We just need to set up the up and up Navigator so it can be linked with the our roots. And then we can see the products, can see the categories. And we can have a fully functioning website. 28. 19 Configuring things in web php file: So another thing that we add to allow components with multiple slashes to work, we need to do where any can be, Connect, can reoccur many times. So this is important too. I don't know you, I, so we want to put the authentication roots above the above these twos. This is so that we can access the aquifer. If we were to go to slash login, it wouldn't work because it's like a regular expression. And I would take anything the return. So you want to have like one to put these in front of these two. So that way, these ones are an exception of where to search. It would work. Also, you would want to prefix this reserves. So the register login want you to reach them with admin. So it would be admin slash register, administration organism. And then we will put the roots inside this group. Now everything's good. 29. 20 Designing the Login component: Okay guys, do now we need to make a login form specifically for sanctorum. So now let's make a folder called auth. And said I was screens. And inside that folder, Let's make a new components could login. And now let's set up the scaffolding inside this component. And now we need to set up the template for this component. So we need to wrap everything in a div. So we'll have a div elements and we'll give it a style of max height to do pH for class. And we'll give a max height of a 100 vh. The overflow needs to be hidden. Okay? So now we need to make an image, whichever image, and we'll give it a height and a 100 vw. And for the source, we'll do that later. We also need a V chord and will give the class 02 to modulator and elevation of five. Took center and j phi. And then we'll give you also a max width of 350. And for the style we're going to mix with and location for the cell, we're going to have a wooden radius of 20 pixels. And for the position, we're going to make it relative. And we're going to kids, we're going to put it up by choose. Okay? So now let's have a V chord subtitles and close title, black text and P1. And then we'll have, well, we'll just go and login now. And then we're going to need another mucosal title. We'll give it a pi1. And then we're going to put the content Leto just going to put the elements first, regex field so the user can either his username. And then we're going to have to hide details for the possible. There's actually sorry, no. We just had you chose colors red and label is username. Make it black actually, no. So it fits in Laozi. And we're going to have another one. We're going to make it color block. They will pause words and type is password. And we're going to have record actions. In America. Black button here so we can submit the form. I'm actually looking going to make the people to make it black. So when did you color black? I'm gonna do make around it and we're going to use doc unblock. Okay guys and others itself, the flogging so we can connect it to our router. So let's go and let's go to our roots up and make a new path for our login screen. So just impart on them. So login, I have to link the component with the spot. So we're just going to draw a component that we made. We're going to import this login components so we can actually use it inside our roots. Okay, now let's go to the Chrome. Let's see how it looks. Beautiful. We just need to set up the image which you choose your image and type that black roast others get that image. So just this one. Unless uses imagery, crop it. So we can use campuses and our project. Now let's put it inside assets, and then we can use it inside our application. All right, so let's see how it looks now. Okay, perfect. Now we can start implementing or maybe okay, we'll just put the login form that up a bit higher. So we'll just change it to a 100 pixels. And that is perfect. Okay, guys said our theme is black, but I think it would look better if we change this section to white. So the strange and new twice, yeah, it looks okay, So just change the background color to white and will give the hedge of a 100 vh. And then let's refresh. Okay, it looks much better. Okay, Now we can remove this app, this app navigation when needed, because just to login form. So let's do that now. 30. 21 Setting up laravel sanctum ans submitting the login form: So we also need to check if the user's authentication because this app navigator is for authenticated users and the menu advocacy screen is only available for authenticated users. So now let's use sanction to check if these authentication, if he is, then otherwise we don't. Okay, So an obligation only sanctum to secure the application. So let's go to the sanctum documentation, and thus it's still cited music composer. Now let's migrate and tables. Now let's add some trim to the API in Canada, PHP. So the sanction middleware is added to api dot PHP and also to our API, to ours were killed or PHP important is cross Val. Now let's use the API tokens from sanctum And for our user want to do and add the API tokens from junction to the user. Now let's implement this central medulla and shed our API, the PHP roots. So a change here from API to sanctum. Who's now a using good depending on sanctum for authentication. Okay, so now let's add this inside the bootstrap.css. So now whenever we use Acks, yes, it will include the credentials and all. Make sure that we're using what education with our groups. Okay, so now we need to add a few variables inside our EMV. So we need to add session lifetime, making a 120 all capitals. And for the session domain is going to be local host. And now any sanctum stateful domains. And that will be localhost on port 80,001. And Susan drywall edge. It will use your dependent variable. Also make sure that the local authorities and the portal it doesn't. I wanted make sure you're using the same port that your 71. And for decision secure key will make it false. And now we need to do Memcached host that's already included. This just engraver. There's cookie. And we should be done with AND variables. Okay, so now let's go to the course dot PHP, which are good in its configuration file. And we need to change support credentials, which you was fortunate to make it cheap. And for that purpose, we need to add sanction, CSRF, Kentucky, Golden login. And we need to add a logo. And we should be good to go for the coastal PHP. Now we need to go back to login dot view. And now you can implement our state. So we can connect the username and password for the login, for the login form. And we can connect it to our state. So then when we submitted, we can get it directly from states. And we need to also advise name. And that will be secular browser. Okay, Now this, so let's add this inside the form. So we'll have. An object. And so I would say it would form an all, have all of this inside the form perfect. But for one dictionary, now let's implement this. Each of the elements connected to the stitching ViewModel. So now that e-mail, whatever the user types shared it already set the stage and same with the password. And now let's add a function that tool submit the login form using added inside the methods section or one, and we'll call this function handle login. So whenever the user clicks on the login button, it would call the handle login function, and then we wouldn't be logging in. Okay, so now let's implement this handle logging function. So we just need to copy and paste this from the we're just going to be depending on the sanctum quickly for SBA authentication. And we'll just we'll make a post request. And we need to we need to include the username and password, the email and password as a form. So this is the part that was good you in order to push this login form. And so this is going to be the local host port administer slogan. And then we're going to be something before. So the object is going to be doing digital form. So make sure to add this when you're referring to the state of this object of this comparator. And then we'll go to be tricking other response. So should we be getting back a response? Then once we've logged in, we want to check that we are actually authorized budget by getting the user hasn't been authorized. So we just get the call acts yours gets to api slash user, and this will give us the user has been authenticated. Okay, so now let's implement this. It's good to open up PHP and let's implement the login root. So we need to add the login controller class dies who pulled the function and we'll use the login function. So we need to implement the login function is I look at Motorola and it will be a post request. Same thing with the logo. So let's use looking at roller inside our PHP class. So for the login function that we have, an ampulla is actually already implemented inside don't control. So larval has a pre built-in. Okay. So now let's just make sure everything is working as it should be. Inspect Elements and the console. And let's check the network server so we can see the responsible getting by trying to get the user. So as you can see, we have a user and we have successfully authenticated the user, and we are receiving the authenticated user. Okay guys, so now we need to check the user has actually been obligated by checking Iraqis ID or a name. And then we can actually authenticated and we can navigate him over to the norm against the overthrew the categories page, and then we can give him the correct number. So let's just check the response status of this user is bigger than, smaller than like between 200 and 300. And also let's check the browser to see what properties we have. These are the auxin. Let's login. So we have an e-mail ID. So let's just check that he has is a signal that the uses email the same when they entered, which is the one that is the state to make sure that the user has actually been received from the cell. So we just need to check. This e-mail uses email that we have received from the server is the same one that has entered in order to authenticate sofa is then we'll never get him over to this, the emotional response Q Sharp to email. And then we'll use this dot utah dot push. And we'll go to the categories page. Administer each category. Okay. So okay guys, so we had this small arrow over here. We should have changed to respond to data should be like that. And for the form, we have a form object. So when we're connecting the ViewModel should be formed or emo and form dot phosphate. So now we can try it and we can login. We can go to the Network tab and we can see if we have received the USA and indeed we have received the user. So that means the user has been authenticated and is giving us the actual user object. So now one, when the user is, now we just need to check, as you can see, we've done it had this dual form to email. If it's equal to respond to the email which is from the user that we have received. We basically check. If we go back to the code, we can see that the response from two hundred and three hundred and making sure that the response is actual, is actually successful. And then we check if the returned user, his mouth is the same as the image that we've entered. Then we can navigate over to categories. So we can now try it. Let's try out. And perfect we are, we are going to category speech. Now we need to do the logout button. 31. 22 Implementing the logout button: Okay guys, so now we're going to be implementing the logout button. So let's go, let's go over to the our navigator so we can look up button so the user can look out whenever you want. And to this other button using reached five. And we will, we'll use X2 and we will use a fab floating action button. And it will make it dark and will make the size medium. And we'll make the color red. And why the icon inside it? Font Awesome icon. We need to go to Fort Awesome icons and we need to go no-go button. And in this case we will use the sign out button. So and the icon will have the sinusoids. And we need to import this one was an icon. So we need to, so we'll have for the cell will have font size is 25 pixels. And we will go to app.js. We will add the m, the specific icon want to add and added to our library so we can use it alongside our application side, our application, and we can press the button. Now all we need to also implement the onClick function. So we need to go to the button, implement on-click function. And then we need to write the function inside the method section of the components. You can implement this right here. And just like we did for the login actions that gets, and we will we will call the legato, which is the domain and slash login, domain slash login admin cluster grocery. And then we want to check the response. The response is between 200 and 300, cities of edges between 200 and 300. Then we can go ahead and navigate back to the login screen because we have been looked up to then get rid of the push. And then we can name the root of the login screen on Login. And we need to give it a name. We're calling it by its name or by a spot. So that should be good to allow less this two out, make sure it's working as it should be. So if we press the log button and it takes us back to looking perfect. 32. 23 Switching the AppNavigator based on authentication: Okay, so for the upper navigator, for the client one, we want to change the name from navigator to climb Navigator so we don't get mixed up. And it will be much more clear. And same thing for the admin, admin Navigator. So we can easily differentiate between the two. We need to link them with the index. So we need to employ admin navigator and climate veto. So you know, there's other withdrawn the components to advertise. These are the components section. So let's implement the street for this component. So we can declare a property, which we'll do in a second. So understate, we need to have authenticate. The user has been authenticated. If he has, we know that to get him the admin navigator. If he hasn't done within the kind of a ghetto. So we need to, we need to check choosing axis. If we have a user authenticated, we have a session. If we do, then we set authenticated tissue and then we can return the admin navigate answer of the candidate. Otherwise we return the candidate ghetto. So now let's do that inside the method section. So we had a small arrow over here because when we added the function automatically imported this, the IDE osmotically inventory. So we need to remove that. Just make sure that if that happens to use OK. And now we need to implement the methods. So we need to have a good check user authenticated or check authentication or loss generality, we'll click object and we're going to be using to try and get the user. So we need to get the prefix URL. And we need to check if the response status is 200, between 200 and 300. And we also need to check the response has a user. So we first need to check if the series is between 200 and 300. That means he has that means is actually authenticated, division authenticated, and is an authorized to get the user, then it would return for one. So in this case, he's authenticated and we need to set the state to authenticate it is true. So currently is set as false. And the state, we just need to change that shoe. And based on the authenticated poverty in the component's state, if the authenticated is true, we want to return that the admin Navigator. If the authenticated is false, we want to return the client Navigator. So using EVF, so VF authenticated, and then we should be 80. And then we can do the F, not authenticated. And we showed the kindness. So we all, we can do know this because this else's for this VF and they wouldn't there's going to be an issue. So we'll just do okay, We'll just keep him. We also see this, let's test if this is working. I think it's much more clever. Yeah, perfect. Now we are showing the correct navigator based on of these is authenticated or not. You're going to use to fix up some of our functionality for the navigation bar, we need some sorts of, firstly, we implemented the wrong suny to refine it and make it implemented properly. So first of all, we need some sorts of middleware to check that we are actually authenticated. And we need a global state management or like a system where we can notify other components of the medulla to actually work. So what we need to do, use them both, but mostly just like scanner, like UX, but it's much more lightweight and it's quite simpler because we don't need those with an interest to the entire view x just for a champagne check, just person who notification machine. So we're going to be using a verbose. Now, with emboss, you can event, you can emits events globally. You don't have to, you're not restriction, restriction to parents and children components. So we can still watch right now, we just need to make a new file. We'll call it event bus. Yes. And actually this is the capital that was and now we want to import view from view. And we're going to make an event bus object. Using is just basically going to be a new view controller. And we're going to be exporting it as a default export. Now let's go over to the machine. So let's go over to the index. And now let's listen for any auth check events that may occur. So like whenever we look out or one of the UI login, we want to cool the auth check. So that's the index components. This will check if we are actually authenticated and it will give us the correct navigation bar. So if we are authenticated, it will give us the authentication authenticated bar, which is for admin users. And it has all the screens that the admin would need. And we're not authenticated, then it will give it for a normal result, will be a client's navigation bar for a normal user. So, so now using Event Bus, we want to check for all check events. So if we cool off, check for any other component, this function would actually be executed and we will check the authentication and we will return the correct navigation bar and accordance to the user is authenticated. So let's go to the mounted method and this. So let's make reference to this, to this component. So we'll move our self, this in a variable called self. This is true that we can access this function. We can access these components from inside the event was from inside the events that occurred. Now we'll use Event Bus automatically important, so impulse dot. Okay, so let's import event bus from where we have a rhombus, same directory. And then we're going to be using it. So we'll just do event bus goes on and the event thing, which is all check. And then we're going to be having a function, an anonymous function. And this function would have a payload inside as well. In this case, we're not going to be Muslin appeared about just implemented inside the function, does its work expects, and then we're just going to be self.age object. So it will just check the school the object function that we have declared. Okay, so now we just need to check function. We need to catch any errors that may occur when we use axioms. Shall we are going to be implementing the catch after the axial dot gets. So we're going to be shipping any errors that may occur as a result of the user knows being authenticated occurs. We'll just set authenticated equals 4. If the user is authenticated, we wouldn't have any errors from axis. Okay? So now that's pretty much implemented. This event has actually been implemented. Now we just need to call this event and admin navigator and also in login. So when the user logs out because we have a logout button and other Navigator. So let's implement it over here. So we just need to we need to do both of those. So we need to import my boss first of all. So it automatically import into forest. Did this oxygen. Now we can just do Event Bus dot image and the name of the event which is object. So now when this, when this event is emitted from this component, when we press the button, then the index will receive this event and it will be notified. And it will then cooled the object function and the old check who act as a middleware in order to check if the user is authenticated and then it will give the user the correct navigation bar. Okay, so now we need to do same thing inside the login view. So let's go over to the login dot view components. And we just need to do the same thing again. If emboss Docker image or check. And we have automatically imported it, we can import our source, but the ID has important if your boss for us. So now let's check it if everything is working. So let's look out using this button and perfectly we have given you are given the correct navigation bar. And let's login. When we login, we should get the admin administrator navigation bar. There you go. Perfect. 33. 24 Setting a relationship between the products and categories: Also there's a few errors. If we're going to console.log, we can leave them like they don't disturb the virtue of them. So let's move this up. Quizzes no longer pretty much the applications. So we need to remove the flood flow and we button and we can refresh. And now the error is gone. So I should be. So now we need to make this image clickable. So it will take us to other homepage when we take it. So let's disrupt. Let's drop the image with the sharp image with the rubric. And that should make it clickable and energy take us to the home. And now it's just perfect. To now we have our education done using sank two. Now, we need to check. We need to let the user add products to a specific attribute. You can add products, any kind of categories. But we need to set the relationship between categories of products so that we can see the products are belongs to a category and we can add products to a specific category. So let's do that now we need to set a relationship. We can do that using the model we need first, we need to have a category ID for the products so that we can associate a product to a category. So you need to make a new migration. So we need to make a migration. And the description of the migration is going to be as product category ID because we're adding a new column called category ID to the products table. And we also need to specify the table which is products. So, so it knows what table is making the migration for. So if we go to the migration stream now, add product category ID. Now we can specify the new column which is Category ID. And it should be an integer ID. And which each present the ID column name. And for the migration down with colon cancer gravity. We're mistaken. Oh, sorry. Second. And that should be good. So now we'll just do PHP artisan migrate in order to apply this current migration that we have made. And now we need to go to the product's user products or the products model so that we can add the relationship between the products and categories. So we just need to do we just need to do prologue function category and this product longitude category basically. So you need to specify the relationship which is this belongs to. This belongs to products, belongs to a category. So we're using. So when products, products belongs to a catch-up, so we should cuz function calcium category because that's the relationship name. And we should also mention the model, but this belongs, which is ab slash category. And the thing that links to the category is the category ID. So the category ID will be the foreign key of the app such category. And we need to do same thing for category. What do we need to specify the relationship of how the product is related to category? So the category has many products, because a category can have many products. You can have 0 to many products. So we need to again, we need to specify the relationship type it has many. And the model that slink 2, which is up slash products. And the, the idea that next. So what things products, your category, the category IDs in product links, links Austria, the modal's ID. So this category ID of the modal or the product model will be the same as this categories ID. And then we can link the products with the category. Okay, should I, should be good. And now their relationships has been said. And now we can go and add a category field. So these only wants to other products you can select the category is belongs to, and then that's category will be added to the three dots. Products will be added to that category. And we can view the products by the category and see each categories products. 34. 25 Adding products to a specific category and setting a base u: For the products, Let's go to the products. Are products screen. Now, we have missed an element style is important. We need to connect our products to a category. So we need a select drop-down list. So the user can select the correct Casie, agree that the product longitude. So we have already defined the relationship between the category and products, and we have the category ID column for the product scenarios we reach y. And let's find a nice drop-down elements so we can use it inside our product stream. This one looks nice. This one is simple. I think we should go for the, for this one. Who's each other, they should match our black and white. Pursue. So let's copy this one where it is inside the code. And let's compute. So let's go to our product screen, which is your admin production and add product. We also need to add this. So the production zone. Let's see how that looks before we implemented properly. Okay? Yeah. So we need to use some deterministic, give you some options so the user can select the correct category. So now we need to get the categories from the database. So you need to make a new route that will return us to the categories. And then for each category we will display an option. The second, select the right option, like algebra. So now let's go to api dot PHP. And as you can see, we have this roots that will get us all the categories from the database. So we don't need to implement anything. You can just reuse this for this purpose. So we just need to call the roots. And then we can basically add this at the data for the categories now States. And this will be connected inside the Visual x. So now we just need to use anxious to Bologna cheese axis as Cassius first of all state. And then we can use to get the categories data from the back end and we'll set it inside the categories property in the state. So let's do that. So just make a new function inside the method section. And we'll call it getCategories. And then we will use axial load gets. You will communicate this link and we'll just change it to categories, products. So now APIC is continuous, it doesn't remain. Then we will listen for a response. And if the response status between 200 and 300, then we have successfully received the categories from the backend. And we can safely inside our states. This is how we are actually, how we are actually returning it inside the cache controller. So let's go to the category Controller, and let's go to the index. We are returning it as conjugation inside response to this, the category that law should be correct. So now let's test it out and see if we are actually. So when we mount that, we need to call this function. So that's we are actually getting the Catholic religion when the component is not. So right over here, if we click on the category field, we can see that we only have objects. So this is because we're not formatting the data properly formatted and then sets it and state. That's where you can find the name of the each category and displayed inside the, inside the options of the selected drop-down. So we just need to do, need to map around. So we need to make a new variable called category array. And I'm making blank array. And then we're going to muck around the categories that we have received, received from the database. So responsible data categories, no map. And for each category will have received, we're going to be pushing it and size category array and this format. So we're going to do category the push, and we're going to have a JSON object. And inside. So we're going to be pushing a user objects for each category. So we're going to be getting the name and the ID. So firstly, the category name, surname is the category name. And then we're going to get the idea which is catch you the ID. Now let's go back to the village. And let's say the specify the item text, which is the name. So it will get the name from the object, from the category of objects, and it will display it for each select. So Connections is not as fresh range. The issues, the issue, oh, we're not sitting the category array and stage, so we just need to add end. We just need to do this category, category, sorry, is equal to query. That's why after we format the data, we have to set it as back-end stage. So now we're kids. We refresh every magazine or the categories. Okay, so now let's add a few products to. Actually, before we do that, let's go to the controller. And let's actually just go to product controller. And now we need to, which is to the actual category. So basically we need to get the category ID of the user selected. So we need to append it in the form. So whenever we add the products, so integral to add products components first of all, so let's go to component, and then let's go to specifically found in the products folder. And then for the category, when it should get the category that the user has selected. And we need to append it inside the form. So always submit it and we receive the request and the database. We can get the category ID for the products and adults inside it's inside the product model. So let's go ahead and do that now. So let's append it to the form. So we have the name, we have the price description. And finally, we need to add a category ID. So we're just going to put a category and we need to get it now. So this category, so we're getting it from states. And now we should be posting in the category and we can receive it from the back-end. So let's do that now. So product category ID equal to request. Another thing that we have missed out inside our V select. We also need to pass in the prop good return object. Make sure you add that in as well. So with learnable, whenever using post requests, you have to have a CSRF token. Thing is we're using glucose, so we have to use the local host exactly how we disperse right now. Instead of module 7, collegial consumer, otherwise, it will say mismatch because the URL or not matching. So initially, we were doing a really simple projects and mind. The sample project manager we were just using, we were hardwiring the world using anxious. But since this is getting out of hand and we were having a lot of URLs and lots of roots. We're going to be having a prefix URL as a base URL. So just like we did with credentials, want to go to us and we want to define a base URL to us. We don't have to keep including it again and again. So we're just going to, actually, I'm going to do actually the default service URL. And we're going to be copying, pasting this. And we're just going to give you, now we're going to be searching for this URL over here. And then we're going to be replacing it. We would be removing it. So we search over and then we're going to be using this replace. Okay, so no ab.js. So we're going to be changing it for all of the, every time we've used it, we're going to move it. So that way we just use api slash the root name. This is my semester now we can just change it from one place and all the URLs will be changed, especially when we want to deploy this application online. We don't have a URL, so then we would have to come and change each one, which is wrong. But we had something simple mind, but now it's getting bigger. And the Project 6 is expanding. Expanding too. We should do it properly. So make sure to do all of the roots and 16 properly. Okay, so now we have replaced all of the localhost roots. Now we need to search for one to seven polypropylene group one because we have used them and some of the Rashidun is 0. So we should be good to go now, we've done everything. Okay, so now let's go back to our, let's go back to our ad products. And this trend and a product. And then around the image submitted, it's perfect. The product is being added now with the category. And we can also display a category and the category name of the head. If you want, you should just go over to the add product, sorry, index, products, index. So products to view. Okay guys, so we've done the Add Category ID to the products. When we're adding products now we need to do this rich adults inside the edit products. So let's go to the edit screen. And we need to add the category ID elements. So we need to get the visual edge from our ad products components. So we're just gonna compute this, this. So this is a visual x-component and it's connected to a categories, the categories list. So we need to get the categories from the database again and puts a server to the VC lead. To these, you can select the category that Siemens the products to be attitude. So let's add category array inside our state and that category, or it will be connected to this V select. Now we have just added and we add another category field and state management, which we just added right now. It's when the user selects a specific category, then that's the category that we would be sending over to the database. So we can update the product with that category. So now let's go ahead and implement an axial. So let's make a new function could get category so we can get the cancellation of the database and such. It's inside our states so the user can select the production want. So, sorry. So you can select the category that you want. Getcategories and we'll be using z OS, forgets the categories from database. So there it is APIs which categories. And then we're going to be which we're going to wait for a response. And we're going to check that response. So the status of it is between 200 and 300. Now, we are going to be setting the stage with the categories that we have received from the literature. This dots categories. So no, actually we're going to be, you go back to our ad products. Company, takes minutes you for much anyway, whether we select will be, will adapt to it. So the categories arrays, which can work with the fish lecture. Okay, so now this writes it inside our product components. So first you are going to store the categories that we have received from the response inside side and Category3 to know first we're going to make a category array, and then we're going to loop over the categories that we received from the wrist. So we can find them and respond to it into categories. And we're going to map over them. And we're going to get the category each time we loop. And we are going to be pushing an element inside our category, and it's going to be adjacent elements. And these elements is going to be structured. It's going to have a name and the ID. And that's going to be catchy name and then catch IT. And the normal way we formatted this array, we're going to be such a set of categories property inside our state with this array. And now the user can select the category he wants. And we can add the products to the database. We can obliterate it that way. Now we need to send over this product that we have edited. When we submitted, we need we just need to add the phone data. So that's also add in the category ID as part of the updated category. So now we need to show the user the current category for that product. So when he kicks on the edits products, the category elements will have an initial value of the current selected category glass products. So what we need to do, we need to get that from the database. So when we get the products probably database, we need to include the category with it. So let's budget product controller. And we need to include the relationship for the product. So what do you product all we need to also write with and will include category. And we will, when we include the category relationships, we have to, we have to use gets to get the products. Or we can do first, first would be better. Because it's a tool actually no good because we're using arrays. Okay? So now we will go to other products and we will set the initial value of the V select using the category that's already selected. Okay, so we need to modify the relationships because we have a link them to the correct class. We have an entrance to their correct path. So since this is Level 8, we have to do ab slash models slash category. And then same thing with the app slash slash products. So make sure you add these fixes. So now that we have fixed relationship, Let's also returns. And we also need to do the same thing for categories. So now the village needs to be connected to the category, which is you have to use the modal category and then that wherever the value is in the category property in state, it will automatically take us on users. So we also need to initialize the category from achieve this product category. And that should initialize the current category that the product has been subtree. And now let's try out to see if everything's working. So editing a product. And if we click on this, as you can see, we have already selected the category and issues. So here we're changing now. Now I need to work on submitting the form. So let's let's also append the foam beads up with the category ID, the new, newly selected category ID. So we need to go to, just like we've done in ad products. We use category ID from data to append category ID. And we're using this catching the user, the user selection, which is the category, the ID. So include that again. And that should be good to go. Nans now need to also updates the updates function and product controller. So let's go to Prototype Control up and then just go to the update function. Now we need to get the category ID and also searches inside their record. So we need to update the product category ID, which we've already established that uninstall I'm going to do inside a bridge. Id, category ID, sorry, product category ID is equal to request. Catching me. And now let's go ahead and test it. So this check if everything is working properly. Perfect. So let's check that is a base. As you can see. So we have products and we can change the category ID just by changing the category in the visual edge. So now, Okay, one thing we also need to do is have the category name inside the table for the products. So you can see the category that links to without having to edit it. So, yeah, so let's go to the products, that view, which is the assurance of the products. And then there's another table header. And this could catch a grenade. And then let's add the elements for table data. So just going to be product category name. And now let's see if the is working. Okay, perfect. 35. 26 Designing the shop component: Okay, so notice me one, we're going to be doing the shop, Michelle components. So let's make a folder called shop and tried clients. So new folder called shop. And inside that folder, we're going to have so for now does have just a shop components who chopped off. And we're going to scaffold into it. And now let's go to the root so we can add the sharp inside our roots. So the policy is going to be xi. So this should show store, okay? And the components, we're just going to show up here. And the components is going to be the shop. You have to import the shop components that will tell us Sharif with a and we need to add it inside. So the partner is going to be flesh out the components, the component that we have just imported. And then the name of it is sharp. So now it's good to plan navigators or we can navigate to it. So the shock button, we need to have a click function. And when the user clicks on this button, you should navigate us to the shop screen. So usually it can make an arrow function and use this dot. Roots are push. And we're going to give it a name, which is short. And I should be subcomponents. So if we click on show up right now is taking us to the shop component. We have an empty component there. If you just scaffolded she knowledge more connected components and share. Start designing is OK, So now let's start off with the template for the shop. So firstly, we're just going to have a div that will wrap around everything. And then we're going to have a VQ arousal. And we're going to pass in height delimiters. And inside it we're going to have Ricardo item 2 and item for the week arousal. And we're going to figure out the source is going to basically hold an image and we'll figure out the image hreflang for it later inside the browser watching who can have a bureau. Now, for the Bureau, we're going to give it its full height for that loss. And we are going to align it chunked up and justify shunt ASU and I mentioned sizes will be shunted automatically. Inside the Bureau. We're going to have another div. And we're gonna give it display to white text. Padding left five by five. And then we're going to give it, we're going to make it hidden for supervisors. And then we're going to have some, like we're going have some text over here. Would think we'll figure it out later. She's going to be some promotional texts for each category. Now we're going to have a break line after them too. We can, at the end of the div, we're going to have a break line. Then we're going to stop making movies. Arousal item is you're going to copy and paste it because you're going to be pretty much same thing, just like I explained. So then we're going to this ULs. So we're just going to make three items for the beaker of them is obscurity on which one we're just going to free for our template. And then we're going to have a div off to the crowd. Who items? You're going to have a div and it's going to have padding, left full padding, grateful. And we're gonna make a row. And then inside there we're gonna have, we're gonna give it a column, md 6. So hello, I'm 26 and then was more devices we're going to have also six, so call us six. So it's going to take up six slots for the extra small grant, you 12 for us. Now, if we're going to have a V, God designed it. And inside that we're probably going to have the image. And the image. We're going to need to do the props for it. So we're going to have a source which we'll figure out later on. The class is going to be white text. Align, center. We're going to have a gradient. So for the gradient It's going good. Cue bottom. We have two species accessories. Just fix that. And we're gonna give it RGBA. Rgb Alpha is going to give it your erasure and set the opacity to 0.1.1. Who set the opacity to your 0.1. And then we're going to have the other color is same as the English is going to be a higher efficiency, which is 0.5. Now for this one, we're going to give it a height of 400 pixels. So then let's plus 1. Awesome. Okay, she's going to have a page, one of them. So listen to the text as it is, geometric center with font-size. And then we're going to have like who think we'll figure out what we're going to just list. Just have like products. So what I've taught products. So products. And then we're going to have a div inside it. So we're going to have a Watson under this law will take us to the flower shop or ticket like a specific product. Now through this, have a div center it just like we've done. And then I was undecided. So we're going to make it the issue flutter. We're just going to give you a way to text and make it outlines his 0 using the outline prompt and decide that we want. Then we're going to have like by now. So we just have learning pronounces no empty, we'll just turn my phone off or not. Okay, so then we're going to just make another div. We're going to have the machine. So this one, we know that the blue give it a column, was pretty much going to be the same kind of pieces one. So this is basically going to be like a slider. Dds are very much in America. So the sludge thing. Okay, then we're gonna go in the shadows. So we're going to have another div below. This div is going to be padding-left for. And once it can give me telling her for pentagram for and I was going to be a row. And inside is going to be another slider. So we're just going to copy and paste the one from the top to grow the customizations reason. And then let's have a container after it. So what are some of the content authors and others did this container. And inside that we continue to add some other without the gutters. So we're going to pass a new courses. And then we're gonna give it to recall 12. So we'll have a column inside that row. I'm just going to take up 12 columns. And then we're going to have a V chord text. So we're going to have a child with me to tell prop. And we're gonna make it outlined inside it. We're going to have the current title. And we're going to give it a class on heading. And for this one is going to be like our best deals. For example, this is going to have the skills section. We're going to have like a divide the under it. So we can put the dues on the orange. Then we're going to have a row. So we're going to have a column again. I'm going to give a whole 12. For medium devices, we're going to have a colon D3. And then for the smaller devices, we're going to have cool, awesome six. And for extra small devices or math courses. And also the, of this. And then I'm sorry, you're going to have you hope will. Now also going to give it some open delayed you a 120 acute you foresee. Okay. Then we're going to be called elevation is going to be this give me 16 innervation. And then we're going to have an image clause is going to be what tics. And we're going to align all the way to the end. Let's give it a height of 100 pixels. For the source. We would do that. I don't like shrews. Then we're going to record and we're going to see we're going to have like Tea judge, modify it later. Then we're going to have the core text. So through them is you're going to have a text element. We're going to make text primary color. And we're going to center on the side that was going to, we're going to have a movie like will destroy, something like discounts or 60 percent of blue also going to have another div. So we're going to write, for example, by now or like, don't miss out on office. And then after that we're going to have another div and we're going to center it. And then we're going to have a button inside of that div for the Hadrian. We'll leave that for now. We're close. We're going to have margin M82 modulator issue. And we're gonna make outlined. And we're going to give the color info. And so there wasn't going to be like just how Blackstone. Okay, so another thing that I forgot to mention, we're also going to have the homework, the homework problem. So we're going to use abuse laws and post-secondary think I'm showing how v slots and default is equal to our boss. We get the hover state from the vehicle. So this being opened or not being covered week, we can tell by this prompt. And so for the V chord, we're going to the elevational changes when the user hovers over the week, God is going to be like as groups to come up more. So it's going to be elevated more and elevation will be increased. One of the orchestra, so it will come to him. So the hobos, we're going to give me 16 elevation. And if he's not opened on it, then it's going to be two elevations. So that will give it like hovering effect. So also we each other a semicolon because this is a dynamic property. So a colon. And then now we have x0. So we're going to explore button. So after the explosion, this, let's have another div now. We're just going to copy this alone is premised shaming. We're going to have another element that you can offer over. So let's go to the entire VM robot and copy and paste to. Good thing that we fix the homework before we copy the pieces of the way we're going to have to fix era competencies. Okay, so now let's distribute dramatically. Same thing. We're going to complete the Havana who she was. So we're good to go. Okay, So we also are going to accomplish this. If you hover again one more time to fill up there. Let's see how that looks. Okay. Perfect. Unless you other issues we have. So this one we're going to have another two products section. So you have to read or more. Now. So for this element over here, we're going to have to confess that two more times because it takes up MP4. So we have talked close in Bootstrap, so forth. Watch both hope. So. Just copy and paste it two more times. Okay, Let's refresh. Perfect. Okay. So for the shop in the beginning, we're going to have, we're going to have a crowd over here. So we suddenly reduced to fill this council. So let's go to Google and search for some cool Tesla images that we can add. So let's search for it is the urge to first, and we're going to do a modal x. Let's have a look at the images. Okay, so There she is, one of the cocoa or like the college. Whether resolution on that good service, good for the show on this one, the XIV the owns. The resolution's too, but this one has good resolution, yellow, opaque, this one. And for the record store or civil look. See this one. Okay, this one looks nice. So it is done with the aminoacyl. Well, as these images. I think this one looks good. Yeah, we'll pick this one. So now I'll just copy the image reduces and put them in the source for the Waikato items. So the background will be the image. Now let's refresh to see how it looks beautiful. So now let's go ahead and do the other components. So for the top products. So we have a block. We want to remove this black background so the light doesn't go through over the image and with the white background. So let's make it white. Now. Exporter. Okay, so now for these are the items. We need some images for them at all. So let's find some cool images or we can add this. You can read soon as we add some categories. So we can basically fill these tiles output category images, and the user can click on the catchy BNC, the products. So let's log in as an administrator. And let's go to Categories, this other category. So we're going to basically do a category. The SRP is going to be, we're going to show some purchases. So we're going to have a category that we'll have many posters. For example, we're going to have rootstock, says the roots are category. And then when you click on these categories, will show all the posters for acceleration. And then same thing for Tesla Model X, same thing for Tesla Model 3. So do you're going to stop posters. Give you order one. Now let's find the image of a cool Tesla Roadster. The actual observed and see what they have there. Yeah, that looks like a beautiful image is taken. Actually, this is good to Google Images and take the images from there. They're probably going to have the same ones from two lobes. Ok. So I think that was actually one that was on the website. Yeah. Let's just take this one. Well, let's take this one because I think he really does for the website. Yeah, this one looks nice. Screwed on. This one. This is address images and see where it's in downloads. And usually it's a drag and drop. It didn't crash. Just flips it submitted. And now we're going to add some more products or more categories. So just know what works. Okay, Let's use issues. This one, this one looks nice as the resolution is good. It also does x0, x1, x2 yams excluded. Let's just use this one. Now let's add one for Model S and then we'll do break. Yeah, that first one. That one looks nice. We've usually so on. Yeah. Okay. Series one of the resolutions we will take this one. Yeah, this one is just waiting for it to learn. And you can save it. Now we just need to do free. And then we'll do semi-truck as well. So actually able to move 300 auditors with stroke. So let's find another image from 123. We're the oldest. Okay, so, so let's take this one is loaded. Notice if it said our downloads folder, and then this uploaded. And then why did it? Let's try saving it again. Can't be done securely. Okay, this one and along this final one after it. This is okay, this one's good. Okay, so let's save this one. Okay, now let's submitted. Now when you do a more she can do semi-truck. We can do is you want do is find the middle way image. So for the model, we'll use this image. Let's see if it's our download and upload it. Another submits, okay, now we have five. Okay, so for this one, Tesla Model 3, you will need to pursue this as well with it. And we should be good to go. Perfect. Now we can get these categories from the database and we can display them in our shop. So when we go to our shop, we're going to basically loop over what we have from the database for our categories. And each one is going to be shown over here. And you can check out the product spike or check out the posters by clicking, by clicking on the Text tool will have that category name and sort of dot products. And instead of by now, we would like like the posters or something. Okay, So now there's good to, good to shop component. And now let's have a function that will get us. So we need to have a route. We already have a route for our categories and our APIs of HB. Now we just need to get the categories using axiom. So let's make this. Let's do a methods function. So let's do, let's return a status quo, meaning the state, and we need the method section. So this is a demonstration. This also sets up the stakes. German state. Now we're going to have categories and state. It's going to be empty array. And then the methods we're going to be making a function could get categories. So we have the other comb-over. Now we need to use extra cost to get the categories. Categories. And then we're gonna wait for a response. We're going to check the status of the response. This between 200 and 300. And then if it is successful, we will basically said the categories in our state. Now we need to loop over the categories. So we have two types of towels. We'd have one that takes six slots for the columns and we have another one that we have 26 slots and we have 34 slots. So we're going to have to cut up the array. Let's take the first 2 first and then we're going to take the other three after. So let's do that. So now we need to call this getCategories function when the component is mounted. So you just need to use the mountain function and we just call the look that category, this booklet. Now, we need to loop around the categories. So for the first result will be around all three rules are Routledge. So you just need to implement the V4. So v4 prop. We're going to be doing category in categories. Categories slice, slice because we only want from the 0th element, the second element. So that's the only elements that we need. And then we're going to also have to give you a key category, the ID. And now let's see if that works. So there's machine the products to the actual attribute name. And then sort of buy. Now we're going to have you posters or you know, it doesn't have to be posted. You can be productive system ago Free Productions were like, Yeah, we can change its products. So okay, so now we need to do the same thing, but for the image as well. So let's do that. So it's gonna be stuck. So for the path of the image is just going to be categories. We're basically storing all these images into categories for the and our public folder. So like if we were if we copy and paste it, as you can see, we just have a contiguous warden and the image name. We're storing them is name. We just need to prefix it with the category for the so so we're just going to do categories. And then plus the M&A. So slash, and then plus the image name category that image. Let's try the hour. Let's see if it's working. Still go to the shop. And effects is actually working. Now I need to give it a margin top for these two tiles. Let's try and monitor vital issue. Yeah, that looks a little better. Playing foosball. Yeah. Perfect. Now we need to do the other three zones. The other three categories. So the same process again, we're just going to V4. So we need to find where the entire code starts off. So we're going to move these two because we don't need them because we're using iteration loop now, which will return the element more than once. And again, we've vocabulary in categories now this time we're going to slice from the second to the second. We're going to slice from third to the second two. They are from circumcision. And we're gonna give you a key category ID. Now, let's change the top products again to category name. And by now we are going to write byproducts of your production and the image as well. So it's working as it should. We just need to change the image. So there's going to be categories. Kelly's going to prefix it with categories. You're also making the dynamic because it's different for each category. So make sure you put the colon. And then plus the category that image known as XIV, that works beautifully. Herbs, are they looking very nice? So now we need to do our best uses. For this one, we can just get the latest products so we've added. So ever we have the latest 5 production will be shunned or lettuce for products. So it is good to API the PHP and we're going to get the latest products. We're just gonna do a get. And then latest products and is going to use the products controller. So we're going to make corrections and producing sugar. And we're going to cool it status products. To now let's go, let's go over to the product controller so we can implement the latest product function. And so let's implement your overhead. So we're going to get the product and we're going to use a product model, get. And we're going to take five. So we're just going to get generally take five. We're going to order by IDs or by the way, all the way creates that descending. And we're going to take five. Unless we shouldn't need to get on your intake form. Actually, we do. That is you probably just need to take five should be enough. For gonorrhea is done this response. And we're going to return JSON formats and we're going to jump products. So now let's see. Let's just start the root is just that the roots first issue for getting religious products. Apis actually does products perfect and JSON format otherwise. Okay. So now we can go ahead and appears, okay. We need some more products because we only have two. So there's less sleep over this. Our best juice. Well, let's just copy and paste simple Alex, would you didn't listen. Okay, so let's look at some good products. So what we had in mind first was to have a poster categories. But now we're going to actually add products like is not just refers to select all of the categories, two products for each one. So I'm pretty much going to do that. You can do yourself as well. Okay? So now we need to add many products for each category and probably gonna add like for some other thing I'd like for us, for the rest of them could begin. I'd like to make sure you do that yourself as well. I'm going to do this outside recording it. So so now we've just finished adding the production of the categories. Now all categories have some products. So those goods to the homepage shot, the shop page. And other Watson. We have a carousel slider for the latest products. So now we need to get them from the database and display them right over here. So let's go to the shop components and let's do it down to the area where we have this, we have this slider. So we just want to change its latest products. Then. We want to basically want to make a for loop. Just like we, just like the way we've done it for the categories. We want to do it right? A right of a has all we want to delete all the recurring costs that we don't need. And we want to just get the, get one element and then loop around it and return a product for each, for each product from the rest. So now first of all, let's get the actual latex products using will make a function called get these products, which we will call when the component is mounted, just like we did for this group. Categories. So actually gets and then latest. If you asked a status production. Also, we want to order them by update that. So when you define this and, and then the ordering by updated that. So we want to check if the response status is successful, is between 200 and 300. Now we want to so their products, so the production is the array of products. So there's state. Now we just need to initialize it to initialize the products with response to that digital products from the server. And we have to call this function on the component is not added to their function. Now there's good too, if you add a PHP so we can go to the products. So we're using this roots which will take us two products controller on latest product we implemented. The ordering is done by creating that we need to do it, updates it up. So that way we get the latest modified products as well. So now let's see if that works. If we're missing anything else we need to loop around. This has something that we've missed. So now we've got the products. We want to loop around it using V4 products and products. That last slice we weren't slashes when we want five products. So actually no, we don't have the latest products, so we can just we can just have a horizontal list. I'm already taking on in five. There's five products from there, so we don't need to do like what we've done four categories, the servers or your reasoning for our products, our time. And so now that we've done it, using Vivo will happen to have a key for each product. And the key is a product ID. So now for the name, we want to remove this t-shirt thing. We want to have the product name. And so we can assume for that 20, we can remove that. We'll just do price instead of that. And for this one, we can have product category. So we want to include the categories or two because we're on the shop component, we're including the category name. So we want to get the latest products, each product category so we can find the name of the category. And keep that Explore button will do the heat rough just in a minute. Just to see if it's working. We'll click on view product. So if they want, the user wants to see the product details. You says to click on this button and it will take him to the product does your screen. So let's go all the way down. So now it seems to be from the incident ray and I was working. So we just need to add four products because we have extra service, ginger from five to four. And inside products controller. And now if we were done, we have for products. Now we just need to add the images for the products. So it doesn't go back to shop the view. And then for the image source, which is the products, we need to make it dynamic because each product, each product image will be set in here. So there's going to be product when you do a slash as well, products and product dot image. And I wanna see if it's working as it should be. Perfect. Now we're getting the products. So now we need to implement the new products. 36. 27 Designing Product Details Component: Okay, so now we need to implement the product details screen. So let's add a component in sexual, we will call it product that you opened up details of u is equal to product details because we already have products and that's for ad product, or it will be much easier. We have products, so let's just call it product visuals, smoke layer. So we don't get mixed up when we're going through the controllers. Okay, so we've scaffolded it, make sure you scaffolded. And then we too. So we need to add the roots. So we need to connect it to our router. So let's import the tritone and let's define a path for it. We also need to know. And then this other screen of air and the return and show you chose. And we need to connect the components to this route. And you also need to make props too, because we were only to position the product that we're trying to show. So on we navigate to product details and also possibly production. And then for the name we'll just call it product details. So we can navigate to distribute by his name. Okay, let's go back to the product details screen. And so let's go to shop so you can navigate to Berlin and cells when you click on that component. So I'm gonna click on the product. So when we click, we want to use the original push. It's going to be an arrow function. So we're gonna be going to put up details and we need to position the product that we have clicked on. So now we need to pass it into production. We have to include the params property and then PaaS, it's possible that other person. So there's the productions now, this received this approach. Let's receive this product crop. And now we want to religious to test to see if we can actually assume the product. So did you probably. So the issue here is we don't need to reference this cooling water. Okay? So it assume that it's actually working. Let's go down. You put up profit to actually navigating to the viewport and scream. And so the H1 is in black texts, so that's why it's not showing we have a black background box, I can promise you. So let's just make it white. If you guys don't believe me. And we work in the industry issue because we have to click on every vertex again. You have to want it wasn't a product and opposite epilepsy. So now let's develop our product details, components. There's good data in Visual Studio code. So designers design the templates. So we're going to have a div, that's the whole overthink. Then we'll need a container. So it can basically take up the whole space of the screen. And we're going to have a row. And inside that row we're going to have a column. It will take five slots for medium devices, and it will take five slots for small devices and four slots for extra small devices. Then inside it we're going to have the image. This is going to be the product image. We'll give it a height of 500 pixels, meaning style. And the source will do later. Okay? So now we want to make and you often after that, yeah. So often that swapping around the image, we're going to have another div, and it's going to be a column. And a medium devices will take several slots for small devices into seven slots. And for extra small devices is be slots. Now inside it will have another div. And we'll give it a padding of left of six. And inside it we're just going to have a paragraph text. And we will give it a display one and margin-bottom euro. And that's it. So for this paragraph texts we're going to have like lets you know it's going to be product name. And for the sources Norma as well because we're connected, because obviously regroup from props for the source, make it dynamic and do category, sorry, do pull up the image. Lunch. So products are we storing each in a program issue? Now, let's go back to the paragraph. We want to have what we call actions. And we want to show the price of the production side this semester, this course, we're going to give you a sense for the Vico, the actions. We're just going to give you a pH euro. And inside this we will have the price of the products. So we're gonna be using another is going to be another paragraph. And the self-standing would be headline. And we'll give it a fun way like and putting toggle three. So for my lights, padding top three, and we're just going to have the price, so product, the price. Now below that we call actions. We're going to have a spatial sense ideas. So this add some spacing inside this. We can V3. So now after the VA, we've got actually you're going to have a paragraph and this will basically display the description. So the paragraph starting with the subtitle 1. And so what you can, and it will hold the description of the product. Now, we will need to have a Watson underage. And this will be a button to allow the user to add the item 20 caught. So after the paragraph, we're going to be watching the standing of this button is going to be primary white text. And it's going to land. We're going to pass in some props to this huge spike elements. And each of our components is going to be outlined. We're going to use tiling to tile. And then we're gonna give you an icon. Using the icon. Actually we don't need the energy is going to be utricle. Utricle. And then we're going to go down the opposite after this div. So we've, we've pretty much finished with this first div that we have in the container. We're going to have another div now, and we're going to have another row basically. So now let's have another. And we're going to be, so we're going to have a column inside that row. And this column is going to be for small devices. You're going to have slots. For extra small devices, you're going to have 12 slots on medium devices. We will also have both slots. And then say that div, we're going to have the tabs. In our case, we'll just have one type. But if you want to add another tab and customize the products and give it more details in your fridge to be showing you can add another them. But in our case, just have description for the View tab. And then we're going to have a V sub item under age. And instead, imagine, we will display a paragraph. We will have padding top, and we'll add another person tries one, and we will make the font weight. Then. Now we're going to, for this one, we will have the actual description of the production can be a long description forms. Now, we will have the cortex of the, the, the types. So we're done with that. We're going to have the context. And the closest go to Azure and padding top four. And we're going to use tile, probe, and outline prop for this image by components. As I did. So. So inside the vehicle text, we will have a paragraph and subtitle one, font, weight, lights. Padding top three. And we will send to this text. So using collection. And we will enjoy this paragraph is going to be a label for you might be interested in into this products that are meager resources, products or whatever product that might, there might be interested in on the website. So just, we'll just have other products. Now. After that, we want to have a divider. So after the paragraph will divide up and we will add a div on the divider. And wood sugar production of n. So you can, so it can be shown section. So there's going to be a row. And we'll center it usually using Kickstarter. Now inside this div, we will have another div, which is a column. So inside the show we're going to have a colon. And it will take jewish laws only game devices, so-called MDG and call us. And for, for small devices it was a close laws on and troughs does one extra small devices. And also we will send to this corner, click Center. Now inside this div, we will have a view of elements. And we will make it will implement the hovering going. It's using v slots, default hover. And we will have open of 200. So we will get the hover status and open debate you a 100. So we'll make it 240 actually. So now inside this view over, we will have recalled. Now depending on the, on the hover status, will also have innovation of a dissonant depending on obviously, we have overdone. It will make the elevation 16. Otherwise we'll make it you. Now inside this week what? We're going to have a V image. So the VMAs will have a class of white text and it will align all the way to the end. Now for this image, we'll give it a height of 200 pixels. And the source will be only the empty for now and we'll get to that in a minute. Okay, so now after the image, we will have vCloud. And so for the vehicle title, we will have we'll just do product name. And then after the image will have a Vico text. Now for the class for this week, cortex will have Texts primary, and it will also center including text centered. Inside it. We will have a div. For the first one we'll hold the price. And so the product price and the second one will have the products category. So now after the v cortex will have another div center it using tech center. And we'll use the watchin so the user can explore the products. So we'll have the explorer button. So for this question we will have text center and so no margin all to cache it will. And then for the proximal do outlined, and we'll give you a color of info. Ok. And we'll call this Explore button. Or the product would explain. Okay, so we should be good to go with this component. We should be done with it too. Now, let's see how that looks. Let's go to the browser and go to shop less of your products. Okay, Let's see the image you might have an issue. So let's give it a background color of y. Okay, now I need to go back through compulsion that product you pull up. Okay, perfect. So it looks very nice. I would say just for the container will just give us a more modern topics. It's really stops. You go to the navbar. So for the director and around everything will give them what to do if we're good. The shop where sometimes the images don't need. The issue is you have to have the slash before the categories and then what did the same thing for the products law. So if that was to make sure you add the slash right before the show in the source rubber for the categories prefix per slash. So rather than having an under slash for it, and also for the production. And knowledge refresh. Now I should always work as you can see. Okay, so now let's go back to the probe, the cells. So when we click on view product, we want to have this image though. So make sure to do that over there. So I'm probably chose Rabbet for the products will have a slash. And also for the products, we're at the bottom. So if we click on view product, right now, this is looking beautiful. And okay, so before we finish off this set of products and other products section, we want to do a few modifications in the shop. So over here we have four. We want to make your sixties authors consistent, just like in parameters. So let's see that 36. So let's go to copy this from product details and we'll paste it inside. Inside shop w that we only have six items. And let's update this so we're getting the data from the product objects. So product domain price. So for that we need to do V4 again, productive and products. And, and the key ID. So for the product price, and if you pour a little price, and we're going to look at degree domain. And that should be done. You just need to implement the onclick Watson as well. So when the user clicks on the user clicks on the button, Azure, it doesn't do this, but it wasn't. When I came into our function. And we're going to call router dot push. For The Beatles. The Nebuzaradan, maybe by its name or Leto's. And we're going to pass in some parameters. So we will receive the product approach or parallel details screen. So we'll just wasn't products. Now, this go over to image those little misspell things like that. So we're gonna do slash. So first question of products. And then another station with a new product image. Now let's copy them versus good over there. So, but first, before we do that, let's go to API. I should just check if there's any issues. So if you outrun you six because now we're trying to get six production or four. And perfect. So there's good shoe. That product's details. This could be in business or you just don't know as I explained it, so I don't need to I don't need to screen again and again. So over here we're just going to paste it right over here. And now when we go to the product detail screen, we should get the same section. We're going to have methods as well. So we need to get products. This way. We get the data, the database. Before we show it to them. You're going to be x log is api slash latest products. And then we're going to be listening for response, which will have the products, these products. We want to check if that response is successful. Now we want to sit, we need to have states. We need to implement our students. So this uses the data function that will return this. These are the components. And we will set this property, product's property with whatever we get from the latest products. And now let's test this out. When we mounted, when the component is not, and we'll call this function that we have just implemented, which is Gilead is products. And this will initialize our production. Now let's refresh. There you go down, okay, it's working. Now if we go down, perfect. So looking just like we expected to work. Okay? So now we need to implement the utricle almost, we're actually almost done with this project now. So if we go down to this, we also need to do, so. We need to do the category products. So I'm gonna click on attribution is the products. And we just need to do the closed system and we'll see what else we need to do, almost done. Okay, So if we go down to the view product inside our homepage, it will take us to our product details. Now we're in this product is off-screen. If we tried to navigate to another product, as you can see again around console, this is because we're already in productive soils. We're trying to navigate your productivity as again, as you can see where it says navigation duplicated, avoided redundant, redundant navigation to current location. So we need to fix this. Genes from one antigen is the parameters to query. And that should allow us to navigate to the same screen. Now, what we need to do, we have this props. We can remove it because we're depending on the properties from the prompts, from the navigation or not, depending on the component props. And also we use inquiry. And another thing is we need to change. So if we go to the V4 loop that is giving us the product item is the product codes. We need to ginger from production bullet item because the query we're using products. So we're going to have some conflicts. So we want to change it into a product item for each one. So all the ones inside this code, we need to see the reference from crop supervisor. Okay, so first of all guys, we need to add the production States. This is so that before we navigate back to this product is always want to set the product that we just clicked on. And she states, so over here mounted, we want to, this dot product equal to, this is the router we want to get from the query and put it inside our states. That's where we can go from navigation. And the new product that we have clicked on. Now over before we click on, before we navigate to where if he doesn't want to make sure that our product and states is the new one that we have just clicked on. Okay, so we also need to change from parameters to query since we're using the good and the components to this, we're using query announcer of parameters. So let's see the parameterized query. But it's an honest. So as you can see, is taking us to the sticking probability Joe's and from her exhaustion can navigate to the product that we want from the latest products. 37. 28 Designing the Category products component: So now we need to implement this few products in this for the categories of the head. So when the user clicks on the view production to take into the category screen, and then he can see all the products for a specific category. So let's go to the shop folder and this mic category, products just make a couple of good hygiene products and less scaffolded. And now we need to implement the templates. And we need to do, before we do that, let's connect it to our router. So let's give it a path. Let's call it category, product category for lunch. Now we need to give it a component, which is the category of products components, we need to import it. So let's import it and connected screens and client shop Katrina products. We also should give it a name. We haven't given its name and give us problems as well. So you can navigate to it by its name. Now let's go back to their category products and now we can implement the template for it. We're now let's implement this date for this category production. So this implemented data function which returns the state of the components, will leave empty until we get the category that Elisa sends over using the query and site inside the result. So now let's get the category. So you need to make a function could be categories. And we'll do that using Acks. Yes. This is true that we can have categories on the site and the user can change the categories and see your products for a specific category. Then when we get the categories, we need to check this status. So between 200 and 300 to make sure that the battle data has been successfully retrieved from the database. And then we need to set the categories to need the array of categories. And then we can set this area of categories from data that we receive from the, from the database. Okay, now, we need to put 10 mounted on the component is mounted, we've been called the categories. So we can initialize our state with the categories. We also need to get the category that we have received from the roots up and set it inside our category stage so we can see the currently selected category. Okay, now we need to implement the design for the components. Consider products, components. So let's implement the template section. All right guys, so let's go back to our shop. Love you. And for the new products, we need to implement this button so that we can navigate to the category of detail category products. So when the user clicks on this button, we will have a arrow function that we'll call the router. And it will make it navigate over to the category product screen. So we will navigate over to, will have name of the category products. We also need to pass in the query, which is category. So we need to pause to answer. We can receive it on our side and we can set it as the selected category 0. We've already done the v4 for these two. Now we have another, a separate row. So we need to implement what we done for this. We need to have dementia or behaviors of ideally you would have been but to make this into a function and then call the function. So let's actually put this into a function and then call it because we're using it twice. So it's better to keep it dry and dry and make it make the code once and call it from two different places. So let's go ahead into the message section. Unless implements a function, let's call it, navigates to crowdsource, navigate to category, to category screen. And then we'll just paste in. So we have to pass in the category that we clicked on. And then we do the Russo. So copy paste what we've already done. And we'll have to use this now because we are referring to, we are referencing the components rewritten. So now let's go ahead and navigate to category screen from both places you now in the future when we want to change anything they UCI for both of them just by changing workplace. And we need to call the function. And we need to implement this same and excrement the same ads click for the other categories as well. So now let's just make sure everything is working to hugs. So we also need to pass in the category to the function so that we can send it to the category product screen and we can select it as the select is per category. So we can view the products by default for that category. So if we click on it, now it's taking us to the category and is also including the category that we want to select. If we go to recap that your product now, we can implement the design. So they'll give you a one. Let's just make sure that the, the category is being passed the name of the category. So if we click on view, product is working and is giving us any. Alright, so now we need to implement a template for the category products. So let's design it and make it look nice. First of all, we need a div that will wrap around everything. And we need a container. And inside that container, so we need a row and we need a column inside that row. Now for the column, we're gonna give it three slots for small medium devices and small devices, and 12 slots for extra small devices. And this will have occurred inside it, and the code will be outlined. We'll use the outline prop. Now inside the code we're going to have called title, which is categories. And we're going to have a divider. So we can have the cart contents. We will use templates for this. And we'll have a, a router link. So we can link each category. Should the two, this will be basically the a side, a side bar for the category speed. Should the user can click on the category he wants to see the products of. And you can see the products for that specific category. So we need to give this cell for this, make your text decoration none. And inside it will have a paragraph, which is basically that it's going to hold the category name. And for this paragraph we're going to have margin left three and margin top two. And for the style, we're gonna make it forms I was 19 pixels. And then we're going to make a new div box this down the sidewalk. And just make sure that I am in the correct place. Okay? So this new div is going to be another column, and this one is going to be the contents. So we're going to display the production services. We're going to have nine slots for media devices, manage slots for small devices, and then 12 slots for extra small devices. Okay? Then we're going to have a divider. And after that we're going to have a row. And we'll center it. And we're going to have a column inside the Shrew. And we'll give it three slots for medium devices, six slots for small devices, and 12 slots for extra small devices. And we will have to give this a key. So it's going to be afforded. We're going to basically for-loop over products and the Shani is going to, this is going to do the state. So once, once we get the post, we get the products for the category program, everything this is going to be used in designing for now. Then we're going to have a view over. So when the user hovers over production, here it will elevate. So we're going to use a Vico, decide that we hover and will give the, we're going to use these looks. Basically you want to see the whole statistic. The user has hovered over the cold or not. Now we're going to have a VI called inside this with margin is going to be hotter. And we're gonna make it great legend for a mix 02. And you will give it a color. And that color is going to be greater than four. So it's going to be great. I love it. We're gonna make it much later. And the width is going to be 600, max-width E2. So let me assume to what can only be the image of the hub. I mean, after the side that we got. And aspect ratio, you're going to be 16 by 9. But moving the rest of the class was a closet, maybe white text. And we're going to align it all the way to the end. And then we're going to give aspect ratio of 16 by 9 will make the height of 200 pixels. And for the source, we will do that later. Now we need to make a core tight vehicle title and say after the V image. So we'll give it the ogive, the code title, which is product name. And we're going to have the expand transition. So if the user is hovering over it, then we will expand this transition. And we will use a div. And we will use, we will live class of d flux will make the transition first in, first out. So fast when it comes in and phosphorus out. We'll make it white. And we'll talk in a bit because I was too late. And then we will do the code review. And we also introduce towel. So you need to implement this telephones and Css old movie called trivial. We need to have double dash for the review. And we will align items center. We will make the bottom 0. Well, shouldn't really diverse nowhere. And then justify-content center will PCT your 0.8 and make this class absolutely positioned. Absolute positioning it and the width will be a 100 percent. Now we will go back and we'll go back into the center section. Fill. So you've used the record reveal inside it. Now we need to have display three. And we'll make it white For use white text. And then inside that will have the B Watson. Also, we need to give it a style of sort of for the div. With it, we need to give it a style of a 100 percent, a height of 100 percent and staff. Now we need to implement a button. And depending on if the user is hovering over the bottom, over the bottom, you're hovering over the card. We will display the bottom. If these are not hovering we wanted to speak about. And for the heterophony, leave that empty for now. And we'll close. And it will just make it outlined and we'll call it user can select. The user can view the products. And this would take him to the product details, which we'll do in a bit. Now we'll have another V image, sono we've done with the VMI now have Vico text on the image. Will make it Texts primary. And we will have product price. So it will display the price of a product of air. Then we will have a div, which will hold the anchor and it will disappear. The category products, sort of the category name. Actually we should do this because when I'm, we're already inside this pedigree. So they know that all products will be, will have these categories that we can use for this. And then I should be done. For this screen, Let's see how it looks. Now it is good to the browser. Okay, So when you to make the background wait for the container div that wraps around everything will make the background white fruits. Now should look better. It is. So because they're shopping in the selected category and now it looks much better. Also with the report will make you a 100 percent as well. So now let's this program is designed. So first of all, we are, we need to loop over the categories that we have received from the database and we have such a state. So we just need to do v4 for each returning. And we will do category in categories. And we'll give you a huge category ID. And then to let you guys show these into buttons, it will look much better and it will just be more presentable. So let's go back to the code and assuming them to fail wasn't. So give me a class of modular 3 and margin top to make the style font size. And I'll give it 15 pixels. And for the color will make it black. So it's fits in with our theme. Now we need to do the V4. So each category will make a button on the bottom basically. And we need to set the key, which is the category ID. We also need to shoot the category name. If we know the show it is, change the text names, you make it white. Okay, that looks better. Well, this font size is a bit too big, so we'll make it around 12 pixels. Okay, that looks much better. Just to modify the buttons a bit. We want to make them with a 100 percent. And we need to also give them some module. So the MPG, yeah, that looks much better when I have a and B, one would have been better. And 90 percent, 95 percent would have been better as well. Or 90 percent on this sheet. Yeah, that looks good. So now we need to implement their products for the category. So when the user clicks on a category products, So when he should exit, exit category, over here, we will display all the products in that category. So what we need to do now we need to set a relationship and when we want to return the categories, in this case, we need to return the categories with their products. So let's go over to the, to the category controller. And now we will include the products with the category. So we'll just include the relationship was with APIs. You have to include the initiative, whereas the PHP would, I think, automatically allow you to access the aeration. So in this case, it will include the relationship before we return the JSON data. And now we can loop over them. We'll have to see where exactly we are displaying the products. So we just need to use a V4 loop or the hair products in category of products. And for the key, we will do cadmium products that ID. Now for the product, namely to get it from them. And the objects that we are looping with show for the source. Same thing with the image we need to include. The path is going to be products slash the name of the product. So the image name, so product, the image for the product price. We also need to change that and get the actual product price. And so for the view, we need to take the user to the parameters would be done in a second. Let's just see if it's actually giving us the products that we want to have a look at. Okay, beautiful. One of the issues that we are facing right now that the text is not very clear. So we need to include it down and the price section. So we will wrap up the price. So we'll paste this birth name of air. And we also need to give it some ally and probably so usually called texts. And we will give it a class which is text, takes primary. And for the style. And we'll give it to someone who wasn't Minus submissive, you pull it up. Yeah. So it will reduce the gap between the precedent name. Yeah, that looks nice. Okay, now we can continue and allow these category. So if we were to start a different category, it should give us a change of products and it should work. So what we need to do where we need to add Kinect cooling to implement the click function for this button. And when the user clicks on this category, we want to set the current category in our states, and we need to set it as the category that has been kicked off. So we have a small issue over here. The category variable that we use in the V4 loop is conflicting with the states selected category. So we need to change that. You just have to do category item. And now we just, for, the reference is made to change them from category to category item. Then we can initialize the value of category. So now we need to implement the product wasn't. So when the user clicks on View button for a product, he will be navigated to the product D cells. So let's go ahead and implement that. We just need to implement the click function for this button. And then we need to navigate when you have a function. And this will call the return. And it will navigate over to the product details by the name of this MOOC. And we will use the query to pause on the product that we want to see. And it'll give you a refresher. She works beautiful, just like create swatches. And yes, we can update the product from. Now we need to implement the Add to Cart button and we're almost done with this project. 38. 29 Designing the Cart component and setting up vuex for the car: So first of all, this ordinal button is usually so let's change it to cuts so we can go to our cart screen. So these you can see the shopping cart. So that's located in kind Navigator. We can go to client navigator and change that button to catch. Now we need to implement this screen. So let's go to shop and then let's make a new EJS file, and we will call it cart loads view. Let's scaffold inside this cartoon view and less added inside our router. So we need to make a new routes. So now this is the part for the roots. Now we need to connect the components to this path. And the court component. We need to import it. So now let's import this caught screen. Cell phone screens slash shop. So it's less and less sharp. And then flesh caught. And now we just need to give the roots the name so we can navigate to it by its name. And perfect. So now we need to implement the clink, clink, clink function for the caspase-1. That's where we can navigate to the screen from the number. So it's going to be an arrow function that we'll call returned or push. And we will go to the code, this list out. Let's see if it works. And perfect is working. Now we just need to implement the actual color is green. Remember we should be good to go. So now to implement our current system, we need some sort of Global Sales Management. This is because when we go to our product details screen, we can add items. We can add items to cards. And the cards screen and the Product Detail screen on different screens. So we need some sort of way to have a core states between them that they can both axis. So to solve this, we can use UX. Ux is a nice library for some very good library for having global state management. And you can basically, it says as essentialized store for all the components in our application, just like I explained. And through that, we can easily update using one core stays. So let's go ahead and implement this. You just need to use npm to install UX. And so we need to make a new fell one who will do this and the roots. So we can do this in the root of the project. Just need to make a new file. And we'll call it states was three dots. And we need to paste this boilerplate code inside it. Now the next step is to export our view x. So we can import it inside our roots index file, app.js file. And we can connect it to our web application. That's where we can access our view x top whenever we want. So I'm just going to export this now. And then we can go to app.js. And we need to impose our view x over here. And we need to link it with the application. So we can do is write the store next door, which is constant. So now that we have linked our global states with our application, now we need to implement the functions of the UX, which is state mutations, getters, modules and we'll go on. Actions. Probably the most important. So we need to implement these and then we can access like so we have the mutations. This will allow us to, mutations and actions are going to be many the ones that we're gonna be using guesses as well. So mutations is going to allow us to meet the state and change the state. It's how we want you. And the actions are going to be used. So we can call the, we can hold them basically from wherever we want an application. And these actions will be linked to mutations. So we can use the mutation strategy you with occurred depending on what, what action has been cooled. And that gets us the they allow us to. So we need to, as we have the guesses, so they allow us to access the state properties. So let's say for example, we have state, we have the cart, we can access, we can use you can use the stores, gets us the cards, and access the card from anywhere and application. So to start off with, we need cart items inside our states. So to initialize our state when it's caught items is going to be empty because we haven't added anything. When the user adds stuff. It will be inside this array and we can access it from anywhere in the application. So now let's link the cart items with the getters so you can actually access it. So with the guesses, you also have to pass in the state, which is basically the states of the UX. And we will return what we want from the state. So return state dot-dot-dot items. Now we need to implement the action that will be cooled to set the carts items just like we go the slack, you've got the cart items. We need to set the content items. So we need, so we need an action to add cards item. So let's have a mutation that will allow us to add an item to cards. And we will receive the action overhead states and the actions payload. So the period of the action. And we can just, we can push the cart, the cart items from states. And let's put this inside the array. So let's do, let's cut items equals hot items and lists to cart items of push and payloads. So wherever we are trying to push whatever product. So now that we have added our item to our cart items, now let's set the cost items into state again. So we're just gonna do stage dot-dot-dot items is equal to quote items. And that should update the items in state. Now for the actions we need to implement action so we can link it to at item two chords. So let's go ahead and have an asymptote costs for action. And so now let's implement this item to cause first when it has two arguments, a state and a payload. Now, we need to cool the mutation that we have used. So we need to use in order to access that. I think we need to do stig documents and then we'll call the add item to coat the pyramids law. Okay, so now we need to go to our core states and we need to add a few things to make it persists because if you refresh right now, the state will be gone. So when we want to close the application, we want, when we want to Amanda application, we want to store the core state into a session. And then when we want to come back to it, we would take the contents of that store and put it back into our view acts. Now we need to install this library that will allow us to persist the state. So when the user comes back his store, such back into the view. So it's used UX persistent take library. We need to install it using a PM. And for some reason I think let's check if you're actually has been added legislature package JSON. And she expresses States. Yep, Perfect. So now let's this connected to our Vuex core state components. So to do this, we will have to import it first, and then we will have to connect it. So there's imports, create persistent state from the state. And knowledge. Go into our view, explore. And let's add plugins. And we want to include the creations with the crates persistent state. And we will take the storage. We will use storage from Monday session, session storage. And we need to come over here. Should I, should, I should implement our persistence. Now there's good supernovae Joe's. And let's implement the add to cart. So we need to use algebraic function. And we will dispatch a action which is an agent to court action. And we will also post in the product as a faded. So let's do this using I came to court and we'll implement this function inside our methods section. So we need to have the products that we want to add to cart and we need to push it in. We need to push it in from the function, from the place where we cooled it. And now we can do this store dispatch, which the action that we want to dispatch, which is add item to the cart. You can see over here and the actions. And it will take the payload, which is a product. And this will commit a mutation, which is Add Item two cards, which will add our item to the cart. So it will take the product from the, from the payloads, from the action, and it will add it to our state dot-dot-dot items. So now we want to dispatch, Add Item two cards. I shouldn't. And we'll pass in a productive way here. So let's test this out. Let's make sure it's working. We'll console.log. The will, usually get this to get the state. So we have defined the getter inside our UX course text file. As you can see over here, we are using this ghetto, get a cart items and it's full return the cart items from the stage. And let's make sure everything is working. Let's test this out. You product and this console, but obviously, they are actually being added. Yes. And let's refresh this, go to a different page to see this, go to a different page and come back to see if everything's working. And as you can see, we have the item and now we have three items on our caught. So when we go to a different page, when we close the upside, When we come back to the upside, we should still have our session with our UX storage persistence. Let's go ahead and go to our caught components. And now let's get stuck in with implementing the template. So first of all, we're going to have a div that's will hold everything. And inside that div we're going to have a view container. Now the first element inside our container, we're going to have a title for the page heading. So there's going to be shopping cart. We're going to use a paragraph. And the class is we're going to use display three, quantity, text center. And who will give it a padding or four. And we've been acquitted shopping hot. Then we're going to have a row. And this row will have a column inside it. It will have 12 slots. Both columns, and it will fall medium devices, we will have nine. And through school devices, we will have 12. And now we will have V symbol table inside it. And we will have a template inside that table. And we'll have the v slots will pass in the props of visual default. Then it will have a table. We had T-head, and we will have a table room. Certainly the header for the table. So we will have four labels, item, item, name, price. And so we're going to use text left. And we'll have the label which is item. Let's call me ambitious, 4 times 3 sensory. And we will have itemName second 1. Third 1 is going to be a price. And fourth one is going to be removed. So we can remove it from molecule. Now it is good to the body section. We will have a table row and we will have a table detail. We're going to have a V image. For this style. We'll give it a height of 80 pixels. And of 80 pixels. And we're going to use your margin top q for the class. So it should give this a bit of a margin. Top. First source will do that later. And another C would each other. We need to use now it's producting. So we will get the product later on and we'll run our agenda templates and product price. And for the removal does have a x. We'll have you gotten and we'll make the color black. For the class, we're going to have white text. And I will show that x. So now we need another column inside our growth that we have defined. We will debit column of 12 flows and we will do MD three for small devices, resource and full circle medium devices, three shots and for small devices will have spoke through both law. And we will give it a style of background cota. So the background color black and border-radius of seven pictures. Now inside that column. So let's do that now. Now inside the column we're going to have a paragraph to display or the summary label. And this paragraph will have a headline, class and the white text. Then we will have another paragraph. And this will label what this section is four. So just to choose a overlaying my text. And I might take this class. And we will say that the total of the order, like the total costs for the order, for your order. And then we will have a simple tree boo. Boo use a template inside this table, just like we did with our table. Vce lot defaults for the props. And it will have a template. So the template, we will have a two-body and we'll have a table row. And we will do table detail. So order to do all those up to two. So we need to know the team with data after this one. And this will have a text draped cloth and 50 pixels. And this will have, this will be total price label. Then we're going to have another table. And it will have a table with each other. Would label item name. And then another one. And I'll label data, which is for item price. You're going to have a class text right? And style with or 50 pixels. And the label of item price. Now after the EEG Bu. So after we have the symbol table, we're going to have a class could take Center. And we will have Watson wasn't, that will be white with one tuple of five. And we will pass the outlines property to it. And we will label it as procedurally. Okay, Notice you how that looks. Let's see how that looks. Okay, we just need to make the background white. So we can go to the root div and give the background color to white. Now if we go to cause that looks much better, we need to give some money to make the height so a 100 vh. So it takes up the entire screen. Okay, that looks much better now. Now we need to program this view is called component. So we need to get the items from our store, the court items that have been added by the user. And we need to loop over them and display them here. Item by item. So now we want to program this card components. First of all, let's get the cart items. I'm putting them in our state. So we have to implement the data function which returns a state. So for the cart items property in our stage, we will store them store the court items into it. So will you just stop store dot, dot, dot to get caught items? And just like we use, just like we've implemented that guesses section over here. We're using Git inside our CMS components. Now, we want to loop through those caught items, usually V4. So as you can see over here, we have a table row. This section would give it, wouldn't show, will use this section to display each product. So we wanted to loop over this using the for item in cart items. And for the key, you will have item, that item. Now for the product name. So for the image, we need to give the source. So we need to give somebody a column for the source. And we need to specify the path, which is products slash and the image name. So item.name image. So let me go now we need to do the product team. So we just need to do item.name and for the product price. And it should do item to price. Now for the division, we'll do that later. So we need to have the the order summary. You're going to implement it as well. Again, we need to use the four we're going to do for item in cart items. And the key is, well, TV, I think that ID for the item name we're going to use item.name, item, the price for the item price. And now let's see how that looks. So perfect is working as we expect. So now that we've done that I think to cut and that we can see our items that we have added to the cart. Now let's allow the user to remove items from the court. So when the action and a mutation for this, first we need a new mutation so we can call it as convection. So we will have a mutation could remove item from cards. And this will take the state and it will take their peers as well. So that we know which item we want, we want to remove using the payload. So how we need to store the payload into a variable could let item, so item to be removed. And that will be equal to the period. Now, we want to get the items that are currently in the courts and we want to food to them in a way that the eye, that each item we want to check if it's not equal to the period. If it isn't, you don't retinas. So we'll do state dot caught items, does map. And then we'll have an arrow function that will give us a, an item. Now we want to loop over the state dot caught items so we can check each item, just like we're doing over here using the arrow function. So we'll get each item from the state called caught items. And we will check if this item that we have, the fish not equal to this item to be removed to the id. Then we return it and we return it inside the array. So we will return a collection of carte items that are not basically that that basically we we exclude the items to be removed from the from the court letters and we want to store that we want to store it inside the state boards current item so we can update the card. Now we need the action, so we can actually call them mutation. And they can actually allow the user to remove items from the cod. So we would have a state and we would have a payload for the arguments of the item action. And we will basically commits called the mutation using stable commits. And then it will include the name of the mutation. Include the payload. Okay, so now we want to actually use this remove item from court action and we want to use it inside our code view. So let's go ahead and let's go over to caudal view. We want to implement a function and the methods section so that we can cool the we can dispatch the remove item from court action. What we wanna do is we want to make a function has a roof item from cots. I wouldn't have a chemical. She will pause and the item that we want to remove. And then we will call this dose to dispatch. Cool. Actually now we want to dispatch whichever item from four cards are no person, the agent. Now, we want, we can call it from our budget. So you want to call this function whose pig function and we will call remove item from cart. And we need to posit an item as well to remove items from quotes. Another thing that we need to do, I think, is what view x is automatically notifies when there's any changes. So any mutation takes place, it will automatically update and notify all the components that are connected to to the, to the Vuex store. So instead of using a sort of having the cart items taken from the store and passed into state management. We want to remove this. We want to directly depend on mu x. Instead of using states, we want to directly depend on the global stage. So instead of having items, items, we want to actually use it directly from the global states. And I'm gonna do the same. Also do this for the summary. And that should be good. Now we can just take out she was working in this other few products to our cart that you caught that are good for different products and add to cart. And now let's go to our cars. We have three products. Now we can click on Next to move this one, for example, and this one and rho, we can remove it. And our total changes or perfect. 39. 30 Summarizing the project: So let's go over the project that we have just designed and implemented. So as you can see, we have a beautiful homepage and we have the components that we implemented. So for the specifications, for the interior design, the performance of the car, and everything. So this is, this is going to be the landing page of the site. And we can also look in to go over the functionality for the administrator to that ministry dark and have his own categories and add products to the categories and have a costume shop. And we have designed oldest using Liquify and VGS and larva. And we did this in a short amount of time. So as you can see, we have the options of where that takes us to the forms to allow the administrator to add products. We prologues at categories and everything. So let's go over to the front side, front side. So you can go to the shop. And now a normal user would be able to see this front end. And it looks very nice. And you can browse through the product or brush through the categories and see the products of that category. And you can add items to Scott. So just like any shop, and we have all the functionality of, as you can see, we have the shopping carts and you can remove and add items to your shopping cart, just like you would expect from any other shop. And you can view products for a specific category, brush with the categories. So yeah, that summarizes the project and I hope you have enjoyed it and carry on coding.