【perl】(5)フレームワークを使って、ログイン処理・新規登録を行うプログラム〜html編

perl

【ログイン画面】login.html

<html>
<head>
<title>ログイン</title>
</head>
<body>
<form method="post" action="?mode=login">
[% var.msg | html %]
<table border>
	<tr>
		<td align="right">ID: </td>
		<td><input type="text" name="id"></td>
	</tr>
	<tr>
		<td align="right">PASS: </td>
		<td><input type="password" name="pass"></td>
	</tr>
	<tr>
		<td colspan="2" align="center"><input name="login" type="submit" value="ログイン"></td>
	</tr>
</table>
</form>
</body>
</html>


【新規登録画面】new.html

<html>
<head>
<title>新規登録</title>
</head>
<body>
<form method="post">
<input type="hidden" name="mode" value="confirm">
<input type="hidden" name="prev_mode" value="new">
<input type="hidden" name="next_mode" value="create">
<table border>
	<tr>
		<th>ID: </th>
		<td><input name="id" value="[% self.query.param('id') | html %]"></td>
	</tr>
	<tr>
		<th>名前: </th>
		<td><input name="name" value="[% self.query.param('name') | html %]"></td>
	</tr>
	<tr>
		<th>PASS: </th>
		<td><input name="pass" type="password" value="[% self.query.param('pass') | html %]"></td>
	</tr>
	<tr>
		<th>email: </th>
		<td><input name="email" value="[% self.query.param('email') | html %]"></td>
	</tr>
	<tr>
		<td colspan="2" align="center"><input type="submit" value="確認"></td>
	</tr>
</table>
<a href="?mode=list">一覧に戻る</a>
</form>
</body>
</html>

【確認画面】confirm.html

<html>
<head>
<title>確認</title>
</head>
<body>
<form method="post">
<input type="hidden" name="mode" value="">
<table border>
	<tr>
		<th>ID: </th>
		<td>
			[% self.query.param('id') | html %]
			<input type="hidden" name="id" value="[% self.query.param('id') | html %]">
		</td>
	</tr>
	<tr>
		<th>名前: </th>
		<td>
			[% self.query.param('name') | html %]
			<input type="hidden" name="name" value="[% self.query.param('name') | html %]">
		</td>
	</tr>
	<tr>
		<th>PASS: </th>
		<td>
			[% self.query.param('pass') | html %]
			<input type="hidden" name="pass" value="[% self.query.param('pass') | html %]">
		</td>
	</tr>
	<tr>
		<th>email: </th>
		<td>
			[% self.query.param('email') | html %]
			<input type="hidden" name="email" value="[% self.query.param('email') | html %]">
		</td>
	</tr>
	<tr>
		<td colspan="2" align="center">
			<input type="submit" value="戻る" onclick="this.form.mode.value='[% self.query.param('prev_mode') %]'">
			<input type="submit" value="登録" onclick="this.form.mode.value='[% self.query.param('next_mode') %]'">
		</td>
	</tr>
</table>
</form>
</body>
</html>

【編集画面】edit.html

<html>
<head>
<title>編集</title>
</head>
<body>
<form method="post">
<input type="hidden" name="mode" value="confirm">
<input type="hidden" name="prev_mode" value="edit">
<input type="hidden" name="next_mode" value="update">
<table border>
	<tr>
		<th>ID: </th>
		<td>
			[% self.query.param('id') | html %]
			<input type="hidden" name="id" value="[% self.query.param('id') | html %]">
		</td>
	</tr>
	<tr>
		<th>名前: </th>
		<td><input name="name" value="[% self.query.param('name') | html %]"></td>
	</tr>
	<tr>
		<th>PASS: </th>
		<td><input name="pass" type="password" value="[% self.query.param('pass') | html %]"></td>
	</tr>
	<tr>
		<th>email: </th>
		<td><input name="email" value="[% self.query.param('email') | html %]"></td>
	</tr>
	<tr>
		<td colspan="2" align="center"><input type="submit" value="確認"></td>
	</tr>
</table>
<a href="?mode=list">一覧に戻る</a>
</form>
</body>
</html>

【データベースの情報をリストで取得】list.html

<html>
<head>
<title>一覧</title>
</head>
<body>
<table border>
	<tr>
		<th>ID</th>
		<th>名前</th>
		<th>メールアドレス</th>
	</tr>
	[% FOREACH u = var.list %]
	<tr>
		<td><a href="?mode=edit&id=[% u.id | html %]">[% u.id | html %]</a></td>
		<td>[% u.name | html %]</td>
		<td>[% u.email | html %]</td>
	</tr>
	[% END %]
</table>
<input type="button" value="新規登録" onclick="location.href='?mode=new'">
</body>
</html>