Build an Appointment Booking System With Laravel
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
33. Storing an appointment

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
9m 48s
0%
02. Fresh project with Pest
2m 14s
0%
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
20. Base layout and Tailwind setup
5m 5s
0%
21. Listing employees
5m 42s
0%
22. Listing services for an employee
8m 30s
0%
23. Scaffolding the checkout
8m
0%
04. Building the availability calendar
24. Installing Alpine.js
3m 15s
0%
25. Installing and using easepick
7m 31s
0%
26. Disabling unavailable dates
8m 43s
0%
27. Showing available slots on the calendar
9m 54s
0%
28. Requesting available slots
4m 41s
0%
29. Fetching available slots
9m 36s
0%
30. Displaying and selecting a slot
5m 46s
0%
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 now we're going to create a really simple controller with some basic validation that takes all of this data
00:05
that we have over on our checkout up here, submits it through, and creates an appointment. So let's start with the route again. So let's create out a post route this time.
00:15
So we're going through and storing this. And let's call this appointments. And let's go and say we're going to create an appointment controller out in here.
00:25
And of course, we can give this a name as appointments. Great. OK, so let's create this appointment controller out. So phpArtisan, make controller, appointment controller.
00:37
And let's go and just pull that in. OK, so let's do the very bare minimum first of all. We won't worry about validation. Into this, we are going to need the employee
00:48
ID, the service ID, the time, and the name and the email address, and the date, of course. So how are we going to do this? Well, we're going to just send all of this data over like this
01:01
down to the controller. So we're not going to use route model binding here. We're just going to send this directly through the request like so.
01:12
OK, great. So what I'm going to do just to test this out, I'm going to go ahead and log out from our request all the data that we need just to make sure
01:20
when we submit this, it's all coming through. So we know that we need the employee. We need the service. We need, let's just check out, check out, date, time, name,
01:32
and email. So let's go and fill all these in. Date, time, name, and email. So let's go over to our Laravel log and just clear that out.
01:42
And let's make a request to send this down. And then we'll fill it in. So over on the checkout, we can make this entire thing a form. So I'm just going to change over the entire element to a form.
01:52
And then with Alpine, we can attach an X on submit that prevent to call a method. So we're just going to call a submit method, which we're going to define out inside of X data.
02:03
So in here, let's create out a submit method. Let's just console log for now and say submit just to make sure everything is working. Bring up our console.
02:13
And I'm going to go ahead and choose a time. Enter my details here. And I'm going to go ahead and hit make booking. And there we go.
02:23
So now inside of here, we can use Axios to make a request down to that route. So we'll say Axios post. We know we want to post down to that appointment route.
02:36
And the data we want to send down is just the entire form. That's why we put it in its own object. We can just pass that entire object down now. And then we'll get a response back from this.
02:47
And we can do something with that. And later on, we're going to catch errors like appointment conflicts. And we're going to show them on the page.
02:53
So let's just console log out here. Response data for now. And let's see what we get. So we'll keep an eye on our Laravel log.
03:00
And we should see all of this data being sent down. OK, so I'm just going to choose today at 10 o'clock. Enter my information. I'm going to hit make booking.
03:10
And that's done. So if we come over to our log, employee ID, service IDs in there, the date that we want to book, the time slot that we want to book for,
03:19
and the name of the email all in there. So now over in our controller with all of this data. So we can grab this and cut it out and paste it back in. We just want to create an appointment.
03:30
So again, we're not validating at the moment. We'll cover that in just a second. But we can say appointment and create. And we can't just paste this down because, of course,
03:39
we've got an employee ID, a service ID. All of this stuff needs to match up. So there's a couple of ways that we could do this. Of course, what we could do is get rid of using request only.
03:49
And we could just pass an array in here and put all of this data in here. But let's just remind ourselves of our appointments table. It's not that complicated.
03:57
But it's a little bit different from a time slot. We don't book this and insert it into our appointments table as a starts and ends. So we need to figure out when the start of this appointment
04:07
is, which we know, and when the end of this appointment is. To figure out the end date for the appointment, we need to know the service duration, which we're not sending down.
04:16
So what seemed like it would be quite simple has actually become a little bit more complicated. So what we're going to do instead is we are going to take this.
04:25
We could just pass an array down in there, remember, and fill all this information in. We're going to convert our request over to a form request. We're going to merge in data into the request that's
04:35
more appropriate. And then we can bring this line back and just insert the employee ID and the service ID later. So let's just take a look at what that looks like.
04:44
So let's go and create out a form request here. So let's make a request called appointment request. And pretty much a form request is just an extension of the standard request, which
04:55
allows you to add the validation rules directly into it if you've not come across them before. So we're going to go ahead and swap that out for the normal request.
05:03
And it's going to work in exactly the same way. So opening up this appointment request, we've got the ability to authorize this, which we're going to authorize for everyone.
05:12
There's no rules around that. And we can set some of these rules in here as well. So some of these rules are pretty straightforward. We are sending down a date in our request
05:21
so we can validate this. That's pretty straightforward. We know that that's required. And it needs to be a date.
05:27
So really easy to validate that kind of stuff. The same with the time as well. That's required. And it also needs to be a time.
05:34
But we don't have a time rule in Larafeld because technically a time is part of a date. But what we can do is we can say date format. And then we can choose the format that we expect this in.
05:44
So we know that the format for this is H and I for the hours and the minutes. So we'll just validate the other basic stuff. And then we'll go into this more complex stuff.
05:54
The name of the customer is required. And the email address of the customer is required. And it needs to be an email. And of course, if you're adding more fields in there,
06:04
you want to add them in there or change around the validation rules to whatever you need. So we still need to validate the employee ID. And that is required.
06:16
Now, what I'm actually going to do is change this around in our checkout to have this set to employee ID and service ID just so we're working with the same names. So the employee ID is required.
06:30
The service ID is required. And these need to exist in the database. So let's go ahead and use the rule class within Laravel under validation.
06:39
And let's say exists within the employee table. And we can just pass the namespace for the employee model here. And it needs to exist under the ID column.
06:48
So we can do the same thing for the service and just switch out the class that we're checking. So now we are validating the employee ID, making sure that exists in the database.
06:59
We're validating the service, making sure that exists in the database, and all this other basic data. So let's go ahead and merge in the starts at
07:06
and the ends at date. So down here, what we can do in our appointment controller is say request only and then say something like starts at, ends at.
07:16
That would be more convenient and keep our controllers a bit tidier. So over in the appointment request, we've got a method that we can add in here
07:23
called prepare for validation. So let's add prepare for validation. And what we can do in here is we can merge specific data in. So let's just have a look at that.
07:32
I'm going to merge in this array, starts at. And I'm just going to pick any number just for now. And I'm going to say ends at. And let's say this ends at 10.30.
07:45
And we'll make this in the right format. OK, so we've merged this in before we've started to validate. So what we can do with this, if we just head over
07:52
to our Laravel log and clear that out, is we can go over to our appointment controller and just dump this out again. So a little bit of back and forth, but that's fine.
08:00
We want this to be as clean as possible. So let's go and get rid of this line. And let's say this is the data we want to insert. We want to insert employee ID.
08:09
We want to insert service ID. We don't need to insert the date because that doesn't exist in here. This will be starts at, which will include the date,
08:18
ends at, which will include the date, and name and email. OK, so let's go and just log this out and see what we get. And we should get 10 and 10.30 for these two values. OK, so I'm going to go and log these instead.
08:32
And let's see what we get when we try and make a booking. OK, so enter our details in here and hit Make Booking. And let's go over to our Laravel log. And there we go, great.
08:43
So now we've got a bunch of data that we can just directly insert into our appointments table, including the starts at and ends at, which we will need to calculate. Now, to calculate the ends at date,
08:55
we need to know the service that we're working with. Now, we have the service ID, but that's where we can do this inside of our appointment request. We can look the service up.
09:05
So we'll look that service up, and then we'll increment the ends date based on the time of the appointment. So let's look the service up first of all. We're doing an extra query in here,
09:14
but it's not going to be too slow. So we're going to say service, find this service ID, like so. So we've got the service now. The starts at is going to be the time and the date that we chose.
09:28
So we need to include the date here. So the first thing that we're going to do is parse the date that we get in. So it will be this date. This refers to the request itself.
09:38
So we're just getting this date, which represents what we've parsed in here. And once we've parsed it, we can set the time from a time string. And that's going to be this time. So let's go and just pull carbon into here.
09:54
Bear in mind that this happens before validation. So we might switch this out to the controller a little bit later, and I'll show you how to do that in case you don't want to go this route. But let's go ahead and carry on with this.
10:05
So what we want to do now for the end date is we want to add the service duration onto this start date. So we could copy and paste this down, or we could go ahead and set this like this, and then we can down here take the date, copy it,
10:23
and then we could add the amount of minutes for that appointment service time. So grab the service duration and add it on to the start date. So that should work nicely.
10:33
That should give us the start time based on what the user has chosen, and it will automatically add on the minutes of the service for the end date of the appointment. And of course, what you could then go ahead and do
10:44
is add in a 10-minute break between appointments if you wanted to. So it's entirely up to you. OK, so now that we've done that, let's just, again, log this data out like we're doing in our appointment controller
10:55
and see what we get. So let's clear our log out. Go ahead and make another booking. So let's choose something different.
11:01
Let's choose 1130, so that should take us up to 12. And let's go ahead and enter our details, make a booking, and there we go. OK, so yeah, we've got our employee staff.
11:12
Starts at is now 1130, which is what we chose. Ends at is 12 o'clock. Great, so this is successfully adding on the service duration so we know when the appointment starts and finishes,
11:25
and we've got our name and email. OK, so now that we've done that, this is going to be incredibly easy because we can just take this and we can put it directly into our appointment creation.
11:37
So let's go ahead and uncomment this, pop that directly into there, and we should be good. Let's just make sure that we set our guarded to an empty array so all this can just be inserted, and that is pretty much it.
11:48
That should create an appointment now. So if we come over to our appointments table, it's empty at the moment. Let's go ahead and create an appointment,
11:54
and then I'll show you an alternative to this if you want to validate the time first. So let's choose 1030. That should take us up to 11.
12:02
And let's go ahead and enter our details, hit Make Booking, and there we go. We start at 1030, we finish at 11. The correct service, an employer in there,
12:11
and all of the other details are in there as well. As well as that automatically generated UUID that we added to our appointment model earlier, we remember we did this, so that is all working nicely.
12:22
Now, let's go back to our appointment request. And remember, we're merging this in, which could be a good idea, but what we're doing is we're setting the time of the start from the time that's been sent through the request from the front end.
12:36
And of course, this is being put into here before we validate this. Now, there's a couple of options. We could validate the starts and ends at date. Actually, I think the best method of doing this
12:46
is not to merge this into the request, and it's to do this at the control level. I think this makes more sense. So let's go ahead and refactor this and change it around.
12:55
OK, so let's go and just take these two items, because we're going to need them, and we can actually get rid of the service and prepare for validation altogether. So completely changing the way that we do this, but that's fine.
13:05
We want to make sure that this works nicely. And the starts and ends that now no longer come through from the request. So we can get rid of them from there, but what we can do is we can just add on to this array.
13:15
So we can just do plus and then add on another array in here and push the start date and end date in there. So we can go ahead and pull in carbon into here, and that's going to work nicely.
13:25
This date now becomes the request date, which has been validated. This time now becomes the request time, which has also been validated, so we know that this is good at this point. And the service duration is the only thing
13:37
we're going to need to look up again. So we just need to add in a line here to look that service up. And we could even use find or fail here, but since we've already validated the service ID,
13:48
it doesn't make too much sense. And we're just going to go ahead and pass in this service ID, and there we go. So we just move this over, and that should be request.
13:58
We just move this over to the control level, and I think this makes more sense. OK, so now that we've done this, let's go ahead and just check the works one more time, and then we're good to move on.
14:07
OK, so we've got an appointment in there already. Interestingly, obviously, when we refresh this, we're not going to see that 10.30 appointment available. We've got 10, and we've got 11, but of course, this is changing.
14:18
The slot count's changed. Everything's good. So let's book at 11, and let's enter our details. And let's go ahead and hit Make Booking, and sure enough,
14:29
that should be in there at 11, 11.30, with all of the information that we need. Great. OK, that's it.
14:35
We are storing appointments. We'll do a couple of other things around this, like checking for collisions. So let's cover that in the next episode.

Episode summary

In this episode, we get hands-on and actually build out the part of our app that stores new appointments!

Here's how it goes:

  • We start by setting up a new POST route and an AppointmentController to handle appointment submissions from our frontend checkout form.
  • We go step-by-step wiring up the form to submit with Alpine.js and Axios, making sure all the relevant data (like employee ID, service ID, date, time, customer name, and email) gets sent correctly to the backend.
  • After testing the data flow, we create a Laravel Form Request class to handle validation. This ensures things like dates are real dates, emails are valid, and the provided employee/service IDs actually exist in the database.
  • The tricky part is making sure the appointment knows when it starts and when it ends. To figure out the end time, we use the selected service’s duration and add that onto the chosen date and time, using Carbon for easy date manipulation.
  • We try a couple of different approaches for where to do this calculation—first inside the Form Request, then realize it makes more sense to move it to the controller after validation. This way, our code stays clean and maintainable.
  • Finally, we insert the appointment into the database. We double-check everything works as expected—appointments are saved, unavailable slots disappear from the booking form, and everything's hooked up nicely.

By the end, we've got a fully working appointment booking flow, including all the validation and time calculations. Next up, we'll handle more advanced stuff, like avoiding overlapping appointments!

Episode discussion

No comments, yet. Be the first!