Full Laravel Splade Tutorial | Laravel Vuejs Tutorial

[Music] foreign [Music] welcome now let's get start and work with a split so if you go to display.dev website here we have the documentation and let's go inside the documentation here now we have introduction also I told you a split provides a super easy way to build a single page application using a standard laravel blade templates enhanced with a renderless vo3 components and if you want you can click here and read more the render less component in vue.js but here also we have the automatic installation so with automatic installation we create the project the level project CD in that project and we require the packet which is the proton media split and we run the PHP Artisan split colon installed and that's it also we have the manual installation so if we have a project and we want to add the split we can require the package and we need to add the split middleware in the road middleware in the canal inside the http kernel.php and then create the road with middleware split and create a group here and every route inside this group has access the split also we have this Breeze starter kit which means we have all the Bliss authentication working with split and this is what I'm going to do so first let's create the project the laravel project I'm going to open the terminal and I'm going to say laravel new split just split I'm going to name it the project and then CD and require the package okay so see the the splade and let's require the now we have here the levels played Breeze also as you can see Dash Breeze here so we have the breeze Authentication and we need to run the PHP Artisan Breeze install and the last one is to run the npm Run Dev so copy that okay so let's run the npm render and let's open the project play DOT test so let's see here play Dot test here's the project but because I am in the brave browser we need to remove protection and now we have the our project as we can see we can navigate in the login and you can see we don't have a Reload here so if I navigate to the login yeah it's a single page application okay let's uh create or let's open first the project so I'm going to terminate this and I'm going to open with vs code and let's Zoom this one let's navigate in the dot EnV file so the database is splayed and the root and password if you have a different name for username and password you can add here so you can change the database but I'm going to leave it as it is and come here go to the database and create new one paste that name click ok and I'm going to run the artisan migrate PHP artisan migrate okay and refresh and I'm going to create a new user test email.com another password go to the register and here we have now the dashboard the project and also is coming with a profile so we can navigate in the profile we can change the name in the email the password and we can delete our account okay let's log out let's go and log in now with that user so test email.com and add the password login everything okay so this is how easy is the ad the split and it's like inertia now if I open okay so if I come here and let's go to the routes web routes here are all the routes I'm going to remove this and as you can see all the routes is inside this Road Middleburg with middleware split group we have a split table which register allows the support table with the bulk actions and this splatable uploads register routes the support async file uploads with file Bond and then we have the welcome and we have the road for authentication and then which has a dashboard and the provide and then we have the out PHP require which is all the routes for the Breeze package okay friends that's it about this video how we can create the project and add the split install the played with Breeze also [Music] Hello friends welcome so in the previous video we installed displayed and we installed this Blade with a breeze so we have the breeze authentication system in here but also as you can see we don't have the reloading so all his uh single page application and for that we have installed the split so and in this video Let's see the basics of the split and if you go to the documentation and let's start with the navigation so the full delivery split page loading capabilities we need to add the split middleware on routes this one and we use links as you can see and if I open also the welcome where this two links are we can see his link here link component which overwrap the is a view component which wrap the anchor tag and if I go to this link component here in this play documentation yeah unlike most split components the link component is a view component and is proper around the anchor tag element which prevent the full refresh but lost the linked page asynchronously okay also this has some more attributes than a anchor tag we can add the confirmation so let's just do that let's go to this link here for login and add the configure attribute and if I go and say login now yeah we have the confirmation we can cancel or we can confirm and navigate to the login and you can read more so you can change the text change the text on the button on the confirmation button and on the cancel button now if you want you can also transfer all the answers all the anchor tags so the link just by saying transform anchors the true inside the objects so if you go to the resources Js objs and here we have the transform anchors if we want we can change that the true well this link has also the away attribute if we want to navigate away from our application has methods we can add method post or delete or so on headers and requests data so if we want to the value pass it to the data attribute will be passed by View and not by PHP we just add data if we want the value of the by PHP we need to add the colon and then data the same for the headers additionally a preserved scroll attribute prevents the page from scrolling to the top this for example if you want to delete a record in the table and we don't want to scroll to the top when we are redirecting back from a controller we use this preserve scroll attribute okay this is for the links and we are going to use links in the order videos but for now just I show you also let's see the progress bar and progress bar in the objs is true by default so if I come here yeah we have the progress part true and this is the show that progress bar if if I open and let's go to the network and I choose the slow 3G so let's go to the home page and why we don't so go to the home page okay and let's slow 3G now and if I say login let's confirm and as you can see we have this progress bar here now if you like okay if you don't like you just change that false also we have a toast notification which is very useful so let's go in the toes here and in the controller we just use this facade toast titled and add the text and also we have the instance has several methods to position laptop Center top and whatever you like and we are going to use this as well but just for now just I'm going to show you the and if you go you and read the documentation is very easy to adapt the split also we have a warning center and so on okay that's it for the toast notification we have the shared data also we have a title and meta tags so for if we want to change this title which is laravel by default it's showing the name of the application so let's just do that let's copy this and let's go to the web and here we have this road cat for the welcome which is we don't have the controller and I'm going to add this SEO here and just import the SEO Passat up here as you can see and if I save right now is nothing is going to happen and let's remove this one now let's go to the home page yeah as you can see we have also laravel we need a chain so that if we go inside the root.blade we have a title here and let's remove this title I'm going to comment this one and let's save and now we have a laravel split curves so what we added in the in here so let's say laraveler split course come here and now we have laravelers played course here very good so you can change a canonical URL and open graph stack some here also Twitter tags very nice to have custom meta tanks if you want to set a custom one and foreign let's scroll up I want to adjust publish the provider SEO from this plate so let's copy this and let's say in the terminal I'm going to terminate this and paste that one okay so if we navigate inside the config and we have the split SEO PHP and by default has the app name and I change this to be laraveller so if I just remove the app name I'm going to leave by default that are available here this is because we added in the and if I refresh now we have only the Arabella okay so that's it the basics of split all the best thank you very much [Music] Hello friends welcome back so in the previous video we worked with the basics of the split so the navigation and routing progress bar toast uh title and meta tags for the lazy loading you have the video here and for the service are adding you can just read the documentation it's not too much now also we have a components here as you can see content so if you want to render the markdown we just use this built-in component X split content and we add the scml attribute we bind this and here we add the variable also you can see for the data so let's just demonstrate this let's copy and open the resource views welcome and I'm going to select all and paste this one save and if I refresh yeah you can see your name is because we have an input and then a paragraph your name is and then with this a span with the text Data name so what we put here is going to display in the spawn so let's add and let me just zoom it okay let's add something here so I'm gonna say John and you can see we have giant on there also we can add the default one so let's do that let's add the default for the name and now the default name is laravel's plate is kind of yeah it's kind of alpine.js when we say x data and here with and we Define the data here we just say default and Define the name and we assign the string here and this if you want to add the PHP version we can use the bind default instead just default here and add an object we say binding a default and we add an array for example name level split and is the same so we can update this let's say laraveller and now okay and you can uh so also you can add first user get the data from the database remember and default local storage use and so on the four errors so if there has name the text error first name display the first error for the name also we have the event a flash message so when we turn in the request a session has flash message we display here and warning by defaults played will share all the flash data to the front end so you may disable this if you want so if I click here and just let's publish this one so I'm going to go and let's terminate this and I'm going to paste that one okay and also this one and now if we go to the config we have the split.php and you can change what you like and what you don't like so we have the share session Place data that's true you can change these defaults if you don't like that okay it's also for server side rendering and so on next what we have we have the form we are going to work with form for the link we read in the first video for the model is very easy we just use this x split model and to demonstrate all of this what I'm going to do I'm going to create a card so let's open the item and I'm going to clear this and say artisan make a model and let's say I'm going to create a category because I want to have so in the form components we have this select and I want to use this select to demonstrate you so I'm going to create a category mode model and migration and the post and when we create a a post use this select okay so for that I'm going to create this category in not nodal but model my mistake here and one for the post so let's see post okay and now open all the category table here I'm going to add only the names of dollar sign table string for the name and this is going to be unique okay save close open the post migration and here what I'm going to add first add the category ID so I'm going to say version ID for the category ID and I'm going to say constraint okay and Cascade on delete then I'm going to add the title so don't assign table stream for the title and the slug okay and let's add one more for the description and what I'm going to do I'm going to copy this slag and add also in the categories and now let's run the artisan migrid okay now we have all of them what I'm going to do I'm going to create also the controllers so let's come here and let's say artisan make controller okay so the category controller and one for the post controller very good let's go here and I'm going to remove what we added in the welcome so let's remove them and let's leave it as it is refresh let's go and log in we have Also let's remove this confirmation because I don't want that so in the link we have this confirmation I'm going to remove panel so I'm going to Zoom it out because of the link and we have this user let's login okay now we've got two links here for the category and for the pause so we need to go in the layouts and navigation here we have the navigation links and by default right now we have only the dashboard so let's copy this and add two more I'm going to add the categories and this one is going to be the post link here I'm going to say categories and here is going to be pause let's save and let's refresh but we don't have the categories and my mistake we need to add here also the dot index and the same in the post so let's say dot index Save open the web browse and register this to or else we created the controller so I'm going to say a road resource and not the user path for this is going to be for the categories and it's going to be the category controller and the second so wrote resource post controller okay save we need to import the category controller and the post controller save now and refresh as you can see we have the categories and post links if I click we don't have the index and with that we are going to work in the next video so see you there all the best and don't forget if you like like the video and subscribe to my channel for more content like this all the best friends [Music] Hello friends welcome back so right now if I click the categories yeah we don't have the index method in the category controller and the same for the posts and what I'm going to do in this video now is when we click the categories uh display of the index page for categories and render all the categories in a table in the level split table so if we go here display the dev documentation and we have a table component here go to the overview and you can find also this video here to explain you how you can add table split use the split table in the controller and also in the blade so for that I have created so if I opened vs code I have created the factories for category I added the name in the slug and for the Post also I create a post Factory and I added title slag description and category id1 okay then I run I added the category Factory create 10 and post Factory create thing so we have right now in the database if I open the split database yeah we have posts and we have 10 of them and categories 10 of them so let's display them in the table when we click here first thing we need to go inside the app HTTP controllers and in the category controller first let's create the index method so let's say method index so public function index and here let's get all the categories I'm going to say dollar sign categories is going to be equal with category oath and then and then let's return The View categories index and other categories here for right now let's import that and let's create the file and the folder categories so let's navigate inside the resources views and create a new categories folder and inside here a new file index.blade.php so index.blade.php and what I'm going to do go to the dashboard and select all copy and paste it here change this dashboard to be categories and inside here now it's going to be the table let's save and let's see if I refresh go to categories yeah we have categories here now let's display the table here and if we can see we need to return the an array with what we want so we want categories and use the split table facade or here we have user class but we are going to use different so let's copy this one and let's navigate in the controller and instead of compact categories so we need to add an array and add not users but categories import the split table from the proton media split split table and instead of for user class and with the save for those assign categories or we can remove this and say category class like this and I'm going to paginate by 5 okay I think I saved here now if I come and refresh nothing happened what we need we need to add the X split table component and bind the four what value we want to add here inside the view so let's copy that and let's go in the view we created earlier so the categories index blade and in here now I'm going to remove this and add the X split table but not for users for categories save and refresh okay I have The Cutting course stake there and yeah here we have now the table very easy to add and we can change the purpose number and we have here the pagination we yeah we don't have the email here sorry for that we have the name and the slack good we can reset and navigate very good now if I come here also what I want also you can create a table class so for example PHP artisan make table categories but I'm going to leave and so let's return only this one instead of something like this but I'm going to go in the building query Builder also we have this party query Builder but I'm going to use this one and let's say I'm going to add the search input but not and with other Global source what I want I want to make a short table that's true as you can see here so if I don't want what I want I want to add this one can be hidden true or false so inside the column name can be hidden with the same Force for example and now refresh we have only the slack which can be hidden and not the name good next what I said is to add a most of the sortable so let's copy that and add inside here sortable to true and now let's refresh and we can sort by the name as we can see and let's sort by name as you can see here we have categories sort by name if I sort by minus name and if I copy this and come here and paste it yeah if I navigated the page 2 yeah we have salt minus name and page 2. okay then what we want we have the oh yeah and the last one is that the search and also you cannot default sort so if you have also the the sword for the slug and you want the default to be name you can say default sort name yeah I want to add the global source so let's just copy this and I'm going to paste it remove this and paste it right here with global search which is going to be columns just name you can add also another one but I'm going to say just name right now and let's come here and refresh and we have the search let's reset first and let's search for the rasan so let's say and yeah we have the search okay now you can find more customization if you would like so default sort searchable search table and can be hidden select filter and bulk action exports and also other party query Builder but for now we are okay and the same thing I want to do for the post so let's copy this method let's navigate in the post controller and paste this one here change the categories to be a post import the split table from proton media blade and in the post we need to display the title the global search is going to be titled also the slug and what we can add the description but we are okay just the title and the slack for now and let's save oh yeah here we need to say not category but post and import the app modest post save and now let's create the post index and what I'm going to do I'm going to copy this and paste it I rename the B post and go inside the index blade change the categories to be posts and here we need to add post save come here and are we getting the post now yeah we have the title and slug okay we have the source so let's search for this one very good we can reset we have the pagination we have the sword table okay and we just hide the slug this is how easy is to add the table with search using the split table component okay friends I hope you enjoy and see you in the next one all the best and thank you very much [Music] Hello friends welcome so in the previous video we displayed here in the table the categories we have the global source also here we have this eye we can hide the column we can hide only the slug because the name I uh set that can be hidden to folds we have imagination and per page here everything works okay the same thing we have for both Global search this the show and hide the columns the title display the title and the slack which has also the sort table title per page and the pagination okay everything works okay now in this video I want because in the with this we had if you got a display documentation the table component we used the built-in query Builder and in this video now I want to show you also the spotty query Builder how we can do that and if you go here we have an example first we need to install the query Builder but also I want uh in the post I want to filter the post by category because the post belongs to category and then also I want to add the edit button to the table also the same for the category started the edit button here so let's start let's first let's install the package so laramal query Builder and if you go to the spot it'll have a query Builder here installation we need to add turn on this composer requirement Dash query Dash Builder so let's copy that and let's navigate here open the terminal and let's run this command okay then you can go to the features which has filtering so how we can filter them allow filters an array and we this is the URL sorting include the relationship so allow Source we need to add allow sorts for the name and so on default sort so let's start let's navigate in here and let's copy This Global search and what I'm going to do I'm going to open my controllers and the category controller is going to remain as it is so here we are going to use the built-in query Builder in the post controller let's change so I'm going to add the global search and we need to import this load filters and also the collection which is the illuminate support collection and here we are in the post so the query is going to test search for where the title is going to be like the value or the slack so the global source is going to search in the title also in this log and if we want also in the description but I'm going to leave only the title per Slack then let's create the post variable I'm going to say DOTA sign post is going to be equal with query Builder query Builder from spotty and make sure you import that up here and this is going to be for the post class okay like this and then first we need to add the default sort so let's yeah we have the the default sort and let's copy this and add it inside here now the default sort is going to be for the title although it's already going to be the title with the slug let's also add the slack here to sort and not the language code for now let's remove this and here also remove this so this is going to be allowed for transfer title and that Slack then we return the post split table for not post class anymore but for the dollar sign posts here very good column title can be hidden defaults and sortable to true and let's add the sword table to true also in the slab because we say allow it source for title slack in the query Builder we are departing it by 5 by default we can remove this because it's default and I think we are okay now let's just save as it is right now and let's navigate refresh the post yeah we have the same thing we have also the slack sortable and by default is 50 per page we can change the 10 per page if you want so let's come here and let's say 10. yeah now we stand per page or if you like only five five to start from five so that is okay this we had before anyway now we have the global source so let's search for this one and right now it's going to search also the slack on not only the title so as you can see we have this string in the tie in the slack here and in the title here and here very good so the Global search work and the pagination works every and this one works okay good now let's add the filter the filter by category for both and let's navigate in here what I'm going to do I'm going to say here in the allow the filters also to add the category ID category ID and I had a comment in my video in the previous video how we can filter them so by category and I'm going to do that filter by category and we can add also the select filter in here so let's see select filter for category ID and here now we need to add an array of options but what I'm going to do I'm going to come here and get that array so first I'm going to say categories I'm going to create a categories variable which is going to be equal with category model and I'm going to look only the name an ID and I'm going to say to array and add these categories in here and let's save and if if I refresh now yeah as you can see we have a filter here and right now it's not filtering but if I filter for this one and by default if I open the table plus all of the uh post has the category id1 so go to the split open and pause as you can see the post has a category one to all of that good now I think the category with id1 is this one actually so if I select this one yeah we have all the categories 10 of them as you can see here 10 results but if I filter by the second one we don't have any so let's change uh pause so this one I'm going to say as the Category 2 and ready fresh now let's reset and the category with id2 let's see who is who has the category show the Rosanna Nicolaus so let's select that Rosanna Nicolaus and yeah we have only one so the filters works okay let's reset and now let's add here the edit button to do that we need to go in here when we add the column and we need to add one more column so let's say column which is going to be an action column and right now if I save nothing is going to happen so let's come here we have an action but we need to add link here to go to the edit page and if I open the web routes we have a road resource for categories and for the posts so we are okay now what we need to do to add this that link is to go inside the resources use and in the post we have this index and here we have the X split table inside of here now instead of self closing we need to close like this and inside we need to add that cell so let's say cell for the action and here is going to receive the post dollar sign post and inside here that let's use the link which is going to be sure wrote both showing at the post ID and let's add what the this is going to suggest us and let's say edit and let's close the link and let's also end the set if I save as it is right now and let's open the browser and refresh you can see we have this edit and it's going to navigate in the slash pose to pause for and so on very good but let's just change the class because I don't like it like this so instead of something like this I'm going to say text to be a blue or green 600. and on Hover is going to be text green 400 and let's say also font to be a semi-bolt like this let's save and come here and refresh and yeah we have something like this and now if I click here the show does not exist we don't need to navigate to the road post show but pause edit and refresh again and now if I yeah we have both edit very good and let's do the same for the category so I'm going to copy this and navigate in the categories index let's close like this the table and paste that in but instead for post this is going to receive the category and say categories edit and add here the category ID and let's save also we need to open that controller because we need to add subcategory controller and at the column because right now if we don't add the column it's not going to work so let's save as it is right now and let's navigate in categories refresh yeah we don't see that so we need to add a column for action and refresh and now we have the action which is going to navigate the categories one edit the categories two I did and so on okay friends that's it about this video I hope you enjoy and see you in the next one all the best foreign [Music] welcome so we are okay with the table we show what we want so we also sort search and have pagination the same for the Post now in this video I'm going to add a button here a link to go to the categories create to create a new category and the same for posts uh the link here and create new posts and work with a split four so let's open the vs code and inside the roads sorry resources views go in the categories first index and I won't add it here so when you have this categories is inside the slot with a name header and a lot of way to do I'm going to cut this one and add the div with a glass of b-flex and justify between and then inside paste that H2 and I'm going to add a div or not the div I'm going to add directly the link which is going to go to the surf of route categories create and I'm going to add the class the B uh BX 4 py two BT indigo 400 and on Hover I'm going to change that the BBG Indigo 600 text is going to be white and I'm going to say rounded MD okay and let's say the new category and close that link like this let's save and let's see now if I refresh we need the we have the link but text is white and we have a busy Indigo 400 so let's run the npm round though yeah now we have here the new category okay now if I click yeah the category controller does not have that create method okay but let's do the same for the post so I'm going to copy this uh all the div here and navigate in the post index and paste it inside the header so remove the H2 and paste at it just change the row to B post create and say new post here very good let's save this navigate to the post and we have new post okay now let's work with controller and also we need to create a new or let's save this I'm going to save this as a create blade and the same in the post so let's open this and Save pass create blade so now we have the create and in the post and creating the categories let's open now the controllers and category controller create the create method here so method create and we need to return that view so let's return The View categories create let's save let's do the same in the post controller so method create and let's return The View Post create okay now tab 9 is suggesting us and is very good so let's come here a refresh okay where I have this problem in here refresh again and now if I say new post we navigate in the query but here we need to make some changes so first let's go in the post create and instead of the table here is going to be the form some with the same form here and let's navigate in the new posts yeah here we have the form and let's do the same for the categories say form here save and let's go to the categories new category and we have a form here okay now let's open the displayed documentation and let's navigate in the form overview and here we have you have a video how you can use the forms and we have an example here so let's copy this and let's navigate here when we have the four and I'm going to paste that in for the category if I open the models category here I have added the protective filter name and the slack so we need only the name and the slot here so let's say name is going to be name for this one and the label is going to be name so first we added the component X split 4 then the hex plate input and here you have the input example also you add the label you add the name type placeholder and so on you can go and read that so I added for the name and then for the slug and the label is going to be slack as well also we have the X split submit and if I come here now and refresh yeah we have something like this let's add in this form of class I'm going to say Max with MD MX Auto and B4 and I'm going to say BG White and around it to be MD save come here and yeah we have something like this just in this played submit also I'm going to add the class to say just margin top of uh four and now we have okay good now when we submit we need the form to have an action and I'm going to bind this action which is going to point to the Road and we need to add the road categories store okay if I save and let's open now the categories category controller and create the store method so I'm going to say method store other request and instead of just something like this I'm going to create a new request for this one so in the terminal I'm going to say artisan make request and let's say category store a request okay hit enter then run the IBM run Dev just in case and here now use the category store request dollar sign request and I'm going to say category create and I'm going to say dollar sign a request not all but validated and read the return redirect the route index and I think this tab 9 is going to add also one call the Breeze is after so remove that now let's navigate this category store request change the authorize to be true and what we need to return here the rules name is going to be required and maximum of 255 and the slug and I think yeah okay also the slack is going to be required and Max and the slack also on and the name is going to be unique I think let's open the categories yeah unique both of them unique to the categories table and column is name early move this one and let's just add the same the slack here we need to say a slack okay refresh and if I go to the categories we have something like this go to go and create new one and now let's say a test category and test slug say submit we addicted back and we have 11 results if I go to the last one here is the Stark test and let's say new category and if I say submit we have the name field is required and the slack PLT is required so we have the validation everything works correctly and I think we are okay with this video now I'm going to leave it to you the create a new post the same we have did for the categories but you just try and create the new post and I'm going to do that in the next video so see you there and all the best don't forget if you like like the video and subscribe to my channel for more video like this [Music] Hello friends welcome now in the previous video we worked with uh form for categories to create new category now let's work with post because I left here and I told you that if you want you can create yourself now let's create together if we go here we have just the string form and let's open the vs code and what I'm going to do I'm going to copy the form we have here for the category and paste it inside of the create purpose just we need to change the route which is going to be posts and let's open also the post model and just here we need to see we have title description category ID in the slack so let's change here first input it's going to be the title let's say title then we have the description of the slug and the category ID the slug is okay now for the description we need to go here in the documentation of the split and let's go when we have the form components we have this text area and I'm going to use this one so let's copy this so title slug name is going to be description and let's see now yeah just we need also the art to the category ID which is going to be a select so here we have an example and let's copy this one and I'm going to add the first one here the name is going to be not country code but category ID okay because here we have category ID and now options we need all the categories so let's say categories very good but where I come from these categories we need to go in the controller so post controller and in the create here we need to get all the categories which is going to be category and plug the name in the ID and give it an and transform the array and I'm going to say uh at the compact categories like this okay so we added the title description category again the slack title description category ID and the slack okay let's navigate in the browser and as you can see here we have title category ID okay just to the description I want to add a class let's say margin top of two oh yeah we need also that label for this and say description and I think we are okay so title and maybe also for the category ID let's add a label and say category okay now we are okay and let's work with the store method because right now if I say yeah store method doesn't exist so let's open the post controller and create a method store and also I'm going to create a new a request so let's say artisan make a request and post store request hit enter and run also the npm rundev again and now let's use that post store request as dollar sign request and the same thing we have done in the a category controller just say post create and dollar sign request validated and then let's return to the route cut post index okay now let's open the post store request change the authorized Beach rule and here we need to validate the title we should be required and marks of 255 then we have the slug foreign unique to the pose and the slack column let's remove this one next we have the description which is going to be just required and also the category ID and let's save it from here and refresh now if I say submit the category D field is required the title field is required and ok then let's select I'm going to select the test category add the title so first title at the slug let's say first title like this and add the description and let's say submit and we redirected the bug and here we have first title slug burst title so we created the post and we have the results here 11 results that's it how we can create a new post okay friends now when we create a post is a good idea to have that notification we create the post successfully or something like this and it's very easy with split so let's go up when we have those notification and on the controller we say something like this so let's copy that and navigate on the post controller so when we store new controller we are going to say we need to import the those from brutal media split facades toast okay and let's say here post created successfully and also I'm going to say new post created very good if I save and let's try one more time for the new post let's change the category let's select this one second title second tie it along with the say and something for the description and let's say submit and now new postgrades successfully very good and let's do the same for the categories so when we create a new category just copy this one and navigate in the category controller when we create a new one paste that in and say new first import the toast from proton media split facades toast and let's say new category created successfully save let's create new one first and let's say first here submit a new categoricated successfully okay friends that's it about this video I hope you enjoy and see you in the next one all the best [Music] Hello friends welcome back so now we have created the form to create a new category and let's work with the update also so when you click the edit yeah we don't have the edit method also we don't have the page and the same for the post and here we need to change this to be post not categories and also here to say new post so let's work first with that let's open the views both index and here we need to say pause and on the create we need to say the new post here and I think the same on the categories when you create new one let's say new category so categories create and say here the new category okay now let's work with the update so here we need to create the edit method let's close everything and let's open the category controller and let's create down there the edit method so let's say method edit and in here we need the category and I'm going to use a road multi-binding and then we need the return to The View categories edit and add also the compact category so for that let's go inside the views categories create and I'm going to save this as edit and here I'm going to say update category or edit category we don't need now to create or let's leave it the link to create new category there the road is going to change the B categories update and we need to add the category ID here and if I save and come here yeah let's go and edit category controller edit does not exist I I don't save this so refresh and let's say edit and we are there so let's click here okay now let's fill the name of the slack with the right so now let's fill the naming the slack if you go to the split documentation in the form we have also the model binding so we need to add here the default and the model so let's copy that and with that we are okay in the edit in the form just change the model to be category if I save now we have that okay if I say submit uh the method is not supported for the robot so we need to change also the method and if we have a method here maybe just go and add it in the form so let's say method to be put I'm going to say and come here and say submit yeah now we say update does not exist in the category controller good let's create that in the category controller let's create a method update and I'm going to use the same request so this is a category store request dollar sign request and use also the category bind the category here and then I'm going to say and let's leave the top nine to work for us so category update the request validated title category that is successfully and returned to the Rose category index very good let's save and let's see how it's going to work I'm just going to say remove everything here and say submit and now we have the name has already been taken and this is because we in the category story quest which say required and Max 255 and unique the categories name but on update I don't want to have this unique category name except this one so for that what I'm going to do I'm going to transform this in the array and let's say something like this okay now here I'm going to use the rule validation import from the illuminate validation and use the unique so uh okay so a rule unique the categories and ignore this road category okay if I save and come here and refresh say submit yeah I don't have that so let's do the same for the Slack also we can specify here the column so let's say name in here and slug in here and refresh okay category updated successfully let's go and update the test I'm going to say just test U submit and category updated and we have the test view here let's also update remove this or just let's update the plug and yeah everything works correctly now let's do the same for the Post yeah first we don't need we don't have the edit method so let's open the post controller and create the edit method here and we need the post here dollar sign post but also we need the uh all the categories because when we create we have all the categories here so let's do the same and let's grab the categories we have done in the create and let's return The View Post edit compact pocket categories okay just remove this added by tab 9 and go to the posts edit and now the post edit not found so let's create the file in the post create let's save this one as edit and here instead of new post I'm going to say edit post the road is going to be post update and add the post ID now also the method is going to be put and let's save now refresh edit and yeah now let's add the this binder model the same thing we have done in the category so we need this specify the model in here and inside of category we need to say post now and as you can see here we have the category first title Slug and description if I say submit we don't have the update so let's create the update method in the post controller and also here I'm going to use the same request so post store request as a request and also get the post binding the post here and let's say a post update request validated those title post updated and return to the road very good let's save and let's see now if it's going to work if I say submit the slug has already been taken so let's solve them that we have the same rule for the slug here so we need to add or what we added in here rule unique so let's copy this and paste it in here import the rule from the illuminate validation rule just now is going to be ruled unique to the posts and slug is that and this road post save refresh that say submit we're addicted back and second title here let's update this and with the change this to test you the category second title updated and let's save and here we have that so second title updated test view okay now let's update the slide and also change one more to the Rosanna and say submit and Signal title updated second title up slug and category Rosanna Nicolaus okay that's it about this video friends how we can make an update with the split form components we bind the model number four and automatically is going to fill the Fields very easy and also we with help of tab 9 is going to create very quickly so if you like don't forget to subscribe to my channel and see you in the next one who ends all the best [Music] Hello friends welcome now let's finish our card for categories and post in or project using the split component so here we have the split table component in new category we have form component also here is the link component and on the edit also the form component and here is the link component very good the same we have for the post so we can create a new category show all the categories edit category now let's add a link or a button to delete the category and the same for the Post for that I'm going to use the link from split so if you go to this plate and in the components we have the link component and we have read about this one using in the previous video so what I'm going to do um here we have the confirmation if we want to add the confirmation and you may customize the confirmation dialog so let's copy this and let's open the index inside the categories first and here we have the table and we have the cell for action which means this action here this cell here and we bind the category and we added the link for the edit now let's add this link for delete what we have copied there and if I come here we have the danger zone just change this to B delete yeah now also let's change the loop so let's add a class here without the class the B text Red 400 or 600 and on Hover Also let's change that to be text red 400 and also I'm going to add the font semi bold because we have added also in the edit and if I save yeah we have similar good next uh next I'm going to change the confirmation instead of to enter the danger zone I'm going to say delete category also are you sure it's okay confirmation button just yes not something like this and for the cancel button I will just say concept and if I say yeah delete category are you sure yes cancel good now let's change also the draft and for that I'm going to say a road categories destroy and we need to add the category ID and we have the category here as you can see so we can use that category that the category ID here now if I save as it is right now and just let's see what is going to happen if I say the yes the category controller show does not exist so we don't have the the destroy but the show and that's it because the method is not delete here we need to specify the method also and for that let's come here and add also the method which Center B delete and let's see now if I say delete yes now the destroy method does not exist in the category controller okay let's go and create that let's open the category controller and in here let's create the method destroy uh first we need to add the binder category and then I'm going to say category delete okay those notification category deleted successfully just here we don't need return or react to the road but return back right there back and if I come here and refresh and let's see if we can delete this one here the first one which has this name so delete if I say yes now the category deleted successfully very good if I say uh 50 per page and we navigate here and if I say delete just and you can see we can scroll up just that I want to show you if I say delete now yeah as you can see we scroll up if you want don't want that you can add the scroll down scroll down here we have The Preserve Scrolls so that I'm going to add in the in the link so if we add this preserved scroll and when we believe we are staying down there we're not scrolling up anymore so if I say delete now and say yes yeah we stay where we are now this is up to you if you like if you don't like the same uh let's do the same for the post now and just copy this and open the index page in the post here we have the cell for the action and after the link for the edit let's add this one and let's navigate now to the Post yeah we have binder category but we need to say post because right now we are we buy new post not category and also we need to change the route the B ose destroy are you sure confirmation just also the delete post here not delete category and I think we are okay now if I save come here DF go to the post and we have only two pause because we deleted the categories the categories which has that both I think yeah now let's just open the terminal and I'm going to say here so Artisan might create press and I'm going to add the seed plug okay now if I refresh we are not logged in so we need to go and log in first register sorry let's say register test email another password now go to categories and we have 10 over I'm going to go to the post and we have 10 over the good let's say per page 50 per page and if I scroll down say delete if I say yes now the destroy method does not exist in the post controller so let's do the same in here in the category controller I'm going to copy this and open the post controller and paste at the end also the destroy just here we don't use category but we need to bind post and also post here and say post delete okay that those notifications we need to change also here to say post deleted and return redirect bug and if I refresh and we are at the end as you can see because we added that the preserved scroll we are going to stay here say delete yes and positive successfully and we are at the end if if you don't like that save and refresh say delete if I say yes now we are scrolling to the top okay friends that's it about this video I hope you enjoy so we have finished the card for categories and for the Post we can uh search filter by category also we can hide the slagger action and so let's hide the action okay change the web page and also have the pagination very easily using the split components if you like don't forget to subscribe to my channel and like the video all the best and see you the next one thank you [Music] Hello friends welcome so we have done of the grad for categories and posts using the laravel split package which I think is very good so you can speed up your level uh development if you want to work with vue.js okay so one more thing I want to add here because I had a comment in my video how we can add the export and hit right at the export path add some errors and if we go in the display document Dev documentation and scroll down to the table we have the export here and if I if we have this inside the road so let's open the web routes and scroll yeah we have this here we need to install the mat website Excel package so let's open also this one and install the packets let's go to the website documentation and if you want how to work with this one I have a video for tolerable Excel export and import so let's go in the installation first and let's install composer require the package come here open the terminal and paste that command then we need if you want to add the configurational okay if you don't want I'm not going to do that so let's go to the export and you need to make an plus but let's see if we don't need that let's go so we have installed the packet and in here after you install the pocket you need to add the export in the split table so let's do that let's open the app HTTP controllers and let's work first together category controller and we need to add the export here so let's add the export and if I save we are in the categories and refresh yeah we have an error so it's not going to work and this I think is the maybe I make a mistake or I miss something but this is going to work only if we create a table class so if you go to the table component overview and we have an example to create a table class so let's copy this command here and open the terminal and I'm going to clear this up and make a table and let's say category categories okay and one more for the posts I'm going to make very good so after that in the controller we don't return that we just that class so let's do the same we are in the category controller and instead of returning something like this and let me comment this one and now return uh now return categories with categories class like this and we need to import these categories here okay and we don't need that the split table and let's see if I come here and refresh yeah now we have only the ID because in this categories uh configuration we have the with global Source columns ID and only the column ID that's first the search is going to be for the name so what we had here with global search column name and let's add colon name which can be hidden and sortable touch through also I'm going to leave the ID also and the search is going to be for the name change this one so then add the slug and the action and also the pagination so the slug the action and the pagination Earth paginate okay if I save come here and refresh unexpected token because I think yeah we need to add okay so we have the same we had before if I search for this name yeah we have that and also we can hide the slug and so on good and the name is sortable and also the ID is sorted good now the idea is to add the export and if I just add the export here here we have an example so let's say just here export and if I save and come here and refresh yeah we don't have an error and we have this icon and we have an export as Excel so let's try let's say Excel export categories so it's going to export as categories and let's in the desktop and I'm going to save that and here we have the categories and if I open yeah here is let's Zoom it and we have the ID name Slug and the action which is empty now very good let's go in this one and oh no in the export so the idea is to create the table class and then you can customize the export something like this at the label a file name and what you like but I'm going to leave it as it is also you can for example hide the column so let's copy this and I'm going to hide the action so in the action I'm going to add export asphalts and if I save and let's try again refresh let's export and now categories one let's save this and let's see now yeah we don't have that so let's Zoom it now we don't have the action here we have only the ID name in the slack okay so this is how easy step add also the export but you need to create uh the table class maybe I missed something but I think the this is the way and now let's do the same for the uh post somewhere this close this and let's close also this one this one and open the post controller pause controller and here now we have the global search you have posts we have categories so what I'm going to do I'm going to select all of the fan and let's open the pose table and in the here I'm going to add all the logic we had we need to import the allowed filter class the collection which is from illuminate support collection we need to import the query Builder and also the category model so upload this category very good now here we have the table with global search it's going to be titled so what we had here or let me just copy this and paste it here okay I will remove now this one the return and save let's go in the post controller and instead of having something like this we need to remove all the logic we have here now and I'm going to comment also this and return pose class now let's save and let's open the browser because the post also has the filter and I think we have the same thing so let's refresh again yeah let's search for the title here on good reset action slug good let's filter and all the category all the posts has the category id1 which is the Fernando has a category one let's the id1 so let's filter if I choose this one we don't have any but if I choose the Fernando yeah we have all the posts and let's reset good now let's add the uh the export okay so in the vs code in the post if I just add here the export and Save come here and refresh now in the post yeah we have something like this and if I see if I export this nice let's open and as you can see we have the title Slug and the action now let's remove the action and I'm going to close this let's remove the action and what I want also I want to add the name here so what we had in here so and with other label in the export so in here label and I'm going to say uh posts Excel okay and I'm going to hide the action so the same we did in the categories table so I'm going to copy this and paste it here if I save and come in the browse refresh now we have both sex cell save okay and as you can see now we don't have the action and very good everything works correctly okay friends that's it how we can add the export in the split in the lower value is split component it's very easy in the table we just add we create we need to create the table class and add a export there and you can modify I hope you enjoy and if you like don't forget to subscribe to my channel and like the video see you in the next one all the best [Music] Hello friends welcome so in the previous video I added the Excel export for posts and categories because I had a comment in my YouTube video now the last thing I'm going to add is book action because also I had many comments in my YouTube videos how to add that how to do that and I think it's very easy but I'm going to do for the last one and we are finished with split so if you go to the display.deb documentation and in the table components yeah here we have the section for book action we need to have the road split table which we have so if I open the web roads yeah we have here and the other book action we just need to say a bulk action and we need to add the functional callback or here we have an example with label it and before and also the after so before and after arguments you may use at least to show toast when the action has finished so let's do that let's copy this and just like this and I'm going to go inside of the categories and here we have in we are in the categories table class we we have created and also we have here an example but I'm going to remove them all now and here I'm going to add the bulk action and the label is going to be attached timestamps the same we have here just to show you here now we need to add the category model and also say category here and category touch we need to import also the toast uh Passat and say timestamps updated now we need to also add the column to show that timestamp when we update it so this touch is going to update the updated ad so let's add that one here so column updated and let's save let's go in our browser and refresh we have the update that here which is for today because I just added the migration fresh and Seed but the time you can see here when we update it's going to change this time so right now we don't see any error any boot connection because we need to select the table the column so if I select this one and this one and now we have a touch timestamps and just see here all the columns here all the categories has this timestamp this uh time now we are going to change only the this shoe if I save that timestamp we have timestamped updated and as you can see of course this shoe has updated so very easy we have also this notification now on one more thing I want to do is to add another timestamp or another book action or just if you don't like the update only the updated thought you can modify this but I'm going to add one more in here and I'm going to say delete categories for each function now I'm going to run the category delete which is going to delete the category and I'm going to say info let's remove this info I don't want this just here I'm going to say uh categories delete it and let's come here and refresh okay now if I select I'm going to select the ID 2 and 3 because id1 has also the all the posts all the POS belongs to the right category with id1 so for login with the select the category with ID 2 and 3 and come here and say delete categories now we are not going to have the category with id2 and 3 if I delete them so if I said delete categories deleted and we have one and then four so that is how easy we can add book action you can do what you want but just the demonstrate to you I added the updated timestamp and also delete now the same thing I'm going to do for the post so let's copy that and let's open the post post table and I'm going to add that in here and also let's add the column for updated that after the slug we need to import the toast facade and here not category but post and also say post here the same for down there so say post and dollar sign post I added two dollar signs just one here we need to say delete post also post deleted and I think we are okay now let's save and let's navigate in the post if I refresh you can see the timestamps and let's select two of them and touch timestamps and time sounds updated and let's delete them first we need to select and now if I say delete post so let's add also the ID because I've done we don't see clearly so I'm going to copy this and add the first one which is going to be the ID and refresh and now we have the ID here so if I select the ID one and two and delete post now we have a post deleted here and also the ID start from ID3 so this is how easy is the uh book action with help of the split which to another time I'm going to say very good Pockets to have with laravel this speed up your development if you want to use the vue.js of course that's it about this video and about this uh tutorial on split I hope you enjoy and don't forget if you like like the video and subscribe to my channel and see you in the next one friends all the best

Channel: Code With Tony

Views: 6,638

Keywords: laravel, vuejs, livewire, laravel 8, laravel 9, laravel crud, laravel 8 tutorial, laravel 9 tutorial, laravel splade, laravel splade with breeze, laravel breeze, laravel splade breeze, install laravel splade, install splade, laravel full tutorial, laravel 2023, laravel 10, laravel 10 tutorial, laravel splade basics, splade link, splade route, splade middleware, laravel datatables, laravel vue component, laravel package development, laravel packages, laravel excel

Id: d0rg2uHIrvg

Length: 122min 30sec (7350 seconds)

Published: Tue Jan 24 2023