Build an Appointment Booking System With Laravel

Sign in Get started

This episode is for members only

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

Already a member? Sign in to continue

Playing

35. Redirecting to a confirmation page

Episodes

0%

Your progress

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

Join or sign in to track your progress

01. Introduction

01. Introduction and demo

02. Fresh project with Pest

02. Core functionality

03. How we build up availability

04. Employees and services

05. Employee schedules and exclusions

06. Setting up appointments

07. Working with date periods

08. Iterating over requested days in a period

09. Adding schedule availability

10. Subtracting employee schedule exclusions

11. Excluding time already passed

12. Writing tests for schedule availability

13. Generating slots

14. Building the service availability generator

15. Adding employees into slots

16. Removing empty slots

17. Removing slots with booked appointments

18. Using a custom date collection

19. Writing tests for service availablity

03. Building the booking UI

20. Base layout and Tailwind setup

21. Listing employees

22. Listing services for an employee

23. Scaffolding the checkout

04. Building the availability calendar

24. Installing Alpine.js

25. Installing and using easepick

26. Disabling unavailable dates

27. Showing available slots on the calendar

28. Requesting available slots

29. Fetching available slots

30. Displaying and selecting a slot

05. Booking appointments

31. Hooking up customer appointment details

32. Disabling future steps

33. Storing an appointment

34. Handling appointment collisions

35. Redirecting to a confirmation page

36. Building the appointment confirmation page

37. Cancelling an appointment

Transcript

00:00

OK, so once we've booked an appointment, we need to redirect to a confirmation page. But since we're sending this request down

00:06

with an HTTP request to a controller to make the booking, we need to return back where we want to redirect to and then do something like a window location.

00:17

So let's go ahead and get started with this. And we're going to create out the controller first of all, which will handle the confirmation page. So let's go ahead and just create out a controller here.

00:27

And let's call this confirmation controller. We'll just keep things really simple for now. And we'll go ahead and create a route out for this. So let's say confirmation.

00:38

And we'll grab the actual appointment model so we can display some details about it. But we'll do this with the UUID. So the UUID that gets generated will be generated with the URL.

00:50

OK, so we'll use that confirmation controller here. And let's go ahead and give this a name. And we'll just say confirmation. OK, so let's go ahead and open this up.

01:00

And we'll go ahead and use an invoke here. And we just won't do anything for now. We'll look at the actual redirection itself. But we should now be able to redirect.

01:08

So I've gone ahead and cleared out any appointments that are in here. Let's go over and make a booking. And then we'll manually put this.

01:15

And then we'll look at the redirect. So let's just book in for 10 o'clock. It doesn't really matter here. Let's go and book an appointment.

01:23

And of course, that should have been created in the database. So we'll grab the UUID. Let's go ahead and create out a new tab with this in here. And let's go over to that confirmation page.

01:35

And once again, just grab the UUID. And there we go. So there is our page. We know it's working.

01:40

OK, so what we're going to do is go over to our appointment controller. And when this has been created, we're going to just return a response in here, again with JSON.

01:53

But this time, we're going to use a redirect. So we did that earlier when we returned an error. There was a conflict. But now we're just returning the kind of successful response.

02:04

So the name of this is confirmation. So we can just very easily build up the route to the confirmation. And of course, the appointment gets created up here.

02:13

We can just assign that to a variable and then include it in here. And that will nicely build the URL up for us. Great.

02:20

OK, so if we come over to the checkout page where we're actually making this request, what we can now do is take that redirect back from the successful response. We already handled the error earlier.

02:31

And we can just do a really simple window location on this. It's not the ideal solution. But of course, we can't actually do a standard Laravel redirect here.

02:39

So this is the next best thing. OK, so let's go ahead and test this out and book another appointment. And we should be redirected over to that empty page.

02:49

So let's go ahead and make a booking. And there we go. Great. So we're going to build this page out in the next episode.

Episode summary

In this episode, we're focusing on what happens after a user successfully books an appointment — how do we redirect them to a proper confirmation page? We'll walk through building out a simple confirmation controller and setting up a new route that uses the appointment's UUID to show relevant details on this page.

To demonstrate, we'll make a booking, fetch its UUID, and test navigating to the confirmation page. Then we update our appointment controller so that when a booking is made, it returns a JSON response with the URL for the confirmation page. On the frontend, as soon as we get this response, we simply redirect the user to that confirmation URL using window.location. It's not fancy, but it gets the job done without needing to do a standard Laravel redirect.

By the end of the episode, we'll have everything working so that after an appointment is booked, users are sent straight to their brand new confirmation page. In the next episode, we'll actually build out the content of that page!

Episode discussion

No comments, yet. Be the first!