1

00:00:00,870 --> 00:00:06,020

So this time around, we want to add a delete button right here that allows us to delete the reservation.



2

00:00:06,690 --> 00:00:08,460

So let's update the e-mail first.



3

00:00:09,340 --> 00:00:12,900

Just add the button and then we'll add the necessary JavaScript and handlers in a moment.



4

00:00:14,190 --> 00:00:17,720

Now, as I said before, I don't want to delete button to appear here.



5

00:00:17,730 --> 00:00:20,010

I want it to be way over here and I'll make it red.



6

00:00:20,010 --> 00:00:20,970

So it's easy to see.



7

00:00:20,970 --> 00:00:25,170

But I want to make sure that it's far enough away that people don't accidentally click on that and delete



8

00:00:25,170 --> 00:00:31,240

a reservation just without reading the dialog box, which in my experience happens far too frequently.



9

00:00:31,410 --> 00:00:32,310

So that's not to hurt.



10

00:00:32,520 --> 00:00:34,350

Bootstrap gives us some nice ways to do it.



11

00:00:34,890 --> 00:00:36,950

So first of all, let's put the button in there.



12

00:00:37,440 --> 00:00:43,110

I'm just going to duplicate that one and give myself some space and I'll give it the class of danger



13

00:00:43,110 --> 00:00:49,230

button danger, which makes it red and I'll have it call a function delete rez, which doesn't exist



14

00:00:49,230 --> 00:00:52,050

yet, and we'll call this delete.



15

00:00:53,010 --> 00:01:00,150

And down here I'll just create an empty function for now called the function delete rez and it will



16

00:01:00,150 --> 00:01:02,250

take an ID and we'll leave empty.



17

00:01:02,280 --> 00:01:03,360

So let's see how that looks.



18

00:01:04,770 --> 00:01:07,030

So there it is in the wrong spot.



19

00:01:07,050 --> 00:01:08,110

I don't want it there.



20

00:01:08,160 --> 00:01:09,240

I want it over here.



21

00:01:09,900 --> 00:01:12,600

And fortunately, we can do that pretty easily in bootstrap.



22

00:01:12,960 --> 00:01:15,960

We have these buttons from here.



23

00:01:15,960 --> 00:01:17,940

Save down to Mark is processed.



24

00:01:18,300 --> 00:01:19,830

I want those to be on the left.



25

00:01:19,830 --> 00:01:28,190

So I'm going to wrap them in a div with the class of float left and I'll put the closing div down here.



26

00:01:30,480 --> 00:01:35,250

And as you might have guessed already, I'll give this one the div of class float.



27

00:01:35,250 --> 00:01:35,670

Right.



28

00:01:38,250 --> 00:01:43,230

And move it to divide Dow, closing div tag down to here, format, the whole thing.



29

00:01:44,040 --> 00:01:51,060

So what that does is everything inside this div will float to the left of the screen and everything



30

00:01:51,060 --> 00:01:53,300

in this div will float to the right of the screen.



31

00:01:53,730 --> 00:01:58,560

And any time you're floating things in bootstrap and this is a built in function, that's part of the



32

00:01:58,560 --> 00:02:01,700

bootstrap framework, it's always good practice.



33

00:02:01,710 --> 00:02:07,170

In fact, it's almost essential that you put this in div class equals clear fix.



34

00:02:10,560 --> 00:02:16,890

And that makes sure that everything from this point on in the page will render properly, if you leave



35

00:02:16,890 --> 00:02:18,700

this out, things will look strange.



36

00:02:19,020 --> 00:02:22,050

So let's give this a save and reload this page.



37

00:02:22,440 --> 00:02:24,360

And now that button is where I want it.



38

00:02:24,620 --> 00:02:27,030

OK, so what am I going to do in this button?



39

00:02:27,060 --> 00:02:33,780

Well, the reality is I'm doing almost exactly the same thing I'm doing here in process reservation.



40

00:02:34,110 --> 00:02:38,250

I'm just calling a different you are out, which I will call delete reservation.



41

00:02:38,640 --> 00:02:42,990

OK, so we should be able to save this, reload this and this should work.



42

00:02:43,560 --> 00:02:44,220

And it does.



43

00:02:44,460 --> 00:02:45,870

OK, and if I click OK, sure.



44

00:02:45,870 --> 00:02:48,370

Take me to a page not found and it does.



45

00:02:49,440 --> 00:02:51,780

