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
20. Base layout and Tailwind setup
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
OK, so since we're working without a starter kit here, we're just going to do a little bit of base layout setup.
00:05
So we have something that we can see on the page. And we're going to include Tailwind for styling, although you don't need to if you don't want to. OK, so let's get started by just creating out
00:16
a booking controller. This is going to be the first thing that we see that lists the employees and the services. We're not going to do anything with this just yet,
00:23
but we'll go ahead and make the controller out anyway. So let's just call this booking controller. And we'll go ahead and swap this route out here to use that controller.
00:32
So let's swap that out for that booking controller. And let's give this a name as well. And we'll just call it booking. OK, so let's open this up.
00:40
We'll go ahead and add in an invoke magic method in there and just do nothing so far. And on our home page, this is now using the controller. OK, so first thing, let's go ahead and just return a view.
00:50
So let's return a view in here. And we'll just call this booking. OK, so let's go ahead and make that view out. So we can do this on the command line with make view.
00:59
And we'll just call this booking. And that's done. And let's head over to our booking.blade.php file. And what we're going to do here is just create an overall app
01:08
layout with all of our HTML structure. We can include our styles in there. Everything will start to look nice. So what we can do is go ahead and create out
01:15
a component in here. So we can create an app layout blade component, passing the view option in because we want this to be anonymous.
01:23
We just want this to be a view that we can use to wrap. So now that we've done that, let's go over to that app layout.blade.php file in Views and Components. And let's just add some basic HTML structure to this.
01:36
All of this code is within the GitHub repository if you want to go ahead and copy anything over. OK, so I'm just going to change the title. And then inside the body, we're going to include a slot.
01:47
So this is where all of the content will sit in whenever we wrap any content. So let's go and change this outer div to xAppLayout. And that's going to find that layout.
01:58
And then anything within the side of here is going to be put into that slot. So now if we head over, you can see that we've got bookings. But if we go ahead and view the page source,
02:08
you can see that this contains all of that information. And that is where that slot has injected that content into, which is great. So that now means that we can come over to our app layout.
02:17
And we can just start to include any styles in here. So let's go over to this app layout, keep this open, and let's go ahead and get Tailwind set up. OK, so we've created our project.
02:27
Let's go ahead and use npm to install this. And we'll go ahead and initialize our Tailwind configuration file as well. So we'll just wait for this to finish.
02:36
OK, that's done. Let's go ahead and initialize our Tailwind config file. And if you are new, that will have created a Tailwind config file in the root of our project.
02:44
OK, so the next thing to do is choose where the content is. Now for us, it's just blade files. So we can just go ahead and put this directly into this content array.
02:53
And that will go ahead and look for any of the classes that we use within Tailwind inside of any of our blade files inside of our resources and views directory. And it will pull together our style sheet for us,
03:05
which is exactly what we want. So we need to add the base Tailwind stuff to the app.css file, which already exists within resources and CSS. That'll pull in all the base stuff
03:15
that we need for Tailwind. And then we just need to run npm run dev and include that style sheet with Vite on our app layout. So let's go ahead and just run npm run dev.
03:26
And at the moment, nothing's going to happen because we're not including any style sheets here. But if we come over to our app layout file again,
03:34
and we include this with the Vite helper, and we go into that directory, which is resources, CSS, and app.css, what we should see is this styled app. And you can see that that changed very slightly.
03:46
So basically, now we can just use any Tailwind styles that we want inside of any of our Blade files. So for example, let's just test that this is working by wrapping this in a span
03:57
and going ahead and setting the text to a blue 500 color. And sure enough, that's changed. So Tailwind is up and running nicely. OK, so the last thing we want to do
04:08
is create a kind of container where everything is going to sit within. So let's go over to our app layout to do that. It makes sense to just have a general wrapper
04:17
around all of our content inside of here. And let's start to add some styles to this. So what we can do is set a max width on this to 4xl. And we can set the margin on the x-axis to auto
04:29
so everything sits in the middle. We can set a margin on the y, so obviously top and bottom to 12. And then we can set some padding on the x-axis to 6. So then on a mobile viewport, this
04:41
has a little bit of spacing on the side. And you can see that this entire container now sits in the middle. If I just give this a background of black, you can see.
04:48
There we go. So that is our overall container. So there we go. Really quick bit of setup if you're new to Laravel
04:54
or getting any of these things set up from scratch. And we now have a nice slate where we can start to work on. So let's go to the next episode and get all of our employees listed out on 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!