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
23. Scaffolding the checkout
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 let's finally scaffold the checkout.
00:02
So when we click on either of these services, we go through with a confirmation of what we're booking. And then we'll start to build out each section as we go.
00:10
So in the next section of this course, we're going to look at that availability calendar with all of that stuff in. OK, so let's go ahead and, of course,
00:18
just create a controller for this first of all. So let's make out a checkout controller, no surprise. And let's go ahead and define the route just out in here. So with this, we want this to be checkout.
00:30
And then we want the employee that we are booking. And then we want the service that we're booking as well. So of course, we need to know that information on the checkout.
00:39
We're going to have to calculate our availability to show in the calendar and all that stuff. So we're going to need both of them in there ready to go. And let's go and just reference the checkout controller
00:50
in here. And of course, we'll just give this a name of checkout. Great. OK, so over in the checkout controller,
00:56
let's just go ahead and add in our invoke in here. And then we'll just go ahead and hook this up. So let's go over to our employee page just here. This will now link over to our checkout.
01:08
So let's say route checkout. And we need to pass in our employee and the service that they're booking. So what we should now be able to do
01:19
is click on here and see that in the URL. Now, at the moment, what we're not doing within the checkout controller is checking if a employee that's being passed in, so we've got an employee in here,
01:31
can actually perform this service. So we're not explicitly checking that. And our availability stuff doesn't check that because it's not really the responsibility
01:40
of the availability checker to compare the services to the employees. So let's add a really simple if statement in here just to cancel this off if that is the case.
01:50
So what we can do really, really easily is just say employee services contains. And we can just pass that service directly in. So contains is just going to make sure
02:00
that an instance of this service is within the services that we have. And if it doesn't contain that, we can go ahead and say abort with, say, a 404.
02:10
Now, I'll show you an easier way to do this in a minute. But let's just check that it's working nicely. OK, so if we choose beard for Alex, that works. Hair for Alex, that works.
02:19
But if we choose beard and then we switch this over to Mabel, sure enough, we get a 404. Of course, you can choose another status code if you want. It's entirely up to you.
02:28
Now, with these kind of things, there are some nice Laravel helpers for this. So I like to use abort if or abort unless. So what we could do is we could say abort if this is not
02:39
in here, choose the status code. That's going to work in exactly the same way. So if we swap that over to Mabel, you can see we get a 404. Or you can use abort unless this contains.
02:50
So it's entirely up to you how you want this to read. Obviously, it just has the opposite effect. So we've checked that nicely. Let's go ahead and return a view and start to scaffold this out.
03:00
So we'll just call this checkout. So I'm going to let's put this in a bookings directory. We might as well just put everything in there. And let's see what we need to pass through.
03:11
Well, we want to know who we're booking with. So we'll just pass the employee down. And we'll do the same thing for the service as well. Great, so just two really simple things.
03:19
And this is where we're going to start to add up here all our availability checks that we can pass down, build up that calendar, and all that good stuff. OK, let's go ahead and create this view out.
03:29
So let's say php artisan make view bookings and checkout. And let's go and scaffold this out. So again, let's pull this over from any of these, put this in here, and let's get rid of go back.
03:48
Although you could add that if you wanted to. I'm just going to keep this simple. And let's say here's what you're booking. And then underneath it, we're not going to have a grid.
03:58
We're going to have a completely separate section with the details of what we're booking. That will do for now. Let's go over and check this out.
04:05
And there we go. OK, so let's just build this top part here. So inside of here, I want the employee image to be somewhere around here.
04:14
So let's just add the image in there for now. And then next to that, I want the employee name or the service. And then underneath that, or next to that, maybe the price. And then underneath this, the employee names.
04:28
That obviously is just not going to look great at the moment. But let's figure this out. So we'll start out with a flex container here. That kind of makes sense.
04:37
And we'll go ahead and set a margin on the top so it sits away from everything. Let's go and set the space on the x-axis to 3 here. And we'll set the background to slate 100.
04:49
We'll set rounded large, so kind of on with our theme. We'll set the padding to 4. So we've got a nice container for this now. OK, so for the image, let's just go ahead and style this up.
04:58
And it's going to look exactly like it did before. So let's say size 14, I think we chose before. And we'll set a background of slate 100 so we can see that in there now that we don't have that.
05:08
And let's just give that a refresh. There we go. Great, so we've got that padding in there now. OK, so for this section, let's just really roughly go ahead
05:17
and scaffold this one out. So we've got a width full in here. Let's set the service and the price first of all. So let's wrap that in a div.
05:27
And we're going to set this as a flex and justify between. So we have the service here. And then we have the price next to that wrapped in a div. And that's going to look like this.
05:40
So we've got the service name here, price over here, and then the employee name will sit nicely underneath that. OK, so let's just fill in the service stuff.
05:48
So this is going to be the service title, the price. We already know. We can just grab the accessor that we built earlier. Or if you're using the Laravel money package,
05:57
that will format that for you. And the employee name, let's just put this in a div down here. And we'll say employee name. And we should be good.
06:07
Great, so let's just finish up with some of the styling. And then we are good to go. OK, so I'm just going to set the font to semi-bold for the service title.
06:16
For the price, let's go ahead and do text of small. And then for the employee name, let's set the text to small as well. OK, I think that looks OK.
06:26
Let's just grab the image for the employee profile photo URL. Again, we'll get rid of the alt, but good idea to add that in there. And yeah, I think that looks OK.
06:37
We've got rounded large, size 14. There we go. So now underneath here is going to be the calendar stuff. So let's just really quickly have a look at this.
06:46
So what I'm going to do is put this inside of a div. Each of these sections are going to be kind of independent from each other. And then on the outer, we can set a space on the y-axis
06:55
just to space everything out. Now, that doesn't look like anything at the moment. But if we just grab this and pull it down, and we get rid of this container or everything
07:03
within this container, so let's pull all of this out of here and add this as the calendar, we can say something like 1 when 4. So this is the kind of first step with the calendar in it.
07:20
And then each of the steps underneath this will obviously contain the slots. So we'll show the slots as step 2. And then step 3 will be entering the details.
07:29
OK, so I'm just going to reduce the size of these to large. And let's increase the spacing here a little bit. We'll double it, actually. And there we go.
07:37
Great. OK, so we can do the whole flow now. This is really basic stuff. But if you haven't worked with Laravel,
07:42
hopefully this helps you navigate each of these steps. And now we can choose any of these services, see it here, see the price. We just need to start working on the availability calendar,
07:53
which is the fun part. So now that we've done this, let's hop over to the next section and get our availability calendar set up and working.
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!