So let's go set up the routes and the handlers.



46

00:02:51,780 --> 00:02:53,010

I'll do the handler first.



47

00:02:53,760 --> 00:03:00,810

So I'm in my handlers don't go file and I'm just going to copy this entire function pasted and rename



48

00:03:00,810 --> 00:03:08,970

it admin process reservation becomes admin delete reservation and we'll copy this and fix the comment



49

00:03:09,630 --> 00:03:21,600

and we'll just change this to say delete a reservation and all we have to do is change the message reservation



50

00:03:21,600 --> 00:03:27,480

marked as process becomes reservation deleted and call the correct database function.



51

00:03:27,600 --> 00:03:31,770

And it's as simple as delete reservation.



52

00:03:35,290 --> 00:03:41,560

With just ID as a parameter and that we set up the route, so let's go back to our roots file and duplicate



53

00:03:41,560 --> 00:03:52,440

this one, have it call admin, delete reservation and have it match this route, delete reservation,



54

00:03:52,840 --> 00:03:53,650

and that should be it.



55

00:03:53,680 --> 00:03:54,550

So let's try this.



56

00:03:55,030 --> 00:04:01,810

Let's go back to our terminal, stop the application, start the application, make sure it compiles.



57

00:04:02,750 --> 00:04:03,680

And it does.



58

00:04:04,250 --> 00:04:06,680

And let's go reload this page.



59

00:04:08,720 --> 00:04:14,390

Just to make sure everything's current and I've got John Smith reservation ID one, and I'm going to



60

00:04:14,390 --> 00:04:15,590

delete that reservation.



61

00:04:18,030 --> 00:04:23,360

And it's deleted and John Smith and if I go to all reservations and sort my ID, it is gone.



62

00:04:23,670 --> 00:04:26,220

So that works exactly the way that we want it to.



63

00:04:26,790 --> 00:04:30,970

Now, you might be asking yourself, OK, you deleted this reservation.



64

00:04:31,290 --> 00:04:33,030

What about the item restrictions?



65

00:04:33,060 --> 00:04:34,320

What about the room restrictions?



66

00:04:34,350 --> 00:04:39,810

Well, if you look in the database and I'll go in here and look at room restrictions and refresh this



67

00:04:39,810 --> 00:04:45,780

page, you will see that reservation ID one doesn't appear here anywhere.



68

00:04:45,790 --> 00:04:51,660

And that's because we have a foreign key relationship that says, undelete Kaskade.



69

00:04:52,080 --> 00:04:57,990

So on the room, the room restrictions table, the reservations table that's at the reservations table.



70

00:04:58,470 --> 00:05:05,580

There's a foreign key between that and the column reservation underscore ID in room restrictions and



71

00:05:05,580 --> 00:05:09,630

that foreign key says on update or undelete cascade.



72

00:05:09,740 --> 00:05:14,850

So when you delete the reservation, the restrictions are deleted without you having to do anything



73

00:05:14,850 --> 00:05:15,140

else.



74

00:05:15,150 --> 00:05:18,090

And that's one of the great advantages of a foreign key relationship.



75

00:05:18,960 --> 00:05:20,190

OK, so we're getting closer.



76

00:05:20,670 --> 00:05:25,440

The next step is arguably the most difficult one we're going to do, and that is displaying the reservation



77

00:05:25,440 --> 00:05:25,980

calendar.



78

00:05:26,370 --> 00:05:31,380

And what I want to have happen on this page right now, it's just dummy content is I want to display



79

00:05:31,380 --> 00:05:32,850

the current month and year.



80

00:05:33,480 --> 00:05:36,910

Then I want to have one row for each of the rooms that we have.



81

00:05:36,930 --> 00:05:43,470

So there'll be two rows and those rows will consist of checkboxes all the way across where I can check



82

00:05:43,470 --> 00:05:48,960

a box and click save to close a room or block a room for a given date or date range.



83

00:05:49,560 --> 00:05:54,300

And actual reservations will just show up with some indication that this is a reservation.



84

00:05:54,300 --> 00:05:57,360

And clicking on it should take me to the page for that reservation.



85

00:05:58,020 --> 00:06:02,550

And then I want to be able to move back and forth between months with buttons, maybe one over here



86

00:06:02,550 --> 00:06:08,010

and one over here that will allow me to go to a specific month easily and we'll take care of that in



87

00:06:08,010 --> 00:06:09,420

the next few lectures.