Build an Appointment Booking System With Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

36. Building the appointment confirmation page

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

02. Fresh 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. Base layout and Tailwind setup

21. Listing employees

22. Listing services for an employee

23. Scaffolding the checkout

04. Building the availability calendar

24. Installing Alpine.js

25. Installing and using easepick

26. Disabling unavailable dates

27. Showing available slots on the calendar

28. Requesting available slots

29. Fetching available slots

30. Displaying and selecting a slot

05. Booking appointments

31. Hooking up customer appointment details

32. Disabling future steps

33. Storing an appointment

34. Handling appointment collisions

35. Redirecting to a confirmation page

36. Building the appointment confirmation page

37. Cancelling an appointment

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.

Episode summary

In this episode, we're building out the appointment confirmation page that users see right after they've booked. We start by setting up a new view for the confirmation and making sure it gets passed the full appointment model — thanks to route model binding, that's easy! This means we have access to all the important details, like the service they've booked, who their appointment is with, and the date and time.

The first thing we do is just dump the data out on the page to check everything's working as expected. Once that's confirmed, we start borrowing some layout and info from the checkout page to make things look nice and familiar. We change the title to something like “Thanks, you’re booked in”, and make sure we’re displaying all the right info: the service name and price, the employee (with profile photo!), and of course the date and time.

For the time, we format it to be clear for the user, and we also talk about possible improvements—like storing the price directly on the appointment in case the price of the service changes later. We also realize it's a good idea to display the duration of the appointment (in minutes), and even update the checkout page with that info.

Finally, we add a spot for users to "Cancel Booking"—although the actual cancel feature will be built in the next episode. For now, it's just a link, ready for more functionality later. And as always, you can tweak the look and feel of this page as much as you want!

That’s it for the confirmation page! Next up, we’ll dive into making bookings cancellable.

Episode discussion

No comments, yet. Be the first!