Build an Appointment Booking System With Laravel

Sign in Get started

This episode is for members only

Sign up to access "Build an Appointment Booking System With Laravel" right now.

Already a member? Sign in to continue

Playing

34. Handling appointment collisions

Episodes

0%

Your progress

Total: 4h 49m
Played: 0m
Remaining: 4h 49m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. Fresh project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Base layout and Tailwind setup

21. Listing employees

22. Listing services for an employee

23. Scaffolding the checkout

04. Building the availability calendar

24. Installing Alpine.js

25. Installing and using easepick

26. Disabling unavailable dates

27. Showing available slots on the calendar

28. Requesting available slots

29. Fetching available slots

30. Displaying and selecting a slot

05. Booking appointments

31. Hooking up customer appointment details

32. Disabling future steps

33. Storing an appointment

34. Handling appointment collisions

35. Redirecting to a confirmation page

36. Building the appointment confirmation page

37. Cancelling an appointment

Transcript

00:00

When we're creating appointments,

00:01

there's a chance that two appointments for the same slot and same date can be inserted into the database. So what we're going to do to mitigate this

00:09

is at the appointment controller level, whenever we are inserting an appointment, we're going to check that this is available. There's a couple of ways that you could do this.

00:17

You could hook into an Eloquent event for the actual creation itself and throw an exception or something like that. But since we're trying to keep things simple,

00:26

we could just do a really basic if statement here to check the availability again before every single appointment is created and then just throw an error and show that on the client side.

00:36

That's exactly what we're going to do now. So we're pretty much going to do exactly the same thing as we have over on our checkout controller and just use our service slot availability class

00:48

again to just detect the availability. So let's go ahead and just pull this over. We are collecting up the employee. We don't have the employee at the moment.

00:56

We just have the employee's ID. So just up here, let's also go ahead and find the employee by the employee ID, which remember is already validated. So it's all good.

01:08

Add that in here. We've already got the service because we're using that. And then we're going to check the specific period that we want as well.

01:15

So the period is going to be on the carbon pars request date and the start of the day. So we're going to grab all slots for that day so we can make sure that the slot that the user's requesting

01:27

is within this. And we'll go to the end of the day. You could even narrow that down as well. But since this is really fast, it doesn't really matter.

01:35

It's not going to add any extra load. OK, so now we've got that availability stuff in there. We want to check in there if a slot actually exists already. And it's free.

01:45

So let's go and start out if statement. And we don't really have a nice way to do this at the moment. But let's just write this out how we'd want this to look. So we're going to go and say availability first, which,

01:56

remember, will bring us back our date object with all of our slots in which we can check within. So that's all good. And we want to say something like contains slot and then

02:07

parse in the time. So if the availability doesn't contain this slot, here we want to throw an error. So basically, if the slot is not free,

02:20

throw an error or return a response that we can handle. So we don't have this contains slot method over on our date here. So let's go ahead and just build this in now.

02:29

So let's create out a contains slot helper here, which is pretty handy. And we're going to accept into here a time. And we might as well just type in this to a string

02:38

because it's always going to be a string. So to do this, we're going to go and search in the slots within this date. So we can actually use the search function or the method

02:47

on our collection object. And we'll search inside of here. We'll get a slot back that we can use to compare. Let's bring time into scope here.

02:58

And then we basically just want to check if any of them slots that we're searching in under the time, that carbon object, if the formatted matches the slot that we've checked, then we are going

03:13

to find this returns the actual slot itself. So if this returns false or null, the slot doesn't exist. So let's go ahead and try this out and see what happens. So just here, because we're working on the client side

03:26

and sending an AJAX request, I'm going to say slot taken. Now, to test this out just in the browser without writing any kind of tests, what we're going to do is we're going to book an appointment in the database

03:40

manually. And then we're going to book the same appointment. So I'm going to get rid of this one. Let's switch this to 10 o'clock to 1030.

03:49

And we're not going to refresh the page. And we're going to try and book this specific slot. Let's make sure we go ahead and clear out our Laravel log. And let's go ahead and try and book this.

03:58

So let's book this 10 o'clock slot, which already exists. Hit Make Booking. And there we go. We get logged out, slot taken.

