This episode is for members only
Sign up to access "Build an Appointment Booking System With Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
37. Cancelling an appointment
Episodes
01. Introduction
02. Core functionality
03. How we build up availability
7m 55s
0%
04. Employees and services
7m 39s
0%
05. Employee schedules and exclusions
7m 53s
0%
06. Setting up appointments
5m 34s
0%
07. Working with date periods
10m 4s
0%
08. Iterating over requested days in a period
4m 51s
0%
09. Adding schedule availability
15m 38s
0%
10. Subtracting employee schedule exclusions
7m 53s
0%
11. Excluding time already passed
2m 57s
0%
12. Writing tests for schedule availability
19m 50s
0%
13. Generating slots
14m 47s
0%
14. Building the service availability generator
7m 5s
0%
15. Adding employees into slots
9m 44s
0%
16. Removing empty slots
4m 42s
0%
17. Removing slots with booked appointments
6m 44s
0%
18. Using a custom date collection
3m 34s
0%
19. Writing tests for service availablity
18m 42s
0%
03. Building the booking UI
04. Building the availability calendar
05. Booking appointments
31. Hooking up customer appointment details
5m 17s
0%
32. Disabling future steps
2m 43s
0%
33. Storing an appointment
14m 43s
0%
34. Handling appointment collisions
8m 1s
0%
35. Redirecting to a confirmation page
2m 55s
0%
36. Building the appointment confirmation page
5m 40s
0%
37. Cancelling an appointment
5m 30s
0%
Transcript
00:00
OK, so let's handle cancelling a booking. Now, all this is going to do is it's
00:04
going to set the cancelled at column in our database table to the current timestamp. And we know that by cancelling an appointment, that's going to free up a slot, because we included that
00:14
in our slot generation. Now, we don't just want to link through to this. So at the moment, I've defined this out as an anchor. But we don't want to do that, because if we create a route
00:23
that doesn't have any kind of cross-site request board reprotection, and we don't need to submit it, there's a chance that people could cancel other people's bookings, and a lot of other things can go wrong.
00:32
So what we're going to do is define the route out, first of all, and, of course, create the controller. So let's go and create out another controller. And let's call this AppointmentDestroyController.
00:46
We could call it UpdateController, whatever you wanted. And let's go and create this just up here. So this is going to send a delete request
00:54
through to appointments. And, of course, we need to know what the appointment is. So let's add in that AppointmentDestroyController. And, of course, give this a name, Appointments,
01:09
and Destroy. Great. OK, so ideally, what we want to do with this is use a form. Now, that's not great, because we
01:16
don't want to submit a form. But we can do this using Alpine. And we can also add a confirmation in there. So for now, let's just bring in this appointment in here.
01:24
We'll fill in the actual cancellation stuff in a minute. But let's just die dump on that appointment, just so we can see that this works. OK, so the way that we hook this up is to create a format.
01:35
And we have this as a post. And the action goes through to that route that we've just created. So we can say Appointments, Destroy, and, of course,
01:48
pass the actual appointment into there. Now, what we can do is change this over to a button. Obviously, get rid of the href, because we're not going to need that.
01:58
And it's just going to look exactly the same with Tailwind. So we've got a button now that we can click through and technically submit this form. But the problem is the method here is delete.
02:07
So we set this as a delete method. What we can do is we can, as well as defining our cross-site request forgery protection, which is really important, we can also spoof the method.
02:17
So we can set the method to delete. We have to have a post with an HTML, because that's all that's supported. But we can spoof this method here.
02:25
So now, when I go ahead and click through to that, it does send a post request through as a delete type HTTP request. And as you can see, it works.
02:35
So we'll go through and actually cancel the appointment. So let's go over to our AppointmentDestroyController. And all we need to do here is say Appointment, Update. And we can go ahead and pass through CanceledAt.
02:49
And we'll just set that to the current date and time. And then we can just return back to the other page. Great. So let's go over and just make sure this works.
02:57
Hit that. We're redirected back. And it is canceled. OK, so now, let's add a confirmation,
03:03
because obviously, we don't want to allow users to click on this and then not have any kind of confirmation. So let's go and add Alpine here. So let's pull all of this stuff down.
03:14
Let's initialize this with x data, although we don't need any data. And we're going to say onSubmitPrevent, which we've already seen.
03:22
And in here, we can just do a really simple if statement. We could do this in one line. But let's just say if window confirms, or just use a native browser confirmation.
03:32
We'll say, are you sure? Now, if they are sure and this returns true, so if they do confirm this, what we can then do is say l, which represents this form itself.
03:42
And then we can just call the native submit method on an HTML form. And that will submit this form. Otherwise, it will just fall through and do nothing at all.
03:50
So now, when we click Cancel Booking, I can click Cancel, and it doesn't cancel it. You can see in the database, it's still uncanceled. But if I click OK, that returns true.
03:59
It submits the form. And we have canceled the appointment. And of course, you can add any kind of third-party library here if you want to, to show the confirmation.
04:08
OK, so finally, we're just going to go and change around the UI to show that this is canceled. So over on the appointment model, why don't we just add in, just on the booted,
04:18
a method in here called canceled, just so we can get back a true or false value of whether it's canceled or not. So typically, we'd just do is null on the canceled at date.
04:30
So if it's not null, it means it has been canceled. And then we can go and just change around the UI. So we can say if appointment canceled and say not canceled, then we want to show this form.
04:46
So let's end that. And there we go. And of course, because that appointment is canceled now, we don't see that button.
04:53
And then we can just change around the title as well if we want to. So in here, we could just add a ternary. And we could say if the appointment is not canceled,
05:06
we're going to show that text. Otherwise, we will show canceled. And let's just escape that. And we're done.
05:16
So now, we see that it's been canceled. And we're all good. And of course, you can change anything around about this view if you want to.
05:23
So let's just uncancel this just to make sure that that looks good. And when we do cancel it, we end up with the following. Great.
37 episodes•4 hrs 49 mins•1 year ago
Overview
Building an availability calendar and booking system is a notoriously difficult problem to solve. That’s exactly what we’re going to cover in this course.
Step by step, we’ll build an appointment slot generator that calculates availability based on employee schedules, employee’s booked time off, the length of service chosen, existing appointments, and cancelled appointments.
For maximum flexibility, we’ll also allow multi-employee availability checks, so we’ll be able to see every employee who can perform a service (and their available slots).
To finish up, we’ll build a simple UI with Alpine.js, with a beautiful booking calendar that shows detailed availability across multiple dates, the ability to choose a time slot — and finally the ability to book an appointment.
Phew. We’ve got a lot to learn — let’s build a booking system with Laravel!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!