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

23. Scaffolding the checkout

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 let's finally scaffold the checkout.

00:02

So when we click on either of these services, we go through with a confirmation of what we're booking. And then we'll start to build out each section as we go.

00:10

So in the next section of this course, we're going to look at that availability calendar with all of that stuff in. OK, so let's go ahead and, of course,

00:18

just create a controller for this first of all. So let's make out a checkout controller, no surprise. And let's go ahead and define the route just out in here. So with this, we want this to be checkout.

00:30

And then we want the employee that we are booking. And then we want the service that we're booking as well. So of course, we need to know that information on the checkout.

00:39

We're going to have to calculate our availability to show in the calendar and all that stuff. So we're going to need both of them in there ready to go. And let's go and just reference the checkout controller

00:50

in here. And of course, we'll just give this a name of checkout. Great. OK, so over in the checkout controller,

00:56

let's just go ahead and add in our invoke in here. And then we'll just go ahead and hook this up. So let's go over to our employee page just here. This will now link over to our checkout.

01:08

So let's say route checkout. And we need to pass in our employee and the service that they're booking. So what we should now be able to do

01:19

is click on here and see that in the URL. Now, at the moment, what we're not doing within the checkout controller is checking if a employee that's being passed in, so we've got an employee in here,

01:31

can actually perform this service. So we're not explicitly checking that. And our availability stuff doesn't check that because it's not really the responsibility

01:40

of the availability checker to compare the services to the employees. So let's add a really simple if statement in here just to cancel this off if that is the case.

01:50

So what we can do really, really easily is just say employee services contains. And we can just pass that service directly in. So contains is just going to make sure

02:00

that an instance of this service is within the services that we have. And if it doesn't contain that, we can go ahead and say abort with, say, a 404.

02:10

Now, I'll show you an easier way to do this in a minute. But let's just check that it's working nicely. OK, so if we choose beard for Alex, that works. Hair for Alex, that works.

02:19

But if we choose beard and then we switch this over to Mabel, sure enough, we get a 404. Of course, you can choose another status code if you want. It's entirely up to you.

02:28

Now, with these kind of things, there are some nice Laravel helpers for this. So I like to use abort if or abort unless. So what we could do is we could say abort if this is not

02:39

in here, choose the status code. That's going to work in exactly the same way. So if we swap that over to Mabel, you can see we get a 404. Or you can use abort unless this contains.

02:50

So it's entirely up to you how you want this to read. Obviously, it just has the opposite effect. So we've checked that nicely. Let's go ahead and return a view and start to scaffold this out.

03:00

So we'll just call this checkout. So I'm going to let's put this in a bookings directory. We might as well just put everything in there. And let's see what we need to pass through.

03:11

Well, we want to know who we're booking with. So we'll just pass the employee down. And we'll do the same thing for the service as well. Great, so just two really simple things.

03:19

And this is where we're going to start to add up here all our availability checks that we can pass down, build up that calendar, and all that good stuff. OK, let's go ahead and create this view out.

03:29

So let's say php artisan make view bookings and checkout. And let's go and scaffold this out. So again, let's pull this over from any of these, put this in here, and let's get rid of go back.

03:48

Although you could add that if you wanted to. I'm just going to keep this simple. And let's say here's what you're booking. And then underneath it, we're not going to have a grid.

03:58

We're going to have a completely separate section with the details of what we're booking. That will do for now. Let's go over and check this out.

04:05

And there we go. OK, so let's just build this top part here. So inside of here, I want the employee image to be somewhere around here.

04:14

So let's just add the image in there for now. And then next to that, I want the employee name or the service. And then underneath that, or next to that, maybe the price. And then underneath this, the employee names.

04:28

That obviously is just not going to look great at the moment. But let's figure this out. So we'll start out with a flex container here. That kind of makes sense.

04:37

And we'll go ahead and set a margin on the top so it sits away from everything. Let's go and set the space on the x-axis to 3 here. And we'll set the background to slate 100.

