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

0%
Your progress
  • Total: 3h 4m
  • Played: 0m
  • Remaining: 3h 4m
Join or sign in to track your progress

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 episodes3 hrs 4 mins

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
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!