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 Introduction to Ruby on Rails 7!
You have completed Introduction to Ruby on Rails 7!
Preview
Create a dedicated pricing page, then implement logic that shows or hides features based on user subscription status. You’ll learn how to manage different plan tiers in a user-friendly way.
This video doesn't have any notes.
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
Okay, so in this video we're going
to learn how to add a pricing tab,
0:00
a pricing page, sorry.
0:04
So let's go ahead and do that.
0:05
Now, why are we doing this?
0:07
Just to show you how to add
a new page in Ruby on Rails.
0:08
I know when I started out I
didn't know how to do it and
0:11
it's really important
to know how to do it.
0:13
So let's do this, so
0:15
the first thing that we're going to do is
add a new method to our home controller.
0:17
Now the reason for this is that you need
a new method in the home controller.
0:22
Every page in Ruby on Rails
needs a method generally.
0:26
So we need to add def pricing and
then an end.
0:30
Because every method ends with an end.
0:34
So we save that file and now we have
a method in the home controller.
0:37
Then what we need to do is go to
views > home > index > new file,
0:41
we have to call it pricing.html.erb.
0:46
If we call this a different name and tried
to hook it up with the pricing method,
0:49
it wouldn't work and we'd have to do
some special stuff to make it work.
0:53
This is the simplest way to create a page.
0:58
The next thing that we're going to
do is go to config > routes.rb,
1:00
and what we're going to do
is say get 'home/pricing'.
1:06
What this is gonna do is allow
us to actually access this page.
1:12
So you need the method
in the home controller,
1:15
then you need the pricing actual view,
then you need the routes.rb.
1:19
With all of these things, we're going
to be able to access this page.
1:25
So let's do that.
1:30
It's gonna be an empty page, but
an empty page is cooler than no page, so
1:31
let's go for it.
1:35
So what I'm gonna do is say if
a user is not signed in down here,
1:36
I'm gonna add a new link too.
1:39
I'm in the navbar partial and
we're gonna say link_to "pricing" and
1:41
we're gonna say home_pricing_path.
1:48
As you can see,
it's already recommending it to me,
1:52
class:"nav-link" so
it looks like all the other ones.
1:55
So now we save index, save refresh and
we should get a new link.
1:59
Why is not showing?
2:05
It's because, Yeah,
it's because we are actually signed in.
2:07
So what we need to do is just add this up
here so I can just copy this and put it up
2:13
here and then we'll show no matter if we
are signed in or if we are signed out.
2:18
So look, there it is, pricing, and
as you can see, it's an empty page.
2:23
Wonderful, empty page, we like that.
2:27
Now, you could style this yourself,
I'll show you how to style it,
2:30
now, home pricing,
then you add a stylesheet here.
2:35
You just go stylesheet_link_tag,
you go pricing, and
2:39
then you go to assets stylesheets,
you add pricing CSS file.
2:44
Now another thing that you can do is you
can use CSS libraries like Tailwind or
2:50
Bootstrap.
2:54
I can show you how to add
those in the next project.
2:54
But in this project I just wanted
to keep things very simple.
2:57
So that's why I'm just using basic css.
3:00
Now I'm actually going to add
a stylesheet called pricing CSS
3:03
because that's what I need.
3:07
And then I already have, what we can
do is something like this, right?
3:09
We can just add pricing and
things like that.
3:14
And that'll take years,
it'll take years to style this page.
3:16
So what I did was I just
went on CodePen and
3:20
I basically just stole
someone else's pricing.
3:23
I don't think it's stealing,
I think it's completely allowed.
3:28
I can't find it now, but you just go and
3:31
you find someone else's open
source project of pricing,
3:34
then you can just take on this
website codepen.io, it's fairly handy.
3:38
Then what I'm gonna do is just
take the one that I already have.
3:44
So I'm gonna open a new window and then
go to the project that I already have.
3:47
The source code is online.
3:51
And I'm gonna go documents >
projects > linktree clone one,
3:53
and then just go home > pricing,
copy all this,
3:59
go back to the original one,
copy all this in there.
4:04
And then go to the pricing,
actual CSS file, copy all this,
4:09
put it in there, and if with any luck,
it should be looking good now.
4:14
So we're gonna go from
this page to this page.
4:20
Perfect, it's looking a lot better,
[LAUGH] it's looking a lot better.
4:28
The whims of open source code,
okay, very nice.
4:33
So to revive what we
learned in this video,
4:37
we learned that to create a new page,
we need to have a controller method.
4:39
What is a controller method?
4:43
Well, we're gonna go to home controller,
this is the controller method.
4:44
A def with a name and an end,
that's the controller method.
4:47
Now there's something really
important that you need to know.
4:51
This is really important in Ruby on Rails.
4:54
So notice how the name of
the controller is home controller and
4:56
the name of this file is home.
5:00
And in routes.rb, we say 'home/pricing',
'home/index', this is really important.
5:02
If we change the name of this folder,
it wouldn't work.
5:09
This folder would not know that we
actually want to use the home controller,
5:12
they need to be the same folder name.
5:16
So as you can imagine, this name
corresponds with a folder in the views
5:18
folder, and then the actual methods
correspond with the actual files.
5:23
I'm sure you graphed that
cuz you're a clever guy, but
5:29
that's just what I wanted
to explain to you.
5:32
So what do we learn?
5:34
We learn to create a new page.
5:35
You have to add a new file,
a new method, a new route,
5:37
and then finally you have to add
an actual link to that page,
5:40
which could be created in link_to
"pricing", home_pricing_path.
5:44
And the way that we did that was
by going to Rails routes and
5:48
finding out which route
we actually want to use.
5:50
Now, obviously, another way that you can
actually find out which route you want
5:52
to use is by just going into the views.
5:57
So just go out of the views folder and
you go inside, and
5:59
you see the home and
you want to go into home.
6:03
So, you start the route
with the home word.
6:05
Then you go inside and
you see which file you want to choose,
6:10
I want to choose pricing,
so I chose pricing.
6:14
And then you add underscore path,
and that's it.
6:17
All right, so I'm sure you learned how
to add a new file in Ruby on Rails.
6:20
Let's go, now our application
is looking a little bit nicer,
6:24
although this isn't functional.
6:27
In one of the next projects,
we're gonna be able to add pricing.
6:29
So we're gonna be using Stripe, and
I'll just click buy or something.
6:33
And then we'll add transfer
money to the account.
6:36
In the next video, we're going to be
styling the homepage because this is
6:40
looking very basic, I don't like it.
6:44
So, yeah, let's get to it.
6:45
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