Laravel Ecom Part-57: How to make dynamic slider/carousel with CRUD in laravel 5.8

hey guys welcome back so guys in this video we are going to make our slider crowd application so we will create that heading and paragraph and link and link name of that okay and with the image so we want to add a custom slider not a static slider so guys let's get started with that so first let's move to our dashboard and let's create one tab called slider and let's click on that so we can find this home slider so let's now let's create a page and start with that so first let's create a model and migration table for this let's open the terminal and and now let's give a command so first we'll create model with the migration so both at once so php artisan make colon model where slider hyphen m okay hit so model and migration both are created guys and now let's go to our first model you can see slider model so this is laravel 5.8 so it's coming out in in laravel latest version 8 version it's coming inside the model so guys now let's assign the table protected dollar table is equal to where your table name that will be a sliders okay as simple and then your fields protected dollar fillable is equal to inside array format one will be heading description then the third one is link and the first link name image and one status done and now let's let's push these things into our database so let's create these things let's go to a slider so this is my sliders table and add that dollar table of string not string will take medium text because heading and paragraph always be big for the sliders so let's give medium text which will be heading copy and then same as description copy and paste and then link also let it be lengthy only and link name will be small so let's give string underscore name and then the status not status image image and then finally status status and this will be tiny integer tiny integer with the default by default it should store zero and this should be nullable also nullable and make the description as nullable okay so these three fields nullable mandatory threading and image so let's save guys and let's migrate this table first php artisan migrate so create slider table is migrated successfully and let's close this guys and let's try to call the page so let's copy this url and go to routes web.php and inside your admin middleware we are going to create a slider route so let's keep this slider route colon colon get function paste admin then your slider controller at index function so let's create a controller first php artisan make colon controller inside admin folder forward slash i want to create slider controller hit enter something is missing okay we gave us wrong spelling for this controller controller and enter controller created let's go inside our app http controller inside admin we have created slider controller perfect let's kill this terminal and live let's create a function public function and the function name will be index function and return view where inside admin folder i am going to slider folder and inside that index page i am going to call so let's copy this slider and create a folder resource views admin inside admin creator slider folder and then create one index dot blade dot php file done and now guys let's extend the template so let me just copy from another page and let's end the section and section and now guys container margin top five row column md 12 card card header h4 which is slider a tag add slider class we are going to design this button button button primary float right and after this card body your slider data will be here okay and now guys once you click on this add you will redirect to which add slider so now let's see the output first refresh you can see the output cool let me just make this button as small button sm save refresh you can see that so let's click on this and you will redirect to add slider and let's create a route and create a page for it first let's go to web.php route colon colon get function paste go to create function slider controller let's copy this and paste below paste here and use create blade file let's go create.blade.php let's copy the same thing and send into our create file let's make this as home slider and keep this as danger and this will be the back button and now inside this you are going to tell add slider and here your form starts so let me just show the output before that refresh cool so you can see that add slider option and now guys let me design the form and show you the output so let's start with the form and yup guys so guys i have created the form over here so let me just show with that so first is heading and then your description with the text area then link and the link name and then the file that is upload image so main thing which is input type file and this is image and one check box guys so when you are using dollar i mean input type file that time you need to send over here as enc type is equal to multi-part form data okay so this is the main thing to upload the image and let's send with the post method and the url you're going to create over here to store the slider so over here store slider function i mean url and after this at csrf field you'll call csrf token and one simple button guys we needed so let me just copy with this and let's remove and create one button submit will create okay and this type will be submit and this class button button primary done save now let's let's try to see the output so let's refresh you can see perfect so guys now let me just remove this class from this status okay save refresh once again cool so status checkbox is zero means visible one means hidden so now guys let's try to insert the data let's copy this url and go to your web routes and use a route of post method send and go into your admin backslash slider controller at store so copy this and move to your function and create here public function public function store function and inside this dollar slider is equal to new slider after this call your column name so my column name is heading is equal to dollar request requst so before this request you need to pass inside this so let's send that request dollar request and then only you can access this request with the input method so what are your input fields so this is the heading copy and paste so same way you are going to call all your database columns and then your input fields link link underscore name and guys for the image to store we need to check in another method so let's use if condition if the image is there then you have to come answer this so dollar request of your has file function where if the image is there then you will be inside this so let's create a file variable is equal to dollar file of your your which file oops we need to make this request okay not file request image so if it is finding then you have to get that and first we let us get the extension here so let's tell dollar extension is equal to dollar file of your get client original extension semicolon and then this is your extension now and let's create the file name dollar file name is equal to first let us create the file name with the time function let's concatenate keep single dot single quotes and then dot inside this no spaces okay no spaces dot and then your extension so let's take this extension and paste over here let's move this file into one folder so use move function to move the file inside uploads forward slash my slider folder forward slash and what name i want to give that file name okay so let's take this file name and send as simple now is let us see this path so let's go to a public uploads you can find that slider folder if you don't have please create it okay and now guys once it's done we need to save this okay so let's copy this paste until this image column is equal to dollar file name we want to save the file name okay and after this guys dollar slider of status is equal to dollar request of input function where you are going to check with the status if it is set to true which means it is checked then you need to store one if it's not checked you need to store zero and after this guys you need to save it save function let's return and redirect back with the message status slider added successfully save okay so to show this message on back to create page let's use a simple if else statement if session of status is set means then you have to show that so where are you going to show in one h5 tag class is equal to alert alert success save and let's try to insert the data guys now a simple first refresh and let's add slider one heading slider one description with dummy some images okay and link right now will give hash and link name will be read more and now guys let's try to upload the image so let me select with this and i want to be visible so let's keep it unchecked only so let's submit okay we did not import the slider so please import that let's get back so this slider we are using import the class so class is not found why we can check over here its class is there so you need to create a capital s okay so let's make that capital s save and rename this save it as simple nowadays let's call this path so that was the mistake small mistake let's import the class app slider perfect so let's get back and now let's submit again cool so slider added successfully and let's see in our database guys so first let's refresh let's see this slider open the slider table you can find the data cool so now let's check the image is available or not so let's go to inside our public folder uploads and in this slider you can find this image perfect so let's now let's try to access this on your main page okay so this slider so let's create a simple table and access that details so this is your slider data and inside this table dot table dot table bordered table row table heading id heading image and then status and after this one edit button so there will be no option for delete because we don't delete any images we just update that so table body table row and inside this table data we are going to paste all the i mean loop all the data over here so let's go back to our controller at the index function we are getting the index page right let's create the variable slider is equal to slider model colon colon all function compact and pass this data when you go back to your index page is for each loop for each loop and then same slider let's take this item cut and paste take this dollar item and paste inside this dollar item of id then heading and your image and the status and one simple button tda tag edit create a class button button success button small so guys now let's refresh okay so we are getting and now let's call the image path and this condition of zero one status so let's make it down and call the image tag where call the path of it asset function and inside this uploads folder slash slider and then your concatenate the your image item so let's send over here as simple and let's give a width size for this i want to keep 100 pixels slider image let's remove this extra thing save and now for this use if else condition if dollar item of status is double equal to 1 hidden else visible done save let's remove this extra thing and now let's see the output guys perfect so now let's try to edit this data guys as simple so let's create one url and move url edit slider with the id so that is dollar item of your primary key id and let's copy this and create a path route column column get function where id i mean give forward slash and then pass your id at your controller so let's copy this and paste and tell edit let's go back to our slider controller and create a function so public function and function name edit return view which is admin dot slider dot edit and let's go to our slider folder and create this file name inside my slider folder i'm going to create edit.blade.php file as simple so let's copy the same form from your create and paste inside your edit and let's rename this as edit slider this will be back button as simple and update this url to update with the variable called dollar slider of id so what is the slider let's go to our controller and inside this you are passing the dollar slider variable is equal to then your slider model colon coolant find function where you are going to find dollar id so this dollar id is coming from your edit function so this edit function how it's coming over here you have assigned that route okay so whatever at this route you're passing that id you're going to take and push to edit function and send that in your model and let's send this variable into your edit blade file using compact function and is that slider so guys we are going to copy this and then you are going to fetch over here and now lets fetch that values so dollar slider of which is this heading okay let's copy this and paste for the other fields so this is input and let's type link then link underscore name let's copy this and paste for your description it's a text area so we are going to paste directly inside that description and then finally one status status if double equal to if it is 1 then you have to tell this is this will be checked else it will be null okay so if it's one only that time only you're going to check and now guys one image so let's try to fetch that image path which you have created in your index page so let's copy the same path and paste refresh okay so instead of dollar item you have to paste dollar slider that's it so now let's try to view the output of this first refresh first and click to edit cool so slider 1 and its detail then link read more and the image also has come so now let's try to change this image and update the image okay so let's let's move back to a form so first you need to create one url and one method put put put method now let's create a slide route route using put method route put method where you're passing the id inside this and update so let's get back to our controller and now let's copy the same code for of store to update the image okay so let's change the function name first to update and send the id or parameter which you are sending over here and remove this new tool and define function and place that dollar id and then as same it moves so over here we need to check that if old image exists you need to remove that so first create a path called destination destination is equal to inside single quotes call your path so this is the path let's paste that and then concatenate with the dollar slider of image image image and then guys let's use if condition to check file colon colon exist function so what exists so this destination with the file name if it is there then you are going to come inside this and use delete function to destroy this destination with the file as simple now if it's not there if path is not there then update done change the status let's change the status update and return and redirect back to edit page so once you return the status will be shown over here cool so now guys let us refresh and update the data so let's give heading one updated and the image from green to we will check with the sky let's just submit okay file not found why we didn't input that so let's import this file import so we have to select in this where is that it's not okay it's over here let's go so this is the class now let's go back one step and then again resubmit so let's select the file once again with the blue and submit perfect slider updated successfully and this is the data after refreshing and you can see the image and let's try to see the old image so that old image is not there and new image is updated perfect so now let's add one more slider which will be slider slider two heading slider two description add some data link will be hash here we are going to learn more and update the image submit added let's go back on this you can see two sliders are there so now let's integrate this slider on your home page okay so we are going to set over here so let's go to our route local directly so let's move on the top so this is the path let's go to the front end controller and this is the page let's go there okay let's move at the top you can see that includes slider with front end slider so let's move that where is the front end slider and inside this slider blade.php and this is the slider guys so now so this slider we don't require let's remove the slider and go back to getbootstrap.com we are using bootstrap 4 guys so let's shift to bootstrap 4 so right now version is 5. for this project we were using bootstrap 4 so let's use that okay so let's search for carousel carousel let's move below so this is with the heading and paragraph and you can more link also so let's copy this slider copied and paste we don't require these things we don't need this indicators and here's the carousel inner and these are your colossal items let's remove this and this will be our next and previous button save and now let's integrate that sliders so first let's move to a front end controller where you are going to index page okay on this page wait this page okay this is the slider right on this page we are going so that is index page with the help of front end controller let's create slider is equal to slider model colon colon where status if it is 0 only then only have to come using get function and let's import this class at the top so this is the slider imported and then inside this compact function let's pass that slider variable send that done and now guys let's move back to this and go inside this path and let's use for each loop for each slider which is slider item slider item and inside the slider item you required all your headings and paragraph description that is okay so let's paste this and now first this is your image path let's call the path over here asset function let's call our path uploads forward slash slider forward slash then your dollar slider item of image done so this will be our image let's mention that it's a slider image in the alt tag and now let's try to fetch that again the heading let's paste slider item of heading copy paste description and then link so this link will be working as a tag so let's cut this add a tag href is equal to paste directly as simple and over here the link name which we have created slider item of link underscore name and then one status so that status will be checked over here only that is checked now and i mean in this your status and now let's keep this as active or unactive because if it is active means it will set all active only right so for that you need to create one simple one condition called dollar i is equal to 1 and end php and after this let's increment that i so dollar at php start and end php and dollar i plus plus we need to paste this down and take this active over here and mention the above dollar i is double equal to 1 then you have to set it is active else it should be null so don't require anything a simple save and now guys let us test this first let's get back refresh perfect so you can see that slider heading one updated slider description updated and read more button has come over here you can see read more learn more cool so guys now we have created this slider right so let us try to uh hide the status of this i don't want to show this second slider so this is slider one and this is slider two i don't want to show slider 2. so let's click on edit and select this and now let's submit over here you can see slider updated and now let's try to access that slacken slider over here so you cannot access that second slider because there is no slider so only one slider is there as simple let's add one more slider third slider for demo let's click on slider 3 heading slider 3 description and link will be hash we are going to give and contact us we will tell add the image open and submit let's get back you can see this is visible and this is visible this is hidden refresh you can see that slider 1 and next will be the slider 3 okay so slider 3 data is coming cool so let's make the status as unchecked submit which will be visible now refresh perfect so one two and three so guys in this video we have completed with the slider club application for our fabcut e-commerce laravel 5.8 version so guys thank you for watching this video please subscribe like and share

Channel: Funda Of Web IT

Views: 2,774

Keywords: fundaofwebit, how to make dynamic slider in laravel, dynamic slider in laravel, how to make ecommerce slider in laravel, how to make custom slider in laravel, how to build carousel for home page, home page dynamic slider in laravel, how to carousel or slider in laravel, laravel ecommerce website, build ecommerce website in laravel, laravel ecommerce crash course from scratch, laravel crash course

Id: 9lFiO0A5SDo

Length: 35min 36sec (2136 seconds)

Published: Sun May 23 2021