网上工资发布系统的设计与实现

1、网上工资发布系统的设计与实现一、使用工具：access2000/2003，dreamweaver mx 2004中文版，iis5.0/6.0(或AWS)， winxp/win7/win8。二、设计要求：通过远程上网，登录到服务器，进入工资发布系统的登录界面，登录成功后，可选择多种方式进行工资查询（如按姓名、按编号、按部门等），并可通过后台增加、减少和删除工资信息。三、设计过程：（一）设计准备1、资料准备：把financexxx.rar解压到d:financexxx，注意把d:financexxxdatafinancexxx.mdb中的xxx改为学号后三位数字。2、启动服务器：若使用AWS代替I

2、IS（1）当系统为WINXP时，运行 d:financexxxiis(winxp).bat，然后运行 d:financexxxAWS.EXE即可。（2）当系统为WIN7/ WIN8时，运行 d:financexxxiis(win7).bat ，然后运行 d:financexxxAWS.EXE即可。）（二）设计步骤第一步，设计工资发布系统主要结构图，如下图1首页（default.asp）首页（default.asp）登录页面（index.asp）登录页面（index.asp）登录失败页面（loginfail.asp）登录成功页面（main.asp）登录失败页面（loginfail.asp）登录成

3、功页面（main.asp）个别（单项）查询页面（aspect.asp）(包括按姓名、编号、部门查询的结果)个别（单项）查询页面（aspect.asp）(包括按姓名、编号、部门查询的结果)全单位浏览页面（browse.asp）按编号查询结果页面（bhcx.asp）按姓名查询结果页面（xmcx.asp）按部门查询结果页面（bmcx.asp）按编号查询结果页面（bhcx.asp）按姓名查询结果页面（xmcx.asp）按部门查询结果页面（bmcx.asp）详细页面（detail.asp）详细页面（detail.asp） 图1 工资发布系统主要结构图第二步，进入Dreamweaver MX进行系统设计1

4、、建立站点进入Dreamweaver MX，选择“站点”菜单栏，点击“管理站点”，“新建”，在弹出的对话框中输入站点名称（如“financexxx”）在使用哪种服务器技术中，选择“asp vbscript” ，如下图操作，直至完成。2、建立数据源进入Dreamweaver MX，“文件”菜单栏，选择“新建”，在新建文档的选项面板中选中动态页和ASP VBScript，点击“创建”。再点击“文件”菜单栏中“保存”，命名为为default.asp,按同样方式再建以下文件：index.asp、main.asp、loginfail.asp、browse.asp、aspect.asp、bhcx.asp、

5、xmcx.asp、bmcx.asp,detail.asp，并一一保存。再选择“窗口”菜单栏，点击“数据库”，在窗口右侧弹出的选项卡上，见图2，然后按最终得到图4数据源连接成功的结果。图2 数据库选项卡图选择“自定义连接字符串”，连接名称和连接字符串分别输入：financexxx 和 Driver=Microsoft Access Driver (*.mdb);DBQ=d:financexxx（xxx表示个人学号后三位）datafinancexxx.mdb，在dreamweaver应连接选择“使用本机上的驱动程序”，如下图3图3自定义数据源的设置最后，点击图3中的“测试”，出现图4，表示数据源连

6、接成功。图4数据源连接成功图3、备份站点基本信息点击“站点”-“管理站点”- “导出”，如下图保存即可。保存了站点基本信息后，下次上机只需要把文件拷贝到D盘，点击“站点”-“管理站点”- “导入”，就可以完成站点设置和数据库链接。4、设计工资发布系统的主要页面数据源连接成功后，我们就可以做工资发布系统的主要页面。（1）首页（default.asp）在dreamweaver中打开default.asp页面，插入一张带有网上工资发布系统的图片，并与index.asp建立超级链接，保存。（2）登录页面（index.asp）第一步：建立用户登录界面，如下图11命令按钮，动作属性设置为提交表单图层Lay

7、er2命令按钮，动作属性设置为重设表单图层layer1文本域textfield2，类型的属性设置为密码命令按钮，动作属性设置为提交表单图层Layer2命令按钮，动作属性设置为重设表单图层layer1文本域textfield2，类型的属性设置为密码文本域textfield注：虚线区为表单图11用户登录界面（编辑状态）第二步：设置登录页面点击“窗口”菜单栏，选择“服务器行为”，在上点击，在下拉菜单中选择“用户身份验证”“登录用户”，出现如下图12，按下图进行设置即可。图12 登录用户表单设置图（3）登录成功页面（main.asp）超级链接到aspect.asp超级链接到browse.asp图层la

8、yer2图层layer1超级链接到aspect.asp超级链接到browse.asp图层layer2图层layer1图13 登录成功界面（编辑状态）（4）登录失败页面（loginfail.asp）在这个页面，一般放个表示失败的图片，并加上几个字（如：登录失败！）。对图片或文字设置超级链接到index. asp。（5）全单位浏览页面（browse.asp）第一步：建立如下图14的一个初始页面。格式2行8列，边框为1，宽度像素按屏幕分辨率的80%来设置，如1024768，则设置为800为宜。图14全单位工资情况初始界面 第二步：点击“窗口”菜单栏，点击“绑定”，在窗口右边的浮动面板的“绑定”选项卡

