Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

35. The appointment confirmation page

Episodes

0%

Your progress

Total: 3h 4m
Played: 0m
Remaining: 3h 4m

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

Transcript

00:00

So let's head over to our web routes and start to create out an appointment confirmation page.

00:05

So we are just going to say slash appointments. And then we want to grab the appointment out. We want to do that by the UUID, of course. And we'll call this appointments show.

00:18

Now, we need a component for this. So let's go and generate out a component. And we'll call this appointment show. OK, we can go ahead and switch this out in here now.

00:29

So let's switch this out for appointment show. And we're good. Let's open this up. We know that we're going to accept in an appointment

00:38

in here, which we can use to output this within this template. And let's open up the appointment show template. Now, once again, I've gone ahead and put together

00:47

a bunch of markup for you just to save a little bit of time. Let's go ahead and check this out and we'll fill it in. Before we do that, let's go ahead and redirect from checkout to this page

00:58

once we've created the appointment. So within a Livewire template, it's exactly the same thing. We're going to redirect to a specific route. That is appointment show.

01:07

And we're going to pass that appointment in. OK, we'll go over to the database, though, grab this latest appointment that I created. So let's go back over to the browser.

01:16

Let's go to appointments. And we will pull in that UUID. And there we go. This template, we've got thank you, you're booked in,

01:23

if it's actually booked. Cancel if they have canceled it using cancel appointment. We've got all of these details in here as well, including the price, when it is, all that stuff.

01:33

I'm just going to go ahead and restart npm run dev because I think that hasn't been pulled in. And yeah, there we go. So it looks a little bit better.

01:40

OK, so for the appointment show template, let's start to do this. So we'll ignore this one for now because we haven't got our canceled functionality in there

01:49

just yet. Let's start to output some of the information about the appointment employee. Let's grab the profile photo URL.

01:59

Let's do the same for the service title. So that's the appointment service title. And the duration, so again, pretty straightforward stuff that we've already seen.

02:14

Service duration and the price. Again, we just want the appointment service price. Let's check it out. And yeah, that looks good.

02:26

Employee name, we have missed. So let's do that. Appointment employee and name. Great.

02:36

So we know who we're booked with. We know the price. We know the time. We just need to output when this is.

02:41

So because we've got the start date and the end date, and again, we have cast these into date time objects, we can use Carbon to pluck out almost any information we want about these and in any format.

02:55

So what I'll do is just grab the starts at date, and I'll format this in a specific way. So let's grab the month, the day, or the day, the month, and the year.

03:05

And then we'll say at. So we'll just escape at, as in the word at. And then we'll say hours and minutes. And then we could even say until.

03:15

So we could show them when it's until. That would be helpful. And we'll do pretty much the same thing here for ends at, but we'll just grab the time.

03:23

I think that makes a lot of sense. And there we go. OK, so you can do pretty much whatever you want there. But here you can see this hair and beard is 90 minutes.

03:33

It's from 12 until 1.30. Let's go through the flow one more time just to make sure this redirects properly. So let's book in a haircut, and let's

03:42

choose this in a month's time. Choose the time slot. Enter our details. And we should be redirected over to our booking page.

Episode summary

In this episode, we build out the appointment confirmation page that users see after they've successfully booked an appointment.

We start by setting up a route for our appointment confirmation, making it accessible via a unique appointment UUID. Then, we generate a dedicated component called AppointmentShow to handle displaying all of the relevant appointment details.

You'll see how we connect the checkout process, so after someone books an appointment, they're automatically redirected to this new confirmation page. We go through pulling the latest appointment data from the database and rendering all the essential info, like who they're booked with, the service selected, price, employee details, and the exact date and time (nicely formatted using Carbon).

I also show you how to output the appointment's start and end time in a user-friendly way and talk through the various dynamic sections of the page—like the option to cancel the appointment, which we'll be handling in a later episode.

The episode wraps up with a quick flow test from booking to confirmation, making sure everything links smoothly.

If you're following along, you'll have a working, polished confirmation page by the end, ready for your users!

Episode discussion

No comments, yet. Be the first!