网站开发与设计实训.ppt

1、网站开发与设计实训,伍丽惠,在线留言簿系统,1.1第一个项目 在线留言簿 1.1.1老师的作业 用ASP.NET 实现一个在线留言簿系统(要求用Ajax无刷新技术)，并提醒务必做好前期分析工作。,在线留言簿系统,1.1.2 准备工作,在线留言簿系统,1.2功能分析 根据了解的在线留言簿系统的基本功能模块，作出一个简单的项目规划书。 在线留言簿模块功能原理 在线留言簿系统构成模块,在线留言簿系统,1.2.1在线留言簿模块功能原理 必备功能如下： （1）提供信息发布表单供用户发布新的留言。 （2）将用户发布的留言添加到系统库中。 （3）在页面内显示系统数据库中的留言数据。 （4）对某条留言数据进行

2、在线回复。 （5）删除系统内不需要的留言。,在线留言簿系统,1.2.2在线留言簿系统构成模块 （1）信息发布模块：用户可以在系统上发布新的留言信息。 （2）信息显示模块：用户发布的留言信息能够在系统上显示。 （3）留言回复模块：可以对用户发布的留言进行回复，以实现相互间的交互。 （4）系统管理模块：站点管理员能够对发布的信息进行管理控制。,在线留言簿系统,应用模块的具体运行流程图,注：上面运行的流程仅代表当前主流的Web留言簿系统，而没有对用户身份权限进行认证。在很多系统中，只有系统会员才能登录留言系统。,在线留言簿系统,1.3规划系统文件 1.3.1规划文件 整个项目实现文件： 系统配置文件

3、：功能是对项目程序进行总体配置。 样式设置模块：功能是设置系统文件的显示样式。 数据库文件：功能是搭建系统数据库平台，保存系统的登录数据。 留言簿列表文件：功能是将系统内的留言信息以列表样式显示出来。 发布留言模块：功能是向系统内添加新的留言数据。 留言管理页面：功能是删除系统内部需要的留言数据。,在线留言簿系统,1.3.2选择我的武器 Visual Studio 2008,在线留言簿系统,1.4系统配置文件 根据各构成功能模块进行实质性工作： 新建网站项目 配置系统文件,在线留言簿系统,1.4.1新建网站项目 （1）创建一个VS网站项目：Liuyan 文件新建网站ASP.NET Web服务

4、请查看是否存在Service.asmx文件和App_Code/Service.cs文件，并把App_Code/Service.cs文件下的 “/System.Web.Script.Services.ScriptService()”中注释号去掉。,在线留言簿系统,（2）具体文件如下：,在线留言簿系统,1.4.2配置系统文件 1.配置连接字符串参数 ,在线留言簿系统,2.配置Ajax服务器参数 目的：为AjaxControlToolkit.dll程序集提供一个前缀字符串“AjaxControlToolkit ” 。这样，系统页面在引用AjaxControlToolkit.dll中的控件时，不需要额

5、外添加代码。在元素内添加如下代码：,在线留言簿系统, ,在线留言簿系统,1.5设置样式文件 在“解决方案资源管理器”中右击根文件夹添加ASP.NET文件夹主题右击文件夹App_Themes 新建文件夹CSS 右击文件夹外观文件*.skin(mm.skin) 样式表达*.css(web.css),在线留言簿系统,外观文件*.skin(mm.skin) （1）先在*.aspx文件中做控件复制到*.skin文件中把ID属性改为SkinID； （2）再在需要用到皮肤的文件中应用：在文件第一行中 中增加属性StylesheetTheme=“css” 或Theme =“css”。 （3）修改控件的 Ski

