Rails Bog App

Objectives
Review CRUD in the context of a Rails application, especially update and delete.
Implement form helpers in a Rails application.

Researchers are collecting data on a local bog and need an app to quickly record field data. Your goal is to create a Bog App. If you get stuck at any point, feel free to reference the solution branch.

Background

A bog is a mire that accumulates peat, a deposit of dead plant material — often mosses.

You may hear bog and think of Yoda and Luke...

Or maybe Sir Didymus and The Bog of Eternal Stench...

CRUD and REST Reference

REST stands for REpresentational State Transfer. We will strictly adhere to RESTful routing for Rails.

Verb	Path	Action	Used for
GET	/creatures	index	displaying list of all creatures
GET	/creatures/new	new	displaying an HTML form to create a new creature
POST	/creatures	create	creating a new creature in the database
GET	/creatures/:id	show	displaying a specific creature
GET	/creatures/:id/edit	edit	displaying an HTML form to edit a specific creature
PUT or PATCH	/creatures/:id	update	updating a specific creature in the database
DELETE	/creatures/:id	destroy	deleting a specific creature in the database

Part I: Display all creatures with `index`

1. Set up a new Rails project

Fork this repo, and clone it into your develop folder on your local machine. Change directories into rails_bog_app, and create a new Rails project:

➜  rails new bog_app -T
➜  mv bog_app/* ./
➜  rm -rf bog_app
➜  rm README.rdoc
➜  rake db:create
➜  rails s

Your app should be up and running at localhost:3000.

2. Add Bootstrap to your project

Rails handles CSS and JavaScript with a system called the asset pipeline. We'll go over it more next week, but for now, you'll add Bootstrap via the asset pipeline.

Third-party libraries belong in the vendor/assets sub-directory of your Rails app. Use the following Terminal command to download the Bootstrap CSS file (via curl) and save it in a new bootstrap-3.3.6.min.css file inside the vendor/assets/stylesheets sub-directory.

➜  curl https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css > vendor/assets/stylesheets/bootstrap-3.3.6.min.css

To include the Bootstrap file you just downloaded, require it in app/assets/stylesheets/application.css:

/*
 * app/assets/stylesheets/application.css
 */

/*
 * ...
 *
 *= require bootstrap-3.3.6.min
 *= require_tree .
 *= require_self
 */

3. Define the `root` and creatures `index` routes

In Sublime, open up config/routes.rb. Inside the routes draw block, erase all the commented text. It should now look exactly like this:

#
# config/routes.rb
#

Rails.application.routes.draw do

end

Your routes tell your app how to direct HTTP requests to controller actions. Define your root and creatures index routes as follows:

#
# config/routes.rb
#

Rails.application.routes.draw do
  root "creatures#index"

  get "/creatures", to: "creatures#index", as: "creatures"

end

In the Terminal, running rake routes will list all your routes. You'll see that some routes have a "prefix" listed. These routes have associated route helpers, which are methods Rails creates to generate URLs. The format of a route helper is prefix_path. For example, creatures_path is the full route helper for GET /creatures (the creatures index). We often use route helpers to generate URLs in forms, links, and controllers.

4. Set up the creatures controller and `index` action

Run the following command in the Terminal to generate a controller for creatures:

➜  rails g controller creatures

Next, define the creatures#index action in the creatures controller:

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  # display all creatures
  def index
    # get all creatures from db and save to instance variable
    @creatures = Creature.all

    # render the index view (it has access to instance variable)
    render :index
  end

end

5. Set up the creature model

Run the following command in the Terminal to generate the Creature model:

➜  rails g model creature name description

Run the migration to update the database with this change:

➜  rake db:migrate

6. Create a creature

In the Terminal, enter the Rails console. The Rails console is built on top of irb, and it has access to your Rails project. Use it to create a new instance of a creature.

➜  rails c
irb(main):001:0> Creature.create({name: "Yoda", description: "Little green man"})

7. Seed your database

When you create an application in development, you typically want some mock data to play with. In Rails, you can just drop this into the db/seeds.rb file.

Back in Sublime, add some seed data to db/seeds.rb:

#
# db/seeds.rb
#

Creature.create({name: "Luke", description: "Jedi"})
Creature.create({name: "Darth Vader", description: "Father of Luke"})

