《电子商务网页设计与制作》课件第十章

第十章设计与制作表单页面

网页表单是Web设计中讨论最多的元素之一,一个没有任何表单的网站,就像一潭死水。我们总是需要用到各种表单,比如用户注册、用户登录等。尽管在HTML中,把表单拼凑到一块相当容易,但是对于可用的、“友好”的表单来说,编码、制作样式和设计也不是一件很容易的事情。因此,一个好的网站,表单始终扮演着很重要的角色,同时我们需要处理表单提交的信息,在这里我们将采用动态网页技术,本章使用的是HTML+ASP语言。知识目标(1)了解动态网站的概念和ASP动态网页技术的工作原理。(2)了解IIS构建ASP环境的方法。(3)掌握ASP连接Access数据库的方法。(4)掌握表单的设计与制作方法。(5)了解客户端验证和服务器验证的方法。(6)了解存储和取回Session变量的方法。能力目标学习完本章后,学生应当能够依据公司要求完成动态网站的创建和动态页面的制作,包括:(1)能搭建动态网站环境并创建动态网站。(2)利用ODBC实现对数据库的连接。(3)可以制作用户注册页面并实现客户端和服务器端的行为验证。(4)可以制作用户登录页面并实现对数据库的数据验证。(5)利用Session实现页面之间的传值。第一节

动态网站的创建IIS是ASP动态网站运行常用的Web服务器,因此本节的首要目标是创建IIS环境,创建成功后的界面如图10-1所示。然后在Dreamweaver中将静态网站转变为动态网站,命名为wxkj,创建好的网站在“管理站点”里的效果如图10-2所示。一、IIS的安装Windows

2000/2003

Server和Windows

XP都自带了IIS组件,通过IIS组件可以架设Web、FTP、Mail等服务器。下面以Windows

XP为平台,简要介绍安装IIS的过程,Windows

2000

Server和Windows

2003

Server的安装也类似。具体操作如下:(1)依次选择“开始/控制面板/添加或删除程序”,打开“添加或删除程序”对话框。(2)在该对话框的左侧按钮面板中点击“添加/删除Windows组件”,打开“Windows组件向导”对话框,如图10-3和图10-4所示。(3)在图10-4所示对话框的“组件”列表中勾选“Internet信息服务(IIS)”复选框。此时可以点击“详细信息”按钮,在打开的对话框中取消或选择相应服务,如图10-5所示。(4)选定要安装的服务后,点击“确定”按钮,返回图10-4,再点击“下一步”按钮,就可以进行IIS的安装,然后依照向导的提示进行安装,如图10-6所示。二、IIS属性设置安装好IIS组件后就可以使用IIS服务了,此时的Web服务器还没有配置完成,因此还需要对IIS进行配置,具体操作如下:(1)依次选择“开始/控制面板/管理工具”,此时出现“Internet信息服务”图标,双击该图标,打开“Internet信息服务”界面,如图10-1所示。(2)在该界面左侧的列表中依次展开“Internet信息服务/本地计算机/网站/默认网站”,如图10-7所示。在该列表下显示的是“C:\inetpub\wwwroot”下的文件和文件夹,也就是网站存放的路径,这是系统的默认设置。(3)在“默认网站”上点击鼠标右键,选择“属性”,打开“默认网站属性”对话框。选择“主目录”选项卡,在该选项卡的“本地路径”文本框中输入网站所在的路径即可,如图10-8所示。三、创建站点首先用Dreamweaver管理站点,具体操作如下:(1)站点内容存放在硬盘的某个文件夹下,这里我们可以在D盘下新建wxkj文件夹,并将网站代码复制到该文件夹下面。(2)在Dreamweaver里选择主菜单中的“站点|管理站点”命令,弹出“管理站点”对话框,如图10-9所示。(3)在弹出的新站点对话框中选择“高级”选项。在这里首先设置“本地信息”。(4)之后点击“测试服务器”进行设置。(5)确认后回到“管理站点”对话框,可见wxkj已添加,如图10-12所示。四、架设站点为了使创建的站点可以在IIS下运行,常用的方法是在IIS中添加虚拟目录,也就是把站点信息放到IIS环境中。虚拟目录是一项技术,通过它可以将服务器硬盘上任何位置的文件目录映射到网站的目录结构中,它类似于Windows下经常使用到的快捷方式,用户可以通过它像直接访问文件一样对文件进行操作,用户只需要设置一个指向原有目录的映射即可。(1)在图10-12所示“Internet信息服务(IIS)管理器”界面依次选择“默认网站/新建/虚拟目录(V)…”,打开“虚拟目录创建向导”对话框,如图10-13所示。(2)点击“下一步”按钮,输入虚拟目录名称,建议使用与目录相同的名称,如图10-14所示。(3)点击“下一步”按钮,选择虚拟目录映射到的网站目录,如图10-15所示。(4)点击“下一步”按钮后,设置站点的权限,如图10-16所示,一般来说只要勾选“读取”和“运行脚本”两项就可以了。如果不选择“运行脚本”,那么该站点就无法解析ASP网页。(5)再次点击“下一步”按钮即可完成该站点的创建,这时会在“默认网站”下面多出一个名字为“wxkj”的站点,如图10-17所示,说明IIS站点架设顺利完成。五、站点测试(1)在Dreamweaver中,选择“站点/管理站点/wxkj”,然后点击“完成”,这时会在Dreamweaver界面侧边“文件”窗口的“文件”项中弹出“wxkj”站点。(2)添加站点网页。(3)在文件设计视图里输入文字“欢迎您来到杭州网轩科技有限公司,just测试。第二节用户注册页面的制作一、数据库连接1.建立数据库2.建立系统的DSN(1)打开“ODBC数据源管理器”。(2)选择“系统DSN”项,并点击“添加”按钮,弹出如图10-3所示对话框,让我们选择驱动程序,因为我们使用Microsoft

