Full Stack Vue.js & Laravel 7 - Build a TODO App with CRUD (CREATE, READ, UPDATE, DELETE) tutorial.

hi welcome to my channel please subscribe if you haven't done it yet fine hi everyone and welcome back to the channel so about three or four weeks ago I created a larva 7 crud application and in that tutorial I promised I will create a lot of a7 and UJS crud application as well but when I promise that my computer memory went off gave up the fight so that's why I have to take a break but now I'm back and I'm created this crud application as you can see on the screen it's created with level 7 and UJS so we are able to create read update and delete without any page load and we are saving the data with level 7 at the back end we are using a MySQL database and of course UGS on the front end and a little bit of bootstrap 4 as well ok so as you can see we have a list of two do's and we are able to toggle them as completed or in completed as you wish or you can edit each - duze if you want to however you want you can toggle back as in complete again and you can delete them as well if you want to ok so we are performing it without any page load or we can add new - dues to the list for example and you are able to toggle them and if you are doing a page load as you can see we grab all the information from the MySQL database and display it to the user ok so if you are interested please follow me in this tutorial and the code will be in the description so it's give you an extra help as well ok so let's just start it ok so let's just start this project first of all open up a command line and let's create a lot of a new lot of a7 application with view yes so open up it come online and type in la Rivera new and whatever your application name in my case Mooji has to do okay you take a couple of minutes right now it's gone so let's see being inside this new folder okay now we are inside this folder let's go to the lot of our page documentation front end and front end scaffolding and let's run this composer require laravel UI command copy and paste enter it will take one minute again right that's done let's go to the next step we want bootstrap and bjs so I usually use this PHP artisan UI view - - out so let's copy it and paste again hit enter to run it okay so now we have bootstrap and you just included and also we get authentication scaffolding as well out of the box although in this project we don't need it and as you can see please run npm install so let's do that right that's done as well so let's now create our database for this project so I already open up my local host PHP my admin and I'm gonna click on you and I call my database view to do and I set my character set for utf-8 MB for Unicode C I create okay so we have created view JMU to do database now let's open up this new project in our vs code or whatever code editor use right so we have this freshly installed a lot of a 7-bit view Jas now let's check our dot Ian leaf file and as you can see we have these database credentials here so let's just change the database name from a lot of a to our newly created bu to do because this is how I called my database and username is root and I don't have any password in my local environment ok and as you can see it's out to save so automatically saved now I can close this up let's open a few more command-line NPM run watch you and use this one to run our server so PHP artisan serve and now our application is available on this address let's see how is it works okay so it's compiled our CSS and J's files let's open up on that address and as you can see we have a freshly installed a lot of a7 and UJS ok so let's just delete everything from this page because we are creating our own styles and old page in order to do that we have to go to the resources we use and welcome to plate and let's delete everything from here and we are using the layouts app dot blade as our template so we don't need to type in all the times this HTML head and body tags as we are when we are creating new pages of course this will be a single page application but later on if we would like to extend it fro with other pages you don't need it you don't need to type in all the time these tags for this application we don't need nav bar as well so we can read these nav tags we don't need these main tags so all we have now the HTML document with head tags and body tags and inside the body we have a div bit idea of app this will be used by UJS so we have to keep this it's important and we place our content inside the shared content section so let's just do that we need to go to the Welcome dog blade and we would like to extend that layouts dot app dot play dot PHP so extend extend and the name is Apatow bladed PHP but it's inside the layouts folder so play out dot app and we don't need to type in dot play dot php' laravel automatically know that we are using that Abdo bleed PHP and of course as I just mentioned I would like to place my content inside you see at content section so type in section and the name is content for that content yeah so now everything I type in for example I type in an h1 tag here hello should be placed inside this yet section let's just try this out if I hit refresh I can see only this hello now great okay next I want the whole body section use the whole screen width and height so let's just do this in our CSS 5 where we can edit our CSS our style the CSS file is located in the resources cess and we need to edit this app dot s CSS so I grab my body tags I get my body ok and I want to expand expand the body full width and height of the screen size so with 100 we W and height is 100 viewport height finally okay and I want to use this blue gradient background and I copied from my existing project to speed this up okay so I set the background color for this gradient blue so beautiful okay let's just see how does it looks like okay everything's works as expected now let's Center all our content exactly to the middle of the page in order to do that we are really using flags and as we are using bootstrap we are using booster classes to create this Flex container okay first of all let's go to this app dot beta PHP and for this div for this main div let's give some class so it extended to the full let's extend it to the full page okay so it's one hundred percent with an hundred percent height no let's go to the welcome dr. Blay dot PHP let's create a main wrapper div with a class of 100 and hide 100 again and now I want a flex item here so using bootstrap class D flex I want everything stuck on each other so I want flex column as well and I want to Center to the middle everything so let's use to justify content Center and a line items Center as well and let's play this h1 tag inside this wrapper div and let's see how it look like how is it looks like okay so it's centered exactly to the middle of the page let's make this text white and let's rename it so let's say UJS to-do app and let's give a class of you let's give a class of text white and last mate make it a bit bigger so we are using this play or for example let's have a look great now it's time to create our bjs component which will be an input field and a submit button first okay so let's create this input field and submit button now right so let's go to the resources Jas and component and we can use this example component if we want to let's just delete everything let's delete this container class and let's rename it you to do component okay we don't need actually we will need this mounted later on but for now we need to create D data and this data will return an object right need a comma here okay so this is the basic structure basically a UGS component now we want to show an input field basically a form with one input field and a submit button so let's just grab this input field from bootstrap for website okay and I want an input field with a appended button so let's scroll down and here you go so I want a similar import field with a button next to it which is the second so I just grabbed everything from here and I place it in okay and I also wanted one to wrap it inside a form you you you okay and I don't need any action mu J s and Axios will take care about actions okay so in order to see how does it looks like we need to use this component so let's go to the app Dolce s and instead of using this example component we just renamed let's say we do named it to do component and I want to use this component inside my plate template as code to do component okay so if I go to the back and odd blade I need to use this word to eat embed this component into the page so let's just do that to do component okay so it has to looks like this and now see what we can see on the page right great so we have this input field with the button as well let's just start it a little bit I want a larger input field so I use this large form control algae you so I just undiscussed to the same good field I look great it's much bigger now I don't need any place for their are you for now and I want to rename the button add this to your list and I want a success so it's a green button and the type is not button but submit will submit this form let's have a look I must have a typo yeah it's a BD n - success right okay so let's make it a bit wider let's add an extra class to this div okay let's make it 25 25 % width and let's make this input group hundred persons with let's have a look now okay that's a which is better so now we have the input form input field we would like to submit the data and save the data into the database what you also want some validation and stuff like that so in order to handle error messages and submissions and make everything user-friendly for example if we got an error message and somebody types start to type scene we would like to clear the error message and we would like to hide the error message so in order to do that to make it easier if you search in Google letter cast you - forms you will find this airman github repo you need to grab everything from here and save it in a form dot j s file I show it for you as you can see I'm inside the resources folder j s folder and inside that J's folder I have the app - J as books boost up to J's and now I have this form dot j s so I just created and added a new file and I pasted all that code inside here what I just shown you so I pasted the code from here but anyway my code will be in the description so you can grab it from over there and it will have it will handle your submission your post your update your delete request and the error messages it will grab the error messages from the back end and you can you can work with it in a nice way okay so let's continue so we have now that file we can close this up of course in order to use this file we need to include it inside this AB dot J S so let's just do that now so we would like to import that formula j s you you okay we would like to use it in everywhere from our windows so window you right so basically we are importing these flight from here and we assign it to the window right so we would like to grab the input field values by UGS in order to do that led to form so now we are able to use this form because we just import it in inside a plot J as we can close this anyway okay so what we would like to grab by UGS you would like to grab a tie to a title of the to do so title and by default it's empty okay and now we need to connect this title to this input field so we will use V motor and we say we want to assign any input value to this form dot title so let's just do that form dot title okay so now these two are connected let's just test this if I hit refresh I'm using bu dev tool anyway it's a Chrome extension I suggest to download it if you downloaded it you will see this if you press f12 you see this view tab at the end and this is our to do component and we have the form we have the errors and I just told you and we have the title and E and if I start to type something inside this input field you should see it down here as well and yeah this is working as we expected so the question is now how to submit this data to our Laraway our back-end to our controller first of all we need to create the controller and we need to create the module because there is at the moment we have the database but there is no nowhere to save inside the database so we need to create a table for that to save this data so let's just create a migration file a model file and a controller file by larvae and let's say PHP artisan make model okay and let's call this model to do model and we want to create the migration find the controller file and we want the controller five it resources as well so to do this is the modern name and we want the migration control and resources so that's why I use this flag MCR at the end right hit enter ok it has created model the migration and controller files so let's start with the migration file which is located inside the database folder migrations folder and here you can find the newly created to do stable and what we want to save inside the database we want to save the title of the to do and we want to save it if it's completed or in completed so let's create a table string or the title and let's create one more table it will be a boolean or' completed and by default it will be false because if we just added our two dues to our list it's of course it's in completed so default 0 which means false ok so now we should be able to migrate this table so let's go to the command line and do that PHP artisan migrate enter ok everything is migrated but let's just have a look view to do and yes we have D to do stable created title and completed great now lot aware by default protects us from mass assignments so we need to specify the fields you want to populate through a form or to a request in order to do that you can go to the app folder and you will find it to deuce dot PHP and here we need to specify a fillable property you you to do is protected syllable so now we are able to populate these fields inside the database title and completed so now we have the title we can grab it by UGS now we should submit the form so there will be a submit event so add submit I would like to prevent the default action default HTML action so prevent and I want to do my own stuff which will be save data you can you can call it whatever you can call it whatever you want anyway it doesn't matter so at the submit if we hit this submit button we would like to call this method let's go down here and create a new method and let's create this function okay so we want to create a new package where we would like to grab this title so let data because to he goes to new warm data and append to this data package this title so data dot append title this dot form dot title so we're having this title down here and we assign it to this data title and this will be sent to a lot of our controller so let's just send this data through Axios so let's say Axios that post and we would like to post it to the API route to do and we want to send the data okay so once again we type in something inside this input field which will be assigned to this title and then we are creating a new data object and it will be assign it to this this will be assign it to this data title and this data will be sent to this API route so let's just create this route let's go to the routes folder API dot PHP and let's create this route it will be a resources so it will be able to handle get post request update and delete requests by default it's not resources its resource to do so if we hit the to do route we want to go to to do controller and lava will automatically know if it's a post or delete or update or get requests because we using this resource keyword so let's go to the app folder HTTP controllers and here we can find to do studio controller and this post request we'll hit this store method and we are accepting the request request will be this data okay so what we want to do we want to say if we want to create a new to do in our database so let's just do that okay so basically we are creating a new introduced and we fill up this new database and ribbits already submitted fields at at this in this case it will be only the title okay let's just test it out it should save this into the database let's have a look hit refresh we haven't got any error so far first to do let's submit it okay I haven't seen any error so far let's go to the database hit refresh and yes it's saved it and it's not completed yet so it's saved it in our database but we would like to see some saves some feedback for example clear this clear list form out and let's add it down here to our list okay so how we can okay so basically this is a laravel seven and bjs crud application so create read update and delete so we are able to create now let's jump to the read section now so we would like to read our database entries so we would like to read this entry and display it to the user okay so how can we grab all the information from the database we need to create one more function one more method and let's call it get to dues you can call it whatever you want I need a comma here okay and we need to perform one more Axios request which will be not a post request but it will be a gap request so it will be a get request to the same route without any extra parameter and then if we have a successful response so damn we would like to grab the response use an arrow function here and we would like to assign it to a variable so let's just create this variable inside this data return let's do a new variable called to do this because it contains or our to do this by default it's empty okay so let's just say this dot to do this which is referring to this I want to be equal this response dot data okay so basically we are performing a get request to our API route which will be direct us to the controller and grab all the data from the database and then if it's successful then grab the response and we want the response data to be these two views so we were getting back a collection from the database laravel collection okay and if we have any error then of course you would like to catch that error so don't catch hey so now let's just go to the controller and handle this get request controller and we will hit this index method so let's return straightaway our response so return we want to return the to do we want latest first latest and grab all of them so get okay so it will goes - it will go to our to do table and get all of them in a latest order and it will return it to our PJs to this view gas application and we will get these response data and assign it to these two dews and if we are going up here after the forum we can create one more div let's make it percent with again aim as our form and inside this div we would like to create for motive which will be on the present with and I want to show the to duce title so we need to create a for each loop basically in beauty as we can do it with v4 before so we want a to do from these two dues from these two use key will be to do that ID and so we don't have any error and we would like to just point out our to do style to do title to do good title okay so we are looping looping through these two dues as a to do and we want the title of each of two great let's have a look how is it works of course we need to call this function [Music] so the mounted will be cool every time we load the page so we are so when we load the page or reload the page this method will be called this get to dues so this function will be run and so let's just refresh the page and something went wrong we have one error let's have a look latest so I must have a type over there yeah late you they just okay refresh again and we have the first to do from our application but now if I type in my second to do probably added to the database yes it's added but we are not seeing on this page and the input field hasn't been cleared all we have to do is go back to the save data and we can be saving our data we are sending this post request then if it's successful dot them yes first of all I just first of all I just reset the form so this dot 4 dot we set and then let's call this get to do some ssin this get to dues and if we have any error we would like to grab that as well okay so it should be now let's have a look I hit refresh of course we are seeing the second to do but weird to do okay and as you can see we are seeing our third and without any page reload there you go and our input field is cleared as well okay but what if I submit this form without any input of course I'm getting this error but I would like to I would like to do some validations before it tried to populate my database so let's create a validation and let's grab the error messages okay so first let's go to the controller and create the error messages then we will grab the error messages inside the viewer component so let's go to the store method and before we try to create a new to do in inside the database let's do a validation this this validate we would like to validate the request and you want to validate the title from the request and this title is required by default and we can create a custom error message as well to this required validation okay so basically we are validating the request title it's required and if this validation is failed so this required this title required fails then we would like to give back this error message to the input field is required but you can send any message back whatever you want okay now if we going back to our bougie-ass application are seeing the four to two error message instead of the 500 and we can see our error message now the title field is required which is not the message what I wanted so let's go back and let's have a look required yeah I have a typo here so let's refresh again and now I have the error message I just typed in to the input field is required right so now we would like to display it to the user and make this input field red and stuff like that so I just do that so we need first of all we need to grab this error message okay so this is the ten method and after we would like to catch the error message [Music] you and so we would like to catch the Aurore message so if we have any error then we would like to assign this error message to this form error message which is comes by default because we have imported this form to js5 okay so this don't form dot errors not record and we would like to record this error not response data dot errors right so if we have an error then we would like to assign it to this form errors let's have a look if it's working it refresh and if we are going to dispute AB to use component at the moment our errors fields inside this form is empty if I try to submit the form and I hit refresh here as you can see I have the title reduce input field is required so now we are able to access to this errors dot title inside component so let's just do that after this input group after this input field we are creating a span and we want to see this spam field only if we have any errors related to this form title so we if form dot errors dot has title okay so if this form errors field has a title error which is related to this input so if you have multiply multiply input fields we just have to name it as for example description description and we will get the related error message to each field under each field then we would like to show that error message so we text form dot errors and you want to get that error message relate it to the title so let's just give some classes to this spam we want to make the text danger and we want to give some padding top as well beauty free what else you want oh and we also want this input field border read so we need to give a class to this input field invalid if this may be done with only this we need only form dot errors dot has title though if this form error has a title then we want to add this class is invalid let's try this out hit refresh ok so that's working we got this danger border but we want this in this error message in in the next line so I just fix that you let's just add this after this difference unless have a look working of course we need some budding to the bottom as well let's make this text bigger also one sighs let's make it 20 pixel we make visible and let's add padding button free as well let's have a look fresh yeah that's working as we expected we got this danger outline and to do as well but now if I start type in something to this input field I would like to remove this red border and I would like to remove this error message because the user starts typed in so it was definitely doing the right thing so I would like to indicate that as well and that's why is useful this little food form dot J's file because now we can clear the error message from this form that error related to this field so add this input field I have to use a key down the title so it will clears only the title error message so if we would have for example description as well and it has to be required as well then it will clears only the title error message so all the other error messages will be on the page right let's have a look try to submit we got the error and as as soon as we start typing we have this normal input field and if you submit it it's added to the list

Channel: Code Fisher

Views: 27,116

Keywords: Laravel 7, Vue Js, Laravel 7 vue js, Laravel vue js full stack app, Vue js crud, laravel crud, laravel and vue js CRUD, Web development, programming, deved, Travery media, tarvesy media vue js, travery media laravel, travery media php, Laravel Business, Laravel Business Channel, Vue + Laravel CRUD SPA, Vue + Laravel CRUD SPA

Id: hbq2CAHNRZM

Length: 51min 20sec (3080 seconds)

Published: Mon Jul 13 2020