Playing
03. Setting up boards
Episodes
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
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.
31 episodes•2 hrs 27 mins•11 months ago
Overview
Get ready to master drag and drop sorting in Livewire, by building a Trello clone.
We’ll start out by building the interface completely from scratch, then add the ability to sort columns and cards, including moving cards around columns. As we sort everything, we’ll keep the database perfectly updated with the new order.
Our Trello clone will also allow us to edit column titles inline, edit cards and add notes, archive cards and columns, and put them back on the board.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!