This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
07. Showing columns

Transcript

00:00
Our board is looking pretty good. Let's go ahead and now focus on actually creating some column records in the database and of course, showing them on our board. Okay.
00:10
So to start with, let's go and create our model in here and we will of course call this column. And let's head straight over to the create columns table migration and fill this in.
00:23
Once again, pretty straightforward. We know that this needs to be attached to a user and there's a very good reason why we are attaching this to a user rather than just attaching it to a board. First of all, it makes it really simple to see who owns what columns.
00:38
So our queries are a little bit simpler rather than having to define a has many through relationship in Laravel. But also when we do sort stuff with the package that we're going to be using a little bit later.
00:49
We want to constrain this to the particular user who's currently authenticated. So we'll see that a little bit later and we'll talk about why this is important. Really importantly, we need to relate this to a board. So let's do exactly the same thing here.
01:05
Okay. So now it's just the metadata about this board. We're just going to, or this column, we're just going to keep this really simple and once again, have a title.
01:13
And equally as important, we want in here an unsigned integer for the order that this should display at. So this is going to be like one, two, three. And of course that will relate to what position that is on the page.
01:28
Okay. Now we've done that. Let's go ahead and migrate. We'll create some manual records out in the database and
01:35
we'll see them on the board. Okay. Let's go ahead and relate this to user ID one board one. Let's say card one.
01:42
We're going to keep these sequentially named so we can actually see the order properly when we start to order cards and for the order, we're going to set these now, but when we start to create cards, this order is going to be filled in for us. Okay.
01:56
Let's go ahead and just pull these out. And of course these are columns, not cards. So let's do that. And let's duplicate this down and create column two.
02:06
And why don't we add one more in here as well? So column three. Okay. Let's adjust the order here and let's get them out on the page.
02:15
So let's go over to our board show component. And we want to pass down all of the columns for this board. So the columns here are going to of course, be directly from that board model. Let's open this up and find the relationship in here.
02:34
So let's go and create out a columns relationship again, super simple relationships here. This is just going to be a has many, and this has many columns. Remember we've named these two things in exactly the same way.
02:47
So just be careful that you're not putting in the live wire component instead of the model. Okay. Now we've done that.
02:54
We can go back over to board show and we can access the board and we can grab all of them columns. We'll be changing this later when we get to actually ordering stuff, because we need these in the correct order.
03:07
But for now we should have these on the page and we can just start to iterate over them properly. So over in our board index or board show, we can go up to our column section here and actually iterate over the columns that we now have now, because
03:24
we are iterating here and we're not working with dummy data. We want to give these a key. So whenever anything is reordered, we want this to be in exactly the same order. So let's set this key to the column ID, and we're going to want to pass the
03:38
column down into this so we can access the cards from that column. And of course the column title. Let's go over and yeah, sure enough, we've got three columns now and a bunch of fake cards.
03:51
Okay. So let's go over to our column component. Let's accept this column into here. And again, remember that the namespaces are the same.
04:00
We probably should have changed that, but let's pull in this manually just inside of here and call this column. And that's pretty much it. We've got this available now.
04:10
So if we head over to our column template, we can update the title in here to actually represent the column title. So that's just going to be column title. And there we go.

Episode summary

In this episode, we dive into actually creating columns for our board! First, we set up a new Column model and the necessary database migration. We talk about why we relate columns both to users and boards, which helps keep ownership simple and makes our queries a lot cleaner – plus it’s going to come in handy later when dealing with sorting.

Once the migration is all set up, we go ahead and manually create a few column records in our database to test things out. We make sure to give them a simple order field so we can control their positions on the board.

Next, we hop over to the board display code and set up the relationship so that each board knows about its columns. We iterate over these columns in the template so they actually show up on the board instead of using placeholder data. We also make sure to wire up the data properly so that the columns display their correct titles and are keyed by their IDs for efficient rendering.

By the end of the video, you'll see real column data showing up on your board – not just fake placeholders. This sets us up nicely for adding even more functionality in the next steps!

Episode discussion

No comments, yet. Be the first!