Build an Appointment Booking System With Inertia

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

36. Storing an appointment

Episodes

0%

Your progress

Total: 5h 0m
Played: 0m
Remaining: 5h 0m

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. A fresh Inertia 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. Employee and service resources

21. Listing employees and services

22. Showing services for an employee

23. Scaffolding the checkout

24. Making an employee optional

04. Building the availability calendar

25. Rendering the datepicker

26. Fetching availability

27. Disabling unavailable dates

28. Showing the first available date

29. Fetching future availability

30. Showing slot count on the calendar

31. Fixing up core availability in the past

32. Showing available slots

05. Booking appointments

33. Hooking everything up to a form

34. Setting an employee for the service checkout

35. Adding booking details

36. Storing an appointment

37. Handling appointment collisions

38. Showing the confirmation page

39. Cancelling an appointment

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.

Episode summary

In this episode, we're diving into how to actually store an appointment in the database—and there’s a bit more to it than just a simple insert!

First, we walk through what needs to go into our appointments table, specifically the service and employee IDs, as well as the start and end times for the appointment. The UUID gets generated for us, but we have to calculate the end time by adding the duration of the service to the start time. We show how to set up the route and controller (AppointmentStoreController), wire everything up with the client using Inertia, and make a test booking just to see if the data is flowing correctly.

After the basic setup, we break down how to properly collect and validate the incoming data. This includes making sure the employee and service really exist, getting the name and email in, and handling the all-important date and time fields. Using Laravel’s Carbon, we calculate both start and end times based on the chosen slot and service duration.

We then walk through adding validation by creating a custom Form Request (AppointmentStoreRequest) to keep things clean and tidy. This ensures only valid appointments get through. Finally, we give everything a spin, check the database, and confirm that the right slots, durations, and details are being saved.

At the very end, we tee up the next episode, where we’ll tackle appointment collisions—so two users can’t book the same slot at the same time. Stay tuned for that!

Episode discussion

No comments, yet. Be the first!