1 00:00:00,700 --> 00:00:01,450 Welcome back. 2 00:00:01,840 --> 00:00:05,440 Now it's time to work on editing project images. 3 00:00:05,770 --> 00:00:10,570 So each project, as you have seen, has four images. 4 00:00:10,570 --> 00:00:14,350 And we need for it for for this we need to edit four images. 5 00:00:14,350 --> 00:00:20,920 If you want to edit the images, we need to allow the army to edit the images and editing product images 6 00:00:20,920 --> 00:00:23,020 is not going to be included in the same edit. 7 00:00:23,320 --> 00:00:32,890 This edit will allow you to edit text information such as the the title description, the price by the 8 00:00:32,890 --> 00:00:35,860 category, the color and the special offer. 9 00:00:36,220 --> 00:00:42,160 However, if you want to edit the images, I'm going to create another page for this because images 10 00:00:42,160 --> 00:00:47,890 are different and they require a different logic. 11 00:00:47,890 --> 00:00:50,740 Therefore, it's better to add them in a new page. 12 00:00:50,740 --> 00:00:57,610 So I have created a file called Edit Images and I created a form here again. 13 00:00:57,910 --> 00:00:59,440 And this form has the following. 14 00:00:59,440 --> 00:01:05,260 It has first, this form has ink type multipart four slash form data. 15 00:01:05,260 --> 00:01:11,920 Again, this is important because I'm uploading images and then the method is passed, the image is 16 00:01:11,920 --> 00:01:18,130 passed and the action is going to be update underscore images that BHP, which is a file that I'm going 17 00:01:18,130 --> 00:01:24,490 to walk you through shortly and then inside that form I have two hidden inputs. 18 00:01:24,940 --> 00:01:29,230 The first input is the product ID, the second input is the product name. 19 00:01:29,620 --> 00:01:30,760 Why do we need these? 20 00:01:31,030 --> 00:01:38,950 We need these because I'm going to be using the product ID to get the two to to update the the, the 21 00:01:38,950 --> 00:01:41,530 images, the name of the images in the database. 22 00:01:41,530 --> 00:01:46,810 And we need the product name to give names to the images that we will be uploading shortly. 23 00:01:47,320 --> 00:01:49,060 And then I have you for inputs. 24 00:01:49,480 --> 00:01:56,590 Each input is a file and each input has an m and the name is Image one, two, three, four respectively. 25 00:01:57,220 --> 00:01:57,730 That's it. 26 00:01:58,360 --> 00:01:59,250 Let me show you this. 27 00:01:59,250 --> 00:02:07,810 So if I go to if I go to edit underscore images, actually, I will not be able to go to this page because 28 00:02:08,260 --> 00:02:10,030 I protected this page at the top. 29 00:02:10,480 --> 00:02:12,490 I said, Here, let me show you the logic. 30 00:02:12,970 --> 00:02:18,460 So at the top I said, If if we don't have the product ID, then we cannot go to the beach. 31 00:02:18,460 --> 00:02:22,150 We need to pass a product ID, so let's do this to do this. 32 00:02:22,840 --> 00:02:30,670 Remember, in the products in the product table, we need to add here a column that has buttons that 33 00:02:30,670 --> 00:02:33,340 will allow the admin to edit each. 34 00:02:35,250 --> 00:02:38,750 To allow images of each single product. 35 00:02:39,170 --> 00:02:41,600 So to do this, we need to look for the column. 36 00:02:42,980 --> 00:02:44,360 So here we have edit. 37 00:02:45,460 --> 00:02:49,560 And we can add the added images so we can create a new column here. 38 00:02:52,400 --> 00:02:54,470 And that column now is going to be apparent. 39 00:02:54,470 --> 00:02:59,000 That's going to allow you to edit, edit images. 40 00:03:01,040 --> 00:03:04,190 And in order to enter the images, we need to add the link. 41 00:03:04,790 --> 00:03:07,340 So the link is going to be similar to edit. 42 00:03:08,090 --> 00:03:11,770 I'm going to copy this and paste it above the edit. 43 00:03:11,810 --> 00:03:13,190 I'm going to pasted above the edit. 44 00:03:13,640 --> 00:03:18,140 However, the trick is going to be different, so the trick is going to be edit. 45 00:03:18,980 --> 00:03:19,550 Edit. 46 00:03:20,960 --> 00:03:22,490 Underscore images. 47 00:03:23,550 --> 00:03:26,640 Got BHP and then we need to pass the project. 48 00:03:26,640 --> 00:03:29,850 Eddie, brother Eddie is equal to brother Eddie. 49 00:03:30,510 --> 00:03:33,210 And we need to say here and. 50 00:03:34,470 --> 00:03:35,070 And. 51 00:03:36,190 --> 00:03:36,850 Product. 52 00:03:37,890 --> 00:03:40,080 Underscore name. 53 00:03:41,780 --> 00:03:44,960 Is equal to and then another BHP. 54 00:03:46,900 --> 00:03:55,630 And in order not to confuse you, let me let me write let me type this in a new format, in a different 55 00:03:55,630 --> 00:03:58,090 format, because this is getting complicated. 56 00:03:58,570 --> 00:04:02,200 So to retype this, let me copy this part. 57 00:04:02,920 --> 00:04:06,040 ALIMI Remove it, and then I'm going to say your echo. 58 00:04:06,190 --> 00:04:12,670 And what I'm going to echo is that I'm going to echo the the file name, which is edit images that reach 59 00:04:12,670 --> 00:04:13,900 me and then question mark. 60 00:04:14,470 --> 00:04:22,480 Product underscore ID is equal to and then double cross and then dot and then I append the product ID 61 00:04:22,570 --> 00:04:22,990 to it. 62 00:04:23,590 --> 00:04:29,610 And then at the end I say, I say dot and then I'm going to spend a new parameter. 63 00:04:29,620 --> 00:04:30,550 I'm going to say and. 64 00:04:31,640 --> 00:04:42,950 Project underscore name is equal to and then is equal to what is equal to dot and then project. 65 00:04:44,420 --> 00:04:46,940 Product and then product. 66 00:04:48,270 --> 00:04:52,310 Underscore that, underscore name. 67 00:04:53,220 --> 00:04:54,930 Very, very simple and straightforward. 68 00:04:55,200 --> 00:05:04,990 Again, that's the the iterative is BHP Echo and then it it emerges that BHP was your market product. 69 00:05:05,020 --> 00:05:12,660 It is equal to product ID and product name is equal to product product name. 70 00:05:13,950 --> 00:05:17,250 And then the button is going to say, edit images. 71 00:05:18,030 --> 00:05:19,020 Edit images. 72 00:05:20,470 --> 00:05:20,770 Laney. 73 00:05:20,830 --> 00:05:21,610 I'll show you this. 74 00:05:21,640 --> 00:05:26,470 So now if I refresh, this is going to display here edit images. 75 00:05:26,470 --> 00:05:30,430 So you can edit the images and you can even give it a different color. 76 00:05:30,460 --> 00:05:33,850 You can see here, meet the end primary danger. 77 00:05:34,420 --> 00:05:37,130 You can say anything else. 78 00:05:37,150 --> 00:05:39,070 You can see, for example. 79 00:05:40,760 --> 00:05:41,420 Or Nick. 80 00:05:42,780 --> 00:05:44,040 I think this is going to be. 81 00:05:45,480 --> 00:05:47,500 A kind of yellow color. 82 00:05:47,520 --> 00:05:48,780 Yes, this is a yellow color. 83 00:05:49,320 --> 00:05:53,730 So when you click on edit, if I click on edit, it's going to take me. 84 00:05:54,300 --> 00:05:55,110 Let me click on it. 85 00:05:55,110 --> 00:06:02,630 As you can see, it's going to take me to this page, which is the edit images that are up and running 86 00:06:02,670 --> 00:06:03,750 it is equal to one. 87 00:06:04,080 --> 00:06:06,870 And product name is equal to shoes to the yellow shoots. 88 00:06:07,710 --> 00:06:14,190 And if you go back and click on edit of the second you should you have product ID is equal to two and 89 00:06:14,670 --> 00:06:16,380 product name is equal to green back. 90 00:06:16,800 --> 00:06:17,790 So this is the form. 91 00:06:18,300 --> 00:06:21,840 Well, now in the form, let me go back to the form now only the form. 92 00:06:22,380 --> 00:06:23,910 The logic is the following. 93 00:06:24,450 --> 00:06:30,450 The logic is that if a user clicks on this button, which is which has a name called update images, 94 00:06:31,200 --> 00:06:33,450 this file will be executed. 95 00:06:33,490 --> 00:06:33,760 What? 96 00:06:33,780 --> 00:06:34,620 What's this file? 97 00:06:34,620 --> 00:06:37,440 This files called update underscore images that BHP. 98 00:06:38,040 --> 00:06:39,450 So I have created this file. 99 00:06:40,290 --> 00:06:43,620 This file is called update images that BHP. 100 00:06:44,160 --> 00:06:51,270 And what this file does is that this file uploads the images, it just uploaded images, nothing more. 101 00:06:51,750 --> 00:06:54,930 And of course it updates the names of the images in the database. 102 00:06:55,530 --> 00:06:57,660 So let me walk you through the logic. 103 00:06:57,660 --> 00:07:01,200 We have already done this, but this is slightly different. 104 00:07:01,710 --> 00:07:04,320 So first I included the connection as usual. 105 00:07:05,130 --> 00:07:11,820 And then here I need to make sure that user clicked on the update images button and then I got the product 106 00:07:11,820 --> 00:07:14,550 name and the product ID from the form. 107 00:07:14,550 --> 00:07:20,490 Remember I have here product ID and product name in the form in this form. 108 00:07:21,300 --> 00:07:24,030 And then I got the images. 109 00:07:24,570 --> 00:07:31,020 Image one, image two, image three, image four because they have these names, they have image one, 110 00:07:31,380 --> 00:07:33,990 two, three, four names. 111 00:07:33,990 --> 00:07:34,860 These are the names. 112 00:07:35,670 --> 00:07:40,230 And then we need to say temp name to get the file, to get the to get the images. 113 00:07:40,830 --> 00:07:44,460 And then we need to give these images names again, the name. 114 00:07:44,460 --> 00:07:51,480 In order for the name to be unique, we need to we need to give it any name of the name of the product. 115 00:07:51,990 --> 00:07:54,090 So the product name is product name. 116 00:07:54,540 --> 00:08:01,290 And then I appended one JPEG to the first image and then to that JP to the second, and then three the 117 00:08:01,290 --> 00:08:04,530 JPEG to the third and then for the JPEG to the fourth. 118 00:08:05,250 --> 00:08:10,680 Finally I just uploaded the, the images using the move uploaded file. 119 00:08:11,660 --> 00:08:15,230 Bypassing firstly the file itself, which is image one. 120 00:08:15,710 --> 00:08:21,620 And then the second parameter is that that assets for slash images for slash the image name. 121 00:08:21,980 --> 00:08:27,560 Again, the reason why I'm saying that that is because now I'm inside the admin and in order in order 122 00:08:27,560 --> 00:08:33,020 to go back, in order to get out of the admin, we need to say that, that and then we need to enter, 123 00:08:33,020 --> 00:08:40,580 enter the assets folder and then we need to enter the images folder and then we need to store the image 124 00:08:40,580 --> 00:08:46,460 in the images folder with this name with name one name with image, name one image, name two image, 125 00:08:46,460 --> 00:08:48,050 name three and image name four. 126 00:08:48,770 --> 00:08:50,120 So this is the part one. 127 00:08:50,240 --> 00:08:51,830 Part one is uploading the images. 128 00:08:53,090 --> 00:08:55,730 Part two is updating the names in the database. 129 00:08:56,210 --> 00:09:03,130 So to obtain the names in the database, we just say update products, set product image is equal to 130 00:09:03,140 --> 00:09:08,060 is equal to question mark and then comma product image two is equal to question mark. 131 00:09:08,450 --> 00:09:11,390 And then product image three is equal to the question mark. 132 00:09:11,810 --> 00:09:15,140 And then product image four is equal to our question mark. 133 00:09:15,140 --> 00:09:24,650 And again, the, the, the columns are the columns are product image and then product image to product 134 00:09:24,650 --> 00:09:27,050 image pre and product image four. 135 00:09:27,650 --> 00:09:33,530 That's why I'm saying a product image and then product image to product imagery product image for of 136 00:09:33,530 --> 00:09:37,760 course with the with underscores in between. 137 00:09:38,660 --> 00:09:39,800 Lastly, I said. 138 00:09:41,090 --> 00:09:47,690 Is the empty bind ss i because they upload because they pass year the image. 139 00:09:49,140 --> 00:09:51,240 Uh, which is wrong again. 140 00:09:51,240 --> 00:09:51,960 This is wrong. 141 00:09:52,500 --> 00:09:54,360 We need to pass the image. 142 00:09:54,870 --> 00:09:55,920 Our name again. 143 00:09:55,920 --> 00:10:00,690 I have done this intentionally to show you that this is a mistake that many developers do. 144 00:10:01,290 --> 00:10:03,140 You need to save your image. 145 00:10:03,160 --> 00:10:05,370 Me image. 146 00:10:05,610 --> 00:10:06,420 Because here. 147 00:10:07,110 --> 00:10:07,410 Here. 148 00:10:07,410 --> 00:10:07,980 I'm not. 149 00:10:08,760 --> 00:10:09,690 Here, I'm not. 150 00:10:11,460 --> 00:10:11,790 Here. 151 00:10:11,790 --> 00:10:12,330 I'm not. 152 00:10:13,500 --> 00:10:15,210 I'm not uploading damage here. 153 00:10:15,210 --> 00:10:17,190 I'm updating the name of the image. 154 00:10:17,610 --> 00:10:19,290 Therefore, we need to pass the names. 155 00:10:19,290 --> 00:10:23,460 Not the files, not the images, the names of the images. 156 00:10:24,450 --> 00:10:25,830 So here we need to say image. 157 00:10:26,310 --> 00:10:26,970 Name one. 158 00:10:26,970 --> 00:10:27,270 Image. 159 00:10:27,270 --> 00:10:28,230 Name two, image. 160 00:10:28,230 --> 00:10:29,910 Name three and image. 161 00:10:29,910 --> 00:10:30,920 Name four. 162 00:10:31,950 --> 00:10:35,520 And then we say product ID, which is the product ID. 163 00:10:36,790 --> 00:10:45,790 Which is this practically because because given the product, it will we will be updating that that 164 00:10:45,790 --> 00:10:47,170 specific product images. 165 00:10:48,040 --> 00:10:55,300 And then finally, I said to your excuse and if if the execution was successful, I go to the product 166 00:10:55,330 --> 00:11:00,400 page with a message and that message has a key called images underscore updated. 167 00:11:00,880 --> 00:11:04,510 And the message yourself is images have been updated successfully. 168 00:11:04,870 --> 00:11:12,040 Else I go to the products that B2B and I have a key called images underscore failed and it says error 169 00:11:12,040 --> 00:11:12,520 occurred. 170 00:11:13,000 --> 00:11:13,630 Try again. 171 00:11:14,020 --> 00:11:19,960 And then in the products I displayed the errors using the using. 172 00:11:21,220 --> 00:11:23,170 Here, let me show you where it is. 173 00:11:23,180 --> 00:11:23,740 It's here. 174 00:11:24,340 --> 00:11:32,130 So here I use the these key images underscore updated and the images underscore updated and the image 175 00:11:32,200 --> 00:11:32,690 has failed. 176 00:11:32,710 --> 00:11:39,610 If if you set the image, if you say forget images failed I display I echo the get images failed where 177 00:11:39,610 --> 00:11:42,400 there is color here and with a green color in case of success. 178 00:11:43,270 --> 00:11:47,110 And finally, I'm going to click on file and then stable. 179 00:11:49,470 --> 00:11:50,380 Now us. 180 00:11:51,210 --> 00:11:52,650 So now let me go back. 181 00:11:53,160 --> 00:11:58,170 Let me, for example, if it's one of these files, I'm going to go to the last image. 182 00:11:58,890 --> 00:12:00,360 I'm going to go to the last product. 183 00:12:03,740 --> 00:12:04,650 This is the last part. 184 00:12:04,660 --> 00:12:07,160 So I'm going to change the image of this product. 185 00:12:07,640 --> 00:12:11,900 I'm going to click on edit images and then I'm going to select another image. 186 00:12:12,620 --> 00:12:13,550 Lamy Select. 187 00:12:16,520 --> 00:12:18,860 For example, aim is to look at this image for the first image. 188 00:12:19,460 --> 00:12:24,440 So I'm just going to change the order to show you that it will work successfully. 189 00:12:35,310 --> 00:12:42,300 Now if I click on Update in case of success, it's going to say here images have been updated, updated 190 00:12:42,300 --> 00:12:42,930 successfully. 191 00:12:43,260 --> 00:12:44,640 How would you know? 192 00:12:45,480 --> 00:12:49,980 How would you verify that images have been updated successfully? 193 00:12:50,010 --> 00:12:54,270 Well, you can go to the last page and check that. 194 00:12:54,270 --> 00:13:01,530 You can go to the product, which is this product, as you can see, there it is now the image is different, 195 00:13:02,070 --> 00:13:02,900 which is correct. 196 00:13:02,910 --> 00:13:08,190 So the image has been updated, successful images have been updated successfully, and you can check 197 00:13:08,190 --> 00:13:10,080 that in the database, even in the database. 198 00:13:10,680 --> 00:13:16,590 But the since the names are the same, the names will not be different because the name of the product 199 00:13:16,590 --> 00:13:19,140 is the same, the name of the product is the same. 200 00:13:20,010 --> 00:13:22,170 And you can check, of course, that in the. 201 00:13:23,510 --> 00:13:24,620 In the. 202 00:13:25,990 --> 00:13:26,950 In your project. 203 00:13:26,950 --> 00:13:29,940 You should find the first image here. 204 00:13:29,950 --> 00:13:30,430 Read. 205 00:13:32,030 --> 00:13:33,860 Read, write, choose one. 206 00:13:35,860 --> 00:13:37,030 Is this image now? 207 00:13:37,300 --> 00:13:42,550 It's this image because here it says we choose this image. 208 00:13:42,910 --> 00:13:43,960 So it works successfully. 209 00:13:43,960 --> 00:13:45,700 And now we know how to edit images. 210 00:13:46,580 --> 00:13:46,720 That's.