Creating the Rails 5 Application
In this series of episodes we're going to build a robust blogging application using Rails 5 and Bootstrap 4. I'm going to assume that you already have the latest versions of Ruby and Rails installed. If you don't there's plenty of guides around the web for how to do that.
To get started we're going to open up the terminal. Yours will probably not be red, I have customized mine. I am going to CD down into a directory called episodes. On your computer you may want to create a folder called projects or something like that if you don't already have one instead of episodes. The next thing you want to do is check your Ruby and rails versions and make sure that they are something similar to mine. So I'm running Ruby 2.2.5 and Rails 5.0.
All right, so now we need to actually get started on the actual project. So we're going to create a new app. rails new frog-blog.
Wait for that to install.
Verifying the App & Opening in Editor
Once that finishes we're going to CD down into the app we just created, make sure that everything is there, and then I'm going to run rails s to start the server. And once the server starts I'm going to jump over to Chrome and make sure that Local Host 3000 is right. So open up the new window Local Host 3000 and awesome, it's working.
So the next thing that we need to do is open up our code in a text editor. So hit control+C to stop the server. I have Sublime Text running so I'm just going to type in subl . to open up the code, full screen.
Integrating Bootstrap 4
So the first thing that we're want to do in here is install some different software that we're going to be using. The first thing that I'm going to set up is actually Bootstrap. So I'm going to jump back over to my browser so that you can see where the documentation for this is. So we're at github.com/twbs/bootstrap-rubygem and I'm going to follow the instructions here for Ruby on Rails.
So just copy this, jump back over to the code, open up your Gemfile, and then somewhere here at the bottom just paste this. And then back in the terminal we're going to run bundle install.
Now that that has installed, back in the browser there were a few more steps we needed to do. So we need to put import bootstrap into application.scss, which needs to be changed from the CSS file that's what they're telling us. And then we need to require bootstrap sprockets in our application.js. Okay so just copy this.
In our code, in the app/assets/stylesheets folder you have application.css. First thing I do is rename this to scss. Then for the moment I'm just going to delete all of this and paste in @import "bootstrap". And if I remember correctly in the JavaScript application.js right here we need to require bootstrap-sprockets. And make sure that's correct, require jQuery, require bootstrap-sprockets. Seems like they put it right there. Okay, so I think we're done with this file and this file.
Installing the Friendly ID Gem
The next thing we're going to install is something called Friendly ID. If I jump back to the browser I have a new tab open. It's github.com/norman/friendly_id. You want to scroll all the way down to this Rails Quick Start. We're going to copy this gem 'friendly_id'. I'm going to go ahead and grab this too, put that right below Bootstrap. Doesn't really matter as long as it's not in the group development test or group development, you're fine. Then we just need to bundle install and then I need to run this rails generate friendly_id.
So back in the terminal, first thing we're going to do is bundle, and then rails generate friendly_id. Okay so now we're actually ready to start building something. Really fast, back on this page, there's this thing that relates to Friendly ID that you need to remember called slug. So whenever we create our blog post, we're going to add a slug:string:unique which is for friendly ID. All right, let me actually copy this so that I don't forget.
Scaffolding the Post Resource
And we're going to run rails g, which is short for generate, scaffold post. We're going to put title:string, body:text, I'm going to have a description which is going to be text, and then that thing I just copied, slug:string:unique.
The next thing we're going to do is run rails db:migrate, which is different from older versions of Rails. Now in Rails 5, instead of saying rake db:migrate, you say rails db:migrate.
Exploring the Scaffolded Files
So back in our code, the rails generate scaffold command generated a number of things for us. It created this Post model, it created this Post controller, plural. In our views folder, it created posts and then a number of views which correspond to these actions in the controller.
Configuring the Post Model for Friendly ID
To get Friendly ID working the way that I want, there's a couple more things we need to add to the Post model. So we're going to actually write some code here. So back in the browser, we need to write extend FriendlyId and then we need to tell it what we want to use the Friendly ID on. So for the moment just copy this.
And then we'll put extend FriendlyId and we want to friendly_id :title, use: :slugged. We're also going to define a method called should_generate_new_friendly_id? and we're going to say title_changed?. This should_generate_new_friendly_id? is part of the Friendly ID codebase and then this title_changed? is part of Rails. So whenever we update the title we also want to update the slug, which will make a lot more sense in just a minute.
Configuring the Controller and Routes
The last thing that we need to do before we try this out is jump over to our Post controller. If you look at the top you have this before_action :set_post and then it lists a number of actions that it's going to work on. That set_post action is looking up a post in the database based on the ID that comes in through the URL. So we are going to say .friendly right here and that's going to get everything working for us.
The very last thing that we want to do is jump over in routes, which is inside your config folder, and we want to say root to: 'posts#index' I believe that's how it's written.
And now we can jump into our terminal, start the server again. And now when we go to localhost:3000, refresh. Here we have our blog.
Testing the Friendly URL Slugs
So let's give it a shot. If we click new post, we get a form with a title, body, description, slug. Let's try it. So we can say 'My First Post', if I could type... and leave this slug blank, and if we click create post, you'll see in the URL we get post/my-first-post. So this is the slug. So what it does is Friendly ID takes the title and converts it into something like this that it can use to look it up later. Without Friendly ID you just have numbers up here which is not normal for a blog.
So if we go back, you can see we have a post listed. If we click Show, it's showing slug. And if we edit the post title, you can see that the slug gets updated up here. So that's what we did before when we said in the post model, should_generate_new_friendly_id?, did the title change basically.
Cleaning Up the Post Form & Controller
There are a few things that we want to clean up. In the form, we don't want there to be a field for slug. That's something that's automatically generated so we're going to take that away. Save that. In the post controller, we have this post_params thing which is a part of Rails strong parameters. We just don't want to let people pass in a slug. That's something that's automatically generated so we're going to take that away and then go back over here. And now we shouldn't have that field anymore, and we don't.
Okay, there is one more quick thing I want to do. If you look in the title in the tab it just always says 'Frog Blog'.
Implementing Dynamic Page Titles
What we would like to happen is when you're looking at a particular post that puts that title up there. So I want to do that and it's going to be the last thing in this video and then next video we're going to work on actually styling this out and making it look like a real blog. So if we jump back to the code, me close everything, we want to open up the layout file, application.html.erb. Now the layout file is basically a wrapper that gets wrapped around each of your views. So you have your HTML declaration, your head tag, and then your body and then each view gets inserted where this yield tag is.
Now we can pass variables around between the layout and the actual views and this is where we're going to do that here. So what I'm going to do is say <%= yield(:page_title) %> | Frog Blog. Now to get this to work... actually let me show you what happens if I just save it like this. Let me save that and we'll refresh and we get an empty thing in the middle, pipe, Frog Blog.
And then in our post, let's look in the show, at the very top I'm going to put <% provide(:page_title, @post.title) %>. So now you have the post title up there, but we also want that on all the other pages. So we can copy this. On new, we're just going to say over here we just want to say 'New Post'. On edit, what we'd like to do is say Edit and then the title of the post. And on the index we'll just say 'All Posts'.
So now no matter what we click on, we should have something in the title. Yep, that is all that we're going to cover in this episode.
Rails Concepts: Controller Instance Variables
However, back in the code, if you're new to Rails I wanted to make a couple of quick points just to help you out for, you know, understanding what we did and upcoming episodes. So in the controller, I made a comment earlier that each action, which this def index, def show, def new, those are all actions, they correspond to views over here.
So you could go pretty deep into this but the only thing that I wanted to say was that this variable here with the at sign is called an instance variable, and it is automatically available in the view that corresponds to it when you're when you're there.
So for instance in index we have @posts = Post.all, and then back in the view, we have @posts and we can iterate through them and call methods on each one. And it's the same thing for show. We have one individual post that we're looking at that has an instance variable. We call methods on it, and you can see that back in the controller. In this case we're using this before_action we talked about earlier with set_post so show is in this list. So for show you have @post = Post.friendly.find... stuff.
The other thing I wanted to point out, because you're going to see it in all the future episodes in this series is that if you look at these tags with the parenthesis and angle brackets, these are called ERB tags and there are two different flavors. One of them has an equal sign like this one and one of them does not.
The one without an equal sign means basically don't print this out. It's just kind of a calculation or something to that effect. If you have an equal sign it means actually print this out. And you can see what I mean if you actually add an equal sign here and we save this, it's going to print out some kind of ugly object looking thing. So if I just go to the root page, you see that you have an array of all of the posts being print printed out. So you don't want to print that, you just want to use the iterator.
So that is the last point that I wanted to make. So that's it for this lesson and I'll see you next time.