6、nID属性。,在线留言簿系统,外观文件（mm.skin） ,在线留言簿系统,样式表*.css(web.css) （1）先在DreamWeaver中制作样式 或直接在*.css中输入各样式(或在*.aspx文件中，单击视图管理样式 新建样式，并把代码拷贝到*.css 文件中去）； （2）再在需要用到样式的文件中应用：在“设计”视图中选择“ 格式”中“附加样式表” 在App_Themes文件夹中找到*.css文件。 （3）页面代码中会多一行： （4）修改需附加样式控件的属性：Class或CSSClass,在线留言簿系统,样式表（web.css） body font-family: Tahoma;

7、font-size:9pt; margin-top:0; background-color:#99CC66; .Text font:Tahoma; font-size:9pt; .Table width:80%; font-size: 9pt; background-color:#CC66FF; border:1; font-family: Tahoma; .Button font-family: Tahoma; font-size: 9pt; color: yellow; border: 1px #003399 solid;color:#006699; BORDER-BOTTOM: red

8、1px solid; BORDER-LEFT: red 1px solid; BORDER-RIGHT: red 1px solid; BORDER-TOP: red 1px solid; background-image:url(./Images/c_annu.gif); background-color: #cc3399; CURSOR: hand; font-style: normal; ,A font-size: 9pt; color: #006699; text-decoration: none; A:ACTIVE color: red; text-decoration: none;

9、 A:FOCUS color: red; text-decoration: none; A:HOVER color: red; text-decoration: underline; A:LINK text-decoration: none; ,hr width:95%; color:red; .Watermark background-color:Gray; color:#666666; .Validator background-color:Red; .PopulatePanel background-repeat:no-repeat; padding:2px; height:2em; m

10、argin:5px; ,在线留言簿系统,1.6 搭建数据库平台 1.6.1数据库设计 创建一个Liuyan数据库，并新建两个表Message和Reply。,在线留言簿系统,Message信息表结构,在线留言簿系统,Reply信息表结构,FK_Reply_Message约束：主键表：Message.ID 外键表：Reply.MessageID 更新规则、删除规则：层叠,在线留言簿系统,1.6.2数据库访问层设计 编写文件lei.cs，实现应用程序的数据库访问层。 主要功能是： 在ASPNETAJAXWeb.AjaxLeaveword空间内建立Message类，并实现对系统数据库中数据的处理。,在

11、线留言簿系统,数据库,AddMessage() 添加留言信息,DeleteMessage() 删除留言信息,GetMessage() 获取留言信息,GetReplyByMessage() 获取回复信息,AddReply() 添加回复信息,数据库操作,定义Message类,数据访问层实现流程图,在线留言簿系统,1.定义Message类,using System; using System.Data; using System.Configuration; using System.Data.SqlClient; namespace ASPNETAJAXWeb.AjaxLeaveword publ

12、ic class Message public Message() / ,在线留言簿系统,2.获取系统内留言信息 获取系统库内已存在的留言信息，由方法GetMessage()实现。,public DataSet GetMessages() /获取连接字符串 string connectionString = ConfigurationManager.ConnectionStrings SQLCONNECTIONSTRING.ConnectionString; /创建连接 SqlConnection con = new SqlConnection(connectionString); /创建SQ

13、L语句 string cmdText = SELECT * FROM Message Order by CreateDate DESC; /创建SqlDataAdapter SqlDataAdapter da = new SqlDataAdapter(cmdText,con);,在线留言簿系统,/定义DataSet DataSet ds = new DataSet(); try /打开连接 con.Open(); /填充数据 da.Fill(ds,DataTable); catch(Exception ex) /抛出异常 throw new Exception(ex.Message,ex);

14、finally /关闭连接 con.Close(); return ds; ,在线留言簿系统,3.添加系统留言信息。,public int AddMessage(string title,string message,string ip,string email) /获取连接字符串 string connectionString = ConfigurationManager.ConnectionStrings SQLCONNECTIONSTRING. ConnectionString; /创建连接 SqlConnection con = new SqlConnection(connection

15、String); /创建SQL语句 string cmdText = INSERT INTO Message(Title,Message,IP,Email, CreateDate,Status) VALUES(Title,Message,IP,Email,GETDATE(),0); /创建SqlCommand SqlCommand cmd = new SqlCommand(cmdText,con); /创建参数并赋值 cmd.Parameters.Add(Title,SqlDbType.VarChar,200); cmd.Parameters.Add(Message,SqlDbType.Tex

16、t); cmd.Parameters.Add(Ip,SqlDbType.VarChar,20);,在线留言簿系统,cmd.Parameters.Add(Email,SqlDbType.VarChar,255); cmd.Parameters0.Value = title; cmd.Parameters1.Value = message; cmd.Parameters2.Value = ip; cmd.Parameters3.Value = email; int result = -1; try /打开连接 con.Open(); /操作数据 result = cmd.ExecuteNonQue

17、ry(); catch(Exception ex) /抛出异常 throw new Exception(ex.Message,ex); finally /关闭连接 con.Close(); return result; ,在线留言簿系统,4.删除系统留言信息。,public int DeleteMessage(int messageID) /获取连接字符串 string connectionString = ConfigurationManager.ConnectionStringsSQLCONNECTIONSTRING.ConnectionString; /创建连接 SqlConnectio

18、n con = new SqlConnection(connectionString); /创建SQL语句 string cmdText = DELETE Message WHERE ID = ID; /创建SqlCommand SqlCommand cmd = new SqlCommand(cmdText,con); /创建参数并赋值 cmd.Parameters.Add(ID,SqlDbType.Int,4); cmd.Parameters0.Value = messageID;,在线留言簿系统,int result = -1; try /打开连接 con.Open(); /操作数据 re

19、sult = cmd.ExecuteNonQuery(); catch(Exception ex) /抛出异常 throw new Exception(ex.Message,ex); finally /关闭连接 con.Close(); return result; ,在线留言簿系统,5.获取系统内留言回复信息。,public DataSet GetReplyByMessage(int messageID) /获取连接字符串 string connectionString = ConfigurationManager.ConnectionStrings SQLCONNECTIONSTRING

20、.ConnectionString; /创建连接 SqlConnection con = new SqlConnection(connectionString); /创建SQL语句 string cmdText = SELECT * FROM Reply WHERE MessageID = MessageID Order by CreateDate DESC; /创建SqlDataAdapter SqlDataAdapter da = new SqlDataAdapter(cmdText,con); /创建参数并赋值 da.SelectCommand.Parameters.Add(Messag

21、eID,SqlDbType.Int,4); da.SelectCommand.Parameters0.Value = messageID;,在线留言簿系统,/定义DataSet DataSet ds = new DataSet(); try /打开连接con.Open(); /填充数据da.Fill(ds,DataTable); catch(Exception ex) /抛出异常throw new Exception(ex.Message,ex); finally /关闭连接 con.Close(); return ds; ,在线留言簿系统,6.添加留言回复信息,public int AddR

22、eply(string message,string ip,int messageID) /获取连接字符串 string connectionString = ConfigurationManager.ConnectionStrings量SQLCONNECTIONSTRING.ConnectionString; /创建连接 SqlConnection con = new SqlConnection(connectionString); /创建SQL语句 string cmdText = INSERT INTO Reply(Reply,IP,CreateDate,MessageID) VALUE

23、S(Reply,IP,GETDATE(),MessageID); /创建SqlCommand SqlCommand cmd = new SqlCommand(cmdText,con); /创建参数并赋值 cmd.Parameters.Add(Reply,SqlDbType.VarChar,1000); cmd.Parameters.Add(Ip,SqlDbType.VarChar,20); cmd.Parameters.Add(MessageID,SqlDbType.Int,4);,在线留言簿系统,cmd.Parameters0.Value = message; cmd.Parameters1

24、.Value = ip; cmd.Parameters2.Value = messageID; int result = -1; try /打开连接 con.Open(); /操作数据 result = cmd.ExecuteNonQuery(); catch(Exception ex) /抛出异常 throw new Exception(ex.Message,ex); finally /关闭连接 con.Close(); return result; ,在线留言簿系统,1.合理使用索引 使用时机:当索引列有大量数据查询且数据的重复率较低时使用。 2.使用存储过程 优点：提高程序的安全性； 提

25、高数据的处理效率。,在线留言簿系统,1.7留言数据显示模块 功能：将系统库内的留言信息以列表的样式显示出来，并提供新留言发布表单，将发表的数据添加到系统库中。 实现文件： Index.aspx和Index.aspx.cs YanZhengma.aspx AjaxService.cs,在线留言簿系统,1.7.1留言列表显示模块,在线留言簿系统,1.列表显示留言数据 （1）插入一个GrideView控件，以列表样式显示数据库内的数据。 （2）在表格内显示各留言的数据内容。 （3）添加3个链接供留言发布、留言回复和留言管理操作。 （4）调用Ajax程序集内的DynamicPopulate控件，实现动

26、态面板显示留言回复内容。,在线留言簿系统,（1）插入一个GrideView控件，以列表样式显示数据库内的数据。 public partial class Board: System.Web.UI.Page /index.aspx页面首行修改属性Inherits=Board protected void Page_Load(object sender, EventArgs e) if(!Page.IsPostBack) BindPageData(); private void BindPageData() /获取数据 Message message = new Message(); DataSe

27、t ds = message.GetMessages(); /显示数据 gvMessage.DataSource = ds; gvMessage.DataBind(); /类的结束括号,在线留言簿系统,（2）在表格内显示各留言的数据内容。 作者： 于、 留言 ,在线留言簿系统,（3）添加3个链接供留言发布、留言回复和留言管理操作。 我要留言 展开 ,在线留言簿系统,（4）调用Ajax程序集内的DynamicPopulate控件，实现动态面板显示留言回复内容。 设置脚本管理器参数 注：ScriptManager：一个带有Ajax的页面，有且只能有一个ScriptManger，它主要负责脚本和临时

28、脚本的生成操作。,在线留言簿系统,修改“展开”的ID 属性 展开 拖一个Panel控件，修改ID 属性为pReply ,在线留言簿系统,插入一个Ajax控件：DynamicPopulate Extender，并设置相关属性： TargetControlID=pReply PopulateTriggerControlID=hlShowReply ,DynamicPopulate控件的属性及说明,在线留言簿系统,编写Service.cs文件中GetReplyByMessage方法，要求通过Reply表中MessageID值，找到相关的回复留言。 public class Service : Sys

29、tem.Web.Services.WebService WebMethod public string GetReplyByMessage(string contextKey) /获取参数ID int messageID = -1; if (Int32.TryParse(contextKey, out messageID) = false) return string.Empty; / Int32.TryParse(contextKey, out messageID) ：试着将字符串contextkey转换为一个int32型数据，并把它放到messageID这个变量里。转换成功，返回True，

30、否则返回False。,在线留言簿系统,Message message = new Message(); DataSet ds = message.GetReplyByMessage(messageID); if (ds = null | ds.Tables.Count 0于1 回复, rowIP, rowCreateDate); return Html.Append(); return Html.AppendFormat(0, rowReply); return Html.Append(); return returnHtml.ToString(); / StringBuilder类：表示可变

31、字符字符串。使用这个类所产生的对象默认会有16个字符的长度，您也可以自行指定初始长度。如果附加的字符超出可容纳的长度，则StringBuilder对象会自动增加长度以容纳被附加的字符。如果有频繁作字符串附加的需求，使用StringBuilder会让程序的效率大大提高。 /AppendFormat-向此实例追加包含零个或更多格式规范的格式字符串。每个格式规范由相应对象参数的字符串表示形式替换。,在线留言簿系统,把下面三个文件复制到Bin目录下: Bin/AjaxControlToolkit.dll Bin/zh-CHS/AjaxControlToolkit.resources.dll Bin/A

32、SPNETAJAXWeb.ValidateCode.dll /此文件在后面用到。,在线留言簿系统,1.8留言分页列表显示模块 1.8.1留言分页显示页面 在index.aspx页面中直接进行分页显示。 1.8.2分页处理 设置GridView控件属性： AllowPaging=true“ PageSize=“5” ，PagerSettings属性中Mode= NumericFirstLast“ 设置GridView控件属性：PagerStyle属性里的HorizontalAlign=Center /使页码居中。 设置GridView控件的分页处理事件为gvMessage_PageIndexCh

33、anging 代码如下： protected void gvMessage_PageIndexChanging(object sender, GridViewPageEventArgs e) /设置新页面，并重新绑定数据 gvMessage.PageIndex = e.NewPageIndex; BindPageData(); ,在线留言簿系统,1.9留言发布模块 1.9.1留言发布表单 （1）插入5个TextBox控件,分别用于输入留言标题、IP地址、邮件地址、留言内容和验证码。,在线留言簿系统,（2）插入留言标题及其验证控件，用于确保留言标题不能为空。 ,在线留言簿系统,（3）插入控件用于

34、存放用户IP地址。 并在页面加载模块中加入如下语句： /获取客户端的IP地址 tbIP.Text = Request.UserHostAddress;,在线留言簿系统,（4）插入Email及其验证控件，用于确保Email格式正确 。 ,在线留言簿系统,TextBoxWatermarkExtender:用于对TextBox添加水印效果。属性说明：TargetControlID：该控件的目标关联控件。WatermarkCssClass：产生水印效果的css样式。WatermarkText：有水印效果时，水印上的文本。,在线留言簿系统,此控件是中的验证控件 RequiredFieldValidato

35、r , RangeValidator, RegularExpressionValidator, CompareValidator, CustomValidator,ValidationSummary的错误验证信息呼出的一个扩展控件 主要作用是把未通过验证的信息通过一个突出的层显示给用户。 主要属性： WarningIconImageUrl=images/Warning.gif CloseImageUrl=images/close.gif HighlightCssClass=err Width=”400px“ 详细出处参考：,在线留言簿系统,（5）插入内容及其验证控件，用于确保内容长度至少为10

36、，最多为8000 。 并在页面代码部分加入如下函数： function MessageValidator(source,argument) if(argument.Value.length 10 ,在线留言簿系统,（6）调用验证码文件。 复制ASPNETAJAXWeb.ValidateCode.dll文件到Bin目录下。 新建YanZhengma.aspx,其具体代码为： 并且删除YanZhengma.aspx.cs 修改image图片属性ImaginURL=“YanZhengma.aspx” 在index.aspx页面增加引用： using ASPNETAJAXWeb.ValidateCod

37、e.Page;,在线留言簿系统,1.9.2留言发布数据处理页面 index.aspx.cs (1) 引入命名空间，声明类Board。 (2) 通过Page_Load事件载入初始化，发布表单界面。 (3)定义btnCommit_Click，进行数据处理。 (4)验证码判断处理，如果非法，则输出提示。 (5)将数据添加到系统库中。,在线留言簿系统,using ASPNETAJAXWeb.AjaxLeaveword; using ASPNETAJAXWeb.ValidateCode.Page; public partial class Board : System.Web.UI.Page prote

38、cted void Page_Load(object sender, EventArgs e) /获取客户端的IP地址 tbIP.Text = Request.UserHostAddress; if(!Page.IsPostBack) BindPageData(); private void BindPageData() /获取数据 Message message = new Message(); DataSet ds = message.GetMessages(); /显示数据 gvMessage.DataSource = ds; gvMessage.DataBind(); ,在线留言簿系统

39、,提交按钮 protected void Button1_Click(object sender, EventArgs e) if (SessionValidateCode.VALIDATECODEKEY != null) /验证验证码是否相等 if (tbCode.Text != SessionValidateCode.VALIDATECODEKEY.ToString() lbMessage.Text = 验证码输入错误，请重新输入; return; else Message message = new Message(); /发表留言 if (message.AddMessage(tbTi

40、tle.Text, tbMessage.Text, Request.UserHostAddress, tbEmail.Text) 0) /重新显示数据 BindPageData(); ,在线留言簿系统,清空按钮 protected void Button3_Click(object sender, EventArgs e) tbMessage.Text = string.Empty; /注意此处是类的结束括号。,在线留言簿系统,1.10 留言回复模块 1.10.1 留言回复表单页面 此页面同index.aspx页面中的表格非常相似，但要去掉“留言标题”和“电子邮件”，注意此处要接收上页传过来的

41、参数messageID的值。,在线留言簿系统,1.10.2 回复数据处理页面Huifu.aspx.cs (1) 引入命名空间，声明类Reply。 (2) 通过Page_Load事件载入初始化，回复表单界面。 (3)定义btnCommit_Click控件，进行数据处理。 (5) 验证码判断处理，如果非法，则输出提示。 (6) 将数据添加到系统库中,。,在线留言簿系统,using ASPNETAJAXWeb.AjaxLeaveword; using ASPNETAJAXWeb.ValidateCode.Page; public partial class Reply : System.Web.UI

42、.Page int messageID = -1; protected void Page_Load(object sender, EventArgs e) /获取客户端的IP地址 tbIP.Text = Request.UserHostAddress; if(RequestMessageID != null) messageID = Int32.Parse(Request MessageID.ToString(); btnCommit.Enabled = messageID 0 ? true : false; ,在线留言簿系统,提交按钮时的事件，其代码如下： protected void b

43、tnCommit_Click(object sender, EventArgs e) if (SessionValidateCode.VALIDATECODEKEY != null) /验证验证码是否相等 if (tbCode.Text != SessionValidateCode.VALIDATECODEKEY.ToString() lbMessage.Text = 验证码输入错误，请重新输入; return; Message message = new Message(); /发表回复 if (message.AddReply(tbMessage.Text, Request.UserHos

44、tAddress, messageID) 0) /重定向到留言页面 Response.Redirect(Index.aspx); ,在线留言簿系统,单击清空按钮时事件，其代码如下： protected void btnClear_Click1(object sender, EventArgs e) tbMessage.Text = string.Empty; /注意此处是类的结束括号。,在线留言簿系统,1.11留言管理模块,在线留言簿系统,1.11.1留言管理列表页面DelMessage.aspx,在线留言簿系统,页面设计： (1) 插入1个GridView控件，用于以列表样式显示留言的信息，

45、包括留言者、邮箱地址、时间和留言内容等。 (2) 通过GridView控件设置分页显示留言数为5。 (3) 通过GridView控件设置分页处理事件为gvMessage_PageIndexChanging，通过属性PagerSettings设置GridView控件分页模式为Mode=“NextPreviousFirstLas”。 (4) 在每条留言的后面插入1个Button按钮，用于激活删除处理事件。设置该命令的参数值： CommandName=“del“ /与此按钮关联的命令 CommandArgument= /与此按钮关联的命令参数,在线留言簿系统,1.11.2 留言删除处理页面DelMessage.aspx.cs (1) 引入命名空间，声明类BoardManage。 (2) 通过Page_Load事件载入初始化留言管理列表界面。 (3) 获取并显示系统内的数据。 (4) 设置分页处理事件，对数据进行重新绑定。 (5) 定义gvMessage_RowDataBound(object sender,GridViewRowEventArgs e)，弹出删除确认对话框。 (6) 定义gvMessage_RowCommand(object sender,GridViewCommandEventArgs e)，将用户