Access创建数据库,所以在这里选择“Microsoft

Access(*.mdb)”,点击“完成”按钮。(3)创建数据源。(4)点击“选择”按钮,出现“选择数据库”对话框,如图10-25所示。(5)这时,返回到“ODBC数据源管理器”对话框,可以看到刚才添加的数据源名称“wxkjDSN”,如图10-26所示,说明DNS数据源创建成功。二、制作注册页面(1)新建index.asp,将index.html的内容复制到index.asp中,并利用Dreamweaver模板创建注册页面的模板index.dwt.asp,制作过程可以参考前面模板的制作方法,效果如图10-32所示。(2)删除原来创建的register.asp文件,利用模板重新建立register.asp文件,如图10-33所示。(3)在该页面中插入一个注册表单三、注册页面客户端表单验证

表单验证通常分为两种:客户端验证与服务器端验证。客户端验证属于对用户输入信息的检验,就是在把用户注册时输入的信息提交给服务器之前,检验用户输入的信息是否满足注册要求,这些检验只需在客户端完成。四、注册页面插入记录插入记录是一种服务器行为,就是将用户的注册信息保存到数据库中。具体操作如下:(1)点击“窗口”→“服务器行为”,打开“服务器行为”面板(2)点击“服务器行为”面板的“+”按钮,从弹出的菜单中选择“插入记录”菜单项,这时会弹出“插入记录”对话框

注意:“提交为”栏是指数据被提交到数据库的数据类型,所以必须与数据表的数据类型保持一致,用同样的方法把其他内容插入到相应的数据表字段中。这时“服务器行为”面板下已添加了“插入记录”行为五、注册页面检查新用户在用户注册过程中,可能会存在注册的用户账号已经被其他用户注册过的情况,因此需要提醒用户用其他账号进行注册,这就涉及用户名的唯一性检查。在Dreamweaver中可以使用“检查新用户”服务器行为验证用户注册的新名字是否与数据库中的用户名相同。总之,上述用户注册页面是一个ASP动态页面,注册信息将保存到Access数据库中。当设计的数据库表创建完成以后,我们需要实现动态网站的数据库连接,数据库连接有好几种方法,其中ODBC是常用的连接方法。其次,建立网站与数据库的连接,由于前面我们建立了数据源,因此在ASP中我们真正连接的是前面建立的数据源,这时会自动生成数据库连接文件,帮助开发人员实现数据库的连接操作。最后,我们需要完成注册页面,注意表单中的元素是根据之前设计的表来进行创建的,而且其命名需要和数据库表中的字段相同或者相似,这样我们可以将用户注册信息插入到对应的数据库表字段中。第三节

用户登录页面的制作用户登录的界面已经在前面制作完成,这里主要实现它的动态性,即完成后台的验证和用户登录结果的提示。(1)在“服务器行为”面板点击“+”按钮,从弹出的菜单中选择“用户身份验证/登录用户”菜单项,打开“登录用户”对话框(2)在弹出的对话框中进