Playing
01. Introduction and demo
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
So welcome to this course on building a forum with Inertia with Laravel on the back end and Vue on the front end.
00:06
In this episode, I'm going to guide you through all of the features that we're going to be building. And let's jump in and take a look. So as you can see here, I am not logged in at the moment. We've got no discussions and you can just see a few filters on the left hand side here.
00:20
I'm going to go ahead and log in with an account that I've already created here. And you can see that a couple of things have changed. We've got a button just up here now that we can use to start a discussion. And we've got some more filters here as well.
00:31
So topics or discussions that we're participating in and things that we've been mentioned in. So we're going to be building the ability to mention users by their username. We can modify our username as well over in our profile section. So we can change that here as well.
00:46
And that will be on the registration process as well. So let's go ahead and create out a discussion here. You can see we get this pop up just down here. The reason that we're doing it like this is if we wanted to navigate between different pages to reference other things while we're creating a discussion,
01:02
this will actually persist on the page. It means that we can click through topics to find out more information, perhaps copy and paste stuff into here. And this state will hang around for as long as the page isn't refreshed. So let's go ahead and just give this a discussion title.
01:17
We'll just say need help. And we'll just say, hey, I need some help with this code. And let's go ahead and use Markdown here to just write out some JavaScript code. You can see down here as well. We have some Markdown shortcut buttons.
01:33
What we can do with that is highlight things and click just to convert this to Markdown. Or you can just click these on their own and then just start writing things within here. And there are a ton more that you can implement here. We're going to be using a package for this, which has loads of other options.
01:47
So you can add more once you're done with the course. So I'm just going to grab some JavaScript code here just to kind of test this out. We'll just go ahead and paste all of this into here. And I think that should be it. Now, we can also mention users.
02:00
So let's go ahead and just mention another user in here. As soon as we start typing here, you can see that we get this list of users come up and you can just go ahead and mention a user in there. And that will then appear in their mention list. And you can even trigger this to send an email to them to let them know that they've been mentioned.
02:17
So I'll go ahead and just, yeah, we'll keep that because we'll switch over to Maple's account in a minute and see that they're being mentioned. Let's go ahead and choose a topic first. I've only included two here, but of course you can add more. And let's go ahead and switch that to inertia. And we also have this Markdown preview. So we can click this, which basically just toggles between these two views.
02:36
And that's you basically just preview Markdown here. So we'll go ahead and start this discussion. We're put straight over to the discussion that we've just created. This user will have been tagged in this or mentioned in this in the back end. And you can see we've got this code highlighted nicely here as well.
02:54
So there's a couple of things that we can do from here. Of course, we can reply. We can reply from here or we can reply from here. And if we do reply from here, that will add the original author of that post. So it's just a little bit of a convenient way to notify them that you've replied to a specific post.
03:12
We can, of course, edit these posts as well. Cancel this off. It works pretty much as you expect a forum to work. So I'm going to hop over to Mabel's account, which obviously now we see this new discussion that's just appeared here. No replies. And you can see that the last reply of the last post was by me.
03:28
So I can jump in here and just reply. And you can see that we can't obviously edit this because it's not ours. So I'm just going to go ahead and say, here's the solution. I think that will do for now. Let's hit reply on this. And there we go. Now, you also notice that that jumped down to the post after we had posted it.
03:48
This is actually fairly difficult to do because we're implementing pagination as part of this course. What's going to happen is if we are on, say, page three and or page one, and we post a topic and that goes over to page two in the back end, we're going to need to calculate which page we need to push the user over to.
04:08
And then, of course, we also need to work on this scroll functionality as well. So that looks pretty simple. There are some pretty advanced things in here that we can use to calculate all that stuff. We're going to try and keep this clean as possible. So it works really nicely. What that also means is you can reference any post on any discussion from anywhere in your app,
04:27
and it will always go to the correct page and it will always scroll down to the position of that post. So, of course, we're going to cover that in the course. OK, so I'm just going to reply again here, just say, hey, and we'll just look at the deletion functionality. It's pretty simple. It just gives you a little window up here to set this and that just gets deleted.
04:46
You can also delete topics as well. So we'll be including that. And as part of all of these actions that we can see here, we're going to be implementing, of course, authorization to make sure that the user can do these things. We're also going to be passing that through to the client side using view or to view.
05:03
So we can actually show these buttons based on the authorizations that we've set inside of Laravel. So that would be a really good lesson on how to authorize within an inertia app as well. So we can mark the best answer here. We can mark our answer as the best answer as well on purpose, because we may edit this to add in a solution. So we can click to mark the best answer.
05:26
And that's going to go ahead and just add this round it. And that will now be solved. So with that done, these filters now become a little bit more useful. So unsolved topics, we don't have any at the moment. Solved topics we do. So we can filter by whether something has been solved.
05:40
We've got a filter for whether or not things don't have any replies. So if we just say, hey, and just create a new topic in here really quickly or a new discussion, and we see no replies, that now appears. Unsolved, that now appears as well. We've also got a my discussions list. So the discussions that we've created.
05:59
Now, this is participating, which means things that we haven't created, but we have replied to. So on Mabel's account, we know that she has participated in this need help topic. So of course, filters are going to be different for everyone. We also have mentioned as well, which I haven't been mentioned in anything just yet.
06:16
However, Mabel has been mentioned in this need help discussion. So it means you can see which discussions you are being mentioned in as well. So aside from that, we also have, of course, the ability to search. So let's search for help and that appears.
06:30
We can also choose by topic as well. So we can filter this down by the topics that we want to see. And generally, there's a whole lot more we're going to cover here behind the scenes. On the face of this, it looks pretty simple. But actually, when we start to dive down into this, there's a huge amount to learn from building a forum.
06:47
And a lot of this knowledge you can take over to other projects. And it's a great thing to build to have all of this stuff in your toolkit. So now we've seen how this works. Let's hop over to the next episode, do a little bit of setup and then start building this out.
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!