0:01 Hey guys, in this video we're going to 0:03 make it so that we can delete a 0:05 subscriber up to this point. We can view 0:08 them, we can view their page, we can 0:11 edit them, um we can add them. So 0:15 basically everything but delete. So 0:17 we're going to be doing that now. We 0:19 don't have to create another route or 0:20 anything like that for delete. What 0:22 we're going to do is we need to make an 0:24 HTTP delete request, okay? Because we're 0:28 using a restful interface. Uh so we're 0:30 going to do that using jQuery and Ajax. 0:34 Okay. So the first thing we need to do 0:37 is we need to create a a JavaScript 0:39 file. And I'm going to put this in 0:42 public JavaScripts. Okay. And I'm just 0:45 going to create a new text file. And I'm 0:48 going to call it 0:51 main.js. Okay. So we'll open that up. 0:55 And we also need to make sure that we 0:57 include it in the layout or in the the 0:59 you know the main head. So that is in 1:03 views 1:08 layout.jade. All right. And what we're 1:10 going to do is we need to include jQuery 1:12 as well. So let's go ahead and add a 1:15 script. All right. And in here we need 1:18 the src t um 1:22 attribute. And I'm going to include 1:24 jQuery using the 1:26 CDN. So it's going to be uh 1:30 ajax.google APIs 1:36 uh.comjax 1:39 slashlibs slashjquery 1:44 um 1.11.2 1:47 two 1:49 slash 1:53 jQuery.min.js. That should do it. And 1:55 then we're going to include our 2:00 script. Okay. So, this is going to be 2:04 inside of 2:07 JavaScript slash 2:11 main.js. Okay. So, we'll save that. And 2:14 just to test to make sure jQuery is 2:15 running, let's just do a 2:19 um 2:22 document 2:25 ready and we'll do 2:28 function and let's just do an 2:32 alert. Okay. Okay. Okay, we'll restart 2:35 the 2:42 server and we got the alert. Okay, so 2:44 that should be all set. Now we have 2:48 Whoops. If we go to 2:51 our subscriber page, we have a delete 2:54 link. And if we look at 3:02 this, you can see that it has an 3:04 attribute called data ID and that is 3:07 actually sent to the the subscribers ID. 3:10 Okay, so we need to access that through 3:13 jQuery and then we need to make a delete 3:16 request. All right, when we click this 3:18 link. Okay, so we'll go to main.js js 3:22 and we're going to create a click 3:24 handler right 3:26 here. Okay. So, um let's see. We gave 3:29 the link I think it has a an a class or 3:32 an ID. Yeah, it has a class of delete 3:35 subscriber. So, we'll grab it like 3:38 that. Um 3:43 delete delete 3:48 subscriber. Um, we need quotes around 3:55 this. Okay. And we're going to say dot 4:00 on click. Then we want to call a 4:04 function called 4:06 oops. Delete 4:11 subscriber. What keeps going on here? 4:15 Delete 4:16 subscriber. All right. And then down 4:19 here we'll create the 4:22 function 4:25 delete 4:29 subscriber. Okay, this should actually 4:31 be a a capital 4:36 S. Okay, first thing um when they click 4:38 the link, we don't want them to actually 4:40 follow the link. So we're going to say 4:43 event 4:45 dot 4:46 prevent default. So that'll prevent the 4:49 default action when the link is clicked. 4:52 Okay. We also want to uh have a 4:55 confirmation that they actually want to 4:56 delete the 4:59 subscriber. So 5:02 confirmation is going to be equal to 5:06 confirm and we'll just say are you sure? 5:11 Okay. And then we're going to say 5:19 if if confirmation then we're going to 5:22 go ahead and make an Ajax call. Okay. So 5:25 we'll say 5:28 Ajax. And in here we want the type. 5:34 Okay. Very important. This has to be 5:39 delete. All right. And 5:42 then we need the 5:45 URL. Okay, so the URL is going to be 5:50 slash 5:54 subscriber slashsubscriber and then we 5:57 want slash and then the user ID. So we 6:00 can get that. Um let's just concatenate 6:05 um whoops, we need that here. 6:09 Okay. So, get that from the delete user 6:13 link or delete 6:16 subscriber dot 6:21 data ID. Okay, remember that data ID 6:25 right here, data ID, this attribute, it 6:28 has the actual ID in it. So, that's how 6:30 we can get it from there and put it in 6:32 the URL 6:34 here. All right. Uh, actually, we don't 6:37 want that. 6:40 And let's see, right here, we're going 6:42 to say dot 6:46 done. All right. And in here, we're 6:48 going to write a we're just going to put 6:50 a 6:52 function. Okay. And that'll 6:55 take a 6:57 response. And what we're going to do is 7:00 just redirect to the um subscribers 7:03 page. So we'll do a window.replace 7:07 replace uh I'm sorry 7:11 location 7:16 dotreplace and this will be actually 7:19 it'll just go to the index page. All 7:22 right. And then down here if they don't 7:25 confirm that they want to delete we're 7:28 just going to simply return 7:32 false. Okay. So that should do it. 7:35 We'll save that. So this right here will 7:39 it'll make the delete request, but we 7:41 haven't added the code to actually take 7:43 it and process it. So we need to do 7:46 that. So in 7:50 our routes uh subscriber.js, that's 7:54 where we're going to handle 7:59 this. So we need to go below this code. 8:03 go right here and we're going to create 8:06 our delete query. So this will 8:09 be 8:11 delete 8:13 subscriber and we'll set that to 8:19 delete 8:23 from can't spell excuse me delete from 8:29 people 8:31 subscribers where 8:38 where 8:39 id is equal to question 8:42 mark. Okay. And then we need to write a 8:45 delete here a delete uh function. So 8:53 routerdelete I believe if you're using 8:55 express 3 um it's just dell it's router 9:00 dot it'll be a resource dell. Um I'm not 9:03 sure but in express 4 delete is fine to 9:06 use. All right so uh let's see what are 9:10 we doing here. We need to have the 9:13 ID. All right. And 9:16 then actually this needs to be in 9:22 quotes. Then we'll have our 9:26 function. Okay. Okay. And the function 9:28 will be have a request and 9:33 response and we'll do the execution. So 9:36 client 9:38 dot 9:40 execute. Okay. See it's very repetitive. 9:43 We're doing the same thing with every 9:45 query. So we're going to execute um 9:49 delete 9:52 subscriber. Okay. Okay. And then our 9:54 parameters 9:56 uh we want the id which will be coming 9:58 from the URL. So req dot params dot 10:06 id and then our 10:09 function which will have an error and a 10:15 result. Okay. 10:20 And we're going to say if there is an 10:24 error. Okay, if there's an error then 10:28 status will be 10:30 404. And we want to 10:33 send the 10:36 um 10:40 message. Okay. 10:43 Else. Okay. If it does delete, then uh 10:47 we're we're actually not going to handle 10:48 it here. We went we handled it in our 10:51 main.js. We're going to redirect. Okay. 10:54 So, basically all I'm going to do here 10:56 is I'm going to console 10:58 log. Actually, no, I'm not. We'll just 11:00 respond with the result. So, we'll say 11:03 uh 11:06 resz.json and then pass in here 11:10 result. Okay. So, let's go ahead and 11:13 actually let's restart the 11:16 server. Okay. and reload. Click on let's 11:19 see user 11:21 2live.com which is Mike Smith. Okay, 11:24 we'll go ahead and delete. It's going to 11:26 ask us for a confirmation. Click okay. 11:29 And now it redirects us and you can see 11:31 that he's now gone. All right, so we've 11:34 done basic CRUD create, read, update, 11:36 and delete uh with our node 11:40 application. Now lastly, um I know this 11:43 looks abs as far as design looks 11:46 absolutely horrible. I mean, there's not 11:48 too much we can do because there's 11:49 really there's not much content at all. 11:52 Um, but we can add a little basic CSS. 11:55 So, uh, let's go 11:58 to if we open up our 12:01 layout 12:04 layout.jade, we can at 12:07 least add like a a container and a 12:10 header. So, um, let's see. Above this 12:13 block content, this is where our main 12:15 content comes out. So above 12:19 that, let's create a container. So this 12:23 container is basically going to create a 12:26 div with the class of 12:28 container. And then below that we'll put 12:31 a header. Okay, the HTML 5 header tag. 12:34 And then an H1. 12:38 And this is called 12:41 my 12:43 subscribers. And then the block 12:47 content. Let's get out of the header and 12:52 do give this a class of main. And then 12:55 just indent this block content. Okay, 12:57 we'll save that. And then we'll open up 13:00 the CSS 13:01 file which is in 13:03 public stylesheets style.css. 13:08 CSS and we'll add a few things here. Uh 13:12 one the 13:15 container. We'll set that to a 13:19 width. So let's say um say 800 13:24 pixels. And margin I want it in the 13:27 center. So margin 13:30 auto and 13:32 overflow should be auto. And then we'll 13:36 give it a 13:38 border of light gray 13:42 solid one 13:44 pixel. Okay. And then the 13:48 header. Let's give that a 13:53 background. We'll do a background 13:57 of we'll just do um light gray, I 14:04 guess. Okay. Okay. Uh, 14:07 padding 20 14:09 pixels. And then the main area, I just 14:12 want to add some padding. So, 14:14 main 14:16 padding 20 14:18 pixels. And then let's make those forms 14:21 look a little better. All right. So, 14:25 inputs. We'll give them all 14:28 a 14:31 margin 14:32 bottom of 10 pixels. And then for the 14:37 text fields, so 14:39 input type equals text and also password 14:44 fields. And actually we don't have any 14:46 password 14:47 fields. Okay, we'll do a 14:51 height of I don't know 23 pixels. We'll 14:55 do a width of 220 14:59 pixels. And we'll add a 15:01 border of a light gray 15:05 color. Solid 15:08 uh 1 pixel and let's say 15:11 border 15:13 radius 5 15:16 pixels. And also a little bit of 15:22 padding. and we'll save that. Go ahead 15:25 and 15:27 reload. Uh let's see what this 15:34 is. Do I have the container correct? All 15:37 right. So the container is is only going 15:40 around the header. So something's wrong 15:43 with that. Something's wrong with our 15:45 indentation. So we have the body 15:47 container header. All right. So this 15:50 should be N1. That should be in 15:54 one. There we go. All right. So, not the 15:58 prettiest thing in the world, but a 16:01 little better. Um, yeah. Click on a 16:04 user. We have their details. We can edit 16:07 the form. Looks a lot better 16:11 now. All right. So, another thing maybe 16:15 I would add is some back buttons. you 16:17 know, if you're seeing the details, it's 16:20 it'd be convenient to have a link to say 16:22 go back. So, let's go ahead and do that 16:24 real quick. 16:27 Uh, so let's see. We want inside of the 16:30 views, we want our 16:35 subscriber. And let's see, where do I 16:38 want to put 16:39 it? Um, let's see. We'll put it right 16:41 above right below the header here, the 16:44 heading. 16:46 So, 16:50 a and you'll if you hate Jade, you'll 16:53 you'll get used to it. If you just 16:54 started using it and you feel like you 16:56 want to throw your computer out the 16:57 window, um it does get 17:00 easier. So, let's say this wants to go, 17:03 we want to go to just 17:05 uh the homepage, I think. 17:10 Yeah, we'll say go back. I think that'll 17:14 work. 17:16 Yeah. All 17:18 right. So, add 17:21 subscriber. We should put a link to I 17:24 guess go back as 17:27 well. So, add 17:38 subscriber.jade. Go back. 17:46 Huh? It didn't give me a line 17:51 break. Actually, let's put this at the 17:53 bottom. 18:11 So, I should be able to do a simple line 18:14 break. We'll do two of 18:16 them. There we go. All 18:20 right. Go back. All right. So, that 18:23 concludes this series. Um, I know this 18:26 isn't a fantastic application, but 18:29 hopefully it gives you a start. Um just 18:32 knowing how to do basic create, read, 18:35 update, and delete is um essential to 18:38 any application 18:39 really. So hopefully you took something 18:42 from this series and hopefully you'll 18:45 tune in for the next one. Thanks for 18:47 watching.
