Hooking up customer appointment details: Build an Appointment Booking System With Laravel

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.

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

Episodes

Transcript

Episode summary

Episode discussion