Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Rails 8 Course - Beginner to Intermediate!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
This video covers implementing a comment system in a Rails application, including creating comments, setting up associations, displaying comments dynamically with real-time updates using Turbo Streams, and enhancing the comment display with additional user information.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now if I create a new post and
I say this is a good post,
0:00
then I attach an image, so Create Post.
0:03
I want people to be able
to comment on this post,
0:06
I want to add real time
comments to this post,
0:09
so that everyone can comment their
opinions on the post, right?
0:11
Just like Twitter, only that these
comments are going to be dynamic such that
0:14
everyone will be able to see them
without refreshing their browser.
0:17
So to go ahead and get started,
we're going to open up the terminal,
0:19
stop the server clear, and then inside of
here we're going to say rails g resource.
0:23
Which is something we haven't seen before,
but it's lighter than a scaffold, but
0:27
it still has some more stuff to it.
0:31
Rails g resource and
we're going to call it comment,
0:32
then we're going to say
post:references and user:references.
0:36
And then we're also going
to say content:text,
0:41
hit Enter on that command and
it's going to create the resource.
0:44
Then do rails db:migrate.
0:49
Now run the command rails s once again,
okay?
0:51
So if we just look at what that resource
actually did, what that command actually
0:54
did, it created the comments folder, it
created a controller called comment, and
0:57
it created a model and
most importantly, it created a root.
1:01
So let's go to the roots rb file and in
the roots b file is in config roots rb and
1:04
inside here we're just going to
nest this resources comments under
1:09
posts because it's gonna
go posts/2/comments, right?
1:13
So we're gonna go do end and then we're
gonna drag this comments in here.
1:18
Next we're going to go to the comments
controller and inside of here we're
1:24
going to have to add some methods
to actually create the comment and
1:27
to set the comment params.
1:30
So let's go ahead and do that.
1:31
So the first thing we're gonna do
is actually set the comment params.
1:32
So we're gonna do def comment_params and
then end cuz all methods end with an end.
1:35
And so we're gonna do params.require
comments because that's how
1:42
it always starts out.
1:46
And then .permits(::content) and
we're also going to emit the user_id.
1:48
This is important so we know which
user actually posted which comment.
1:53
Then we're going to do def create because
we want to actually create the comment and
1:56
we're going to do @post, so
you go to post.find(params(:post_id).
2:02
This is just gonna find the post via
an id that we're gonna pass in the form,
2:08
and then we're gonna say
@post.comments.create.
2:13
And then we're gonna pass in
comment_params because we wanna create it
2:17
due to the common params and
we're gonna do.merge and
2:21
then we're gonna say
user is the current_user.
2:24
Then after we do that,
we're just going to redirect_to our post.
2:27
So that's it for the comments controller
and now we're going to go to the models.
2:31
So go to the models folder and
2:34
inside of here we're gonna
go to the post folder file.
2:36
And inside of here at the top we're gonna
say has_many, we're going to say comments.
2:39
And while we're here we're just
gonna say belongs_to :user, and
2:45
then we're gonna go to the user.rb file
and we're gonna say has_many comments.
2:50
And we're also, while we're here,
we're just gonna say has_many :posts.
2:57
And then in the comment rb file,
it already says belongs to post and
3:02
belongs to user, which is perfect.
3:05
Now the next thing that we're
going to do is create three views.
3:07
So the first one is
called _comment.html.erb.
3:10
So go to the comments folder, right-click
hit New File and do _comments.html.erb.
3:13
Then create another file and
we're gonna call it _comments with an s at
3:19
the end.html.erb then create another file
and we're going to call it _new.html.erb.
3:23
This one is gonna be the form,
this one is gonna be the one that, so
3:30
the _comments is going to be the one
that renders all of the comments.
3:33
And this file is going to
display the specific comments.
3:36
So in this one, what we're going to
do is we're gonna create a div and
3:39
we're gonna say id and
the id is going to be equal to the dom.
3:43
So dom_id(comment) and
then wrap that in quotes,
3:47
and then we're gonna say </div>.
3:54
And then inside of here we're going
to have the actual comment content.
3:59
So comment.content, and then we are going
4:04
to say _time_tag comment.updated_at.
4:09
So this will tell us when the comment
was actually updated at or created,
4:14
then after that we're
gonna go to the _comments.
4:17
And inside of here we're
gonna say <h2> comments, and
4:20
then after that, make sure to have
a closing greater than sign there.
4:25
And we're gonna say <div id = "comments">,
and then we're gonna render.
4:30
So render post.comments cuz
we want to render the actual
4:35
comments that are to do with that post.
4:40
And then we're going to say </div>,
that's the end for this div,
4:43
then in this folder, we're also
going to render the actual form.
4:46
So do render, render "comments/new",
and then we're gonna pass in the post.
4:49
So post: post.
4:53
And then in the form, and
then in the form itself or
4:55
the _new.html, we're gonna have a form,
so form_with model.
4:58
And then we're gonna pass in the post and
the comment.new, and
5:03
then we're going to say so
do f is just passing in the variable.
5:09
So end,
because all forms end with an end, and
5:14
we're gonna say your comments,
and then <br>.
5:18
And then we're gonna say
underscore f.text_area, and
5:22
we're going to say content, size "20x5"
close that off, then do a <br> tag.
5:27
And then we're gonna say f.text_field
5:38
::user_id value this current_user.id,
5:42
and the style will be display:none.
5:47
And at the end of that we're going
to say if current_user, like this.
5:51
And finally we're gonna have
an f.submit button and an end.
5:56
Now let's go to the post show page,
so go to the post show.
6:01
And inside of here we're going to
have a render "comments/comments",
6:05
and then we're gonna pass in the post.
6:11
So, post = @post.
6:14
So with all that coding done,
if we actually refresh the page,
6:18
I'm getting a syntax error, I need to go
back to the code cuz I made an error.
6:21
So let me go back to new,
and then inside of here,
6:25
if I just make this full screen,
this semicolon is supposed to be inside.
6:29
So if I do that,
it should be going away, all right?
6:33
So now we actually have your comment,
a comments form, and
6:36
we just need to render this form submit,
okay?
6:40
So now let's see what happens if we
actually try and create a comment,
6:43
the first comment, Create Comment.
6:47
And if we scroll down, as you can see,
it says the first comment December 29,
6:49
2024 22:19, I'm recording a bit late.
6:53
But anyway, the comment system is
working and if I create another one,
6:56
this is the second comments,
we can see that it's definitely working.
7:00
Now the only problem I have with
this is that it's not real time, and
7:04
the good news is to fix that,
it's actually really simple.
7:07
So I'm just gonna demonstrate that it's
not real time by opening up another
7:10
browser because this is how you do it.
7:12
Go to the same URL and then if we go and
create another comment on the left,
7:14
we should have it creating
another comment on the right.
7:18
Let's see.
7:21
Create Posts, Create Comment.
7:22
It created on the left, but on the right
it nothing happened, right, but
7:24
if I refresh, it's there.
7:28
So we're gonna make it so that it
automatically shows up without refreshing.
7:29
And the good news is to do that,
it's actually really simple.
7:32
Go to the posts show page and then at the
top of this page we're gonna do turbo_,
7:34
let's get my mouse out of the way,
turbo_stream_for.
7:39
And then we're gonna say, or no,
I'm sorry, turbo_stream_from @post, and
7:43
then we're gonna go to the comment model.
7:47
So go to models comment model, and
7:50
inside of here we're
gonna say broadcasts_2.
7:53
Then we're gonna pass in post and
that should be it.
7:57
So with those two lines of code we should
have our real time features enabled and
8:00
it should actually be working.
8:03
So if I save and refresh and then I open
up edge again navigate to the same place.
8:05
Now if I add a comment, I say bad Post,
it should be real time and
8:13
hopefully it will show up on the right and
the left at the same time.
8:17
And as you can see, it has worked,
8:21
it showed up on the both sides of the
screen at the same time, which is great.
8:23
Which means we have real time comments
on our page, on our inner application.
8:27
Okay, so now that that is complete and
we have real time comments.
8:30
We're actually going to make it so that we
have the username of the user show up here
8:33
in the post as well as the time it
was posted and more stuff like that.
8:37
So let's go ahead and
get cracking on that.
8:41
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up