Welcome back.
Now it's time to work on adding a new product.
So I have created a page here.
If you open your project, they have created a page called Add your ad product.
And here, the design redesign of this page is similar to other pages I just have here, Heather, and
then I have the side menu and then I have the product and then I got one of the forms that they have.
And this form has, this form has inputs.
It has the name, the description, the price, the special offer, and then the category and then the
color.
And then images.
Images here.
The only difference is that the images will be the type of the images is going to be file you file,
file, file we need for images.
And then I just have a button to create or insert that new product.
And that button has a name called Create Underscore Product.
And what's important also in this form is that this form has a new attribute called ink type.
This ink type is equal to multipart for this large form data.
Why do we need this?
The reason why we need to have this is because we have images or files we need to upload.
In our case, we have images.
So whenever you have images that you want to upload, you need to add this to the form.
So as you can see, this form I have here again, ink type, multipart, four slash form data.
And then what they did is that here I have given this form a method.
The method is past and I have given it action and the action is create underscore product that BHP and
I have added a link to the side menu.
In the side menu.
I said here for this new product I said add underscore product that BHP which is this file add underscore
product that BHP.
So if I click on it, if I click on Add new product, this one, if you click on it, as you can see,
it's going to take me to add underscore product that BHP which is going to display this form.
As you can see, this is the form where it's going to allow me to create a new product.
And here I have the fields for the the product name or title and the description, the price, the special
offer, the category category, the colour and for images.
And then I have here a button called get and then this form will be handled.
This form will be handled by a file called by a file by a file called create underscore product that
BHP.
So I have created this file create underscore product that BHP.
And this file will handle the request.
This file has the first I have.
You include server data and therefore less server connection.
And then I have here here if statement that's going to check whether the button has been clicked or
not.
The create underscore project button which is this button which is this button in the form of this button
which has a name called Create Underscore Product.
And then I have gotten the product name, the description, the price, the offer, the category, the
color, all of these from the fields.
I have the name, description, price offer, category color.
As you can see in the form I have the and for I have our name description price of our and category
and color.
Category and color.
And then this is the tricky part.
So the tricky part is uploading is uploading these images.
So this is the only difference that they have in this form.
So how can we upload an image to upload images we need to use here?
A We need to use a B2B
variable called files and then we need to access the input name.
So the inputs are image one, image two, image three, image four, respectively.
So here, if you go back to the form, you'll find that the inputs for the images are.
This is the first input.
This is the input.
And the name.
The name is Image one, image two, image three, image four, respectively.
And then here I just said files, image one, two, three, four.
And then I said, Here, temp name.
What does this mean?
This is the temporary name that that's given by BHP to the file to each of these images.
And also this will store the the image in a variable called image one.
And this is going to store the image, too, in a variable called image two.
And this is going to store the third image in a variable called image, see.
And then image four.
And then I have created here.
This is, by the way, this is not important.
I have created the year names.
I have created the names for each of these images.
So for the image.
For the first image, I have given it a name and that name is the product name.
So the image the image name is going to be the product name and then one that JP.
This is for the first image.
So for example, if the product is called white shoes, then the image name, the first image is going
to have a name called Why Choose One that JP and the second name.
The second image will have any old white shoes to that JP.
Etc..
So this is these are the names that they have given to these images.
Lastly here, this is going to upload upload images.
So this this part is going to upload the images.
So the function that uploads the images is called MOV uploaded file and it takes two parameters.
The first parameter is the temporary name or the image which is image one image to image the image for.
So here I say the image, one image to image, image three, image four.
And then the second parameter is the location in which you want to store the image.
So where do you want to store the image?
Will remember.
We need to store the images in the in the assets in the images.
This folder and to access this folder from the admin dashboard, we need to say that because we are
inside the admin, we need to go back first and then we need to access the assets and then we need to
access the images and then we need to upend the the image name to this location so that the image will
be stored in that location.
So again, the I here past the location which is dot dot for slash assets for for less images for for
us.
The name of the image.
So the name of the image again, is the is the F is the product name.
And then I appended to it the one, two, three, four, four, because we have four images and finally
appended the extension.
I'm using the JP, of course, you can use any extension, you can use the EPG or in Georgia.
And I'm going to I'm going to be using JP and then I just here created a new and you might ask L command
that's going to update.
That's going to insert is going to insert the product information into the database into the database
here.
I said insert into products.
And then I passed the product name, product description, product price, product, special offer,
product image, product image to product image free product image for and then product category and
then product color and then here values.
And then we need to have ten question marks because we have ten fields.
So one, two, three, four, five, six, seven, eight, nine, ten.
And lastly, we have here the bind param.
We, we bind the any variables the product name the product name your product name, description, price
offer, name, description, price offer, special offer and then image one, image two, image three,
image four.
Notice here that they appended or abandoned the.
I ended the year up into the image one image, two image, three image.
Which is wrong.
This is wrong.
I intentionally did this because I wanted to show you to show you that this is wrong.
You need to upend the image name that, not the image itself.
Because this.
This.
This is the file itself itself.
Which is the image.
This is the image.
This is the image itself.
Image.
However, this or these are image.
Names.
So we need to store their names, not the file itself in the database.
So here we need to say image.
Image.
Name one and then comma.
And then image.
Name two and then comma.
Image.
Name three and then comma image.
Name four.
And then we append the category and the colour.
Lastly, I just every year if cute is correct I just go to the products.
Else I also go to the products.
But I have here a success parameter on here I feel a failed parameter.
In case of success, I say the product underscore create it and the must product has been created successfully.
If the if we couldn't upload the images or edit the or create the product we I say the product underscore
failed error occurred try again and in the products I displayed that error.
So in the products in the products here I have you said.
Here I have said product created and then I display to you the message product created and a year in
case product field I say the product field and they display the air here with a green color and in case
of failure with a red color.
Let me now test and show you how awesome this is.
So let me refresh here and here I create a new product.
So let me here say red shoes, because I have a red shoes that they want to do applied to the store
into my cookie to insert into my store.
I'm going to say here.
Amazing red shoots and then the price I'm going to say 120, for example.
Point five special offer, let's say 20% category shoes.
Color red.
And then the images.
So let me select the images.
So I have these images, I'm going to select the first image and then here I'm going to select the second
image.
And here I'm going to select the third image.
And here I'm going to select the fourth image.
And then I'm going to click on it.
And here it says, please, please enter a valid value.
The reason is because this.
This remember in the in the ad product, I should say here.
Bryce.
Bryce, text number in case you want to add this email.
And then let me here, let me for now, use the complete number and let me click on it.
And as you can see in cases like this, I'm going to get here, this message product has been created
successfully.
And if you want to verify, you can go to the last page.
Let me go to the last page.
So as you can see, if you go to the last page, you will find that they have your choose product in
your product, one to any 20% or special offer.
The category is shows and the red is the color and the image.
And in the database you should find it as well.
If you click on products, the last product should be.
Here as you can see Rachel's and the image is red shows one jpeg and then the second image is red choose
to read through three red shoes for AP and in your in your project you should find the images have been
uploaded.
So if you click on if you open up the assets images, you should find red shoes one and then Red choose
to choose three and choose four.
So it works successfully.