04:49

We'll set rounded large, so kind of on with our theme. We'll set the padding to 4. So we've got a nice container for this now. OK, so for the image, let's just go ahead and style this up.

04:58

And it's going to look exactly like it did before. So let's say size 14, I think we chose before. And we'll set a background of slate 100 so we can see that in there now that we don't have that.

05:08

And let's just give that a refresh. There we go. Great, so we've got that padding in there now. OK, so for this section, let's just really roughly go ahead

05:17

and scaffold this one out. So we've got a width full in here. Let's set the service and the price first of all. So let's wrap that in a div.

05:27

And we're going to set this as a flex and justify between. So we have the service here. And then we have the price next to that wrapped in a div. And that's going to look like this.

05:40

So we've got the service name here, price over here, and then the employee name will sit nicely underneath that. OK, so let's just fill in the service stuff.

05:48

So this is going to be the service title, the price. We already know. We can just grab the accessor that we built earlier. Or if you're using the Laravel money package,

05:57

that will format that for you. And the employee name, let's just put this in a div down here. And we'll say employee name. And we should be good.

06:07

Great, so let's just finish up with some of the styling. And then we are good to go. OK, so I'm just going to set the font to semi-bold for the service title.

06:16

For the price, let's go ahead and do text of small. And then for the employee name, let's set the text to small as well. OK, I think that looks OK.

06:26

Let's just grab the image for the employee profile photo URL. Again, we'll get rid of the alt, but good idea to add that in there. And yeah, I think that looks OK.

06:37

We've got rounded large, size 14. There we go. So now underneath here is going to be the calendar stuff. So let's just really quickly have a look at this.

06:46

So what I'm going to do is put this inside of a div. Each of these sections are going to be kind of independent from each other. And then on the outer, we can set a space on the y-axis

06:55

just to space everything out. Now, that doesn't look like anything at the moment. But if we just grab this and pull it down, and we get rid of this container or everything

07:03

within this container, so let's pull all of this out of here and add this as the calendar, we can say something like 1 when 4. So this is the kind of first step with the calendar in it.

07:20

And then each of the steps underneath this will obviously contain the slots. So we'll show the slots as step 2. And then step 3 will be entering the details.

07:29

OK, so I'm just going to reduce the size of these to large. And let's increase the spacing here a little bit. We'll double it, actually. And there we go.

07:37

Great. OK, so we can do the whole flow now. This is really basic stuff. But if you haven't worked with Laravel,

07:42

hopefully this helps you navigate each of these steps. And now we can choose any of these services, see it here, see the price. We just need to start working on the availability calendar,

07:53

which is the fun part. So now that we've done this, let's hop over to the next section and get our availability calendar set up and working.

Episode summary

In this episode, we finally get around to scaffolding out the checkout flow! We start by setting up a new checkout controller and defining a route that takes both the employee and the service being booked—super important, since we'll need both to check availability later on.

Once the route is wired up, we add some logic so that only employees who actually provide a service can be booked for it. We do this with some simple checks (including a tip on using Laravel's handy abort_if and abort_unless helpers to tidy things up a bit). If a user tries to book the wrong combo, they'll just see a 404.

Next, we create a new "checkout" view inside a fresh bookings directory and start laying out what the user sees: the employee's picture, the service name, the price, and the employee's name. We keep the layout basic (using Tailwind classes for nice styling), but this gives us a great starting point to build on.

Finally, we talk through how the upcoming steps will work: next up is adding the availability calendar, picking slots, and entering the user's details. By the end of this episode, you can run all the steps up to selecting a service and see your chosen employee, the service, and price, ready for the next steps!

If you're new to Laravel or how all the pieces fit together, you'll get a sense for how we add controllers, routes, and tie everything together into the UI. Onward to the fun part—building out that booking calendar!

Episode discussion

No comments, yet. Be the first!