网页设计及制作实训报告Word下载.docx
- 文档编号:19853196
- 上传时间:2023-01-10
- 格式:DOCX
- 页数:21
- 大小:604.88KB
网页设计及制作实训报告Word下载.docx
《网页设计及制作实训报告Word下载.docx》由会员分享,可在线阅读,更多相关《网页设计及制作实训报告Word下载.docx(21页珍藏版)》请在冰豆网上搜索。
一、系统模块划分
系统设计的总体规则
企业平台主要是对后台管理和前台操作。
后台管理是管理员对本网站的维护,通过企业资料(企业文化、企业介绍、企业概述)、企业新闻中心(会员注册、优秀员工)等功能达到对网站的管理。
前台操作是用户登录到本网站,可以进行用户注册。
无论哪个网站都要有它自己的设计规则。
该平台也一样,它的主要设计规则有:
简单性:
在实现平台的功能的同时,尽量让平台操作简单易懂,这对于一个网站来说是非常重要的。
针对性:
该平台设计是企业系统及后台管理的定向开发设计,所以具有专业突出和很强的针对性。
实用性:
该平台能完成电子商品展示和管理员管理的基本信息,具有良好的实用性。
企业系统总体模块
二、系统业务流程图
三、数据表结构
客户信息表
字段名
数据类型
说明
UserID
自动编号
客户编号,主键
UserName
文本
客户名
UserPassword
客户登陆密码
UserEmail
邮箱
Sex
数字
性别
addDate
日期/时间
注册时间
Logins
登录次数
Usercookies
电脑是否保存用户信息
Birthday
生日
Quesion
安全问题
Answer
安全答案
Address
地址
管理员数据表
管理员信息表
ID
管理员编号,主键
用户名
Password
用户密码
LastLogin
上次登录时间
LastLoginIP
上次登录IP
附
友情连接表
Linkid
连接编号,主键
Linkname
连接网站名
Linkurl
连接网址
Linkidorder
网址顺序
新闻及公告的管理
字段名称
Id
新闻ID
Title
名称
Content
备注
内容
Indate
发表时间
State
是/否
状态新闻公告
会员数据表
网站的基本信息设置
Personal
身份证号码
男/女
Indate
Webmail
联系电邮
Post
邮编
Phone
电话
Copyright
版权
Weblogo
网站logo
联系地址
网站设置数据表
2数据库逻辑结构设计
数据库设计要遵循一些规则,一个好的数据库满足一些严格的约束和要求。
尽量分离各实体对应的表,一个实体对应一个表,搞清楚该实体有哪些属性,对应有些什么字段,以及各实体之间有何种联系。
实体、属性与联系是进行概念设计时要考虑。
数据库关系图
四、网页所使用的技术
1.程序开发的技术基础
1)HTML语言
HTML(HyperTextMarkupLanguage超文本标记语言)是一种用来制作超文本文档的简单标记语言。
与常见的字处理文件不同,Web页以超文本标识语言编排格式。
HTML文件是带有特定HTML插入标记的用以编排文档属性和格式的标准文本文件。
它能独立于各种操作系统平台(如UNIX,WINDOWS等)。
自1990年以来HTML就一直被用作WorldWideWeb上的信息表示语言,用于描述Homepage的格式设计和它与WWW上其它Homepage的连结信息。
HTML文档(即Homepage的源文件)是一个放置了标记的ASCII文本文件,通常它带有.html或.htm的文件扩展名。
生成一个HTML文档主要有以下三种途径:
(1)手工直接编写(例如用你所喜爱的ASCII文本编辑器或其它HTML的编辑工具)。
(2)通过某些格式转换工具将现有的其它格式文档(如WORD文档)转换成HTML文档。
(3)由Web服务器(或称HTTP服务器)一方实时动态地生成。
一般的HTML页面具有如下的结构:
〈html〉
<
head>
<
title>
<
base>
link>
isindex>
meta>
/head>
body>
这是HTML正文部分
〈/body〉
/html>
可见在一个HTML网页文件中,一般必须有一对〈html〉<
标记作为文件的开头和结尾,在<
html>
标记后是头部标记<
<
其后是实体标记<
/body>
。
2)JAVASCRIPT语言
JAVASCRIPT脚本语言脚本是应用程序在网页上表达的语言,可以将脚本嵌入Web页中。
通常脚本在服务器上运行,但也可以采用客户端和服务器端结合使用JAVASCRIPT脚本语言。
2.ASP技术
1)ASP概述
ASP(ActiveSeverPages动态网页)是微软公司推出的一种用以取代CGI(CommonGatewayInterface)技术。
目前,Internet上的许多基于Windows平台的Web站点已开始应用ASP来替换CGI。
ASP是一个位于服务器端的脚本运行环境。
通过这种环境,用户可以创建和运行动态的交互式Web服务器应用程序,如交互式动态网页,包括使用HTML表单收集和处理信息、上传与下载等。
通常情况下,用户通过浏览器看到的网页大多是静态的,目前Internet上的许多站点,仍然提供“静态”(static)的主页内容。
所谓“静态”,是指站点的主页内容是“固定不变”的。
一个“静态”的站点,若要更新主页的内容,必须手动更新其HTML的文件数据。
而随着Web技术的发展,用户希望能够看到根据要求而动态生成的主页,例如响应用户查询数据库的要求而生成报表等。
站点服务器收到要求执行的应用程序,分析表单(form)的输入数据,将执行的结果以HTML的格式传送给浏览器。
根据用户请求生成动态主页的传统方法有CGI、ISAPI等。
CGI是根据浏览器端的http请求激活响应进程,每一个请求对应一个进程。
当同时有很多请求时,程序挤占系统资源,造成效率低下。
ISAPI针对这一缺点进行了改进,利用dll(动态链接库技术),以线程代替进程,提高了性能和速度,但要考虑线程的同步问题,而且开发步骤烦琐。
这两种技术和另一普遍使用的开发动态网页的技术Java都还存在着另外一个问题,那就是开发困难,程序的开发和HTML写作是两个完全不同的过程,需要专门的程序员开发。
ASP使用的ActiveX技术基于开放设计环境,用户可以自己定义和制作组件加入其中,使自己的动态网页几乎具有无限的扩充能力,这是传统的CGI等程序所远远不及的地方。
2)ASP特点
ASP具有易用性、兼容性、安全性、可扩充性等特点:
易用性:
使用VBScript、JavaScript等简单易学的脚本语言,结合HTML代码,即可快速地完成网站的应用程序。
无须编译、容易编写,可在服务器端直接执行。
使用普通的记事本既可以进行编辑设计。
兼容性:
ASP能与任何ActiveX语言相容,除了可使用VBScript、JavaScript等语言设计外,通过plug-in的方式,还可以使用第三方所提供的其他脚本语言。
安全性:
ASP的源代码不会被传到客户浏览器,从而避免了缩写的源程序被他人剽窃,从而提高了程序的安全性。
可扩充性:
可以使用VisualBasic、Java、VisualC++和COBOL等编程语言来编写所需的服务器控件。
3)ASP工作原理
ASP与常见的在Client端实现动态主页的技术如Javaapplet、ActiveXControl、VBScript、JavaScript等不同,ASP中的命令和Script语句都是由服务器来解释执行的,执行结果产生动态生成的Web页面并送到浏览器;
而Client端的Script命令则是由浏览器来解释执行。
由于ASP是在服务器端解释执行,开发者可以不必考虑浏览器是否支持ASP,也不必担心别人下载程序从而窃取编程逻辑。
ASP程序通过后缀名为asp的ASP文件来实现其功能,一个asp文件相当于一个可执行文件,因此必须放在Web服务器上有可执行权限的目录下。
当用户从浏览器输入了asp文件的地址后,浏览器就将这个URL请求发给Web服务器。
如果Web服务器上装ASP,就调用ASP,ASP读出相应asp文件,解释并执行命令,动态生成一个HTML页面回传Web服务器,然后Web服务器把结果发送给浏览器。
ASP文件的制作和HTML类似,且可和HTML开发集成,可以在同一个过程完成,利用ASP将可以执行的脚本嵌入到HTML文件中,这使得HTML文件的编写与脚本的开发融合在一起。
通过ASP内置的对象、服务器组件(SeverComponent)可以完成非常复杂的任务,而且用户还可以自己开发或利用别人开发的服务器组件完成专门的任务。
ASP与网关及服务器扩展模式相比有以下优点:
(1)完全与HTML文件融合在一起;
(2)容易创建,不需要其它编译、链接程序;
(3)面向对象的并通过ActiveXSever对象可扩展。
在电子商务中,对用户而言,进行网上信息查询的目的是寻找自己需要的产品或服务,而对于服务提供者来说,其目的则是向用户推销自己的产品或服务。
因此,让用户通过浏览器查询服务的后端数据是许多Web服务提供者必须提供的服务,ASP通过内置的ADODB组件来实现这一功能。
可以使用ADO去编写紧凑简明的脚本,以便连接到ODBC兼容的数据库和OLEDB兼容的数据源。
4)ASP的发布
当编辑好ASP文件后,必需发布后才能实现其功能,ASP文件本身并不能运行。
我们用Windows自带的工具IIS(windows2000XP)来发布ASP文件。
(Windows98用PWS发布)
IIS的配置在本次设置中相当重要,IIS是我们测试网站的一个平台,在ASP开发中,少不了使用IIS,本设置使用的是WINDOWXP中的IIS5.1。
操作如下:
1、点击“开始”“设置”“控制面版”“管理工具”“Internet信息服务”,打开IIS配置控制面版。
2、点击进入“网站”“默认网站”,然后右键“属性”,弹出“默认网站属性”对话框。
3、在“默认网站属性”对话框中选择“主目录”,选择你存放网页的文件夹,其它值默认。
4、选择“文档”选项卡,添加自己网页默认的文件名,如“index.asp”。
通过上述操作,你的IIS基本上就配置好了,如过你要访问,你可以直接输入以下IP:
http:
//127.0.0.1,您的网站就能在浏览器中显示信息或错误信息了。
3.数据库原理
1)SOL语言简单介绍
SQL是英文StructuredQueryLanguage的缩写,意思为结构化查询语言。
SQL语言的主要功能就是同各种数据库建立联系,进行沟通。
按照ANSI(美国国家标准协会)的规定,SQL被作为关系型数据库管理系统的标准语言。
SQL语句可以用来执行各种各样的操作,例如更新数据库中的数据,从数据库中提取数据等。
目前,绝大多数流行的关系型数据库管理系统,如Oracle、Sybase、MicrosoftSQLServer、Access等都采用SQL语言标准。
虽然很多数据库都对SQL语句进行了再开发和扩展,但是包括Select、Insert、Update、Delete、Create以及Drop在内的标准的SQL命令仍然可以被用来完成几乎所有的数据库操作。
在众多的SQL命令中,select语句应该算是使用最频繁的。
select语句主要被用来对数据库进行查询并返回符合用户查询标准的结果数据。
select语句中位于select关键词之后的列名用来决定哪些列将作为查询结果返回。
用户可以按照自己的需要选择任意列,还可以使用通配符“*”来设定返回表格中的所有列。
select语句中位于from关键词之后的表格名称用来决定将要进行查询操作的目标表格。
除了上面所提到的运算符外,LIKE运算符在where条件从句中也非常重要。
LIKE运算符的功能非常强大,通过使用LIKE运算符可以设定只选择与用户规定格式相同的记录。
2)ADO技术介绍
ADO(ActiveXDataObjects)技术是微软公司推出的数据库连接技术,运用该技术可以对各种数据库(如SQLServer、Access、Oracle及Sybase等)的链接、查询、存取等操作。
ADO对象给开发人员提供一种快捷、简单、高效的数据库访问方法,ADO可以包含在脚本中来产生对数据库的连接,并从数据库表中读取数据,形成实际要使用的对象集合。
而且,对于数据资源,提供了应用程序一级的界面。
不过,ADO并不与数据资源直接通信,而是通过称为OLEDB的中间界面,对于数据资源(MicrosoftSQLServer),OLEDB提供了系统一级的界面。
ADO是一组优化的访问数据库的对象集,为Web数据库开发者提供完整的网站数据库解决方案。
ADO可以与ASP紧密结合,运行在服务器端,从而制作出功能完善的数据库网页。
ADO除了支持各种数据库平台外,它还支持VB、VC和Script等多种程序设计语言。
在利用ADO技术进行数据库网页制作的第一步就是要建立服务器端的数据库,即后台数据库,一般可选择SQLServer或者Access作为后台数据库。
本次的毕业设计是以Access作为后台数据库。
3)Access数据库
Access是一个数据库管理系统,它之所以被集成到Office中而不是VisualStudio中,是因为它与其它的数据库管理系统(如VisualFoxPro)相比更加简单易学,一个普通的计算机用户即可掌握并使用它。
而且最重要的一点是,Access的功能足够强大,足以应付一般的数据管理及处理需要。
Access可以实现建立数据库、报表,以及对数据库、报表的修改、查询等功能。
VBScript和JavaScript等脚本语言融合在一起的技术。
五、系统详细设计
界面设计与实现
1.连接方式
本系统采用ADO连接方式,通过ADO把数据库与界面连接起来,把数据库的内显示于主界面,主界面的信息保存与数据库中,实现数据间的传递与存储。
本系统中把该方法单独放入到conn.asp中,因为驱动要重复使用,为了方便,一般我们就把它单独放在一页中,当使用时,可以用<
!
--#includefile=”conn.asp”-->
调用。
2.前台显示与会员管理
1)主界面设计与实现
前台主要分为信息显示(如商品信息、商品分类、商品资讯等)和会员管理(如会员注册、购物车、修改会员信息、会员订单等)。
信息显示供会员查看与订购。
每个前台界面都分为上、下、左、右四个版块。
上为top.asp主要是设置网站的logo、网站导航条等,调用的方法也是<
;
下为脚注,主要显示网站的版权、联系信息;
左为辅助工具(如登陆框、排行榜、分类);
右为具体操作与显示的版块。
主界面如图所示:
2)登陆页面设计与实现
登陆界面提供给浏览者登陆、注册、找密码的入口。
登陆界面前后如图所示:
登陆前的登陆框登陆后显示个人信息
登陆成功后,系统将把用户的ID等信息通过cookies存起来。
返回是就是通过cookies的值来判断会员是否登陆。
只有退出或关闭界面时,cookies的值才回清空。
如图(b)。
会员登陆的主要实现如下代码(checklogin.asp):
%
dimusername,upassword,comeurl,Getcode
username=replace(trim(request("
username"
)),"
'
"
"
)
upassword=md5(replace(trim(request("
upassword"
))
Getcode=replace(trim(request("
Getcode"
ifusername="
orupassword="
then
response.write"
scriptLANGUAGE='
javascript'
>
alert('
您的用户名或密码有误!
);
history.go(-1);
/script>
response.end
endif
ifcstr(session("
pSN"
))<
cstr(trim(request("
)))then
response.Write"
请输入正确的验证码!
setrs=server.CreateObject("
adodb.recordset"
rs.Open"
select*from[user]whereusername='
&
username&
andpassword='
upassword&
"
conn,1,3
ifnot(rs.bofandrs.eof)then
ifupassword=rs("
password"
)then
response.cookies("
user"
)("
)=trim(request("
vip"
)=rs("
rs("
lastlogin"
)=now()
hits"
)+1
zhifen"
)=rs("
)+1
'
rs("
userlastip"
)=Request.ServerVariables("
REMOTE_ADDR"
rs.Update
endif
rs.Close
setrs=nothing
ifsession("
UserID"
)<
conn.execute("
deletefromBuyGoodwhereUserID="
session("
)&
andGoodState=9"
response.Redirect("
index.asp"
%>
6)其它设计与实现
客户的信息只对客户开放,为了防止用户的非法进入,我们设计了session.asp页面,目的就是验证用户是否合法,只有符合信息的才给予进入。
代码如下:
ifrequest.Cookies("
)="
response.Cookies("
shangcheng"
).Expires=NOW()-1
response.Write("
scriptlanguage=javascript>
登陆超时或您还没登陆!
location.href='
userlogin.asp'
;
为了防止网站注入非法代码,系统中还设置了防注入脚本,过滤掉非法的关键字符。
其内容设计在<
--#includefile=”sql.asp”-->
,这样就可以加强网站的安全性。
3后台设计与实现
1)登陆界面设计
后台只能给管理员进入使用,所以要严格控制访问的权限。
进入后台要有登陆界面,登陆采用账号、密码、验证码、MD5四步验证。
系统后台登陆
登陆代码如下(admin/login.asp):
username=replace(request.form("
),"
password=replace(request.form("
aRePassWD=Trim(Request("
checkcode"
IfaRePassWD=CStr(Session("
))Then
sql="
select*fromadmin_loginwhere(username='
md5(password)&
)"
setrs=server.createobject("
rs.opensql,conn,1,1
ifnotrs.eofthen
session("
type_admin"
)=username
response.Redirect"
AdminIndex.asp"
else
)="
Error.asp"
rs.close
conn.close
Else
EndIf
验证通过后,页面将转到后台管理的主界面。
2)后台管理主界面设计与实现
主界面分为左右两版块,左边是菜单设置,右边是具体操作模块。
其界面如图所示:
系统后台主界面
菜单分为管理员管理、公司简介、新闻中心管理、在线招聘等部分下
3)网站设置设置实现
网站设置如图所示:
网站设置及其相关操作
管理员管理设置包括网站设置、密码修改、是部分。
网站设置为网站的基本设置,如名称、logo图、地址等网页信息。
这些信息可以显示在页面的下方几头部;
密码修改针对管理用户的密码修改,属于人员管理的一部分
企业介绍修改管理员界面:
添加按钮代码实现(admin/password.asp):
ifrequest.querystring("
act"
tj"
setrsa=server.createobject("
adodb.recordset
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 设计 制作 报告