第 6 章: Doking の BLOG ユーザー登録ページの実装
誰かが発見しました: ユーザーはどこにメモや返信を投稿する必要がありますか?これは第 6 章と第 7 章で取り上げられる問題です。この章では主にユーザー登録ページの実装について説明します。
6.1.1 テンプレート bkblog.dwt.aspx ページの変更
(1) テンプレート bkblog.dwt.aspx を開き、左の列にテーブル Lefttab を挿入し、最初の行にフォーム Yhlogfrm を挿入し、 table logtab を Yhlogfrm 形式で作成し、関連するテキスト ボックス、テキスト領域、ボタンを挿入します。結果は図 6-1-1 に示されています。
図 6-1-1 テンプレートのユーザー ログインのデザイン
(2) 作成者に対応するテキスト ボックスに「Logname」という名前を付け、パスワードに対応するテキスト ボックスに「Logpass」という名前を付け、「登録」のアクションを変更します。ボタンを「なし」に変更します。「ログイン」ボタンのアクションを「フォームを送信」に変更します。
(3) [登録] ボタンを選択し、[動作] パネルで URL に動作を追加し、ポップアップ ダイアログ ボックスに図 6 に示すようにリンクを「../yhinlog.aspx」と入力します。 -1-2 :
図 6-1-2 URL に移動する動作の追加
(4) テンプレートを保存し、すべての Web ページを更新します。
6.1.2 登録ページの設計
(1) テンプレート bkblog.dwt.aspx で生成された新しい ASP.NET VB 動的ページ yhinlog.aspx を作成し、本体の編集可能領域にフォーム Yhinfrm を挿入し、 yhinlog を作成し、関連するデザインを実行した結果を図 6-1-3 に示します。
図 6-1-3 テーブル yhinlog のデザイン
(2) ユーザー名に対応するテキスト ボックスを選択し、ラベル パネルに切り替え、「CSS/Accessibility」を展開し、ID に YHNAME を入力し、「Unclassified」を展開し、runat を入力します。サーバー では、図 6-1-4 に示すように、YHNAME テキスト ボックスをサーバー コントロールに変更します。
図 6-1-4 テキスト ボックスのラベル
(3) を変更します。 パスワードに対応するテキスト ボックスの名前は YHPASS、パスワードの確認に対応するテキスト ボックスの名前は REPASS、QQ コードに対応するテキスト ボックスの名前はYHQQ という名前を付け、電子メールに対応するテキスト ボックスに YHEMAIL という名前を付け、ホームページ上の対応するテキスト ボックスに YHINDEX という名前を付け、すべてのテキスト ボックスをサーバー コントロールに変更します。
(4) フォーム Yhinfrm を選択し、サーバー コントロールに変更して、yhinlog.aspx を保存します。
6.1.3 登録ページのデザインを完成させる
(1) テンプレート bkblog.dwt.aspx から新しい動的 Web ページ yhlogok.aspx を作成し、本文の編集可能領域に 3 行 1 列の表ロゴを挿入し、2 行目に「ようこそ」というテキストを入力して、[クリック] をクリックします。 ASP.NETのショートカットメニュー「データのバインド」をクリックし、「トリミングされたフォーム要素」をクリックし、図6-1-5に示す位置にカーソルを移動し、「YHNAME」と入力します。
図 6-1-5 トリミングされたフォーム要素の挿入
(2) デザイン ビューに戻り、引き続きテキスト「Donking's BLOG!」を入力し、テーブルのロゴをデザインします。結果は図 6-1-6 に示されています。
図6-1-6 テーブルのロゴデザイン
(3) 「ホーム」ボタンを選択し、[動作]パネルでURLに移動する動作を追加し、ポップアップダイアログボックスでリンクを「index」と入力します。 .aspx"、yhlogok.aspx を保存
ユーザーが誤った登録情報を入力することを防ぐために、ユーザー登録情報を標準化して検証する必要があります。
(1) 図 6-2-1 に示すように、yhinlog.aspx を開き、ASP.NET ショートカット メニューを開き、[その他のタグ] をクリックします。
図6-2-1 ASP.NETのショートカットメニュー
(2) ポップアップラベルセレクターで「ASP.NETラベル」→「検証サーバーコントロール」を展開し、右ウィンドウ枠で「asp:RequiredFieldvalidator」を選択し、「」をクリックします。以下の図 6-2-2 に示すように、[挿入] ボタンをクリックします。
図 6-2-2 タグ セレクター
(3) ポップアップ タグ エディターで、テキスト ボックス YHNAME の検証コントロールを追加し、図 6-2-3 に示すように項目を入力します。
図 6-2-3 RequiredFieldValidator タグ エディター
(4) タグ セレクターを開き、ASP.NET 検証サーバー コントロール → CompareValidator コントロールを挿入し、テキスト ボックス YHPASS の REPASS テキスト ボックスを持つ比較検証コントロールを追加し、関連するフィールドを入力します。図 6-2-4 に示す情報を示します。
図 6-2-4 CompareValidato タグ エディター
(5) ASP.NET 検証サーバー コントロール → Rangevalidator コントロールを挿入し、テキスト ボックス YHQQ の検証コントロールを追加し、図 6-2-5 に示すように関連情報を入力します。
図 6-2-5 範囲検証タグエディタ
(6) ASP.NET検証サーバーコントロール→正規表現検証コントロールを挿入し、テキストボックスYHEMAILの検証コントロールを追加し、図6-2のように各項目を入力します。 -6、検証式の式は次のとおりです:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
図 6-2-6 正規表現バリデータ タグ エディタ
(7) ASP.NET 検証サーバー コントロール → 正規表現バリデータ コントロールを挿入し、テキスト ボックス YHINDEX の検証コントロールを追加し、図 6-に示すように各項目を入力します。 2-7、検証の式は次のとおりです: http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
図 6-2-7 正規表現バリデータ タグエディタ
(8) には、ユーザーが登録したユーザー名の重複を防ぐための検証コントロールが必要です。
①データセット yhinlog を追加し、フィルターに設定します。フィルターフィールドは YHNAME、パラメーター変数はフォーム変数 YHNAME です。その設定を図 6-2-8 に示します。
図 6-2-8 データセット yhinlog の挿入
② ASP.NET 検証サーバー コントロール → CustomValidator コントロールを挿入し、テキスト ボックス YHINDEX の検証コントロールを追加し、図 6-2-9 に示すように各項目を入力します。クライアント検証関数を含む:
<%# IIf(yhinlog.RecordCount>0,FALSE,TRUE) %>
図 6-2-9 カスタムバリデータタグエディタ
(9) yhinlog.aspx を保存し、IE で参照します。 図 6-2-10 のダイアログボックスが表示された場合は、ルートディレクトリにサブディレクトリが存在しません。 dklog サイト aspnet_client には、コントロールを検証するために必要な JS スクリプト ライブラリもありません。 .NET Framework をインストールするとき、インストール プログラムはデフォルト サイト c:Inetpubwwwroot のルート ディレクトリにコピーされます。c:Inetpubwwwroot のサブディレクトリ aspnet_client を dkblog サイトのルート ディレクトリにコピーします。わかりました！
図 6-2-10 必要な JS スクリプト ライブラリが見つからない
(1) yhinlog.aspx を開き、[レコードの挿入] サーバー ビヘイビアーを追加し、フォームの関連データをデータテーブル YH の設定を図 6-3-1 に示します。
図 6-3-1 [レコードの挿入] 追加サーバーの動作
(2) ASP.NET は gb2312 エンコーディングの送信をサポートしていません。コード ビューに切り替えて次を見つけます:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
コード ResponseEncoding="gb2312" を削除すれば問題ありません:
<%@ Page Language ="VB" ContentType="text/html"%>
(3) IE でユーザー登録情報を保存、参照、送信し、Access で YH テーブルを開くと、送信された中国語の情報がすべて ?? に変更されていることがわかります。 。何をするか？心配しないでください。これは、TASP.NET が gb2312 エンコーディングの送信をサポートしていないためです。 yhinlog.aspx を開き、コード ビューに切り替え、コードの最初の行を見つけます:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
これを次のように変更します:
<%@ Page Language= "VB" ContentType="text/html" %>
つまり、ResponseEncoding="gb2312" を削除します。他の Web ページも、中国語の投稿情報の誤りを防ぐために、この方法に従って変更されています。
