This episode is for members only
Sign up to access "Build a Forum with Inertia and Laravel" right now.
Get started
Already a member? Sign in to continue
Playing
05. Creating and listing topics
Episodes
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%
Transcript
00:00
The first thing that we need to implement are topics. These are things like inertia, Laravel view, general discussions, any kind of thing that a discussion can go under. Now, I've used the word topics, which I understand could also be a discussion. So if I say the wrong thing, that's why. Probably in hindsight, we should have called them subjects,
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
62 episodes•6 hrs 54 mins•2 years ago
Overview
Ready to build a forum with Inertia and Laravel?
Why a forum? A forum touches a whole load of concepts that you'll use throughout your development career – particularly on the client-side, where we'll be doing most of the heavy lifting.
So, let's build a clean, modern forum with features like markdown support, code highlighting, advanced filtering, user mentions, full-text search, the ability to mark best answers, and more.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!