This episode is for members only
Sign up to access "Build an Appointment Booking System With Inertia" right now.
Get started
Already a member? Sign in to continue
Playing
20. Employee and service resources
Episodes
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
25. Rendering the datepicker
6m 51s
0%
26. Fetching availability
9m 16s
0%
27. Disabling unavailable dates
6m 25s
0%
28. Showing the first available date
2m 4s
0%
29. Fetching future availability
10m 4s
0%
30. Showing slot count on the calendar
9m 1s
0%
31. Fixing up core availability in the past
2m 34s
0%
32. Showing available slots
5m 49s
0%
05. Booking appointments
Transcript
00:00
OK, in this section, we're going to focus on building out the booking UI that we saw in the introduction. We're not going to go through checkout at the moment, but we'll have everything in place to get started.
00:09
So the first thing that we want to do is just clear everything out of our routes here. We don't need anything in here. Let's just go ahead and leave in our route facade so we can get started.
00:20
And we're going to go ahead and create our home controller in here, which will just be responsible for listing the employees and all of the services. So let's get started with a controller in here.
00:32
And of course, we're going to go ahead and call that home controller. Let's define the route out here really quickly. So we just want this to be on the home page. Reference that home controller.
00:42
And of course, we'll give this a name of home. OK, over in our home controller, let's go in and create a invoke magic method in here. And we're going to go ahead and return using inertia
00:54
and render a view file called home. And then we'll just start to parse everything down that we need to this. So let's go over to our view section here under JS, under pages. And let's go ahead and create out a home.view file.
01:09
Just while we're here, let's get rid of the other pages that we're not going to need as well. Great. And we could get rid of the orphan profile ones,
01:17
but you might want to keep them in. So let's go and create out a template in here. We'll just write home, and we'll just head over to the browser, give this a refresh, and make sure this is working.
01:27
Now, it's not at the moment, so let's just go ahead and make sure we're running npm run dev. And once we've done that, we should see our home page. Great.
01:35
OK, so the goal for this episode is just to parse the data down, but in a nice structure. We don't just want to parse the models or a collection of all of the employee models and services.
01:44
We want these to be in a nice structure so we can pluck out just the data we need. So to do this, let's go ahead and first of all, just parse this data down and just see what it looks like. So normally, what we would do is just say employee,
01:59
and we might go ahead and order this by a specific column. Might order that by name in ascending order, and we'd probably say something like get. We'd do a similar thing for the services as well that we want to output.
02:11
So let's go ahead and do that, but we won't order them. We'll just go ahead and grab them. Now, if we do this over on the home page, let's bring in our script section at the top, and we're going to use script setup for this.
02:24
And let's define out our props in here. So we've got a bunch of employees, and that's going to be an array data type, and the same for our services as well. So if we just dump them out on the page and take a look at what we've got.
02:38
So let's pull in our employees, and let's pull in our services just next to that. You'll see that we just have all of the data within our database. Now, we don't necessarily want to do that because we might want to format the dates, and we might
02:53
want to not include certain columns. So to do this, what we're going to do is use an API resource, which is a common way to structure data with API requests. And since we're working with inertia and view,
03:06
it kind of makes sense to send these down like API data because it kind of is like building a client that consumes an API. So we'll get started with our first resource in here, and that is going to be our employee resource.
03:22
So let's create that out with Artisan, and let's open up our employee resource. And basically, we just want to return an array in here with all of the data and its structure. So for example, we might want to output the ID for an employee.
03:37
We would just reference it as this, which will go ahead and defer to the resource that we've passed into this resource. Now, let's go over to our home controller and swap this out to actually use this resource now.
03:49
So I'm just going to cut this out, and I'm going to go ahead and bring that employee resource in. And I'm going to use the collection method and then pass all of that data into there.
03:59
Now what's going to happen is this collection will get structured by this for each of them records. So if we go over to our home page and have a look and just get rid of services, you'll see that we just get a bunch of data with only the things
04:14
that we've specified, so that's really, really helpful. Now, what we want to do is kind of get rid of this data wrapper. So to do that, we're going to come over to our app service provider. And under our boot method, we're going to go ahead and reference
04:27
our JSON resource class and say without wrapping. And what that will do is just globally disable that data wrapping, and you'll see that we just get a pure array here of these objects, which is much more convenient than referencing data
04:40
everywhere. OK, so now that we've done that, let's just quickly do the same for our service, and then we'll fill in all the data that we want to see.
04:48
So let's go and create another resource for our service, and we're going to call that service resource. We will go over to our service resource and just get rid of this, which by default would just output all of that data.
05:01
And again, we'll just output the ID in here, which we probably don't need, but we'll just leave it in as an example. And we'll come back over to our home controller and do exactly the same for what we did here.
05:12
So again, service resource and collection, because we have a collection of items, and we're just going to pass all of them services in. And then sure enough, if we come over to our home page,
05:24
swap this over for our services, again, we just get a list of our services and their IDs. OK, great, so let's focus on our employee resource first and all of the data that we need to add to this.
05:35
So pretty straightforward, the employees have a name, so we're just going to reference this name. We'll do the same for the slug as well, which we'll need to reference in our URLs.
05:47
And we'll grab the profile photo URL and output that as well. So really, really straightforward. We now just have the basic data we need. And of course, you can add more to that if you need to.
05:59
OK, so over to our service resource, let's go ahead and add in for this. And I'll just swap this over to services, just so we can see what we're doing.
06:07
And let's add in the data for this. So for this, we'll go ahead and add in a title. So the title of the service, again, the slug of the service, so we can reference it
06:18
within our routes. We'll output the duration as well, which we know is just a basic integer. And we'll also update the output of the price as well.
06:29
Now, when we do this, the price is still going to be in cents. Now, because we're working with Laravel 11, usually I would pull in the Laravel money package, which
06:38
uses PHP money behind the scenes. But at the moment, at least, there's no support for Laravel 11. So what we'll do just while we're here
06:45
is we'll create a very basic accessor for this price to transform it into a dollar value with a formatted decimal point that we can use inside of our views.
06:56
Now, to do this, what we're going to do is head over to our service model. And we can just add in this accessor in here. So all we need to do, and I'm actually
07:04
going to bump this up here, is go ahead and create out a protected price function in here or method in here. This is going to return an attribute. And this is going to come from illuminate database eloquent
07:17
attribute. From here, what we can do is return that attribute class. So let's pull that in again and say make. And then we can define the getter for this value.
07:27
Now, we can either do a long closure or a shorthand closure. It makes sense to do a short closure here. For now, let's just take in the value of this. So that's going to be the price itself.
07:37
And we know that that's an integer. And let's just return price and maybe just format on the dollar sign onto the start of that. Now, that's not going to make sense at the moment.
07:46
But we'll at least see this working. And then we can format this price. So now that we have created this, whenever this is accessed, it's now going to change this value, which makes sense.
07:56
And of course, this could go inside of your resource. But it kind of makes sense to have a global formatted price. And again, if you're using the Laravel money package, this makes things a lot easier.
08:07
OK, so how do we format this price then? Well, we're just going to go ahead and wrap this in the native number format function within PHP. We're going to divide the price by 100, of course,
08:17
because we're working with cents. And then as the second argument to this, we can choose how many decimal places we want this to have, which you can adjust or set to 0 if you want,
08:27
depending on your pricing. So now what we end up with is taking them cents values, a nice formatted amount. Now, so again, this isn't the most ideal way to do this.
08:37
You'd probably want to pull that package in. And once this does have support for Laravel 11, I'll add another episode to the course. OK, so now that we've done this, we've pretty much got
08:47
all of our data over on our home controller being passed down in a nice format to our view. Let's go over to the next episode and just fill this in and get this output on the page and styled up.
08:59
And then, of course, we'll be able to click on these to either go through to choose a service or go straight through to the checkout if we're choosing a service first.
39 episodes•5 hrs 0 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 create an entire booking flow with Inertia (using Vue), 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 Inertia!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!