Build an Appointment Booking System With Livewire

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

32. Taking customer details

Episodes

0%

Your progress

Total: 3h 4m
Played: 0m
Remaining: 3h 4m

Join or sign in to track your progress

01. Introduction and setting up

01. Introduction and demo

02. A fresh Laravel app

02. Database setup

04. Creating employees and services tables

05. Employee schedules and exclusions tables

06. Creating the appointments table

03. Displaying employees and services

07. Displaying employees and services

08. Showing all services by an employee

04. Core functionality

09. How we build up availability

10. Working with date periods

11. Iterating over requested days in a period

12. Adding schedule availability

13. Removing schedule exclusions

14. Excluding time already passed today

15. Generating slots

16. Using a custom date collection

17. Building the service availability generator

18. Adding employees into slots

19. Removing empty slots

20. Removing slots with booked appointments

05. Building the checkout

21. Scaffolding the checkout design

22. Making the employee optional

23. Loading availability

24. Building Alpine plugins

25. Showing the calendar

26. Locking unavailable dates

27. Showing the slot count on the calendar

28. Updating the selected date

29. Showing time slots

30. Setting a time slot

31. Finding an available employee

06. Booking appointments

32. Taking customer details

33. Re-checking availability

34. Creating the appointment record

07. Appointment confirmation

35. The appointment confirmation page

36. Cancelling appointments

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.

Episode summary

In this episode, we dive into setting up the form for our appointment booking system. We focus on gathering customer details like name and email, along with any other info we might want to store. First, we walk through the process of adding fields for name and email in our form component, and wire them up to our backend with wire:model.

Next, we add validation rules, making sure all fields are required and the email has the correct format. We also talk about validating the selected date and time. To enhance the user experience, we show how to display validation errors directly under the relevant inputs in the form, with a touch of styling to make them noticeable (hello, red text!).

We then add some logic so the details and booking section of the form only shows up once a time slot has been selected. Now, users cannot fill in their details until they've chosen when they'd like to book—neat and user-friendly!

Finally, we test the form to make sure everything is working as expected. The validation is successful, details can be submitted, and we're ready to move on. In the next episodes, we'll handle rechecking slot availability and actually creating the appointment.

Episode discussion

No comments, yet. Be the first!