WEB程序设计实验报告.doc

WEB程序设计实 验 报 告院系名称： 管理学院 专业班级： 电子商务0901班 学生姓名： 李 静 学 号： # 项目出勤（20%）完成情况（60%）实验报告（20%）总分得分2012年 6月 一、 实验目的1、通过本课程的实验教学，学生应能够做到：（1）掌握企业网站前台和后台的设计；（2）了解企业网站前台和后台的设计的基本思路；（3）掌握企业网站前台和后台的实现。（4）了解企业网站前台和后台的集成2、熟悉企业网站开发的基本方法、思路，重点功能的实现算法；3、学生应能够自己开发一个简单的企业网站。二、 实验内容独立完成企业网站的设计与开发三、 实验环境计算机（要求WIN2000以上操作系统，安装IIS和SQL Server）四、 网站设计过程1、 界面设计福特汽车中国站首页设计看上去虽然不是那么吸引眼球，但配有FLASH动画，是我可望而不可即的，所以在此就不在展示我做的首页了。福特汽车中国站的列表页汽车展厅如图（1）所示，看上去不是那么大气，在此我就做一些更改如图（2）所示。配有处理过的汽车大图片，来吸引用户眼球。是界面更美观，大方、简洁。 图（1） 图（2）网页列表页规划如下（1）、网站头部设计福特汽车公司中国站的网站的logo放在网站的左上角，和一般网站logo的位置相同，符合用户观看习惯。导航条位于logo下面，主要包括汽车展示、新闻中心、福特品牌、客户服务、走进福特、科技创新、社会责任七部分，每部分都有相应的二级栏目。导航条的右上方是在线订购。首页和英语页面。在线订购方便客户随时跟福特公司联系汽车购买，方便、快捷；首页也比较醒目，方便用户随时回到首页。English主要针对在中国的外国人，方便他们购买。（2）。中间部分设计中间设计比较简单，主要分为两大块，左边部分和中间部分。左边主要是汽车展示一级栏目及其下的二级栏目，就是一个列表，中间部分是可以切换的汽车展示，点击做部分不同的列表栏目，会出现不同的图片。（3）、尾部设计尾部设计也很简单，就包括了一些常有的链接和一些维权声明。（4）界面代码福特汽车中国站 bodycolor:#000;TEXT-ALIGN: center;FONT-SIZE: 26px A TEXT-DECORATION: none;FONT-SIZE: 14px;background-color:999999 A:hoverTEXT-DECORATION: none;color:#f00; .main MARGIN: 0px auto; WIDTH: 959px; HEIGHT: auto .topWIDTH: 959px; HEIGHT:80 .top1position:absolute;top:30px;left:210px .top2position:absolute;top:65px;left:824px .top3position:absolute;top:65px;left:924px .top4position:absolute;top:65px;left:1024px,width:auto .content21border:solid 1pt;width:765px;height:auto;margin:0px auto;position:absolute;top:140px;left:385px;z-index:3.bottomWIDTH:959px;HEIGHT:547;BACKGROUND:#ebebeb .bottom1position:absolute;top:140px;left:190px .bottom2font-family:楷体_gb2312;font-size:16pt;color:#f00;position:absolute;top:255px;left:190px;height:auto;width:194px .bottom3font-family:楷体_gb2312;font-size:12pt;color:#000;position:absolute;top:285px;left:190px;height:auto;width:194px .bottom4position:absolute;top:140px;left:385px .bottom5font-family:楷体_gb2312;font-size:12pt;color:#o8c;position:absolute;top:780px;left:210px;height:310px;width:959px .bottom6font-family:楷体_gb2312;font-size:12pt;color:#o8c;position:absolute;top:840px;left:210px;height:310px;width:959px .topmain MARGIN: 0px auto; WIDTH: 959px; BACKGROUND: #ebebeb; HEIGHT: 30px;PADDING: 0px .topmain UL MARGIN: 0px;padding: 0px;list-style-type: none; .topmain UL LI TEXT-ALIGN: center; LINE-HEIGHT: 30px; WIDTH: 110px; FLOAT: left; HEIGHT: 30px .topmain UL LI A LINE-HEIGHT: 30px; WIDTH: 137px; HEIGHT: 28px; COLOR: #00f; FONT-WEIGHT: bold; PADDING-TOP: 2px English 首页 在线订购 首页 汽车展厅 福特锐界 福特麦柯斯 福特蒙迪欧-致胜 福特福克斯三厢福特福克斯两厢 新福特嘉年华三厢新福特嘉年华两厢福特全顺 福特新世代全顺 新闻中心 福特新闻 活动专题 媒体报道 精彩视频 行业新闻 福特品牌 锐界 爱虎 野马 客户服务 客户留言 走进福特 公司简介 福特文化 业务范围 核心优势 福特荣誉领导关怀 创新科技 社会责任 安全 志愿者 环保承诺 健康和教育 1 2 3 4 汽车展示福特锐界福特麦柯斯福特蒙迪欧-致胜福特福克斯三厢福特福克斯两厢新福特嘉年华三厢新福特嘉年华两厢福特全顺福特新世代全顺 1 2 3 4 5 6 7 8 9 下一页 首页 末页 隐私权保护 声明版权保护 网站地图 联系我们 福特全球24小时客服热线 2011福特汽车(中国)有限公司 版权所有 沪ICP备05031283号2、 后台设计%Keyword=Trim(request.QueryString(Key)CurrentSort=Trim(request.QueryString(SortID)Sql=select * from Idea_Product where IsShow=&GetState()if CurrentSort thenif not IsNumeric(request.QueryString(SortID) thenResponse.Write alert(参数错误！);history.go(-1);response.End()elseSqlSort=select * from Idea_ProductSort where ID=&CurrentSortset rs=idea.exec(SqlSort,1)if not rs.eof thenTitle=rs(SortName)Sql=Sql+ and SortID=&Cint(CurrentSort)&elseResponse.Write alert(参数不在接收范围！);history.go(-1);response.End()end ifrs.closeset rs=nothingend ifelse Title=福特汽车中国站汽车展示end ifif request.QueryString(Key) thenSql=Sql& and ProductName like %&Keyword&%end ifPage = Trim(Request.QueryString(Page)if Page = or Page 0 then rspage.absolutepage = Pageend IfIndexTemplateHtml=Replace(FSOFileRead(template/&idea_3&/html/productlist.html),template_head,FSOFileRead(template/&idea_3&/html/head.html)IndexTemplateHtml=Replace(IndexTemplateHtml,template_foot,FSOFileRead(template/&idea_3&/html/foot.html)IndexTemplateHtml=replace(IndexTemplateHtml,images/,template/&idea_3&/images/)AllTemplateHtml=ReplaceGlobalLable(GetAllHtml_List(IndexTemplateHtml,Const_Rule,CurrentSort,Keyword,Page)PageNumber_1=viewPage(rspage.recordcount,Page,4,session(PageLength),rspage.pagecount,CurrentSort)GetAllHtml2=replace(AllTemplateHtml,idea_pagenumber,PageNumber_1)GetAllHtml2=replace(GetAllHtml2,idea_title,Title)response.write GetAllHtml2rspage.closeset rspage=nothing-显示分页-Function viewPage(AllRecordsCount,CurrentPage,BeforePages,ViewPageCount,AllPageNumber,CurrentSort)Str_PageList1=MakePageNumber(CurrentPage,BeforePages,ViewPageCount,AllPageNumber,asp,CurrentSort)if CurrentPage=1 thenFirstPagelink=首页LastPagelink=上一页elseFirstPagelink=首页if CurrentPage=2 thenLastPagelink=上一页elseLastPagelink=上一页end ifend ifif CurrentPage=AllPageNumber thenNextPagelink=下一页FinalPagelink=尾页elseNextPagelink=下一页FinalPagelink=尾页end ifStr_PageList2=页次:&CurrentPage&/&AllPageNumber&页  &FirstPagelink  &LastPagelink  &Str_PageList1  &NextPagelink  &FinalPagelink  共&AllRecordsCount&条记录  viewPage=Str_PageList2End Function%3、 前后台集成后台修改到数据库代码%action=Request.QueryString (Action)Select Case Lcase(action)Case delallCall dell_colume()Case addCall add_colume()Case updateCall update_colume()End SelectSub dell_colume ID=trim(request(chk)If ID= Then response.writealert(没有选择数据);history.go(-1);:response.End sql=delete from Idea_News where ID in(&ID&)Call idea.exec(,-1)set rs = server.createobject(adodb.recordset)conn.execute(sql)set rs=nothingresponse.write alert(数据删除成功);location.href=Admin_News.asp;End SubSub add_columeNewsName=trim(request(NewsName)SortID=trim(request(Sort)SSource=trim(request(Source)Publisher=trim(request(Publisher)NewsPic=trim(request(pic)sNewsPic=trim(request(spic)Content=trim(request(Content)if(trim(request(IsShow) thenIsShow=1elseIsShow=0end ifsql=insert into Idea_News(NewsName,SortID,Source,NewsPic,sNewsPic,Content,Publisher,IsShow) values(&NewsName&,&SortID&,&SSource&,&NewsPic&,&sNewsPic&,&Content&,&Publisher&,&IsShow&)Call idea.exec(,-1)set rs = server.createobject(adodb.recordset)conn.execute(sql)set rs=nothingresponse.write alert(数据添加成功);location.href=Admin_News.asp;End SubSub update_colume ID=trim(request(ID)NewsName=trim(request(NewsName)SortID=trim(request(Sort)SSource=trim(request(Source)Publisher=trim(request(Publisher)NewsPic=trim(request(pic)sNewsPic=trim(request(spic)Content=trim(request(Content)if(trim(request(IsShow) thenIsShow=1elseIsShow=0end ifsql=update Idea_News set NewsName=&NewsName&,SortID=&SortID&,Source=&SSource&,NewsPic=&NewsPic&,sNewsPic=&sNewsPic&,Content=&Content&,Publisher=&Publisher&,IsShow=&IsShow& where ID=&ID&Call idea.exec(,-1)set rs = server.createobject(adodb.recordset)conn.execute(sql)set rs=nothingresponse.write alert(数据更新成功);location.href=Admin_News.asp;End SubFunction Inf_Count() sql=select * from Idea_Newsset rs=idea.exec(sql,1) Inf_Count=rs.recordcountrs.closeset rs=nothingEnd Function%前台从数据库调用代码%Keyword=Trim(request.QueryString(Key)CurrentSort=Trim(request.QueryString(SortID)Sql=select * from Idea_News where IsShow=&GetState()if CurrentSort thenif not IsNumeric(request.QueryString(SortID) thenResponse.Write alert(参数错误！);history.go(-1);response.End()elseSqlSort=select * from Idea_NewsSort where ID=&CurrentSortset rs=idea.exec(SqlSort,1)if not rs.eof thenTitle=rs(SortName)Sql=Sql+ and SortID=&Cint(CurrentSort)&elseResponse.Write alert(参数不在接收范围！);history.go(-1);response.End()end ifrs.closeset rs=nothingend ifelse Title=福特汽车中国站汽车展示 end ifif request.QueryString(Key) thenSql=Sql& and NewsName like %&Keyword&%end ifPage = Trim(Request.QueryString(Page)if Page = or Page 0 then rspage.absolutepage = Pageend IfIndexTemplateHtml=Replace(FSOFileRead(template/&idea_3&/html/newslist.html),template_head,FSOFileRead(template/&idea_3&/html/head.html)IndexTemplateHtml=Replace(IndexTemplateHtml,template_foot,FSOFileRead(template/&idea_3&/html/foot.html)IndexTemplateHtml=replace(IndexTemplateHtml,images/,template/&idea_3&/images/)AllTemplateHtml=ReplaceGlobalLable(GetAllHtml_List(IndexTemplateHtml,Const_Rule,CurrentSort,Keyword,Page)PageNumber_1=viewPage(rspage.recordcount,Page,4,session(PageLength),rspage.pagecount,CurrentSort)GetAllHtml2=replace(AllTemplateHtml,idea_pagenumber,PageNumber_1)GetAllHtml2=replace(GetAllHtml2,idea_title,Title)response.write GetAllHtml2rspage.closeset rspage=nothingFunction viewPage(AllRecordsCount,CurrentPage,BeforePages,ViewPageCount,AllP