This episode is for members only
Sign up to access "Build an Appointment Booking System With Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
36. Storing an appointment
Episodes
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
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
Transcript
00:00
Storing an appointment in the database isn't as easy as it might seem.
00:04
Now, let's just, before we do anything, take a look at our appointments table to see what we need to insert here. So we need to insert a service ID and an employee ID.
00:14
The UUID is already going to be filled for us because, over on the appointment model, we already have this static creating hooked into Eloquent to generate that UUID for us.
00:26
But we need to set a starts app, which is pretty straightforward. But we also need to add an ends app. So we need to take the service that's being requested.
00:34
And we need to take the duration of that service and add that on to insert it in. So not too much trouble. But let's go ahead and fill this in and see what we can do.
00:44
OK, so we'll start out with a controller. So let's go ahead and make out a controller here. And we'll call this AppointmentStoreController. Makes sense.
00:53
And let's go ahead and create out a route for this. So this is going to be a post route to appointments. We don't need to take in any route model binding here because we have everything being sent down with the request.
01:06
So let's reference the AppointmentStoreController here. And let's go ahead and name this just Appointments and Store. OK, so what I'd like to do is just head over here,
01:16
go ahead and introduce the InvokeMagic method. We will bring the request in now because we are going to need that. And then I'm just going to die dump on here
01:26
and just do anything. And then we'll hook this up on the client side just to make sure that this is all going through. So let's take the name of this.
01:33
We'll go over to our checkout. And then in that Submit method that we created, we can now submit this form. So all we need to do with Inertia to do this
01:42
is just use the method that we want, provide in the route name, and that's pretty much it. And what we can do is pass down any options in here. All of the data will be implicitly sent down here
01:52
because it's already attached to our form and we're posting directly on our form. So on success, we might do something. On error, we might do something, which we will be doing.
02:01
But let's go ahead and leave it like this for now and just try this out. OK, so I'm going to go ahead and choose a slot in here. We're not validating at the moment.
02:08
We'll do that last. And let's go ahead and just hit Make Booking. And yeah, sure enough, everything is hooked up. OK, so now over in our Appointments Store Controller,
02:16
let's figure out what we need to do. So we can't just do something like Appointment and Create and just pass down, say, all of the request data or all of the validated request data
02:28
because we need to explicitly put out starts at and ends date in there. So the first thing that we need to do before we start to do that is pluck out the employee
02:37
that we need to insert and also pluck out the service that we need to insert. The employee is not important just yet, but we will need that later when we're checking
02:44
for appointment collisions. So let's go ahead and do both now. So let's go ahead and set the employee here to find from the request.
02:53
And we will be validating that the employee actually exists in the database as well. And that's going to be employee ID. So basically just plucking all the data out
03:01
that we send down from the client side. And this is going to be the service ID. And of course, make sure we actually put in the service. OK, so now that we've got the service, what we can do
03:11
is we can create the appointment. And over in the appointment, let's just make sure that Guarded is just to an empty array. So we can insert the employee ID and service ID.
03:21
So we can insert these just normally. So let's go ahead and directly add in the employee ID and the service ID. We also want to put things like the name and the email address
03:32
in there. But we want to add in the starts and ends at date. So what we can do with this is just add on to this array. So this is just typically something that I would do,
03:40
just add into here. And then go ahead and add in the starts at date and the ends at date, which again, we're going to be validating.
03:47
So the starts at date, we're just going to parse this from Carbon. So let's use Carbon parse. And let's take in the request and date time.
03:56
And by inserting a Carbon object directly into here, it's going to have exactly the same effect. Remember that we are casting the starts at and ends at dates. OK, so we need to add in the starts at date.
04:07
But now we need to get the ends at date. So what we're going to do is at the same time as inserting this or putting this into this array, we're going to assign that a date.
04:18
And then we're going to take that date here. Really importantly, copy this so we don't modify the original value. Otherwise, we're going to end up with the same date being
04:29
added in. So we're going to copy that. And then we're going to go ahead and add on some minutes to the end date, which is just going
04:36
to be the service duration. So now we basically end up with the date that we've requested and the slot that we've requested plus the minutes onto the service copied from that date.
04:47
OK, so now that we've done this, let's go ahead and just try to see if this works. We'll just return back for now just so we can get a response. But obviously, we'll be redirecting
04:56
to a confirmation page. So let's go and just start the whole process again. So I'm going to go ahead and choose one of these. Choose a slot.
05:04
Go ahead and enter my details, which, of course, we need to be inserted. Hit Make Booking. And yeah, OK, so unknown column 0 in field list.
05:12
Let's just take a look at this. Yeah, so what I've done is just passed this array directly in. What we want to do is use a request only. And you probably noticed that.
05:22
So we only want to pass these in plus the additional columns. OK, let's just try that again. And yeah, there we go. We redirected it back.
05:30
So let's go over to the database and check this out. And you can see, sure enough, for a half an hour appointment here, we have inserted the slot that we chose plus a half an hour, which obviously takes us up to half past 9.
05:42
The correct service and employee are in there. The UUID has been generated. And we have the name and the email address in there as well. Great.
05:49
So that is our appointment created. Let's go ahead and add some validation to this now so we know that everything in here actually exists and is in the correct format.
05:59
So we can either do this inline or we can create out a form request for this. I'm going to create a form request for this just to make it a little bit tidier.
06:07
So let's go ahead and create our request here. And we'll call this an appointment store request, like so. And let's go ahead and swap over our request
06:18
to that appointment store request. And this just extends the base form request and the base request. So everything is going to work.
06:26
Now, to authorize this, we don't have any kind of authorization. So let's set that to true. And let's take a look at the rules. So the first one is going to be the employee ID.
06:34
Now, this is required. But we also want to make sure this exists. So we could do that inline. We could say exists in the employees table
06:42
if we wanted to. Another way to do this, which is a little bit easier, is to use the validation rule class and then say exists. And this is going to take in the model or table name.
06:53
So I'm just going to pass in the model name and then the ID, which is the column that we want this to exist at. So that needs to exist. And we'll have the same thing for the service ID as well.
07:04
So we want that to exist in the service table. So let's look at the easy ones, which is stuff like the name. For now, I'm just going to set these to required.
07:12
But of course, set these to your own validation rules. And for the email, this is required. And of course, it needs to be an email address as well. So for the date time, this is slightly different.
07:22
It needs to be required. And we could just put date in there. But we kind of want to make sure this is in the right format. And then when we parse it in the controller, it works nicely.
07:32
So we don't have a date time validation rule in Laravel. But we do have a date format validation rule in which we can add in the format that we expect. So the format we have is the year, the month, and the day.
07:44
And then we have the hours, the minutes, and the seconds. So that should do. Let's just go ahead and test this out and see if this works. So if we come over, we've already
07:54
booked up the 9 o'clock slot. So let's just go ahead and book the 9.30. Let's enter our details, hit Make Booking. And yeah, that looks like it worked.
08:03
Let's give that a refresh. And sure enough, it's in there. So it's in the correct format, as we would expect. And now that is all of our validation done.
08:11
OK, so now that we've done this, we need to talk about appointment collisions. And if someone has already booked this while we're in the checkout, of course,
08:19
this is still going to work. So we could end up with duplicates. Let's solve that in the next episode and see how we return back with any errors.
39 episodes•5 hrs 0 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 create an entire booking flow with Inertia (using Vue), including 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 Inertia!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!