Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

Sign up to access "Build an Appointment Booking System With Livewire" right now.

Already a member? Sign in to continue

Playing

04. Creating employees and services tables

Episodes

0%

Your progress

Total: 3h 4m
Played: 0m
Remaining: 3h 4m

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

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.

Episode summary

In this episode, we dive into setting up the foundation of our app by creating the essential database tables. We'll start by creating the employees table, which includes columns for their name, a unique slug, and a profile photo URL—plus we'll add a couple of example employees to make things realistic.

Next, we move on to the services table, setting up things like the service title, a unique slug, the duration (in minutes), and the price (stored in cents to avoid rounding issues). We populate this table with a few example services.

Then comes the fun part: linking employees and services together. Not every employee can perform every service, so we'll set up a many-to-many relationship using a pivot table (employee_service). Alex can do both "hair" and "hair and beard" services, while Mabel can only do "hair"—just to show how flexible the setup is.

We finish up by defining the model relationships in Laravel, showing you how to easily access which services an employee can perform and vice versa. We also do a quick test by dumping some data in our component to confirm everything is wired up correctly. By the end of the episode, you'll have a solid data structure for employees and services, ready to build on!

Episode discussion

No comments, yet. Be the first!