Laravel 8 E-Commerce - Admin Making Home Page Slider Dynamic

everyone welcome back to the laravel 80 commerce tutorial in this video we are going to learn about making home page slider dynamic so let's see how can we make this home page slider dynamic okay so first of all let's create a model for the slider so switch to the command prompt and step all stop running applications so press ctrl c and now let's create the model so for that type here the command php artisan make colon model space model name and let's say model name is home slider and also create the migration so just write your dash m all right now press enter all right model and migration has been created now switch to the project and let's open the home slider migration so let's go inside the database directory then migration and from here just to create home slider table migration all right and inside this migration uh let's create some columns so after this id uh right here alert table data type string and column name title dollar table arrow the string and column name subtitle all right dollar table arrow string and data type column name price another column dollar table string and column name link and for the slider image data type of string and column name one more follow for this status okay string uh data type boolean and column name status all right and now just copy this table name home underscore sliders and the home slider model file so just go inside the app directory models and from here just open home home slider dot php file okay and inside this file let's add here the table name so right here connected dollar table is equal to home address for sliders all right and now save this file and now let's migrate this migration so switch to the command prompt and for migrating the migration let's type here the command php artisan my create okay now press enter migration complete now let's create a three live wire component okay one for the list all slides and second live wire component for the add new slide and third component for the edit slide all right so let's create the live world component so just write here php artisan make colon livewire a space directory name which is admin class component name let's say computer name is admin home slider component all right press enter second component for add new slides so just right here php artisan make column live wire space admin directory name and component name admin add home slider complete all right and third component which is for edit the slider so let's write to php artisan make colon livewire that space retro name admin and component name admin hit home slider component all right and now press enter okay open it created now switch to the project and let's create the route for this component so open the web.hp file so just go inside the route directory and open web.php and inside this admin middleware route after this route just create the route route at the uri admin slash slider add here the complete class name which is admin home slider component then column column class all right and also give the route name route name admin dot phone slider okay and now create the route for the add slider route gate review slash slider slash add okay and class name admin edit add add home slider component okay this one column column class and give route name admin dot add phone slider all right and one more route for the edit slide route column column get plus admin last slider let's edit and pass one parameter which is for slide id slider score id okay and add the component class name admin edit home slider component column column class all right and name route name admin dot edit home sliding all right now save this file and now just open the class file of admin phone slider component okay so just go inside the app directory then http livewire admin and from here just open uh admin home slider component.php file and inside this class file let's add here the layout after this we have layout and and here the directory name layouts dot output which is based and now open the admin the add-on slider dot component.php file and add here the layout layout layout start base okay and now inside the admin edit home slider component.php file and here layout layout layout start dates okay now save this file layouts added in uh three component okay all right now open the base layout file so from the resources directory resources views layouts and open the best.php file and and inside the admin menu you can see here this is the admin menu so after this all product link after this li uh let's add one more ally and add here the class menu as item and now bracket route and add here the route name this one admin dot home slider okay so let's copy and paste here and now just close this anchor tag and add here the text manage home slider all right and now save this file okay now let's check this so first of all run the application so just type here the command php engine serve okay now switch to the browser and refresh the page now click on login and add here the admin credential admin admin.com and enter the password now click on login okay now inside the admin link you can see here the manage home slider link okay now just click on this link okay you can see here the admin uh home slider component okay now let's add here inside this component let's add here the table so just go to the project and let's go inside the admin the home slider component inside this file had been home slider complete.php file and inside the render method let's paste the all sliders all slides so just write here sliders is equal to phone slider column color call okay and now inside the view and here the comma big bracket sliders arrow dollar sliders okay and now save this file and now open the admin home slider component view file okay so from resources directory resources views and inside this file let's add a table so let's remove the text and uh first of all let the container here container and also give some padding so any other style padding up and bottom 30 pixel and left right zero pixel okay and now add here the row in column column indeed well now add the panel handle handle default okay then panel heading and after this add the panel body okay inside the panel heading you can add the title so before adding the title add here the row column mmd six into [Music] okay and inside the second tip here the link for adding new slide so right here anchor tag double curly bracket route and add route name for adding new slide okay so just copy this one admin dot add home slider and paste here now the class btn btn okay and also right and now close this anchor tag and add another text add new slide all right okay and now inside the panel body let's add the table so add here tag table tag class table table script and a head tr th id and now just copy this here anytime all right and now enjoy the name image then title subtitle price link and here date and before the dates i started the status let's take this and one more column which is action all right and now after the t head add here t body td double click bracket slider arrow id and now just copy this line and paste okay now change here the column name image and here title subtitle price link status okay and one more for the date created created add okay created underscore add and one two blank date for the action all right and here for the image uh just cut this and add here the image image img tag okay and inside the src instead here double curly bracket asset and then right here headset images and sliders okay and let's create this directory sliders inside the public folder so just go inside the project directory and then public assets images and inside in this folder let's create a new folder and rename with sliders all right okay now after this rebracket added the forward slash in curly bracket dollar slider and arrow image okay and now i have the input 120 pixel and just close this take okay and for the status uh head here equals one status is equal equal to one in uh just print here active otherwise print here connect okay all right now it's done so let's save this file and let's check this so so to the browser and just refresh the page okay you can see here the table okay now for adding the new slide click on this link add new slide and you can see here the add new slide component okay so let's add the form inside this component so switch to the project and just open admin that's home slider component view file so from the resources directory uh just open admin add home slider component.blade.php file all right and just remove the state and add here the container here container and also add style adding 30 pixel and 0 okay and inside this tip add here the row and then column md 12 and you have the panel and then alt then panel heading and after this panel body all right and now add here the row column and e6 for creating two column all right now add here the title and new slide okay and add here the link for leaving all slide so right here and click add hrdf bracket route and just copy the route name this one admin dot home slider this one okay and paste here now either the class btn ptn success and pull right okay now just close the anchor tag and uh write here a text on slider all sides okay all right now inside the panel body uh let's create a font so right here form class is equal to form as horizontal and inside the form let's create the input field and give as formed as group and inside this create the label label class code empty fold and control tasks label and add here a text title all right and after this label and you have the input type text so first identity type is equal to text and folder title and class formed as control input okay and now just close this okay now just copy this and hit here well anytime and now change here the text subtitle okay and here for the price and here for the link and press one more time and add another text image slider image okay and from here just remove this input effect and add here input type is equal to 5 and plus input has 5 okay and after this add here a select control okay for this status so just paste here and ensure the text it does and now remove this into text field and yes select control select class form as control and inside the select let's add two option value is equal to zero and text inactive okay active and another option value is equal to one and text active okay and last uh just add here the submit button to remove this label and remove this input text field and add another button button type is equal to submit and the class meeting within primary and any other text submit all right okay now save this file and let's check this form so switch to the browser and refresh the page okay and here you can see the form all right now so to switch to the project and let's create some property inside the admin add home slider component class file okay so inside this file uh let's create some properties here just right here for creating the property public title public color subtitle public dollar price public dollar link public dollar image and public dollar status all right and now add the lifecycle hook method bond method okay so right here public function function method name amount and inside this let's get to the default value we had status property so right here dollar test and status equal to default value 0 okay and now save this file and let's find the property with the form control okay so go to the component view file and inside this form uh let's bind the property so finding the property just right here by model is equal to property name all right and inside the subtype wire column model is equal to subtitle for the price wire column model is equal to price foreign image and finally for the status you can select right here colon model is equal to status all right and inside the image control for the preview of the image right here and hit image and just close here the directory and add the date if and inside this just add here the new tag img tag and src is equal to double curly bracket then simply right here download image and call the employee url method okay temporary all right and also set the width 120 pixel okay now just close this ing tag okay now save this file now go to the admin add home slider component file and here uh let's create a function for adding the slide so just right here public function and function name and slide all right and here first of all create a variable slider is equal to new food slider all right and now dollar slider i'm just going to copy this and paste here let's tab and now select all and simply write here dollar slider arrow all right and now and here the equal sign call and this row okay so just copy this title and paste here title subtitle price link image and the status all right and for the image [Music] right here dollar image name is equal to use the carbon method carbon and also import here use carbon class carbon okay carbon and call here the now method timestamp time this time okay then enter the concatenation sign dot concatenation side download this arrow image call here the extension method all right and now download this arrow image and call here the function store edge all right and add here the folder name sliders simply pass image name and now slider arrow image is equal to this okay and after this just call here method and slider arrow save okay and for printing or displaying the message inside the json just call here the flash method class and inside the flash and here the key message and message slide has been created successfully okay all right one more thing for uploading the image import here livewire livewire with file upload and inside the class just to add here the use with file uploads all right okay now save this file and let's call this function on pump submit so go to the complete view file inside this file and on the form submit inside the form just add here wire column submit dot event is equal to this method x slide okay and now save this file okay and for displaying the message uh before the form just add here the directive and first of all check the session space alert as success and also find the road alert okay and now simply print here and get the double click bracket station and call the gate method and simply pass here the key message all right and now save this file now it's done so let's check this process to the browser and just press the page all right now just here that title first slider first slide title okay and add here the subtitle let's first slide subtitle and price at the 200 and here the link has https column column slash and see what in software okay and just paste here now browse the slide image so click on browse and select an image i'm just going to select this one open the status active and now just click on submit you can see here the preview image okay and now just click on submit and here you can see slide has been created successfully all right now view the slide so just click on all slides and here uh image is not showing so let's check the image okay but repository has been created all right so this to the project and let's check the image so let's go inside the admin admin home slide home slide this one with this viewfinder okay and inside the image tag asset assets images sliders here is correct okay so inside the admin add home slider component okay here is the mistake this when when uh we are storing the slide uh slider arrow image start here note image just add the image dollar [Music] this one dollar image name okay now save this file and for this slide uh just open the usb my admin and open the database laravel at e-commerce db and this is the home sliders table so let's click on browse okay and you can see here this is the mistake inside the image name okay so go inside the projector and you can see here this is the image name so just copy this and here just edit the row and remove this image name because this is the invalid name okay now save paste here and just click on go all right and now go to the this page and just reflect the page and now you can see here the image okay try one more time so just click on add new slide and click enter the title get the second slide title okay and here the subtitle second applied subtitle all right and enter the price this one and here the link so let me copy this one and paste here and here any link and now browse the slide image this time i'm just going to select this one okay and you can see here the image view okay the status active and now just click on submit okay i had uploaded successfully created successfully now let's check so just click on all slides and this time you can see here the image preview the slides image okay image all right now let's see how can we edit the slide okay so for that just go inside the project and here uh let's open the admin edit home slide company.php file and inside this file uh first of all add here the mount method public function and function name mount and inside this mount method uh just pass one parameter which is slider dollar slider underscore id okay and now create the slider variable slider is equal to home slider find and pass here dollar slider and score underscore id okay and then uh let's add here the property so from this component class file uh let's copy property and paste here okay and for the file with uploads add here use livewire with file uploads okay and here at one more property public color new image all right now inside the mount method right here dollar this arrow is equal to dollar slider arrow title all right now just copy this and paste here now change here the column name subtitle so just copy and paste here price link image the status okay and here create one more property for the slider id okay it's lighter and just [Music] arrow call the id column okay id okay now save this file now just open the admin home slider component view file okay so from the resources directory just open admin edit home slider this one complete.blade.php file okay and from the admin add home slider company.php file let's select all the text and copy okay and just paste inside the admin edit home slider component dot bluetooth hd file okay this one select all and remove and paste here all right and now change here the text hit slide item edit slide and inside the submit button simply write here the text update all right and for the image bind with this property with new image and also add a new image new image okay and inside this part simply add this tag src and load from the database so that you have the direct premium first idea of the asset within assets slash images and also width let's set the width 120 pixel and close the image tag okay all right now save this file and now inside the admin edit homes slider component.php file uh let's create a new function uh for the updating the slide so for that just write here public function and function name take slide okay and inside this this type insider is equal to ohms slider and we'll recall here find order this arrow slider underscore id okay and now right here slider arrow title is equal to this arrow title all right now just copy this line now copy this and paste here and enjoy the column name so just copy this one subtitle and add your subtitle and for the price price link link and here images status okay and now let's call here slider arrow slider arrow shape method okay and for displaying the message the message inside the session session and call the flash method class and the key all right okay and for the image uh before this head here if you follow this arrow new image in right here dollar image uh image name [Music] image name all right is equal to carbon i'm just going to copy this one from the add slide method just copy this this and paste here okay remove this and paste here now add the carbon method so just import here use carbon flash carbon okay and here engineer the dollar test new image and here also new image slider image is equal to this one okay now just remove this line from here now it's done okay now just copy this function name and save this file and just go to the admin edit home slider component.php file and inside the form submit method just remove the function name add slide and add here the method name update slide okay all right now save this file now it's done one more thing so just go to the admin home slide home slider complete update.hp file and inside this table uh just inside this td add here the link for edit the slide so right here the link is hrdf is equal to a loop bracket and here the route and go to the web.php file and just copy this one and admin dot edit phone slider okay so just copy and paste here and also pass the parameter is slide underscore id okay so just copy this and paste here and also and then the arrow sign dollar slider arrow id okay now save this file and also add here that class simply close the anchor tag okay and inside this anchor tag add in the i tag class fafa edit okay and increase the fs size 2x and just get the color text as before all right and just close this okay now save this file everything good edit slide okay and here the slider little screw id uh slide adjustment okay flight underscore id okay now save this file and let's check again so search to the browser and just refresh the page and here you can see the edit link okay now let's edit this slide so just click on this link okay and you can see here the slide record title subtitle price url image and status okay i'm just going to change here let's change the price 1 56 okay it also change the image all right you can see the new image all right and now just click on update and you can see here slide has been updated successfully so just click on all slides and you can see here the updated slide all right okay now let's see how can uh how can we delete the slide so for that uh just go inside the admin that means slider dot php file and inside this file uh let's create a function for deleting the record okay so right here public function and function name let's say function name is delete slide okay and inside this function just pass here the one parameter which is slide underscore id okay and now color slider is equal to home slider column column find dollar slide underscore id all right and now just call here the delete method method delete and after the deletion then click put some message inside the json json class let's add the key message and add here the message slider has been deleted successfully all right okay now just copy this method name and go to the admin home slider complete.php file and inside this table after this edit link simply create a new link anchor tag href and put here the hash sign okay and close this anchor tag and add here i tag class if if it has times okay and also increase the site if a dash 2x and add the text color red so i have the mention text as dancer and close the eye tag and inside the href tag simply call here wired on click event dot prevent is equal to the meter name delete slide okay and inside this function just pass here that's slide id okay slider id right here slider arrow id all right now save this file now it's done so let's check this so this to the browser and refresh the page now you can see here the delete link okay so i'm just going to delete this one so click on this link and you can see here the record has been deleted okay but there is no message showing so uh let's add this uh just to be for this table uh let's add here the alert so for that simply right here if station station colon column as name message add here directives and inside this simply right here the alert div class alert alert surface whole alert and add system simply print here the message to get the session column column gate and add the key okay now save the file okay now try one more time so switch to the browser and replace the page okay so i'm just going to delete this one click on this link and you can see here that it has been deleted successfully all right okay now add one slide i'm just going to write here first slide title and here slide subtitle price 200 and the link is http column slash here the link top browse the image select one okay the status active and now click on submit slide edit okay click on all slide and here you can see here the slide okay now let's use uh this slide on home page so we click on home link and okay and this time this is the static slider okay now let's make this dynamic so for that just switch to the project and just open home component file okay home component classify so from the directory http livewire uh livewire and from here just open home company.php file all right inside this file that the render method first page the all slider okay so just right here slider is equal to slider one selector colon colon and add here the condition where this does okay stick the status is equal to one and then call the gate method okay and now inside this return just add the sliders okay and inside the return view and here the comma big bracket sliders arrow dollar sliders all right okay now save this file and now open the home uh component view file so from the resources directory resources views live wire and uh home you can see all the home component blade.php file so just open this and inside this file let's find the slider you can see here on the top this is the main slider okay and you can see here this is the first slide second slide and this one third side okay we need only this slide so to remove these two slides from here to here so select from here to here and just remove this all right and before this deal let's add here the foreign sliders edge dollar slide okay and now just cut this thing and paste inside the forest directive all right okay and inside the title uh just remove this and here the double curly bracket dollar slide arrow title okay and for the subtitle double curly bracket double slide arrow subtitle okay and for the price remove the sprites and add here folder slide arrow price okay and here you can see the link okay so just remove this hashtag let's type and add here slide arrow link all right and for the image uh let's remove this image name and add here the retraining sliders and after this and forward slash curly bracket download slide arrow image all right now it's done so let's check this so save this file and go to the browser and replace the page and here you can see the slide okay it's showing the one slide because inside the database table you can see here there is only one record okay if i add a new slide uh just click on add new link and add here thick slide title and here second slide subtitle and here the price 500 link http let's copy next swap browse the slider image i'm just going to slide and select this one and test it active okay and now just click on submit slide edit okay and now just click on all slides and you can see here the tools like okay and if i click on home link you can see here the first slide and second okay now it's become dynamic and if i click on soft now link you can see here the software link okay and if i inactive uh any one slide i'm just going to connect this slide now just click on edit and make this inactive okay and now click on update okay and you can see here the status inactive and now just click on home link and here you can see the only one slide because second slide has been inactive okay so in this way you can make home page slider dynamics so that's all about making home page slider dynamic 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: 7,533

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 introduction, laravel tutorial, laravel 8.0 tutorial for beginners, laravel for beginners, laravel tutorial for beginners, laravel8, laravel 8 ecommerce tutorial, laravel 8 ecommerce, ecommerce project in laravel 8, laravel 8 ecommerce project, making slider dynamic

Id: fsZS_22HBIE

Length: 64min 39sec (3879 seconds)

Published: Sat Feb 20 2021