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
24. Installing Alpine.js
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
Okay, so to make everything as easy as possible, we're gonna go ahead and pull Alpine.js
00:03
into our Laravel project, so we can use this within our blade templates and sprinkle in the interactivity that we need. If you've not worked with Alpine before,
00:12
don't worry too much about the framework itself. What we're gonna do is show you in this episode just how this works and how we get it on the page, and then the rest of it will just be pure JavaScript.
00:24
So that's pretty much it. Okay, so let's go and get Alpine installed. We're not gonna go ahead and pull this in with the CDN.
00:31
What we're gonna do is head over to our project and we're gonna do an npm install on Alpine.js. So just while that's finishing, let's head over to our app.js file under resources and js.
00:44
At the moment, this doesn't contain anything except the bootstrap import, but what we can do is go ahead and import Alpine directly from here.
00:52
So we can pull it in from Alpine.js that we've just pulled in from npm, and then we can just go ahead and set it as a global on our window object.
01:01
And if you're using a Laravel starter kit, this will probably already be in there for you. So once we've done that, we can go ahead and call Alpine start,
01:09
and that will boot everything up for us, and we are pretty much ready to go. The only other thing that we need to do is over in our app layout,
01:16
make sure that when we included V here, we use resources.js and app.js, so that gets pulled in as well. So let's test together that Alpine is pulled in and working,
01:28
and this will give you a feel for how this works. So we're gonna focus on this section here because in this entire section of the course, we're gonna be working on our availability calendar.
01:37
Let's turn this div here into an Alpine component and just demonstrate how this works. So one of the things concepts in Alpine, if you've not come across it before, is xdata.
01:47
This is where we hold things. For example, our date picker, we can set this to a null value, and then when we've installed our date picker,
01:55
what we can do is say xinit, and basically this whole div now becomes a component where we can look for that input, attach it to our picker,
02:04
and then what we can do is add methods inside of xdata as well to do things with our picker. So xinit, think of it as just this runs when this component gets booted up.
02:15
So for example, I could say something like picker equals ABC and then I can go ahead and do a console log on picker, and let's see what happens. So let's go over and pull up our console
02:28
and you can see, sure enough, we get ABC dumped out. So picker is now set to the value ABC, and when we do get to install our picker, of course here, instead of setting this to a string,
02:38
we're gonna be initializing it and then doing stuff with it inside of here. So that's pretty much all we're gonna cover. We're gonna have a couple of Alpine components on this page.
02:48
In fact, this entire div is gonna become an Alpine component with all of the stuff that we need to send through to our backend when we're making an appointment.
02:56
But hopefully that makes sense, and in the next episode, we're gonna get our picker actually on the page with an input directly in here so we can actually open it up.
03:06
So let's go over and install that and then we'll see more about how we can work with Alpine just to make this a lot easier rather than defining script tags all over the page.
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!