Laravel 8 Tutorial - Image CRUD

hi everyone welcome back to the laravel 8 tutorial in this video we are going to learn about image grading so let's see how can we perform the image grad operation so first of all let's create a new controller so just switch to the command prompt and here just type the command php artisan make colon controller space controller name let's say controller name is student controller all right now press enter now let's create a model so just right here php artisan make colon model space model name let's say model image student all right also create the migration so just right here dash m now press enter now switch to the project and just open uh student migration so just to go go inside the database migration and from here just open create a student table migration okay and inside this migration let's add some column so just write here dollar table colon string and add another column name name another column dollar table string and column name profile image okay also set here the label all right now save this file now go to the student model so just go inside the directory then models and just open the student.php and here just add the table name so right here protected dollar table is equal to table name which is this one students okay so just paste here now save this file and let's migrate this migration so switch to the command prompt and here just type php artisan migrate okay now press enter all right migration complete now run the application so just right here hp artisan all right present okay now switch to the project and just open the student controller so just go inside app http controllers and from here just open student controller all right inside this controller let's create a function here so just type your public function and function name let's say function name is add a student all right and inside this function just return to view and view name let's say your name is add dash student okay now save this file now go to the web.php file and create route for this function so just to go inside the routes directory then just open web.php and here let's create a new route route get and just add here the uri and that's the student all right i'll add here the controller name which is a student controller also add here like this use app http controllers student controller all right now add here colon colon class and just add here the function name which is add student okay so just copy and paste here now save this file now let's create uh this view so just copy this view name and go to the views directory so just go inside the resources resources okay then views and here let's create a new file and file name at it as a student dot blade dot php all right now inside this blade file first of all let's add html5 boilerplate so just type here exclamation sign and press tab now change the title here so just right here add student all right and inside this uh first of all let's add a bootastrap cdn okay inside this blade so go to the get bootstrap.com and now click on get started from here just copy this css and just paste here now copy this jss.js file and just add here guest here all right now save this file and inside the body just add here a section give some padding so just write your style padding up 60 pixel right and inside this section just adhere the container all right then row column md6 and add here the offset offset empty three okay and inside this just add here the card so just write your card then cut header and just right here inside this card header add new student all right now idea the card body and inside this let's create a form so just write here form method post and ink type multi-part on data and just close the form inside this form just right here and create csrf now let's create input field for the name and choose file the profile picture okay so just right here give class and classes form group and inside this add label just write here label for name and inside this label just add here name okay now create input field input type is equal to text all right name is equal to name and class form control all right now close this now create another field give class is equal to form dash group and inside this just add a label for file okay and inside this is right here choose profile image okay now create your input type is equal to file and name is equal to also file and class just add here the class form dash control all right now here just add a image for preview so just write here e i m z id is equal to review img all right all right is equal to profile image okay and just add here a style style is equal to max width max width 130 pixel and margin top 20 pixel all right now just close this image tag all right now here just add a script tag the script and inside this just create a function just write here function preview review file and inside this just add a parameter input and here just write where file is equal to dollar input and type is equal to this one okay file this right here type is equal to here type is equal to file all right and here get zero dot files zero okay zero is index now just add here if a statement if file then where reader is equal to new file reader all right and then reader dot on load is equal to the standard error function okay dollar just add here this id view imc dot attribute a double tr and just add here src reader dot result now here just add reader dot read edge data url right and inside this just add here file okay now save this file and just call this function inside this input field so just right here on hinge and just add here the function name preview file and inside this just pass here all right on change preview file and this okay now inside the form let's add our submit button so just right here button type is equal to submit and class within btn dash primary okay and just add here a text submit all right now let's check this form so this to the browser and just go to the url slash students okay uh what is the url add a student okay so just write here add as student all right now press enter and you can see here the form okay if i select any image you can see here the preview image all right now let's create another function so switch to the project and just go inside the student controller and let's create another function so just write here public function and function name which is stored student all right and here just write request caller request and inside this uh just right here dollar name is equal to dollar request arrow name and folder image is equal to dollar request arrow file and just add here the file okay dollar image name equal to okay in the study other time function then dot congratulations sign and just write here dollar image arrow extension all right now here just write image add to move and here i am just going to use public directory so just write here public underscore path all right and inside this start here the folder name images and in second parameter just add here image name product all right just right here the student is equal to the student okay and also add here the model student you just write here use app class models slash student okay new student okay now here just write as download as student arrow name is equal to dollar name and dollar student hero profile image is equal to uh image name all right so just write your dollar image name and just call the save function so just right here the student i don't save all right and now returns just right here return uh return back with instead here record let's title student edit underscore added just idea the message student record has been inserted okay now save this file and let's create the route for this function so just go to the web.php and here just write route post and just add here the uri add student then add here the controller name which is student controller column column class and just add here the function name so just copy this function name as to the student and just paste here also add here the route name so just write your name student dot store all right now save this file and now just copy this route name and do that student blade and inside the form just add here action and enter the double curly bracket then route and inside this just add here the route name the student.store all right now save this file all right now just display this message inside the student blade i add a sprint blade so just right here start here the alert for that just go to the bootstrap and here just search alert and from here just copy this alert success alert and it's here all right now just add here the if directive yeah here at the rate if session has this key this one student added uh then just print this alert and just add here the hint if okay and inside this just print here the message so just try to double curly bracket session column column get and inside this gate just add here the student underscore added this key all right now save this file and let's check first of all let's create a image directory okay this directory so just go to the project directory and just open public folder and then here let's create a new file a new folder and folder name is images okay now let's check so switch to the browser and just refresh the page all right now add here the name let's say smith john and select the profile image now click on submit and you can see here student record has been inserted okay now let's check into the database so go to the php my admin just go inside the laravel 82db2 and here just open the student just click here the browse and you can see here the record inserted okay name and profile image all right and see let's see the image so just go inside the project directory then public and inside the images you can see here the profile image all right all right now let's fetch all records from table and display it into the table so just go inside the student controller and here let's create another function so just write here public function and function name let's say function image students all right and inside this simply return of view and just add here the view name which is all as students okay now create the route for this function so so go to the web.hp and here just add route column column get and add here the uri which is all screwed in now where do you have the controller name which is student controller then column column class and just add here the function name which is this one students now let's create this view so just copy this and just go inside the views directory and here uh create new file all students dot blade dot php all right now just go to the add student and just copy all the text and just inside the holder student.blade.php file now make some some changes so just right here call the student and change the title here all the students all right and now just remove this form and also just remove this script all right and also remove this just add here a form so a table so just write your table class is equal to table table dash script all right now here just add the head then pr th and just add here the name th file image right and here just add t body all right now go to the student controller and here just write downl students is equal to a student column column call okay and here just add compact and just pass pass here this variable the students all right now inside this t body just add here for each directive so just right here and date for each dollar students as dollar student okay and inside this for each just add here tr then pd double curly bracket dollar student arrow name okay now just add here student arrow profile image okay and inside this just add here the image tag okay so just write here img src and inside this src just add here double curly bracket then asset and inside this just write here images folder name and here just add slash then double curly bracket and just write here student addo profile image all right also add here the style max width let's say 60 pixel all right now save this file and let's check so switch to the browser and just go to the url students students okay pick the url all the student okay so just right here all student all right and you can see here the record just add here well and just remove this all right now save this file and refresh the page now looking good okay now here just add a link for that newer student so just write here anchor tag href uri which is this one add a student so just right here add dash student and enter the class name class be in btn success and just add here the text add new okay now save this file and just refresh the page you can see here the student add a new link if i click here you can see here the add new student file all right now let's see the update operation so go to the current controller and here let's create another function so just write here public function and function name edit student and inside this just pass here the parameter id all right and just write here student is equal to a student column column find and just add here id all right and return view view name it edit that's a student all right and also pass here compact and this variable name student all right now let's add the route for this function so just go to the web.php and here just write route get and what i edit a student okay also add the parameter here id in controller name so just type in the student controller column class class function name which is editor student all right now go to the all student dot blade.php file and here just add the ph and inside this let's add here the text action okay and inside the for each let's create a link for edit so just right here td then anchor tag is equal to this uri editor student so just right here edit dash student and pass here the student id so just right here inside the double curly bracket a student arrow id all right and add here the class btn info okay and inside this anchor tag just add another text edit all right now close the anchor tag now let's create this view editor student so just go inside the views directory and now create here new file edit that's the student dot blade dot php all right i'll go to the add student dot blo dot php and from here just select all and copy and paste inside the editor student.grade.php file all right now change the title here edit a student and here also edit student all right now inside this let's create a input field so just write an input type is equal to hidden and name is equal to id and value just add here the student id this right here student arrow id right inside the name field just add here the value arrow name all right and here inside this image tag this right here src and double curly bracket assets that's it then just add here the folder name which is images okay slash double curly bracket the student arrow dollar student arrow file image all right now save this file okay now go to the student controller and let's create another function so just write your public function and function name which is update student all right inside this just write your request dollar request okay and from here just copy this line and just paste here all right and here just write caller student is equal to student column column find and just write here request arrow id all right now it's two dollar student [Music] hero name is equal to dollar dollar name right and dollar student arrow profile image is equal to dollar image name all right now call here the save function so just right here dollar save sorry dollar student arrow save all right and just return here return back with a message so just right here with student underscore updated okay and just add here the message student updated successfully all right now save this file and just copy this key name and inside the edit student just add here the key student updated and here also student updated all right now let's create the route for this function so let's go to the web.php and here just write route post update and ask a student all right and just add here the controller name student controller column column class and here the function name just copy this and list here also add the route name student.update all right now copy this route name and just go to the edit student.blade.hp file and inside the form just change the route dot update all right now all done so let's check this one more thing just go inside the whole student and okay link already added so let's check so just refresh the page you can see here the edit link if i click here you can see editor student page right now let's change the name [Music] let's say mark john all right in the profile picture this one now click on submit and you can see here student updated successfully all right now go to the url all that's the student and you can see name and image both are updated all right now let's add function for the uh delete record okay so go to the stream controller and inside this just add here a new function and just like type here public function and function name which is delete a student and just pass here the parameter id all right and now just write here the student a student colon colon find and just add here id okay now first of all remove the image so just right here on the link function then public path public interest and just add here the folder name which is images okay then concatenation sign after this and add here the slash concatenation sign and just add here student arrow profile image all right it will remove image from the image directory okay and just right here just add here a student arrow call the defense functions let's try to delete and simply return here return back with add here the key student underscore deleted all right just add here the message a student deleted successfully all right now let's create the route for this function so go to the web.php and here just write route column column get add the uber which is as delete as the student also add the parameter id name controller name student controller call on column class add here the function name which is delete student all right so just paste here now save this file and go to the all a student dot bla dot php file and here let's create a delete link so just write here href at the uri which is this one delete student now add id so let's try to double curly bracket student arrow id okay also add the button class btn btn denser all right now identity okay now save this file lines now inside the displayed just add here go to the great blade and just copy this and just paste here before the table and now change the key which is student deleted so just copy and paste here also here all right now save this file all done so let's check this so switch to the browser and just refresh the page you can see here the delete link if i click on this link you can see the record deleted okay now let's add new smith john all right select the image the bit record added okay uh add one more so just right here say first of all refresh the page say new file all right choose the profile image click on submit okay added now go to the all student you can see here the record now let's add it okay change the name let's say peter and also change the profile image now click on submit record updated now go to the all as a student and you can see updated the record all right now this is delete this one this record so just click on delete link record deleted and if i click here it also deleted right so in this way you can perform cloud operation with image in laravel it so that's all about image cred so thanks for watching this video and if you still have any kind of question you can ask me in the comment box don't forget to subscribe my channel thanks for watching

Channel: Surfside Media

Views: 21,029

Keywords: How, to, Program, laravel (Software), laravel, laravel v8, laravel 8, laravel project, laravel setting up, laravel v8 setting up, laravel v8.0, v8.0, laravel 8.0, laravel 8 playlist, laravel 8 tutorial, laravel 8 lesson, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, image crud in laravel, image crud in laravel8, image crud in laravel 8, laravel8 image crud, image crud, crud with image in laravel 8, laravel8

Id: bQaU8FN3PT8

Length: 45min 57sec (2757 seconds)

Published: Sun Sep 13 2020