Multilevel Drag And Drop Menu Sortable Menu In Laravel Without Package

in this video we'll be learning how to create a multi-level drag-and-drop sortable menu just like what a wordpress dashboard offers without any packages and laravel welcome to webtex home so you can see here we've got the categories posts and custom links section on the left hand side and a form to create a new menu on the right if you have ever worked on wordpress you must be well aware what i'm trying to do here if you have never worked on wordpress let me tell you the categories and push section will enlist all the data from the categories and the posts table while the custom links section contains a form to add custom links which may be external links or just the ticks that you want to show on the drop downs the new menu form will be used to add a new navigation menu on the database and once a new main is added the form section will be replaced with drag and drop startable menu items i've already added a master view blade for the dashboard along with the routes to display the menu blade and the controller method 2 from where all the ports and categories are being returned to the view blade and here's my menu blade talking about the database i've already added a couple of database tables to keep the video as short as possible i've already added a couple of categories as well as a couple of dummy posts to list them on the categories and push section on the menu blade if you are watching this video this means adding categories and posts is not an issue for you right i've also added a mini items table where i'll be storing the title of the menu item along with an optional name slog item type whether it's a category post or custom link then a target option to define if the link opens in a new tab or the same tab that's specially for custom links and the menu id to define which items are for a specific menu the menus table itself will have a section for its name location where it is to be displayed and the many content which basically stores the ids of the many items and their parent site relationship and json string you can get all these codes on my website webrexhome.com for free link is in the description if you want me to take you through each step one at a time through this video instead you are most welcome so everything is set up nicely ready to go alright let's move into it the first thing we'll do here is add a menu for that let's take the action url from the main form it's create menu let's copy it go to the web.psp file and define the method for this one let's send it to store add a method to store requested data into the menus table [Music] let's set a success message too in the [Music] session add a menu and you can see the success messages now what i want is to send the menu id via url and display related many items if there exists any in the menu section where the form is so what i'll do is redirect the user back to the same page but with the menu id of the latest menu data attached to it let's truncate the mini stable ones [Music] and add new data again and here you can see many id is passed through the url now you can check the id on the url and define which content to show up in your view blade first of all i'd like to show a list of available menus from where a user can choose which menu he wants to edit right before the option to create a new menu for that let's return the menus from the menu table first then we'll show the form to select menus if there is any menu basically it's going to be a form with get method that returns the same view blade with id of the selected menu sent to the url [Music] [Music] we can add some codes to check the menu id in the url in our index method then now if you click on the new menu id new will be passed while if you select one of the existing menus id of the same menu will be passed to the url we can set another condition if there's no id passed in the else statement but before that let's add some styles to make it look proper [Music] well that looks good let's add some info text too well that looks good add a bit of padding to the farm and that looks much better [Music] now let's check if the idea is new or not [Music] if it's some id we can display the data from the same menu else will have nothing to show we have already set the variable menus here so let's make a selected menu instead we must return it to the view blade right then we can go to our menu blade and define if the selected menu is empty the new form will be shown that's selected menu right and that's really first refresh the browser now if the id is new the form to add menu will appear as it want all right now if there's some menu id in the url will display a section where all the many items related to that menu in the menu items table will appear let's add some text as of now refresh the browser and you can see that now we can add many items to the menu items table and display them here you can see i've already added the code to list all the category items and a javascript code to select all of them at one click now we can go on to add the code block to insert the selected categories to the menu items table let's send it via zax we'll need to send the menu id to the many items table right so let's take it first this might cause an error when the id is new so let's wrap it inside the if clause to check many id and put the values in an array [Music] [Music] [Music] [Music] [Music] if the length is zero then we won't be proceeding as the data will be sent via zx i prefer the request method get as it is easy to check the errors set the data and the url let's say add categories to menu [Music] on success the page will be reloaded to show the data let's add the route to let's say the method is add category then let's add the method to [Music] if the menu has no content we can simply add the data in the many items table and list them in many blade as we'll need to convert the menu data that would be in json format to array and then push the data into the array for now since the menu content is empty let's add the data to the menu items table only we'll retrieve all the required data from the categories table and add them to the many items table from here [Music] type will be category and the menu id will be the one sent from request [Music] refresh the browser and try to add the data then the page is not reloaded means there are some errors let's inspect it an image is not found and the id is not defined let's go to the menu blade let's remove the image that's causing error well that should be ideas try again [Music] still not working let's check the database it's empty [Music] go back to the menu blade [Music] let's make the idea numeric let's write it this way [Music] check the controller everything looks fine in the method as well well the model name is incorrect here that's fixed then let's try to add categories to the menu again well the page is reloaded means data is processed successfully check the database table and you can see the category is added to the table the name value and target are null by default and you can see the values in other columns now it's time to display those menu items in the menu blade as suitable items let's go back to the controller here if the content value of the selected menu is empty will list all the data from main items table related to that menu in the view blend as we'll have to convert the json data into object before listing them well that's done then we can go to the menu blade check the menu items and use furry slope to list them [Music] refresh the browser and you can see the many items listed here now it's time to make them suitable i've already added the jquery survival file to my menu blade all we need to do is add some class and ids to the list items [Music] let's add some styles too [Music] well that looks good let's initialize the circle js2 then [Music] and you can see the many items can be dragged and dropped let's add some more style to make the items look better while dragging you can find the styles in the secondary circles download page 2 with examples [Music] well that looks fine for now then to make the many items unstable all you need to do is add an empty ul element inside the alloy element that will allow you to get a nested soluble list you can see the example here then let's add a button to save the menu items to the menus table for that we'll add a bit of code to track the changes in the sortable list and convert it to json string you can find this code in the decorationable page itself or even in my website [Music] well store the string in a div let's say serialize output [Music] [Music] you can see here how the data is stored let's set the ids of the many items here refresh the browser and sort the menu items and you can see the json string [Music] let's send it to the controller via zaxton [Music] [Music] [Music] do [Music] [Music] define the route in the web.psp file add the method [Music] let's try to save the menu then well there's an error [Music] that's fixed then refresh the browser and try it again again the data is not being stored well we send the content as new content right let's define that in the method [Music] now the page is reloaded but still showing an error let's check that out well it says the many items is not defined let's define that in our index method when the menu content is not [Music] empty you can see the json data in the menus table we'll need to convert it into object first we only have id in our men's table right so we'll set its other values from here let's set the title value for now refresh the browser and you can see the contents from the menus table but what if we nested many items [Music] that one swap here as of now for that we'll need to check the children value of the many items and set their values to we'll also need to check that in our viewblade server list too [Music] [Music] and now you can set the style menu item too let's write it this way well that's done let's add a section to define the menu location too then you can go with the string or integer value doesn't matter much [Music] [Music] well that looks better set the location value to in the zax method [Music] try to save it and you can see any changes because the json string is null until you drag one of the searchable items and the data is not being sent so let's set another clause for zax here to save the menu location even when the json string is empty now the main content is gone because we failed to check the content value in the controller let's focus on the location first so the location when there is location value on the menu [Music] well that's done let's fix the content value issue then all we need to do is check if the request has new content value before setting the content value from [Music] any alternatively you can also set the content value by default on the serialized output div from the database itself so that it won't be null at any point unless there's no data in the menus table let's hide this and string them [Music] so far so good now let's try to add categories when there's already some data in the content column of the menu if you remember we didn't address it before try to add the categories and you can see no changes right let's fix that by updating the menu then all you need to do is convert the json string into array and push latest data into that array [Music] let's set the children of its new data as empty add latest data to the array and revert it back to json string before updating [Music] [Music] [Music] well another error here json the code must be inside the loop here so that is data can be added one by one [Music] refresh the browser and you can see the new layered data merged with the existing data so the category section is done let's truncate the menu items table and try to insert data again [Music] [Music] [Music] [Music] well there's an error on location reload let's fix it we set the location as a variable here let's rename it to something else let's say many location refresh the browser and that should be [Music] okay [Music] now the category is done let's set our forecaster ports we can copy the existing codes and modify them a bit for push and that should work fine let's send the category to post [Music] refresh the browser try adding posts to the menu and you can see it's done [Music] let's work on the custom links then we have the form fields to add the title and the url for custom links let's add them to via zax [Music] we'll need the menu id2 [Music] [Music] [Music] add the route and the method add the method [Music] refresh the browser and try to add data [Music] well there's an error again here's double colon fix that try adding data again there's an error this time in the controller we missed the json declare line here let's add that [Music] refresh the browser try adding gain [Music] and you can see it on the sortable list that's all about searchable menu then let's make it more like wordpress with the option to edit the many titles and we'll need the option to delete items too right let's add an icon on the right hand side of the items [Music] that doesn't look good let's define the class for the text only instead of the list element itself well that's crumbled let's add css to make them look proper [Music] and they look much better now now let's add bootstrap collapsible to store the form element to edit the many items as well as the option to delete them [Music] [Music] [Music] here well i had the option to define optional name for many items so we'll display the optional name wherever available we must set the name value for the many items from the controller right let's do that along with other values too [Music] let's write it this way [Music] when the data toggle collapse here [Music] let's convert the entire text into link instead refresh the browser click on any item and you can see the form will appear there to edit that item let's add some styles [Music] [Music] well that looks okay for me let's go on to add other fins to them [Music] and the other films would prefer custom links to redefine the url and the target [Music] [Music] [Music] let's check the value in the target field for target add a button to save the data and a link to delete the item as well [Music] let's copy the same for parent items too that must be slug right [Music] refresh the browser and you can see what we did here let's add the router update the menu item then let's send it to update item method add the method to update item in the controller [Music] and redirect the user back try to edit data [Music] well we missed the csrf token here let's go back and add that here the name should be slug right refresh the browser and try to edit the name [Music] well the name is hinged but still the list item is not displaying the optional name right let's make a displayed optional name wherever available then refresh the browser and you can see it's done now let's save the focus on deleting data from the menu the id would work fine for many items but we'll need the key to remove the value from the json stream so we'll add key here on the loop and on the delete link too let's add the route to delete menu item done [Music] let's say the method is tilt item [Music] find the menu via menu id [Music] then if the menu content is empty grade the menu item else will also need to convert the adjacent string to arri and unset the key from the array revert it back to json string and update [Music] [Music] [Music] let's try to delete the menu item then [Music] it works fine for many item with no [Music] child [Music] but if you try to delete the tile item it won't work because each cell item will have the same key value that its parent has [Music] so what we'll do is add another q value let's say i n to the tile items loop and send it to the delete url that'll be null for parent items so let's add a question mark and the route for that and define it as empty by default in the method since there is nothing written about the child items key in the method delting any item would delete the parent item too at the moment [Music] let's write the code to delete the tile item in the controller then we'll check for the child key before deleting the item if the child key is empty we'll proceed as it is as will answer the side key from the array [Music] refresh the browser and delete the child menu and you can see that's done now you can add categories ports as well as custom links to the menu edit them as well as delete them [Music] let's wrap it up by adding a link to delete the menu itself in the vive lid [Music] let's write it this way [Music] [Music] with the menu item deleted we'll also delete all the items from the menu items table related to that menu let's add some style to the link to make it look prominent well we got the menu deleted and hence the selected menu variable is not defined let's define that in the index method [Music] [Music] [Music] [Music] [Music] refresh the browser and you can see the viewer page loaded add a menu that's okay let's create a new menu again and here too the menu items is not defined let's define it there too [Music] let's try adding another menu and that should work fine [Music] delete a menu and that should also work fine in case no idea is selected and create menu is not selected i like to display the latest menu loaded on the menu blank for that we can get the latest menu from the menus table like this [Music] refresh the browser and you can see the latest menu loaded on the video blue now the user can add as much menu items as he likes either from the categories ports or other external links too with greater ease and flexibility well that's all for today next up will be file manager in laravel so keep checking hope you like this video let me know through the comments and please hit the like button that will keep us motivated to come up with new and exciting videos thanks for watching and please subscribe us for more videos thank you

Channel: webtrickshome

Views: 2,367

Keywords: laravel, tutorial, sortable, drag and drop, menu, webtrickshome

Id: q5--awapsts

Length: 41min 23sec (2483 seconds)

Published: Mon Jul 12 2021