用戶管理系統建設Index.asp用戶登錄模塊找回密碼修改資料模塊新用戶注冊界面Register.aspRefail.aspRegok.aspLoginfail.aspWelcome.aspLostpassword.aspUserupdate.aspShowquestion.aspShoupassword.aspUserupdateok.aspLogoot.asp一、系統整體規劃（一）頁面設計規劃在本地站點建立站點文件夾member。其下將創建的文件夾及文件如圖所示（二）網頁美工設計本例采用“拐角型”布局結構。美工設計效果如下。素材可自己制作，也可使用我發給大家的。二、數據庫設計與連接（一）數據庫設計通過功能分析發現，數據庫應該包括注冊的用戶名、注冊密碼以及一些個人信息，如性別、年齡、E-mail、電話等。所以數據庫中應該包括上述信息的表，稱之為“用戶信息表”。本實驗中將數據庫命名為member，創建的用戶信息表member如圖所示。數據設計庫表user的字段組成結構如下：下面介紹在ACCESS中創建數據庫的方法和步驟。1.新建空白數據庫；2.保存為member.mdb，保存類型中選擇“Microsoftofficeaccess2002-2003數據庫”，是為了讓數據庫通用；3.在空白數據庫中建立新的“數據表”，另存為“表名稱”為member。4.按照字段的名稱和屬性進行設置。5.打開member數據表，可以再其中預先編輯一些記錄對象，其中admin的權限（authority）值為1，其余用戶的權限為0，即為一般用戶。6.編輯完成，保存，關閉，數據庫和存儲用戶名和密碼等資料的表建立完成。（二）創建數據庫連接具體步驟：1.依次單擊“控制面板”|“管理工具”|“數據源（ODBC）”|“系統DSN”命令；2.單擊添加按鈕，在“創建新數據源”對話框中選擇DriverdoMicrosoftAccess(*.mdb)選項，如圖3.單擊完成按鈕，打開“ODBCMicrosoftAccess安裝”對話框，在“數據源名（N）”文本框中輸入dsnuser，如圖4.單擊選擇按鈕，找到需要找到的數據庫。5.確定之后，完成系統DSN的設置。6.啟動dreamweaver，在網站根目錄下新建一個名為index.asp網頁并保存7.設置好“站點”、“文檔類型”、“測試服務器”，在dreamweaver中執行菜單“窗口”|“數據庫”命令或者快捷鍵shift+ctrl+F10，打開“數據庫”面板，單擊添加按鈕，選擇“數據源名稱（DSN）”。8.在這個對話框中，在“連接名稱”中輸入user，單擊“數據源名稱”，在其中選擇dsnuser，其他默認，確定完成。9.同時在網站根目錄下將會自動創建名為Connections的文件夾，該文件夾內有一個名為user.asp的文件，可以用記事本打開。10.保存文檔，完成數據庫連接。三、用戶登錄模塊的設計（一）登陸界面在用戶訪問該用戶管理系統時，首先要進行身份驗證，這個功能是靠登錄界面來實現的。所以登陸頁面中必須有要求用戶輸入用戶名和密碼的文本框，以及輸入完成后進行登錄的“登錄”按鈕和輸入錯誤后重新設置用戶名和密碼的“重置”按鈕。詳細制作步驟如下：1.首先來看一下用戶登錄的首頁設計，如圖。2.index.asp頁面是用戶登錄系統的首頁，打開前面創建的index.asp頁面，輸入網頁標題“帆云購物中心”，然后執行菜單“文件”|“保存”命令將網頁標題保存。3.執行菜單“修改”|“頁面屬性”命令，然后在“背景顏色”文本框中輸入顏色為#CCCCCC，在“上邊距”文本框中輸入0像素，這樣設置是為了讓頁面的第一個表格能置頂到上面，并形成一個灰色的底紋的頁面，設置如圖。4.設置完成后單擊“確定”按鈕，進入“文檔”窗口，執行菜單“插入”|“表格”命令，在打開的“表格”對話框中，設置3行3列的表格。表格寬度為775像素，邊框粗細、單元格邊框和間距都為0，如圖。5.單擊確定，完成表格插入。將鼠標設置在第1行表格中，在“屬性”面板中單擊合并單元格表格合并，再執行菜單“插入記錄”|“圖像”，選擇圖片“01.gif”，如圖。，將第一行6.單擊確定，完成圖片插入。鼠標放置在第3行表格中，合并單元格，將第3行表格合并，插入圖片“05.gif”，如圖。7.選擇整個表格，在“屬性”面板中，選擇“對齊”為“居中對齊”，如圖。8.把光標移至創建表格第2行第1列中，在“屬性”中設置高度為456像素，寬度為179像素，在垂直中選擇“頂端”，再將光標移至這一列中，單擊“拆分”按鈕，在<td>中加入background=”/images/02.gif”，效果如圖。9.在表格的第2行第2列和第3列中，分別插入同站點images文件夾中的圖片03.gif和04.gif10.單擊第2行第1列的單元格，單擊“文檔”窗口上的拆分按鈕，在<td>和</td>之間加入valign=”top”（表格文字和圖片的相對擺放位置，可選值為top、middle、bottom）。11.單擊“文檔”窗口的“設計”按鈕，在剛創建的表格的單元格中，執行菜單插入表單命令12.將鼠標放置在該表單中，執行菜單“插入記錄”|“表格”，打開“表格”對話框，行數5，列為2。表格寬度179像素。單擊并拖動鼠標分別選擇第1行和第5行表格，單擊合并按鈕進行合并。在第2行第1列中輸入文字說明“用戶名”，第2行第2列中執行菜單“插入記錄”|“表單”|“文本域”，插入一個單行文本域表單對象，并定義文本域名為“username”，“文本域”設置如圖所示13.第3行第1列表格中輸入文字“密碼”，在第3行表格的第2列中執行“插入記錄”|“表單”|“文本域”，定義文本域名為“password”，“文本域”設置如圖所示14.選擇第4行單元格，執行“插入記錄”|“表單”|“按鈕”命令兩次，插入兩個按鈕，分別更改屬性變更，一個是登錄時用的“提交表單”選項，一個是“重設置單”，“屬性”的設置如圖15.在第5行輸入“注冊新用戶”，并選擇這幾個字在窗口欄中選擇“插入”|“超級鏈接”，并設置一個轉到用戶注冊頁面register.asp，效果如圖16.忘記密碼可以找回密碼，在表格第5行中輸入“找回密碼”，并設置一個轉到密碼查詢頁面lostpassword.asp的鏈接對象17.表單編輯完成之后，來編輯網頁的動態內容，使用戶可以通過該網頁中表單的提交實現登錄功能。打開“服務器行為”面板，單擊添按鈕，執行菜單“用戶身份驗證”|“登錄用戶”，如圖18.打開“登錄用戶”對話框，各項參數設置如圖19.單擊確定后，返回“文檔”窗口。在“服務器行為”面板中就增加了一個“登錄用戶”行為，如圖20.表單對象對應的“屬性”面板的動作屬性值如圖所示，為<%=MM_LoginAction%>，這是dreamweaver自動生成的動作代碼。21.保存到本地站點，完成首頁的制作（二）登錄成功和登錄失敗頁面的制作登錄如果不正確，就會轉到loginfail.asp頁面；如果登錄信息正確，就會轉到welcome.asp頁面。1.創建新ASP網頁并保存為loginfail.asp在網站根目錄下，在“布局”下拉菜單中選擇“無”，；2.登錄失敗頁面設計如圖所示。在文檔中選擇“這里”文本，加入超級鏈接指向index.asp3.保存，完成創建下面制作welcome.asp頁面1.創建新ASP網頁并保存為welcome.asp在網站根目錄下；2.類似的方法制作靜態部分，如圖3.執行“窗口”|“綁定”，打開“綁定”面板，單擊添加按鈕，選擇“階段變量”定義一個階段變量，如圖所示4.打開“階段變量”對話框。在名稱中輸入MM_username，單擊確定5.在文檔窗口拖動鼠標選擇“XXXXXX”文本，然后在“綁定”面板中選擇MM_username變量，再單擊“綁定”面板底部的“插入”按鈕，將其插入到該“文檔”的指定位置。完了就可以看到“XXXXXX”被{Session.MM_username}代替，如圖所示6.在文檔中選中“注銷你的用戶”文本。執行“窗口”|“服務器行為”|“用戶身份驗證”|“注銷用戶”7.打開“注銷用戶”對話框進行設置。●“在以下情況下注銷”用于設置注銷，在本實驗中選中“單擊鏈接”，在右邊下拉菜單中選擇“注銷你的用戶”●“在完成后，轉到”用于設置注銷后顯示的頁面，在右側文本框輸入logoot.asp，如圖8.確定之后返回“文檔”窗口。在“服務器行為”中就添加了一個“注銷用戶”行為，同時可以看到“注銷用戶”鏈接文本對應的“屬性”面板中的“鏈接”屬性值是<%=MM_Logout%>，這是dreamweaver自動生成9.logoot.asp的頁面設置比較簡單，不做詳細說明，在頁面的“這里”指定一個鏈接到首頁index.asp就可以了，如圖10.保存到本地站點。就可以進行測試該系統的執行情況了。文檔中的“修改您的注冊資料”鏈接到userupdate.asp頁面，此頁面在后面的修改中進行介紹。（三）用戶登錄系統功能的測試制作好系統后，需要測試才能上傳到服務器使用，步驟如下：1.打開IE，輸入/index.asp，打開index.asp2.在“用戶名”和“密碼”文本框輸入，單擊“登錄”3.如果登錄信息錯誤，就會轉到loginfail.asp4.如果正確，則顯示登錄成功頁面。這里輸入的是預設在數據庫中的用戶admin，成功就會轉到welcome.asp5.如果想注銷，只需要單擊“注銷你的用戶”即可，就會轉到logoot.asp，然后單擊“這里”回到首頁。6.至此登錄功能測試完成四、用戶注冊模塊的設計該模塊是實現新用戶注冊功能（一）用戶注冊頁面用戶注冊的操作就是向member.mdb數據庫的member表中添加記錄的操作，如圖1.創建新ASP網頁并保存為register.asp在網站根目錄下，在“布局”下拉菜單中選擇“無”，2.在dreamweaver中使用靜態頁面的工具完成如圖所示的靜態部分，這里說明的是在注冊時需要加入一個“隱藏區域”并命名為authority，設置默認值為0，即所有的用戶注冊的時候默認是一般訪問用戶3.還需要設置一個驗證表單的動作，用來檢查訪問者在表單中填寫的內容是否滿足數據庫中表user中字段的要求。在將用戶填寫的注冊資料提交到服務器之前，就會對用戶填寫的資料進行驗證。如果有不符合要求的信息，可以向訪問者顯示錯誤的原因，并讓訪問者重新輸入。4.執行菜單“窗口”|“行為”，打開行為面板的添加按鈕，從打開的行為列表中選擇“檢查表單”，打開如圖本試驗中，設置username、password、password1、answer、truename、address文本域為“值：必需的”，“可接受：任何東西”，也就是說這幾個文本域必填不能空；tel和QQ文本域驗證條件為“值：必需的”，“可接受：數字”，表示這兩個必須填寫數字不能為空；e-mail文本域的驗證條件是“值：必需的”，“可接受：電子郵件”，表示該文本域必須填寫電子郵件地址不能為空5.設置完成，點擊確定6.在文檔窗口單擊工具欄中的“代碼”按鈕，在驗證表單的動作代碼中加入如下：編輯完成后，單擊“設計”按鈕，返回文檔窗口此時，可以測試一下執行的結果7.在該網頁中添加一個“插入記錄”的服務器行為。執行“窗口”|“服務器行為”，打開“服務器行為”面板，單擊添加按鈕，選擇“插入記錄”。8.在對話框中設置：●從“連接”下拉列表框選擇user作為數據源連接對象●從“插入到表格”下拉列表框選擇member作為使用的數據庫表對象●在“插入后，轉到”文本框中設置記錄成功添加到表member后，轉到regok.asp●在對話框下半部分，將網頁中的表單對象和數據庫中表member中的字段一一對應，如圖9.設置完成后，單擊確定，返回“文檔”窗口，如圖10.設置檢查用戶名是否重復。單擊“服務器行為”上的添加按鈕，在彈出的菜單中，執行“用戶身份驗證”|“檢查新用戶名”命令，在對話框中設置如下：●在“用戶名字段”下拉列表框中選擇username字段●在“如果已存在，轉到”文本框中輸入regfail.asp，該網頁將在后面編輯●設置完成如圖11.設置完成后，將該文檔保存到本地站點中，完成本頁制作。（二）注冊成功和注冊失敗頁面為了方便登錄，應該在regok.asp中設置一個轉到index.asp的文字鏈接。同時為了方便訪問者重新進行注冊，則應該在regfail.asp頁面設置一個轉到register.asp頁面的文字鏈接。1.創建新ASP網頁并保存為regok.asp在網站根目錄下2.regok.asp如圖所示，制作比較簡單，省去，其中“這里”指向index.asp的鏈接3.如果輸入錯誤或用戶名已經存在，在應該顯示注冊失敗的信息。新建一個regfail.asp頁面，設計如圖。其中“這里”指向register.asp的鏈接（三）用戶注冊功能的測試1.打開IE，輸入，打開register.asp2.輸入一些不正確的信息，錯填或者少填一些內容，以測試網頁中驗證表單動作的執行情況。3.在頁面中注冊一個已經存在的用戶名，如果輸入admin。單擊“確定”，由于已經存在，瀏覽器會轉到regfail.asp，如圖，告訴訪問者用戶名已經存在。此時，注冊者可以單擊“這里”返回register.asp，以重新注冊。4.在該注冊頁面填寫任意注冊資料5.單擊“確定”，瀏覽器會轉到regok.asp頁面，此時，訪問者可以單擊“這里”，轉到index.asp以便進行登錄6.在Access中打開用戶數據庫文件member.mdb，查看其中的member表對象的內容，此時可以看到在該表的最后一行多了一條剛提交的注冊信息。五、用戶注冊資料修改模塊的設計（一）修改資料頁面該頁面主要把用戶所有資料都列出，通過“更新記錄”實現資料修改的功能，步驟如下：1.首先制作用戶修改資料頁面。由于和用戶注冊頁面相似，可以通過修改register.asp頁面來得到所需要的記錄更新頁面。打開register.asp，“另存為”userupdate.asp2.打開“服務器面板”，刪去全部的服務器行為并修改其相應的文字，修改完成后顯示如圖3.打開“綁定”面板，單擊添加按鈕，選擇“記錄集（查詢）”4.在該對話框中設置“●在“名稱”輸入upuser作為該“記錄集”的名稱●從“連接”下拉列表框選擇“user數據源”連接對象●從“表格”下拉列表框中，選擇使用的數據庫表對象為member●在“列”單選按鈕組中先選中“全部”單選按鈕●在“篩選”欄中設置記錄集過濾的條件為username=階段變量/MM_userName。完成設置后如圖5.設置完成，完成記錄集的綁定6.完成記錄集的綁定后將upuser記錄集中的字段綁定到頁面上相應的位置上，如圖7.對于網頁中的單選按鈕組sex對象，單擊“服務器行為”面板中的添加按鈕，執行“動態表單元素”|“動態單選按鈕”，設置動態單選按鈕組對象。打開“動態單選按鈕”，從“單選按鈕組”下拉列表框中，選擇form1表單中的單選按鈕組sex。單擊“選取值等于”后按鈕，從打開的“動態數據”對話框中選擇記錄集upuser中的sex字段。并用相同的方法設置“密碼提示問題”的列表選項，設置完成如圖所示。8.單擊“服務器行為”面板上的添加按鈕，選擇“更新記錄”，為網頁添加更新記錄的服務器行為9.打開“更新記錄”對話框，該對話框與插入記錄的對話框相似，具體設置如圖。10.設置完成，返回“文檔”窗口，將文檔保存到本地站點中。11.由于本頁的MM_username值是來自上一頁注冊成功的用戶名值，所以單獨測試時會提示出錯，要先登錄，在登錄成功的頁面單擊“修改您的注冊資料”超鏈接到該頁面才能產生效果。（二）更新成功頁面用戶修改注冊資料成功后，就會轉到userupdateok.asp。在該頁面，應該向用戶顯示資料修改成功的信息。如果用戶要繼續修改資料為其提供一個返回到userupdate.asp的鏈接；如果不需要修改，則為其提供一個轉到用戶登陸頁面index.asp頁面的鏈接，步驟：1.創建新ASP網頁并保存為userupdateok.asp在網站根目錄下2.為了向用戶提供更好的界面，應該在網頁中顯示用戶修改的結果，以供用戶檢查修改是否正確。應該首先定義一個記錄集，然后將綁定的記錄集插入到網頁中相應的位置，方法與制作頁面userupdate.asp中的方法一樣。通過在表格中添加記錄集中的動態數據對象，把用戶修改后的信息顯示在表格中，具體操作參照之前的做法（三）修改資料功能的測試1.打開IE，輸入，打開index.asp，在頁面中登錄，成功后進入welcome.asp，單擊“修改您的資料”，轉到userupdate.asp2.在該頁面進行一些修改，然后單擊提交。如果更新成功，瀏覽器轉回到userupdateok.asp3.在Access中打開用戶數據庫文件member.mdb，查看其中的member表對象的內容，此時可以看到，對應的記錄內容已經修改六、密碼查詢模塊的設計通過設置的問題和答案找到遺失的密碼。方法是判斷用戶提供的答案和數據庫中答案是否一致，來找回密碼。（一）密碼查詢頁面本節主要制作密碼查詢頁面lostpassword.asp，步驟如下：1.創建新ASP網頁并保存為lostpassword.asp在網站根目錄下，在“布局”下拉菜單中選擇“無”，設計的頁面如圖所示2.在“文檔”窗口中選中表單對象，在“屬性”面板中，在“表單ID”文本框中輸入form1，在“動作”文本框中輸入showquestion.asp作為該表單提交的對象頁面。在“方法”下拉列表框中選擇POST作為該表單的提交方式，接下來將輸入用戶名的文本域命名為inputname，如圖3.新建文檔，輸入網頁標題“查詢問題”，另存為showquestion.asp4.在dreamweaver中制作靜態網頁，效果如圖5.在“文檔”窗口選中表單對象，在“屬性”面板中，在“動作”文本框中輸入showpassword.asp作為該表單提交的對象頁面。在“方法”下拉列表框中選擇POST作為該表單的提交方式，如圖所示。接下來將輸入密碼提示問題答案的文本域命名為inputanswer6.執行“窗口”|“綁定”，打開綁定面板，單擊添加按鈕，選擇“記錄集（查詢）”7.在對話框中設置●在“名稱”文本框中輸入Recordset1作為該記錄集的名稱●從“連接”下拉列表框選擇“user數據源”連接對象●從“表格”下拉列表框中，選擇使用的數據庫表對象為member●在“列”先選中“選定的”單選按鈕，然后在下拉列表框中選擇username和question●在“篩選”欄中設置記錄集過濾的條件為username：=，表單變量：inputname，表示根據數據庫中username字段的內容是否和從上一個網頁中的表單中的inputname表單對象傳遞過來的信息完全一致來過濾記錄對象。完成設置后如圖8.設置完成，關閉對話框，返回到“文檔”窗口9.將Recordset1記錄集中的question字段綁定到頁面上相應的位置，如圖10.執行“插入記錄”|“表單”|“隱藏域”，在表單中插入一個表單隱藏域，然后將該隱藏域的名稱設置為username11.選中該隱藏域，轉到“綁定”面板，將Recordset1記錄集中的username字段綁定到該表單隱藏域中，如圖。（當用戶輸入的用戶名不存在，即記錄集Recordset1為空時，就會導致該頁面不能正常顯示，這就需要設置隱藏區域）12.在“文檔”窗口中選中當用戶輸入用戶名存在時顯示的內容即整個表單，然后單擊“服務器行為”的添加按鈕，在彈出的菜單中，執行“顯示區域”|“如果記錄集不為空則顯示區域”，在對話框中選擇記錄集對象為Recordset1。這樣只有當記錄集Recordset1不為空，才顯示出來。設置完成單擊確定關閉對話框，返回到“文檔”窗口。13.在網頁中編輯顯示用戶名不存在時的文本“該用戶名不存在！”，并為這些內容設置一個“如果記錄集為空則顯示區域”隱藏區域服務器行為，這樣當記錄集Recordset1為空時，顯示這些文本，完成后如圖所示（二）完善密碼查詢功能頁面當用戶在showquestion.asp輸入答案，提交后服務器就會提交到showpassword.asp。下面就來設計該頁面。1.創建新ASP網頁并保存為showpassword.asp在網站根目錄下，在“布局”下拉菜單中選擇“無”2.在dreamweaver中制作如圖所示的靜態部分3.打開“綁定”面板，單擊添加按鈕，選擇“記錄集（查詢）”4.在對話框中設置●在“名稱”文本框中輸入Recordset1作為該記錄集的名稱●從“連接”下拉列表框選擇“user數據源”連接對象●從“表格”下拉列表框中，選擇使用的數據庫表對象為member●在“列”先選中“選定的”單選按鈕，然后在下拉列表框中選擇username、password和answe