3 Practical Examples to Learn Laravel

4.3 Viewing a List of Tickets

Now, we need to be able to view our tickets. So we're going to display a list of all of our tickets, we're also going to paginate that list so that we don't see the entire list all on screen, and then we need to display an individual ticket. Now, we might not get to all three of those things in this lesson, but we will at least start. So I went ahead and populated the tickets table with some extra data, just so that we have more than just one record to work with. And it doesn't matter what this information is, so feel free to populate your table with whatever you want if you want to do that, but that is already done for me. So what we want to do is display a list, and we're going to do it as a table, so that we can just see the, what I'm going to call header information, like the email address and the title. And then we can click on a link that will take us to another page to display the whole ticket. So we're going to start with that table. And let's go to the Controller. So let's go to our Http folder inside of app, Controllers, and then the TicketController. And we are going to write a method called index, because this is typically what the index is, it's the first page of our tickets or a folder or something among those lines. So the first page is typically going to display all of whatever it is, this controller is working with. So that is going to be our tickets. So let's say tickets equals and we're going to use our model. We'll start by retrieving all of our tickets. And then passing that on to the view. And then we will come back and add the pagination, which is actually quite easy to do. So we are going to pass this onto a view called ticket.index and let's pass in our model. And we're just going to call that variable tickets. And of course that data is going to be our tickets variable. So there we go, we have our controller method, now we need our view. So let's go to the resources folder, views, Ticket, and we're going to create a new file. We'll call it index.blade.php and let's grab some of this from the create view. We want at least the extends and then the beginning section that just saves us some typing. So here is our base view and I'm just going to paste in the mark up. Because once again, it's very simple, but you don't want to see me typing all of this onscreen. So the main thing is that we have a table here. And each row in this table is going to be an individual ticket. And all of the other mark up is just stuff that I took from the Bootstrap template that we originally started with. So there is a card, we have a card header. And Tickets is being displayed there, then we have a body for that card, and so on, and so forth. So that's what we have. So we are going to loop over all of our tickets and display each ticket within a row. So we're going to use a foreach loop and tickets as ticket. And then we will have our tr element. We'll have a td element, in fact, we're going to have, let's see, the email, the title, the date that it was created. And then we're going to have a cell that has links, like edit. So let's just copy and paste this a couple of times, and then we will add in the actual data. So the first thing is the email address. We're going to say ticket, and then email, and we will do essentially the same thing for the other pieces of information, and the title and the created_at. Now, when it comes to generating the HTML for our link, we are going to use the URL function that we have seen before. Let's close out this foreach loop, and I guess, let's just go ahead and see what this looks like before we do the link. So let's go to the browser and we want to go to slash tickets now. Although we can't because we don´t have a route there, yet. So let´s go to our route, we will go to web.php, and let's add a get request for /tickets. And then that is going to be the TicketController@index method, so very simple to get that set up. Now we can go to the browser. Let's go to slash tickets and that will take us to our index. So there we have all of our tickets. But now, we want to be able to paginate them, and we will come back and do that here in a moment. But first, let's generate the link for editing an individual ticket. So we're going to start with a typical a element. But here is where we're going to use that URL function, and we want to generate a URL for tickets, and we need to include the id, because the id is how we reference an individual ticket. So we're going say, ticket, and then we're going to use the id property here. So that is going to generate a URL for tickets/ and then the id, and that will be the URL that we will then set up a route for to edit an individual ticket. And let's finish off that beginning tag. Let's have the text for that element, and now we should have that edit link. So if we look, we do. If we look in the lower right hand corner, we can see our URL, but there is a parentheses there. So that's inside of the string, so we will get rid of them. Okay, so we have our basic view. Now we want to paginate this, and it's really quite simple. We have a method called paginate and this is all part of Eloquent. So we don't really have to write a whole lot of code for this. And we'll come in here and instead of calling the all method, we'll say, paginate, and then we specify how many records we want within the page. Well, since we have five records, let's do a page of two. So that we will have, really, three pages. Two pages will have two records, and in the third page we'll have one. So this is going to give us just two records, but it's also going to allow us to generate the links for going to the individual pages. Now, we don't need to change anything else. We are still passing data to the same view and we're calling our tickets, well, we are still calling that tickets. So let's go back to our view. And somewhere we're going to add in a call to a method, called links. This is on our tickets variable. So whenever you use the paginate method, you get a special object that then has other methods for pagination. One of those is links, and this is going to generate the HTML for the links for the individual pages. So if we go to the browser and refresh. Well, now we have two records on this page, and there is our pages. Of course, right now we are on the first page, and that should be styled because it uses Bootstrap by default, and the pagination class is there. But I believe this template is using Bootstrap 4, and I think they changed the way that the classes are all done for the pagination for Bootstrap 4. So that´s probably why that isn't styled. But if we click on these links, we're going to see that it just magically works. We now have this page, query parameter, in the URL. But the controller is handling that just fine. So we can go to individual pages, and we can see those records on those pages. So as far as pagination is concerned, at least using the built-in pagination, which is going to be sufficient for most cases, this is all that we have to do. We're done. But now we need to be able to view an individual ticket. And we are going to do that by being able to edit, so we will click on that edit link. That will takes us to another view for, not only viewing the ticket itself, but also being able to edit it. And we will do that in the next lesson.