Rails7.1 | 動画学習アプリ作成 | 24 | プロジェクトの登録 - 学生向けプログラミング入門

↓↓クリックして頂けると励みになります。

【23 | コントローラー】 << 【ホーム】 >> 【25 | Dropzone】

Railsのビューは、Ruby on RailsというWebアプリケーションフレームワークで使用されるコンポーネントの1つです。
ビューはユーザーに対してデータを表示するための部分であり、通常HTMLやERB（Embedded Ruby）などのテンプレートエンジンを使用して、ウェブページの外観を生成します。
ビューは通常app/viewsディレクトリに格納されます。
ビューファイルは.html.erb拡張子を持つことが一般的で、ERB（Embedded Ruby）を使用してRubyコードを埋め込むことができます。
またパーシャルビューは、部分的なビューコンポーネントを再利用可能にするために使用されます。
_partial_name.html.erbという命名規則に従い、他のビューからインクルードできます。

では早速、プロジェクトを登録するためのビューを作成していきます。

app/views/projects/new.html.erb

<div class="container">
    <div class="card mt-4">
        <div class="card-body">
            <h4 class="mt-4 mb-4"><b>プロジェクトの新規登録</b></h4>

            <%= form_for @project do |f| %>

                <div class="mb-4">
                    <label>プロジェクトのタイトル</label>
                    <%= f.text_field :name, class: "form-control w-100", required: true %>
                </div>

                <div class="mb-4">
                    <label>コンテンツ内容</label>
                    <%= f.rich_text_area :description, class: "form-control w-100", required: true, style: "height: 200%;" %>
                </div>

                <div class="input-group mb-4">
                    <span class="input-group-text">価格(円)</span>
                    <%= f.text_field :price, class: "form-control", required: true %>

                </div>

                <%= f.submit "登録する", class: "btn btn-danger w-100" %>

            <% end %>

        </div>
    </div>    
</div>

サーバ起動
rails s

プロジェクトを新規登録して保存してください。
ブラウザ確認
http://localhost:3000/projects/new

「app\views\projects」フォルダに「_project_menu.html.erb」ファイルを新規作成します。

app/views/projects/_project_menu.html.erb(新規作成したファイル)

<div class="card">
    <div class="card-body">
        <ul class="list-group">
            <li class="list-group-item" style="border:none;">
                <%= link_to "タイトル", naming_project_path, class: "btn btn-light" %>
                <% if !@project.name.blank? %>
                    <span class="text-danger"><i class="fa fa-check"></i></span>
                <% end %>    
            </li>
            <li class="list-group-item" style="border:none;">
                <%= link_to "内容", description_project_path, class: "btn btn-light" %>
                <% if !@project.description.blank? %>
                    <span class="text-danger"><i class="fa fa-check"></i></span>
                <% end %>        
            </li>
            <li class="list-group-item" style="border:none;">
                <%= link_to "価格", pricing_project_path, class: "btn btn-light" %>
                <% if !@project.price.blank? %>
                    <span class="text-danger"><i class="fa fa-check"></i></span>
                <% end %>
            </li>
            <li class="list-group-item" style="border:none;">
                <%= link_to "写真アップロード", photo_upload_project_path, class: "btn btn-light" %>
                <span class="text-danger"><i class="fa fa-check"></i></span>
            </li>
        </ul>
        <div class="mt-4">
            <% is_ready = !@project.active && !@project.price.blank? && !@project.name.blank? && !@project.description.blank? %>
            <%= form_for @project do |f| %>
            <%= f.hidden_field :active, value: true %>
            <%= f.submit "公開する", class: "btn btn-danger w-100", disabled: !is_ready %>
            <% end %>
        </div>
    </div>
</div>

続いて「app\views\projects\naming.html.erb」を編集し、プロジェクトのタイトルを修正できるようにします。

app\views\projects\naming.html.erb

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'project_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>タイトル修正</b></h4>
                    <%= form_for @project do |f| %>
                        <div class="mb-4">
                            <label>プロジェクトのタイトル</label>
                            <%= f.text_field :name, class: "form-control w-100", required: true %>
                        </div>
                        <%= f.submit "修正する", class: "btn btn-danger w-100" %>        
                    <% end %>            
                </div>
            </div>
        </div>
    </div>
</div>

登録したプロジェクトのタイトルを修正できるようになりました。
ブラウザで動作を確認してください。
http://localhost:3000/projects/2/naming

プロジェクトの内容ページを編集します。
app/views/projects/description.html.erb

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'project_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>内容修正</b></h4>
                    <%= form_for @project do |f| %>
                        <div class="mb-4">
                            <label>プロジェクトの内容</label>
                            <%= f.rich_text_area :description, class: "form-control w-100", required: true, style: "height: 200%;" %>
                        </div>
                        <%= f.submit "修正する", class: "btn btn-danger w-100" %>        
                    <% end %>            
                </div>
            </div>
        </div>
    </div>
</div>

ブラウザを確認します。
http://localhost:3000/projects/4/description

プロジェクトの価格ページを編集します。
app/views/projects/pricing.html.erb

<div class="container mt-4">
    <div class="row">
        <div class="col-md-3">
            <%= render 'project_menu' %>
        </div>
        <div class="col-md-9">
            <div class="card">
                <div class="card-body">
                <h4 class="mt-4 mb-4"><b>価格修正</b></h4>
                    <%= form_for @project do |f| %>
                        <div class="input-group mb-4">
                            <span class="input-group-text">価格(円)</span>
                            <%= f.text_field :price, class: "form-control", required: true %>        
                        </div>
                        <%= f.submit "修正する", class: "btn btn-danger w-100" %>        
                    <% end %>            
                </div>
            </div>
        </div>
    </div>
</div>