Creating and listing topics: Build a Forum with Inertia and Laravel

00:20

but topics kind of make sense as well. So our goal for this episode is to get a drop down here, or over here eventually, that will show a list of all of the topics within the system, so we can filter by them. And then we can use that same list of topics when we're creating a discussion as well. So of course, the first thing to do is make out a model called topic,

00:41

and we're going to go ahead and create a migration alongside of that as well. So this is actually pretty straightforward. So let's go over to the create topics table, and let's just fill in the details that we will need for this. So a topic is going to need a name, of course, that will be something like Laravel, Inertia, whatever you want. And we're also going

01:00

to have a slug here, which is going to be unique because we don't want the same one when we're filtering. So that's pretty much it for our topics. We don't need anything else here. So we'll go ahead and migrate out changes. OK, so over in the topic model, we are going to fill in fillable here, but we're not going to add in any kind of backend to this.

01:20

So we're not going to be manually creating these. If you are using an admin panel, you can easily add this model in to something to be able to add more topics in. So the name and the slug are both going to be fillable. OK, so now we've got this. Let's add some manually to the database. We'll just add a couple for now. So let's add Laravel with a Laravel slug. We didn't really need the

01:45

created and updated updates, but we'll add them in there anyway. We'll create a inertia in here as well. And why don't we just add one more for luck and we'll add view in there. Great. So we've got three topics that we can choose from now. How do we get them on this page so we can start to iterate through them? Traditionally, what we would do is over on the forum index controller,

02:09

we would pass these down as topics like this. The only problem is thinking slightly ahead. We need these on the discussion form as well when we have this eventually pop up. So it would be a really good idea for something as global as forum topics to have these as shared data. And we've already had a peek of this over in the handle inertia requests middleware where we can share

02:32

data with all of our views. So we're going to be passing them down here instead so we can access them from anywhere. Now, before we actually start to pass these down, we're going to be making use of Laravel's API resources so we can pass down a lot more structured data to our view components. So we're going to go ahead and make out a resource in here called topic resource. Now,

02:58

if you've not worked with these before, a resource which lives over in app HTTP and resources gives you the opportunity to structure the data that you are iterating through or just showing an individual model in a lot better way. So all we need to do here is return just the things that we need so we can return the ID. We can return the name of this and we're going to need the slug for

03:21

filtering purposes as well. So we want to return these three things. Just a little tip here. Instead of this array, what we could also do in this case, because we have quite simple data here and not many relationships, we can actually use this only and then just pass down the columns that we want to see. So name and slug. So how do we use this API resource? Well, we're going to go ahead

03:43

and reference the resource, so topic resource, and we have lots of different topics. So we're going to use the collection method here and we're just going to pass in using Eloquent the collection of topics that we want to show. So we're going to say topic and we can just say get. You could order these as well if you wanted to by their name, something like that. So you could order them by

04:06

their name in ascending order or you could probably order them by slug, but that should give you a much better list. Okay, so if we head over now to this page, of course nothing has changed. What we're going to do though is access the topics, dump them out, start to iterate them through them inside of a select. So if we head over to the forum index here, let's go and over in our main

04:29

section here, just go and access these. So we know that we can access these by the page variable props and now topics like so. Let's see what we get and sure enough we have a list of all of our topics. By default when we're working with API resources, it will wrap it in this data attribute which is fine for things like pagination because we're also going to have links alongside the JSON

04:53

that's returned, but most of the time you don't need this. So I'm actually going to head over to the app service provider and under the boot section we're going to reference the JSON resource class and we're going to say without wrapping. The JSON resource class, if we head up, that's been auto imported but it comes from here if your editor doesn't do that. Okay, so now the difference is we

05:14

just have an array of objects that we can start to iterate through and that makes it nice and easy to do. So let's build this select component out here. It's just a normal select. We are going to move this over to a view component so we can reuse it a little bit easier and let's give this an id of topic and let's start to iterate through each of the options in here. If we just add something in

05:37

there manually for now it's just a normal select that we would find on a page. So we want to iterate over these options so we're going to do a v4 and we're going to say topic in and remember this comes from page props topics and we are going to add a key in here as well because when we iterate through stuff we always need a key that's going to be the id that's why we included the id in here

06:04

and let's just pull this down a little bit so it's a little bit neater. The value for this is going to be the slug so we're going to bind this in within view and that's just topic and slug that just means that this option now actually has a value. So we now have a list of not quite all of our topics we just need to switch over the actual name here which we know is topic and name and there we

06:28

go we have a list of all of our topics in there. Now we also want to include a kind of default option at the top with all topics because this is a filter we of course need all topics first to show all of our discussions under that particular topic and then we can select them from there on. Let's move this select over to a component so we can style it up with Tailwind and it's a little

06:52

bit easier to duplicate so if we go over to our component section you can see there are a huge amount of components that are already included in Laravel Breeze for form items but we don't have a select component in here so let's create out select.view and let's go and create out a template in here. What we're going to do with this is basically just take a select element we're going

07:16

to get rid of the id because we can pass that attribute through and it will be bound to this and we're just going to add in some classes here. Now we can actually steal these from things like the text input because that already has some predefined classes and that will just help us keep sort of some sort of visual similarity between everything so in here we're just going

07:35

to have the main slot where all the options are going to be passed through to and now we can just change over this component still keeping these options in here but now we just have one place where this is to find out so let's create out a select instead we could probably change the name of that so there isn't a clash between the html name but we'll leave it as it is for now and let's

07:55

go to our script section and just pull this in so we'll pull select in from components and select let's check it out okay that looks a lot better and we have all of our options in there that we can choose from let's just tidy this up by adding in a label to this so i'm actually going to wrap this thing in a div like so like we've seen without other forms and i'm going to go ahead and add in a

08:22

input label and that comes from we just pull this down under our components input label these are just things that are already used without throughout breeze and for this we'll say for topic we'll give this an id and we'll go and set the value of this to topic and let's just self-close this actually we don't need it as an open element and there we go that

08:55

just means that we can click on that now and actually see this selected now we don't want this to be seen on the page so we're going to set this to screen reader only so it hides it and that's still accessible now to screen readers so they can see exactly what's being selected and there we go they are a list of all of our topics

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Episodes

Transcript

Episode summary

Episode discussion