CRUD App With Image Upload Using Laravel 8, jQuery - Ajax, Bootstrap 5, DataTable & SweetAlert

[Music] hello welcome to my channel i am sahil and today in this video i am going to show you how to develop a crowd application with image upload using laravel 8 bootstrap 5 jquery ajax data table suite alert and bootstrap icons okay but before starting let's have a look of final application okay so this is the final output of our application where you can see i have fetched all the records from the database and displaying in a table format okay with two action button uh edit and delete okay and there is a button on the top add new employee okay so when we click on this add new employee button then there is a bootstrap type model will appear with some input fields okay so we can add new employee using this form okay we can close this model using close button okay now let's try to add a new employee first okay so click on add new employee and here just type the first name last name and phone number and here just write the post okay no front end okay and here you can select a avatar for the employee okay so i'm selecting this one and click on add employee okay so you can see a sweet alert pop-up uh employee added successfully click ok to hide this and here is the employee that is added just okay and now we can also edit uh any employee okay so suppose i want to edit this one so just click this icon now here you can see there is a bootstrap type model with previous values okay so suppose i want to update this post so just write java developer and click on update employee okay now you can see sweet alert pop-up employee updated successfully click ok to hide and here you can see the post has been updated with the new value okay uh you can also change the image only okay so if we just click on edit icon then you can change the image only okay so i'm selecting this image this image okay and click on update employee so you can see employee updated successfully and the image has been changed okay and you can also delete any record okay so suppose i want to delete this one so just click on this icon delete icon then there is a confirm pop-up will appear so if you click cancel then this pop-up will disappear and if you click on yes delete it then this record will be deleted okay you can see record is no longer available okay so this is what we will build in this video okay so let's uh minimize this now i have already downloaded a phrase copy of laravel 8 framework so now let's start developing our application okay so first what i will do is i will open phpmyadmin okay just close this and here i will open phpmyadmin and here from here i will create a new database okay so click on new and here in database name i will write laravel underscore uh ajax okay and click on create okay so you can see this is the database okay and just open your application and first go to this dot env file okay and here these are the database credentials okay so here in db underscore host i will write localhost okay and in db underscore database i will write laravel underscore ajax okay the name of the database and the username will be root and password will be blank okay now save this close this file okay now let's first start the server okay so to start the server just write php artisan artician serve okay hit enter now just open this link so this is the welcome page of laravel it okay you can see i am using laravel laravel version 8.52.0 and pse version is 8.0.6 okay now next what i will do is i will split the terminal and then first i will create a model okay so to create a model just write php artisan make colon model model name of the model so i will name it employee okay and i will also generate migration so i will use m flag here and just hit enter okay now you can see model created successfully and there is a migration which is also created okay if you just go to app and then models then you can see employee.php is the model okay and if you go to database and migration and this is the uh create employee table uh this is the migration okay now next we have to create a controller okay so to create a controller we have to just write php partition make colon controller and we have to name we have to provide a name so i will write employee controller okay and just hit enter to create a controller okay now if we just go to app directory and then go to this http directory and inside this controller directory you will find employee controller okay so all is created now first we will define our schema okay so to define our schema we have to just go to database directory and then in database we have to just go to this migration directory and just click this last create employee table dot php file and here we will define uh the schema uh actually we will define the table okay where we'll store all the information of the employee okay so here i will leave this id and here i will add some more columns okay so table uh string and i will first use first underscore name okay just duplicate this and here i will use last underscore name duplicate this and here i will use email duplicate this and then i will use phone next i will use post next i will use avatar okay avatar now save this now we have to just migrate this migration into our database okay so to migrate we have to use a command so just write php artician migrate okay and hit enter now you can see all the tables all the migration are migrated if you just go to the phpmyadmin and refresh this page and go to this laravel underscore ajax database then there you can see some tables are created so you can see this employee tables is also created with these fields first name last name email phone post avatar created at and updated at okay so now we are ready to go further so next just open the application just hide this terminal okay close this file now next we will work on the our model okay so just open the model so just open this app directory and then models directory then just open this employee.php file okay now here what i will do is i will just use a property protected label label equal to and here in the array we will provide all the column names that will be uh that will be used to store in the table okay so first is first underscore name okay second is last underscore name third is email and then phone post and then avatar sorry in single quote avatar okay save this now close this file now next what i will do is i will just go to this uh routes directory and then go to this wave.php directory oh sorry wave dot php file okay now here what i will do is i will create a route first okay so i will create a simple route so i will just delete this and first i will create route get and link will be slash and here i will use employee controller okay and then class and then here i will use index method okay save this now make sure to import this line okay and now uh next what i will do is i will go to this resource directory then this views directory okay now i will just delete this welcome.blade.php file okay so just delete this and then after deleting i will create a new uh view okay so to create a new view we inside views directory will create a new so just create index dot blade dot php okay now here what i will do is i will just write crud application with image upload using laravel 8 and ajax okay save this now we will use some uh libraries and frameworks okay so i will use all the cdn links okay so first i will include bootstrap cdn link so for this just come here and just write get bootstrap.com okay now from here just click on download okay and from here i will use this and paste here within the heat tag okay now i will also just copy this bootstrap.bundle.min.js cdn link and i'll paste here okay now i will also use jquery library okay so for this just write code.jquery.com and from here just click on minified okay and just copy this link okay copy and just paste here okay now next i will also use data tables okay so for this what i will do is just write data tables.net okay and just click on download okay and then click on bootstrap 5 okay and here just select data tables and then in cdn tab just select this css cdn link and paste within the head tag okay and just copy this js file cdn link and paste here okay i will also use sweet alert library okay so for this uh just write sweet alert to dot github dot io okay hit enter and then from here just click on installation okay so i will use cdn so just copy this script cdn link and paste here okay save this now next uh i will also use uh bootstrap icons okay so just go to getbootstrap.com home page okay and from here just click on icons okay so click on install and i will use a cdn link so just copy this cdn link okay and paste here okay save now next what i will do is i have already written an article about this video so you can get the source code from the link given in the description box okay so rest of the view coding i will copy from my article to save time okay so just come to the browser and just write decodemania.com okay and this is my blog website where i write article uh on uploaded video tutorials okay so this is the application article okay so just click on this now from here you can copy all the codes and paste in your application okay so for now i'm just going to the views coding and i will paste all the views coding from here to the application okay so just copy all the codes up to here and within the body tag just paste okay save this now next what i will do is uh just go to controller okay so just open app directory and click on http directory then controllers directory and then employee controllers directory okay so first i will create a method public function index okay and here inside this function i will use return view and view name will be index okay save this now go to your browser and this is our application so just to rephrase this page okay so you can see there is a card with a button add new employee if you click on this add new employee button then there is a bootstrap type model will appear with some input fields okay and here we will display all the records from the database later okay so if you go to index.play.pc file and then from here you can see all the codings okay so let me first show you uh this uh from this body okay sorry actually we have to just remove this body tag from here okay okay now this is good okay now here you can see in this container we have a row and inside this row we have a column and inside this column we have a card okay and you can see in this card header we have manage employees that you are seeing this and there is a button add new employee you can see here and here in card body i have assigned an id and with a value so underscore all underscore employees okay and here i am displaying a loading text okay here you can see and if you click on this employee add new employee button then you can see a model with some input fields so this model is written here the code of the model is written here you can see with id add employee model okay and this is the form with action has method post id add underscore employee underscore form and ink type is equal to multipart slash form data okay and here i have used at the right csrf csrf token okay and all the input fields are coded here you can see first name last name email phone post and select file and here you can see submit button okay with id add underscore employee underscore button okay so first what i will do is i will send an ajax request to insert this form details into the database okay so for this uh what i will do is uh i will just go to the bottom and here okay so here i will create a script tag now inside this script tag i will just write it comment first and new employee ajax request okay and here i will first select the form using id okay so add employee underscore form this id is already provided in the form okay so here i will use submit event and here i will write function okay and here i will pass a parameter e okay now first uh what i will do is i will prevent the form to submit okay so here i will write prevent default okay now next i will create a constant fd equal to new form data okay and here i'll pass this and all the form data will be stored in this fd constant okay now next i will select the submit button add underscore employee underscore btn okay and here i'll change the text to adding until it sends the request to the server we will display uh adding message to the button text okay now next i will use ajax so here uh what i will do is first in url i will write a url where we where we will send this ajax request okay so first we need to go to wave.php file and here what i will do is i will create a route and this route will be a post route because we are sending post request okay so here just write store store okay and here employee controller class and here just write a store method okay and we can also name this uh raw so just use name and here i will use store okay this is also called named route okay so uh now go to index.blake.pc file and in url uh i will use this blade syntax and then i will use route and the route name will be store okay and then uh here in method sorry method i will use post method okay and in data i will send form data so i have already created this fd okay now next because i am sending a a file to the server so we have to use some properties like cash cash equal to false and process data data sorry data is also equal to false and content type sorry content type will be also false okay now next i will use success function response okay now here uh what i will do is i will just use console.log to display the response okay so first open this employee.controller.psp file okay and next we have to define the store method okay so here uh i just write handle insert employee ajax request okay and here just create a method public function store okay and here i will use request request object okay and here i will use print printer okay print our underscore uh post and print underscore are files okay because i am also sending files using the form so let me just open the console okay refresh now let's open this form and here just write first name last name email id phone number post okay and select an image okay and click on add employee okay so you can see we are getting back all the uh data from the server this is our token first name last name email post phone okay and this is the avatar file details okay so this is good to go okay so next what i will do is just come here and remove this two lines now next what i will do is i will create a file variable and i will use a request sorry request then file sorry request file now here we have to write the name attribute value so if you go to index.black.pc file then in here you can see in this input field file input field in name attribute field i have passed avatar okay so we have to just write it here avatar okay and then we will we will assign the file a new name okay so i will create a variable file name and here i will use time okay and then concatenate with the file extension okay so to get the file extension we will use this file uh variable and here i will use get client original extension method okay this will uh get the file extension okay now next i will store the file into the storage directory okay so here i will use file and then store as and here we have to write the path public images okay and here we have to write the file name so just write file name okay now next just create a variable emp data okay and here in array uh i will first use first underscore name and here i will use request app name okay request f name similarly for last name just write last underscore name request l name for email just write email and just use request email sorry email okay and for phone just by phone and just write request phone sorry phone okay for post just like post request post okay and last avatar and here we have to write the file name okay now next what i will do is i will just use sorry i will just use employee model okay and then double column create create and here we will pass this emp data okay and then i will return a response response hsn response okay so here i will write json and then here i will send a status 200 okay i'll send a status 200 using json okay now now next what i will do is i will just go to index.blade.pc file okay and here what i will do is just go below here okay so just save this file also and just come here rephrase and click on add new employee okay so first name sahil kumar sahil and third gmail.com phone some random visit post full stack wave developer and select an avatar okay so i'm selecting this one click on add employee so you can see adding okay and here you can see the status 200 okay it means our data should be inserted into the database okay so let's check the database employees okay so you can see the record has been inserted with all the details okay now next what i will do is uh when uh the request completed then we will hide this model okay and we will display some success message okay so for this just come here and uh just remove this console log and here i will use a condition if it is response dot status if response dot status is equal equal to 200 then in this case i will use sweet alert uh pop-up okay so here i will use as wal fire okay and here uh i will just write added and then in message i will write employee added success fully okay employee added successfully and here i'll write success okay now just below this if condition we will select the [Music] add button okay so add employee button and i will change the text again to add employee okay and i will also reset the form so we have to select the form again using the form id so add employee add employee form okay and here we have to select this and then use this reset method okay and we have to also hide the model okay so we have to select the model using the id so add employee model dot model and here just write hide okay save this now just come here rephrase okay refresh now click on add new employee now here i will write one kumar owner at gmail.com some random digit python developer and select avatar over this and click on add employee you can see adding and then success message added employee added successfully okay if you go to the employees table then you can see the record has been inserted okay now next what i will do is i will display all the records from the database here in table format okay so for this also we have to send an ajax request from this index.blade.php file to this employee controller okay so for this just come here at the top and here i will first write a comment okay fetch all employees ajax request and here i will define a function fetch all employees okay and here i will use ajax method and then in url i will first go to web.php file and here i will create a route and this will be a git route okay and here just write fetch all okay and here employee controller class and then here just write page all and i will name it this route page on okay save this file go to index.play.pc file and here just use the route fetch all okay next method will be git so just write git and then success function function response and here just use console log to display the response okay and just call this method outside of this function okay save this now just go to employee controller now next we have to define this method fetch all method okay so just go to employee controller and here just write a comment first and then page all employees ajax wiki waste okay and here just define a method public function page all okay now here what i will do is i will just create a variable emps and then i will use employee model and then i will use all method okay save this now i will use dd actually i will use printer and then emps okay save this now go to your browser refresh okay now you can see all the data are uh getting in the client okay now we have to just come here and delete this line i will create a variable output okay output equal to blank then i will use a condition if emps sorry emps then i will count count all the rows is greater than 0 then next i will use output and then this time i will use concatenate okay now inside this i will create a table okay and i will use some boot strap class okay so here i will use table class table strip class okay and then table sm text center and align middle okay align middle now inside this table i will create t head okay and inside this t here i will create a tr and inside this t r i'll create th first i will display the id then i will display the avatar okay now next i will display the name then i will display the email and then i will display the then phone okay then an action column okay now just um just here after the t head i'll create t body okay and i'll just cut this t body and table from here okay this and then next i'll create for each loop okay for each for each loop and here i will use emps edge emp emp and then inside this again i will use output and then concatenate again okay now this time i will use tr sorry tr tag okay and inside this tr i will use td now here i will display the id okay so here just use emp id okay amp id next i will display the image okay so here uh i'll use img tag and in src i will write storage slash images okay storage slash images slash and then here uh i will just use this and i will emp avatar avatar okay and then i will use with with equal to 50 okay sorry equal to 50 and i will use some class so i will use image thumbnail okay and rounded rounded circle okay now next i will create another td and here i will use enp enp and here i will display first underscore name and i will con sorry i will use again uh sorry emp last name last underscore name okay now next i will create another td and here i will display email so just use emp email duplicate this here i will display the post duplicate this phone okay and in last td i'll create two buttons so here i will use anchor tag and i will in id sorry in id i will assign pnp id okay and i will also use some class bootstrap class text success text success mx1 and here i will use edit icon class and here i will use data bs toggle equal to model okay and data bs target equal to edit sorry edit employee model okay and inside this i will use bootstrap icon class so in i tag i will use bi hyphen in cell okay pencil square okay and i will use bootstrap class h4 now next i'll create another anchor tag and then in id i'll use same id okay so just use emp id then in class sorry class i will use text danger okay take danger mx1 and i will also give a class delete icon okay delete icon then here i will use bootstrap icon by trash by trash okay s4 save this now just here what i will do is i'll create output configuration and paste this t body closing and table closing okay now next here just close this now next here i will use echo output okay in case if there is no record found in the database then here i will use the code and then i will use h1 tag here with some bootstrap class text center text secondary okay and margin top and bottom five and here i will write no record present in the database okay save this now if we come here and rephrase then you can see we are getting all the html codes okay now next what i will do is just go to index.blade.psg file now if we just come here then here in this card body i have assigned an id with this value so i will just copy this id and inside this page employee function fetch all employee function just remove this line and just paste and then just write html and then just write response okay save this now if i refresh here then you can see uh all the records from the database are displaying okay so you can see the image are not displaying okay because we have uploaded all the images in the uh storage directory if you go to this storage directory and then this app public images then you can see both images are here so we have to run a command to display the image from the public directory okay so just open the terminal and here just right php artisan storage column link okay just hit enter now if you just come here and refresh then you can see the images also okay now next we have to just use the data table okay so for this just come here and here i what i will do is i will just here write table dot data table method just initialize this okay and here just use order 0 dsc okay descending save this now just come here and refresh okay now you can see the data table is initialized now you can see here is the search box here is the pagination okay now next what i will do is i will work on edit any record record okay but before let me do one thing just call this method page all employees method uh here okay so just type fetch on employees method here and then if we just rephrase and then just click on add new employees so here i will just write this all at the right gmail.com some random and then from 10 developer and select image and click on add employee you can see employee added successfully and without page reload the added employee is displaying at the top okay so fetching and adding is now completed now we have to work on edit uh the user okay sorry employee okay so when we click any edit icon then you can see this edit employee model okay so i have already designed this model if we just go above then this is the edit employee model okay so here you can see i have used an id edit employee model okay and here inside this model you can see i have used form tag and method post and in id i have used edit underscore employee underscore form and in ink tab i have also using multi part slash form data okay and here you can see i am also sending csrr okay and i have two input fields here employee id and emp avatar okay two input fields here and a rest uh rest fins are the same okay but uh i have assigned id on every input field like uh for first name i have assigned app name for last name i have assigned id l name for email email for phone phone and for the post i have assigned post and here you can see uh for displaying previous image i have just created another div with an id avatar okay and this button with id edit underscore employee underscore button okay so when i am clicking this uh any of the edit icon then you can see this bootstrap type model will appear because if you go to this employee controller then this is the edit icon anchor tag and here i have already written this data hyphen bs hyphen target and here i have given the id of this model okay so you can see uh edit employee model okay that's why this model is displaying when we click on any of the edit icon okay now next what i will do is when we click on any of the edit icon then the previous values should be shaped in all the fields and here we will display the image preview okay so for this also we have to send another ajax request to the server okay so for this uh what i will do is just go below here what i will do is i will you can see here i have just assigned a class uh sorry here you can see i have used edit icon class okay so just copy this and here first write a comment edit employee ajax request okay now here i will use document on then i will use click event click event and i will use this edit icon class here function parameter okay now here uh i will use e dot event to stop the page refresh okay and next i will get the id that i have assigned here okay you can see i have assigned the id in this id attribute okay so i will get this id uh using this line let id equal to sorry equal to this dot attribute okay so i'm getting the id from the id attribute so here i will write id okay now next uh to check that id is getting so just use console.log id here save this now rephrase click on any of the edit icon and see in the console that okay so we are not getting id okay so let me just clear the cache okay click so we are not getting the id okay so everything is fine document on click edit icon function e e dot com this notator dot id console log dot id okay just cut this and paste here click this okay now you can see the id okay if you click on this one then one is displaying here okay now next what i will do is just remove this console log okay and here i will use ajax method again okay in url i will write sorry in url i will write the route name okay so here just okay so first we have to go to dot pc file and here just create a route so this time i will use get method and then i will use edit employee controller class and sorry edit and i will also name it edit okay save this go to index.play.pc file here just use blade syntax route edit okay now next i will use method method gate okay and data data will be id so i'm sending id and we have to send the cs rf token so just create underscore token and using sorry using blade sim text just use a method c as rf underscore token okay this method will generate acsrf token now next i'll use success then function response response okay now here just use console.log to display the response okay now next we have to go to employee controller dot pc file okay and here just we have to just define the edit method but before defining let's write it comment edit sorry handle edit employee ajax request okay and here just write public function edit here just use the request paste request object okay and then you will get the id id okay and then i will use emp emp equal to employee model find okay so we will find the row by id and then i will use return response response so i will send a response json response with this emp okay save this now if we just come here and rephrase now when we click on any of the edit icon then we are getting the previous data of the clicked uh employee okay now we have to set all the previous values into these input fields okay so to set uh what what we have to do is just go to index.pc file okay and here first just remove this console.log line okay just remove and next we have to select the first name field using app name id and then i will use well then response dot first underscore name okay duplicate this line and here just first last and here just right next phone just for sorry here just at post post okay now next i will use avatar here i will use html html and inside this i'll use img tag src attribute i will write storage slash public no public sorry images slash and here i will just use this dot avatar okay avatar this dot avatar and then i will use width width equal to 100 okay and i will also use some bootstrap class img dude i am gpu and i am the thumbnail okay okay now we have to also set emp underscore id that is hidden okay so just try well press dot id and we have to also set emp underscore avatar dot well raise dot avatar okay save this now if we go to the browser and replace now when we click on any of the edit icon then you can see all the previous values are set in the in field okay and the image is also previewing here okay now next what i will do is i will send these data again to the server for update okay so next we have to send another ajax request to update okay so for this uh what i will do next is and just here i will create sorry right a comment update employee ajax request okay and here i will select the form uh edit underscore employee underscore form okay edit underscore employee underscore form then i will submit function function then parameter e just use e dot prevent default okay now again i will use const fd okay equal to new form data this okay now next i will select the button uh edit underscore employee underscore btn dot text and here i will use updating okay now next i will use is x method and here in url uh first go to web.pc file and here i'll create a post route because we are sending the data to the server so just use post and then here just write update employee controller class update and just name this route also update okay save this now just go to index.blade.pc file in blade syntax just write route then update okay now in method i will just use post data from form data false process data will be also false and content type will be also false okay and data data type no need to write data type just write success function and response okay so here what i will do is i will just use console.log and display the response okay save this now we have to go to the employee controller dot pc file okay and for update uh just come here just write a comment handle update employee ajax request okay and first we have to write file name variable now next we have to get the employee sorry actually we haven't request public function update method okay and here i will use request so just here write request now inside this first i will use file name okay and then i will find the uh employee using the employee id so here just write employee model and then find and here i use request emp underscore id okay and here i will if request has file okay and here i will write avatar the name attribute value so we are checking here if request has any file okay if uh if we select a new file okay it means there is a file selected a new file selected so in that case what we have to do is first we have to remove the old image okay from the directory and then upload the new one okay so we have to just create file equal to request then file and then avatar okay now again we have to just write file name equal to time okay concatenate dot and here using this file we will use get client original extension method to get the file extension okay now next we will store the file into the storage directory so just use store as and then public slash images okay so we'll use this and then here i will use emp and sorry emp okay not emp file name okay now in this case we first checking if request has any file selected then first we are storing that file into the storage directory and again inside this if statement we are checking if emp has avatar then we will use storage storage and delete method then we will remove the previous image okay so just write public slash images slash then concatenate dmp avatar okay amp avatar and in case if we don't want to update the image and we want to keep the old image okay in that case what i what what i will do is just write file name and here i will use request and i will use emp avatar okay i will assign mp avatar that is same from the form that is hidden okay now next i will just create emp data again and array and here in first name first underscore name we will use request app name okay similarly here just write l name and last name here for email you just write email for phone just like phone phone okay and here just like post post okay and last avatar okay so just write file name so file name and here just type avatar okay now next here what i will do is i will use emp update okay and here i will pass emp data okay similarly here also i will use return response return response json okay and in json i will send status okay status 200 okay save this now just come here refresh okay replace this page now just click on this now i want to update this java developer okay click on update employee okay so we are getting the status 200 means uh this uh post has been updated okay so let's go to employees table and rephrase okay so you can see the post is updated okay and and the rest are the same okay so now next what i will do is when we when the update process is finished then we have to hide this edit employee model okay so for this and also we have to display some kind of success message also okay so just come here go to index.blade.pc file and in inside this success method i will check if response dot status is equal equal to 200 okay it means here i will use s swallow dot fire and here i will write updated and in message i will write employ updated success fully fully okay and sorry here i will just write success and here also i will use fetch all employees method okay and here i will just select edit underscore employee underscore button and i will send the sorry i will set the text update employee again okay and i will also reset the form so just edit underscore employee underscore form zero dot reset okay and finally i will hide the model okay so edit employee model dot model hide okay now save this now go to the browser rephrase now let's uh suppose i want to update this this one so just click this and here i'll just remove this cooler stack web developer to web developer okay and i will also uh update this image so just select new image so i'm selecting this one and updating okay now you can see updated and the image is also updated now if you go to the application and just reload and go to the public directory then a storage directory then image directory then here you can see there are only three images are present okay so first when we select new image while updating then the previous image will be deleted and then the new image will be uploaded okay so next we have to work on delete and employee okay so for this also we have to send another ajax request okay so for this what i will do is just come here and write it comment delete ajax request delete employee is its request okay and here what i will do is i will go to the employees dot con sorry employee controller dot php file and here you can see this is the anchor tag of delete okay so here you can see i have assigned delete icon class here so just copy and go to index.pc file here first we will use document and then on click ok and here just the class name and function parameter e first we will use prevent default to stop the page refresh and then similarly we will get the id of the of the current uh clicked employee okay so this dot attribute dot sorry after good id okay and next i will uh use sweet alert confirm box okay so for this just go to sweet lut 2 and then click on examples and then just go below okay and okay so if you just click on try me okay so i will use this one so just copy okay and paste here save this now next what i will do is inside this uh dot then we will just cut this okay and here i will use ajax method okay and here i will use url and again we have to define a new route to delete okay so here i will use git sorry route and here we will use method post okay method post delete employee employee controller class delete and i will name this route also delete okay save this go to windows english.blade.pc file here just write route and then delete okay make sure you have okay delete delete okay now next what i will do is i will use method sorry method post okay and data okay so i will send id id okay and i will also send the csrf token so just use token and here just write c as our app underscore token method okay and then sorry success function function response okay so here inside this i'll paste this deleted and here i will write employee deleted success fully okay now here also we will call this page all employees method okay now we have to go to employee controller okay employee controller and then what here what i will do is just go below and here first write a comment handle delete employee employee ajax request okay and here just write public function delete method okay here i will use request a request okay and first i will get the id so just id request id okay and then i will catch the employee so just write employee model and then find find by id okay and then next i will check if first we will delete the image from the directory okay so storage delete storage delete public slash images slash dot emp and then i will write avatar okay if image has been removed from the directory then we will also delete the record from the database okay so just use destroy method and just pass id okay save this now if i just come here rephrase okay now suppose i want to delete this one if i just click on cancel then this confirm dialog box will be hidden and if we just click on yes delete it then you can see the record has been deleted and from here also if you just go to the public public directory storage images then there is only two images left okay so the image is also removed from the directory okay so that's it for this video uh thanks for watching this video in next video i will show you how to develop a complete custom authentication system in laravel 8 okay so see you soon in the next video [Music] you

Channel: DCodeMania

Views: 1,534

Keywords: wolfmania, dcodemania, crud app laravel 8 and ajax, laravel 8 and ajax crud app, crud app with laravel 8 and jquery ajax, crud app laravel 8, ajax crud app laravel 8, laravel 8 jquery ajax crud app, sweetalert 2 laravel 8, laravel 8 datatable ajax, jquery ajax laravel 8, laravel 8 tutorial, laravel 8.5, laravel 8 crud with image upload, file upload laravel 8 ajax, ajax laravel 8 file upload, jquery tutorial, laravel 8 project, crud app with datatable, crud laravel 8 jquery

Id: z8cCuWz_fYA

Length: 79min 31sec (4771 seconds)

Published: Tue Aug 03 2021