Laravel 9 Ecommerce - Part 8: Brands Insert and fetch data using Livewire in laravel w/ pop up modal

hey guys welcome back so guys we are continuing our level 9 ecommerce series so now guys in this video we are going to start with the brands part okay so where we'll be inserting all the brands of the products so we can insert the product according to the brands so guys now let's get started so main focus guys we are going to do this brands in a live wire okay so guys let's get started so yep let's get back to editor and first step guys we have to set up the urls in your sidebar over here so right now i have setted it over here like categories add category and brands let me go to brands here you see 4.4 not found because no url so let's copy this and set up that route colon coolant get method now you are going to set the brands and then your component livewire component so guys for that let's create the livewire component of brands so before the creating your component we have to create the migration and model of the brand okay so let's begin with migration first php artisan make colon migration create brands table hit enter so your branch table created let's go to database migration and you find the branch table cool yep and here you find the migration code and create a string of name so this will be the brand name and the brand slug and one more thing guys that is you will be your status status means just checking true or false like hidden or not hidden and then let's make it to default of zero now guys let's migrate this php artisan migrate hit enter your table migrated could so now guys let's begin with the model php artisan make colon model brand model okay brand model created successfully let's go to app model and your brand dot php so now guys let's connect with the table the table name brands and you can call the fields that is fillable which will be the names log and status name comma slug and final status all set guys so now let's begin with the live wire php artisan make colon live wire admin brand then index okay so we'll create in this format hit enter so guys now your class component and the view it's created of livewire so you can go to http livewire inside your admin folder you find the brand and that is index.php cool guys so you found the page over here and you can go to that page let's close the migration and what you have to do guys let's check the output for this hello and now get back to the route where you have to connect your component air component so you need to copy the correct path brand forward slash index colon colon class as simple guys so this brand index is nothing but your brand class name okay so you're calling that going to that page at the render function at this render you're receiving the page so now let's refresh okay so it's uh we have to extend the layouts and sections of the admin so whop us to your component here you call your extends function where you will call your layouts dot admin and you have to call the section also where you want so my section is the content simple if you're not understanding what is this then you have to go to your normal admin dashboard you find this your layout admin and the content right this is your extent and this is your section so that thing we are doing in this live wire that's it guys so no difference the same code let's see and now you can check the output refresh perfect so you see that hello okay now guys you need to begin with your table design and with the crud of brands so now guys let's begin with row column md12 and then your card card header inside that h4 tag where we will tell this is the brands list and create a tag where you will add brands and we are going to create in a bootstrap model so not required a url right now let's create the card body card body and then your table begins over here so let's design the table too dot table oops i have to add table bordered table strip and then table head table row table heading id let me minimize this and the name slug if you want to show you can show and show the status and finally one action button now guys you can begin with the table body table row table data now we don't have the data so first we have to insert some records so guys first we will create the model to insert the record so before that let's check the output guys once here you refresh perfect so this is your brand let's make it to buttonwise and just align it to the right class button button primary button small float and looks better okay so guys let's go to getbootstrap.com okay so i'm on the getbootstrap.com go to docs search for model we go and we see an example over here live demo looks cool let's copy the target and paste that and this is my brand ad brand model okay add brand model and the model you have to copy let's copy the model and just above the form you're going to paste that all set so guys let's include in a separate form so inside my brand folder i will create a new file called model form.blade as simple now i'm going to cut this cut this model and paste in my model file okay and include the model blade so just add include where we will tell livewire model form perfect so you can link it here so now guys what we have to do let's copy the model id target part so you can paste here your model name will be add brands let me just beautify the file now guys you need to save and your form begins over here form let's control x and paste now let's design with the input field so margin bottom three label name so brand name input field design this class form hyphen control so same code guys we'll copy and paste again for the brand slug and one check box so let's copy and paste here we'll tell status be our tag we don't require this class check box checked is hidden unchecked is visible okay save and make this button type to submit so once you save this you are going to wire colon submit dot prevent where your save brand function okay save or store anything let's give store brand okay so now guys before this uh if you are using a model in livewire we have to ignore so liveware colon ignore dot self save it and now guys let's check the output once before writing your insert code now let's click here looking fine so guys you can check here and when you save it should save the data so let's begin to save the data first step let's give the input model dot differ is equal to we'll tell the name okay it's the brand name so guys you need to copy the same code and paste back this will be a slug and a finally one check box so let's paste that here we'll tell status as simple all done guys and now if we want to show the error so you add an error name and you can just use the dollar message to show the error dollar message you can keep this in a small tag small tag paste that give the class text danger copy and paste for the three inputs so copy this status slug paste that's it so now guys once you submit you're going to submit the form at the store brand function we don't require to give this function so you can just give the store brand it will automatically call on the submit so guys where you have to go you have to go on your component of your brand index okay so first up let's create a function function name is store brand and we don't have to get anything from here and directly we have to start writing the brand code so before that you need to specify all the input fields so like public dollar name why is the dollar name dollar slug and dollar status because we have given that the model input name name slug and status we have to if you are using this model then you have to define in the public okay you have to assign them so now guys uh let's do the validation before storing the data so public function ru les rules function and inside that rules let's return where array you have to call your input fields name copy this log the next was slug and the next is status okay so you have to do the validation for this like it's required and it's a string so same concept for the slug so now guys uh once validation is done you are going to get the data so let's tell validated data is equal to dollar this of validate it's just validate and after this guys you are going to insert the data create the brand model colon colon create function and give the array here you call your name of dollar this of name all set so same way for the slug and for the status slug status so this should be in a condition like if it is true it is checked means you are going to insert one else insert zero all done guys and now we are doing with the slug so you have to do some other select validation yep and you need to import its class illuminate support str imported and now you have to import your brand also import the class class is imported guys both and now once saved you can show the session flash where we'll tell message the message will be brand added successfully and after this we have to close the model right so we used in the last code of category so let me copy from there copy this close and paste so close the model so we are dispatching a browser event so we have to check that this event has come or not close model so for that guys uh let's get back to our index blade file of brands and just move below and add the push code okay yep so let me copy from the category to save time let's go to a live wire category index plate file let's move below here the push and push code and paste that that's it guys so we are capturing that add event listener okay and hide the model so hide the model of what the model name is i mean the id add brand model let's copy this add brand model and send they have paste here that's it guys so add it now now once you save the data you are closing the model so i saw let's get back to the model so once we save we have to empty the all the input fields also so for that what we have to do let's get back and just create one separate function to reset the input fields okay so you can create after the rules itself like create a function until reset input okay and remove all this not required download this of name is equal to null so all these names log and status right copy and paste tell slug and the status just we have to set it to null now you can copy this function name and once you can end that so after model close i am going to reset all the inputs that's it guys so now save and now guys let's test with it let's get back and refresh so add brands here i'm going to add mi mi slug save cool it's saved and its model has disappeared so guys let's check our database for the brands okay so let's go here and there's a branch let's open the table and we see that the data has inserted successfully cool guys so now let's fetch the data over here so it's very simple guys let's get back to our brand index and here at the render function you have to call your dollar brands is equal to your brand model colon colon all so instead of all we want the pagination also so you can get order by i want in descending order like the esc and get the page innate function 10 and now you need to send this in a array of brands what data dollar brands so let's copy this dollar brands and send that perfect so now guys if you are using a page nate you have to import the classes of that so use with pagey nation and we want to use the bootstrap also so we need to add protected dollar pagination team is equal to the bootstrap so boot strap as simple guys you need to import its class so input the class livewire with pagination all set that's it guys so now you can get back copy this and get back to your brand index blade file okay and now user for each or let's use the for else okay for else brands brand copy and loop the data so dollar brand of id name slug and status so status we are not just checking the value instead we are checking it is hidden or visible so one means hidden not one means visible and finally one td tag for a a where edit and delete so you need to add the href class button success and the delete will be danger so guys we need to add button small to make the view smaller and we will take this cut and paste and now coming in the else part you can add a tr tag td table data call span of how many columns you're going to do one two three four five total five columns you can just add that until no brands found save it and now guys let's check the output so here we refresh cool so we get that data and now guys let's insert the record one more like samsung and let's save oops and here you see the validation also is working fine let me copy the above paste here let's save here you see the second row and without page reload it's working okay let's see now lenovo copy and paste for the slug save lenovo okay all are visible and all the data is working fine okay so now guys let's check with the pagination and one more thing the strike str ipd okay striped here you see yes perfect so now guys we need to check the pagination part let's get back instead of then i will check one by one let's refresh here so you get only one record we did not add the pagination link in our livewire blade file just after the table create a div tag open and close curly brace and just get the forage first dollar brand variable and call links save it and now you can get the data refresh code so now if you go to page nu2 3 you are getting all the records so guys let us set by default as 10 okay standard size 10 refresh okay so let me remove the url all good guys so guys in this video that's it and let's continue next video about edit and update the data and then delete the data so thank you for watching this video guys please subscribe like and share

Channel: Funda Of Web IT

Views: 13,690

Keywords: fundaofwebit, how to add brands in ecommerce laravel, laravel 9 ecommerce brands, laravel 9 ecommerce project, insert and display brands in laravel ecommerce, insert and fetch data data using livewire in laravel 9, laravel livewire insert and get data, how to insert and fetch data in livewire laravel, laravel livewire form submit, laravel livewire save data, laravel 9 livewire insert data and display, insert data using bootstrap modal in laravel livewire

Id: tWzu-qrmo2c

Length: 23min 40sec (1420 seconds)

Published: Wed Jun 01 2022