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

Pagination UX Bug0:00

Onto our next bit of refactoring. This is going to be a really quick one, but I think it's going to make a big difference in terms of user experience. All right, so we've implemented a really nice user experience where when we create a new puppy, it's going to scroll us up to the top so we can see a new creation, which feels really nice. But check what happens if I go to another page than the first one.

But check what happens if I go to another page than the first one. So say we on page three of 14 and I create another puppy. Now watch what happens as I submit the puppy, it's going to scroll up, but it's going to scroll up the wrong page, the page three, where we can't see a puppy. And to be able to see the puppy, we'd need to navigate to page one because this is where it's been created. So that's a bit unfortunate.

Reset to Page One1:05

to page one because this is where it's been created. So that's a bit unfortunate and it sort of ruins our nice user experience, but I think we can fix it fairly easily by making the pagination go back to page one whenever we submit a puppy. So it's going to create the puppy, change the page parameter to equals one and then scroll to the top. Let's try that. This should be pretty trivial.

Update Store Redirect1:26

Let's try that. This should be pretty trivial and it's going to happen in our PuppyController right here in the store method. So whenever we have created the puppy and we redirect here, instead of going back to the same page, well we want to go back to the same page, but we want to pass some parameters to it and we can't pass parameters to the back function, but we can change this to redirect.

and we can't pass parameters to the back function, but we can change this to redirect and then specify the route. And here the route we want is the homepage. So that as is would be exactly the same as back. But now we can pass here some parameters and we want to do page and set this to 1. That should be all we need to do, and we'll take care of using the success message at a later stage.

Test the New Behavior2:11

and we'll take care of using the success message at a later stage. But for now, let's go try submit another puppy from a different page than the first one. So I'll scroll down and go to page two. And let's go and create, we'll call that puppy firstPage. And the trade is going to be redirect, and you'll never guess what picture I'm going to select. And this time when I submit the form, I'm expecting to go to page one and then scroll up and see our firstPage.

And this time when I submit the form, I'm expecting to go to page one and then scroll up and see our first page. Puppy newly created. Ready? Let's try it out. And hey, that worked alright. Like I said, a quick and easy fix, but I think it makes a huge difference for the better. See you in the next one.

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