This episode is for members only
Sign up to access "Build an Appointment Booking System With Livewire" right now.
Get started
Already a member? Sign in to continue
Playing
35. The appointment confirmation page
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
07. Appointment confirmation
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.
36 episodes•3 hrs 4 mins•3 months 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 create an entire booking flow with Livewire, including 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 Livewire!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.