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
32. Taking customer details
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
Let's focus on submitting this overall form, which of course contains the employee, the service, and potentially the name and email.
00:07
We'll do some validation, get that all working, and then in the next couple of episodes, we'll look at rechecking availability as the form is submitted, and also, obviously,
00:17
creating the appointment. So let's hop over. And this overall form here, we can add a wire submit to. And we are not going to call a create appointment method.
00:28
We're just going to call a submit method, which is going to do the validation, the checks, and then we'll defer the creation of the appointment to another method.
00:35
OK, so let's head over to our checkout component here. And let's just create a submit method in here. And what this is going to do is validate the form. So all we need to do is say this form validate.
00:49
And any validation rules that we have on our checkout form, which we don't have any at the moment, will be validated successfully. So let's go and validate each of these.
01:00
Now, they're all required. So the date is required, although it shouldn't be unavailable. But we could do stuff like set the date format.
01:07
So when we do submit this and insert the starts and ends at date, we know that everything is good. So we're going to set that to YMD. We'll do a similar thing for the time.
01:16
We can validate the time structure as well. So we can still use date format for this. But we can say hours and minutes in PHP, like so. And we want to add a couple of others.
01:26
So we want a name. So let's say public string. And again, we'll make that nullable. And that's going to be named.
01:33
Set that to a default of null and email. And this is where you just want to add more if you want to store more details in the database. So again, we'll go ahead and validate this.
01:43
We'll just keep things super simple for now. Just set that to required. And we'll do the same thing for email. We'll set it to required.
01:50
And make sure it's an email address. OK, let's hook up the name in the email, submit this, do some testing, and we should be good. So over on our checkout.blade.php form,
02:01
if we come down to where we enter our name, let's just find that. And let's hook this up with wire model to form and name. And we'll do exactly the same thing for our email address.
02:12
So form and email. And we should be good. They should now be hooked up. Let's quickly add some validation errors in here.
02:19
So let's grab the error for the form name. And we'll just really quickly style this up. So let's grab the message within the scope of this. And let's just start this up really quickly.
02:32
So let's set a margin top of 2, text small, font medium. And let's set text to red 500. That should do. We can just go ahead and copy this and add that
02:43
for our email as well. So let's just swap that over to email. And we should be good. OK, so now when we submit this, there we go.
02:54
Great. So we can't do anything until that is in there. And of course, we can't do any of this until we've chosen a slot.
03:01
So to make this a little bit nicer, what we could do is take the entire Your Details and Books section and wrap that in a conditional. And that conditional is going to be if we have a slot.
03:14
So let's say if this form slot. And that's going to be time, not slot. And there we go. So we can't do that until we've chosen a time slot.
03:26
Then we can enter our details. And we can book an appointment. Great. So we now know that is all hooked up
03:32
and validation is working. And we can move on. Let's just go ahead and enter some details just to make sure this is all good.
03:41
And let's submit it. And yeah, there we go. So the next couple of steps is to recheck availability and get that appointment created.
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.