Build a Trello Clone With Livewire
Playing
03. Setting up boards

Episodes

0%
Your progress
  • Total: 2h 27m
  • Played: 0m
  • Remaining: 2h 27m
Join or sign in to track your progress

Transcript

00:00
The concept of a board is pretty straightforward. It's just going to belong to a user and it's going to have a title.
00:06
So in this episode, we are going to be able to access a board via a URL, show a pretty basic template before we get this styled up in the next section. And then a little bit later on in the course, we'll look at creating boards. Our goal now is just to be able to see a board on the page.
00:22
OK, we'll start off by creating out a model. So let's say make model and we'll call this board, of course. And let's head straight over to the create boards table migration and fill this in. So a board will belong to a user.
00:38
So we're going to create our foreign user ID and we'll constrain that. And then we'll just go ahead and add any of the metadata that we want to see to any of these boards. In our case, we're just going to keep this super simple and opt for a title.
00:52
OK, now that's done, let's run our migrations. Next up, we're going to go ahead and create out a component to show this, and this is going to be a full page component. So let's use Livewire here to make out a board show component.
01:09
And let's go ahead and immediately register this as a full page component. So let's take just any of these and do the same thing. So let's say root get. And we know that we want to access a particular board here.
01:23
We can do that with root model binding. But now this will by default use the ID. But if you wanted to change this over to something like a slug, you just want to append on the column that you're looking for.
01:35
OK, so here we can reference that board show component that we've just created. And that will now, when we hit this root, render out this component. So let's open this up in the browser. So let's go over to boards and one.
01:49
Of course, it's not found at the moment because there's nothing in the database. So let's go over and just manually create a board for now. So I want to attach this to the user that I created for. And let's just call this courses.
01:59
And we'll fill in the created and updated that day. OK, so now that we have got a board, we should be able to go over and we should find this board. So if we just hop over and change this to boards, then we should be good.
02:11
Great. OK, so the next thing is we don't have a layout for this full page component. So we're going to need to specify that over on the board show component. Just above the render method, we're going to pull in the layout attribute and we're
02:26
going to pass through the location to the layout. We just want to reuse the same layout that we're using throughout our app. So we'll just reference layouts and app. Now, if we head over and give this a refresh, there's our board, potentially
02:38
our board, we can add a title and we'll be starting about cards and columns in the next section. OK, so really importantly, we want to authorize this because by default, anyone is just going to be able to access any board.
02:52
So let's go and create out a policy here. So let's make out a policy and we're going to call this board policy. OK, so if we hop over to that board policy in here, we can define whether we can actually see a board and that's just going to mean that we can see this.
03:09
So if we say show and we take in the authenticated user, which is always implicit, so if the user isn't authenticated, they won't be able to access this. And then let's take in the board here as well. So to check if a user owns a board, we just want to compare the user's ID to the
03:27
ID of the user inside of that board. And that's pretty much it. Now that we've got this, we can head back over to board show. We can pull in the mount lifecycle hook in here, and then we
03:38
can just call this authorize. So let's say this authorize, and we want to know if we can see a particular board. Now we've used root model binding within a single page Livewire component. So what we want to do is pull this in first of all.
03:53
So if we pull in the board at the top here, this will now be the board that we're trying to access. And to authorize this, we can just pass in that board inside of there. OK, we head over to the browser and yeah, we've got just an error with our policy.
04:06
Let's go and make sure we pull in the namespace for board just at the top here and give that a refresh and sure enough, we can see the board. If we were trying to access a board that didn't belong to us, of course we would see an authorization error.
04:20
Okay. Let's finish this up by going over to our board show template and pulling in a header with the board title in here. Now we can steal this from the dashboard.blade.php.
04:31
You can see that we've got this slot in here. We don't need to include our app layout because we're already using that within the render method within our component. So we can just come over here and we can just put this directly in here and we can
04:45
output the board title inside of here, and we should see the title of our board. There we go. Okay, great. Our board is set up.
04:53
There's one more thing to do here. If we head over to our web routes at the moment, we don't have any middleware attached to this. So let's go ahead and add in some middleware here, and we're going to say
05:02
that we need to be authenticated to access this route, and then the board show will go ahead and authorize whether that user can access it, what we could also do is add the verified middleware if you wanted to set up email verification. So you needed a user to be verified before they could see or create any boards.
05:20
You just want to attach that middleware as well. Okay, great. So we have a board set up now let's head over to the next section where we're going to design out the columns, the cards, and the horizontal scrolling effect.

Episode summary

In this episode, we lay the groundwork for our project by setting up boards. We kick things off by creating a simple Board model—a board will belong to a user and just needs a title for now. We handle the database side by running our migrations, keeping things minimal so we can iterate faster later.

Next up, we create a Livewire component that will display a board. We register this as a full page component and set up a route with model binding (using the board's ID for now, but it could easily be switched to a slug if you prefer). To show something on the page, we manually add a board to the database, link it to our user, and make sure we can fetch it via the browser.

With the basics displaying, we plug our component into the main app layout, so it looks consistent with the rest of the app. We update the template to show the board's title, making it feel a bit more real.

Security isn't forgotten—we create a policy to make sure only the board's owner can view it, and we hook up authorization within the Livewire component. We also ensure the route is protected with auth middleware (and optionally verified email middleware), so only logged-in users get to interact with boards.

By the end of this episode, you've got the full flow working: authenticated users can visit /boards/{id} and see their board, all authorized properly. In the next section, we'll dive into making the columns, cards, and get into some cool horizontal scrolling UI!

Episode discussion

No comments, yet. Be the first!