20201111160912_create_gardens.rb

class CreateGardens < ActiveRecord::Migration[6.0]
  def change
    create_table :gardens do |t|
      t.string :name
      t.string :banner_url

      t.timestamps
    end
  end
end

20201111162118_create_plants.rb

class CreatePlants < ActiveRecord::Migration[6.0]
  def change
    create_table :plants do |t|
      t.references :garden, null: false, foreign_key: true
      t.string :name
      t.string :image_url

      t.timestamps
    end
  end
end

_banner.scss

.banner {
  background-size: cover;
  background-position: center;
  padding: 150px 0;
}

.banner h1 {
  margin: 0;
  color: white;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  font-size: 32px;
  font-weight: bold;
}

.banner p {
  font-size: 20px;
  color: white;
  opacity: .7;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
}

_plant_card.scss

.card-category {
  background-size: cover;
  background-position: center;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.2);
  border-radius: 5px;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
}

application.scss

@import "bootstrap/scss/bootstrap";
@import "banner";
@import "plant_card";

edit.html.erb

<h1>Editing Garden</h1>

<%= render 'form', garden: @garden %>

<%= link_to 'Show', @garden %> |
<%= link_to 'Back', gardens_path %>

garden.rb

class Garden < ApplicationRecord
  validates :name, presence: true, uniqueness: true
  validates :banner_url, presence: true

  has_many :plants, dependent: :destroy
end

gardens_controller.rb

class GardensController < ApplicationController
  before_action :set_garden, only: [:show, :edit, :update, :destroy]

  # GET /gardens
  def index
    @gardens = Garden.all
  end

  # GET /gardens/1
  def show
    # Responsible putting in a form
    # that points to plants#create
    @plant = Plant.new
  end

  # GET /gardens/new
  def new
    @garden = Garden.new
  end

  # GET /gardens/1/edit
  def edit
  end

  # POST /gardens
  def create
    @garden = Garden.new(garden_params)

    if @garden.save
      redirect_to @garden, notice: 'Garden was successfully created.'
    else
      render :new
    end
  end

  # PATCH/PUT /gardens/1
  def update
    if @garden.update(garden_params)
      redirect_to @garden, notice: 'Garden was successfully updated.'
    else
      render :edit
    end
  end

  # DELETE /gardens/1
  def destroy
    @garden.destroy
    redirect_to gardens_url, notice: 'Garden was successfully destroyed.'
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_garden
      @garden = Garden.find(params[:id])
    end

    # Only allow a trusted parameter "white list" through.
    def garden_params
      params.require(:garden).permit(:name, :banner_url)
    end
end

plant.rb

class Plant < ApplicationRecord
  belongs_to :garden

  validates :name, presence: true, uniqueness: true
  validates :image_url, presence: true
end

plants_controller.rb

class PlantsController < ApplicationController
  def create
    # "garden_id"=>"2"
    # "plant"=>{"name"=>"Rose", "image_url"=>"sdfkdsl;fk"}
    # Find existing garden
    @garden = Garden.find(params[:garden_id])
    # Create new plant
    @plant = Plant.new(plant_params)
    # Associate plant with a garden
    @plant.garden = @garden
    # Save. If OK
    if @plant.save
      # redirect to gardens#show
      redirect_to @garden
    else
      # re-render the view that had form to display validation errors
      render "gardens/show"
    end
  end

  private

  def plant_params
    params.require(:plant).permit(:name, :image_url)
  end
end

routes.rb

Rails.application.routes.draw do
  resources :gardens do
    resources :plants, only: :create
  end
end

show.html.erb

<div class="banner" style="background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)), url(<%= @garden.banner_url %>);">
  <div class="container">
    <h1><%= @garden.name %></h1>
  </div>
</div>

<div class="container">
  <!-- Grid to display plant cards -->
  <div class="row mt-3">
    <% @garden.plants.each do |plant| %>
      <div class="col-md-3 mt-3">
        <!-- HTML for plant card -->
        <div class="card-category" style="background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(<%= plant.image_url %>)">
          <%= plant.name %>
        </div>
      </div>
    <% end %>
  </div>
</div>

<div class="container">
  <h2 class="mt-3">Add a plant</h2>
  <%= simple_form_for([@garden, @plant]) do |f| %>
    <%= f.input :name %>
    <%= f.input :image_url %>
    <%= f.submit class: "btn btn-primary" %>
  <% end %>

</div>