Laravel 8 IMAGE CRUD: Complete Image CRUD in laravel 8 | Upload image in Laravel 8

hey guys welcome to my channel so guys in this video we are going to start with the image colored in level 8 so guys let's get started so first you need a fresh application to get started with it and here guys in my env dot env file i have set up with the database called laravel for begin and yep guys so let's close and let's start with the image card application so guys first start your terminal and create a model and migration table for students so let's give php artisan make colon model where my model name will be student hyphen m so this hyphen m will provide your migration tables with the model so let's hit enter you can see model created successfully and created migration also for this students table so guys now let's check inside our app model you can find that student model just be created now and let's check our database i mean table so let's go to database migration this is the last table which we have created called students done so guys now let's keep all the fields which you required over here so let me just close this terminal and let's add the fields which we required so i'm going to add the student name the email one his course and then the image or profile you can tell so this will be the profile of the user will keep profile image so we can understand very clearly and now guys let us migrate this table into a database so before migrating let's call this table into our model student model so let's type protected dollar table is equal to single quotes paste the code this is your table name and now guys i want to call all the fields also so let's call that fields protected dollar fillable is equal to inside array format we are going to call all the fields so this name next was email and other was pass source course profile image so let's type that profile image done and now let's migrate this table into our database so my database over here laravel for beginners and there is no student table let's migrate this ctrl tilde symbol php artisan migrate hit enter so migrating and migrated table is migrated guys and now let's check in our db refresh you can see that student students table is created cool so now let's get back let's close everything as simple guys now let's create one controller for the student php artisan make colon controller called student controller hit enter so controller created successfully let's kill this terminal and go to apps http controller where you can find your student controller perfect so now guys let's create a route and call use this controller let's go to route web.php let's begin over here let's remove everything and start the code guys for this student image crowd okay so let's use route get function where i am going to create the path called students let's copy this and go back to your controller called student controller colon colon class comma and then inside single quotes you are going to your index function so let's create a controller so if you're using controller in your web dot php please import the path of it so i have imported over here let's go to student controller and create a function public function function name index and guys over here let's create a call the page inside my students folder index blade file go create a folder for student let's move to resource views inside this folder called student and inside the student i want a file with the name index.blade.php as simple now extend your layouts guys so extends layouts dot app and after that and section content and end section end section as simple so we are using bootstrap 5 to design the user interface that's container row column md12 where i want a card card header and set card header level 8 image crud okay and on a tag add student create a class button button primary float and okay so let's now let's see this output first for this let me create that card body also save and now let's get back and call the path students students cool so this was the output which we have created by this route students and we are on this index page so now guys let's create one url called url add hyphen student so let's copy this and create a route for this first route colon colon get function same as above so let's copy this controller because we are going to work on the same controller and make this to create done so let's get back to our controller and create one function with the name create so let's copy this paste and rename this index to create and over here we are going to change the file name as create okay so copy this create and create a file inside your let's create create.blade.php file done so let's now let me copy the same index code design and paste in create file and over here we will change the title as add student with image okay this will be the back button let's make it students as simple give this as danger and now guys here you need to design the form so let's start with the form where the method is equal to post and form group margin bottom three input dot form control label so label all the fields what what are the fields we required as you can see in our database we need name email course and profile image so let's give student name let me copy this paste paste paste as simple now guys next will be our email so first we required to give them that name value name next is email name is equal to email and then course name is equal to course and then final which is that input type file that will name will be as profile image okay done and now when you are passing this input type file you need to pass one enc type is equal to multipart form data if you don't send this your its waste of adding this input type file okay so let's add form group margin bottom three and a simple button and give save student and let's give this button type as submit and the let's design this button button primary and now guys let's check the output for this let's come so what url you need to give which we have created as add student let's copy paste enter perfect so add student with the name email course and student over here and save button so guys now let's write the code to save the data and with the image so let's get back on the create blade file student profile image let's create a route on this action so i'm going to create a same route guys which route the same url path so let's copy this and paste over here and let's create again one route with the post method route route colon colon post of ad student so level is enough smart to understand which is the get request and which is a post request so guys let's copy the controller and let's create a function inside your student controller you come over here save and let's move to our student controller and create one function with the name student store so let's copy this and paste a rename with this create to store so guys we are accepting data from the input box you need to call request dollar request done and now let's call create a variable called student is equal to new with the model name student hit enter and yup guys so if you're using model please import the class at the top and then let's carry the student variable with the column name so my database column name you can see name pass that name is equal to dollar request of your input fields so what's the input field you can take from the create file called name okay so in this format only you have to call all the four fields so next was email so same from the input field also then course the course also and the profile image let's copy and paste and this input field file name copy and paste over here done so we don't want we have to store the image right so for that case you we don't require this and we will use in some other format so guys we have to give if condition where if dollar request of what this okay so let's control x dollar request of from input to has file you have to check if it is having then you have to check with dollar file is equal to dollar request of your file so what is that file called profile image let's copy that and take the extensions from this dollar extension extension is equal to dollar file of get client original extension done and now let's create a file name is equal to with the time function dot in single quotes between that dot add and then concatenate with this extension copy and paste and now guys you need to move the file so dollar file move function where the path will be uploads forward slash your students forward slash and then give comma not dot it's a comma and then give the file name to let's make this correct spelling file name copy and paste file name and then after this i want to store that data so let's call the student variable student of your profile image column that's in file name okay copy and paste that's it so this is how we are going to store the image and then guys we need to save the data using save function save function and after this i want to return and redirect back to the same page after saving the record with the status and the message will be student image added added successfully so guys let's check this path once uploads called and the students folder so inside public there's uploads folder and inside that students folder perfect so everything is available now guys let's go back to show the message on your create file so let's get back on the top use if condition session of your status and is headset dot alert dot alert success open kelly close curly braces and then session of status so guys now everything is set and let's test it let's get back refresh so once you are going to submit you need to check the csrf token let's get back over here please add that csr field csrf without this form csrf token it doesn't accept the submission so let's refresh guys and now let's add on prakash om gmail.com courses pca image we want to take as i will take this dummy image as casual shirt let's open now let's try to save it save perfect so student image added successfully cool guys so now let's see that image is added i mean inserted or not so let's get back to our folder inside public uploads we have created the student folder we can find that student image cool and see let's see in the database that request has stored or not perfect so you can see that record also stored and the image also is stored so let's add second varun varun gmail.com dca let's add another image with formal shirt save student perfect again student added successfully let's refresh the message has gone and you can see in this folder two images are there and with the two records cool so guys let's see next how to fetch these records in html table view so let's let's get started with it so let's move to our index page where this is shown level 8 image float which is the output of this so let's now let's design the table to view that data so let's create table dot table dot table bordered with the tables striped table head table row table heading as id student name and then course and we require the email also just include that and the final one image okay image edit data and delete one done and now let's include the table body table row table data td that is and over here only you're going to loop the data so guys how this page is coming with this path so let's copy this and go to your web route so this is the path let's go to the student controller at index function so let's move so this is my student controller at index function so let's call the record which we have stored in previous part one so let's create a variable called student is equal to call the model called student model colon colon all okay so this student model please include the path of that and send this variable inside your index blade file with the compact function compact function we are using to send the variable to this index file let's get back and now same way use for each loop for the student variable ctrl x and paste over here let's use this dollar item off inside double curly braces item of id so this is next is name then email and then course so course and the image over here so let's call that image path guys over here let's remove this add img tag and over here open curly brace close calibrate use asset function to call the path so let me show you that so while inserting the data we have used this path right uploads slash students okay so we are going to copy the same path and call that over here and then guys concatenate dollar item of your what is the column name we have to profile underscore image so let's call profile profile underscore image done and width is equal to 70 pixel let's minimize the sidebar heig hd height is equal to 70 pixel and img and now guys the final one which is for edit and delete a tag last button button button primary button small this will be edit and paste again make danger and make it to delete save and now let's see the output let's refresh guys cool so you can see that data has come with the image also perfect so guys now let's add one more student data with the image let's add as gautam gautam at gmail.com become let's select the image so we are going to select this shirt and save student student say student image added successfully let's go back and you can see that gautam data is headed with the image so as we have successfully done with how to fetch the image with the records in laravel 8 image card so guys now let's see how to edit this image and remove the old image and update with the new image so let's let's get started so let's move to this edit button guys let's go back and so this is the edit button and now let's create a route for here with the url function edit student forward slash with the id okay so this dollar item of id which we are using will share with this let's copy this url and create a route so route colon colon get function so pass this and we are passing the id so open curly and close curly braces and then pass the id and paste with your controller so over here you are going to create an edit function let's go to this controller and create the edit function let's create public function edit function and you are sending the id so this id will be your normal primary key id which will search for the model okay so that is student model so let's create a variable called student is equal to student model colon colon find find function where id and after this i want to return and view student folder dot edit page so let's go and create one resource views inside student folder want to create a edit.blade.php file and inside this blade file edit page i want the same form to be added like add student form so same detail we are going to edit so we are going to comp copy that same form so let's go to create blade file and copy and paste inside our edit blade file so let's close that and now let's change this heading with edit student and back button will be the same this is a message to show and yup guys so let's make few changes over here so while on the submit of the button while submit of the form you are going to make update student with the student hyphen id okay so from where this variable is coming so this variable is coming from your controller which is over here student so let's pass that student variable using compact function with the name student to edit page okay so now you can access the student variable so same way as you're getting id you have to call your database values over here paste as name so let's copy this and this will be for the email and this will be for the course and the image we don't send the value in the image let's see that image what is there so let me just copy from this view and show over here so inside uploads student folder instead of dollar item we have to pass the student variable of profile image and see the output of this as simple and let's change this button name to update student so guys when you click on this update student you are going to update student route with the csr token and the method you are going to send put method okay so let's copy this with id or sending let's create a route with the method put okay so this put method with the id and your controller so let's copy that controller and change this to update so let's go and create a function inside your student controller public function update function and inside this when you're submitting over here you are submitting with the input tags and all so let's call those fields so that is a request of dollar request and the id also you are getting so after this create a variable called student is equal to find the model i mean student model where you have to find the id dollar id is fine now so once it's found then you have to update the records so guys as we have stored the records the same we are going to update the records so let's copy this and paste here so same input fields which we have name email course and profile image so same thing we are going to copy all the name email phone and profile image let's get back so guys there will be one small change if the old image exists we have to delete that so for that let's create a variable called destination is equal to where your path so this is the path we are storing also and from there only we have to delete uploads slash where you have find this so whatever the data specific id are finding so that variable of student we have to call the profile upload image so this is nothing but your database this column field okay so this profile underscore image field so from there you are using if condition to check let's call that file colon colon exists function cs function what you are going to check in exist if the file exists then you have to come inside this and delete the file of your destination so if you are using this file please input the class or else it will throw an error so let's use this let me just show you so this is the class guys i have imported and now let's get back over here so this will delete the file and upload with the new image so guys now to the save you have to give update data as simple and change this message to show that student image updated successfully and written and redirect back to the same page done and now let's get back let's refresh the page guys let's edit this gautam image edit and yup guys let's go over here and i'll show you so this is the image which is shirt seen over here that image should be deleted and new image should be updated so we are going to update with the data gautam a and let's choose the image and select with this band update student you can see student updated successfully message has come let's refresh you can see that image also is updated and let's see that is deleted or not so guys that old shirt is deleted and replaced with the pant so as we have successfully completed the edit and update of image in level 8 so guys let's how to delete this image from your database where we are going to delete the data with the image okay so let's let's get started so first let's move to this table at this delete button okay so let's go so guys here is the delete button where we have to create a route and pass the parameter with the id okay so url function and inside this will type delete student forward slash and concatenate with the dollar item of its id so that is the basic primary key id and now we have to create a route for this so let's copy and go to our web dot php and create a route so route get method forward slash and the id which you're sending and then your controller so let's copy this controller paste and create a function destroy so let's copy and go to the student controller and create one function so let's move below public function function name destroy and we are taking the id so let's call this dollar id and now we have to find this id in your model so before that create one variable called student is equal to student model colon colon find function where dollar id and now we need to delete the record so this is to delete the record but what what about the image this will delete your row from your database but we need to delete the image also which you have stored so where you have to upload students so this is an image guys so we have to delete this when we click so for that let's get back and here just give a if condition and your destination path we have to check first so for that let's create one variable called destination destination is equal to so my destination is uploads folder then students folder and inside that i have the student variable of your profile image okay so which is the column name and after this guys we need to check that so let's call file model of your using exists function so dollar destination if it exists then you have to delete the file using delete function so what you're going to delete the destination save and again we have to go back so let's copy this and paste over here so written and redirect back with the same until student deleted successfully and now let's test this guys so before that you need to import this class make sure you have imported the class over here save and yep guys so let's go refresh and now let's click to delete this so we are going to delete this gautam which is jeans over here so this image we had we are going to delete so let's click on delete cool so the data is deleted from here and let's see the image perfect so that image also is deleted so guys now this was one method to delete the data and now we will learn another method to delete the data okay so that is nothing but let me just minimize with this comment this delete create a form and one submit button delete and copy this class because we need the same design and this button type is equal to submit and now you are going to pass the csr field and the delete method which is the second method okay so this will be delete and the url the same url which you have created previously now send that and using post method ust post as simple so guys now let's delete the record so once you click this that time it will go to this url by moving this it will take the method as delete so let's copy this and go to your web dot php so now we use this so let's comment that and let's create the route again colon colon delete function okay so this is the method delete okay now let's copy the inside same thing we are not going to change anything in that so everything will be same just we have to include delete function as simple and it will go and a desktop function it will call so guys now let's get back refresh and let's delete this one data which is white shut over here so the data is over here okay so let's click on delete cool so the data is deleted and let's see perfect so as we have learnt in two methods how to delete the data one is by get method and one is by delete method so guys thank you for watching this video and please subscribe like and share

Channel: Funda Coder

Views: 3,933

Keywords: fundaofwebit, funda coder, how to upload image in laravel, upload image in laravel 8, how to display image in laravel, how to fetch image in laravel, laravel image crud, laravel 8 image crud, image crud in laravel 8, crud in laravel 8, image crud in laravel, insert and upload image in laravel, how to remove image from directory in laravel 8, delete image from folder in laravel, destroy image in laravel 8, edit and update image in laravel 8, laravel image upload tutorial

Id: 4glzMBy1RSk

Length: 36min 17sec (2177 seconds)

Published: Mon May 31 2021