Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we add SASS support, and tweak a few things in our rails application. Now we have a basic app that allows us to post jobs, and see and edit the jobs in the system.
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
[Master Class] [Designer and Developer Workflow] [Adding Plugins]
0:00
So, now we've gotten our application up and running, and we've created the basic scaffolds
0:06
and sent that over to Nick so he can start working on his.
0:10
But, there's a couple more clean up things I want to do before
0:13
I consider this iteration finished for me.
0:16
The first thing I want to do is go ahead and add the ability to use
0:20
SASS style sheets in our application.
0:22
SASS is an alternative way to write style sheets, much like HAML is an alternative to ERB.
0:25
So, I want to make sure to get that up and running so Nick can start building
0:31
the style sheets with SASS.
0:33
Then we want to go ahead and add jQuery to our application so we can use it later,
0:36
and then there's a couple things like, for instance, the root of our application.
0:40
It shows us the welcome page, and we want to go ahead and change that
0:45
to show the list of jobs.
0:48
So, the first thing we want to do is go ahead and install SASS.
0:51
I'm going to go ahead and stop the server, and let's open up the gem file,
0:55
and let's add the gem SASS.
1:00
Now, there's a lot of stuff sort of bundled in here, a lot of commented out stuff.
1:07
I'll have to go ahead and clean this out so it's a little bit easier to see.
1:12
We can add back in anything we need, so all I'm doing right now is deleting
1:15
all these commented lines so we can see very quickly what is required of our application.
1:18
So, I'll save this out, and once again, we'll run bundle install.
1:24
So, now we've got SASS installed, and let's go ahead and test this out.
1:37
If we open up our public style sheets folder, what we're going to want to do is
1:43
add a new folder that will call SASS, and this is the directory all of our SASS files will be in.
1:49
And let's create a sample SASS file we'll call application.sass.
1:59
And let's go ahead and just add body and set the background color to a light grey,
2:14
just to see if it's all working.
2:25
So, let's start up our server again, and if the SASS is configured properly,
2:27
every file that we create here will now be accessible in stylesheets/application.css.
2:35
So, let's go ahead and try to see if we can get to /stylesheets/application.css.
2:45
Looks like there's an error and that's my fault.
2:58
Rails only generates the CSS file from the SASS file anytime we load a dynamic page,
3:01
so if I just try to go to application.css, it hasn't generated the file.
3:06
However, by generating this error page, it now has triggered the SASS to CSS conversion,
3:12
so if I refresh, we should see the CSS file generated from the SASS, so there we go.
3:17
And we can go back to our SASS file here, and we'll add some more definitions.
3:25
And let's see if it updates the file when we refresh it.
3:33
So, these are going to be generated every time a dynamic page is called,
3:37
so let's open up another page.
3:41
And if we try to refresh it again, we'll see that now it has rendered a dynamic page,
3:50
it'll update the application.css.
3:54
So, let's go ahead and just add the application.css to our layout
3:57
just to see if it's working.
4:01
So, that's going to be in app, views, layouts, application.html.erb apparently.
4:05
So, it looks like there was a little error with all of our generation and destruction,
4:14
so what we can do is go ahead and reformat this to be a HAML page
4:19
so we don't leave an existing ERB file just sitting around.
4:25
Let's go ahead and convert this, and we can do this pretty quickly by hand.
4:28
So, we're going to replace the doc type with !!! 5.
4:36
This will be HTML, replace this with head, tab it in.
4:42
Change this to title, remove the closing tag.
4:50
We can simply remove those and remove the trailing.
4:57
It's pretty easy to convert small pieces of ERB to HAML.
5:04
We don't need the closing tag.
5:08
We'll create a body tag.
5:11
The yield for the actual page will just be indented underneath it,
5:18
and we can get rid of these.
5:22
So, let's see if we did the translation properly and go back to here.
5:24
If we refresh, it looks like it's exactly the same, so we translated it just fine.
5:28
And let's go ahead and see what style sheets is loading up.
5:34
So, we can see it's loading up application.css in Scaffold,
5:41
and I'm sure Scaffold is overriding the rules that I wrote here, but we can see
5:45
that it's loading up, and if we look at the data here, it looks like it's just fine.
5:48
Now, I'm pretty sure Nick's going to go ahead and get rid of scaffold.css
5:54
and begin working on his own style sheets, so I'm not really going to touch that,
5:56
but now I know I have SASS installed and it's working properly,
6:00
so I'm going to go ahead and commit that, push it, and send him a notice about it.
6:04
So, I'll do git add., git status, just to check out what's going on.
6:09
Updating our gem file, we updated our application.html.haml.
6:15
We're updating our application.css in SASS, and let's go ahead, and looks like
6:20
we haven't staged our delete for our html.erb since we renamed it.
6:25
So, let's go ahead and git add app/views/layouts.application.html.erb.
6:30
So, if we do git status again.
6:40
So, let's go ahead and do git rm app/views/layouts/applicaton.html.erb.
6:46
So, we're staging that we removed the ERB and instead, added the HAML.
6:57
So, if we take a look at our git status again, we can see that looks pretty correct for us.
7:01
So, let's go ahead and git commit and add a message "Added SASS Support,
7:08
and application.sas."
7:19
Let's go ahead and pull to see if Nick has updated any changes at this point.
7:25
Not seeing anything, so let's go ahead and push.
7:33
So, now that I've updated this, I think Nick's going to be pretty interested
7:43
that I added SASS support, so I'll send him a message.
7:46
"Hey Nick, just wanted to let you know that I added SASS support."
7:50
"So, if you put a SASS file in layouts/stylesheets/SASS
7:53
it'll automatically be compiled into the root stylesheet's folder. Enjoy!"
7:57
So, now we've added SASS, there's a couple more quick things I want to do.
8:03
One is adding jQuery into our project, and the way we do that is using the
8:08
rails/jqueryrailsgem.
8:12
Now, what this is, is it just adds the ability to use Rails from jQuery in Rails 3,
8:20
and Rails 3.1 jQuery will be the default, so this step won't be necessary.
8:25
But right now, we are working in Rails 3.0.9.
8:29
All we need to do is add this gem jQuery Rails to our gem file,
8:34
so let's open up our gem file once again.
8:38
Paste that in.
8:42
And again, we'll run a bundle install.
8:44
Okay, so now we've installed the jQuery Rails, and there's one last thing
8:51
we need to do to to initialize it.
8:55
And we can see this here.
9:00
We're going to run rails generate jquery:install.
9:02
We can pass UI to enable jQuery UI, however, I don't believe we'll be using it right now.
9:04
So, let's go ahead and just do rails generate jquery:install.
9:10
So, it's gone ahead and removed any prototype,
9:19
which we did not actually have in there,
9:21
and it copied jQuery 1.6 into our JavaScript's directory, as well as the
9:24
jQuery unobtrusive JavaScript adaptor, which will allow a lot of the JavaScript helpers
9:28
that are included in Rails to work with jQuery.
9:34
So, let's start up our server.
9:37
So now, if we go and check out our page and refresh and take a look,
9:42
right now it's only letting application.js.
9:46
And we do have our jquery.js and our jQuery UJS installed.
9:49
Now, these are actually being included by using javascript_include_tag :defaults,
9:54
and this is defined in our config application.rb file, and if we scroll down here to
9:59
config.action_view.javascript_expansions of defaults,
10:05
we can see what files are included in there, and what we need to do is add
10:09
jQuery and jQuery UJS to this list.
10:13
So, what we can do is type in "jquery" and "jquery_ujs,"
10:18
save it out and if we go back and restart our server, and we come back to our browser
10:26
and refresh, we can see now jquery.js and jquery_ujs
10:33
are being loaded into our page before application.js.
10:41
So, this is a good point for us to commit, so I'm going to stop the server.
10:46
We'll git add., git status.
10:50
All right, so we've modified our gem file.
10:57
We've updated our application.rb and added our jQuery files.
11:01
That looks good, so let's go ahead and do "git commit -n.
11:04
We'll do "Added jQuery to our app."
11:09
I'll go ahead and push origin master, and we've gone ahead and pushed this up.
11:18
And there's one last thing I want to do.
11:28
When we start up our server and we go to the root directory, we get this welcome page.
11:30
So, instead of this, I want to show the job listing page.
11:36
So, there's a couple steps involved in this.
11:41
So first, let's go into public and let's remove this index.html,
11:48
which is the page that we're seeing there.
11:54
Go ahead and move this to the trash, and now if we try to view the page,
11:59
we'll see that no route matches /.
12:02
So, what we need to do is add the route for our root.
12:05
To do that, we can go into config, routes.rb and right here,
12:09
we will type in "root," and we'll add the option "to"
12:19
and point it to the controller "jobs" and the action "index."
12:27
So, let's go ahead and restart our server, and if we refresh,
12:32
we're now seeing our job listing on the home page.
12:37
So, let's go ahead and commit that, stop the server, do "git add."
12:41
If we take a look at the git status, we added our updates to the routes.rb,
12:48
but we need to go ahead and remove public/index.html.
12:53
Do "git rm public/index.html."
12:57
Now if we look at git status, that looks pretty good.
13:04
So, we'll go ahead and create our commit.
13:09
We'll say "Removed index.html and set root to jobs index."
13:13
That looks good, we'll go ahead and push that to the master.
13:25
And let's go back to our server and just take one last look at it
13:33
and see if we missed anything.
13:36
So, if we go to the homepage, we can see all of our jobs.
13:39
We can add a new job.
13:41
We can go back, and we can edit existing jobs and view jobs on their own page.
13:44
So, looking back on what we set out to do in this iteration,
13:52
I think I checked all the major points that we wanted to do.
13:55
I'll stick around until Nick is done and see if he has anything else for me to do,
13:59
but I think I'm pretty much done with what we set out to do in this iteration.
14:03
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