Learn Laravel Vuejs from scratch - Part 1 - Build a Todo web app | Mohammad Rada | Skillshare

Playback Speed


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

Learn Laravel Vuejs from scratch - Part 1 - Build a Todo 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

13 Lessons (1h 7m)
    • 1. Class Preview

      2:20
    • 2. Laravel advantages disadvantages

      4:16
    • 3. 1 Tools required

      0:58
    • 4. 2 Downloading required tools

      1:08
    • 5. 3 Setting up project

      4:19
    • 6. 4 Connecting blade with vue

      2:24
    • 7. 5 Todos CRUD

      13:48
    • 8. 6 Creating components

      8:38
    • 9. 7 Setting up fontawesome

      3:31
    • 10. 8 Adding todo items

      5:44
    • 11. 9 Displaying todo items

      13:44
    • 12. 10 Marking todos as completed

      3:43
    • 13. 11 Deleting todos

      2:47
  • --
  • 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.

32

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 todo web app.

In this project we will go through the basics so that you will have a good understanding of the architecture and paradigm for the Laravel and Vuejs frameworks.

‌Then we can progress and dive into more complex things. In the commencing classes, which you are more than welcome to join.

‌We will use many libraries for Vuejs to implement the projects such as Vuetify for making beautiful designs effortlessly.

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: Hello everybody. Welcome to this class preview. My name is Muhammad Radha and I will be teaching you this class. So this class will teach you how to use the larval and VGS frameworks completely from scratch. We'll be moving together as to-do list application. And I will be designing the front end using VGS framework. And the back-end we'll be done with larval. So in this class we will go through the basics. So you have a good understanding of the architecture and paradigm for the nerval, for the larval and VGS frameworks for this course is going to be mainly an introduction, introduction to larval and VGS. As I mentioned. So by the end of this class, you will learn the following concepts. So firstly, we are going to be going through reaching level. And these roots will be placed in a file called PHP or api dot PHP. And these rules will allow us to access data using the designated routes that they are basically register. And those files. We will also have controllers. So these controllers, the group certain functions. And these functions will retrieve and at data from the database in order to serve it over to the front end. And these controllers will be linked to roots. We will also learn about models and how they represent records in the database. We will also do migrations so that we can make database tables. And these tables will be used for storing database records. You will also learn how to make an API in order to serve data to the front end. And also how to consume these API routes using axioms and VGS in order to get the data from the backend and also to mutate it and change it using this API routes. And, and after this class, we also have other classes that we'll go more in depth. And we will have more complex things that we will be building. And those QC losses will be basically about building a house. You build a Tesla web application. So if you want to learn more after this class, you can actually go ahead and enroll in the other classes. I hope you enjoyed this class. Thanks. If you need any help with this, if you ever get stuck throughout this class, just messages or email us at cold cloud Pub, gmail.com. 2. Laravel advantages 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 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 some cool 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 this. 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 eloquent 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 larval 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 might be 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 basically Hope you to get started level and understand the main foundation after, during this course. 3. 1 Tools required: So in this video, we will be going through the tools needed in order to take this course. Firstly, you will need to PHP seven in order to program our backend, which in this case is that arable framework for PHP. And we will also need a database to store our data and connect to the backend, which we will be using MySQL. We can use XAMPP to store both of these automatically and have a web server for programming our project. Or the required software that we will be using is Visual Visual Studio Code, which we will use as our main editor to program this project. We'll also note also need Node and npm to, for running VGS and installing libraries that we use will depend on. We will also need Chrome for using the developer tools that it has an order to debug our application. 4. 2 Downloading required tools: So in this video, we will show how to download and install the required tools. Firstly, you will be using XAMPP, so we can download this from the Apache friends, those oxide and overhead, we should be able to find the correct installer for each operating system. And in our case, we'll be using the exam for OSX. We can download one of these to the other ones. They have. They are very large and we won't be needing them. Show the 7.4.16 or 8.3 is perfect for our projects. After we've done this, we can download the Node.JS from the nodejs.org website and we can select the correct installer for our operating system. And once we have done that, we can download the Visual Studio Code editor for our, for the correct operating system. And Google chromosome from the Chrome website. You can download the correct one for our operating system. After we've done that, we can start our projects. 5. 3 Setting up project: So we will also need composer for creating our project and installing the larval libraries. We can download this from composer to org and it has a very clear tutorial on how to actually install it and set it up. Once we've done this weekend, starts with our projects. So in this video we will start with our project, which is a to-do app. Firstly, we are going to be using the create our projects command. We can do this using the composer or using the larval installer. In this case, we will be using the composer command. And we will put this in real code. And we will, at the end, we will write our project name, which in this case is to-do list. And now composer will be making our project and setting everything up. So now that we have made our project, we will, we will cd into it. And now we need to install that package. We can find this from data or website. This will allow us to install our front end scaffolding. And we can use Bootstrap viewer reacts. In our case, we will be using view, the view command. Now, we will be using MPM I computers to just to UGA libraries that you just depends on. These libraries can be found in the package to addition. So now that we have finished installing the libraries using MPM, now we will open our project in Visual Studio Code. We will also need the extension hood vetoed. This will help us to make our code nice and pretty and format everything we have already used to. As you can see. Now we need to turn on XAMPP. We will need the MySQL database and XAMPP. And we will also read the Apache web server. So we can go to PHP, my admin, in order to make this wish, to make sure you have MySQL database and Apache web server running. So let's go to PHP, my admin in order to make our database. So go to Home and then you can make any database server where we will call it To Do list. And for the correlation, you would use the default, whichever for each f 8, UTF-8. And before general shy. Now that we have our database made, we can go through terrible and we can go to the EMV in order to connect our larva project with the database that we have made, we just have to put in the database name and username of our the MySQL database server, which is root. And for us we haven't set a password on our MySQL server. So this is our digital by default. Now we will solve the project using PHP artisan serve. We can access the level of application using that link. And this is our page. Welcome, welcome blade, the PHP. We can go to the arena. So now we will run npm run Watch. This will detect any code changes and it will compile it again. So now that we have finished setting up the project, we can start developing the project. 6. 4 Connecting blade with vue: So now let's delete the unnecessary code and we'll come to a bleed. And now we will connect the welcome to ablate with the app.js in order to defend a 100 percent or images. Because welcome to plate is the main, is the root, the root page of the application. And we need this to connect two VGS. So we can totally depend on VGS for, for the development of this predicts. If we go to the app.js, we can see that the root components is constant because this is the red component of the VGS and this is the gateway of other components. And as you can see, we have referenced it with the App ID and this will be used to connect. We welcome w dot PHP. Now we will rename example component to app.vue. We can also do a new components, but as we don't need this, we can just rename it. And we will also lead to unwanted good. So now let's import this and for the upload you then to our app.js file. And so we can register this new components with the root components of u. And I'm not gesturing. So as you can see, we have an array no, because we're using the example components and is expecting it to be existing. But as you can see, we have renamed it, so we will decline, which will feel better. 7. 5 Todos CRUD: Okay, so now we need to make a table to our to-dos. To do this, we need to make a model and their migration. We can use a PHP artisan make model. And we can make the migration to get there using bash em. So that has made, that has generated a model and a migration for us using the PHP Arts Movement. If we go to the migration now, so we can customize a table and add the columns that we want to add. So we will be adding the todos column to the actual blue. And we'll also add a completed column. Still good status opportunity. And we will put a default false for the completed so that one has fluid is made. By default. It will be not completed until the user makes it complete it through. Now that we have done the migration, we can go ahead and migrate and apply the migration by doing PHP artisan migrate. As you can see, this hasn't been the tables for us. And we can check with the database to see the table that has been made using PHP, my admin. As you can see, the columns are made there. And we also have the timestamp is created, it's created at and updated that. So now that we have done the migration, we will need to make a controller. For the US. We can do this union was command PHP, the name of the control villages to use controller. And dash r Omega resource out of it. So now we have the default functions in the controller. And you can see we have index create, store, storing the actual to-do show to receive it from the database as its editors update, to update the data and destroys you delete it. So now we can, we now we need to link each function with a specific routes and do that. We can go through api dot PHP. Before that, we need to go on the to-do dot PHP in order to make the columns that we have added as fillable. Or we can simply make everything findable using guarded, purposely make got an empty that will allow us to modify any of the columns from the model. Or if we want to modify specific ones, we can do protect its Philae Bu, and then include each one each year column that we want to edit. In this case, we will make all of them editable. So now that we have done that, we can go through api dot PHP to store all the roots. So this will allow us, this will provide the interface for the application to connect to the, connect to the backend and retrieve data and basically talk with the back-end. So now let's get started and make a get request in order to get the front of the database. So as you can see, we have GET requests with a todos name. So this will be api slash todos and the URL. And this would take us to when the user does api slash todos and the URL, it would take him to the index function of the to-dos controller. Should now, we also need to import that image controller. As you can see, we have done that and the top of the PHP file. So now let's go to the index, index function and Latino each controller so we can program it and retrieved from the database and service as adjacent to their view application. So now we need to specify them a little type and included into the PSB file. And as you can see, we have done use App Model to do so. We can basically usually the model in this function. So now we will be retrieving. The index would basically give us all the dues from the database. And we can do this using the OR function from the model. And this would give us all the students who will retrieve all the news from this obese. And we can return a response and a georeplication formats. So we can do response with our response using the Duchenne function and passing the to-dos. And we can test this. First, we need to put a few to-dos in the database. We can do this using pH abandoned for now, just statistically function that we have done. And we can press Go curious at this. So now if we were to make a few copies of this, like another copy or to copy, I will just change this machine to do something else. And now let's test this function out. And you just have to do slash, api slash todos. And as you can see, we can, we need to do some formats as well. So this is two additional parameter to make this much prettier. Json formats up. Google Chrome. This will make all the juice home was pretty Janice will be very useful when we are debugging the application. In the future. We have installed, we just need to activate it. And as you can see now, everything is very clearly formatted. And it's very, very, it's much better than before. So as you can see, we have finished doing a to-dos route for retrieving the to-dos and serving get an a JSON format. Now we need a route for storing the distribution using a route and not doing it through peaceful man, because we want the Vue js. We want our Vue JS application to store to do is using a post request. And we can do this using the API, the PHP. We can make a new request, which is a post request. And this will allow us to store that you do. And we would use the computer controller again using the floor function. So now that we have done that, we will go over and introduce controller and we will program that it will function. So now we will retrieve, so now we will make a new to do. And we will get the data from the request. So we'll get the parameters from the request. To do that. You do all of that to do would be their requests to do. And we know that's by default the complete loop we 0, which is no competed, so we don't have to do that. And we can get you simply save the studio. And we can return a response JSon to convincingly say that the status to mega cities are successful. So that's the application can know that we have successfully switched to. And we can also use cities after we return it to do that we have made and we can also return a status, which is success. So we can check that. So now we have finished during the store post request. Now we need to do the update function. So we need to make an update root in order to update it. So when a user has completed it to do, we can use the update hood and market as completed using the English root. So this would again be a post request. And we will do to do slash update, slash ID of that too. And we'll be using continuous controller again. And we will be using the update function. And inside the news controller. And the I is basically the ID of the to-do that. We are trying to update the ID. So now we can go ahead and go to the root controller. I'm going go to the update function so we can program it. So now we need to find the to-do. We can make a variable called to do and we will be using this disorder. Do that we're trying to edit. We can do, we can find this using the ID. So we will be using this view what do again and find auto-fill using the ID that we are, the idea of the updated to do. And this would receive the to do that we're trying to update. And now we will simply mark it as would be updating this review, the content of that todo using their perimeter from that request that we have sent. And we would be using this new property from it didn't want to. And we will then save also check if it's completed. It is completed, then we will also update the completed property inside this. So as you can see, we are using the completed property forms, new model and marketing, who are marking it as true. And otherwise, it will be just left as false. And we'll save this. And we'll also return a response. And we will do some function to indicate that that view has been successfully updated. Now we have finished with the updates root AND function. Now we need to do the delete root AND function. So again, we need to go to the API dot PHP and we need to declare a new route venue root, which is another post request. This gives us now repression questions. So it gets requested because we're just using the ID to need to do. So to me to do slash, delete, slash ID. And we would again produce controller. And we would usually destroy function in this case. Now we need to go to the controller and go to that destroy function. And we can get the functionality over here. So we need to again, we need to find the todo using the model. We store it in a variable. When we find it, we use the fill function from the model. And now you need to do did you unless you delete and need to return a response to indicate that the two new has been successfully deleted. So now we have finished all the routes which is destroy, updates, store, and retrieving the to-dos. Now we need to go ahead and program the actual components using Vue js. 8. 6 Creating components: So now we need to connect the main USGS component with the blade. So we simply use the component name and define it inside. They will come too late. Now, we need to make components for each, for each part of the to-do app. So firstly, we need to make an Add Item form component. We also need elasticity component. This will hold all the list items and each item will be its own separate. To do so, we will also read the list item components. And now we need to tell the App.vue, which is our main components. So now let's give a title to our web application will be to each one and we'll call it a to-do list. Will use a margin on top of around 200 pixels. Align it center. Now as you know, this is our roots App.vue component. So we want to import the other components, which is the Add Item form and also the district components. As you know the item form. We're gonna use this to allow the user to add, introduce the web application tool for you that is few components. We need to import it. This will basically just hold on to it and all display it to the user. So now that we have imported it, we need to use the components. We need to use a component of the view and declare it there as well. Now that we have declared it, and we can use it inside the template. So we can use the function's major component tree. So now let's style the main to-do list container. This will basically be a wrapper around the components. So could it be this country Norwegian class readiness uterus will give you around the 400 pixels and that will make it as introducing more than O2. And we'll just give it 50 pixels margin top. I have noticed that there was a bit small, so I have increased it. Okay, so now let's go to the isoform and let's develop that. So as you know, we have, we have the veto and the beginning of the course, this gives us a lot of snippets. One of them is that we can make a view component should be by just writing View and pressing Enter. And it should give us a boilerplate template. As you can see, it gives us the template, the components and the script and stuff. So now let's, let's work on this Add Item form to allow the user to add the to-do items. So make a new div and we'll give it an item class and will also make themselves. So we'll give it a display of flex. And we'll center it using justify-content center aligned. So this will, this will basically align all the stuff inside the center. And we'll also use an item center as well. And we'll give it a margin bottom of 25 pixels. And this will be connected to the state. So we will show a user input component. So we'll use the input element. And the type will be text. And we will make a class and put CSS class on pitch. So this will allow the user to add the item. Will give the award this towel solid, and give it a border color, blue. We would give it a radius of four pixels. And we will give it, will do it one pixel. We will outline none. Pedaling five pixels. So we'll give it a height of 30 pixels and the width of a 100 percent. So now this, Let's add a placeholder for it ministry that the user can either to do. So. We'll also make a button to allow you to submit it. You give it a class at Watson and this unit cell and the CSS. So we'll give it a hydrophobic interactions. So 42 pixels, a Buddhist tell solid water color. Make it a border radius of four pixels. We'll give it a one pixel. And the background color, right? Okay, sure, it is due to the browser. Let's see how the user to the judge will lead to look something this would reduce the boundaries that we have. A new rule. Use the bottom-right radius and the radius on the input an Add button. And that looks a bit better now. To do that also for the goods would have left radiation, top-left release. 9. 7 Setting up fontawesome: So now let's add some icons to our application. We will need one also for this. So let's boo-boo viewpoint ozone and PM. Yes. And we can use npm to install this library. We will use these two commands and PM is to issue commands. So now let's do the other command is 0 to the SVG icons. So now that we have installed the Font Awesome library, let's import image into our app.vue, into our app.js. We can use this into our application. Okay, so now let's import the icon sets that we want to use and add them Java library. You go to our addItem from components so we can add icons that we want to use. So now we'll do Font Awesome icon. And we will use the plus icon. And we'll make a class good Plus. And we'll go to the CSS section so we can add the class. We will font size of 20 pixels and then you'll make it blue. So now let's also check how that looks. We need to serve the application. We need to do npm or iWatch. There's ever an issue or their age exactly. Okay. So guys, I found out the error is due to the fact that we are using this library where we haven't installed it. So as to that library. Okay, so now that we have is to slavery this see how it looks now. Okay, something's not right. So we have to import view that was the main issue. This refresh now, maybe you have to be npm run. Maybe N1 or chicken. Feathers. 10. 8 Adding todo items : Okay, so now let's set up the state management from its components. So that's a personal need like item that we're going to be storing. The data function will return the state of the view component, the object. So we'll have an item and item will be additional objects will have, which will have a name property. And now we can go back to our addItem form and you can connect the inputs would the item.name, so that when the user puts in a to-do, when he adds in to do the, that is connected to state management. And that was updated to, as you can see, that the model is connected to this item.name. Whoever is, whoever is typed in the input is stored in the item.name to the user service. So now when the user adds to do right over how many times she to him. And he would add this Watson and it would click on this button. So it would take them to do, and it will store it in the database. So over here we need to define a function and inside this button, and we'll click Add Item. Don't need the user clicks the button and it will call this function or not. We'll add the Add to add the item in our database. So let's define this function. We will define it in the methods section of the item. So firstly, let's validate that the item name is not empty. So we can add this view only if he has entered something. So now we need axis in order to use the API routes that we have defined in the previous videos. So we need to is to actually use npm, install apps, your offering safe so that we can see in the package reason. So now that we have installed, let's go ahead and use the post function. So the actual post. And we will use the route that we have defined. Let's go to the other PHP to see the roots or the API, the PHP. Php. So we'll use the push store. As you can see, we have already defined the head to do slash store. Okay, So we will be using that overhead actual post slash api slash slash store. And we will also push the object over to you, which will be named, is this the item.name, which is from the view states. And then we will listen for a response, a response. So now let's check the HTTP status code to make sure that our request has been successful, you're interested, then it has gone through. And that's our to-do has been installed. So we'll check if it's between 200 and 300 is bigger than or equal to 100 and 300. Then we will reset the item.name will make it null against so the user can type in is to do the others do in a database. So now let's check this, check this in Chrome. There's something there. Let's refresh. And that's something that we don't need to refresh. It should have been ready. We shall now we have identified that we have our era. The issue is that we haven't defined that item correctly. We need to call it add item with a capital I. Also, we have an issue with the with the item name and the backend way. We thought that we have a 500 internal server error. Let's see the exactly error that issue. Just show that we can show you. As you can see, you have a 100 and central server. This indicates that the error is on the back-end. So we need to go to the traduce controller. And she was the issue. As you can see over here, I forgot controller, we can see that we are doing request to do, but on the front end we are passing in the name. So we need to do, to do over here. So that's over there, stored correctly. So now let's try adding 82. And let's check how pieces you either. And we have successfully managed to do so now everything is working correctly. Okay, So we have another error that we can see over here we're also wanting see is philtrum on component's template around the function undefined because there's areas in this view is the fact that we're using this view but it's empty. So we can fix this just by going to this view and typing your view to set up a template. And that should get rid of it. Yes, As we can see. So now let's continue developing blustery now. The discrete components. 11. 9 Displaying todo items: Okay, so now we will look on the list the components. Firstly, we need a way to store the to-dos from the database into our components. So we will use it and items, variable or property in the state management. So we will use data function, which will return the state of the component. And in that stage, we will declare items which will be used for storing Distribution. Now, we will use a div which will iterate over those items. And for each item it would return a list item component. We will use the index for our key so that each item would be unique. And now we would return the list item. We would have to import this list item first. And we will have to register it as a component. Inside I will component. Now we can use this in the V4 and we can return the list item each page to do. We can pause an item as a crop so it can be passed inside the list item using the item property. And we will use an item class, which we will, which we will design. And this tells area section. So we'll give it a padding of 20 pixels. Five pixels for modern talk. We'll give it a solid water style, will make the border color blue. We'll set the border-radius to 17 pixels. And finally, the model with who we wanted. Now we need to retrieve the, now we need to use actually us again to retrieve the to-dos from the database and store them in the States management. So as you guys, you there, we have an error. This is because we're returning many items and we don't have a root element. So we need to wrap this. The fourth div insulation, golden. And as you can see, the error is gone now. Okay, so now we need the method that will allow us to get the to-dos from the database and store it inside the items in the States. So let's make a method called get to use in the method section. So the method section, and we will call it sketches. And we will use, asks us to use the rules that we have talked about in the previous videos when we made it to get the items. And they kind of ESP. So we'll do api slash items and we will wait for a response. We will check the response to make sure that it is successful using the city's code 200. And in this case, we will set the items in states with the responsiveness we have retrieved from the backend. And now we need to call this function as soon as the component is created. So we will use the create function that is part of the component lifecycle. And we will call that as Nobelist. I'll get to you, sorry. As we have named, it continues. And as soon as the component is mounted, which will cool, this gets reduced. And that will cool the api slash items roots from the backend. And it would then get a response. And we will check that response. If the response is successful, we would set the to-dos inside our components. Now let's go ahead and go to the browser to see this work connection. So we are adding a minute to do. So. Looks like we have an error in. So let's check this with console.log because we have to use in the PSU admin in our database. So we had a few errors in this video. Three in particular, well, we'll go over them right now. The first one is that we were using the wrong route. In the backend, the root was actually hood slash todos. So api slash two years. And we had used api slash items, which is wrong. So we change that and now it's good. The second era, we can check it on Inspect Element. If we understood, you can see that we have 500 internal server error. So this is the fact that we're using items in their response and thus not what we are returning in the back-end and the backend we are returning to produce. We need to retrieve the traditional the response. And finally, the third era is due to the fact that our list item component is completely empty. We haven't defined the component there. So now we have defined a component that you shouldn't work hand. We should see the list item being used and we have 40 to 50 degrees actually. So now let's work on the list item and show that it is should the properties inside the list item components. Okay, so now we're going to be developing the resizing components. So first things first, we need to retrieve the prompts that had been posted to a list item. And that's just the item. As you can show where from the list. Let's do each list item we're making. We're giving it the item that is being passed as a prop to the list item component. So now we need to retrieve this item and retrieve it as a prop. And we need to know stout this component. So we need to have a div that will wrap around all the elements of that component. We will give it an item class. And we will also. So let's tell it using the item class. We'll give it a display. Flex will make all the elements inside it as central huge interest for content center and will align items center as well. So now let's make a input so that we can allow the user to mark as completed. So we need to make an input of type checkbox. And we will bind this input with the item property. So we'll use the modal items completed. So whenever the user checks the checkbox, it will update the property. Agenda completion will be true. And when you're on a really unchecks it, It's homemaking source. Okay, So let's do this one now. This one will have a class item text. And depending on whether or not the item has been completed, you has been marked as completed. If it is marked as completed, we will also use the complete this class. Otherwise we wouldn't need a little bit because otherwise we'll just do the complete this top section. So we will use take the duration, length. That's the completed. It will be marked as will be crossed out. And we'll also give it a color of 9999969. Let's do the item text class now. So we will use with conjunction and we'll give it 20 pixels for margin-left. Will also show the item.name. And then we'll make your button after those. And the bottom will be used for editing there to do. We'll give it a class on it. So let's make that class in the style section. This gives you a Kw. Will make the border-radius, 50 pixels will make the word annum. We'll set our land to be not. So there's admonishing bright as five pixels. Let's make the background color is white. And for the font-size will use 17 pixels. For the Edit button, we need to add the edit icon so we can use for some for that. So first we need to import it before we can use it. We'll also need a delete icon button, so we'll just do that. So now let's use the Font Awesome icons in our list item. So for the Edit button, we will use the edit icon. And for the Korean pieces button, because we'll be using a lead person. And again, the format Awesome icon will be a trash. Okay, so now we'll need to do that in a class for the Delete button. So the median class will be, we read. So the can opener, it will give a border-radius of five pixels. Will make the ordinance and the outline done. The background color, we'll make it white. And so the form size, we'll do 17 pixels. Okay, so let's have a look at the user interfaces you how it looks. So leverage only bought the item name does not appear the hair. Let's look. Okay. So we can see that we have the name property, but on the backend December look at the table that we have defined. This because you do have to do instead of naming overhead, we could name, we should have been generated. Okay, so now let's have a look and see if that works. Yep, Perfect. And as you can see, each to-do item has a name and that you do. 12. 10 Marking todos as completed: Okay, so now let's connect the checkbooks with the item completed property. So when the user clicks on the check box, the item will be marked as completed. And we will call a function to update this completed on the server and the database as well. So we'll make a function called update to and we will define it. And so the method section of the component. So now we will use extra us again. And we will do actually off that post. As it is a post request API which lets you do such an update. And it will present the item ID. So we know which to do. We are marking as completed and uncompleted would be the item completed. So the completed is marked as it's checked or unchecked to be sent to the server. And ability that we will then listen for a response. We will check that the response will check the to-do has been successfully updated by listening for equal a 100 response to anything between 200 and 300 minutes. That's the push request has been successfully. Sense. Just test it, we will do something. Okay, so now let's try out and try out updating a to-do. I'm making the completed one unless you on this image, as you can see, we register. So let's see, the problem was able to go back end. So let's try and resolve this from this objective function. So firstly, we're trying to find the auto-fill, which is array, but then we are updating the new property when in fact we're trying to update the completed property, so let's fix that. And that should be good. Now let's try it again. And in this case, the database to see if that has worked and still has not worked. Okay, guys. So this should be concerned or not. She if we have any errors, the smoke something has completed, economical market has completed, and we have an error. So it looks like that we're not using the completed. The item is undefined. So there's good is to this item. Shoe looks like when you women to use this to item in the props wagering item and not to do. Now let's see if that resolves it. Okay, now let's let's let's make this just double-check. Let's go back to the database. Perfect. As you can see, take out the trash has been completed now. Perfect. 13. 11 Deleting todos: Okay, so now let's work on the Delete button. So when we click the Delete button, we want to cool their move to the function. And we will implement this function and the method section. And we will use z OS dot get api slash to do especially neat. And we will pass in the item ID so we know which one to delete. And I will listen for a response. We will trigger the response status to see if the item has been successfully deleted. So we will check if it's 200, between 200 and 300. Just like in the update function. Should see now is try it out. Okay, So I have identified that era. We were missing a slush, often deletes and the axial root. So now that should work. I have decided to keep the erosion so you can see what look for when you have an error. And debugging is a big part of what development. As you can see, you can delete them and they do get the database. Okay, so after we update it to the ORM residue, we want to read out the list view. So we want to emit events. And on the list you want to listen for the events. So one over the reload data events happens. We will reload, we will shift the latest data from database and we will update the view would that latest data. Now we will do the emitter event and they removed to do and the obliquity or copy basis and the Aboriginal. Okay, So let's listen for this event and the ListView. We can use the V on reload event. We love to do. And we will call the update to use, gets a new story. And that should we load the state with the latest data. And it works perfectly unless you the check concrete. Yes. Perfect. Okay guys, I hope you have enjoyed this first project. If you have any issues, you can always email us and contact us so we can help you. I hope you have enjoyed it and good luck with the other projects.