ログイン画面の作成（index.jsp）
目次
- 解説
- 1. はじめに
- 2. JSPファイルの作成
- 3. フォームの作成
解説
1. はじめに
それではつぶやきアプリを作成していきます。まずはログイン画面を作成しながら、WEBサーバーを介した画面遷移の仕組みや、ログインの仕組みを学びます。
完成図
2. JSPファイルの作成
デフォルトページの作成
ログイン画面を実装するために、まずはJSPファイルを作成します。ログイン画面はつぶやきアプリのトップページで、URLからの直接遷移等で、すべてのユーザーからアクセスされるページです。なので、プロジェクトのデフォルトページになるように設定します。
デフォルトページとは通常、プロジェクト実行時に一番最初に表示されるページのことで、「webapp」フォルダー直下に「index.jsp」というファイル名で配置することで設定できます。
手順1
| (1) | eclipseの「パッケージ・エクスプローラー」から、作成した「tweet_servlet」フォルダーをクリックして開き、「webapp」フォルダーを右クリックしてください。 |
| (2) | 「新規」 > 「その他」をクリックしてください。 |
| (3) | 「Web」の中の「JSPファイル」を選択し、「次へ」をクリックしてください。 |
| (4) | ファイル名は「index.jsp」とし、「完了」をクリックしてください。 |
3. フォームの作成
ログイン画面はヘッダー、見出し、ログインフォーム、フッターの構成でできています。一つずつ実装していきましょう。
ヘッダー
ヘッダーは以下の要素で構成されています。
| ① | サイトタイトル |
手順2
| (1) | 「index.jsp」のbodyタグ内に下記のコードを追記してください。 |
<header>
<div class="container">
<div class="flex_parent">
<div class="logo">
<a href="/tweet_servlet/top">DigTweet
</a>
</div>
</div>
</div>
</header>見出し
見出しは以下の要素で構成されています。
| ① | 見出し |
手順3
| (1) | headerタグの閉じタグの下に下記のコードを追記してください。 |
<main id="index">
<div class="section_inner">
<div class="container">
<h1>ログイン</h1>
</div>
</div>
</main>ログインフォーム
ログインフォームは以下の要素で構成されています。
| ① | メールアドレス入力欄 |
| ② | パスワード入力欄 |
| ③ | 送信ボタン |
手順4
| (1) | h1タグの下に下記のコードを追記してください。 |
<form class="login_form" action="/tweet_servlet/login" method="POST">
<label for="email">mail：</label>
<input id="email" type="email" name="mail"><br>
<label for="pass">pass：</label>
<input id="pass" type="password" name="pass"><br>
<button type="submit">ログイン</button>
</form>フッター
フッターは以下の要素で構成されています。
| ① | コピーライト（著作権情報） |
手順5
| (1) | mainタグの閉じタグの下に下記のコードを追記してください。 |
<footer class="flex_parent">
<p><small>© 2020 Dig Skill</small></p>
</footer>
以上でログイン画面を実装することができました。以下の手順でプロジェクトを実行して、確認してみましょう。
手順6
| (1) | eclipseの「パッケージ・エクスプローラー」から、「tweet_servlet」フォルダーを右クリックして、「実行」 > 「サーバーで実行」をクリックしてください。 |
サーバーが起動し、以下の画面になれば成功です。
また、今後「プロジェクトを実行」、「プロジェクトを再起動」という手順が出てきたら、上の手順で実行してください。
想定結果
Tips
原因不明のエラー
eclipseで原因不明のエラーが発生した場合、対象のソースを全選択後、切り取りをし、再度貼り付けて保存することで直る場合があるので試してみてください。
