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

34. Creating the appointment record

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

All that's left to do now is actually create the appointment. So let's go ahead and do that and just defer this

00:04

to another method. And I want this returned so we can eventually redirect. So I'll do that now. Let's call a createAppointment method.

00:12

And let's go down and create this out here. So createAppointment. So we're going to start out by creating a temporary appointment variable.

00:22

We're not going to create this, first of all. Instead, we're going to go and grab our appointment model and make this. So then down here, we can attach

00:30

the service and the employee. And we're going to make this by taking the form and only the name and the email address. And then what we're going to do is just pull this down

00:45

so it's a little bit easier to see. We're going to append on the start sag and ends at dates separately. Because remember, we're storing the date and the time slot,

00:56

but we don't necessarily know when this appointment ends. We'll do that based on the service duration. So we've got a startsAtDate. We have got an endsAtDate.

01:06

And let's figure this out. So the startsAtDate, let's assign it here because we're going to need to use that to work out the endsAtDate.

01:14

And we'll use Carbon just to manually build this up. Now, we've already validated these, so we know that they're in the correct format. So let's grab the form date.

01:23

So that's the base of our start time of our appointment. And then with Carbon, let's go ahead and use set time from time string. We know that our form time is a string.

01:36

And there we go. So that's going to set up the start date and the time and assign it to startsAt. Now, for the endsAt, this is pretty straightforward.

01:44

We're going to take the startsAtDate. Really importantly, we're going to copy it because we don't want to modify the original date by adding any minutes onto it.

01:53

And then we're just going to add on some minutes. And you guessed it. The minutes are going to be the service duration. Perfect.

02:01

Let's just die dump this just to make sure everything is looking good. And then we will attach the employee and the service to this as we create it.

02:10

OK, let's choose 11 o'clock here. Go ahead and make a booking. And let's see what we get. Make booking.

02:16

Great. So under Attributes, we have got my name and email address. Pretty obvious. Starts at 11, ends at 12.

02:24

Great. Both on the same day, the day that we've chosen. So that's working nicely. Now we just need to attach the relationship.

02:31

So I'm just going to hop over to our appointment model just to make sure these are on there, service and employee are. So let's take the appointment.

02:39

Let's access the employee relationship. And let's go ahead and associate the employee that we have within this component. So associate that employee.

02:49

And we'll do exactly the same thing for the service as well and associate that service. Again, let's just go ahead and die dump on this just to make sure that everything looks good.

02:59

OK, let's go and enter my details. Hit Make Booking. And yeah, sure enough, we've got one and one in there. And we've got them relationships set up.

03:11

So now all that's left to do is save this out. So we can just use Appointment Save because it's not persisted yet. And then we're going to go ahead and return the appointment.

03:20

And that will be returned back to us up here so we can go ahead and redirect. For now, though, let's just die dump on this so we know we've got it.

03:29

OK, let's head over and try another one. So I'm actually going to choose a different service just to make sure that this is all good. So let's choose 12 o'clock.

03:36

Remember, these dates have now shifted because we've got an hour and a half appointment type. Let's enter this. And there we go.

03:44

So now if we head over to the database, yeah, sure enough, we're actually creating the appointment now with all the details. And also, yeah, that slot has now disappeared.

Episode summary

In this episode, we focus on actually creating the appointment record in our application. We refactor the code a bit to make things cleaner, moving the appointment creation logic to its own method. This will help when we want to redirect after the appointment gets created.

We start by grabbing the form inputs (like name, email, and the selected date/time), and then use the Carbon library to combine the selected date and time into a proper DateTime object for when the appointment starts. We calculate the end time by adding the relevant service duration to the start time, making sure to copy the start DateTime object so we don't accidentally modify it when working out the end time.

Once that's set up, we go ahead and link (associate) the appointment with the chosen employee and service, which are both set up as relationships in our models. We do a couple of test bookings just to verify that the data—name, email, start time, end time, employee, and service—are all correct and associated properly. We finish off by actually saving the appointment to the database and confirming that it appears as expected. Plus, the slot we just booked now disappears from the available slots, so everything is wired up nicely!

Episode discussion

No comments, yet. Be the first!