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
36. Building the appointment confirmation page
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
OK, so now that we're redirected over to the confirmation page, let's build this out. And it will just give us a very basic overview
00:06
of our details about booking, and then we'll implement the ability to cancel in the next episode. OK, let's go ahead and return a view in here, and we'll put that in the bookings directory,
00:16
and let's call that confirmation. Now, as part of this, we will get the appointment model through here, because we're using route model binding. So let's go ahead and pass that appointment down to the view
00:29
so we can extract all of the information about it. Remember, that appointment model has a ton of stuff on the service, the employee, and of course, we've got the dates and times as well.
00:38
So we'll be able to do this really easily. OK, let's go ahead and make that view out. So make view bookings and confirmation, and let's head over to that confirmation page.
00:52
And let's just dump a load of data out here, just so we know everything is working. So let's grab that appointment. We can head over and give it a refresh, and there we go.
01:02
Great, we've got everything that we need to get started. OK, so we're going to steal a lot of this from the checkout, of course. Feel free to design this out how you want.
01:11
I'm pretty much going to take what we have here for the here's where you're booking section, and I'm going to go ahead and put it in here. So obviously, the title is going to change to something
01:22
like, thanks, you're booked in, and we'll change that later if the appointment has been canceled. And we need to get the profile photo URL from the appointment employee, not just the employee, and the same here
01:36
for the service and the service price as well. So let's say appointment service title and appointment service price. Now, one thing that we're not going
01:45
to include that you might want to do is, as you're creating an appointment, you might want to store the price of the service in the appointments table.
01:55
The reason being is, if someone books an appointment and then the price changes, this is obviously grabbing the latest update from that service itself. It's not the end of the world, very unlikely to happen,
02:06
but you might want to store that in there. And that's pretty straightforward to do. Just create a new column and add the service price when you're booking.
02:13
OK, so let's do the same thing here again for appointment employee name. And let's just have a look at this and see what it looks like.
02:19
OK, great. So there are no stars here whatsoever. That is just because we need to change over this to our app layout.
02:27
So let's do that now. And we should be good. Great. So thanks, you're booked in.
02:31
And this is what we are booking, who it's with, and their photo. OK, so let's go and just grab this section here and create a new section inside of here
02:41
so we can space things out. And let's go ahead and set a space y on here. And let's say 12. And then down here, we can include
02:53
the date and time of the appointment just down here. Great. So we'll go ahead and grab the same header here. And we'll say when.
03:02
And then let's build out just a little container that's going to show this. So let's style this up with a margin top of 6. We'll set the background to slate 100, make it rounded,
03:14
and just add a little bit of padding. That'll be everything for now. And we basically just want to take the appointment starts at date, which is now a carbon object.
03:23
And we can format this in any way we want. So I'm going to manually format this with the month and the date and the year. And we end up with the following.
03:32
So February the 2nd, 2024. And we can say when it's until or what time it's at, which is really important. So we could either do that separately,
03:42
or we could just add it in here. So you could say at, as in escaped characters at, because you don't want them to be interpreted as the formatting. And then you could say H and I, or you could just
03:53
output them separately. Now, what we didn't do is include the time of the service. So we probably should have done that on the checkout page as well.
04:01
So just after here, what we could do is say service or appointment service and duration. And then we could add minutes just in there like this. And we could do that for the checkout page as well.
04:17
So why don't we grab this and go and update the checkout page with that information as well. So we'll take just the service title and the service duration as well.
04:29
So let's add that back in. And that's good. OK, so let's get on with the rest of this. We've got the time that it's at.
04:36
And just below this, so let's just collapse this off here. And we'll just add another container in here. And we'll just have a margin top of 6. And we're going to change this a little bit later to a form.
04:52
But let's just create out an anchor here to say cancel booking. And we'll start this up. So let's say text blue 500.
05:01
And we should be good. We can even get rid of that margin because this is going to sit with the space Y of 12. OK, there we go.
05:11
So there is our confirmation page. Of course, you can modify this as well if you want to. So you could even say when this appointment is until. So you could say something like starts at and then until.
05:25
And then you could just grab the ends at time if you wanted to, like this. And let's fix that up. And there we go.
05:33
So you could say 1020 until 1040. It's entirely up to you. You've got all of the data here. You can output this in any way that you want to.
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!