تماشای این درس نیاز به اشتراک حرفه‌ای دارد.

Prioritizing Content Partials0:00

The next thing I want to do is start focusing on the content area because there are a couple of components, or at least a couple of partials that we need to extract. Now, we didn't quite finish the aside. You know, we did extract the Artists to follow as a component, but we didn't do anything with the follow Idea streams. And that's because, well, for one, I'm not actually sure if we're going to implement that, but if we take a look at the markup, well that's really all

actually sure if we're going to implement that, but if we take a look at the markup, well that's really all that we have left in here. There's of course this input for the search and the horizontal line, but then we have our component then after the component is simply the follow idea streams. So if we do decide to implement that, extracting this out into a partial or into a component is going to be very easy because it's really the only markup that we have left,

Identifying Shared Forms0:54

or into a component is going to be very easy because it's really the only markup that we have left, at least as far as the aside is concerned. So I'm okay ignoring that for now so that we can extract the post and reply forms. There are three of these forms. The first is inside of the feed view. It's at the very top. Then if we scroll on down, then there is the reply. So the feed has two forms. And if we take a look at the profile,

So the feed has two forms. And if we take a look at the profile, the reply form is also listed there. Now these forms are used for two purposes, one for posting, one for replying, but other than that, they are almost exactly the same. In fact, really the only differences are the text area elements inside of these forms. Well that and the label for the text area. So we should be able to extract this.

Creating Reusable Form Partial1:45

Well that and the label for the text area. So we should be able to extract this and use just a single partial view for the form. So let's create a new file. Let's call it postForm.blade.php. This is of course inside of our partials directory. And let's take the first form inside of the feed view. Let's just cut that. We'll paste it here. I do want to make the indentations a little nicer, but for the most part, you know, all of our work is going

I do want to make the indentations a little nicer, but for the most part, you know, all of our work is going to be focused here with the label and the textarea. So that's, we could do something like this. We would of course include partials.post-form, and then we can supply some information like the labelText, which in this case is what postBody, yes. So we can take that out and we would just simply output labelText. And that's going to work there.

and we would just simply output label text. And that's going to work there. But then we also need the name of the textarea field itself. Now the name of the id have the same values and the value of the four attributes for the label needs to have that same value. So what we can do is replace post with simply fieldName and then we will just copy that, paste it where we need to. And then we will supply fieldName here,

and then we will just copy that, paste it where we need to. And then we will supply field name here, which in our case is post. And then we have a placeholder. And I don't remember what exactly that text is, but it's right here, the placeholder for the text area so that we can just output placeholder there. And you know, for the most part, that is going to be sufficient. However, the reply forms do have the rows here.

Adding Optional Rows Support3:21

that is going to be sufficient. However, the reply forms do have the rows here. So we could include rows. In fact, we could go ahead and we could say that if the value of rose is not empty, then we want to output the rose attribute with whatever value was passed for rose. And then we of course need the endif directive, so that now we can essentially take what we used here to output the post form.

that now we can essentially take what we used here to output the post form. And we need to go to about Midway, I think. And yes, here is the form for the reply form. And we can just paste this in. Of course, we need to make a few changes, like the labeled text is reply body. So we will use that. The name of the field is simply reply. The placeholder is reply to Michael's post. And then here we do have rose, which needs

The placeholder is reply to Michael's post. And then here we do have rose, which needs to be the value of five. So with that in place, we can just get rid of this form element and we are good to go as far as the feed view is concerned. And we can just take this here and we can go to our profile and use that same form because everything else is exactly the same. So we can paste that and perform our

Verifying Views Against HTML4:38

because everything else is exactly the same. So we can paste that and perform our sanity check in the browser. There we have the reply form inside of the profile view. Now the icons are a little bit different and that's something that we will talk about here in a moment. But if we take a look at the feed view, we have our post form, then we have the reply form. Now I do want to compare this to the actual HTML

we have our post form, then we have the reply form. Now I do want to compare this to the actual HTML that Simon provided us. So let's start with the feed. Now there are going to be some differences. We currently aren't correctly loading the font. In fact, there's also some static images at the very bottom that we aren't pulling in either. So we're not done as far as pulling in all of the assets. We'll get there. But for right now,

So we're not done as far as pulling in all of the assets. We'll get there. But for right now, I'm more concerned about just these forms. So if we take a look at the form from Simon and the form inside of our view, yes, the font is different, but it looks almost the same. So I think we're good there. If we take a look at the reply form, uh, that's a little bit larger, isn't it? And that might be related to the font.

a little bit larger, isn't it? And that might be related to the font. So before we do anything as far as you know, making any changes to this form, let's wait till we get the font correctly loaded so that we can see, you know, we'll have an apples to apples comparison. But then let's take a look at the profile.html and we will go to profile.html. Let's scroll down a little bit. That looks exactly the same.

and we will go to profile.html. Let's scroll down a little bit. That looks exactly the same. The icons are different, but they are different to inside of, uh, Simon's, HTML as well. So I'm okay with that. Once we get the font correctly loaded, then we will see if the size of these forms are identical. And then, you know, we can make the question,

Committing and Duplication Choice6:24

of these forms are identical. And then, you know, we can make the question, does it really matter if they're identical? I don't know. I want to stick as close to the overall design as possible, because that's what Adrian saw in his mind. So I want to be as close to that as possible. But there we go. We have our form extracted, but before we go, we need to commit our changes. We extracted PostReplyForm, and of course, don't forget to commit.

We extracted post reply form, and of course, don't forget to commit. So now we have extracted the form for posting Posts and replies, and we can make the argument that maybe we should break that up into two separate partials. One for the post form, one for the reply form. But I would rather err on the side of having less duplication because we can always come back and separate them if we need to.

of having less duplication because we can always come back and separate them if we need to.

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