In the Terminal (not inside rails console!), run rake db:seed. Note that the seeds file will also run every time you run rake db:reset to reset your database.

8. Set up the creatures `index` view

If you look inside the app/views directory, the /creatures folder has already been created (this happened when you ran rails g controller creatures). Add an index.html.erb file to the app/views/creatures folder.

Inside your creatures index view, iterate through all the creatures in the database, and display them on the page:

<!-- app/views/creatures/index.html.erb -->

<% @creatures.each do |creature| %>
  <p>
    <strong>Name:</strong> <%= creature.name %><br>
    <strong>Description:</strong> <%= creature.description %>
  </p>
<% end %>

Go to localhost:3000 in the browser. What do you see on the page? If you haven't already, git add and git commit the work you've done so far.

Part II: Make a creature with `new` (form) and `create` (database)

1. Define a route for the `new` creature form

The Rails convention is to make a form for new creatures at the /creatures/new path in our browser.

#
#/config/routes.rb
#

Rails.application.routes.draw do
  root to: "creatures#index"

  get "/creatures", to: "creatures#index"
  get "/creatures/new", to: "creatures#new"
end

2. Set up the creatures `new` action

When a user sends a GET request to /creatures/new, your server will search for a creatures#new action, so you need to create a controller method to handle this request. creatures#new should render the view new.html.erb inside the app/views/creatures folder.

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  ...

  # show the new creature form
  def new
    render :new
  end

end

3. Set up the view for the new creature form

Create the view new.html.erb inside the app/views/creatures folder. On this view, users should see a form to create new creatures in the database.

<!-- app/views/creatures/new.html.erb -->

<%= form_for :creature, url: "/creatures", method: "post" do |f| %>
  <%= f.text_field :name %>
  <%= f.text_area :description %>
  <%= f.submit "Save Creature" %>
<% end %>

Note: The URL you're submitting the form to is /creatures because it's the database collection for creatures, and the method is post because you're creating a new creature.

Go to localhost:3000/creatures/new in the browser, and inspect the HTML for the form on the page. form_for is a "form helper", and it generates more than what you might guess from the erb you wrote in the view. Note the method and action in the form - what route do you think you should define next?

4. Define a route to `create` creatures in the database

Your new creature form has action="/creatures" and method="POST". The POST /creatures route doesn't exist yet, so go ahead and create it!

#
#/config/routes.rb
#

Rails.application.routes.draw do
  root to: "creatures#index"

  get "/creatures", to: "creatures#index", as: "creatures"
  get "/creatures/new", to: "creatures#new", as: "new_creature"
  post "/creatures", to: "creatures#create"

end

5. Set up the creatures `create` action

The POST /creatures maps to the creatures#create controller action, so the next step is to define the controller method to handle this request. creatures#create should add a new creature to the database.

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  ...

  # create a new creature in the database
  def create
    # whitelist params and save them to a variable
    creature_params = params.require(:creature).permit(:name, :description)

    # create a new creature from `creature_params`
    creature = Creature.new(creature_params)

    # if creature saves, redirect to route that displays all creatures
    if creature.save
      redirect_to creatures_path
      # redirect_to creatures_path is equivalent to:
      # redirect_to "/creatures"
    end
  end

end

6. Refactor the `new` creature form

Update your creatures#new action to send a new instance of a Creature to the new creature form:

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  ...

  # show the new creature form
  def new
    @creature = Creature.new
    render :new
  end

end

This sets @creature to a new instance of a Creature, which is automatically shared with the form in views/creatures/new.html.erb. This allows you to refactor the code for the form_for helper.

<!-- app/views/creatures/new.html.erb -->

<%= form_for @creature do |f| %>
  <%= f.text_field :name %>
  <%= f.text_area :description %>
  <%= f.submit "Save Creature" %>
<% end %>

Go to localhost:3000/creatures/new again in the browser, and inspect the HTML for the form on the page. Did anything change?

7. Define a route to `show` a specific creature

Right now, your app redirects to /creatures after creating a new creature, and the new creature shows up at the bottom of the page. Let's make a route for users to see a specific creature. Then, you'll be able to show a new creature by itself right after it's created.

First, define a show route:

#
# config/routes.rb
#

