Playing
01. Introduction and demo
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
In this course, we're going to be building out a booking system entirely from scratch with Laravel. Now, before we look at a demo of this, I want to talk about the flexibility of this system, show you a little bit behind the scenes so you can grasp exactly what we're covering here,
00:15
and then we'll go through the entire booking flow. So when we build out a booking system, it's really important that it obviously works really well. We're going to be including tests for our availability calculator and our slot generator with PEST, but the availability flexibility is really, really important.
00:34
So by that, I mean, for example, as you can see on screen, we've got two professionals or two employees in this case, they might perform different services. So in this case, if we just click on Mabel, she can only do hair, but with Alex, he can do all of these services.
00:51
So that's one of the things that we're going to cover here, and it won't allow us to book anything else. The second thing is with the scheduling of employees, and this is a very difficult problem to solve.
01:02
So what we're going to have is a per weekday availability schedule. So I'm going to say that I can work on Monday, Tuesday up to Friday, but I don't want to work weekend. So that's very, very easy to do in this system, and that could be for any days of the week.
01:16
And the second thing is the overall long schedule. Now, previously, what I've done is had this scheduled in sort of on a day by day basis from a time in the morning to a time in the afternoon. But what we're going to do is do that Monday to Sunday schedule,
01:31
and then have a long period that we can work. So in my case, I've set these both to work from now for a year's time. So that's my sort of working schedule within a year. Now, what we can do as well as that is add in holidays or exclusions to our schedule.
01:49
So for example, if I book a week off and I want to go on holiday, I can just insert one record very, very easily, either directly into the database or via an admin panel, and that will cut my availability. Now, that's the employee scheduling stuff in terms of their schedule.
02:05
But then, of course, what we need to do is calculate which slots this employee can do for each service throughout the day, taking into account that schedule. So things get really complicated really quickly, but we're going to take a really easy approach to this.
02:19
Not easy, but as easy as we can. So let's go ahead and look at a demo of this. And of course, I'm going to explain all of this stuff as we go through the course, but this is as flexible as can be.
02:29
There's nothing really that you can't do with this system. OK, so I'm going to go ahead and choose myself. And in here, you can see that we've got multiple services with formatted prices. The prices don't really matter here.
02:40
But let's go ahead and book in a 20-minute beard appointment. OK, so when I click on this, you'll notice that this is very fast. Now, what's actually happening behind the scenes are not a lot of queries. What we're actually doing is we are building up the availability
02:53
within some sort of Laravel collection. It's going to be a custom collection. And then into that, we're saying who can do this particular service. So as well as what you see here in other versions of the course
03:04
that we're going to create when we create live wire and inertia versions, we are going to be able to choose a service and then see who can do that service and their available slots. This is incredibly flexible.
03:15
OK, so let's go ahead and look at this. Now, with the booking calendar, you'll notice that we've got this nice calendar. And you can see how many slots are available. But we can also see into the future as well.
03:25
So we can calculate over a long period of time when this particular employee is available for this service and how many slots they have left. And of course, for someone booking, that makes it really easy for them
03:37
to actually see, well, yeah, I want to book on Monday the 4th. And there are 30 slots available. Great. Now, the reason that there are 30 slots available on a Monday and a Tuesday
03:47
is because my working hours on a Monday and Tuesday are longer. I start earlier and perhaps finish later. So Wednesday, Thursday, Friday, all the same. But I've specifically set Monday and Tuesday to have longer working hours.
04:01
Again, incredibly flexible. So let's go ahead and just book an appointment for today. So I'm going to choose today. And you can see that you're presented with all the slots.
04:09
If you choose a different day, the slots change. For example, if we do choose that 30 slot day, you can see that I start at 7 in the morning and we get more slots. And of course, this is a very short appointment.
04:19
For longer appointments, we'll look at it in a second. OK, let's book for today at 9 o'clock. And we're just going to enter some details here. You can customize this to do pretty much whatever you want to do.
04:29
You can even take payment here. You could add more details to this. And when we click Make Booking, it's done. We're booked in.
04:36
Now, behind the scenes, this will also check at the same time whether that slot has already been taken. For example, if you're booking an appointment and then someone books it before you, this will let you know.
04:46
So it will redirect and tell you that that slot is no longer available. OK, so we've got our booking here. We're all booked in. I can cancel the booking if I want to.
04:54
We're not going to do that. What we are going to do is go back to choose a appointment again. And you can see that, sure enough, that slot is now unavailable. 9.20 is available because I've booked at 9 and it's a 20-minute appointment.
05:07
But we can book at 9.20. And of course, we can add gaps between the appointments if we want to. But once you've built the system up, it's very, very easy to tweak it to do what you want to do.
05:16
OK, so I can't book at 9, but I can book at 9.20. Let's go back and choose a different appointment that's a little bit longer. And you can see here that we've got a slight gap between the appointment here. Again, that's on purpose just so we leave ourselves enough time.
05:30
But we can book at 9.45. And again, all of this stuff is easy to customize in terms of how you want these slots to be generated. So you can tweak this to get the slots that you need.
05:41
OK, so again, we can see all the appointment times. Really importantly, the appointments at the end of the day don't run into the end of the hours that this employee works. That's really important.
05:51
And there we go. And you can see that we've got nine slots today, 10 tomorrow, and of course, more for that Monday and Tuesday because I've set them up in that way.
05:59
So we're going to be building this system in Laravel and just using Alpine to add in this functionality. Later on, we're going to cover in two separate courses, Livewire and Inertia versions, which will have a little bit more power
06:11
behind them because we're able to customize the UI and make things a little bit easy. This with Pure Laravel and Alpine means we can build out something like this checkout.
06:22
But it is a lot easier when we use Livewire and Inertia. OK, so we're going to go ahead and just check out the database really quickly so I can show you how this looks behind the scenes. So let's go over to Employees first of all.
06:33
That's pretty straightforward. We've got a slug here for URLs. We've got the profile photo. Very, very simple stuff.
06:39
And then we've got our schedules. So as you can see, for each of these employees, we have a Monday starts at, a Monday ends at, a Tuesday starts at, and a Tuesday ends at.
06:48
This might seem really verbose in terms of adding in all of these columns. But this makes it really, really easy to add this into an admin panel. And it also makes it incredibly easy to calculate this on the back end as well rather than having some sort of other method of scheduling all of these things.
07:06
So we've got a general starts at and ends at. That is the sort of longer period. So you can see that this ends in 2025. And we've got a Monday starts at ends at all the way up to Sunday ends at.
07:18
And you can see that these are just null because I don't work on Saturdays or Sundays. We then have our schedule exclusions. So this will be the time off that we've booked. So let's just take a really quick look at this.
07:29
This is going to be a really long introduction. But hopefully, this will give you a really good idea as to what we're doing. So let's go ahead and just add in a new row in here. I'm going to set that to my employee.
07:41
And let's go ahead and add in an exclusion here. We'll forget created at and updated at. And let's do this for February the 1st. And let's do this from 9 in the morning up until 5.
07:57
OK, so if we go back over now and we just check this, you can see that February the 1st, if we have a look at this, is empty. So this has been excluded within the calendar. We can't click it.
08:09
We cannot book on that date. And if someone does try to book on this date by trying to get around your calendar, it's not going to work because we always check availability on the back end. OK, so that's the exclusions.
08:21
We also have, obviously, the appointments. We have booked an appointment already. And of course, we've already seen from the UI that that has been canceled out as an available date.
08:29
Now, again, if you wanted to add some sort of gap in between, the easiest way to do this rather than doing this in the code is just adding some minutes onto the appointment time. And of course, that is going to work nicely.
08:41
So for example, if you wanted a 10-minute gap between each appointment, this would run up to 9.30. And if we just check out the UI again, you can see that for today, the appointment starts at 9.45 for this one.
08:55
For this one, if we just check it out, it starts at 9.40. So we've got that gap in there. So incredibly complicated to do this. But we're going to go through this step by step,
09:04
how we build up this entire slot generator, how we add the employees to it that can do them slots, look at this over a long period of time, tidy everything up, and then eventually get this into the UI.
09:17
And like I said, there will be live wire and inertia versions as well, which will be a little bit smoother, and we'll be able to add a little bit more functionality in. But this will give you a really, really good idea
09:27
as to how to build up an availability calculator like this. And then you can go ahead and tweak it as you need. Okay, so now that we've got this done, let's go into the next episode, get Laravel set up with PEST,
09:37
so we can start writing some tests for all of our availability functionality. Incredibly important. And then we can move on to build the stuff out and build the UI out. So let's do this.
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!