บทที่หก: การใช้งานหน้าลงทะเบียนผู้ใช้ BLOG ของ Doking
มีคนค้นพบ: ผู้ใช้ควรโพสต์บันทึกและตอบกลับที่ไหน นี่คือคำถามที่บทที่ 6 และ 7 จะกล่าวถึง บทนี้อธิบายการใช้งานหน้าการลงทะเบียนผู้ใช้เป็นหลัก
6.1.1 การแก้ไขเทมเพลตหน้า bkblog.dwt.aspx
(1) เปิดเทมเพลต bkblog.dwt.aspx แทรกตารางแท็บซ้ายในคอลัมน์ด้านซ้าย แทรกแบบฟอร์ม Yhlogfrm ในแถวแรก และแทรก แท็บบันทึกตารางในรูปแบบ Yhlogfrm และแทรกกล่องข้อความ พื้นที่ข้อความ และปุ่มที่เกี่ยวข้อง ผลลัพธ์จะแสดงในรูปที่ 6-1-1:
รูปที่ 6-1-1 การออกแบบการเข้าสู่ระบบของผู้ใช้ในเทมเพลต
(2) ตั้งชื่อกล่องข้อความที่สอดคล้องกับชื่อผู้แต่ง ตั้งชื่อกล่องข้อความที่สอดคล้องกับรหัสผ่าน Logpass และเปลี่ยนประเภทเป็นรหัสผ่านเปลี่ยนการกระทำของ "ลงทะเบียน" ปุ่มเป็น "ไม่มี" เปลี่ยนการทำงานของปุ่ม "เข้าสู่ระบบ" เป็น "ส่งแบบฟอร์ม"
(3) เลือกปุ่ม "ลงทะเบียน" ในแผง [พฤติกรรม] เพิ่มพฤติกรรมให้กับ URL และในกล่องโต้ตอบป๊อปอัป ให้ป้อนลิงค์เป็น "../yhinlog.aspx" ดังแสดงในรูปที่ 6 -1-2 :
รูปที่ 6-1-2 เพิ่มลักษณะการทำงานในการไปที่ URL
(4) บันทึกเทมเพลตและอัพเดตหน้าเว็บทั้งหมด
6.1.2 การออกแบบหน้าการลงทะเบียน
(1) สร้างหน้าไดนามิก ASP.NET VB ใหม่ yhinlog.aspx ที่สร้างโดยเทมเพลต bkblog.dwt.aspx แทรกแบบฟอร์ม Yhinfrm ในพื้นที่ที่แก้ไขได้ของ mainbody จากนั้นแทรก สร้าง yhinlog และทำการออกแบบที่เกี่ยวข้อง ผลลัพธ์ดังแสดงในรูปที่ 6-1-3:
รูปที่ 6-1-3 การออกแบบตาราง yhinlog
(2) เลือกกล่องข้อความที่ตรงกับชื่อผู้ใช้ สลับไปที่แผงป้ายกำกับ ขยาย "CSS/Accessibility" ป้อน YHNAME ใน id ขยาย "Unclassified" ป้อน runat server ให้เปลี่ยนกล่องข้อความ YHNAME เป็นตัวควบคุมเซิร์ฟเวอร์ ดังแสดงในรูปที่ 6-1-4:
รูปที่ 6-1-4 แก้ไขป้ายกำกับกล่องข้อความ
(3) และอื่นๆ กล่องข้อความที่ตรงกับรหัสผ่านมีชื่อว่า YHPASS กล่องข้อความที่ตรงกับการยืนยันรหัสผ่านมีชื่อว่า REPASS กล่องข้อความที่สอดคล้องกับรหัส QQ คือ ชื่อ YHQQ และกล่องข้อความที่สอดคล้องกับชื่ออีเมล กล่องข้อความ YHEMAIL ตั้งชื่อกล่องข้อความที่เกี่ยวข้องในหน้าแรก YHINDEX และเปลี่ยนกล่องข้อความทั้งหมดเป็นตัวควบคุมเซิร์ฟเวอร์
(4) เลือกแบบฟอร์ม Yhinfrm เปลี่ยนเป็นตัวควบคุมเซิร์ฟเวอร์ และบันทึก yhinlog.aspx
6.1.3 ออกแบบหน้าลงทะเบียนให้สมบูรณ์
(1) สร้างหน้าเว็บไดนามิกใหม่ yhlogok.aspx จากเทมเพลต bkblog.dwt.aspx แทรกโลโก้ตารางที่มีสามแถวและหนึ่งคอลัมน์ในพื้นที่ที่แก้ไขได้ของ mainbody ป้อนข้อความ "ยินดีต้อนรับ" ในแถวที่สอง แล้วคลิก บนเมนูทางลัด ASP.NET "Bind Data" จากนั้นคลิก "Trimmed Form Element" เลื่อนเคอร์เซอร์ไปที่ตำแหน่งที่แสดงในรูปที่ 6-1-5 และป้อน "YHNAME"
รูปที่ 6-1-5 แทรกองค์ประกอบแบบฟอร์มที่ตัดแต่งแล้ว
(2) กลับไปที่มุมมองการออกแบบ ป้อนข้อความ "Donking's BLOG!" ต่อไป และออกแบบโลโก้ของตาราง ผลลัพธ์จะแสดงในรูปที่ 6-1-6:
รูปที่ 6-1-6 การออกแบบโลโก้ตาราง
(3) เลือกปุ่ม "หน้าแรก" ในแผง [พฤติกรรม] เพิ่มลักษณะการทำงานเพื่อไปยัง URL ในกล่องโต้ตอบป๊อปอัป ให้ป้อนลิงค์เป็น "ดัชนี .aspx", บันทึก yhlogok.aspx
เพื่อป้องกันไม่ให้ผู้ใช้ป้อนข้อมูลการลงทะเบียนที่ไม่ถูกต้อง ข้อมูลการลงทะเบียนผู้ใช้จะต้องได้รับมาตรฐานและตรวจสอบแล้ว
(1) เปิด yhinlog.aspx เปิดเมนูทางลัดของ ASP.NET แล้วคลิก [More Tags] ดังแสดงในรูปที่ 6-2-1:
รูปที่ 6-2-1 เมนูทางลัด ASP.NET
(2) ขยาย "ASP.NET Label" → "Validation Server Control" ในตัวเลือกป้ายกำกับป๊อปอัป เลือก "asp:RequiredFieldvalidator" ในกรอบหน้าต่างด้านขวา แล้วคลิก " คลิกปุ่ม "แทรก" ดังแสดงในรูปที่ 6-2-2 ด้านล่าง:
รูปที่ 6-2-2 Tag Selector
(3) ในเครื่องมือแก้ไขแท็กป๊อปอัป ให้เพิ่มการควบคุมการตรวจสอบความถูกต้องสำหรับกล่องข้อความ YHNAME และกรอกข้อมูลลงในรายการดังแสดงในรูปที่ 6-2-3:
รูปที่ 6-2-3 ตัวแก้ไขแท็ก RequiredFieldValidator
(4) เปิดตัวเลือกแท็ก แทรกการควบคุมเซิร์ฟเวอร์การตรวจสอบ ASP.NET → การควบคุม CompareValidator เพิ่มการควบคุมการตรวจสอบการเปรียบเทียบด้วยกล่องข้อความ REPASS สำหรับกล่องข้อความ YHPASS และกรอกข้อมูลที่เกี่ยวข้อง ข้อมูลดังแสดงในรูปที่ 6-2 -4 แสดงดังนี้
รูปที่ 6-2-4 ตัวแก้ไขแท็ก CompareValidato
(5) ใส่การควบคุมเซิร์ฟเวอร์การตรวจสอบ ASP.NET → การควบคุม Rangevalidator เพิ่มการควบคุมการตรวจสอบสำหรับกล่องข้อความ YHQQ และกรอกข้อมูลที่เกี่ยวข้องดังแสดงในรูปที่ 6-2-5:
รูปที่ 6-2-5 ตัวแก้ไขแท็ก Range validator
(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
2 ใส่ตัวควบคุมเซิร์ฟเวอร์การตรวจสอบ ASP.NET → CustomValidator control เพิ่มตัวควบคุมการตรวจสอบสำหรับกล่องข้อความ YHINDEX และกรอกข้อมูลต่างๆ ดังแสดงในรูปที่ 6-2-9 รวมถึงฟังก์ชันการตรวจสอบลูกค้าคือ:
<%# IIf(yhinlog.RecordCount>0,FALSE,TRUE) %>
รูปที่ 6-2-9 ตัวแก้ไขแท็ก Custom Validator
(9) บันทึก yhinlog.aspx และเรียกดูใน IE หากกล่องโต้ตอบที่แสดงในรูปที่ 6-2-10 ปรากฏขึ้น หมายความว่าไม่มีไดเร็กทอรีย่อยในไดเร็กทอรีรากของ ไซต์ dklog aspnet_client ไม่มีไลบรารีสคริปต์ JS ที่จำเป็นในการตรวจสอบการควบคุม เมื่อติดตั้ง .NET Framework โปรแกรมติดตั้งจะถูกคัดลอกไปยังไดเร็กทอรีรากของไซต์เริ่มต้น c:Inetpubwwwroot คัดลอกไดเร็กทอรีย่อย aspnet_client ใน c:Inetpubwwwroot ไปยังไดเร็กทอรีรากของไซต์ dkblog และ ตกลง!
รูปที่ 6-2-10 ไม่พบไลบรารีสคริปต์ JS ที่จำเป็น
(1) เปิด yhinlog.aspx เพิ่มลักษณะการทำงานของเซิร์ฟเวอร์ [Insert Record] และเพิ่มข้อมูลที่เกี่ยวข้องของแบบฟอร์มลงใน ตารางข้อมูล YH การตั้งค่าดังแสดงในรูปที่ 6-3-1:
รูปที่ 6-3-1 เพิ่มพฤติกรรมเซิร์ฟเวอร์ [Insert Record]
(2) ASP.NET ไม่รองรับการส่งผ่านการเข้ารหัส gb2312 สลับไปที่มุมมองโค้ดและค้นหา:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
ลบโค้ด ResponseEncoding="gb2312" และมันจะใช้ได้:
<%@ Page Language ="VB" ContentType="text/html"%>
(3) บันทึก เรียกดู และส่งข้อมูลการลงทะเบียนผู้ใช้ใน IE และเปิดตาราง YH ใน Access คุณจะพบว่าข้อมูลภาษาจีนที่ส่งมาทั้งหมดเปลี่ยนเป็น ?? . จะทำอย่างไร? ไม่ต้องกังวล เนื่องจาก TASP.NET ไม่รองรับการส่งผ่านการเข้ารหัส gb2312 เปิด yhinlog.aspx สลับไปที่มุมมองโค้ด ค้นหาบรรทัดแรกของโค้ด:
<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
เปลี่ยนเป็น:
<%@ Page Language= "VB" ContentType="text/html" %>
นั่นคือ ลบ ResponseEncoding="gb2312" หน้าเว็บอื่นๆ ได้รับการแก้ไขตามวิธีนี้เพื่อป้องกันข้อผิดพลาดในการส่งข้อมูลภาษาจีน
