PHP Laravel & Vue Js Tutorial 2021 - Customer Retail Management App Like Monday.com

[Music] hello guys and welcome to this crash course this is not going to be only a crash course it's going to be a fundamental and also an advanced knowledge of how you could use laravel so before you move ahead do make sure you hit the like button and also the subscribe button what we are going to be building on this video is a customer relationship management app is an app that you can actually use to assign tax to employees that is going to work on on that app so if you have come across something like monday.com it's more like that kind of idea so in this sketch file you could see we have some couple of projects so definitely the creator of this scratch file made in such a way that when you click on any of these it brings out the tags for each project but we are not going to uh do much on this exactly but we are going to see how we can actually use laravel to build something that looks similar to this we are going to have an active upcoming tax and also active today tax so let me just go ahead and show you the demo of the application that we are going to be working on so this is actually the demo and i added some couple of tags like i said it's not that really advanced customer relationship management but you could see that with this here you could see that we laid down some steps of how we can actually build an application to the to the stage of a deployment and also to the state stage of uploading it to store so in today's tax we are going to see app development planning get a ui and uh design from a good uh designer that is going to design it then whenever we are done with each uh today tax we just go ahead and tick that is going to access tax completed then we click on ok and that tax goes away and whenever we want to move ahead like laying down the foundation of the app with any framework that we want to use or any native framework we can just go ahead and bring that up so that we can actually focus on that tags and work under text like i said that we are not going to be doing it in such a way that when we click on each of these it brings out a separate project pattern so we are just going to go ahead to see how we can actually use laravel and vue.js to build a full crowd application so this is actually making use of my sqldb and uh larabee so laravel supports that so that's exactly what you're going to be using all these things stick to the database so if i go ahead and refresh you will see everything is still the same way it is so let me just say lastly lastly upload files so when i add that you see automatically gets added and when i refresh you see it still sticks over there so we're going to be using my sql laravel and also vue.js so a lot of guys have actually told me to do a tutorial on vga so i think this is a perfect tutorial and it's going to be a first time i'm also going to be doing something that looks really nice with html and css so in case you are new to also design an application or designing web application this tutorial is also perfectly for you so before you move ahead do make sure you hit the like button and also the subscribe button and now let's dive in begin the first thing we have to do is to make sure that we set up everything that is very necessary for us to set up so if this is your first time you could have known something like composer you say dependency manager for php just go ahead and download that and also you can download x amp so just go over to apachefriends.org you can download xm for your operating system and also make sure you have composer and then you just have to add it to the path so that's the only thing you have to do and right now just switch your directly parts to some htdocs folder that will be generated from this samp so i already have some tutorial on how to do uh these like set up your machine for a sample environment in order to run php commands from your command line which i will also put the link on the description but for now let's go ahead and create our application so with the help of composer i can actually generate a laravel application but first most make sure you have laravel installed i'll also keep the link on the description that's going to show you some steps of on how you can install laravel so let's just go ahead and create a project and i'm just going to add this flag laravel so i just have to reduce this a little bit because i don't want it to be access so we have laravel slash laravel and we can now go ahead and give it a name of the blog so the name of the blog is laravel crom so i can say crm laravel so we just hit enter and just allow this to finish so right away we can just go ahead and switch into that folder so we use laravel crom and we can just run php artisan surf and it's going to give us a link that it generated that we can actually visit on our browser to open the application so this is uh very nice but we don't want to use this this way so what you want to do is to open your notepad and run it as an administrator so run your notepad as an administrator and click on open and go over to your windows directory go over to your local c drive windows go over to system32 so sorry guys for that little noise so go over to system32 and hit enter and go inside the drivers folder and inside the drivers folder you can open the etc folder and select all files then go ahead to open this your v a host file so in the host file we're gonna use 127.0.0.1 and we're gonna give the crm dashboard the test so just go ahead and save that and then in your project folder we are gonna just terminate that and hit on start just select start so come back to this xm folder and go into the upper sheet and inside there go into the conf extra and select the http http dv host file and then we are gonna just grab one of these so just go ahead and copy that and put it down so the first thing you want to do is to get rid of all these uh slashes i mean number size and then you want to set your own local host day so i actually uh made this tutorial or just a simple blog post on how you can do that so let's just go ahead and copy these and make that snappy so this is kind of a little bit bigger so i just have to replace that and what i just have to do here is to replace it with crm dashboard dot test and save then the next thing you want to do is to open your sum your x amp so but first go ahead and close every other videos file and uh let's close this link as well and close this folder as well and what i have to do is to go back to this exam folder i have to stand same control panel and make sure it's open then i can start the apache and we can just go ahead and we see crm dashboard.test and hopefully that should work perfectly and i think that's because we made a mistake somewhere and that should be from here we just have to go into that uh file once again so let me just quickly go ahead and open that i think i didn't specify the this path correctly so i can just copy that part and come here and replace that so so this was the problem i can save and refresh my app restart my apache so i can just refresh and that should work i think so let's just allow it okay fine so we can see that right now we are using a custom domain name for our laravel application so the next thing we have to do now is to install our vue.js ui in order for us to actually use vjs because you're going to be using the view js to actually build this so the first thing you have to do is to require from composer the laravel ui and it's going to install a stable version for us in our project folder so the next thing we have to do is to add the ui scaffolding which we have actually done but we have to install the laravel view js so i can just select the ui view which is going to add the view scaffolding in our application and we can go ahead and open that project on our vs code so right now let me just go ahead and increase my font a little bit because i want it to be better okay this is this is very nice and this is just a folder structure of laravel so why we have done this drastic some couple things we have to do so one of the is to run the npm install and also run the npm run there which is going to run application but we are not going to do it this way the first thing we have to do before we run the npm install is to make sure that we set up our laravel to actually use this single page uh routing and quickly let's go over to resources views welcome blade.php so in this workflow.php we are gonna uh actually get rid of most likely everything there so let me just scroll down and go down i can just scroll up and hold my shift button you can just get rid of that and also get rid of every style you see here so i don't want any style because you're gonna be using a custom style for our html uh files so i can just get rid of that so you can just go ahead and save so what you want to do here is to add a div with an id of up and inside that div is where we are going to be calling our component but first we have to uh require the scripts that we're gonna be using so this this kind of uh making me think that i'm still using a normal javascript file so inside here we can just specify the source and we are gonna use uh this uh javascript file from the access folder which is the app.js which is the app.js so i'm just going to select js slash app.js i can just go ahead and close that and make sure you everything is perfectly set uh this is supposed to be here sorry guys my keyboard was on turkish so i just have to quietly do that again so we have the scripts and here we are gonna have a source of we have assets and we are gonna have uh to select the js up the js file and we you can just go ahead and close the scripts so i think my keyboard just changing and we are done with that so just go ahead and save that so the next thing is to come over to this app.js and this is where we are going to be making use of our applications uh let's say application components so you could see a very simple example component that they put down here which that when whenever we compile our application is going to use this and inject it into our browser to render a very nice html page for us so what you want to do next is to clear everything here except the necessary things that we are just going to be using which is fine just go ahead and clear those things it's not an issue because i just want a very neat environment to work with so we have this example component right now let's just go ahead and make sure that we can be able to use this component in our application so the first thing we want to do now is run the npm install and when that is done we are going to uh be using the webpack.js to actually uh we can register our css over here while this is uh installing let's just talk a little bit about that we can register like our css over here which they actually did and you could see it's very fine but for the css we are still going to be requiring that in this work home blade file so let me just go ahead and get rid of that font so the way we can require that it's also very simple and while that is installing we can just come to this head so we can just use the link rail or this is not a javascript or normal html file so we can just bring the link and we can put the href we can just put those curly braces and we can go over to for this this is here css so this is supposed to be in css slash styles.css so guys this is actually the first time i'll be teaching uh let's say mixing together html and css so the tutorial may kind of be boring but i will just try as much as possible to make it look very interesting so let's just go ahead and save that and allow this to finish before we proceed actually we can just go ahead and run the npm run watch from our pocket.json because we are done installing everything that we need so when i scroll a little bit down you can see the view js and also the vgs compiler but we can run the npn run there which i don't want to run immediately there is something i want to add in this app.js sorry in this wordpress.ms.js is the ability for application to automatically reload whenever we save anything in the component files so i will just go ahead and add the mix.browser sync and i will just specify our url so we have the crom dashboard dot test so lastly we can just run npm run watch po so this this is going to run a command a command to actually install the browser sign because you could see here what i was just talking about so once this is done we are going to run that command again it's going to automatically install everything and also make sure that we can be able to run our application whenever we save or refresh our application whenever we make a save or change in our component so let's just give that some seconds as well so go ahead and run that command a command again i want to call it commandment so you can see automatically our app opens and when we hit on control u you could see that we are pointing to the style that we just added but i don't think it's actually fun but don't worry we'll still figure all these things out but you can see our application is actually loading the vgs and you can see here we have the view extension of chrome actually saying that vjs has access to this website so right now the next thing we have to do is to fix the necessary things and we can now go ahead and start working on the view js aspect of this so i can just go ahead and save and we can just go ahead and close this so let's go ahead and make the necessary fixes so the next thing you want to do is to actually call this component in your welcome blade.php so over here you can just put this down this way and you can just go ahead and close it so let's save and uh actually refresh so you can see we can be able to use that component wjs component in our application but one thing that has not yet uh or started working is the ability for us to use the css that's because here i'm actually using style.css just go ahead and change this to update css because from the public folder we have app.css so when we refresh and hit ctrl u and click on this again we can you can see we have access to those css so by default this is just a bootstrap css and you can see automatically got applied and one thing that we can actually do is to disable the notification of this webpack uh sometimes i call it web webpack so we can just say makes the disable notifications and we can just go ahead and save that and it's going to compile and whenever it's done we are not going to see this toast that comes out at the bottom right of our screen so right now we are done setting up everything and we are not going to be using these example companies of course because we have to actually create our own component and also go ahead to build our api before we go ahead to view the ui so thank you guys for watching this long before you proceed further make sure you hit the like button and also the subscribe button and right now let's just go ahead and work on the api before we come over to the html and css part of this project so for our api for us to test run our api we are going to be using the postman so just go ahead and download the postman and install it on your machine and right now let's go ahead and talk about the database migration and also the models so with the help of laravel you don't even need to do more in your database just go ahead and create a database and just come over here and add the name of the database so i ended up creating a database called crom and all i just have to do is to put down the db database and set that to that crm in the dot emb file and that's all so we can just go ahead and close that and back in your commander or your bash just go ahead and run this command php artisan make model and we can just specify the name of the model we are going to be creating so i want to create an upcoming upcoming model and if i want to generate a migration i just have to add an m and it's going to create a migration and also create a model for us so when we go over to this database over here you can see we have an upcoming migration which we are going to be using to insert some things in our database like the structures of our database and uh lastly we have to also generate one more model on migration that is today so let me just go ahead and use today because this is just a today tax because you're gonna be creating a resource file a resource uh uh i think a resource yes with a resource you can actually structure what is going to be returned on your api requests so right now we are done creating the model and migration and here we have to find it today and also the upcoming and we can just go ahead and close those things and uh okay back in this upcoming uh table let's just go ahead and add the necessary things that are needed here and we are going to be creating a seeder to put a fake data into the upcoming so if i mistakenly pronounce upcoming just know that i'm talking about the upcoming table so we're gonna need the table to have uh a string of title we're also gonna need a table the table to have a boolean value of completed and we just want the boolean value to have a default value so with the default value we just have to set that to false we also have a table of another boolean value of approved and it's going to also have a default value of false i mean not true so am i making a mistake you can just save that to find out the arrow okay this is supposed to be closed properly and not just yes so lastly we are going to have another boolean value of waiting which is going to have also a default value of truth because every upcoming tax we actually be waiting and then we're also going to be having a string of the tax id and this is going to be just a unique id and it's going to be generated with javascript so when we get there we are just going to uh know that so we've actually added a structure for the upcoming table let's go ahead and add a structure for the today's tea room for the today's step is just going to be pretty much similar so we have uh the table is going to have a string of title as well and it's going to have a boolean value of completed with a default value of force and then we have a table of uh approved with a boolean value of defaults so guys sorry for those things dogs on the streets and lastly we are going to have the table to also have a tax id so we could say tax ied uh let's just add that's a tax id so this is a string not just that id so we can just go ahead and save that so you know that's how it is right now you can see there is nothing there and suddenly you're gonna see the way we we are gonna make it in such a way that the table is going to be pushed uh from this migration into our database so before we go ahead and make sure that this can be found in our database we have to go over to the model and in this model here we just have to go over to the today so we wanted that the ones that we we can be able to feel we want to specify those ones so we can say protected or affiliable it's gonna be we can feel the title the completed the ones that we can actually change we have the approved so let me close this and lastly we have the tax id so this is also pretty similar to the upcoming so let me just go ahead and copy that and paste it so i can just paste that and save so we have the title as well the completed the approved but one thing that is remaining is the ability for us so also indeed the waiting because once we uh get these upcoming tags to today's stacks we want to change the weighting to false so we're actually done with the model and the next thing is to make sure we can run a command that can actually push all this thing and sell give us a perfect configuration for our database so just go ahead and open your bash and just run the php artisan migrate so let's just run my grids and uh we actually have some couple of errors from where uh we are not supposed to have any error so oh okay that means i'm making a mistake somewhere and that will be one of the tables so let's just check today uh that is actually coming from schema so this is not from the model you can just go over to the schema and i think this is where i'm making the mistake so this is a string so i misspelled that and that was why i had that error and let's run that command again and you could see everything just got migrated so when we click on our database we can see two tables we have the today's table the upcoming for the users laravel automatically add the users table migrations for us for to handle authentication but we are not going to be touching the authentication parts in this video so right now you could see we have the today so in the today everything we added in our migration is actually populated here and the struct and structure the way the same way we also said those things because when i click on structure you can see exactly everything that we added is exactly what you could see here so that's it for our migration so the next thing now is to create a seeder and we see that we are going to create a resource a resource it helps us to structure the way our data returns from our database and let's just go ahead and create a seed immediately so i will just open my commander once more and let me just increase this a little bit so i can just be clear on php artisan make seeder i can just specify the seed i want so i i need a today seeder so let me just run to this seeder and also i need an upcoming seeder so this is going to create two seeders for us so with the help of see that we can generate some dummy uh or some fake data that we can actually populate in our table as well for the upcoming seed i want to generate at least knowledge on five fake data and the way you can do that is to use the faker and we can get the faker from the factory and then we have to just call the create function then we now have to bring in our model so we could say for dollar i is equal to zero dollar i is less than five you can say dollar i plus plus and then inside here we can just call our upcoming model from our model project sorry from our model directory and then we can create some array of our objects so we can we have the completed we could say that false we have the title we can set that faker so this is supposed to be faker not just fake so i prefer to use faker let me just go ahead and close this then we can just uh put this for the title just going to be a sentence we can actually use text but let's just use the syntax and i can see the number of words to before and again i don't want any variable uh weights to be added to us so i want a very nice sentence then we can set the approved to false we can set the waiting so by default every waiting is going to be true whether we add it or not then we have the tax id we are going to be using a string so the string we are going to be using is going to be coming from the illuminate support so i can say illuminate we have uh to go over to the support so i think i spelled it strongly illuminate supports then we can bring in the string the string class which when i oppose actually use a random string of up to 10 liters so that's it for setting up a fake data and right now let's just go ahead and populate this data in our database so right here i can just run php artisan we have to use a dbcd which is going to select a single class because i don't want this to be on today class uh today tax so we are talking about the uh i think is the op yes upcoming seeder unless hit enter and i think we are making a mistake something is not properly set and i think it's because we didn't add a the first one happens to be this one but what is the second problem we have an array and that's uh fixed it and let's go ahead and run that command once more again and right now you could see we have actually seen the fake data into our database and let's click on crm once more and go over to the upcomings and you can see we have five fake data we can actually use as a common tags and does it for the upcoming you can actually uh do this for also the today tags uh i think we can still go ahead and do that in order to have a complete cycle so for the fake i i just have to grab this and go over to the today seeder so here i can just paste that and uh i can just change this to today and it's gonna be coming from our model so for the string again we have to bring in uh bring it in from the illuminate so you can just uh bring in the support and we have the string class and that should solve it but for this one we are not going to be needing everything here we just have to take the ones that we need so we need a completed the title and also the approved and if i want to uh populate all the let's say all the seeders without specifying each of them i can just run the php artisan we can adjust my um i think okay we can just migrate fresh and then we can see so what is what is going to do is actually clear every other migration and then seed it for us so we have migrated fresh and seed and that's because i'm using the double column here so you could see everything just run perfectly and if i click on this again click on to this uh hopefully we should be able to see some data oh i think i i made a mistake we actually played the i actually declare the table not not exactly so i think php artisan db seed i think this should work so it's been longer i use laravel oh it didn't work but let's just go ahead and specify this uh by itself singularly and also the today seeder um so we are having an issue again taxi doesn't have a default value and tax id should have a default value let's go ahead and copy this because every unique tags must have a tax id and we can just okay this already brought in and let's run that again so we don't have an issue so hopefully we should be able to see two fake data's in these two tables so we have today and also we have the one of op coin so right now we have actually uh showed you how we can actually use the migration the model and also the seeder one more thing that is remaining before move ahead is to create our api is to use the resource and then we can actually use the postman to start creating sorry to we can actually create our api then we use the postman to start test running our api and now let's go ahead and create a resource all right so let's go ahead and open our commander and what you just have to do is run the php accession command make resource and then we can create a today task resource so this is going to create a resource file for us and the resource file is located in the app folder and you could see the resources folder here so you could see we have the today tax resource so i'm just naming that today tax resource at least to look very good but you can see that it just had to extend to a json resource and return an array of anything that's in our database so we are actually making use of the today tax table so it's going to be returning everything for more to the tax table and right now let us go ahead and show two common examples of how we can do that but first we have to uh start making use of our api in our house folder so in your ads folder you're gonna see the api file let me just go ahead and clear this i don't want those things and let's go ahead and start creating our api so the first thing you have to do is to uh create an upcoming api of course that's gonna be uh the first thing we're gonna be handling from our design as well so i can just say routes up coming so it's gonna be return the callback and then inside this callback we can just give this an upcoming and then we can grab the upcoming from our model we can grab all the detail from the upcoming so i can just return let me just go ahead and return upcoming it's going to return an object of all the upcoming tags in our for more api and let's go ahead and give that a try so over here i can just say localhost i can just say http localhost slash api slash sorry for that guys uh we actually using the crm dashboard so not localhost api slash we have the upcoming and we're gonna be making a get request so it's already done get request and let's send so you could see we have every data and it's returning everything from other base but with the created ads they updated at everything that we just set up from our migration is actually being returned but if you want to control the structure just like i mentioned earlier what we just have to do is to now use our resource so we've now actually created the upcoming tax resource and let's just go ahead and do that so here i can just remove everything here and just change it to upcoming resource and it's going to create an upcoming resource file in our resources folder so the first thing we have to do here is to control the outflow of our uh of our data from our table so for this one when it accepts the array so i kind of made mistake i said that it's going to be grabbing this data from the table but sorry it's going to be exceptional array so the array is going to be accepting we just need some specific data from the array so the first one we need is the id uh which is gonna be the this id the second one is the title which is gonna be the title well so we actually are doing this on the upcoming resource so we also need the completed which is going to be a completed as well we also need the approved which is gonna be the approved we also need the waiting which is gonna be the waiting as well and lastly we have the tax id so we are not gonna be doing anything with the timestamps so we don't even need them i'm just gonna leave those ones out and make sure that my keyboard is in english i can now save so using this is very simple as well just like i said earlier using that we just have to go over to the to the api file so i can just close those so in the api file here you can just say return of comment resource you can just hit enter then we just have to return this as a collection or can we pass the upcoming we can just get rid of this one and save and your postman just go ahead and send the request again you could see we have those data and those values without the timestamps so that's why the resource is a very good thing to actually use to control what is going to be returned from your api request so the second one we have to do is the today tax so let's just go ahead and do that so you want to get rid of this again and you just have to return an object we have the id so array of objects we have the title so english is not my culture but i'm trying as much as possible to actually explain this in such a way that everyone can understand so we have the completed as well we also have the approved and lastly we have the tax id and then we can just close that properly and using it also is in our api but for now we are not going to be using this until we get to that point so we have actually done the necessary things and also just created a single api for the upcoming then as you proceed we are gonna be completing the remaining apis then we can now go ahead and start our designing and connecting everything with the vgs so if you really come this far do make sure you hit the like button and also the subscribe button welcome back to this laravel course so right now let's just go ahead and complete the api for our application so the next thing we have to do is to add a new tax the first one i didn't comment it so i can say get all the upcoming tags so comments are actually a good way to recognize what you're working on then for the other new tags we're gonna be making a post request to slash upcoming and uh we can just return a call back here inside this push request we are going to be accepting a request and we come up that to the request then from the request you are going to be grabbing some couple of data but we want those data to be inserted into the upcoming table so we use the upcoming table then we can create you can create a new data this is not a fake data as well this is just the data we are going to be sending from our application so we have to grab the title from the request we also have to grab the tax id we can actually generate a unique id here what is more relevant when we generate a unique id from application because we are still going to be using that unique id to actually perform a filter operation that's going to delete the one that is on the ui of our browser then we have the tax id then we also for the waiting [Music] we have to grab the boolean value from the waiting then the next one is delete the upcoming tax so i'm just gonna screw this up so i feel like increasing the font size uh let me just add one to each or two let me just add two thing to be much better because i want it to be a little bit bolder then we can just make a delete request to slash upcoming for a delete request we actually have to grab the tax id so here we can just grab the tax id and for the function compare the tax id and then the callback then inside here we just have to use the db.table so don't be surprised when i'm using adb's because i want you to actually have an idea of how you can actually use both of them but let's go ahead and import that db before proceed so i have to use illuminate actually spread it strongly illuminate supports fast sets then we have the database then in this delete request we can reference the table so the table have to be have to be upcoming and we have to uh target the one that has that id with we are clause we could say the tax id is equal to this tax id over here so that's how you can actually do it then we get the data then after we get the data we can actually delete that data so that's how we can do it then we can return the 204 to actually show that that tax has been deleted so that's it for the upcoming we also have to create for the daily tax or the today tax so let me just commend this properly so we could say today tax so the first one is a post request so we have to say that daily tags then we have a function which is a callback that is going to be accepted the request just like the one of the upcoming and we can map that to that request then inside this callback we just have to return so in our model we have today from our model then we could say today creates then we have the id we can grab the id from the request we have the title then we have a request title and also we have the tax id which is uh the request tax id so these are just the things that we're going to be grabbing from our api we also have the deletes so these are the two this thing we are we're going to be using for the daily tags or the today tags so we could say actually i kind of mix things together but uh okay i didn't mix it together but i think we we have okay okay yes i didn't mix it together everything is defined so we have the deletes uh today tax so that's gonna be a route delete request then we have the daily tax and don't forget that we must always use the tax id to recognize the one that we want to delete inside its function we are going to be getting the tax id then we can still use the db i can just go ahead and grab this line of code without even wasting time just paste that all you just have to simply do is to change the name of the table to today whatever uh giving it has been given to like whatever the name is sorry so here we have today's so we're gonna be using today's for the table name so after that you still have to return it 204 and that solves it so we actually done uh building our api and right now let's just go ahead and start uh test running our api to actually see whether it's going to work perfectly so the second one is the upcoming post request in our postman we are just going to be making a post request to slash upcoming come over to the body select row and set this to json then here there are some parameters we are going to be passing we have the title tax id and also waiting so here you have the i think is the title this way so we can say new title then the second one is the tax id which we are just going to give it a random id oh sorry guys for that so in this row stacks id so we can just give it a random id then lastly we have the waiting which is just going to be true by default and let's go ahead and make a post request so you can see automatically that's got added and when we check in our database over here in the upcoming we should see the new title and also with the new id so this is actually working perfectly the next thing we have to give a try is uh the one of the delete so we want to make a delete request to slash upcoming slash the id of what we want to delete so in our database uh we actually using the tax id so i just have to let's say grab the tax id of default item and in our postman i want to select a delete request here and then i can just add slash i can just add that tax id so set this to none and kind of reduce this and send so you can see we returned a 204 and our database when we refresh we shouldn't get the fourth item again so we have one two three five and six so that's how we can actually uh delete so let me just go ahead and delete one more you can actually see that the last stacks that we added should be deleted and let's click on upcoming again so we don't have we shouldn't have the item six again so everything is working perfectly so we don't need to waste much of our time again trying to actually test run our api since everything is working perfectly and let's go over to the view part of this or the ui part of this so welcome to the ui part of this tutorial right now we are going to be making use of the vue.js and let's go ahead and create some couple of components inside these components folder the first one is going to be the app.view the second one is going to be the left body dot view the third one is the right body those view and lastly we are going to create a body dot view file as well so inside this app dot view we are going to be using these as just a single component then we can interconnect other components to it so i think with the help of vito just go ahead and install the veto so with the help of this uh extension or plug-in over here you can actually use the vjs boilerplates then here we can just have a single class and this is going to be the class that we are going to put down in our css then inside this class we can call a component so let me just go ahead and call a body component because we've already created our body component and because we just added that component you just have to import the body from body and then here you can have components then inside the components you can just add the body so that's how vgs realizes or understands under other companies so what you see here is exactly that we are going to be using this as the registration key for each component in our app.js file over here so let's just go ahead and register the components that we actually created i'm going to get rid of these example components we no longer need that so i just have to use the view components and the first one is the app components we can require component slash up dot view then we have to use the defaults we also have to oh sorry guys for that so i was thinking is going to close the left pin so we have also the second component which is the body components then we can require the components as well slash body dot view and this all that we just need over here so i just have to require the default as well and we don't even need to do any other thing so i think this is in a wrong place let me just move this to where it should be in the webpack so this should actually be here so we actually don't register in the component so we can now go over to the app component uh one thing again is you need to make sure that you come over to the views and because you're using the app component changes to up not example component again so you can say app component so we can just save that and that's how we can actually uh make use of those companies so when we go back to application and uh let's say let me just go ahead and run the npm run watch it should actually refresh our application by default and also whenever we save anything in the components is going to actually print those things out but we i think we supposed to experience some error because we've not yet added this so let me just go ahead and save that so everything is compiling and we have an empty let's say an empty something here so let let me just put a heading one of body and let's save that so you see automatically it refreshes and displays whatever we put down in our components so laravel is kind of very cool it's just like when you're working with api and your front-end library together you don't even have to build an api just like the way you use expressjs so laravel is still a very great uh way of building apps online so let's just go ahead and start everything that is very necessary for applications so in this body components we don't want to use the heading 1 so i'm just going to add another div and close that and it's going to have an id of body so if an id is just a unique selector for a particular element then we are going to have the left body component here and also the right body component then here we are going to import those two components so we have the left body from same folder so we have the left body and also import the right body from the right body so that's how we can actually use that and don't forget to register the components so you have the left body and also the right body and just go ahead and save those uh components and you can just go ahead and now open those components and type down the view and also for this one it did the same thing and the only thing now remaining is to put down the html and also the there css some couple of images that we're gonna be working with and these images is actually uh added here by me and i'm going to make available these images for you so that you can actually follow along in this tutorial and also i'll make available the sketch file that we actually previewed earlier so here we're gonna have a div with an id of left because the right the right one is going to be on the right component and then inside here we're going to have an image resource of image slash hamburger dot png so let me just make sure i'm in the right source so we went back one for the images.phd sorry png and uh we have also a class of profile then inside this class of profile you're going to have a hidden one of high somewhat let's say hi the name of the app user then we have a heading 2 of less make projects more amazing so i actually want to touch these html parts of this tutorial so that even if you are new to designing you can actually know how to actually style so what we are doing now is just a simple design that we are going to put an input with an input you can actually add a place for typing text so we can add a search so we have such a project and beneath that we have an image resource of images slash such.png as well then we need that we have i think that projects should work yes then we have dot a project so a project is uh let me kind of quickly open the sketch because i want you to understand what we are actually doing so a project is each of these projects over here is actually what we are doing right now so we have a project and inside those a project we have a boss color a boss color class with an image of source images overlay.png and then we have a span of just pt span so what we actually do uh do here is just listing these things out so i'm just going to quickly duplicate that was before we duplicate it one more thing you have to do is to add a heading 6 at the bottom here we can add a development to it so let's go quickly and duplicate those things one two three four five six because over here we have six projects so these things are actually the same but we want to just quickly change the name the second one is design and the third one is testing the fourth one is medium draft we have the testing then we have medium drafts we also have the landing page then we have add projects that's that wants to be the last one so that means that this access so here we have add project and for the add project it's just that we have to change the image to a plus image now we should actually get something in our ui so right now you could see we have uh something in our ui which is really really interesting so please guys i kind of realized that i'm doing this on the right component so just go ahead and cut this and paste it here and save everything should still work fine then for the right component let's go ahead and uh add the html markup which is now going to as well take time so this is where we are going to be doing most of the work so here we have the vue.js with a template we have id of rights then inside this the you're going to have a hidden one developments crom then we have a class of horizontal then we have an image resource of images horizontal dot png so guys i actually know that you cannot you can use uh you can use let's say bootstrap or tailwind to actually make things look very fast but i just want to quietly do this so that even if you are new to doing a ui design you can actually understand this uh in 2021 or at this end of 2020 so don't forget to hit that like button and also the subscribe button so beneath that paragraph we just have to add the tags and inside there we have our tags that we have heading to a heading two heading of today's tax then we need that we have a class of ad action inside that we are going to have an image with a source of images dot png so that's how we can just uh finish on that and beneath that you're gonna have an on ordered list so we have a ul.tax lists so i just have to make these stacks so let's go ahead and start the styling of our app we have actually done some couple things on the ui and right here we are going to start up first with the font so i actually want to show you a little bit uh problem that laravel has for using the font on styles.xcss so like let's take for example when i go ahead and add a phone face and over here i can give it a font weight of 100 and i can give it a source and i go ahead to select let's say custom fonts so i can just go over here select the custom font and save it's going to compile but you see over here it's not going to compile that font and which is going to actually result in an error but we're not going to be using it this way that will lead us to using something called node sas so quickly let's just go ahead and install node sas i can just uh expand this and make it look nicer so i can just run npm install so you want to install notes as version 4.14.1 so just go ahead and hit enter once that is done you want to go over to your packet.json file and the root folder and there are some couple things we have to do so under the script under this production you want to add a comma there and you're gonna on uh sorry add a key of scss with a value of node sas so you wanna watch for a file in a folder and we're gonna be watching the file from the resources folder uh actually we're gonna be watching from that should be sas and from there we want to compile it or output the results to public slash css so whatever file here or whatever css file we see here is going to be compiled back to that public folder but we are going to be using notes as we are not going to be using the laravel mix so you can actually uh i can recommend you putting these inside the css file for me that's the best so i just have to drag these and put it over there because if you see where to use the phones over here still going to have a crash but you may end up having some uh let's say you may end up having some error on your console just go ahead and ignore that he's just trying to tell you that he couldn't find his styles file on the sas which is not a conventional way of doing it but i for some people i also want to talk about this note sas that is why i said just driving over to this at css folder so right now let's go ahead and uh complete what we are doing so over here you can see just like i said you're gonna express some error but just ignore that and let's move ahead and you want to come back here and change this to s css not scsa so make sure you spell this correctly we are using the resources folder so make sure you don't add double s and whatever we do here is going to be compiled here so let me just go ahead and now uh add let's say save this and here we should actually get a result so let me kind of add a global style of color right and save and come here duplicate your or bash or your commander and run npm run at css so once this is watching just go ahead and receive that file so when we receive that file and so let's receive that oh sorry guys for that so when we received that you could see it wrote the css to that public directory and it's going to override that and also give out that same output and once you want to make use of the fonts we can now go ahead and make use of your fonts which is not going to result in any error but when we go back to that public folder you could see automatically we can now be able to use fonts from our directory or from any location using note size and for some reason i just wanted i wanted us to touch only to know sas because i kind of mentioned earlier that it's a crash course so even if you don't know how to use custom styling or custom sas files you can now use it with your with your note sas and cover with the file you can mix it together with your fonts from a different folder path so that's exactly uh these fonts that we're going to be using i'm going to make available these points on the github repository so let's go ahead and uh start immediately and let's take a get rid of that so the first thing we're going to be doing is to make sure that we can now properly use a font as well so i'm just going to call this myriad pro lite and it's going to have a font to it sorry for that font weight of normal and it's going to have a source of url so you just go back one folder and locate your css file and you want to select the lights font size uh fonts family so you you want to add another font and give it a name so this can just be any name you can just even name it someone or your own personal name and this is myriad pro regular and this one you want to add a font wait as well of normal and you want to give a url sorry not a url a source with the url of back to folder or a single folder then you want to uh let's select the one with the regular so i can just go ahead and copy this down maybe like two more times and this one we're gonna change the fonts family name so this is gonna be pro semi board so we want to change this to myriad pro semi board normal but for default our family you want to play this so we are kind of getting some arrow and that's because and you want to change the url to fonts slash so right here we are using semi board so i want to use this ami board and lastly we are going to be using uh i think we have every other one except for the board the normal both fonts so i just want to play these and for the oh sorry guys for that this is not the one that we have to we did so for this one i just quickly uh changed the fonts and i want to select the direct board fonts and here you can just change this to mario pro board and let's go ahead and save and when we check back in our public folder so checking back here you could see everything that we added in that size with the copy with the fact that we added fonts it's going to automatically come here and if we have an error we're going to be seeing that on our console so that's showing us that everything is working perfectly so right now let's go ahead and use this font to use this font is very simple just come over to your resources folder go over to the views folder and open the webcam blade file and at the top here you want to copy this down and you want to change this to styles.css and it's going to add that so let's just go ahead and view the source code hopefully when we click on this you could see that fonts over there in our styles file so with the help of node sas we can actually compile our fonts um everything will still work perfectly so the next thing we want to do is to show you how we can actually use variables from our css variables something like that so you want to add something called roots and we're going to declare some variables we're going to be using so we're going to be using h151 72b primary 2 hash one series 262 a for one so this is how you can actually use variables on css so i'm just going to go ahead and grab the remaining variables and add immediately then we cannot proceed so over here you could see we have some couple of variables that i just grabbed in and all these css variables you can actually see actually coming from our sketch file you can see all these things has different colors so i just went ahead to compile that so i just had it in mind to actually show you on how to use this so one of the very important thing on css is actually making sure that every uh element on the page does not have a default pattern so that's the way you can actually remove this and you can also remove the imagine you can just set it to zero pixels pixels and you can remove every outline you can also remove uh sorry set the box sizing to be butter box by default and you can also make that possible for other browsers so you could we can use webkits i think it's now obsolete this is not actually working but we can actually add one more two more things like release style we don't want any list to have any style and also we don't want any text to have the text decoration so that's how you can actually get rid of those things all right now let's go ahead and start styling our application so the first thing is to add the body which is going to take a position of relative then we have the font family and the font family we're going to be using is maria bo the font font face that we added at the top and we have a background color then we can use our variables with the bar and we can select primary one and here we can actually disable the scroll bar because i don't want the scroll bar to show so we could say web keys scroll over and here we can just display none and we can now hide the scroll weights and the way we can hide that is to say the scroll weight is zero so this is slow width and we can just set that to zero pixels so make sure this is double note tray and let's save and check our application and refresh and uh hopefully we should actually see a results so right now it seems like we are not seeing anything but here we have okay okay here we are having an error so like i said earlier if you have an error you're gonna see that on your console so on line 53 we do have an error on line 53 so this is line 53 so the error we have here is that i added double ampere size and let's save and check again and uh everything should work perfectly okay so right now you can see our application is starting to make sense the way it should make sense and everything looks okay and let's go ahead and uh complete the styling then we can go over to making sure the application can work perfectly but i kind of i kind of want to say that uh for the styling we're gonna be doing it as well with html where necessary but as we move ahead we're gonna be making sure that our application is going to be looking nice so i don't want to focus it on one aspect like styling and then doing html separately if it calls for that we do it but anyways we are going to have a conclusion by building a very nice ui then the next thing we are going to have is to disable the image select because i don't want the image to be selected so i can just say you may select none then we are going to have our aim container so inside this m container we're gonna have an id of body which is going to display grid so for here we have grid templates coulombs which is going to be 40 60 so what you see here is exactly what we are doing here we are giving this a 40 percent and we are giving this one is 60 then we're gonna give it a grid template area so the retail blade area is actually used to is actually used to position your layout manually so we're gonna have the first one which is the left and we're gonna have the right one which is the right and then we're gonna give it a padding 16 so for every angle should have a padding 16. then if you could call earlier we had this left id so here we have this left id and this is only what you're going to start start styling now then inside this body just break it down and reference that left id now we have to give it a grid area of left and that's exactly what we are using on this one and believe that we're going to have a pattern of 15 percent then we're gonna have a position of relative as well then for the hamburger the hamburger is exactly what you see over here this little icon over here so that's exactly what you see here but you could see that immediately we have the left and right and everything is kind of uh getting in shape then for the hamburger we're gonna have a position of absolutes at the top of zero percent ray left of two percent and i can just add a crossover pointer so this is this sounds as nothing but just make your cursor look kind of different when you over sorry when you hover that image so you can see mainly we saved we have the pattern of 15 percent i think then we have the hamburger to actually take the position of the top on the left of our two percent so that's exactly what you see here then we have the profile then for the profile we're going to give an imagine tub to stay away from the hamburger so we're going to give it a five pixels margin so then we have the header one which contains the highest somewhere that we can say the font family to the open sounds and sans serif so you didn't see me use open size but we're gonna grab that phone shortly from our google fonts so if you know how to do that you can just go ahead and do it but the way we can do that is to go over to google once then in google fonts here we're going to search for open source then look at oppositions here just go ahead and select that then over here you want to click on it and you can select as many font family or fonts sizes you want to see so you just want to select some couple of points then you want to select the import just go ahead and grab that and come at the top here so usually best at the top over there you can just paste that then when you save is going to reflect on the element that's actually using that font and beneath that we're going to have a font size of 34 pixels we're going to have a color or variable white we're going to have a phone to eat of 500. we're also going to have a chat transform of capitalize to actually make the first letter to the capital so you could see we have high somehow and everything is kind of getting nicer so we're not going to waste our time like styling the right side as well but i just want to show you a little bit of how you could use css then we have the heading 2 as well which is going to be have a font family of open sounds sensory font size of 16 pixels the color of custom gray and also a font weight of 300 so you can just go ahead and save that you can see the changes just uh kind of took place immediately and after this search you want to come back uh you want to come down under the profile and you want to target the search class so for the search class we're going to set the border you want to give a border reviews of 14 pixels and we have a padding of 17 pixels and 25 pixels so 17 pixels of top and bottom and 25 pixels of left and right then we have a margin top of 89 pixels at the position of relative then we have a background color of our 7070 we're going to reduce that to 50 and we give it a height of 53 pixels and also imagine bottom of 35 pixels then we can give it a width of 90 percent then let's go ahead and target the image inside that search so the image is going to extend a class called middle so we are just going to grab that and put it down so the middle is just like having an absolute class of of that element but it's gonna take a top of fifty percent and also left for fifty percent to actually make it to be at the center and it's going to have an opacity of zero so when i set the opacity to one then we also want to set the left to 25 pixels and give it a console pointer so actually this middle class does not exist and let's go ahead and grab that and add that immediately so like i said earlier just a position of absolutely top of 50 percent left of 50 percent and we actually use this translate to actually make it stay at the center perfectly and then we text align everything to the center but you could see we have the opacity of zero which will actually change to the opacity of one over here so that's just exactly what we did there and lastly you're going to have an input then we just want to get rid of the border i'm going to want to add a little bit of padding of 0.2 m and a background color of transparent then we give it a weight of 100 and a height of 100 percent and for the correct color it's actually that cursor that ticks you want to give a variable color of white and for the placeholder the placeholder text we're going to style that and we're going to give it a background color of on set the container of the placeholder itself then we can give the text color to the variable of custom gray then we have a font family of open sounds sounds seri and then we have a font size of 14 pixels so whenever it doesn't find open sas it's going to fall back to sensory but you've seen earlier how we brought in the open source so you want to go beneath the search class and you want to target the project class as well so the project class are actually the classes for for each project so take for example all this thing over here are just the project classes so we can just go ahead and save and view our application kind of it's kind of actually uh making sense and uh over here everything is working perfectly but like i said i'm not gonna waste my time on the css i actually want to touch this because i mentioned that there's gonna be a crash course so it's not it's not a uh a perfect course for learning css but if you have actually come this far you kind of have an understanding of how to actually use this uh kind of using notes as to actually compile your css and also how you can actually use font uh custom fonts on your css so i'm just gonna grab the css file i'm just gonna paste that and i promise to make available the css file on the github repo with the fonts and everything that you need for the styling so let me just go ahead and grab this css and add that so i've actually grabbed that and we can view our application and you can see that application is kind of looking nice and everything is kind of getting in shape and for this one i kind of realized that we actually made some a couple of mistakes that we're gonna fix immediately so over here come over to the left body then under this project you want to add a hidden tray so in this elementary you want to add projects respawn of just the number of projects that you're working on and you can just go ahead and close that spam and on before the a project you want to wrap everything with projects so you want to wrap everything with projects and use it to cover all the single projects that you're gonna be creating and the last one we just wanna add that and go ahead and save and check and you can see everything is kind of uh looking very nice and uh for the image is kind of big but at least we have a nice looking ui with our css and uh the only thing remaining now is for us to come over to the right body component and then we can now use the right body components to initiate uh sorry to initiate some requests to our api which is going to be grabbing our today tags and also the upcoming tags the api that we created initially so right now let's just go ahead and do that so i want to close all these things because we are done with the css we're also done with the package and we can just go ahead and close the left body and our focus is now on the right body component in the right body components inside these objects you want to break that up and you want to add a data function and inside this data function we're going to return objects of today tags which is going to be an array and also we're going to return upcoming tags which is also an array and then we have a new tax which is just a text of tax that we are about to add inside the upcoming tax that is going to be added later on to the today tax whenever we are done with any other tasks then we you need this we are going to add a created method then inside this created method we are going to call the function called this.fetch today tags and also this.fetch upcoming so let me just call this upcoming so that i will not pull make the text too long then we're gonna create those methods immediately so the first method we're gonna create is the up comment tags method and the second one is gonna be today tax method then for the upcoming we're gonna just call fetch upcoming we just a function and it's gonna be making some requests using the javascript fetch function so above this one i just want to quickly add a comment of get upcoming and inside our function we're going to call the fetch and we're going to be making a request to api slash upcoming then it's going to return a callback and also we have to catch an arrow in case we do have an arrow so i just want to go so that log that arrow then inside the callback of the then we want to use the structuring to get data and what you simply want to do is to map that data to the upcoming tags and we can just set that like that so every upcoming task is going to be uh the data is going to be assigned to the upcoming tax which you're going to be using it for loop to actually render it out so that's why you could see over here we didn't actually do anything meaningful yet but let's just go ahead and grab those data then we can just move ahead so for some reason i just have to console log this data then when i save and go back to the browser and open the console we should definitely get uh something uh it says these dots okay we don't have a function called latex we can just uh quickly go ahead and fetch today tax so this is get today tax so guys sorry for it being on the bottom so refreshing that same styles just like i said you can actually go ahead and add this time but i don't think he's it's going to help issues for now because i don't want to touch that expert i just want to use notes as so here we are getting an undefined and here we are making a request to slash api slash upcoming sorry guys i can't remember one thing i did here which is actually wrong when you use fetch you have to map your results to a json so i'm just going to click these so we could say then so the first thing we have to do is to get a response and we can map that response to a json and then it's gonna return the data and we can now map the data to these dots upcoming support data so even if we go ahead and consider a lot of this data we are still going to get some couple of things from our console so right here you could see in our console we have five tags that we added to our i think we use seeders yes we use larval seeders to actually add that to our my mysql database so let's just go ahead and save that and right now let's just go ahead and uh display the upcoming tags before we move ahead so quickly beneath this d you want to add a d with upcoming class and inside there you want to have add tax what this is going to be the plural and inside the ad tax you want to have a heading 2 or coming so you want to make sure that this is actually small data then we have a class of add action then inside there we're gonna have an image and for the source we're gonna go over to the images.png and believe that you're gonna have a form then for the form we're gonna just leave that action but for the submit button whenever we hit submit we want to call the function called add all comment tax which we are going to create in the method section and inside here we have an impute the type of text and a v model of new tax so the new tax here we are just binding the new tax with these new tax over here so whenever changes are made over here it's gonna bind the changes to these data new tax which i initially made sure that it was actually a text then for us to list out the upcoming tasks we are going to have a url with a class of tax lists and then we're gonna have an app and a list so for the list we're gonna use the v4 so with the help of v4 we can actually do some uh loops on ujs so we're gonna be using looping with the upcoming tax so this is supposed to be upcoming tax um i think upcoming okay this is upcoming so but we can just give it an upcoming task in upcoming so this is just a simple thing and then we're gonna give it a special key so each each item is going to have a unique key let me just close the left pane and it's going to we're just going to select the upcoming task of id so sometimes ujs looping kind of make me convert to be confused but very soon i will be conversant with uh using view js a lot because recently i've been using react.js so that is why i cannot be a long time in some things but we're going to have a class of info and we're also going to have a class of left so in this left you're going to have a label so for the 4 we just have we just have to get rid of that but add a class of my check box and inside there we're gonna have an input which is gonna be a type of check box and we're gonna give it a name or test which usually uh for now it doesn't really make sense but just for some reason let's just leave it and we're gonna bind it checked to the upcoming tax that's completed so whenever it's true it's gonna be checked but whenever it's not true it's gonna be false then we want that whenever you check it or whenever you click on it we're gonna call it method called check upcoming and we're gonna be passing the upcoming tax dot tax id so we just have to make sure that everything we do here we spell it very correctly and then we can go ahead and see one more last thing here you just want to add a span so these things are relevant because of the way we did the css then we need this label we're gonna have a header for which is going to accept the upcoming tags the title then beneath this d we have we're gonna have the right so for the right part of this is where we're gonna be displaying the text we have the okay it's not actually the text but rather the these icons over here so these little images or icon you can see over here with the button that is going to be showing whether the work is in progress or approved so we have an image we resource sorry for that of images and uh it seems like it is not showing okay show it properly now we also have another image then this one is dell that's delete but this one is going to have at click whenever we click on the image we want to call a method called delete upcoming so this anime tells us that we're going to be creating shortly and we're going to be deleting with the tax id as well so you can say upcoming tax dots a tax id so we can just go ahead and save that and let's check in our ui you should have something that looks really interesting over here it's kind of uh not properly under arranged but let's just go ahead and fix that so right here in the add tax you want to close this with a for your comment we have to close this over here so that means that this div we're gonna get rid of one thief and let's save and check again and right now you could see everything is uh properly arranged but we couldn't see our tasks and that's because we are making a mistake over here we just have to make sure that we type down the correct text and hopefully we should see something so we are looking from there so hopefully we should see some results and i think it's because of the methods that we've not yet created so if we kind of play just go ahead and add a method called add upcoming tax so add upcoming tax so the name of the method is let me just copy directly from here and go down and paste that and let's see hopefully we should get rid of that arrow and right now you could see that everything is working uh perfectly so when i click here it's going to call a method called check upcoming but as much as we've done so far you could see that we cannot get we can be able to list out upcoming tags so the only thing remaining is now that whenever we click on this it's going to be making some requests that's going to be storing it on the today tax uh table in our database and then whenever we refresh those datas are still going to persist on our ui because they actually coming from the database and right now let's just go ahead and work on those things immediately so we've been able to use the form over here to actually bind the values that we are typing here so if i say i um somehow it's going to buy that to the new tax over here and with the help of b model from geojs so that's exactly what we are using over here so we have we are now able to find that but the only thing remaining now is to make use of that data and actually put the data in the ui and also store it through the request to our database so if you could recall you could see that whenever we hit enter here it should actually call a method called add upcoming tax but because we've not yet uh done anything here it's going to refresh and we're going to stop that refreshing and actually uh use whatever we typed on a new task to actually make whatever we want to make then we can we can just simply say either prevent defaults then we could we can actually say uh let me just go ahead and consider all these new tax and we can just go ahead and save that so hopefully when i say some and hit enter it's not going to refresh and in the console you could see sound so the more i hit that the more it's going to increment so if i if i type down another thing and hit enter it's going to implement that so we can just go ahead and play this and going back in our editor whenever i want to add a new tags i want to check whether the the tax is greater than 4 if you could record javascript start counting elements in the array from 0 1 2 3. so if your item is four it's going to be zero one two three if your item is five it's gonna be four because it's going to start counting from zero one two three four and we want to make sure that any item in this upcoming data here in this all coming array data is no greater than four which is five so the way we can do that is to simply say if this dot upcoming dot left is greater than 4 we just have to alert the user please complete the upcoming tasks but in the case it's not greater than 4 we can just go ahead and create a new tax and we can just simply do that with uh creating a new object and we have the title which is this the new tax we have the waiting which is true by default whether we set it or not because from our i think from our controller we didn't set that then we have tax id so the tax id is going to be just a unique random id which is going to be mud.random and we want to set that to string and set this 36 dot substring everything to several characters so we can just save that and the next thing we have to do is to make a post request so over here and just say post request then we're gonna make a fetch post request to api slash upcoming and it's gonna take a method or post so this is supposed to be on the quotes then we have the headers so headers here we just have to set that to content type of application slash json and then we can send the data through the body we want to stringify anything that we are sending then we want to set that to new tags and lastly we can use the then and we could say this. upcoming we want to inject that into the upcoming tax at the bottom we just have to use the push because it's an array and then we can inject that new task so the only thing here that is going to be making it recognizable by the application when we refresh and also the way it is right now is the tax id so this same tax id is going to be sent to the request and it's going to be stored on the database so that we don't have 2d different tax id so let's go ahead and save and give that a try so i can say new tax and we should get that a lot because over here we already have five and you could see that we can't add another tax so the next thing we have to do is to add another tax let me kind of increase my brightness to the highest so adding another tax is gonna be very simple but one more thing we have to do is whenever we add a tax in case it does work what you just simply have to do is to clear or reset new tasks so you just want to say these the new tags is equal to an empty string the next thing we want to do is to delete a tax so we created we added a method on the delete image here called delete upcoming so we just have to create that we need this add upcoming tags so i want to uh create a method called delete of coming tax which is going to call the method called delete of coming and here we have the tax id then we can say if confirm because you want to ask the user whether are you going to delete a tax we could say are you are you sure something like that then if these happen to say yes we can go ahead and make a fetch request but this time it's gonna be a post request to slash api slash upcoming and we we have to make that with the tax id so i forgot to put that and then we can specify the kind of request we are making which is a delete request then to the promise we are going to have a response so in case we have a response as we did on the previous one you just want to map that to a json and uh then you can grab the data so for this one we are not going to use the structuring but we can just say this that upcoming is equal to these dots upcoming dot filter so with the help of filter we're gonna filter out the item from our upcoming using the tax id so this data here does not really make anything out to happen i'm just saying that in case maybe you are returning something from your request you can just get it from the data as well so over here we are going to be filtering with the tax id but for this one i'm going to map it to id so make sure this is in double parenthesis and it's going to have a callback it is going to be id the id is not equal to the current tax id that we pass through the function so let's save that and give it a try and hopefully when i click on this it's going to ask me are you sure i say yes it's going to make a request and get rid of that i'm going to click on this and hopefully when we refresh our application we should only see three items so whenever i refresh you could see we have only three items and all these things are using the tax id just like i mentioned earlier and in case we don't have an error we want to catch that and also and you just say clg arrow so we are done with the upcoming tax the next thing we have to do now is to accept an upcoming tax so whenever we check on these upcoming tax we want to move these stacks to the today's tax and that will now lead us to working with the today tax array that is actually at the top here so what i have to do is at the bottom of this delete upcoming tax you have to add a method called check upcoming tax so you want to create a metal code check check upcoming which is going to accept the tax id as well so we could say if this.today tax dot lead is greater than four just like we did earlier we could we can just alert that the user so it's greater than five actually not for like i said that uh javascript starts counting from zero so we can say existing tax so sorry complete existing tax and then we can just refresh our browser else in case it's not greater than five we can just call the method called this dot add daily tax and when we add daily tax what is going to simply do is to add it to i i i'm trying to remember because it's kind of three days i did this so for the ad daily tax okay he's going to add these to today tax and also whenever i actually add these to today tax we also want to get rid of it from the upcoming tax so this exactly what you are doing is going to be a two-way thing the add to daily tax is going to also make a request and add it to the database or sorry to the table of today tax while it's going to make a delete request to the upcoming tags he's going to remove it from the ui and also remove it from the table as well from our database so we're going to create a method called add baby tax first of all let's go ahead and call a function called or just make a request called delete these tags from database so we can just make a fetch request as usual to api upcoming and then we are going to be making that with the tax id that is passed down then we say this is a method of delete and then we're gonna have a callback then inside this callback we are going to have uh to delete that from our upcoming tasks we could say this dot upcoming dot filter just like we did earlier and we are still going to filter out the tax id and map that to id and we can say the id is not equal to the tax id so this should solve it we are having an error from here we are not supposed to be getting an arrow so let me kind of do this this way then we are not supposed to be getting an error it is not supposed to be so let me kind of comment this out and i don't know why we are having an arrow i think that is because i didn't add a corner over here this is oh oh sorry guys this is inside a function which is totally wrong this is supposed to be outside and i can get rid of that and i can now add a comma here and that should fix that error so sorry for that kind of got uh distracted so let's just go ahead and complete what we started so we can have it then which is the callback so you want to say that this dot upcoming is support to the new filtered array so you want to take the tax id and map that to an id you see id is not equal to the tax id so let's go ahead and save that and okay when i do this it's gonna it's gonna delete this from the upcoming but it's not gonna be added to the daily tasks let's just use one and give it a try so you could see it it got it deleted uh actually it's not delete it suppose it's supposed to be checked so it should nothing actually happened why so let's check whether we don't have an error or maybe we are not yet using the method so we have check upcoming which is gonna let me just kind of check and hopefully we should be able to see that okay we are getting an error because okay it couldn't go through because we've not yet added this method called add daily tax so i can say add daily tax i just want to grab the name over here and it's accepting the tax id i think yes and let's go ahead and give that a try again so when we add you see it gets rid of it rid of it from the ui and also he's going to try to add it to the to the tax today tax but you could see it didn't add because because you've not yet completed that so we're actually done with everything on the upcoming and let's go over to the today tax so the next thing we have to do now is to add to today tax so i want to add to the tax so i can now get that tax using the tax id it's just very simple with the filter so we could say this.upcoming.tags sorry.filter not tax so tax id mark it to id you could say id is equal to the tax id and it's going to return an array but we want to return the object which is the first and we're going to make a post request so the post request is gonna use the fetch as well and they're gonna make a request to slash api slash daily tax so we did actually create all these api initially and it's going to be a method of posts then it's going to have a header a headers with a content type of application slash json and with a body of a stringified tags and lastly it's going to return a promise so we're gonna add these to the array of today tags we wanna add it to the ui which is very simple we can just say these the today tags don't shift we want to add it at the top then we can just spread the tax or you can just go ahead and just type down the tax because it's still an object in case there is an error we want to catch that arrow and we just want to consider log that's l so this one should actually do something nothing happened y so we have the add daily tax and uh let me kind of consider the tax tax and let's go ahead and add a tax we could say cook a food go home i'm just adding a tax of course it will be very dumb for you to use something like this to add a cookie food because this basically for projects and let me say go to school let's say revive your work and let's say sleep by 3 p.m and let's go ahead and go home so here we are able to get exactly what we are looking for it's kind of refresh okay guys i actually kind of know what the problem is right now the problem is that the problem is that we've not yet completed the ui markup for the today tax so we actually done we've actually done everything for the upcoming tax and let's go ahead and complete everything that we need for the today tax and also one thing i notice is that when we added the upcoming tags he didn't make that request to the he didn't make the post request to the api slash upcoming which is actually a problem and we can just go ahead and quickly fix that and that is i think is because we didn't use headers we used header over here and we can just go ahead and new add a new tax and refresh so you could see it actually got added to the database and the request went properly so let's go ahead and add a ui markup for the tax list so which is a very simple thing as well just like we did on this one so we have double tax list but this one is for the today tax so here we're gonna have an loi at least so this list is gonna have a v4 and we are looking for tax in today tax so let's make sure that we're using the same model so are using small t over here and here we are also using small t we don't want to make it uh capital t and you're going to make this to have s so here we can use the v bind and we are binding with the key we set it to the target.id then we have the info as well and inside the info we have the left and right so it's probably everything that we did here so we have the info the left and right i just have to grab everything that you see over here and i can just paste that so everything inside the info i think i did the wrong thing now okay let's just go ahead and grab everything from the li let's just grab the li together and just replace these so you just want to change these to tax and you want to change this to today tax so this one is just going to be stacks and uh for this one we are going to call it update today tax which is going to be a completion for our crowd api so we can just call the method of day-to-day tax and we're gonna be updating with the tax id and also this one is tax but completed and this one is tax title so let's go ahead and save that and let's kind of add and when we clicked on that we kind of got some cop love things that are not really necessarily good so for this one is not delete upcoming this is called delete tags and for the chat box okay we've not yet created this method called update to the tax and i think this is because we actually change the this to small today tax and we are talking about length so when we are talking about length we should be talking about small length not a big length so hopefully this should fix that error oh yes you see having that length issue and we can go back to the daily tags and kind of try to fix that and here we are using that same command case or bevel case and hopefully steer them fixed so sorry guys i kind of realized that this was today tax not just tax oh my god sorry guys for that so it is kind of funny so sorry guys so i tried as much as possible to figure out the issue so when we check on this we shouldn't get that error so right now you could see that it got added to the today tax so we don't have an error on that again or we don't have any issue on that so the tax is kind of scattered not properly arranged and i think it's because we copied directly from the upcoming tags and most things here it doesn't really seem to be the way it is whenever the namespace is going to fix that all right now when we refresh our browser the tabs over here is going to disappear because for now we've not yet actually started grabbing tags from our database so we're going to create a method called fetch today tax so if i refresh over here you could see the today task guest disappeared so quickly we can just go above the add daily tags and page data so we have already faced today tax which is going to make a fetch request to slash api slash daily tasks and it's going to have then a promise with a callback of the response and we just want to map that to a json and then we want to grab the data with the structuring and we can say this dot the tax is import that data and we can just go ahead and catch any error in case there is a single error so we could just consider log that error what is it again am i doing anything wrong oh yeah i'm doing something wrong here because this is supposed to be wrapping the parentheses and [Music] okay so that fits that so hopefully when we refresh we should we should be able to get something if everything works fuckingly and i don't want that so let's kind of change this to a coily brace and let's kind of also lock that data to actually check whether that detail got returned so checking out our course so uh we couldn't find something because it said that he couldn't find he couldn't make a request to slash daily tax so we're making requests to slash daily tax and once again i made a little bit of mistake still not allowed whenever these kind of things that do happen i usually suspect something from our middleware because the normally the larval doesn't allow some particular kind of request so i usually just add something like my routes over here in order to avoid something like this in the future so let's just go ahead and add this so i just added as an exception so that i wouldn't get an issue but hopefully that should help solve that so when we refresh it still didn't work and if that didn't work i think we can go over to our routes and check whether we actually did our other routes and over here we have to add a tax and also we have to delete a tax but we don't have to return a tax which is totally wrong so this is add a tax so we kind of forgot to get all the tax when we are building our api but let's just go ahead and do that so that's very bad for me so we can make a request to daily tags and we are not passing anything from our request we just have to return a call back and inside here we just have to assign today tags to today do i have today i think we have today or yes we have a model called today did we bring that in okay over here we have the models today and we can just return to the resource collection to the tax so if you can recall for the resource routes this uh sorry for the resource this is only what we are going to be returning the id the title the completed approved and also the tax id you can just refresh that and you could see we have oh my goodness oh my god we have a bunch of tags that we've been trying to add but right now you could see everything is working perfectly and let's go ahead and work for the handle for the delete today tax and then everything is going to be working moderately not like uh it is showing right now so that means that uh we didn't have that initially but we've added that and now not only those two adding one more thing called delete today tax okay that would that wouldn't be the last thing but after we delete today tax we have to also update the tax so i can just simply add uh delete today tax beneath our today tax delete today tax so we could say delete tax with the tax id so you want to make sure that the delete today tax is actually coming from so over here we have delete tax it's actually coming from today tax which is the tax so we also have to check for the confirmation now we can make a fetch request to get rid of that from our database and we are going to delete that with the tax id and then we specify the kind of method that we are using so we have delete method and then it's gonna return the promise with a response uh this one okay let's just mark that but it doesn't really uh do make sense for us so this is the main important one but we're not gonna be using anything like data we just want to make it a request and do whatever we want to do so we have if confirmed so i think i'm making a mistake again yes and that should fix it so you can say the today tax is now equal to a few saturday tax and usually we use the tax id and map that to an id and then we can say the id is not equal to the tax id so that should solve it and lastly if there is any arrow we just want to catch and display that error so we can just go ahead and save that and i realized i made a mistake here so this is supposed to be a comma and you can go ahead and save and uh let's now let's try again and kind of try to delete something um right now you could see we deleted our first item and if i refresh the first item doesn't still appear and we can now go ahead and delete as many items we want to delete from here so at least i can delete to like four items and it's going to delete all these things so right now you see we have some couple of tags without we have in our today tags one more thing is whenever we click on this we want to go ahead and update our database that this tax has been deleted and it's going to actually get rid of these tags from our ui elsewhere and also getting the feed from getting of the tax from today tax and right now let's go ahead and do it because that's exactly the last thing that we're gonna be doing so above the delete tax method over here we have to update today tax so this day tax is also more like a daily tax but i just wanted us to have an idea of let's say if you don't want to delete a completed tags of how you can actually uh use the method to also do that so we can just call the method called update day tax which is going to take the tax id as well and don't forget to put the comma and then we have to also add some confirmation tax completed then if the user happens to say yes or happen to click on confirm then we have to make a fetch request to slash api slash daily daily tax slash the tax id i hate doing these kind of mistakes every time then we have to specify the method to delete because we are actually going to be making a delete request so we have the then the promise callback which is going to uh map any callback to json and i don't think we actually need to do anything for now so i just have to just return that but for this one we're also not going to do anything we just want to call back but inside our callback we just want to say this.today tags is equal to the computer tax computer today tags and we're going to be filtering with the tax id and we can see the id is not equal to the tax id then if there is any error we just have to catch and display that error so we can just consider log that error so that's it for the update tax and we can just go ahead and save um we can make this uh make use of this method from the today tags we are using the update data so make sure you're using the right method because if you use the wrong method it's not going to work the way it should work so i cannot paste it this code immediately integrated and we can just click on that you could see it get rid of it from this ui and when we refresh we only have three tags and let's try again uh i think both tags have a same unique id and let's say new tags let's add this to the today tags and also add these and refresh and get rid of this one refresh so you see we have everything working perfectly so we can now see draw the sketch of the app called a ui designer then we can see uh leave the up from our foundation i think i misspelled that then we can say stats the project and lastly complete the project so let's say the ones we are going to be doing today i can just select this and it comes over i can also select this and it comes over i can also select this and it comes over i can also select this and it comes over and when i refresh you see they stick that data and whenever i'm done with this one is it goes away i can also delete and this one i can also delete and i and this one also i can also uh start the project and also lay the app foundation so that's how we can actually build a customer relation uh customer relations relationship management application that i can that we can actually use to assign tax to our employees and if you want to use this like using this to manage your tax daily you can just go ahead and make this uh in a more advanced way and then uh making it such a way that you can actually have different kind of projects and when you click on it is going to list out what is going to be done for that day or what is going to be done for that project so this is it this is how we can actually add a tag so for you right now you just have to click on that subscribe button and also you have to click on the like button so make sure you do that and once you do that it's going to come over to your today tags and you're just going to complete those tags so thank you for watching once more and make sure you hit the like button and also on the subscribe button and see you on the next video bye

Channel: Bolt Skills

Views: 41,050

Keywords: PHP Laravel & Vue Js Tutorial 2021, Customer Retail Management App Like Monday.com, Laravel Course 2021, Laravel Tutorial 2021, Larave & Vue Js 2021, Customer Retail Mangement App with Vue JS, Laravel Api 2021, Laravel Tutorial & Vue JS, Free code camp, Traversy Media, Php course 2021, larave php course, Vue js and Larave Course, Laravel Tutorial 2021 Video, Vue Js and Larvel 20201, Laravel Crash Course, Vue JS Api Course, Beautiful UI Dashboard, customer retail management

Id: sH75VEfQKSc

Length: 138min 47sec (8327 seconds)

Published: Mon Dec 14 2020