Setting up the first ‘pins’ on my Rails site

The application that I am making with this One Month Rails tutorial is a Pinterest-style site where people can upload images.  This project is about actually starting the pinning feature.

So far, I’ve only worked with models when using Devise.  But that didn’t actually require me to create my own model, so that’s what I’m going to work on now.  Apparently you need to add a resource, which is done by running a scaffolding.  Bare with me here. 🙂  To run the scaffolding I needed to start out with:

$ rails generate scaffold Pins description:string --skip-stylesheets  #where Pins is the name I chose

The reason I include description:string is because in my Pinterest-like site, I’m going to want to allow people to upload a description along with each one of their images.  I use the –skip-stylesheets parameter because normally scaffolds come with a stylesheet by default but I don’t need one since I am using Bootstrap.  If I had forgotten to put the skip stylesheets stuff, I should just delete app/assets/stylesheets/scaffolds.css.scss and start anew.

After running this, it created a Controller (pins-controller), it created a model, and a bunch of views.  It also makes a migration because we need to add the pins to the database.  Which is why next we’ll have to run:

$ rake db:migrate

Holy crap.  Now when I go to http://localhost:3000/pins it looks like this:

Screen Shot 2013-04-03 at 8.17.18 PM

The “new pin” feature actually works, at least for descriptions!  That seems pretty crazy, and I have no idea how that just worked.  Limitation of this tutorial is that it didn’t explain to me what just happened.  I’m pretty technical-minded so I’d appreciate if it told me more about what was going on behind the scenes.  As an experiment I tried making another scaffolding named “Stuffs” just to see if the name “Pins” had anything to do with it knowing I wanted a feature created that allows people to upload descriptions.  Alas, Stuffs displayed the same exact functionality. So, yeah.  Neat.

Okay, I listened to more of the tutorial and I guess resources come with basically 4 different actions.  You can create a pin, read a pin, update a pin, and destroy a pin.  People remember this using the CRUD acronym.  So anytime I create a scaffolding, I’m telling the system what it is that I want to be able to create, read, use, and destroy.  Makes sense!

Next I want to edit that description field, because the field is so small and what if people want to upload a whole paragraph about their pin?   To do this, I go to my views under the Pins folder and I looked at my new.html.erb which shows that I’m using a form that is being referenced somewhere: <%= render ‘form’ %>.  This means I can edit this form in the _form.html.erb file.   I edit the description field which looks like this originally:

<%= f.input :description %>

And I make it look like this:

<%= f.input :description, as: :text, input_html: {rows: "3" } %>

This makes it so that there are 3 rows instead of just the standard 1 row.  I also want to change the form to the horizontal view that I did in previous forms, which is done at the top of the _form.html.erb file by changing:

<%= simple_form_for(@pin) do |f| %>

to:

<%= simple_form_for(@pin, html: { class: "form-horizontal"}) do |f| %>

And I want my button to look like all the other buttons on my site (the bootstrap style) so I do this:

<%= f.button :submit, class: "btn btn-primary" %>

And for some reason (which he doesn’t tell me) I don’t need the form-inputs div class so I delete this:

<div class="form-inputs">

and it’s associated </div>.

Next we want to make the Show page look a bit better, because it’s awfully blank and boring. I open up the show.html.erb file and get rid of the <p id=”notice”><%= notice %></p> at the top because it’s a flash and I already have the Bootstrap flash being used in my layouts folder, in the application.erb file.  I guess that is sitewide?

I put the top section in a row div, and then a span (column) 6 which is a reference to the Bootstrap grid system.  I also offset it by 3 so that it moves the description in a bit.  I did this by  putting in <div class=”span6 offset3″>.

Next I’m adding a “well” which is a Bootstrap feature.  I put this div around the same description box with <div class=”well”>.  A well looks like this:

Screen Shot 2013-04-03 at 8.48.22 PM

That looks better.  I also learned that the main page for my pins (at http://localhost:3000/pins) is called the index action, because it’s indexing all the pins that have been submitted.  If I click “Show” on any of those pins, the URL changes to append the ID of the pin.  Even though I never told my site that I wanted pins to have IDs, it automatically adds one to any item in a model.  Since Devise added a user model, it’s doing the same thing for users too.  Rails just does that for free, along with adding a ‘create date’ and a ‘last updated’ field to all the items as well.

Now, the list of pins (the table) is a bit ugly, so we’re going to update that. The very first thing we can do is add a table class of ‘striped’ within index.html.erb (under the pins view) so that it gives the table an instant Bootstrappy look.  Next, we wrap the table header (where it says Description) with <thead> and the actual pins list under <tbody>. This makes the top actually look like a header:

Screen Shot 2013-04-03 at 9.48.04 PM

Next we want to do what’s called a partial, which I did before.  Basically, I’m taking everything between the  <% @pins.each do |pin| %> section out of this file and putting it into its own view. (which i’m naming _pin.html.erb.  I then delete that bit of Ruby code and replace it with:  <% render @pins %>.  Nothing changes when I refresh my page, which is exactly what I wanted.  I’m kind of confused on why that works though.  Since my file name was _pin in the singular, why does render @pins work?  I have no idea.

Next I want to make sure to validate the form submitted so that no one can submit an empty pin.  To do this, we create a validation by opening up the pin.rb model and adding validates :description, presence: true in the pin class.  There are a number of other validations I could have used instead of in addition, such as length.  A list of these validations is here.

So, that’s it for this lesson!

Advertisements

One thought on “Setting up the first ‘pins’ on my Rails site

  1. Hi, I was looking around to find someone who is taking the One Month Rails course and found your site. There are no sample lessons or at least I haven’t found any so I was wondering how you are finding the course and would you recommend it?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s