Rails.application.routes.draw do
  root to: "creatures#index"

  get "/creatures", to: "creatures#index", as: "creatures"
  get "/creatures/new", to: "creatures#new", as: "new_creature"
  post "/creatures", to: "creatures#create"
  get "/creatures/:id", to: "creatures#show", as: "creature"
end

Now that you have your show route, set up the controller action for creatures#show:

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  ...

  # display a specific creature
  def show
    # get the creature id from the url params
    creature_id = params[:id]

    # use `creature_id` to find the creature in the database
    # and save it to an instance variable
    @creature = Creature.find_by_id(creature_id)

    # render the show view (it has access to instance variable)
    render :show
  end

end

Next, create the view to display a single creature:

<!-- app/views/creatures/show.html.erb -->

<h3><%= @creature.name %></h3>
<p><%=  @creature.description %></p>

8. Refactor the `creatures#create` redirect

The creatures#create method currently redirects to /creatures. Again, this isn't very helpful for users who want to verify that they successfully created a single creature. The best way to fix this is to have it redirect to /creatures/:id instead.

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  ...

  # create a new creature in the database
  def create
    # whitelist params and save them to a variable
    creature_params = params.require(:creature).permit(:name, :description)

    # create a new creature from `creature_params`
    creature = Creature.new(creature_params)

    # if creature saves, redirect to route that displays
    # ONLY the newly created creature
    if creature.save
      redirect_to creature_path(creature)
      # redirect_to creature_path(creature) is equivalent to:
      # redirect_to "/creatures/#{creature.id}"
    end
  end

end

Make sure to git add and git commit again once you have new, create, and show working.

Part III: Change a creature with `edit` (form) and `update` (database)

Editing a specific creature requires two methods:

edit displays a form with the existing creature info to be edited by the user
update changes the creature info in the database when the user submits the form

1. Define a route for the `edit` creature form

#
# config/routes.rb
#

Rails.application.routes.draw do
  root to: "creatures#index"

  get "/creatures", to: "creatures#index", as: "creatures"
  get "/creatures/new", to: "creatures#new", as: "new_creature"
  post "/creatures", to: "creatures#create"
  get "/creatures/:id", to: "creatures#show", as: "creature"
  get "/creatures/:id/edit", to: "creatures#edit", as: "edit_creature"
end

2. Set up the creatures `edit` action

Using your creatures#new and creatures#show method as inspiration, you can write the creatures#edit method in the creatures controller:

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  ...

  # show the edit creature form
  def edit
    # get the creature id from the url params
    creature_id = params[:id]

    # use `creature_id` to find the creature in the database
    # and save it to an instance variable
    @creature = Creature.find_by_id(creature_id)

    # render the edit view (it has access to instance variable)
    render :edit
  end

end

3. Set up the view for the edit creature form

Create an edit.html.erb view inside views/creatures. Jump-start the edit form by copying the form from views/creatures/new.html.erb into views/creatures/edit.html.erb:

<!-- app/views/creatures/edit.html.erb -->

<%= form_for @creature do |f| %>
  <%= f.text_field :name %>
  <%= f.text_area :description %>
  <%= f.submit "Save Creature" %>
<% end %>

Go to localhost:3000/creatures/1/edit in the browser to see what it looks like so far. Check the method and action of the form. Also look at the hidden input with name="_method". What is it doing? The Rails form helper knows to turn this same code into an edit form because you're on the edit page!

4. Define a route to `update` a specific creature

The update route will use the id of the creature to be updated. In Express, you decided between PUT /creatures/:id and PATCH /creatures/:id, depending on the type of update you wanted to do. In Rails, we'll need to add PATCH /creatures/:id only to our routes.

#
# config/routes.rb
#

Rails.application.routes.draw do
  root to: "creatures#index"

  get "/creatures", to: "creatures#index", as: "creatures"
  get "/creatures/new", to: "creatures#new", as: "new_creature"
  post "/creatures", to: "creatures#create"
  get "/creatures/:id", to: "creatures#show", as: "creature"
  get "/creatures/:id/edit", to: "creatures#edit", as: "edit_creature"
  patch "/creatures/:id", to: "creatures#update"
end

Run rake routes in the Terminal to see the newly created update routes.

5. Set up the creatures `update` action

