1 00:00:00,480 --> 00:00:01,470 ‫Welcome back. 2 00:00:01,500 --> 00:00:08,070 ‫In this video, we are going to add the rest of our user interface and we're going to add one functionality 3 00:00:08,070 --> 00:00:11,330 ‫for now, which is going to delete ZUS. 4 00:00:11,370 --> 00:00:13,260 ‫So let's go ahead and do that. 5 00:00:13,680 --> 00:00:18,570 ‫As you can see, this is how the interface should more or less look like and we're going to build it 6 00:00:18,570 --> 00:00:19,710 ‫almost the same. 7 00:00:19,710 --> 00:00:25,110 ‫Well, we could build it the same by typing in the same information here at the bottom, but this is 8 00:00:25,110 --> 00:00:31,530 ‫more about dragging and dropping it in so we can execute all the SQL code that we need or in general 9 00:00:31,530 --> 00:00:33,890 ‫the database code that we need in C sharp. 10 00:00:33,900 --> 00:00:38,160 ‫So first of all, let's open up the toolbox so we can see the stuff that we need. 11 00:00:38,160 --> 00:00:45,300 ‫And we're going to need buttons and I'm going to drag a button right in here, just like that with a 12 00:00:45,300 --> 00:00:46,470 ‫little distance. 13 00:00:49,340 --> 00:00:53,030 ‫And this button should say something like delete content. 14 00:00:53,150 --> 00:00:58,010 ‫Then I'm going to actually copy that button. 15 00:00:58,040 --> 00:00:59,200 ‫Copy paste. 16 00:00:59,210 --> 00:01:00,710 ‫I'm going to drag it next to it. 17 00:01:00,710 --> 00:01:11,210 ‫And this one was remove animal because we're not deleting it, but we're just removing it anymore. 18 00:01:11,960 --> 00:01:14,990 ‫And this one is not delete content, but delete zoo, by the way. 19 00:01:15,080 --> 00:01:17,510 ‫So we have delete zoo and we have remove animal. 20 00:01:17,540 --> 00:01:19,160 ‫Now copy and paste. 21 00:01:20,060 --> 00:01:22,160 ‫I'm going to put it right here. 22 00:01:22,670 --> 00:01:24,170 ‫Copy and paste again. 23 00:01:24,380 --> 00:01:27,530 ‫Actually, it's just create the buttons before we rename them. 24 00:01:28,250 --> 00:01:33,640 ‫And in here and then another one at the bottom here. 25 00:01:33,650 --> 00:01:36,830 ‫And the last one at the top right there. 26 00:01:37,820 --> 00:01:43,400 ‫So maybe we should drag everything a little further down. 27 00:01:45,360 --> 00:01:46,020 ‫Like that. 28 00:01:46,030 --> 00:01:52,890 ‫So there's enough space for the delete button and this one can go like that. 29 00:01:53,250 --> 00:01:53,850 ‫All right. 30 00:01:54,270 --> 00:02:02,610 ‫So now what we actually could do as well is drag those to little down as well so that the lists come 31 00:02:02,610 --> 00:02:05,760 ‫up the same height as the one on the right hand side. 32 00:02:06,890 --> 00:02:14,000 ‫Well it's och it's not the perfect, perfect user interface here, it's about other topics, as you 33 00:02:14,000 --> 00:02:14,360 ‫know. 34 00:02:14,930 --> 00:02:17,610 ‫So 500 is too much. 35 00:02:17,630 --> 00:02:18,980 ‫450 should be fine. 36 00:02:18,980 --> 00:02:21,050 ‫And now here, let's look at 600. 37 00:02:21,290 --> 00:02:22,550 ‫That's still too much. 38 00:02:22,550 --> 00:02:23,510 ‫Or 625. 39 00:02:23,510 --> 00:02:28,370 ‫So 600 should be a bit better, maybe 580 or something like that. 40 00:02:28,870 --> 00:02:30,920 ‫Okay, so now all the buttons are in there. 41 00:02:30,920 --> 00:02:32,600 ‫Our main window is looking good. 42 00:02:32,600 --> 00:02:37,070 ‫We could even change the name of our title. 43 00:02:37,490 --> 00:02:39,710 ‫Let's make it a zoo manager. 44 00:02:41,570 --> 00:02:43,400 ‫All right, we have the zoo list. 45 00:02:43,400 --> 00:02:44,450 ‫Delete zoo. 46 00:02:44,450 --> 00:02:46,880 ‫Now we can change all of those buttons. 47 00:02:46,880 --> 00:02:47,630 ‫Contents. 48 00:02:47,630 --> 00:02:49,880 ‫So that one was add zoo. 49 00:02:50,390 --> 00:02:52,430 ‫That one is update zoo. 50 00:02:54,170 --> 00:03:00,380 ‫Actually that one was not updated to that was an animal because they're not in the order from top to 51 00:03:00,380 --> 00:03:00,820 ‫bottom. 52 00:03:00,830 --> 00:03:03,830 ‫They just need to click in here. 53 00:03:03,830 --> 00:03:07,250 ‫And as you can see, it's selecting the correct one for me straight away. 54 00:03:07,250 --> 00:03:09,950 ‫So this one should be update zoo. 55 00:03:11,480 --> 00:03:13,850 ‫That button here is update animal. 56 00:03:16,380 --> 00:03:19,380 ‫That one is delete animal 57 00:03:21,600 --> 00:03:23,010 ‫animal. 58 00:03:25,140 --> 00:03:29,370 ‫And that one here is gonna be. 59 00:03:31,950 --> 00:03:37,440 ‫Add animal to zoo, head animal to zoo. 60 00:03:37,950 --> 00:03:40,100 ‫And now I think we are done. 61 00:03:40,110 --> 00:03:43,440 ‫Update Zoo actually this one update zoo that one should be changed. 62 00:03:43,440 --> 00:03:47,580 ‫Update Any more. 63 00:03:48,210 --> 00:03:50,490 ‫All right, so now all our buttons are fine. 64 00:03:50,490 --> 00:04:02,040 ‫We just need a text box here in the middle, and I'm going to reposition it a little bit like that, 65 00:04:03,780 --> 00:04:08,490 ‫make it wider, and just like that should be fine. 66 00:04:08,580 --> 00:04:14,490 ‫We could even change the font size of the text box so that it's a bit bigger. 67 00:04:14,490 --> 00:04:15,870 ‫But that should be fine. 68 00:04:15,990 --> 00:04:22,170 ‫As I said, not about perfectionism here or perfectionism in this UI. 69 00:04:22,410 --> 00:04:27,210 ‫Okay, so now that we have that, we can go ahead and add the delete zoo button. 70 00:04:27,210 --> 00:04:30,120 ‫So I'm going to double click on the button. 71 00:04:33,030 --> 00:04:39,390 ‫And I get this button click event and actually I don't like this name, so maybe this is not the best 72 00:04:39,390 --> 00:04:39,720 ‫one. 73 00:04:39,720 --> 00:04:42,540 ‫Let's go back and let's change it. 74 00:04:42,540 --> 00:04:50,970 ‫So we have this button and it received this event called Button Click and I'm going to call it Delete 75 00:04:51,810 --> 00:04:52,440 ‫Zoo 76 00:04:54,960 --> 00:04:58,770 ‫and maybe even something like Underscore Click. 77 00:04:59,400 --> 00:05:04,080 ‫This is going to be the new event handler that I'm going to create. 78 00:05:04,790 --> 00:05:09,120 ‫I'm going to copy that name and I'm going to implement the method myself. 79 00:05:09,870 --> 00:05:14,160 ‫It's a private void, delete, zoo, click. 80 00:05:14,160 --> 00:05:20,100 ‫And as you know, it needs an object which is the sender and it needs a rooted event. 81 00:05:20,100 --> 00:05:20,940 ‫ARGs 82 00:05:23,790 --> 00:05:24,690 ‫And here as well. 83 00:05:24,690 --> 00:05:31,890 ‫Now in here we can simply check first if the button works, message box or show delete zoo was clicked 84 00:05:31,890 --> 00:05:32,670 ‫or something like that. 85 00:05:32,670 --> 00:05:40,830 ‫Delete Zoo was clicked and now let's run it just to see if the button works correctly. 86 00:05:42,030 --> 00:05:42,250 ‫All right. 87 00:05:42,250 --> 00:05:42,750 ‫That we are. 88 00:05:42,750 --> 00:05:44,460 ‫So this is our interface. 89 00:05:44,490 --> 00:05:45,960 ‫All seems good already. 90 00:05:45,960 --> 00:05:47,430 ‫Now let's delete the zoo. 91 00:05:48,060 --> 00:05:49,020 ‫Delete zoo was clicked. 92 00:05:49,020 --> 00:05:49,500 ‫Perfect. 93 00:05:49,500 --> 00:05:50,640 ‫So the button works. 94 00:05:50,640 --> 00:05:54,690 ‫Now we can go ahead and implement it correctly in here. 95 00:05:55,290 --> 00:06:05,220 ‫What I'm going to do is I'm going to create a new query because I wanted to be well, I want it to delete 96 00:06:05,220 --> 00:06:05,700 ‫something. 97 00:06:05,700 --> 00:06:14,880 ‫So I'm going to use the delete keyword from which table, from the zoo table where the ID is equal to. 98 00:06:15,090 --> 00:06:24,360 ‫And now we are going to use something called zoo ID at zoo ID and that one will be our own variable 99 00:06:24,360 --> 00:06:25,290 ‫that we need to create. 100 00:06:25,290 --> 00:06:32,460 ‫So we need to create a new parameter kind of thing as we have seen with SQL parameters in here. 101 00:06:32,460 --> 00:06:41,220 ‫So we hit this SQL Command parameters, add with value, and I'm going to show you the other way of 102 00:06:41,220 --> 00:06:43,560 ‫handling this SQL stuff. 103 00:06:43,560 --> 00:06:46,320 ‫So without using this adapter. 104 00:06:46,320 --> 00:06:46,890 ‫All right. 105 00:06:47,250 --> 00:06:49,200 ‫So we're just going to use the following. 106 00:06:50,020 --> 00:06:56,400 ‫SQL Command is going to be a new SQL Command. 107 00:06:58,530 --> 00:07:03,690 ‫And and here, the SQL Command needs some information. 108 00:07:03,690 --> 00:07:07,860 ‫So first of all, it needs a query and it needs the SQL connection. 109 00:07:07,860 --> 00:07:09,060 ‫So nothing new here. 110 00:07:09,060 --> 00:07:11,490 ‫We've seen that up here already. 111 00:07:12,380 --> 00:07:19,100 ‫SQL Command Query and SQL Connection, and now we can go ahead and start this connection, SQL Connection 112 00:07:19,100 --> 00:07:19,760 ‫open. 113 00:07:20,030 --> 00:07:27,950 ‫So we're opening a connection to SQL and now we are adding the parameter to this SQL Command. 114 00:07:27,950 --> 00:07:32,840 ‫So parameters dot add with value. 115 00:07:33,020 --> 00:07:40,010 ‫And in here I used this at Zoom ID that I had here at the top. 116 00:07:40,010 --> 00:07:42,620 ‫So it has to be exactly the same as we have here. 117 00:07:43,220 --> 00:07:52,250 ‫And then I simply say what I want to delete and I'm going to say List Zeus Dot selected. 118 00:07:53,410 --> 00:08:00,400 ‫Value because selected value is not the name of the animal, because it's actually the ID and now we 119 00:08:00,400 --> 00:08:01,900 ‫can execute that code. 120 00:08:01,930 --> 00:08:11,380 ‫So SQL Command Dot Execute Scalar executes the query and returns the first column of the first row and 121 00:08:11,380 --> 00:08:13,720 ‫the result set returned by the query. 122 00:08:13,750 --> 00:08:15,780 ‫Additional columns or roles are ignored. 123 00:08:15,790 --> 00:08:22,960 ‫So what we need this for is, well, it's pretty much just the simplest way to execute this SQL Command, 124 00:08:22,960 --> 00:08:26,410 ‫which is going to execute the query onto our SQL connection. 125 00:08:26,560 --> 00:08:29,230 ‫And that's just not going to have overhead. 126 00:08:29,230 --> 00:08:31,330 ‫It's going to be super simple execution. 127 00:08:31,630 --> 00:08:32,230 ‫All right. 128 00:08:32,500 --> 00:08:37,360 ‫And now we, of course, need to close the SQL connection as well. 129 00:08:37,360 --> 00:08:44,680 ‫So SQL Connection that close, because as you can see, we need to open a connection. 130 00:08:44,680 --> 00:08:50,110 ‫We need to add the parameters, execute the code, and then we need to close the connection again because 131 00:08:50,110 --> 00:08:53,080 ‫otherwise we might run into errors. 132 00:08:53,080 --> 00:08:58,450 ‫Right now what I want to show is the Zeus. 133 00:08:58,450 --> 00:09:04,780 ‫And there is one thing actually to consider here, because we have plenty of zoos, we have plenty of 134 00:09:04,780 --> 00:09:09,940 ‫animals, and we even have this relationship table which has both of them combined. 135 00:09:09,940 --> 00:09:19,750 ‫So the animals that are in a specific zoo, but if I delete a zoo, I want to also apply a delete to 136 00:09:19,750 --> 00:09:23,740 ‫all the different zoo animal entries. 137 00:09:23,740 --> 00:09:24,460 ‫So. 138 00:09:25,440 --> 00:09:28,470 ‫Let's go to the data so it's a little more obvious. 139 00:09:28,740 --> 00:09:33,420 ‫Let's look at the zoo table and the zoo animal table. 140 00:09:35,110 --> 00:09:39,760 ‫So let's say I'm deleting New York, which has the idea of one. 141 00:09:40,000 --> 00:09:43,390 ‫There is no use of keeping zoo ID one in here. 142 00:09:43,390 --> 00:09:47,830 ‫So this zoo ID one and this zoo ID one entry. 143 00:09:47,830 --> 00:09:54,280 ‫So ID one and two, those entries are not required anymore because there is no animal in the zoo, because 144 00:09:54,280 --> 00:09:55,660 ‫the zoo doesn't exist anymore. 145 00:09:55,660 --> 00:09:59,380 ‫And that's why we can simply get rid of those two entries. 146 00:09:59,890 --> 00:10:01,960 ‫But we don't need to do it manually. 147 00:10:01,960 --> 00:10:04,420 ‫By applying it in code. 148 00:10:04,450 --> 00:10:14,200 ‫We can actually adjust our data table as well and adjusting it will pretty much do the job for us. 149 00:10:14,200 --> 00:10:16,930 ‫So open table definition. 150 00:10:17,350 --> 00:10:17,590 ‫So what? 151 00:10:17,590 --> 00:10:18,700 ‫I'm going to open up. 152 00:10:21,400 --> 00:10:29,800 ‫And what I simply need to add here at the end is on delete cascade. 153 00:10:32,770 --> 00:10:33,170 ‫Right. 154 00:10:33,170 --> 00:10:35,240 ‫And I do that for both pros here. 155 00:10:35,240 --> 00:10:40,480 ‫So for both constraints for our animal, for inky and our zoo for Inky. 156 00:10:40,490 --> 00:10:50,300 ‫So that will do is it will simply delete this entry pretty much that is there if the corresponding entry 157 00:10:50,300 --> 00:10:55,250 ‫is not available, more so the corresponding ID in the zoo that we are connected to. 158 00:10:55,280 --> 00:11:00,620 ‫So let's say if we delete a zoo, well then we don't need all the animals in that zoo anymore, not 159 00:11:00,620 --> 00:11:05,630 ‫the animals themselves, but this correlation or this relationship between the zoo and the animals. 160 00:11:05,630 --> 00:11:07,520 ‫So we can get rid of those as well. 161 00:11:07,520 --> 00:11:09,920 ‫And that's what these two entries here are. 162 00:11:09,920 --> 00:11:17,300 ‫This one on delete is Cascade allows us to do so now before we can execute the code, we need to update 163 00:11:17,480 --> 00:11:20,780 ‫just for you to see that this actually can cause errors. 164 00:11:20,780 --> 00:11:23,900 ‫So I'm going to simply execute the code now. 165 00:11:23,900 --> 00:11:29,420 ‫I'm going to start it and I'm going to try to delete something and you'll see the error that applies 166 00:11:29,420 --> 00:11:29,900 ‫here. 167 00:11:30,110 --> 00:11:31,850 ‫So I'm going to delete Kyra. 168 00:11:32,270 --> 00:11:36,230 ‫And it says the delete statement conflicted with the reference constraint. 169 00:11:36,230 --> 00:11:42,620 ‫Zoo f k the conflict incurred in the database table zoo and so column zoo ID, the statement has been 170 00:11:42,620 --> 00:11:43,160 ‫terminated. 171 00:11:43,160 --> 00:11:52,070 ‫So we have this error and well, if we search for the error, we find that this is because we are lacking 172 00:11:52,520 --> 00:11:53,270 ‫exactly that. 173 00:11:53,270 --> 00:11:56,840 ‫So on delete cascade and that's because we haven't updated it yet. 174 00:11:56,840 --> 00:12:06,740 ‫So now let's update the database with the new design here with our new updated table constraints. 175 00:12:06,980 --> 00:12:11,240 ‫And once that is done, update completed and successful, that's great. 176 00:12:11,240 --> 00:12:18,740 ‫We can start it again and we'll see that deleting Chiro works now. 177 00:12:20,440 --> 00:12:22,350 ‫And now we didn't get an error. 178 00:12:22,360 --> 00:12:24,820 ‫So why is Cairo still there? 179 00:12:25,150 --> 00:12:32,210 ‫And that has to do with us not casting or calling the method that shows this list or updates this list. 180 00:12:32,230 --> 00:12:38,380 ‫So let's go back to our code and it's actually here. 181 00:12:38,380 --> 00:12:46,780 ‫So we have this code and we need now to show all animals or actually show all zoos like that. 182 00:12:47,500 --> 00:12:48,370 ‫Show zoos. 183 00:12:49,060 --> 00:12:50,530 ‫Now let's start it again. 184 00:12:50,530 --> 00:12:54,250 ‫And you will see that the kyros was already gone. 185 00:12:54,250 --> 00:12:55,960 ‫So it's not there anymore. 186 00:12:56,380 --> 00:12:58,740 ‫As you can see, Cairo has gone with deleted it. 187 00:12:58,750 --> 00:13:00,220 ‫Now let's delete Berlin. 188 00:13:00,790 --> 00:13:04,270 ‫Boom and we get an SQL error. 189 00:13:04,450 --> 00:13:06,670 ‫But it disappeared. 190 00:13:07,490 --> 00:13:14,300 ‫So as you can see, there was an error because we deleted something and this error was applied by our 191 00:13:14,300 --> 00:13:20,180 ‫show zoos or associated animals somewhere here where we call the exception, right? 192 00:13:20,180 --> 00:13:23,090 ‫We had this catch exception and they showed us this error. 193 00:13:24,260 --> 00:13:26,860 ‫But now that's quite a step forward. 194 00:13:26,870 --> 00:13:34,760 ‫So now what I'm going to do is I'm going to update this code so that it doesn't well stop our program 195 00:13:34,760 --> 00:13:35,900 ‫if we run into an error. 196 00:13:35,900 --> 00:13:39,380 ‫So I'm going to build a try catch and finally. 197 00:13:39,380 --> 00:13:40,010 ‫BLOCK. 198 00:13:40,760 --> 00:13:44,360 ‫So we haven't used finally that often yet, but this time it really makes sense. 199 00:13:44,360 --> 00:13:48,020 ‫So what is the code that I want to execute in my try? 200 00:13:48,020 --> 00:13:51,200 ‫BLOCK Well, everything up to executing. 201 00:13:51,260 --> 00:13:54,470 ‫So all of this could go wrong and then. 202 00:13:55,740 --> 00:13:59,400 ‫If we want to close the connection here. 203 00:13:59,400 --> 00:14:04,980 ‫And finally, that's the right way, because if we open it up here, we need to close it at one point 204 00:14:04,980 --> 00:14:09,480 ‫and we should close it in finally, because even if it worked or it didn't work, we simply want to 205 00:14:09,480 --> 00:14:10,980 ‫close it and make sure that it will. 206 00:14:10,980 --> 00:14:11,840 ‫All is fine. 207 00:14:11,850 --> 00:14:15,750 ‫The same shows us so if it worked or it didn't work, doesn't matter. 208 00:14:15,750 --> 00:14:22,590 ‫We just call the show Zoo Method and that will well show the zoos that are in our table still. 209 00:14:22,590 --> 00:14:27,300 ‫And now, instead of just throwing an error, I'm going to use an exception name here. 210 00:14:27,300 --> 00:14:31,200 ‫I'm going to call it E and I'm going to show that onto my message box. 211 00:14:31,200 --> 00:14:38,400 ‫So a message box show and this one will be e dot to string like that. 212 00:14:40,930 --> 00:14:41,530 ‫All right. 213 00:14:42,550 --> 00:14:45,940 ‫Now, this one, we can call it X, maybe. 214 00:14:47,460 --> 00:14:48,390 ‫Maybe that's better. 215 00:14:48,390 --> 00:14:56,690 ‫So because problem here is that our root event is already called E, so we should call this one x OC. 216 00:14:56,700 --> 00:15:02,880 ‫Now let's start it again and see if we can delete components from our list. 217 00:15:03,690 --> 00:15:05,100 ‫And we don't have many left right. 218 00:15:05,100 --> 00:15:06,720 ‫So let's delete Tokyo. 219 00:15:07,290 --> 00:15:13,770 ‫We get this and var char for animal in a join expects the parameter zone was which was not supplied 220 00:15:13,770 --> 00:15:17,460 ‫and that's actually an error that doesn't help us at all. 221 00:15:17,580 --> 00:15:26,730 ‫So I'm going to get rid of this message box here because well, we do get an error here, but I'm just 222 00:15:26,730 --> 00:15:30,060 ‫going to ignore it for now because it's just it's still working, right? 223 00:15:30,060 --> 00:15:32,520 ‫Our program is still working and does what it should. 224 00:15:32,520 --> 00:15:37,380 ‫So it's just here that this code is still executed, show associated animals. 225 00:15:37,380 --> 00:15:40,770 ‫And in this case, we don't have anything in there. 226 00:15:40,770 --> 00:15:41,190 ‫Right. 227 00:15:41,190 --> 00:15:46,260 ‫So we have not selected something that should show the associated animals. 228 00:15:46,260 --> 00:15:48,600 ‫So I'm just going to get rid of this exception here. 229 00:15:48,600 --> 00:15:49,920 ‫And by the way. 230 00:15:50,790 --> 00:15:51,120 ‫Yeah. 231 00:15:51,270 --> 00:15:52,620 ‫Everything else should be fine. 232 00:15:52,950 --> 00:15:54,300 ‫All right, so. 233 00:15:54,720 --> 00:15:55,980 ‫Yeah, that's pretty much it. 234 00:15:56,010 --> 00:16:03,120 ‫Now you know how to delete components from your application, and in the next video, we're going to 235 00:16:03,120 --> 00:16:04,980 ‫add stuff to our list. 236 00:16:04,980 --> 00:16:06,210 ‫So see you there.