Rails7.1 | 仕事売買アプリ作成 | 22 | ビューの作成 - 学生向けプログラミング入門

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

【21 | コントローラー作成】 << 【ホーム】 >> 【23 | Fakerの利用】

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

では早速、仕事を登録するためのビューを作成していきます。
「app\views\gigs\create.html.erb」ファイルと「app\views\gigs\update.html.erb」ファイルは使わないので削除して大丈夫です。

「app\views\gigs\new.html.erb」ファイルの記述を以下の内容に変更します。

app\views\gigs\new.html.erb

<div class="container mt-4">

    <!-- 5つのステップ -->
    <div class="mb-4">
        <ul class="list-group">
            <li class="list-group-item list-group-item-light active" aria-current="true">①概要</li>
            <li class="list-group-item">②価格</li>
            <li class="list-group-item">③仕事の内容</li>
            <li class="list-group-item">④写真</li>
            <li class="list-group-item">⑤公開</li>
        </ul>
    </div>


    <!-- お仕事登録フォーム-->
    <%= form_for @gig do |f| %>
        <div class="mb-3">
            <label class="font2">仕事の名前</label>
            <%= f.text_field :title, autofocus: true, placeholder: "仕事の名前", class: "form-control" %>
        </div>

        <div class="mb-4 mt-4">
            <label class="font2">カテゴリー</label>
            <%= f.select(:category_id, options_for_select(@categories.map{ |c| [c.name, c.id] })) %>
        </div>

        <div>
            <a href="/" class="btn btn-secondary">キャンセル</a>
            <%= f.submit "保存して続ける", class: "btn btn-danger" %>
        </div>

    <% end %>
</div>