2. ユーザー登録機能を作成する手順
ユーザー登録機能を作成する手順
目的：ユーザー登録機能（全４手順）を覚える
- ユーザー登録に必要なルーティングを書く
- ユーザー登録フォームを表示させる
- ビューファイルの作成（手順に従って新規ファイル登録）
- ユーザー登録リンクボタンの作成
このように覚える
ユーザー登録画面を作成しよう
今回作成するユーザー登録画面内容
ユーザー名、メールアドレス、パスワード
このように設計する
ユーザー登録画面を表示しよう
getメソッドによって/signupにアクセスしたときに
「ユーザー登録画面」を表示させるコード
app.get('/signup', (req, res) => {
res.render('signup.ejs');
});
このように書く
ユーザー登録フォームを作成しよう
ユーザー登録画面のアクセス先（/signup）は下記
<form>
<p>ユーザー名</p>
<input type="text">
<p>メールアドレス</p>
<input type="text">
<p>パスワード</p>
<input type="password">
<input type="submit value="">
<a href="/list">一覧にもどる</a>
</form>
このように書く
ユーザー登録画面へのリンクを追加しよう
ログオフの状態時、ユーザー画面登録欄に
「新規登録」リンクボタンを表示させる
リンクの追加
<li><a href='/signup>新規登録</a></li>
このように書く
演習問題
ユーザー登録に必要なルーティングを書く
どこに書く？
：確認
どうやって？
: app.getを使用し、/signup に対応可能なルーティングを書く
:第２引数に指定するルーティングの処理方法を確認しておくこと
ユーザー登録フォームを表示させる
どうやって？
: /signup に関するルーティングの中に書く
:res.render(/signup.ejs) このように書いて表示させる
ビューファイルの作成（手順に従って新規ファイル登録）
新規ファイルを作成する
どこに？
：指定（view）フォルダの中
どうやって作る？
：指定コードをコピペする
ユーザー登録リンクボタンの作成
どこに？
：ヘッダー部分に書くのでヘッダーejsファイルへ
どうやって？
：<li><a href="/signup">新規登録</a></li>
これでユーザー登録画面ができた。
今回はここまでになります。お疲れ様でした。
