Formを使う


Formについて

皆さんは、ログインをするためのログインフォームや、問い合わせ内容を送信するためのお問い合わせフォームなどを使ったことがあると思います。このような「文章などの情報をボタンを押して送信」する為の部品をFormと言います。

今回はこのFormを使ってサーバーへ情報を送信してみましょう。

ここまでの学習で大事な概念である、HTTPリクエスト、レスポンスを講義形式で見てみたい方は下記をチェックしてみてください。

動画の流れ

HTMLのフォームを表示してみる

  • viewsフォルダ内にcontact_form.erbを作成します。
  • contact_form.erbにHTMLを書きます。
    <html>
        <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="/style.css">
        </head>
        <body>
            <h1>新しい連絡先</h1>

            <!-- HTMLのformタグです -->
            <form action="contacts" method="post">
                <input type="text" name="name">
                <input type="submit">
            </form>

            <div>
                <a href="/">戻る</a>
            </div>
        </body>
    </html>
  • contact_form.erbを表示するためのコードをapp.rbに追加します。
    • 対応する通信のメソッドはget
    • パスは /contact_new
    get '/contact_new' do
        erb :contact_form
    end

contact_form.erbはプログラミングで動的に扱う可能性があるのでpublicフォルダには置きませんでしたが、場合によってはpublicフォルダ配下に置くようなこともあります。

  • https://workspace-username.c9users.io/contact_newにアクセスした時にcontact_form.erbの内容が表示されることを確認します。

フォームから値を送信できるようにする

  • 作成されたフォームから適当に値を送信すると、残念ながら画面にエラーが表示されてしまいます。まだ送信したデータを受ける口が作られていない為です。
    Sinatra doesn't know this ditty.
    Try this:

    post '/contacts' do
      "Hello World"
    end
  • エラーメッセージに従いフォームから送った値の受け口を作成します。これでデータを受信することができるようになります。
    • 対応する通信のメソッドはpost
    • パスは /contacts
  • もう一度送信を試して「Hello World」が表示されることを確認します。

  • 送信後にトップページに遷移されるように redirect '/'という処理を書きます。
    post '/contacts' do
      redirect '/'
    end
  • p params で送信されたデータを確認します。
    • params は送信されたデータが入っている変数です(Sinatraのきまりです)。
    • pputs よりも見やすく表示してくれます。
    post '/contacts' do
      p params
      redirect '/'
    end
  • もう一度送信を試してみます。
  • コンソールに{"name"=>"送信した値"} が表示されることを確認します。
  • よりわかりやすくするために### これはPOSTされたデータです ###という文字を表示するコードを追加します。
    post '/contacts' do
      puts "### これはPOSTされたデータです ###"
      p params
      redirect '/'
    end
  • もう一度送信をしてコンソールに以下の表示がでることを確認します。
### これはPOSTされたデータです ###
{"name"=>"送信した値"}

フォームへのリンクを作る

  • index.erbからhttps://workspace-username.c9users.io/contact_newへのリンクを作成します。
            <div>
                <a href="/contact_new">連絡先の新規作成</a>
            </div>
  • https://workspace-username.c9users.io/に新しい連絡先を作るのリンクが作成されていることを確認します。
  • リンク先https://workspace-username.c9users.io/contact_newへ遷移できることとフォームから再度値を送れることを確認します。

今後の流れを確認する

  • POSTされたデータがこの段階で保存されるとサービスらしい動きになります。
  • DBの保存は次回以降の章で扱います。
    post '/contacts' do
      puts "### これはPOSTされたデータです ###"
      p params

      # ここでDBに保存する

      redirect '/'
    end

検索してみよう

  • 「 html form 」で検索してHTMLのフォームについて確認してみましょう。
  • 「 GETメソッド POSTメソッド 」で検索してみましょう。いくつかサイトを開いてGETメソッド POSTメソッドの特徴、違いについて確認してみましょう。

一歩進んだ学習

  • ログを見てFormからPOST(メソッドの)通信が起こっていることを確認してみましょう。
    • ログはruby app.rb -p $PORT -o $IPでSinatraのプログラムを起動した状態で確認することができます。
  • Sinatraのparamsの扱い方について自分でキーワードを工夫して検索して確認してみましょう。
    • 良い記事がない場合は「 sinatra post パラメータ 」等のキーワードで検索すると良い記事に当たる可能性が高いです。

これでユーザーが入力したデータの受け取り方がわかりました。これだけだとサービスは情報を登録できないので、これからデータベースについて学んでいきます。

今回のコードはこちらで確認することができます。

前の章に戻る

次の章に進む


コメントを残す