Build an Appointment Booking System With Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

22. Listing services for an employee

Episodes

0%

Your progress

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

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. Fresh project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Base layout and Tailwind setup

21. Listing employees

22. Listing services for an employee

23. Scaffolding the checkout

04. Building the availability calendar

24. Installing Alpine.js

25. Installing and using easepick

26. Disabling unavailable dates

27. Showing available slots on the calendar

28. Requesting available slots

29. Fetching available slots

30. Displaying and selecting a slot

05. Booking appointments

31. Hooking up customer appointment details

32. Disabling future steps

33. Storing an appointment

34. Handling appointment collisions

35. Redirecting to a confirmation page

36. Building the appointment confirmation page

37. Cancelling an appointment

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.

Episode summary

In this episode, we set up the functionality to list all the services offered by a specific employee. After choosing an employee, we build out a new controller called BookingEmployeeController that handles displaying that employee's services. We also tidy up our routes and views, making sure to use nice, clean URLs with slugs and keeping things organized in appropriate folders.

Once we have our controller and route set up, we loop through the services that each employee provides and display them in a well-structured list. We add details like the service title, duration (in minutes), and the price. On top of that, we add some quick styling so everything looks tidy and user-friendly. A “Back” button is added too, to make navigation smoother.

When it comes to displaying prices, we talk about formatting money properly. Normally, we’d use the Laravel Money package, but since it doesn’t support Laravel 11 yet, we whip up a simple accessor on the Service model to format the price (handling cents and decimals), so everything still looks professional. We also briefly discuss how you’d use that package in the future for nicer formatting, once it’s available.

By the end of the episode, we have a “Choose a service” page for each employee, showing their list of services with the right details and formatting. Next up, we’ll tackle hooking into the checkout flow when someone clicks a service!

Episode discussion

No comments, yet. Be the first!