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
04. Creating employees and services tables
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
In this section, we're going to work on setting up everything that we need in the database. And this is going to give us a really good idea
00:05
how this fits together before we build out the core functionality. So let's start with the easiest, and that is Employees. So we're going to go ahead and make out a model.
00:15
And of course, that is going to be called Employee. And we use the M flag to create a migration alongside of that as well. OK, let's open up the Create Employees table.
00:24
And this is going to be incredibly straightforward. We just need any metadata about the employee. So we've got a name in here. We'll also include a slug so we can show this within the URLs.
00:35
And we're going to want that to be unique. And then we're going to have a profile photo URL as well. So let's go and create another string in here with a profile photo URL.
00:46
And we'll go ahead and fill in some fake photos for that as well. OK, so we've done this. Let's go ahead and run our migrations quickly.
00:53
And yeah, we've got an Employees table. So let's head over and open up our Employees table. And let's add a row in here for a couple of employees. So let's start with Alex.
01:02
I've got an image here just from my notes that I'm going to put in here. And we can fill in the created and updated updates. It doesn't really matter too much.
01:11
Let's duplicate this down. And let's just create another one in here so we have something to play with. And then we'll just change the image ID over to 5 here.
01:20
And we're done. Great, so we've got two employees. OK, so next up are going to be the services. And then we'll go ahead and link the two things together.
01:28
So again, let's make out a model. And this time, it's going to be a service, again, with a migration. Let's go and open up the Create Services table.
01:36
And again, this is going to be pretty straightforward. But we've got a couple of additional things as well. So we're starting out. And we'll just include a title for the service.
01:44
Again, we'll also include a slug here. And we'll make this unique. We then want a integer. So let's go for an unsigned integer.
01:52
And this is going to be the duration of the service. So this is going to be in minutes. So 20 would be 20 minutes. And then we're not going to do a payment checkout.
02:03
But we are going to have a price in here. Now, the reason I'm storing this as an integer is we're going to store this in cents. So for example, we might have 1,000 cents,
02:13
which would be 10 pounds or dollars, whichever currency you're working in. OK, that's just about it. Let's go ahead and run our migrations again.
02:19
And yeah, we're done. So let's just fill this data in now so we've got something to play around with. So let's head over to our services
02:26
and just create two of these out. So the first one I'm going to call hair. I'm going to set a duration of 60. Doesn't really matter what this is.
02:33
And let's set this to 20,000 here. Again, doesn't really matter what the price and stuff is. And then we'll create another one, hair and beard. It doesn't really matter.
02:43
Again, we can create any services we need. And we'll set the duration a little bit further. And of course, we'll adjust the price just up a little bit as well.
02:51
OK, so there we go. We've got a couple of services. And now what we want to do is link these two employees. Not every employee will be able to perform every service.
03:01
And that's really important. So what we're going to do is say, well, Alex can do hair and beard and hair. Mabel can only do hair or can only do hair and beard.
03:09
So we just want to be able to link these up. We do that using a pivot table. So let's create out a custom migration in here. So let's make a migration.
03:18
And we're going to create an employee underscore service table. Now, this is in the exact order that we need it. E comes before S in the alphabet.
03:26
So we want to do it in this order to take advantage of Laravel's conventions. You don't need to do this. But let's go ahead and roll with the conventions.
03:34
Always a good idea. OK, so let's open up the Create Employee Service Table Migration. And all we need to do is now just link these up
03:42
to the two things. So let's go and say table foreign ID. And that's going to be the employee ID. And that's constrained.
03:50
And then we'll do the same thing here for the service ID. So basically, when it comes down to this, we can insert a link between these two things. And then we'll go ahead and set up our models.
03:59
And we'll just dump a couple of things just to see if this is all working. OK, let's go ahead and run our migrations again. And let's just hook this up in the database
04:06
before we start to play around. So Employee Service is going to be as straightforward as saying, well, Alex can perform service one. For example, we don't need a created and updated
04:15
that day here. Alex can also perform service two, so hair and beard. But we're only going to say that Mabel can perform service one, which is hair.
04:25
So there we go. We have the links now between which employees can perform which services. OK, so now that we've got the basic employees and services
04:35
set up, let's head over to the models so we can actually set up the relationships here. So an employee can perform multiple services. So let's create out a services relationship in here.
04:44
And we're going to say return this belongs to many. And we're going to use that service model. So we're done. That means that we can now access the services
04:56
that Alex or any of the other employees can perform. And likewise, we have an opposite relationship here. Over on our service model, we need to know which employees are part of a particular service
05:12
or which employees can do this particular service. And we just want to swap the model over there. So we'll get to stuff like the price a little bit later because we're going to need to format this.
05:21
But let's just play around with this inside of our Livewire component just to see that everything's working. So I'm going to come over to the base home component here.
05:29
And I'm just going to die dump a couple of things out. So let's go ahead and just grab all of our services. So let's just say service and get. And of course, head over to the browser.
05:39
And yeah, sure enough, we get the two services just in there. What we can also do is we can say employee. And let's go ahead and find employee one
05:48
and then access the services that they can perform. So that is Alex. And if we just give that a refresh, yeah, sure enough, Alex can perform two of these services.
05:57
And yeah, if we go over and change this to Mabel and come back over, she can only perform the one service. So we know that these relationships are set up properly.
06:06
And we can access them. So there we go. We've got employees and services and the relationship between them set up now.
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.