Setting up: Build an Appointment Booking System With Livewire

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.

Sign up to access "Build an Appointment Booking System With Livewire" right now.

Episodes

Transcript

Episode summary

Episode discussion