This episode is for members only
Sign up to access "Build an Appointment Booking System With Livewire" right now.
Get started
Already a member? Sign in to continue
Playing
03. Setting up
Episodes
01. Introduction and setting up
02. Database setup
03. Displaying employees and services
04. Core functionality
09. How we build up availability
3m 40s
0%
10. Working with date periods
6m 54s
0%
11. Iterating over requested days in a period
3m 30s
0%
12. Adding schedule availability
11m 33s
0%
13. Removing schedule exclusions
3m 35s
0%
14. Excluding time already passed today
2m 17s
0%
15. Generating slots
11m 50s
0%
16. Using a custom date collection
1m 28s
0%
17. Building the service availability generator
6m 18s
0%
18. Adding employees into slots
8m 14s
0%
19. Removing empty slots
3m
0%
20. Removing slots with booked appointments
6m 17s
0%
05. Building the checkout
21. Scaffolding the checkout design
4m
0%
22. Making the employee optional
1m 54s
0%
23. Loading availability
8m 31s
0%
24. Building Alpine plugins
3m 18s
0%
25. Showing the calendar
3m 32s
0%
26. Locking unavailable dates
15m 1s
0%
27. Showing the slot count on the calendar
7m 52s
0%
28. Updating the selected date
3m 29s
0%
29. Showing time slots
5m 43s
0%
30. Setting a time slot
2m 43s
0%
31. Finding an available employee
3m 31s
0%
06. Booking appointments
07. Appointment confirmation
Transcript
00:00
So now that we've got our super plain Laravel app set up, let's go over to our web routes first of all,
00:05
get rid of this welcome view, and we're going to go ahead and register this as a Livewire component. But of course, we need to get Livewire installed first of all. So let's do a composer require on Livewire slash Livewire.
00:17
And that's pretty much all we need to do to get Livewire up and running. We can just start to create components once this finishes. So let's start out with that home component, which
00:26
is going to be the page where we see all of our employees and services. So we'll say phpArtisan Livewire make, and let's create out a home component.
00:37
We'll just keep it super simple. OK, so now that's created, rather than create a controller and then register this within a blade template, we're just going to directly have this as a full page
00:47
directly attached to our route. So we can go ahead and add the name of home in here as well. And yeah, sure enough, if we head over to the browser and give that a refresh, we get that page
00:58
trying to be accessed. Now, the error that we see here is because we don't have a global layout for our registered components for routes within Livewire.
01:07
So that's really simple to do. We just run phpArtisan Livewire layout with no options, and that will generate out a layouts app.blade.php file for us.
01:17
Then that means that when we head over to the browser, that's just automatically going to work. But let's go over to this template because we've got this kind of page title
01:26
here that we don't really want. So let's go over to the layouts directory, into app under our components, and let's do a little bit of changing around here.
01:35
So we're going to take the title if it's passed in. Otherwise, I'm going to go ahead and pull from config and app and grab the app name. So at the moment, if we head over to EMV,
01:46
that is just going to be Blaireville. So you can go ahead and change that to any value you want. But at least now that's controllable if we don't pass a title down.
01:54
OK, let's go ahead and get some content on the page. So if we just take a look at what we've got here, we've got our app and Livewire with our home component. That's where we're going to pass down our employees and services.
02:06
And under resources, if we just take a look here, we have got our views. And yeah, sure enough, we've got our Livewire and home view. So this is where we are going to output all that stuff.
02:16
Next up, we're going to get Tailwind installed so we can style this out. Of course, you can choose not to. But if you're working with the tool stack,
02:23
usually you will use Tailwind. So let's head over to the framework guide under Laravel and just get this pulled in. OK, so we've created a project.
02:29
But we need to install Tailwind and get written up and running. So let's do an npm install on that. And then once that is finished, we're
02:38
going to go ahead and initialize our Tailwind config file. So let's go ahead and run that now that is installed. And we should be good to go. Now, before we do anything, let's run npm run dev
02:47
so everything starts to pull together. And we'll open up a new tab so we can start to run any other commands. OK, so next up, we need to go ahead and make sure
02:56
that all of the Tailwind classes come from our Blade template. So let's open up our Tailwind config.js file in the root directory. And let's go ahead and paste this into the content section.
03:07
So any Tailwind styles we add to Blade are going to be added to our main style sheet. OK, so next up, we're going to go ahead and add all of the Tailwind imports to our app.css file
03:18
under resources and CSS. And we are pretty much done. We just need to register now all of our style sheets and stuff from Vite.
03:26
And we're good to go. OK, so how do we do this? Well, we need to come back over to our layout just here, so under Layouts and App.
03:34
And we need to add this in using the Vite or V directive. So let's go ahead and say resources.js app.js because we are going to need, obviously, JavaScript to get this working.
03:45
We'll do the same for app.css as well. So this will pull together, then, two files. And then it will compile everything down into public JS and CSS files ready to go.
03:55
OK, so we've already got npm run dev running. So what we should now see, if we just head over to the browser, is a freshly styled page. And now Tailwind is active.
04:05
It's applied. It's reset. And we can just start to build everything. So the last thing that we're going to do
04:10
is head over to our layout app. And we're just going to create a container around all of our content just so everything sits in the middle and we have a nice base layout for everything in here.
04:21
So let's set a maximum width here to, say, 4xl. Let's set the margin on the x-axis to auto so all of our content is centered. We'll set a margin on the y-axis of, say, let's say 12,
04:33
bump it down a little bit. And we'll set a padding on the x-axis of 6 as well. So what we should now end up with is a nice centered area in here that we can just
04:43
start to output anything that we need. And there we go. We have got a fresh app set up with Livewire and Tailwind. And now we can just start building.
36 episodes•3 hrs 4 mins•3 months 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 create an entire booking flow with Livewire, including 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 Livewire!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.