Update Home Template 0:00Well, let's keep on this path. So here's what we built up in the very last episode. We have home, about, and contact. But now I want the home page to, by default, fetch all statuses, which are just going to be the equivalent of tweets or something like that, from our database. So let's take a look. Into Sublime, this will be stored within our home view. And right off the bat, let's go ahead and tweak the template. So I'm going to do npm run dev, and you'll see, as a quick refresher, we're just going to run this command right here. Start up our watcher. So anyways, if we come back, these classes you see here are optimized for Twitter Bootstrap, but we are using Bulma. So instead, I'm going to use Bulma's grid syntax. So we're going to have a column here, and rather than a panel, I'm going to use Bulma's message component, where we will have our header. And this will be something like Joe said. And thenSo we're going to have a column here, and rather than a panel, I'm going to use Bulma's message component, where we will have our header. And this will be something like Joe said. And then for the message body, something like this. So let's come back to Chrome and give that a refresh. And there we go. A little wide, but good enough for our needs. So now we want one of these for every single tweet. So let's assume that we have some statuses. And we could say for status and statuses, then what do we want to do here? How about a paragraph? And we'll say something like status, give me the user. None of this exists yet, by the way, we're just figuring it out. Give me the user's name, and they said, and then we're going to have how long ago it was. So I'm not really sure what that would be yet. We'll say a moment ago. We'll hard code it for now. Then down from the message body, yeah, this again, we can say vtext is status.body. Fetch Statuses via Axios 1:32So I'm not really sure what that would be yet. We'll say a moment ago. We'll hard code it for now. Then down from the message body, yeah, this again, we can say vtext is status.body. Okay, so it sounds like at this point, we need some statuses. So we're going to come down to our script. And that means we need to offer statuses, which I will default to an empty array. And then let's say once the component is created, we're going to fire off an AJAX request to our server to fetch all of the statuses. So we could start by saying axios.get statuses, and then we will assign them. So we're going to get a response there. So we could say this.statuses equals response.data. So whatever we return from the server, that will be like a collection or an array of statuses, we're just going to assign it here. And because again, Vue has reactivity, it will detect that change, and then repopulate this list here to reflect the data. Now a quickof statuses, we're just going to assign it here. And because again, Vue has reactivity, it will detect that change, and then repopulate this list here to reflect the data. Now a quick little tip, actually, ES2015 tip. You'll see here, we get the response object, and then we assign its data property to statuses. But in ES2015, we can also use object destructuring directly within function arguments. So if I only care about the data property, I could always do this, data, and then I can just reference it like so. Now in this case, though, it will fail. Actually, Laravel Mix is telling me, yeah, you'll see right here. In this particular case, we have to be explicit about the parentheses. So if I come back, now that compiles. So yeah, that's just kind of a neat trick. You can use object destructuring directly for function arguments. So this is equivalent to this. Kind of cool. Anyways, at this point, it's still going to fail, right? So we give Add Statuses Route 3:10neat trick. You can use object destructuring directly for function arguments. So this is equivalent to this. Kind of cool. Anyways, at this point, it's still going to fail, right? So we give it a refresh. Let's go to my network tab. And yes, it performed a get request to slash statuses, and the response was, nope, not found exception. Okay, so let's fix that. We're going to go to my Laravel routes file. And now I'm going to say route get. And in terms of naming here, this is kind of up to you. Because if you think about it, when it comes to your routing, you have routes and controller actions that could return HTML responses. You could have ones for your API. And you can even have ones for your internal API. So like the API that you use for your sites, but not necessarily one that you expose to the outside world. So a lot of this comes down to preference for your team. You could do something like this. You could do something like statuses, and then Create Status Model 4:03not necessarily one that you expose to the outside world. So a lot of this comes down to preference for your team. You could do something like this. You could do something like statuses, and then statuses.json, if you want a responsive JSON. In this particular case, I'm going to keep it very simple and just do statuses. Okay, so let's just use a closure here. And now let's go to my app directory. We don't yet have this concept of a status. So I'm going to do that now within a new tab. With Laravel, I'm going to make a status model and include a migration file or stub with it. Let's switch over to that create statuses table. And here's our migration. Okay, so a status will consist of, well, among other things, the user who created the status, and then the body at the status itself. And I won't limit how long that can be. Okay, so let's come to my environment file. And like I often do for lessons, SQLite will be fine. So I will create that file database.status itself. And I won't limit how long that can be. Okay, so let's come to my environment file. And like I often do for lessons, SQLite will be fine. So I will create that file database. And now we can run our migration. So that's going to build up the users table that Laravel includes out of the box, and then also our statuses table. Next, let's set up some relationships. A status belongs to a user. So that relationship in Laravel is belongs to. So let's try this out. Let's boot up phpArtist and Tynker. And then I'm going to use Laravel's factory database factories to quickly whip up a test user. Okay, great. Next, let's create a status. So we'll say new app status. And what do we have the user ID is this guy right here, or this lady, status body will be this is my status. And I guess that's it, right? In real life, you'd have more. So now using Eloquent, if I were to say give me the very first status, there it is. And if I werestatus body will be this is my status. And I guess that's it, right? In real life, you'd have more. So now using Eloquent, if I were to say give me the very first status, there it is. And if I were to then say give me the user associated with the status, we do have that relationship because we added this method. But now this is something to be somewhat concerned about. We'll talk about this more in a few minutes. But notice that when I do get the user, and this will all be performed through an AJAX request, it also returns everything about the user, including their email address and potentially other private data that you don't want returned. Make sure you keep that in mind, and then we'll touch on it more in a few minutes. So let's do this. If you fetch all statuses, I will say app status. We'll order them in descending. And yeah, we're not going to paginate or anything right now. We're just going to fetch everything from the database to keep it simple.I will say app status. We'll order them in descending. And yeah, we're not going to paginate or anything right now. We're just going to fetch everything from the database to keep it simple. Now in our home view, we can see that when the component is created, we perform a get request to that endpoint, it receives the response, and then we assign the data property on the response to the statuses array. And then as such, this will reevaluate. Okay, let's take a look. So we're going to give this a refresh, and let's see. We submitted an AJAX request, and here is the response. It has all of the data. Further, if we go to our view tab, you can see that, yes, we have our statuses array that consists of exactly one item. However, if we pull this tab down, we still can't see anything else. And that's because we do have some errors. So error when rendering anonymous component cannot read property name of undefined. Eager Load User Data 7:21if we pull this tab down, we still can't see anything else. And that's because we do have some errors. So error when rendering anonymous component cannot read property name of undefined. Well, of course it can't. So here's the issue. Right up here, we're trying to access a name property, but status.user doesn't exist. In fact, if I were to comment this out, and give this a refresh, close it out. Sure enough, we can see this is my status, and we did pull that from the database. Okay, but I want to bring this back. We still want the user's name that is associated with the status. But as we saw earlier, when we performed that request, it wasn't returned. Okay, well, why don't we include that with the response? With Eloquent, I could say, give me the status and eager load the user associated with that status. Okay, let's give it another refresh. So we run it again, and now you'll see that, yes,With Eloquent, I could say, give me the status and eager load the user associated with that status. Okay, let's give it another refresh. So we run it again, and now you'll see that, yes, we have the body of the status, and we also have the user's name. So if we scroll down, you'll see that, yes, this lady right here said, this is my status. Okay, so this is all working exactly the way we'd expect. But again, I do want you to note that when you perform these queries on the server side, you get to decide what portion of that data gets exposed. But when you do it as an Ajax request, all of this is readable by anyone. They just have to open the network tab. So in this particular scenario, everyone who creates a status in our little web app here, well, you could just open this up and view their email address, their sign-up date potentially, and then further, maybe other columns that you don't want to expose. Limit Exposed User Fields 8:54well, you could just open this up and view their email address, their sign-up date potentially, and then further, maybe other columns that you don't want to expose. Now, you have a couple options here. One, you could go to your user class, and Laravel offers a hidden property. This is where you can specify columns that should not be included if you fetch the data as JSON. And you will notice that you don't see any password here. If I were to comment these out and then run it again, you will see the password, as you can see. So yeah, if you want, you could include email in that, but it's probably going to break down because in lots of scenarios, you will want their email. So it sounds like we only want to exclude columns or limit the columns we fetch only on this condition. Okay, well, if that's the case, you could go to your status model, and you could always limit what you select. So a status belongs to a user, but I docolumns we fetch only on this condition. Okay, well, if that's the case, you could go to your status model, and you could always limit what you select. So a status belongs to a user, but I do just want the name of the user. But now, I promise this will be a trap that you fall into. Let's see it together. If we run it, you'll see that user is now null, and that's not what we wanted. We just wanted to select the name, but now it's doing nothing. The solution is you have to be explicit about the ID. That relationship is important. So if we give it a refresh now, you'll see that yes, we have the user, and specifically just to their name. So you can do it in this way, or of course, you can use a traditional SQL join query. It just depends, really. So now, this is starting to look good. Why don't we create a couple more statuses? Create a new status, set the user ID, set the body, yet another new status, and then save it. Okay, give it a refresh, and there we go. Add Human Timestamps 10:29good. Why don't we create a couple more statuses? Create a new status, set the user ID, set the body, yet another new status, and then save it. Okay, give it a refresh, and there we go. So now, to finish up, what about this section right here? I'd like this to be a readable for humans timestamp. Well, a tool I like to use for this is called moment.js. Very, very common. So why don't we pull that in, moment, and I'll save it to my dependencies. Okay, great. So now, if we switch back, let's go ahead and import this, or this is also something you might want to make accessible globally. Anyways, let's pull that in, and then we could use a computed property, but I think I'm going to want to do something like posted on, and I'm probably going to have to pass an individual status to that, and I don't think we can do that with computed properties. So we're just going to defer to a regular method here. Posted on accepts the related status,to pass an individual status to that, and I don't think we can do that with computed properties. So we're just going to defer to a regular method here. Posted on accepts the related status, and then we'll say moment status.createdAt, and then once again use that from now method. And yeah, that should do it. We may lose a little bit of caching bonuses by storing it as a method rather than a computed property, but I think that's what we got to do. So now, we'll say posted on, and then provide the related status. So let's go back to Chrome, give it a refresh, and there we go. Five minutes ago for each. So consider what we've done here. We've updated our template, but we've also specified that when this component is created, we're immediately going to fire off an Ajax request to fetch all of the statuses. That Ajax request just performs a standard Eloquent query. You can do a manual SQL query, whatever you want Wrap API in JS Model 12:08we're immediately going to fire off an Ajax request to fetch all of the statuses. That Ajax request just performs a standard Eloquent query. You can do a manual SQL query, whatever you want to use for your backend. Next, once we have statuses, our template here will re-evaluate. So for every status, we're going to render what you see here. Next, we pulled in moment.js so that we could have a nice readable timestamp here. Now, in closing, another thing you might want to consider is, here we're just performing a random Ajax call. And is it possible that you will want to fetch statuses in a number of places? If that's the case, remember, you could always do something like this, where you say, JS, maybe you have a status model. And we will export that. So now, you could have a static all method that will just do the query for you. So you're just basically wrapping it up. That will once again defer to our Ajax query and return it. So withSo now, you could have a static all method that will just do the query for you. So you're just basically wrapping it up. That will once again defer to our Ajax query and return it. So with that alone, what you could do is something like this, import status from model status, and then change this to status.all. That is building. So if we give it a refresh, that still works like it did before. What you also might want to do is allow a closure here. So like maybe you accept the statuses, and then you will assign them. Well, right now, that wouldn't work, right? And that's because we're passing through a anonymous function here, but we're not using it. So maybe we could do something like then. And you could say .then, receive the response, or once again, the data from the response. And we're just going to call the users then function and pass that through to them. Yeah, that could be an option. So now,receive the response, or once again, the data from the response. And we're just going to call the users then function and pass that through to them. Yeah, that could be an option. So now, we're passing the statuses through. You know what? We don't even need that at this point. We could just bring that back to statuses. But yeah, does that make sense? You have your anonymous function that we are passing to the all method. And that function will only be triggered once the promise has resolved. And then we're just sending through the data from the response. And again, we assign that. So it's just another way to do this. And you're still going to get the same thing. And you might want to reach for this. Yeah, if you have a number of things here, maybe you later have, really, there's no need for a class here. This can just be a simple object that you return. But yeah, anyways, you might have a find method, where you give it an ID. And again, this will justhave, really, there's no need for a class here. This can just be a simple object that you return. But yeah, anyways, you might have a find method, where you give it an ID. And again, this will just defer to an Axios call, return Axios.get, statuses, and then you will append to the ID. Exact same thing here. You can structure this however you want. And like I said, in a lot of situations, it's just not necessary to do this. Sometimes a simple Ajax call is exactly what the doctor ordered. So we will call it at that and continue with our learning in the very next episode. Have fun.
