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

20. Base layout and Tailwind setup

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 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.

Episode summary

In this episode, we're kicking things off by setting up our base layout from scratch, without a starter kit. The idea is to get our project looking half-decent and ready to go before jumping into more detailed features. We set up a simple booking controller that will eventually list employees and services, even though we're not wiring up that logic just yet.

Next, we create a Blade view for our booking page, and then set up a reusable app layout component to handle all the shared HTML structure like the <head>, page title, and body. We add a slot so future content can be slotted right in wherever needed. Once the layout component is in place, everything on the page is nicely wrapped and ready for styling.

For the front-end, we bring in Tailwind CSS. We show how to install it using npm, set up the config, and let it scan our Blade views for classes. We also include the generated stylesheet using Vite so everything gets compiled and hot-reloads while we work.

As a quick test, we style some text to make sure Tailwind is working, then finish up by creating a centered container with sensible max width, margin, and padding utilities to make the app look clean and modern. By the end, we've got a solid, styled starting point ready for building out more features — and we’re ready to move on to listing employees next!

Episode discussion

No comments, yet. Be the first!