Build A Static File Blog with Laravel
This episode is for members only

Sign up to access "Build A Static File Blog with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
10. Listing blog posts under a tag

Episodes

0%
Your progress
  • Total: 1h 11m
  • Played: 0m
  • Remaining: 1h 11m
Join or sign in to track your progress

Transcript

00:00
Our goal now is to be able to click on any of these individual tags, go through to a root light slash Laravel and then see a list of all blog posts under that specific tag.
00:11
Now this is a lot more difficult than it might seem because of course we're not working with a relational database, we don't have any relationship cell with Eloquent, it's all flat file based. So we're going to have to do a little bit of trying to work around this. Let's go ahead and first of all find out the controller, so let's make a controller here called, let's call this tag index controller, or tag show controller because technically we're showing things under a tag and let's go and create out this root.
00:42
So we want this to be tags slash and then the tag itself. So this is just going to be a string, it's not going to represent a model because we don't have any file based tags and let's switch this out to tag show controller and we'll say tags.show. So let's hook this up in our meta here and then we'll just see what we can do. So let's create out a root here, tags.show and we'll just pass that tag in, that's just a string.
01:10
So let's have a look, yeah we just need to create out our invoke magic method in here and let's accept this tag in just while we're here. So die dump on that tag and head over. Okay so I click Tailwind, we get Tailwind in the URL and we get Tailwind string, same with Laravel. So now our job is somehow in here to, from all of the blog posts we have, filter this down to only those that contain this tag.
01:41
Let's start out with a variable in here and we'll die dump it down here so we can just see how this works as we go. And we want to just do what we did before. So we want to use the sheet facade, we specifically want the posts collection and we want to grab all of them. So remember we can't query this at the file level because a file is not a relational database where we can add constraints to this.
02:03
We have to get all of these and then go ahead and filter these in. So with a Laravel collection we have a filter method which allows us to pass in a closure and then determine what we want to be included in this collection. So for each of these iterations we're going to get a post or a sheet. You could type in this to sheet if you wanted to but I'm going to just keep this as clear as possible.
02:30
So basically we want to return these where the tag is in the post tags. So for here we're just going to return and we can just use the native in array function. And we're going to say if that tag which we need to bring into scope here is within the post tags then we want to keep it. So we get say Laravel, we get all blog posts and then we only show blog posts that have the tag Laravel within the post tags.
03:04
And we can shorten this to an inline closure but let's just leave it at that for now. So let's go ahead and click Tailwind and we get one article. That's to be expected it's this building a blog post in Laravel. Let's hit Laravel and we get two because we know we have Laravel on both of our blog posts.
03:21
So we have successfully got all of our posts. Now all we need to do is just go ahead and return a view and iterate through these. There's a couple of other little things we need to do as well which we'll do at the end. So we're going to say tags.show.
03:35
Let's go and create out a new folder in here for tags and show.blade.php. And to be honest we can pretty much grab the index here and then just make some adjustments to that. And already we're duplicating quite a lot here so we can move this article here over to a blade component too. But let's just try this out.
03:54
So this looks good and we're going to get rid of nothing here yet because we need to rely on the fact a tag actually exists in the first place for this to work. So there's no need to show that condition. Okay, undefined variable posts. Let's actually pass this down and we should be good.
04:13
So posts and posts. Let's go over and there we go. So this is the Laravel tag. Let's go back and click on the Tailwind tag and there we go.
04:23
That is the article within Tailwind. Perfect. So a couple of things that we want to do. Let's click on one of these tags.
04:30
I'm going to show a little message here because this kind of doesn't look like it's showing anything under a tag. So what we could do is on this tag show page we could add something just up here. Let's create an h1 out here with a text of 2xl and a font of bold. And we could just say tag and then output the tag which we're not passing down at the moment but we could very easily do that.
04:59
Just taking in the tag string and we'll just add the tag in there. And there we go. Great. So that shows us now that we are looking at tags for Tailwind specifically.
05:09
And maybe let's just move this out of here and set a margin top of there because it doesn't really make sense to include that spacing within them articles. Okay, great. That looks fine. So now what we want to do is figure out an edge case where what if this tag doesn't exist.
05:28
So let's go ahead and add in Livewire. And yeah, we could technically include that nothing here yet. But really if we don't have a tag called Livewire we might want a 404. So let's roll with that.
05:44
But otherwise you could just bring in that if statement if you wanted to. So how are we going to do this? Well, I really like to use the abort if helper within Laravel. It's really, really nice.
05:57
We give a condition in here. So for example, true. And then we give the status code in here that we want to run. So if I give this a refresh, of course, we're going to get a 404.
06:08
But we just need to fill in the condition now. So we can just say something like posts is empty. So if based on filtering this down on the tag that we have pulled in is empty, then we just abort. Of course, normally this would be done at the root model binding level.
06:23
But because tags are not things, they're just content within things, we have to do this first and then abort if it's empty. So if we head over to Livewire, that's still not working. But if we switch this back up to Laravel, it works.
06:38
So if anyone tries to access a tag that doesn't quite exist, it's just not going to work. Okay, great. So this is looking good. We have our tag functionality working with the edge case of if a tag does not exist.
06:50
Before we go, let's just move over these to their own component. That's going to be very simple. So at the moment on the index page, we are outputting all this content. And now on the tags page, we are also outputting all this content.
07:04
So it's time for a blade component. So let's go ahead and make out a component here called post list item. And again, passing that view flag so we don't get a class attached to it. Okay, so we're going to go ahead and grab the article here.
07:20
And we're going to say x post list item. And we're going to pass that post into there. Let's head over to post list item, paste what we just took out of there, and everything should work.
07:34
And then, of course, we've got this component within this component as well. So we can do this for the index and get rid of this article and put that in there. And we should be good. Let's go over.
07:46
The index is working. Of course, the blog post page is working. And our new tags page is also working. Great.

Episode summary

In this episode, we tackle how to display all blog posts that belong to a specific tag when you click on one of the tags from our blog. But since we're working with flat files and not a relational database, there are a few extra hoops to jump through!

We start by setting up a dedicated controller and route that responds to /tags/{tag}. Instead of relying on Eloquent relationships, we manually grab all posts and filter them to only keep those that have the chosen tag.

After getting the data, we build a new Blade view to list these filtered posts. We also enhance the page with a heading that displays which tag we're viewing, and handle the edge case—if you go to a tag that doesn't exist or isn't associated with any posts, you get a 404 error rather than a blank page.

Finally, to clean things up and avoid repeating ourselves, we extract the blog post list item into its own Blade component. This way, both the main blog index and the tag view pages use the same code to render each blog post, keeping everything DRY and tidy.

By the end, you'll have a neat tags system that works without a database, and some insight into filtering and structuring Blade components in Laravel's flat file setups.

Episode discussion

No comments, yet. Be the first!