Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

7.3 Displaying the Blog

We are finally to the last piece of our application and that is displaying our blog. Which is going to be pretty straightforward. There's just a few things things that we need to set up first. And we're going to do this with the controller because we are going to essentially do two things, we will show our list of blog posts and then we will show the individual blog posts. And while we ccould just do those with simple functions within our routes, we are going to use the controllers. So, let's start by creating that controller. Php artisan make controller and we could call this Blog controller but let's just call it Blog Post Controller because we already have a Blog Controller. And then hand site we probably should have called the controller in our admin section, Blog Post Controller. But naming things is hard, that's why we have that saying. So Blog Post Controller is going to be fun. So, let's go our Blog Post Controller and let's start adding some stuff here because the first thing we really want to do is display our list, so we will do that with a public function called index. We don't need to accept any information and for right now, let's just return a view called blog.index. So, this means that we need to go to our resource folder and let's create a folder inside of our views called blog. So new folder and we will put of course, all of our blog views there. Now, to get us started, let's take the index view from home, let's paste it into blog. And let's get rid of this content here. We'll still keep our container but then we want to iterate over all of our posts. So let's start with the foreach. We don't have these things yet, of course but we will, so, let's say, posts as post and then we will display all of our posts. And I guess we could go ahead and fill this out since we're here. So, let's put everything inside of an article and at least as far as the display of our list is concerned, let's just have the title and the excerpt. We could make the argument that we also want to display the date and time, as well as the author but let's just stick with those two pieces of information. So, we'll have an h2 element that contains an a element, that's going to be for our title, as far as the url is concerned, let's just leave it with a pound sign for now and we will come back and add in the actual url. But for the title, we of course want to use our title property, so we'll have that there and then for the excerpt, let's just use a p element and we're just going to output the excerpt. So that's going to get us started at least. So, now that we have our view, let's go ahead and write our index method, so that we can provide it data, so that it can display that data. Now, we want to retrieve only the published posts. And if you remember, we determined if a post is published based upon the published at Field. If it's no, off course it's not published but if the date is less than the current date and time, then it is published. But if it is in the future, then it hasn't been published yet, even if it is a second off, it technically has not been published. So we're going to be working with dates and that means, I want to use carbon. Because it makes it a little bit easier to work with dates and times. So, we will say composer require nesbot/carbon. And we will bring carbon into our controller here, so use carbon/carbon. We also want to use our model, so use app post and then we will just query. So, let's say published equals, we'll say post. And we could make the argument that eventually we want to display the author information here. So, let's go ahead and do that, it's not going to be that big of a deal to include the author information. So we'll say with user, where the published_at is going to be less than the current date and time and so, we will say carbon now. And we want to order this by the published date and time but we want it in descending order because that's typically what we want. We want the newest stuff at the top, so we will orderBy published_at descending. And then we could call the get method but we want to paginate. Right now, we don't have very many blog posts but eventually we will. So let's paginate and let's just pick an arbitrary number, 15. So, that's going to give us our posts, so we can pass that on to the view. We'll call it posts because that's what we used in the view and then we have published. Okay, so we have almost everything set up. We need to set up our routes. So let's go to routes web.php and down here at the bottom, we have the old route for home. So let's repurpose this, we're not using that anymore, so it's not gonna hurt its feelings. We'll say BlogPostController@index and let's give this the name of blog. Because we do need to add a link up here in our nav. So we can do that by specifying a name for our route, so, let's do that and then we will test to see how this is working now. Let's put this link before our dynamically generated page links. And it's going to be a li element with an a element, we'll say route blog and then the text, it doesn't need to be anything but blog. So let's refresh, we see blog now, let's click on blog. And we get an error, Undefined variable pages. Now we didn't use pages anywhere within the view or anything. So let's read on. That is inside of the partials\nav.blade.php. So this is from our composer. If you'll remember, we used a composer to get all of our pages, so that inside of our views, we could generates our menu. The problem is, we said that's, use the pages only inside of our home views. So we want to go to our ComposerProvider, that is inside of the providers and then the ComposerServiceProvider. And we want to extend this beyond home, we also want our pages inside of our blog views as well. So, all we have to do is change this first argument to an array and then we specify the views in each element of the array. So, we have everything inside of home, now we're going to have everything with blog. So now whenever we go back, let's refresh the page and we see that it works and we have our blog list. Now of course these links don't work because we dont have anything yet to display them. So, let's go back and let's go to our route, let's create another route, one for the individual blog posts. So the URL is going to be blog/slug. Now, whenever we set up our database, we did not say that slug had to be unique. So, we might want to add something else in, like the {id}/{slug} or something like that, you can make whatever choice you want to do. I'm just going to say slug, this is going to go to the view method on our blog post controller. And let's call this blog view, so that we can generate that url. So let's go to the index view again. And instead of having this pound sign, let's create our url with the route blog view. And then we will specify the slug information as host slug. So now, whenever we go back, let's refresh, let's look at the URLs. We are getting the appropriate URL but of course we haven't written anything else and that view doesn't exist. So let's go back to our blog post controller and let's add a method for viewing the individual posts. So view, we have the slug coming in. And our query is going to be somewhat similar. We want to retrieve the post with the user, where the published at is less than now because that's important. We don't want to display just anything, we want to ensure that the blog post is published. But we don't need an orderBy and we don't need to paginate. Instead, we just need to firstOrFail but we also need to specify the slug as well. So, with the where, we're going to pass in an array of arrays. Where one of our tests is the published field and then the other is for the slug. So let's do the slug first. We'll say slug is equal to whatever was provided to the method and then published at and then first or fail. So then we will simply return the view, we called that blog view and we'll pass that data as post, and post there. Let's change that variable name and let's make this look nice and clean. And there we go. So we need a blog_view view and so we will go to our blog folder. Let's just copy what we have with index and we will rename it to view.blade.php. Because this is going to have quite a bit of what we want. We still want the article, we want the h2 and the link but we also want to include author information and the date time. So, let's put that inside of a p element. We will say, published by and then we would include the post username and then the date. Now, if we just say post published_at, we are going to get the exact data that we have in the database. So, this is something that we will need to adjust here. But let's finish by outputting the body and there we go. Now, in this particular blog post, I did add some html in it. So, here's what we could do. We could either Just output the body safely or we can also make it raw, whichever you think that you need to do, go for that. I'm going to go for the raw view, so that we can see that HTML and there we go. Now, the date is something that I want to address. We want something that is a little bit more readable and you could also make the argument that the end user doesn't really care about the time, it's just the date. Now, since we have carbon, we can use it to parse this into a formated date stream. And we could do that instead of our view but that's adding a little bit of extra logic and we have something that allows us to do that extra logic outside of the views, it's the presenters. So, let's write another presenter, actually we're gonna copy and paste the presenter and then make a few changes. So, we'll take our Page Presenter and we will rename it to Post Presenter and let's add a method called in published date. So published date and we will return carbon. We are going to parse the timestamp that the published at field gives us and then we want to return to formatted date string. Now of course we need to bring in carbon, so let's do that. And we also need to set up this presenter with our post model. So, after we finish bringing in carbon, let's go to our post and there it is, actually that's open a page. So that we can just copy and paste, we want to use Larecasts Presentor PresentableTrait, let's paste that into post. We also need to use that trait, so let's use PresentableTrait and we also need to set that protected presenter variable as well. And the path to that is App\Presenters\PostPresenter. So now inside of our view, let's go back. We can use that method, so instead of published at, we will say Present and then Published date, so whenever we view it in the browser, we should just see an error apparently, I need to change the name here, so PostPresenter, it's not enough to change the name, we just got to change the class name as well. So now we have a readable date, it's not that the other wasn't readable but this is much more readable. And so now, we are done. We are displaying our list of blog posts and then we are displaying the individual blog posts. One last thing though, we need to set up the UI for the pagination and index. But that's easy enough to do. We just have to say posts- render and we're good to go. So now, we are done displaying our blog.

Back to the top