27.
POSTリクエスト
フォームの作成（POST）
POSTリクエストのフォームを作成して、ログイン画面を作成してみましょう。
ファイル構成
login.html
ファイル作成
レイアウト作成
mainタグを追加して、レイアウトします。
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<main class="w-50 m-auto mt-5">
<h2>会員ログイン</h2>
</main>
</body>
</html>
POSTリクエスト
formの追加
formタグのmethodプロパティをpostにすると、POSTメソッドでリクエストできます。
POSTメソッドのformタグが入力されました。
<form action="" method="post">
</form>
フォームタグの追加
「Emaiアドレス」「パスワード」のテキストフィールドとログインボタンを追加します。
login.html
<form action="" method="post">
<div>
<input type="text" name="email" placeholder="[email protected]">
<label for="">Emailアドレス</label>
</div>
<div>
<input type="password" name="password" placeholder="パスワード">
<label for="">パスワード</label>
</div>
<div>
<button>ログイン</button>
</div>
</form>
プレースホルダー
プレースホルダーは、入力欄にサンプルを表示し、文字を入力すると消えるプロパティです。
placeholderプロパティ
プレースホルダーは、inputタグの「placeholder」プロパティで設定します。
<input type="text" name="email" placeholder="プレースホルダーの文字">
Bootstrapに対応
ログインフォームをBootstrapで作成してみましょう。
login.html
<form action="" method="post">
<div class="form-floating">
<input type="text" name="email"
class="form-control border-0 border-bottom rounded-0"
id="floatingInput" placeholder="[email protected]">
<label for="floatingInput">Emailアドレス</label>
</div>
<div class="form-floating">
<input type="password" name="password"
class="form-control border-0 border-bottom rounded-0"
id="floatingPassword" placeholder="パスワード">
<label for="floatingPassword">パスワード</label>
</div>
<div class="d-grid m-2">
<button class="btn btn-danger">ログイン</button>
</div>
</form>
ブラウザ
データ取得
サーバサイドプログラミングでデータ取得
フォーム送信したデータを取得するには、サーバサイドプログラミングが必要で、HTMLでは処理できません。
Webシステムの基本
クライアントからリクエストがあると、Webサーバがプログラムを実行し、最終的にHTMLをレスポンスします。これを動的コンテンツといいます。
- サーバーサイドでプログラム実行
- 処理した結果をHTML表示
Webフレームワーク
サーバーサイドで利用するプログラム言語はいろいろあります。Webシステム開発は非常に複雑で、１からプログラムすることはなく、Webフレームワークで開発するのが一般的です。以下が代表的なプログラミング言語とWebフレームワークです。
プログラミング言語とWebフレームワーク
| プログラム言語 | フレームワーク |
|---|---|
| PHP | Laravel、Symfony |
| Java | Spring Framework、Apache Struts |
| Ruby | Ruby on Rails |
| JavaScript | NodeJS |
PHP（フレームワークなし）
$email = $_POST["email"];
$password = $_POST["password"];
if (!empty($email) && !empty($password)) {
....
}
PHP（Laravel）
public function auth(Request $request)
{
$user = User::where("email", $request->email)->first();
...
}
Java（フレームワークなし）
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
String email = request.getParameter("email");
String password = request.getParameter("password");
if (!email.isEmpty() && !password.isEmpty()) {
...
}
}
Java（Spring）
@RequestMapping(value = "/auth", method = RequestMethod.POST)
public String auth(@ModelAttribute("user") User user) {
...
}
POSTとGETの違い
GETリクエストは、サーバからデータ取得・表示するときに利用します。 URLパラメータに応じてページやコンテンツを切り替えることができます。
- ページの切り替え
- データの検索
- API からデータを取得
GET リクエストの注意
GETリクエストは、URLにパラメータつきで送信するため以下のことに注意しなければいけません。
- 重要なデータを送信しない（パスワード、クレジットカードなど）
- データ更新処理で利用しない（リロードや誤動作によるセキュリティホール）
- 大量のデータを送信しない
重要データはGETしない
GETリクエストをすると、パラメータつきのURLで送信するので、パスワードやクレジットカードのような重要で機密なデータを送信しないよう注意しましょう。
http://example.com/auth?email=xxxxxx&&password=xxxxxx
POSTリクエストの特徴
データ更新処理で利用
POSTリクエストは、サーバのデータ更新・アップロードなどの処理で利用します。
- データ更新・削除するような処理
- 重要なデータを送信
- 大量のデータやバイナリデータ送信
URLにパラメータがつかない
POSTリクエストはブラウザからサーバに対して、データを隠蔽して送信するので、URLパラメータがつきません。
http://example.com/auth
演習
問題1
POSTリクエストするフォームタグはどれですか？
<from action="" method="post"></form>
<from action="post" method=""></form>
<input type="post" name="text">
<input type="text" placeholder="post">
問題2
サーバーサイドプログラムで正しいのはどれですか？
- HTMLでプログラムを実行する
- HTMLでJavaScriptを読み込んでプログラムを実行する
- HTMLでPHPを読み込んでプログラムを実行する
- WebサーバでPHPプログラムを実行する
問題3
GETリクエストで「間違っている」のはどれですか？
- フォーム送信するとURLパラメータがつく
- データを取得・検索するのに向いている
- 重要なデータを送信するのに向いている
- ブラウザのURL欄から直接アクセスできる
問題4
POSTリクエストで「間違っている」のはどれですか？
- 送信するデータはユーザーから見えない
- 大量のデータやバイナリデータを送信するのに向いている
- 重要なデータを送信するのに向いている
- メールからURLリンクして処理できる