This episode is for members only
Sign up to access "Build an Appointment Booking System With Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
31. Hooking up customer appointment details
Episodes
01. Introduction
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
05. Booking appointments
31. Hooking up customer appointment details
5m 17s
0%
32. Disabling future steps
2m 43s
0%
33. Storing an appointment
14m 43s
0%
34. Handling appointment collisions
8m 1s
0%
35. Redirecting to a confirmation page
2m 55s
0%
36. Building the appointment confirmation page
5m 40s
0%
37. Cancelling an appointment
5m 30s
0%
Transcript
00:00
OK, so our booking calendar is done. We have the ability to choose a time slot, all of which is put into our overall form.
00:07
Now, down here, we just need a separate section for customer details. And you can customize these to be whatever you want. Add more columns to your database. We're just going to keep this simple for now with a name and an email address.
00:18
OK, so let's go ahead and copy this header down here. Again, do exactly the same thing with a margin on the top of six. And this will be our customer details. So let's say your details and book, and we should have this on the page down here.
00:34
Now, what we are going to do in the next episode is look at disabling each of these steps if we haven't selected anything. So we'll get rid of your details and book if we haven't chosen a available date. But we'll roll with this for now.
00:48
OK, so a little bit of styling here just to get this working. But we can pretty much copy the majority of these styles out. So we want to go ahead and just create our basic form field for each one. So let's start with a label here for the user's name.
01:03
And then we can just copy and paste this down. We'll say for name. This will, of course, be an input type of text. And of course, we will be validating these on the back end as well.
01:13
OK, so let's say placeholder your name. And I'm actually going to set this with a class of SR only, which will only be available for screen readers just so we don't have too much in here. OK, so for the styles of this,
01:27
let's pretty much grab these from our availability calendar. So let's pull these over from here. We want these to be pretty much the same. And let's go ahead and add these classes into here.
01:40
We'll reduce the margin on the top to one, but everything else can pretty much stay the same. And let's set this to required. Like I said, we will be validating on the back end as well.
01:50
Great. So we've got your name. Let's go and duplicate this down for your email address. And again, just change this over to email. And so your email address and we pretty much have that working,
02:08
let's change the type to email as well, so that validates on the client side. OK, so for this one down here, let's set a margin on the top of three and then down here we can have our submit button. So let's go ahead and create out a button in here
02:22
with a type of submit and we'll say make booking and that will eventually send a request down to another endpoint which will create the appointment for us. OK, so let's add some classes to this just for the sake of making this a little bit easier.
02:35
I'm going to go ahead and copy these over from the GitHub repository. So you can go ahead and grab them as well if you want to. That's pretty much how it looks. We have a little hover effect and we can type our details in,
02:45
hit make booking that will take the date we've requested, the time we've requested and everything else. OK, so we want to hook these up now. So this is going to be slightly different
02:55
to what we've done with, say, our time slots where we had a click event. Technically, this isn't an input, so we can't hook it up with a model. But what we can do is up here, set the person's name. We can set the person's email address.
03:10
And just so we can see this working, let's create a span with some X text in here for the form name. And we'll do the same for the form email as well. And let's see how these actually get hooked up.
03:22
So let's go down to our form fields and for our input. We're going to say X model form name and we're going to do the same thing for our email address as well, but of course, switch that over to email. So now what's going to happen is as I type in here,
03:38
you can see these actually get attached to the form and it just keeps up to date with everything that we have included in these inputs. And now these are part of our form that we're going to submit down to make our booking, which is great.
03:51
So they're in there. We can go ahead and get rid of these spans now and everything is hooked up. Now, the last thing I want to hook up to our overall form before we start to submit this is going to be the employee
04:03
and the service for these, we can just use the ID. We don't necessarily need to use the slug. So let's go ahead and say employee. And inside of here, we don't even need a string here.
04:13
We can just say employee ID and for the service, we can say service ID. So now as soon as this page hits, it's going to obviously store the employee in the service. The date will always get put in there
04:27
immediately because of our event that we've set up to actually set that formatted date correctly, the time will be set when we choose a slot and the name and the email address will be set when we type them in. So pretty much if we dumped out every
04:39
single one of these, they should contain everything we need. Now, let's just go ahead and test out really quickly by adding some X text in here for our form employee. It's probably an easier way to do this
04:53
and the service as well, just to make sure they're hooked up. And yeah, sure enough, we've got ID one for the employee and ID one for the service. OK, great. So that is our details section. In the next episode, let's just tidy things up.
05:06
So we disable parts of these when we haven't chosen a slot, because it doesn't make sense to have our booking button available when we've not chosen a slot or a date. So let's do that in the next episode.
37 episodes•4 hrs 49 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 build a simple UI with Alpine.js, with 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 Laravel!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!