Laravel 8 E-Commerce - Admin Add New Product

ecommerce tutorial in this video we are going to learn about how to add new product so let's see how can we add a new product so first of all let's create a new livewire component for adding new product okay so switch to the command prompt and for creating the new livewire component uh just type here the command hp artisan make colon live wire space directory name which is admin and component name let's say component name is admin add product component all right now press enter component created now switch to the project and let's create the route for the admin add product component so for that just go inside the router directory then open web.php file and inside the admin middleware group after this route let's create a new route so right here the route column column get and the uri admin plus product slash and all right and now add here the component class name which is admin and product component column column class and also give the round name so right here name and let's say route means admin dot add product all right now save this file and now open the admin add product component class file so just go inside the app directory then http livewire admin and from here open admin add product confirm.php file all right and inside this file uh first of all let's add the layout so inside the render method add here layout so for that just write here arrow layout and inside this uh and here that name layout dot layout name which is these all right now save this file and now open the admin network component view file so for that just go inside the resources directory then views livewire admin and from here just open admin ad product component.php file and inside this file uh let's create a form so just remove this text and before creating the form let's add here the container all right and also add some padding here just right here style padding 30 pixel up and down and left right zero pixel all right and now add here the row then column call md12 now add the panel panel panel default panel heading all right and uh inside the panel heading uh just right here row call md six and add here a title add new product call mg6 and inside this tip let's create a link anchor tag href double quality bracket and here add the link for all products okay so for all products just copy this route name admin dot product and inside the blade file right here the route and paste here the router admin.products now add the class btn btn uh success and also pull right so right here pull right now just close the anchor tag and add here a text on product all right and after the panel heading uh add here panel body and inside the panel body uh let's create a form so right here form tag then class form dash horizontal in type multiplatform data and close the form and inside this form let's create the input field for the block name plug sort description description price and so okay so first first create the input field for the product name so right here class 4. and control dash label and add error text product english all right now an active input type is equal to text and placeholder is equal to product name and also add the class form and now just close this input text field all right now just copy this and paste here and here the text products one more time and change here the label sort description sort description and remove this input experience and add here text area text area class form dash control and placeholder sort description all right now just close the text area and copy this and paste for the description okay and just remove this sort and also from here and now just copy this and paste here and change here the label regular price and here sale price sku and for the stock status added the label stock status stock and for this talk uh just remove this input text field and add here select select control select class is equal to formed as control and inside this select let's add two option in stock and out of the stock okay so right here option value is equal to in stock and add another text stock and another option all right and now just copy this tip and paste here and change here the label speaker and also change the option node value 0 and here yes in value 1. okay and now add input text file for the quantity so just copy this and paste here change the label quantity all right for the product image in that image input type file and class input test file all right and just remove this placeholder and after the product image add the category so for that just copy this and paste here and change here that label category all right and here uh value is equal to blank and add error text select can take okay and here let's add the forest directly for each dollar categories uh first of all face in all categories so just go inside the admin at product complete class file and inside the render method let's create the all categories so just just write here categories is equal to modeling category column column all and now just run this categories so after this view name add here comma big packet categories arrow dollar categories all right now save this and inside the view file add here categories as dollar category all right and now just cut this option and paste inside the forage and inside the value add your double quantity bracket dollar category arrow id and here dollar category arrow name all right and last add here the submit button so just copy anyone and paste here remove the label and add here a submit button so right here button type is equal to submit and also add the class btn btn library and add here a text submit all right now save this file now let's check this one so before checking this form uh let's open the admin product component.php file and inside this panel heading uh let's create a link for the add new product okay so just cut this text and add here a row [Music] let's create a link anchor tag hrdf double curly bracket and right here the route and just copy this round name admin dot product okay so let's copy and paste here and also add the class vpn vtn success pull right all right and add your text add new all right now save this file and now let's check this form so switch to the command prompt and first of all run the application let's write here php are teaching all right transfers to the browser and just refresh the page now you can see here the add new link okay now just click on this link and here you can see the form okay now let's uh make working this one okay so for that go to the project and just go inside the add new product class file admin add product component class file and inside this file let's create some property so right here public and property name name now just copy this and paste here anytime and engineer the property name plug and next property which is sort of export description sorting description here okay maria description then regular price regular address for price and after this sale and dress code price then sku sale sku stop status stop and score status then speaker all right add here the property quantity and then image and one more property which is category id all right and now let's create a uh life cycle method mount okay so this right here update function and the function name mount and inside this uh function let's set the default value for the stock status and the featured okay so right here download this is stock underscore status is equal to default value in stock okay and for the default value zero all right and now let's find this property with the form input field so inside the view file uh administrator component view file let's bind the property so for the product name right here wire column model is equal to name and for this product wire column model is equal to uh okay this property name and for the product sort description uh let's copy this and paste here also inside the description regular price sale price sku and inside this dog status featured quantity and also inside the image and category select after this paste here and now change here the property name get l3d and use id and for the product image image and quantity just copy this quantity and paste here and for the feature just copy and paste here this docker status stop under status sku sale price regular price regular underscore price all right now it's done okay now let's create function for generate slug so inside the class file after this bound function let's create a function public function and functioning decelerate generate slug all right and inside this function just right here download this arrow slug is equal to hdr column column and call here the slug function and inside of this function just for share the product name download this name and add here the separator dash all right and also import here the sdr so for that just right here use illuminate support slash here all right and now just call this function on up event inside the product name inside this input textbook so after this just right here wire column here key up is equal to invert okay this function and now uh let's create a function for add product so after this function let's create another function probably function and function name uh let's say function name is add product all right for that product [Music] and just [Music] all right and now just copy this and paste here now change here the column name slug all right and here sort description sort underscore description here description regular price regular underscore price then sale price sale underscore price and just share more time and add your property as you then stock underscore status then featured quantity all right and for the image first of all let's create a variable color image name is equal to earlier the carbon function carbon now get here the time scan all right congratulations sign dot download this arrow image will call here the extension method extensions extension extn time okay and after this download this image and call here uh a store function store at store edge and here the directory name products and password image name all right and inside the table product image and just store the image in this image all right and now product arrow category id category underscore id is equal to it under this arrow category id okay now just call here the same function product arrow save okay and also apply some message so inside the session you will just call here last method add the key message product has been created successfully all right and now save this file and let's create the product image directory so let's go inside the config directory inside the config and from here just open filesystem.php this way okay and inside the local just comment this line [Music] and inside this and here the path assets forward slash images all right root arrow public underscore path and add here the direct training okay and now save this file and just close this and now just call this function on form submit so inside the component view file inside this form let's add here the submit event submit action wire column submit prevent is equal to just copy this function name and product and paste here all right and also display the message so before the form and here the click first of all check the session station hold on column as uh message key class all right and inside this tip just print this message okay so add the add your session column column gate and add the key message okay now save this file now it's done so let's check this so first of all restart the application php and so and now switch to the browser and just refresh the page add new and let's add the new product so i'm just going to type in the correct name new product okay here is the mistake uh product log okay let's check the binding okay so inside the component view file uh here products log okay just add here all right now save this and check again so refresh the page okay and add here the product name new product all right and you can see here that's that auto generated now add here the short description so i'm just going to be right here new product sort description uh description all right now just copy this and add here just text description here all right and for regular price i'm just going to write here 300 dollar sku dz 0 0 0 4 0 0 9 all right stalker status in stock featured no quantity let's say 120 and now select the product image just click on browse and select an image i'm just going to select this one okay let's add here the code for a preview image okay and one more thing cannot handle file upload without the live wire with file upload okay all right so two thing uh first add here inside the class use first of all import here use lightweight livewire slash with file uploads all right and now inside the class just right here use with file uploads all right and for the preview image inside the form after this image tag input file tag just right here what's the polarity of the effective dollar image and inside the if uh simply add the image tag for the preview image src is equal to double curling package image call here temporary 120 pixels all right now save this file and now let's check again so switch to the browser and refresh the page all right now add here the product name simply right here new product new product all right select generated and add here the description simply write here new product sort description here and now just copy this and paste here from the description and simply remove this all right and now add the regular price let's say 200 sku dc let's say this one okay the stock in stock feature no quantity let's say 100 quantity in stock okay and now select the product image i'm just going to select this one and you can see here the preview image okay and now select the category select this one all right and now click on submit okay method livewire temporary upload file extensor does not exist okay so error is extension uh does not exist okay with the spelling of extension all right so switch to the project and uh inside the admin network component class file inside the add product function uh here [Music] extension ext en is ion all right this is the character spanning okay now save this file and let's check again to access to the browser and just to fix the page now enter the product name new product and add here the short description new product slot description here and new product description here now enter the regular price now let's see 200 sku dc uh let's say six seven eight nine eight zero all right stock status in stock no and quantity let's say 100 quantity in a stock now browse the product image select the product image and here you can see the image preview and now select the category all right and now just click on submit okay session store flash spelling mistake all right i think product has been added created this is an error now let's check so all product and okay you can see here the product has been created in last you can see here the product new product okay so let's find the session error where is the system error so just go inside this method here is the let's take a spelling mistake all right now it's good and now take one more time so go to the browser and refresh the page and now just click on add new enter another product name let's say new product 2 and new product to sort description all right a new product to description description and now at the regular price let's say 1 1 40 sku dc 8764 and stock return low quantity let's say 80 and browse the product image this time let's select this one this one now just click on the submit all right and you can see here product has been created successfully now let's check the product so just click on all products and go to the last and you can see here the second product all right newly created product we can also check the products on stop page so let's check product on software so click on sub and here is the sorting order so just click on sort by newness and you can see here the newly created product product 1 and product 2. if i click on this product you can see here the product details all right and if i click on this product you can see in the second product all right so in this way you can add the product so that's all about add new product 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: 8,244

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, create new product

Id: IcGAM05UMwA

Length: 41min 41sec (2501 seconds)

Published: Sat Feb 13 2021