Project Setup Overview0:00
In the previous video, we briefly discussed what Russian doll caching is, at least we grazed over the surface of what it is, and then we set up Homestead for our new project. So now I'm going to open up Vim, and let's get started. Now to begin, I want to have something to test this out on. So we're going to use this example of index cards and notes. So we'll have a table called cards, and think of that as our digital version of an index card. Next, we'll have another table for the notes, and as you can imagine, each note can be assigned to a card. So my first step should be to visit our config/database file, and I'm just going to
Creating Database Migrations0:32
to a card. So my first step should be to visit our config/database.php file, and I'm just going to use an SQLite database like we often do. Next, I can say php artisan, or I have an alias that I'll use from now on called art. So alias art, there you go. Okay, so art make:migration create_cards_table, and we are creating a table called cards. Okay, let's switch over, create cards table, and if we scroll down for now, a card will consist of a title. And let's see if we can get away with that for now.
consist of a title. And let's see if we can get away with that for now. Maybe in real life we'd have an owner ID or something like that, but as simple as we can go for now. Next, I'm going to create another one, and this will be for our notes table. So we'll say create notes table. All right, let's visit that. And if we scroll down, what does a note consist of? Well, first, we've already established that a note belongs to a card, right? So let's say the card ID will be our foreign key, it should be positive, and we'll set
Well, first, we've already established that a Note belongs to a Card, right? So let's say the card_id will be our foreign key, it should be positive, and we'll set an index to it. Next, maybe we could do the same thing with the user_id. So each Note you add belongs to a specific User. And then finally, we need the body of the Note, and that can just be a text column type. Okay, so let's go ahead and migrate our database. And in this case, it's squawking, I have forgotten to create the file. Okay, one more time. And there we go.
Defining Models Relationships2:02
Okay, one more time. And there we go. We have a users table, a cards table, and a notes table. Now one thing I've forgotten to do is to create the model. You can always do php artisan make:model Card -m, and Laravel will then create a migration as well. I so often forget to do that, so we'll just do it manually this time. Our Card and our Note. Next, if you don't mind, we will set up our relationships. So for example, if I go to my Card model, a Card consists of Notes.
Building Model Factories2:26
Next, if you don't mind, we will set up our relationships. So for example, if I go to my Card model, a Card consists of Notes. So I could say notes, return, this hasMany, Note class, right? A Card can have many Notes. Next, if we were to switch over to the Note itself, well, a Note belongs to a Card. So I could say card, and then return a belongsTo relationship to the Card. Finally, I'm going to switch over to my ModelFactory class within database/factories. And this will give us a quick way to whip up some test rows and columns. So let's duplicate that. And let's see, we're going to define a factory for a Card.
So let's duplicate that. And let's see, we're going to define a factory for a Card. And if we go back, let's see what we have here. Just a title, very simple. So get rid of those and say a title will be a fake sentence. All right, I'm going to do one more for the Note itself. So when we build up a Note, now if we got to create notes table, we need to provide a card_id, a user_id and a body. Okay, so card_id. Now we can tackle this in a number of ways.
Okay, so cardId. Now we can tackle this in a number of ways. We could set the cardId outside of the factory. Or what I often do is just delegate and build up a factory on the fly. So in that case, we could say Card::create, and then fetch the ID off of that. So that way, when you build up a note, it will also build up a companion card in the process unless you override it. Next, we should do another one for the userId. And we'll take the same approach here. And then finally, we need the body itself.
And we'll take the same approach here. And then finally, we need the body itself. And that will just be a fake paragraph. Now we can build these up really easily, especially for testing. But it's good for demos as well. So for example, let's say I want a factory for a Note, and specifically maybe five of them. And we'll call create on that. Okay, there you go. So we've saved five Notes to the database.
Routing Controller View4:29
Okay, there you go. So we've saved five notes to the database. And for each one, we've created a companion card as well. So we should be able to say $card equals Card::first(). And if I now say $card->notes, we can see that this card consists of exactly one note. Now we can display these on the page. So I will switch to my routes file. And we'll say when we make a GET request, let me center this real quick. When we make a GET request to /cards, we're going to load a CardsController at index.
When we make a GET request to /cards, we're going to load a CardsController at index. We'll call an index method. Okay, let's create that. php artisan make:controller CardsController. And we'll switch to that. Now within here, we have an index method where we should fetch all of our cards. So we could say Card::all(). And let's import that at the top. And let's see for now we can get rid of those two.
And let's import that at the top. And let's see for now we can get rid of those two. Next I'm going to load a view cards.index, and then pass through our cards variable. If you've gone through a beginner series at Learacast, all of this should be a recap at this point. So let's build that up resources/views, I will create a directory called cards, and then nest index.blade.php within it. Let's extend a layout that I'll need to build. And then we'll have a section for our content. And this is where we're going to display all of our cards.
And then we'll have a section for our content. And this is where we're going to display all of our cards. Like so. Okay, let's see. If we scroll up, here's our views directory. So I will create a new layout view. And this is where we can add our wrapping HTML and yield our content. Okay, great. So that means if I switch back, we extend our layout. And within that section, we will spit out a <h1> tag for now.
So that means if I switch back, we extend our layout. And within that section, we will spit out a <h1> tag for now. So if I were to switch to that URI, we can see it here. So let's go to the next step, filtering through the cards. No caching yet. We're going to add that in a moment. For each card as card, well, maybe we'll have some kind of article section. And at least to start, we will echo out the title of the card, like so. Then finally in foreach. All right, let's come back, give that a refresh.
Then finally in foreach. All right, let's come back, give that a refresh. And undefined variable article, whoops, sorry about that. Okay, so here's our cards, which we can then style and make them look like actual index cards. We'll do that in a bit. Next, for each card, I want to display all of the notes associated with that card. So that means down here, I could say foreach card notes as notes, well, within here, I don't know, maybe a list item. Let's echo out the body of the note for now.
Extracting Blade Partials7:17
don't know, maybe a list item. Let's echo out the body of the note for now. And then close that out. And of course, we should wrap this within a UL, right? So now if I were to come back and give that a refresh, yeah, each card right now has a single note, so we display them here. What else? Well, what we could do is extract some of these to their own partials and clean things up a bit. So for example, this article section, well, that would represent a single card's markup,
up a bit. So for example, this article section, well, that would represent a single card's markup, right? So why don't we just extract that and I will say include card/ and how about card? All right, within that directory, let's create it, card.blade.php. And I will paste that in. Okay, so now I have a single partial that represents the markup for a card. And if we were to come back and give that a refresh, we can still see the same thing. All right, so that was successful. Next, let's go back.
All right, so that was successful. Next, let's go back. For each cards as card, I want to render a card. And if we go to the card itself, well, down here, we have another section. For each card notes as note, then render the note. So once again, I could say include cards/note.blade.php. And let's create that one. So new file, note.blade.php and paste that one in. Let's go back, see if we broke anything. And that still seems to be fine.
Let's go back, see if we broke anything. And that still seems to be fine. So if we come back, let's see the current state. Yeah, this is starting to look better. So we have a single partial for a card. And if we dig down in there, we can see the markup here. Next, we have a single partial for a note. And we can review that as well. And of course, in real life, that would be a little more complex. But right now, it's just a list item.
Styling With Sass Gulp9:32
We don't really need it. It doesn't make a difference. But to keep it somewhat real world, yeah, I'll go ahead and use sass and then run gulp to compile it down. And here we go. The product of three minutes worth of work. But you know what? This is going to be just fine. So if you want a quick recap, I installed my node dependencies. And then I just ran gulp to compile down my app.scss file to this file.
