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
07. Displaying employees and services
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
OK, so in our home template now, we want to list out all employees and services.
00:04
Eventually, we'll be able to click through to go through to checkout. Now, to save you a little bit of time, I've gone ahead and prepared the basic markup
00:11
for this page, which you'll find in the GitHub repository. Let's go ahead and paste that in. And let's head over to the browser and just take a look at what this looks like.
00:19
So we've got exactly everything that we saw in the introduction. We can click through to any of our employees to go through to their services.
00:26
Or we can choose a service and be booted directly into the checkout. Let's start with the employees. So let's go over to the Home component for our LiveWire
00:35
component. And let's just start to pass these down. So we're going to pass down the employees here. We're just going to grab all of our employees.
00:43
And you could order them if you wanted to. It doesn't really matter. OK, so back over to our Home component. Let's start to iterate here around this link.
00:51
So we'll go ahead and create out a for each loop. And we will just paste all of this directly into here. Great. And that's pretty much it.
01:01
So we should now have two employees. Let's fill out the details. So the href is going to be to the checkout or to the services page for that particular employee.
01:10
So let's just output stuff like the profile photo URL. So employee profile photo URL. And we'll do the same for the name as well. So let's just grab the employee name.
01:22
And we should have the following. Great, perfect. So we can click through to these to see their services. OK, so for the services, this is going
01:29
to be a little bit different. We are going to be displaying services here. But we're also going to be displaying services when we click through to see a professional.
01:37
So for this, we're going to go and create out a Blade component. So let's go ahead and make out a component. Let's call this service.
01:44
And we're going to use the view flag here to make sure that this is just a inline anonymous component. We don't need a class associated with this. OK, so I'm going to go ahead and say x service just
01:55
to output that. And if we head over to that service.blade.php file, we can add all of the markup for a service in here, which again is available in the GitHub
02:04
repository. So let's go ahead and paste this in. And let's just take a look at this in the browser. You can see we've just got a few placeholders here to fill in.
02:11
So if we head back over to our home component, we're just going to do exactly the same thing here. And of course, swap this out for our services. Swap this out for our service class.
02:22
And just grab all of them. And they will be available over on our home template. So now we can iterate through these services. So let's do a foreach here on our services as a service.
02:35
And let's put that service into here. And then go ahead and pass the service through as a prop so we can access it within this component. OK, so if we open up that service now,
02:46
we should just be able to output each of these items. So we've got a service title. We've got a service duration. And we've got a price as well.
02:59
And let's just dump the price out for now. It's not going to look right at the moment. But then we're going to format this with a package. So let's output the price.
03:07
And sure enough, if we head over, there we go. We've got our services with the amount of time and the price. To format these prices, we can use the Laravel money package, which allows you to do a huge amount of stuff with money.
03:19
It's based on the money PHP package. But in Laravel specifically and within Blade, this allows you to just dump out a price, a cast price, and see the formatted value.
03:31
So let's go ahead and pull this into our project and just see what we can do. So let's go and pull this in. Wait for that to finish.
03:38
And let's go down to the cast section because that's what we're going to be doing. So let's go all the way down to cast here. And we have an integer stored in the database.
03:47
So we basically just want to cast this price to a money integer cast. So if we head back over, let's go over to our service model. And let's go and add in a cast here.
04:02
And we have called this column price. And we're going to pull in. Let's just check the name of this money integer cast. Money integer cast, like so.
04:12
And that is all we need to do. There is a ton of other stuff you can do with this. You can publish the config if you want to change the currency.
04:19
It's entirely up to you, but you can read the documentation for that. So let's go over and check this out. If we give that a refresh, there we go.
04:27
We have a formatted price. Now, I added these to the database incorrectly. So let's go and just change over the price of this to get rid of one of these decimal points
04:38
or one of these zeros. And there we go. We end up with $20 and $60. Like I said, you can customize that in any way that you want.
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.