9、上点击，在弹出菜单中选择“记录集（查询）”，弹出如下图15，按下图中进行记录设置。图15 全单位浏览记录集设置第三步：将记录集中的字段用鼠标对应的拖曳到下图16对应的表格中（如月份栏对应month字段，编号对应bh字段，姓名对应name字段等），最终结果如下16。第四步：由于上图16得到的结果仅为一条记录，所以还要对一次浏览多条记录进行设置。具体设置如下： = 1 * GB3 一次浏览全部记录首先用鼠标选中上图16的表格中表示数据库记录的第二行的所有记录，然后点击“窗口”菜单栏，点击“服务器行为”，在窗口右边的浮动面板的“服务器行为”选项卡上点击，在弹出菜单中选择“重复区域”，在弹出的面板上选

10、择“所有记录”，然后“确定”即可。如下图17图17显示所有记录设置图 = 2 * GB3 一次浏览固定条记录（如15条）由于一页的篇幅有限，一般只显示15条左右的记录比较合适，这种显示方式的设置如下：首先用鼠标选中上图16的表格中表示数据库记录的第二行的所有记录，然后点击“窗口”菜单栏，点击“服务器行为”，在窗口右边的浮动面板的“服务器行为”选项卡上点击，在弹出菜单中选择“重复区域”，在弹出的面板上选择“15记录”，然后“确定”即可。如下图18图18每页显示10条记录设置图但一次显示15条记录，若一个单位的人数超过15人，则超过部分不能显示，对于这个问题，Dreamweaver MX也有专门的

11、方法来处理，具体方法如下：在图16所示的表格所在图层下方再插入一个一行8列宽度为800像素，边框为0的表格，从该行第3个单元格开始，依次点击“窗口”菜单栏，点击“服务器行为”，在窗口右边的浮动面板的“服务器行为”选项卡上点击，在弹出菜单中选择“记录集分页”，把其中的“移至第一条记录”、“移至前一条记录”、“移至后一条记录”、“移至最后一条记录”分别插入到第36单元格中，结果如下图19图19 固定记录浏览页面（编辑状态）（6）个别（单项）查询页面（aspect.asp）第一步：建立如下图20的单项查询初始页面表单form3表单form2文本域textfield表单form1列表菜单select文

12、本域textfield2表单form3表单form2文本域textfield表单form1列表菜单select文本域textfield2图20单项查询初始页面第二步，设置文本域、列表框以及表单的属性。 = 1 * GB3 把文本域textfield改名为“bh”、textfield2改名为“name”、select列表框改名为“depart”，如下图21图21修改表单对象文本域、列表框的属性 = 2 * GB3 对表单的属性进行设置，如下图22，如表单form1、form2、form3的提交方法设为“GET”，动作分别为“bhcx.asp”、“xmcx.asp”、“bmcx.asp”，即提交表

13、单时，分别指向bhcx.asp、xmcx.asp、bmcx.asp，获取查询结果。图22表单提交属性设置其中，form3中的列表框要用到数据库中的部门信息，须的页面绑定记录集。再选中列表框，在属性框中，点击，进行下图设置：（7）个别查询的结果页面第一步：分别打开空白的bhcx.asp、xmcx.asp、bmcx.asp页面，点击“窗口”菜单栏，点击“绑定”，在窗口右边的浮动面板的“绑定”选项卡上点击，在弹出菜单中选择“记录集（查询）”，弹出如下图23，依次按下图中进行记录集设置。图23三种查询结果页面绑定记录集设置第二步：设计查询结果页面如下图24，分别在bhcx.asp、xmcx.asp、b

14、mcx.asp页面中插入两个层（layer1，layer2），在第一层里先把记录集中的bh、name、depart字段拖到里面，在其后加上“的工资情况”字样。在第二层中插入表格，第一行写上月份、编号、姓名等，以于表格第二行的字段对应，然后把记录集中对应的字段拖入表格的第二行相应的单元格中即可。（注意：bhcx.asp不须设置重复区域；xmcx.asp须设置重复区域，选择显示全部记录而不必分页；bmcx.asp须设置重复区域，选择每页显示15条记录并进行分页设置）图24查询结果页面设计（8）详细信息页面（detail.asp）第一步：转到详细页面的服务器行为设置 如browse.asp页面中，选

15、中第二行中的“详细情况”，在服务器行为中选择转到详细页面，在弹出的转到详细页面窗口中，详细信息页选择detail.asp，记录集的列选择bh，传递URL参数也设置为bh图25转到详细页面的服务器行为其他页面包括bhcx.asp、xmcx.asp、bmcx.asp的转到详细页面的服务器行为设置与browse.asp相同。第二步：详细页面的设置图26详细页面的界面布局图27详细页面的记录集设置 插入图像email.gif,对图片超级链接，如下图设置邮件链接。图28详细页面的电子邮件设置插入图像，在选择图像的窗口进行下图设置。图29详细页面的人员照片设置插入媒体，选择flash，在选择flash的窗口进行下图设置。图30详细页面的flash设置至此，网上工资发布系统的设计基本完成。四、网上工资发布系统的网上实现上述制作过程完成后，请若想把自己制作的工资发布系统放到服务器上，供大家查询使用，可直接把d:financexxx目录及内容拷贝到服务器，进入IE