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
22. Listing services for an employee
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 once we choose an employee, we want to see a list of their services. So we'll just get this listed out.
00:06
And then once we click on that service, we will then go through to the checkout. OK, let's go ahead and create out another controller to deal with this.
00:13
So let's make a controller here called Booking Employee Controller. So that will list out the services for an employee. And we'll just go ahead and hook the route up for this for now.
00:25
So I'm going to say slash bookings. And we'll say the employee in here. For route model binding, we want to use the slug that we added to the database earlier
00:36
for each of our employees. Just so we don't get the ID in there, doesn't really make sense. So I'm going to start to change these things around, actually.
00:43
So let's say bookings.employees. And let's say change this over. So Booking Employee Controller. And over in the Booking Employee Controller,
00:53
let's just use our invoke magic method. And we'll return a view in there in a second. We're also going to go ahead and just tidy up the views that we have here.
01:01
So let's create a bookings folder. And we'll put this inside of here. But let's go ahead and call this index, just so we can keep things as tidy as possible.
01:09
OK, great. So we'll swap that over in our Booking Controller so it's a little bit more in place. And we will return a view from here,
01:18
which is going to be bookings and employees. Or let's say employee because it just relates to one employee. Kind of makes sense.
01:27
OK, so let's make that view out. And then we'll get everything hooked up together. So make view bookings and employee. Great.
01:35
Let's go over to that employee.blade.php file. And we'll just leave that like this for now. Let's just make sure everything's good. And we'll hook this up now.
01:46
So let's go over to our bookings index. And let's hook this up to that root. So root is now bookings and employee. And of course, we want to go ahead and pass
02:00
through the employee that we're currently iterating through. So that gets hooked up. So there we go. We can go through to this.
02:05
And of course, we've got the slug in the URL, which is really handy. OK, so we'll take this entire structure because we can pretty much pull that over to this page here.
02:15
And let's go and say, now choose a service from. And then we'll grab the employee name. We're not passing this down yet. But we kind of know that that's going to work.
02:26
And then we're going to want to iterate over each of the services here as a service. And we'll want to output some service information there. We'll keep this overall anchor.
02:35
We'll just fill in everything else in the middle differently. OK, so this is just going to be the service title. And we should be good. We'll just pass this stuff down from the controller now.
02:48
And everything should look good. So with Root Model Binding, we get that employee passed into there explicitly. So we just have that model available now.
02:57
So we can pass that employee directly down. And then for the services, we could access these services directly within the view. But what we'll do instead is we'll say Employee Services.
03:09
We'll go ahead and order these by the price in ascending order. And then we'll grab them. So we've pretty much filled out our views. And now when we click through, we
03:19
should see each of them services and, of course, the name of the person as well. So just before we figure out what's going to go inside of these services,
03:27
let's just add a really quick Back button here just so we can navigate this a little bit better. So let's add an anchor just inside of here. And we'll use a left arrow and just say Go Back.
03:39
And let's hook this up to our bookings route. And let's go ahead and start this up really quickly. We'll set the text to either small or extra small. And let's say just text Blue 500.
03:52
OK, let's go over. And that looks OK. Great. So just on here, let's add a margin top of 6.
03:58
And well, let's bomb that down. And we're good. Great, so we can choose a professional. And we can see each of the services
04:04
that our professional provides. But let's go ahead and just style up these individual services. And then we're going to talk about money formatting.
04:12
OK, so over on our employee page here, what do we need to show? Well, we need to show the title of the service. We are going to need to show the duration as well. So let's go ahead and output the service duration.
04:26
And let's go ahead and output the price as well. So we've got three things in there. Let's just very quickly style these up. So we'll set the text here to small, font to medium.
04:37
And we'll set the text to a site of, let's say, 600. We'll do pretty much the same thing for this. But we will mute the text slightly. And we'll add a margin top of 1.
04:49
And there we go. And that's the minutes. Now, we could pluralize this. But our services are pretty much always
04:55
going to be more than one minute. So we won't bother doing that. And the price, let's style this up slightly differently. So we'll set the text to extra small.
05:03
We will set a margin on the top slightly bigger. Set the text to a slate gray 600. And let's go ahead and give this a background of slate 200 and make it rounded, just so it's
05:16
distinguished from everything else so it looks like that. And then we can just give it a little bit of padding. So we'll set the padding on the y-axis to 0.5. And we'll set the padding on the x-axis to 1.5.
05:27
And there we go. We end up with the price. So that's looking OK. Now, let's talk about money.
05:33
I'm currently using Laravel 11. Usually what I would do is I'd go ahead and pull in the Laravel money package to format the price really nicely.
05:41
I am going to show you how to do that. But at the time of recording, there is no support for Laravel 11 for this package. So we're going to come up with a slightly different solution.
05:50
Remember, we're not dealing with payments here. So it doesn't really matter too much in terms of this. But we want this to be formatted properly. And we don't want the money situation to get out of hand
05:59
and not format properly. So usually, we would use Laravel money. And I'll show you how to do that later. But what we'll do for now is we'll just
06:07
come over to the service model. And we will add a very simple accessor to this. So let's set this as a protected method here. And let's call this price.
06:18
And that's going to return to us an attribute. So we're going to return in here attribute and make. And inside of here, what we can do is provide the getter for this.
06:30
So we'll just do this as an inline closure here. We know that this is going to be an integer. And we'll just call that value or price, whatever we want to do.
06:38
Now, from this, what we can do is just return the price. And let's just pull the correct namespace in for our attribute here, first of all, if that's not correct. And we'll get rid of this and get rid of this.
06:52
That's just the standard PHP attribute. Now, let's just add on to here a dollar sign or whichever currency you're working in. See what happens now when we access this price.
07:02
You can see that it changes over. So what we can do now is just format this in a way that we would expect. So we basically want this to be divided by 100
07:10
because we're working in cents. Now, that's not going to look great always if you have any decimal values. So what we're going to do is we're going to say number
07:19
format, wrap this entire thing, and limit this to two decimal places. So we basically end up with this. Now, it's not the ideal solution.
07:26
Ideally, we'd pull this package in. And I'm going to show you how to do that now. So we can't install it because there's no Laravel 11 support just yet.
07:33
But once we have installed it, what you would do is you would go down, publish your configuration. That is where you can control your currencies, your default currency, and all that kind of stuff.
07:43
But what you would do is come down to the costs section. And you would use the money integer cost. So if you try and install this package and it works nicely, grab this money integer cost.
07:55
Come over to your service model. Go ahead and set out costs in here. And basically, just cost the price to this class. And you're done.
08:05
And when you access the price, just dump the price out in your blade template. It will automatically format this for you. And we won't have to work around it like this.
08:12
But like I said, I'm using Laravel 11. And there's no support for that package just yet. But I'm sure it's just around the corner. OK, so now that we've got our price done
08:20
and we've got all of our listings out, we are good to go. We can now move over to scaffold out the checkout. So when we click on one of these services, we get all of that good stuff to make a booking.
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!