チュートリアル1(モックアップ)

今回は、次のようなサイトを作成します。
背景画像は、image/wallpaper.gifです。

メニュー

menu.html

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>メニュー</title>
</head>
<body background="image/wallpaper.gif">
<p><font size="+3">メニュー</font></p>
<p><a href="user/seek.html">ユーザー一覧</a></p>
</body>
</html>

条件にあうデータは見つかりませんでした。

戻る

user/seek.html

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>ユーザー一覧</title>
</head>
<body background="../image/wallpaper.gif">
<form method="POST" action="seek.html">ユーザーID <input size="20" type="text" name="user_id">
 &nbsp;<input type="submit" name="seek" value="検索"></form>
<p name="not_found">条件にあうデータは見つかりませんでした。</p>
<form method="POST" action="seek.html">
<div name="result"><span name="page_top"><a href="seek.html">前へ</a>
 &nbsp; <a href="seek.html">1</a>
 &nbsp; <a href="seek.html">2</a>
 &nbsp; <a href="seek.html">3</a>
 &nbsp; <a href="seek.html">次へ</a></span>
<table border="1" name="list">
  <tbody>
    <tr>
      <td bgcolor="#00cccc">No</td>
      <td bgcolor="#00cccc">ユーザーID</td>
      <td bgcolor="#00cccc">名前</td>
      <td bgcolor="#00cccc">性別</td>
      <td bgcolor="#00cccc">住所</td>
      <td bgcolor="#00cccc">&nbsp;</td>
    </tr>
    <tr>
      <td align="right">1</td>
      <td>ユーザーID</td>
      <td>名前</td>
      <td>性別</td>
      <td>住所</td>
      <td><input type="submit" name="edit" value="編集">
      &nbsp;<input type="submit" name="delete" value="削除"></td>
    </tr>
  </tbody>
</table>
<span name="page_bottom"><a href="seek.html">前へ</a>
 &nbsp; <a href="seek.html">1</a>
 &nbsp; <a href="seek.html">2</a>
 &nbsp; <a href="seek.html">3</a>
 &nbsp; <a href="seek.html">次へ</a></span></div>
<br>
<br>
<input type="submit" name="new" value="新規追加"></form>
<p><a href="../menu.html">戻る</a></p>
</body>
</html>

user/edit.html

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>編集</title>
</head>
<body background="../image/wallpaper.giff">
<form method="POST" action="seek.html">
<table border="0">
  <tbody>
    <tr>
      <td>ユーザーID</td>
      <td><input size="20" type="text" name="user_id"></td>
    </tr>
    <tr>
      <td>名前</td>
      <td><input size="20" type="text" name="name"></td>
    </tr>
    <tr>
      <td>性別</td>
      <td><input type="radio" name="sex" value="m">男性 &nbsp;<input type="radio" name="sex" value="f">女性</td>
    </tr>
    <tr>
      <td>住所</td>
      <td><input size="20" type="text" name="address"></td>
    </tr>
  </tbody>
</table>
<b><font name="error" color="#ff0000">エラー<br>
</font></b><br>
<input type="submit" name="ok" value="決定"> &nbsp;<input type="submit" name="cancel" value="キャンセル"></form>
</body>
</html>

次のような動作を実装します。

menu.html	特にありません。
user/seek.html	検索ボタンはDBからの絞り込み検索のようなものを想定していますが、チュートリアルではDBも使いませんし、検索処理も入れません。ユーザーIDが空欄なら全件表示、何か入力されていれば0件表示とします。
	一覧は最大３件までの表示とし、それ以上の件数はページ切り替えにより表示します。
	一覧が最初のページなら「前へ」は表示させません。
	一覧が最後のページなら「次へ」は表示させません。
user/edit.html	seek.htmlから新規追加で遷移してきた時は全て空欄表示です。
	seek.htmlから編集で遷移してきた時は値が設定されて表示します。また、ユーザーIDは変更不可とします。
	全て必須入力とし、未入力があればエラーとします。
	ユーザーIDは半角英数字のみとし、違反があればエラーとします。

チュートリアル2(スケルトンソース)へ

No	ユーザーID	名前	性別	住所
1	ユーザーID	名前	性別	住所