In the CreaturesController, define an update method:

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  ...

  # update a creature in the database
  def update
    # get the creature id from the url params
    creature_id = params[:id]

    # use `creature_id` to find the creature in the database
    # and save it to an instance variable
    creature = Creature.find_by_id(creature_id)

    # whitelist params and save them to a variable
    creature_params = params.require(:creature).permit(:name, :description)

    # update the creature
    creature.update_attributes(creature_params)

    # redirect to show page for the updated creature
    redirect_to creature_path(creature)
    # redirect_to creature_path(creature) is equivalent to:
    # redirect_to "/creatures/#{creature.id}"
  end

end

Test your creatures#update method in the browser by editing the creature with an id of 1 (go to localhost:3000/creatures/1/edit). Then, git add and git commit your work.

Part IV: Delete a creature with `destroy` (database)

1. Define a route to `destroy` a specific creature

Following a similar pattern to our other routes, create a route to destroy (delete) a specific creature based on its id.

#
# config/routes.rb
#

Rails.application.routes.draw do
  root to: "creatures#index"

  get "/creatures", to: "creatures#index", as: "creatures"
  get "/creatures/new", to: "creatures#new", as: "new_creature"
  post "/creatures", to: "creatures#create"
  get "/creatures/:id", to: "creatures#show", as: "creature"
  get "/creatures/:id/edit", to: "creatures#edit", as: "edit_creature"
  patch "/creatures/:id", to: "creatures#update"
  delete "/creatures/:id", to: "creatures#destroy"
end

At this point, you're using all the RESTful routes for creatures.

2. Set up the creatures `destroy` action

In the CreaturesController, define an destroy method:

#
# app/controllers/creatures_controller.rb
#

class CreaturesController < ApplicationController

  ...

  # delete a creature from the database
  def destroy
    # get the creature id from the url params
    creature_id = params[:id]

    # use `creature_id` to find the creature in the database
    # and save it to an instance variable
    creature = Creature.find_by_id(creature_id)

    # destroy the creature
    creature.destroy

    # redirect to creatures index
    redirect_to creatures_path
    # redirect_to creatures_path is equivalent to:
    # redirect_to "/creatures"
  end

end

3. Add a delete button

Add a delete button to the view that displays a single creature:

<!-- app/views/creatures/show.html.erb -->

<h3><%= @creature.name %></h3>
<p><%=  @creature.description %></p>
<%= button_to "Delete", @creature, method: :delete %>

Visit localhost:3000/creatures/1 in the browser, and inspect the HTML for the delete button. Click the delete button to manually test this feature.

At this point, you've created all the RESTful routes, implemented controller actions for each route, and made views for index, show, new, and edit. You've also created the Creature model in the database and manually tested that everything works.

Bonus

Add a Bootstrap navbar with links to the homepage (/) and the new creatures page (/creatures/new). Also link each creature on creatures#index to its individual show page.
Read about Active Record Validations, and add validations to the Creature model to make sure a new creature can't be created without a name and description.
Read the docs for the Paperclip gem, and incorporate it into your Bog App to upload photos of creatures.

Submission

Once you've finished the assignment and pushed your work to GitHub, make a pull request from your fork to the original repo.

sf-wdi-25 / rails_bog_app Goto Github PK

rails_bog_app's Introduction

Rails Bog App

Background

CRUD and REST Reference

Part I: Display all creatures with index

1. Set up a new Rails project

2. Add Bootstrap to your project

3. Define the root and creatures index routes

4. Set up the creatures controller and index action

5. Set up the creature model

6. Create a creature

7. Seed your database

8. Set up the creatures index view

Part II: Make a creature with new (form) and create (database)

1. Define a route for the new creature form

2. Set up the creatures new action

3. Set up the view for the new creature form

4. Define a route to create creatures in the database

5. Set up the creatures create action

6. Refactor the new creature form

7. Define a route to show a specific creature

8. Refactor the creatures#create redirect

Part III: Change a creature with edit (form) and update (database)

1. Define a route for the edit creature form

2. Set up the creatures edit action

3. Set up the view for the edit creature form

4. Define a route to update a specific creature

5. Set up the creatures update action

Part IV: Delete a creature with destroy (database)

1. Define a route to destroy a specific creature

2. Set up the creatures destroy action