04:06

So that's working really nicely. All we need to do now is return a response here with a specific error code, which we can pick up from the client side.

04:14

So let's go ahead and return a JSON response here. We're not sure what we're going to put in there yet. But we are going to add in a 409 conflict in there. So in here, probably just a message or just an error key

04:28

is going to be good enough. So let's say that slot was taken while you were making your booking. Please try again.

04:37

Something like that that makes sense. OK, so now when we try and do this again, what we're going to do is get an Axios error here, because we're going to have a 409 conflict.

04:47

So over in our Network tab or just in our console, we get that 409 back, which is great. And now we can just show the error. So how are we going to do this?

04:56

Well, back over to our checkout, let's go to the point where we're booking here. And let's go ahead and catch on this Axios post to our appointments any errors that we get.

05:06

So we're going to get back a response here. And we'll just console log out the response body. And let's actually call that error. And then we'll say error.response.

05:19

I think it's data, not body. OK, and we'll log the error out as well, just so we can see that we're getting that. OK, so that's going to go ahead and refresh the page.

05:26

But what we can, of course, do is set this again to one that already exists. Let's say 10 till 11. Save that out.

05:37

And that's created a duplicate. So let's get rid of, see where we are, 10 30. So let's get rid of this one. OK, so I'm going to book that 10 30.

05:49

And just before I enter anything else, bring up the console. And there we go. Great, so that slot was taken while you were making your booking.

05:58

So now all we need to do is put this error in some sort of overall key within our Alpine component. And then if that exists, we just show an error on the page. So let's go over to our checkout.

06:09

And let's set this instead up here in an error key, which by default will be null or false. So in here, we can just say this error. And we'll set that to exactly what we console logged out

06:23

here. And then somewhere, I think probably under the your details and book section, we'll output this error.

06:33

So we're going to say x text error. And we'll say x show error. And then we'll add an x close to that so nothing shows if it's not in there.

06:42

OK, so that should be enough. Let's go over and give this a refresh. Back over to the database, change this appointment over to 10 o'clock till 11.

06:51

That's fine. Try and book for 10. And what we should now see is that error coming back, being set into that key, and then

06:59

being displayed just up here. Perfect, so it's not letting us book. Nothing is happening. But what we can now do is just style this up.

07:06

And we're done with the conflict stuff. So I'm just going to go ahead and add some really basic styles to this. Let's set a slate of 900, text white.

07:15

We'll give it the same padding as everything else. And we'll set rounded to large. And we'll set a margin bottom of 3 so it doesn't hit that. Or let's do that at the top.

07:26

I think that's fine. Yeah, that'll be OK. OK, so let's try this one more time. And we should see the error in there nicely.

07:32

So let's change that to 11 till 12. We'll try and book the 11 o'clock slot. And obviously, that's being checked behind the scenes. So now, there we go.

07:43

Your slot was taken while you're making your booking. Please try again. Of course, feel free to change that and style it up how you want.

07:48

But the most important thing now is whenever a booking is made, an appointment is made, before we do that, we're checking for slots that are already in there or don't exist and showing an error message.

Episode summary

In this episode, we're tackling the problem of appointment collisions—those annoying situations where two people might book the same slot at the same time. We want to make sure our system prevents double bookings and provides helpful feedback to our users if someone else nabs their time slot while they're trying to book.

To solve this, we start by adding a check in our appointment creation logic. Right before we insert an appointment, we verify if the slot is still available using our service slot availability class. If it turns out the slot is already taken, we stop the booking and send an error message back to the frontend. We're also writing a little helper method—containsSlot—so we can cleanly check if our collection of available slots actually includes the one the user wants.

Next, we test this whole flow by manually adding and attempting conflicting bookings, ensuring our system properly detects the collision. Whenever a user tries to book a taken slot, we throw back a 409 Conflict response and show a clear error message right on the page using Alpine.js, so they're immediately aware of the issue. Finally, we apply a bit of basic styling to the error feedback to keep the user experience smooth and friendly.

By the end of this video, we've got a solid, user-friendly way to handle booking collisions and prevent double appointments!

Episode discussion

No comments, yet. Be the first!