Chapter Six: Implementation of Doking's BLOG user registration page
Someone discovered: Where should users post notes and replies? This is the question that Chapters 6 and 7 will address. This chapter mainly explains the implementation of the user registration page.
6.1.1 Modification of the template bkblog.dwt.aspx page
(1) Open the template bkblog.dwt.aspx, insert the table Lefttab in the left column, insert the form Yhlogfrm in the first row, and insert the table logtab in the form Yhlogfrm , and insert relevant text boxes, text areas and buttons. The result is shown in Figure 6-1-1:
Figure 6-1-1 User login design in the template
(2) Name the text box corresponding to the author Logname; name the text box corresponding to the password Logpass, and change the type to Password; change the action of the "Register" button to "None" ;Change the action of the "Login" button to "Submit Form".
(3) Select the button "Register", in the [Behavior] panel, add a behavior to the URL, and in the pop-up dialog box, enter the link as "../yhinlog.aspx" as shown in Figure 6-1-2 :
Figure 6-1-2 Add the behavior of going to URL
(4) Save the template and update all web pages.
6.1.2 Design of the registration page
(1) Create a new ASP.NET VB dynamic page yhinlog.aspx generated by the template bkblog.dwt.aspx, insert the form Yhinfrm in the editable area of the mainbody, then insert the form yhinlog, and perform related designs. The result is shown in Figure 6-1-3:
Figure 6-1-3 Design of table yhinlog
(2) Select the text box corresponding to the user name, switch to the label panel, expand "CSS/Accessibility", enter YHNAME in the id; expand "Unclassified", enter runat, server , change the YHNAME text box to a server control, as shown in Figure 6-1-4:
Figure 6-1-4 Modify the text box label
(3) and so on. The text box corresponding to the password is named YHPASS, the text box corresponding to the password confirmation is named REPASS, the text box corresponding to the QQ code is named YHQQ, and the corresponding text box to the Email Name the text box YHEMAIL, name the corresponding text box on the home page YHINDEX, and change all text boxes to server controls.
(4) Select the form Yhinfrm, change it to a server control, and save yhinlog.aspx.
6.1.3 Complete the design of the registration page
(1) Create a new dynamic web page yhlogok.aspx from the template bkblog.dwt.aspx, insert a table logo with three rows and one column in the mainbody editable area, enter the text "Welcome" in the second row, and click on the ASP.NET shortcut menu "Bind Data", then click "Trimmed Form Element", move the cursor to the position shown in Figure 6-1-5, and enter "YHNAME".
Figure 6-1-5 Insert the trimmed form element
(2) Return to the design view, continue to enter the text "Donking's BLOG!", and design the table logo. The result is shown in Figure 6-1-6:
Figure 6-1-6 Table logo design
(3) Select the button "Home" button, in the [Behavior] panel, add a behavior to go to the URL, in the pop-up dialog box, enter the link as "index.aspx", save yhlogok.aspx
In order to prevent users from entering incorrect registration information, user registration information must be standardized and verified.
(1) Open yhinlog.aspx, open the ASP.NET shortcut menu, and click [More Tags], as shown in Figure 6-2-1:
Figure 6-2-1 ASP.NET shortcut menu
(2) Expand "ASP.NET Label" → "Validation Server Control" in the pop-up label selector, select "asp:RequiredFieldvalidator" in the right window frame, and click " Click the "Insert" button, as shown in Figure 6-2-2 below:
Figure 6-2-2 Tag Selector
(3) In the pop-up tag editor, add a validation control for the text box YHNAME and fill in the items as shown in Figure 6-2-3:
Figure 6-2-3 RequiredFieldValidator tag editor
(4) Open the tag selector, insert the ASP.NET verification server control → CompareValidator control, add a comparison verification control with the REPASS text box for the text box YHPASS, and fill in the relevant information as shown in Figure 6-2 -4 shown:
Figure 6-2-4 CompareValidato tag editor
(5) Insert the ASP.NET verification server control → Rangevalidator control, add a verification control for the text box YHQQ, and fill in the relevant information as shown in Figure 6-2-5:
Figure 6-2-5 Range validator tag editor
(6) Insert the ASP.NET validation server control → Regular expression validator control, add a validation control for the text box YHEMAIL, and fill in the various items as shown in Figure 6-2-6, in which the validation expression The formula is:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
Figure 6-2-6 Regular expression validator tag editor
(7) Insert the ASP.NET verification server control → Regular expression validator control, add a verification control for the text box YHINDEX, and fill in the various items as shown in Figure 6-2-7, in which the verification The expression is: http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
Figure 6-2-7 Regular expression validator Tag editor
(8) should have a validation control to prevent duplicate user names registered by users.
①Add the data set yhinlog, set it to filter, the filter field is YHNAME, and the parameter variable is the form variable YHNAME. Its settings are shown in Figure 6-2-8:
Figure 6-2-8 Insert the data set yhinlog
② Insert the ASP.NET verification server control → CustomValidator control, add a verification control for the text box YHINDEX, and fill in the various items as shown in Figure 6-2-9, including the client verification function is:
<%# IIf(yhinlog.RecordCount>0,FALSE,TRUE) %>
Figure 6-2-9 Custom Validator tag editor
(9) Save yhinlog.aspx and browse it in IE. If the dialog box shown in Figure 6-2-10 appears, it means that there are no subdirectories in the root directory of the dklog site. aspnet_client also does not have the JS script library necessary to verify controls. When installing the .NET framework, the installation program has been copied to the root directory of the default site c:Inetpubwwwroot. Copy the subdirectory aspnet_client in c:Inetpubwwwroot to the root directory of the dkblog site, and it's OK!
Figure 6-2-10 The necessary JS script library cannot be found
(1) Open yhinlog.aspx, add the [Insert Record] server behavior, and add the relevant data of the form to the data table YH. The settings are shown in Figure 6-3-1:
Figure 6-3-1 Add [Insert Record] Server Behavior
(2) ASP.NET does not support gb2312 encoding transmission. Switch to the code view and find:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
Delete the code ResponseEncoding="gb2312" and it will be OK:
<%@ Page Language ="VB" ContentType="text/html"%>
(3) Save, browse and submit the user registration information in IE, and open the YH table in Access. You can find that all the submitted Chinese information has changed to ??. What to do? Don't worry, this is because TASP.NET does not support gb2312 encoding transmission. Open yhinlog.aspx, switch to code view, find the first line of code:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
Change it to:
<%@ Page Language= "VB" ContentType="text/html" %>
That is, remove ResponseEncoding="gb2312". Other web pages are also modified according to this method to prevent errors in Chinese submission information.
