Laravel 8 Project Home Services - Making Slider Dynamic

hi everyone welcome back to the laravel 8 home services project in this video we are going to learn about making slider dynamic so let's see how can we make slider dynamic on home page so first of all let's create a model uh for the slider so this to the command prompt and for creating the model just type here the command php artisan make call and model a space model name which is slider and for creating the migration just write here that's m okay now press enter all right migration created now switch to the project and let's open the migration so just go inside the database directory then migration and from here let's open this one create sliders table migration and inside this migration let's add some column here so add here the first column which is title dollar table arrow string and column name title and another column a string and column name image and one more column which is a status table data type boolean and column name status calls right at the default value so right here default false all right now save this file now let's migrate this migration sources to the command prompt and type here the command php artisan migrate okay now press enter all right migration done now let's create a three live wire component so write your php artisan make colon live wire a space directory name admin slash component name uh first component for the list all slides of slider okay so right here the company name admin slider component okay now press enter now let's create another component which is for edit slide add slide okay so right here php artisan make admin slash admin add slide component okay now press enter and one more component for the edit slide so right here php artisan make colon live space admin slash admin edit slide component all right now press enter okay now run the application so right here php attention server you can switch to the project and let's open the route file so just go inside the routes directory and openwave.php file and inside this file inside this admin middleware route group let's create a route for this component so right here route get splash admin slash slider add here the class name admin slider component column colon class okay and also give the route name so write your name admin dot slider all right now let's create the route for add slide so right here get slash admin slash slider slides slash ad okay now enter the class name admin add slide component column column class and the route name name admin dot add address for slide all right now for edit the slide add admin slash slide slash edit slash password parameter which is slide underscore id okay now add another class name admin edit slide component column column class name admin dot edit underscore slide all right now save this file now let's close this and let's open the class file so just inside the app directory then http livewire admin and from here let's open this one admins slider component.php file and first of all let's add another layout so right here layout and then layouts inside the single quote layouts dot base okay now let's copy this and let's open this one admin add slide component dot php file and paste here layout okay and now let's open this one edit slide component and also enter the layout all right now inside this file admin slider component uh let's page here the all slides so right here slides is equal to model name slider column column as in it and add here the page size let's say 10 record in one page all right now let's pass this one slides to the view so add your comma big bracket then slides arrow dollar slides all right and also import here the live wire with pagination so right here livewire slash with imagination and inside the class right here used with pagination all right now save this now let's open the admin slider component view file so just go inside the resources directory resources views livewire and then admin and from here let's open this one admin slider component.php file and inside this file first of all just remove this text and now let's open this one and from here let's copy all the text and paste inside this slider component view file okay now here let's change here the title on slides and now let's copy this and paste here okay also change here one slides and for add new slides add here the change of the route name and simply write here add and restore slide all right and column name image title and then the status and just remove this okay now we have the id and then image and here title slide title and for showing the status add here status and also add here inside the forage slides edge slide okay now let's copy and select this and press control plus t okay and paste here okay slide if slide status is true then active otherwise so inactive all right and no need for this just remove this also remove this category okay and this is for the edit edit slide so right here the route name edit underscore slide and pass in the slide id sliders for id and then just right here slide arrow id all right edit slide okay and for deleting the slide first display or the message are you sure you want to delete this slide okay and here change your the method name delete slide okay and pass here the slide id now it's done and also change here for showing the pagination link slides links okay one more thing after showing the image uh first of all let's create a directory for the slider okay so go to the project directory and inside the public folder just inside this public folder and let's open the images and inside the images directory let's create a new folder and folder name let's say folder name is slider okay now uh go to the view file and here change the folder name images slider okay and now just remove this and then slide arrow column name image okay all right now it's done so save this file and now go to the layout file so just open the layout based.php file this one and inside the admin menu here is the admin menu okay so after this let's copy this one and after this just paste here okay now change here the text manage slider all right and change here the route name slider admin dot slider okay now save this file now let's check this so switch to the browser then just refresh the page now go inside the admin menu and here you can see the manage slider now just click on this and you can see here the all slides page okay this time there is no any sliding table so it's showing the blank table okay now let's create a form for add new slide so switch to the project and let's open let's open the admin add slide component.php file okay and just remove this and now let's open this one add service category component.php file and from this file let's copy all the text and paste inside this view file add slide component.php file okay and inside this file first of all let's change here the title add slide all right and also change here add new slide and fold showing the all slides change on the text slides on slides and here admin dot slider okay and now inside the form uh let's add here the fill for the title so change all the text first control for title slide title and second for image okay so let's remove this and one more thing for this status cut this and paste after this okay and change here the text status okay and for title change here the name title and also change here inside the label and remove this and for the status let's add here the select control so right here select class is equal to form that's control and name is equal to status all right and also binary of the properties right here wire colon model is equal to a status okay let's copy this and paste here also paste here and now just close this and inside this select add other two option first option active which value is fun active okay and now let's copy this and paste here another value which is inactive extern inactive and value zero all right and change other but submit text add slide okay now save this file now let's open the class file add slide component class file so just go inside the app directory http live admin and from here let's open this one and inside this file first of all let's create three property here first property which is title another property image okay and third property which is status which default value zero all right now let's create a function public function for adding the new slide so right here add new slide function okay and before adding the function first of all add here the validation so right here public function and lifecycle book method updated and pass one argument which is failed now inside this function you just write your dollar this arrow validate only and first pass here the fields then big bracket then inside this just write your title which is required and for image required and also add here the mi mes type which is cpac and png format image format okay and now add in the semicolon now inside this method uh first of all add the validation download this arrow validate this one then inside the big bracket let's copy this and paste here okay and after the validation just returned all the slide slide is equal to new slider okay and after this dollar slide arrow title is equal to dollar this arrow title then slide arrow for image first of all let's generate the image name and store the image so for that just right here download image image name is equal to carbon column colon now and timestamp and then add other concatenation sign dot then dollar im dollar this arrow image arrow extension okay and after this download this arrow image and call here the storage storage function is stored edge and pass here the path which is folder name uh images slider okay slider so and here the directory came slider and then just pass here the image name this one all right and after this inside the slide arrow image is equal to just store here the image names right here this one and after this store the status so right here slide arrow status is equal to dollar this arrow status this one and now call here the save method slide arrow save okay and after saving this inside the session call here the flash and pass the key message and write here the message slide has been created successfully all right okay now let's copy this function name and go to the view file and inside the form wire column submit dot prevent is equal to this one add new slide okay inside this file node uh add inside this file okay admin add slide component.blade.php file here inside this okay and here this one add new slide now save this and also add that save the class file here it's showing the error okay it's not required time stamp only okay now save this and one more thing uh let's add here put here the use livewire with file upload this one and also inside the class just use with file uploads now save this file and let's check this so switch to the browser and just refresh the page okay now click on add new and you can see here the add new form now add here the title so right here let's say first slide okay now select the slider image and set the status that's active and click on add slide and you can see here the message slide has been added created successfully okay now click on all slides and here you can see the slide okay now let's make working with uh make working this edit slide slide link okay so for that go to the project and this time let's open the admin edit slide company.php file and inside this file first of all let's create here i am just going to copy this property okay so let's copy and paste inside this class and also import here the use with livewire slash with file upload okay now let's copy this validation and also create this function okay copy this and paste inside this class file in its slide class file okay now change here the function name edit and right here edit update slide okay update slide now import here uh slider model so just press enter and now you can see here model imported and i'll also import here the carbon so just import like this use carbon slash carbon all right now add one more property here public dollar new image and after this add here the life cycle book method mount so write your public function and function name mount and pass there one argument which is slide underscore id okay now let's fetch here the slide according to this id so right here slide down slide is equal to slider find and pass the other id sliders for id okay now dollar this arrow title is equal to dollar slide arrow title and for image dollar this arrow image is equal to dollar slide arrow image dollars this status dollar slide arrow status okay and one more property uh let's create one more property for slide id so right here public dollar slide address for id okay and before this title after this just write here dollar this arrow slide underscore id is equal to dollar slide arrow id all right now let's find this this property new image so uh first of all go to the view file admin edit slide component view file okay so from resources directory admin directory let's open this one admin edit slide component.php okay and inside this file first remove this tape and go to the add slide component view file and let's copy all the text and paste inside edit slide complete viewfinder okay now change at the title so just select add and change your edit slide and also remove this and right here get it and okay title image and here's the status for image uh change are the property name and just write here new image okay select this and write here new image and inside this this if simply right here if new image available then display this new image arrow temporary url otherwise display image from database okay so right here inside the heads part let's copy this and paste here and first add here the directory name and set and directory name which is images slash slider okay then forward slash after this just right here property name image dollar image okay images slider and in this all right now save this file and also change at the submit button text update slide okay and now go to the class file and let's copy this this function name update slide and go to the view file inside the edit slide review file and here change here the function name wire column submit dot prevent is equal to update slide okay now save this and inside the class file one more changes uh just remove this and for this image validation first add here a condition if dollar is arrow new image then dollar this arrow validate only dollar fails and then inside the array just paste here okay and also change here the column the new image all right and also inside this update slide function and here if download this arrow new image then download this download this arrow to validate and then inside the big bracket let's cut this and paste here okay and change here the property name new image all right and one more thing uh inside this after this just add here the if condition if download this arrow new image then first of all remove the word image right here on link then add here the path image images slash slider slash concatenation sign dollar slide arrow image okay and now let's cut this line three line and paste after this inside this okay and one more thing just remove this and add your slider color color and find download this arrow slide underscore id now everything is done okay now save this file and let's check this so switch to the browser and just refresh the page now click on edit and you can see here the title and existing image and here is the status if i change the status inactive and here first slide one okay and also change here the image you can see here the preview image and if i click on update call to remember function okay spelling mistake so extension okay go to the class file edit slide component class file and here okay spelling is correct but we have to change here property name okay so right here slide arrow here dollar this arrow new image okay and also change here dollar this add a new image uh now everything is good okay now save this file now let's check again so go back okay image deleted so let's add one new slide so right here first slide let's do just type in a second second slide and here the image this one active add slide edit okay now click on all slide all right now let's edit the edit this and this time i had here second slide to change the image inactive update and this time you can see uh slide has been updated okay let's enjoy the message updated so inside the class files simply change the message updated all right okay now let's uh make working this one delete slide slide link so go to the project and go to the admin slider component class file inside this file and here let's create a function for deleting the slides so write your public function and function name delete slide and pass one argument which is slide underscore id okay then slide is equal to modeling slider column column find and pass here the slide id so write your dollar slide underscore id now uh first of all let's remove this i just remove this existing image slider image okay so uh from edit slide component uh let's copy this one and paste here okay now dollar slide arrow delete and after this inside the session call the flash method and add the key message here the message slide has been deleted successfully okay now let's uh call this function read slide so go to the admin slider component view file and here inside the delete link uh just paste here the function name delete slide okay and pass here the slide id now save this file and let's check this so switch to the browser and just refresh the page and now let's delete this slide so click on this icon this is the confirmed uh confirmation dialog box if i click on cancel the slide is safe now delete click one more time so delete and then this time click on ok and you can see slide has been deleted successfully okay all right now let's use this a slide in our home page let's display here so go to the project and let's open the home home component class file okay so from live directory let's open this one and inside the render method after this let's switch here the slides so right here download slides is equal to slider and just check here the condition if the status the status is active means one then get all the slide okay and now just pass this slide to the view file so inside this array after this add here comma single quote slides arrow dollar slides okay now save this file now let's open the home component view file so from resources directory let's open this one on component blade.php file and you can see here this is the slider this is the first slider first slide and this is the second slide okay so before this first li let's add here the forage directive slides edge dollar slide okay and just cut this paint for each and paste after this inline all right now for showing the image here i'll just add here the path of the slider folder so right here images slash slider then slash double curly bracket dollar slide arrow image okay and inside the already text just add here the slide titles right here slide arrow title okay and now remove this ally and also okay now it's done so save this and let's check this okay so switch to the browser and first of all you go to the manage slider page and here first making active test because there is no image let's edit this and just add here the image open update okay the problem is because this image is not accessed so let's copy this image name and inside this directory first let's copy this image and rename this what is the image name this one all right and now cut this and go to the project directory and inside the slider image folder paste here okay now go to the admin page manage slider okay now you can see the image okay now let's add another image this is the second slide and browse another image make active and now click on add slide slide added all slide all right now let's check the slider on home page so click on this icon logo and here you can see the slider this is the first slide and this is the second slide okay if i inactive any one slide uh go to the minus slider page and this time i'm just going to inactive this one so edit and make this status inactive update and if i refresh the page you can see only one slide okay so in this way you can make home page slider dynamic so that's all about making slider dynamics 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: 949

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 tutorial, laravel for beginners, laravel tutorial for beginners, laravel8, laravel 8 project home services tutorial, laravel 8 home services, home services project in laravel 8, laravel 8 home services project, service based web application, making slider dynamic, add slide

Id: loBfUtiVFFo

Length: 42min 57sec (2577 seconds)

Published: Thu Aug 26 2021