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
21. Listing employees
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
All right so let's build out a list of our employees that will eventually be able to click and then we'll go through and see which services they can perform and then of course that'll lead us through to the checkout. Okay so for this let's create another container inside of here
00:13
let's add an h2 and we'll say something like choose a professional we're going to leave the other section below this where we choose a service till a little bit later on because it pretty much just does the opposite thing so once we've got all the checkout and stuff done we'll come back to that okay so let's add some styling to this we'll just say text extra large and we'll set font to
00:33
medium and we're going to end up with the following great so just down here let's use a grid for this because we're going to have multiple employees listed we'll just build one out for now and then we'll go ahead and iterate through them from the database data so we'll use two columns on a small viewport we'll go up on a medium viewport to use five columns and then we'll set the gap between
00:58
the two or all of them and then we'll set a margin top on the sixth just so it sits away from the header so basically let's go ahead and say employee and employee and let's see what that does you can see that we've got a five column width if we just set a background color to each of these if you're new to grid let's go ahead and say bg black you can see that we've got two here but we've got
01:20
space for three more here now what's going to happen is the more that we have this is just going to start to wrap down and you can see that it does great so if you have lots of employees that's now going to nicely wrap down and when we're on a smaller viewport we're just going to see that reduced to two so we won't see everything squashed together okay so now that we've got that
01:38
let's go ahead and just build out the basic styles for each of the employees so this is eventually going to be an anchor so i'm going to start to style it as an anchor and we'll just put an href of hash because we're not sure where that's going through to yet and in terms of styling this up let's go and just start to add some styles so we'll set a padding on the y of eight and a padding
01:59
on the x of four just to keep this taller than it is wider we'll set a border on this and we'll just change the border color to slate let's have a look at what that's looking like looking better and we'll go ahead and set rounded to large on the corners like so and we'll go ahead and set a small shadow on this as well just so it pops out a little bit great okay so within here we're
02:23
going to have multiple items we're going to have an image so that's of course going to show the avatar of the user or the employee and then we're going to have the employee's name so let's just put alex in there for now of course at the moment not looking great we don't even have avatars at the moment we're going to need to add them in okay so let's go and just style up the avatar
02:43
just so we can at least see what this is going to look like so let's say rounded full we'll set a height of 14 and a width of 14 or we can use the size utility for this that works really nicely and we'll set a background of slate 100 here just so we can see that for now and there it is great so let's style up the name for the user so we'll set the text to small font to medium here
03:10
and the margin top to three and we'll set the text on a slate of say 600 like so okay great so at the moment obviously everything is sort of out of place so let's add a flex and a flex call to the outer wrapper here and we'll set items center and justify center so everything basically just sits in the middle that's pretty much all we're doing when we apply these flex
03:33
classes here okay so we'll set text to center just in case and let's go ahead and say that when we hover over this we want the background to change very slightly to a gray color if we choose say gray 50 I think to be honest this is a little bit too dark so what we can actually do this is we can set the opacity at the same time so we can say that we want this to be 75 opacity
03:55
of this color and we get a slightly lighter gray then so it's entirely up to you okay so now that we've done this we obviously want to iterate through the actual employees and we want to go ahead and actually output the image so we've got two employees at the moment we'll just stick with two but of course you can add more and everything should look good okay so let's go over to our
04:14
booking controller and we just want to pass down a list of our employees it's entirely up to you how you do this I'm just going to go ahead and say employee and get of course you could order them by their name whatever you wanted to do so that's now available in our view so we can start to iterate over them so let's go ahead and say for each employees as employee and let's end that for
04:37
each just down here bring this in and of course we should now end up with two employees now the name is super simple we can just go ahead and output the employee name in here and of course we get alex and mabel and now let's focus on the image so let's go ahead and just output this in here for now so let's say employee profile I think we called it photo url let's just double check yep
05:05
and we'll get rid of the alt but you could probably add the user's name in there obviously these don't exist at the moment so let's go ahead and grab some images and add them into here okay so I'm going to go ahead and paste in a gravatar image in here I'm going to do the same here but I'm just going to go and get rid of one of these characters that will just give us back one that
05:25
doesn't exist which is fine for now but obviously you'll want to point these to the images or within your admin panel allow them to be uploaded okay so now that we've done this we've got a list of our employees let's cover up next when we click on them showing all the services that they can perform which is going to be pretty much the same thing
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!