《PHP Web应用开发案例教程》630-9（阮云兰）教案 第34课 电子商务网站数据库设计、文件配置和前台首页设计

PAGE10PAGE10PAGE11PAGE11

课题电子商务网站数据库设计、文件配置和前台首页设计课时2课时（90min）教学目标知识技能目标：（1）掌握数据库设计的基本步骤和方法（2）掌握网站配置文件的设置素质目标：（1）紧跟时代发展，培养脚踏实地、不骄不躁的工作习惯（2）夯实理论基础，强化实践训练，提高专业技能，勇担时代使命教学重难点教学重点：数据库设计的基本步骤和方法教学难点：网站配置文件的设置教学方法案例分析法、问答法、讨论法、讲授法、实践法教学用具电脑、投影仪、多媒体课件、教材教学设计第1节课：→→→传授新知（38min）第2节课：→传授新知（20min）→小组讨论（15min）→课堂小结（3min）→作业布置（2min）教学过程主要教学内容及步骤设计意图第一节课课前任务【教师】布置课前任务，和学生负责人取得联系，让其提醒同学通过文旌课堂APP或其他学习软件，预习本节课要学习的知识【学生】完成课前任务通过课前任务，使学生预习本节课要学习的知识，增加学生的学习兴趣考勤（2min）【教师】使用文旌课堂APP进行签到【学生】班干部报请假人员及原因培养学生的组织纪律性，掌握学生的出勤情况问题导入（5min）【教师】提出以下问题：数据库设计的逻辑结构和物理结构设计的作用是什么？通过问题导入，引导学生主动思考，激发学生的学习兴趣传授新知（38min）【教师】通过学生的回答引入要讲的知识，讲解使用PHP进行电子商务网站数据库设计的过程16.3数据库设计数据库设计，是对数据库的逻辑结构和物理结构做出具体的规划设计。为后面编码、测试、运行和维护阶段网站数据的存储做准备。16.3.1数据库逻辑结构设计根据系统需求和目标，以及系统功能结构，总结出需要保存的数据信息，并将其转化为原始数据形式。列出系统的实体及E-R图，然后根据E-R图创建数据表。✈【教师】通过多媒体展示“数据库E-R图”图片，并进行介绍本电子商务网站的实体包括用户实体、用户详情实体、商品实体、订单实体、购物车实体和评价实体，它们的E-R图如图所示。16.3.2数据库物理结构设计✈【教师】通过多媒体展示“数据库物理结构”图片，并进行介绍根据E-R图，在图形化管理工具phpMyAdmin中创建16个表，如图所示。下面给出其中12个表的结构信息，其他4个表将在后面用到时进行介绍。1．yg_user（用户表）✈【教师】通过多媒体展示“用户表结构”图片，并进行介绍用户表用于存储用户名、用户密码、用户邮箱等基本信息，表结构如图16-10所示。2．yg_user_detail（用户详情表）✈【教师】通过多媒体展示“用户详情表结构”图片，并进行介绍用户详情表用于存储用户的详细信息，与用户表通过id关联，表结构如图所示。3．yg_cats（分类表）✈【教师】通过多媒体展示“图书分类表结构”图片，并进行介绍分类表用于存储每个商品分类的详细信息，表结构如图16-12所示。4．yg_goods（商品表）✈【教师】通过多媒体展示“商品表结构”图片，并进行介绍商品表用于存储商品的详细信息，表结构如图所示。5．yg_cart（购物车表）✈【教师】通过多媒体展示“购物车表结构”图片，并进行介绍购物车表用于存储购物车的详细信息，表结构如图所示。6．yg_orders（订单表）✈【教师】通过多媒体展示“订单表结构”图片，并进行介绍订单表用于存储订单的详细信息，表结构如图所示。7．yg_detail（订单详情表）✈【教师】通过多媒体展示“订单详情表结构”图片，并进行介绍每个订单可以有多种商品，订单详情表用于存储订单中每种商品的详细信息，表结构如图所示。8．yg_comment（评价表）✈【教师】通过多媒体展示“评价表结构”图片，并进行介绍评价表用于存储评价的详细信息，表结构如图所示。9．yg_commentreplay（评价回复表）✈【教师】通过多媒体展示“评价回复表结构”图片，并进行介绍评价回复表用于存储评价回复的详细信息，表结构如图16-18所示。10．yg_collect（收藏表）✈【教师】通过多媒体展示“收藏表结构”图片，并进行介绍收藏表用于存储用户收藏商品的信息，表结构如图所示。11．yg_img（轮播图表）✈【教师】通过多媒体展示“轮播图表结构”图片，并进行介绍轮播图表用于存储首页轮播广告图的详细信息，表结构如图16-20所示。12．yg_message（留言表）✈【教师】通过多媒体展示“留言表结构”图片，并进行介绍留言表用于存储用户下订单时留言的详细信息，表结构如图所示。【学生】聆听、思考、记录通过教师的讲解和演示，使学生了解使用PHP进行电子商务网站数据库设计的过程第二节课问题导入（5min）【教师】提出以下问题：每个项目的网站配置文件是一样的吗？【学生】思考、举手回答通过问题导入，引导学生主动思考，激发学生的学习兴趣传授新知（20min）【教师】通过学生的回答引入新知，介绍在PHP框架中设置网站配置文件的方法16.4网站配置文件设置配置文件一般包括模板引擎标签和数据库配置信息，在制作网站前首先需要设置网站的配置文件。代码如下：<?phpreturnarray( //'配置项'=>'配置值' 'TMPL_L_DELIM' =>'<{', //模板引擎普通标签开始标记'TMPL_R_DELIM' =>'}>', //模板引擎普通标签结束标记 //数据库设置'DB_TYPE' =>'mysqli', //数据库类型'DB_HOST' =>'localhost', //服务器地址'DB_NAME' =>'yg_shop', //数据库名'DB_USER' =>'root', //用户名'DB_PWD' =>'123456', //密码'DB_PORT' =>'3306', //端口'DB_PREFIX' =>'yg_', //数据库表前缀 'SHOW_PAGE_TRACE' =>true, //显示页面Trace信息);16.5前台首页设计首页需要合理布局，既要尽可能突出重点，又不能因为模块太多而显得杂乱无章。电子商务网站的前台首页如图所示。✈【教师】通过多媒体展示“网站前台首页”图片，并进行介绍广告商品搜索商品列表商品列表分类导航广告商品搜索商品列表商品列表分类导航由图可以看出，首页主要由以下4部分组成：商品搜索部分。广告部分。商品分类导航部分。商品列表部分。本节只介绍前3部分的实现方法，第4部分的实现技术过于简单，此处不再介绍，请读者参考源代码。16.5.1商品搜索的实现分页是显示数据时常用的技术，当数据库查询结果远远超出计算机屏幕的显示范围时，分页显示可以合理地将数据呈现给用户。ThinkPHP框架中有一个很强大的分页类Page（位于“ThinkPHP\Library\Think”目录下），此处使用该类对搜索结果进行分页。1．创建表单在公共文件夹Public中创建“header.html”文件，并在其中创建搜索表单。代码如下： <formaction="__MODULE__/Search/index"method="get"onsubmit="returnfun()"> <inputtype="text"id="inputid"name="keyword"class="search-input"value=""> <inputclass="search-btn"type="submit"value="搜索"> <scripttype="text/javascript"> //如果没有填写搜索条件，则不执行搜索动作functionfun(){varinputid=document.getElementById('inputid');ss=inputid.value;if(!ss){returnfalse;}}</script> </form>“header.html”文件包含在前台的多个页面中，所以将其放在公共文件夹中。2．调用分页函数在SearchController控制器类的index()方法中添加以下代码，先将符合搜索条件的数据总条数计算出来，再以总条数为参数实例化分页类Page，此时还需注意的是要维持搜索条件，否则在分页后的页面中跳转时，会导致搜索条件丢失，查询出的数据不正确。//搜索处理$res=M('Goods');$keyword=$_GET['keyword'];$sear['goodsname']=array('like','%'.$keyword.'%');//导入分页类import('Think.Page');//查询数据条数$count=$res->where($sear)->count();//实例化分页类$Page=newPage($count,8);//设置页码显示$>setConfig('header','共%TOTAL_ROW%条记录');$>setConfig('first','首页');$>setConfig('last','末页');$>setConfig('prev','上一页');$>setConfig('next','下一页');$>setConfig('theme',"共%TOTAL_ROW%条记录%FIRST%%UP_PAGE%

%LINK_PAGE%%DOWN_PAGE%%END%");//分页跳转时维持搜索条件foreach($searas$key=>$val){$>parameter[]="$key=".urlencode($val[1]).'&';}//分页按钮显示输出$show=$>show();//进行分页数据查询$val=$res->where($sear)->limit($>firstRow.','.$>listRows)->select();$this->assign('ugoods',$val);$this->assign('page',$show);$this->display()在控制器中使用分页类的方法时，一定要使用命名空间，否则无法找到分页类。此处在控制器类前面添加代码“useThink\Page;”导入Page类。16.5.2首页轮播广告的实现用户打开网站，首先映入眼帘的往往就是首页的广告，此处的广告以轮播图形式显示。1．查询数据要显示轮播图，首先需要查询轮播图所展示图片的地址。代码如下：$img=M('img'); //实例化img模型$imgs=$img->where('state="已发布"')->select(); //查询状态为“已发布”的图片$this->assign('lubn',$imgs); //为模板变量赋值2．显示图片在模板中遍历查询出来的图片地址，然后用JavaScript控制每张图片的显示与隐藏，以及间隔时间。代码如下： <!轮播广告> <divstyle="overflow:hidden;position:relative;width:100%;height:500px;top:-38px;"> <ulid="lubo"> <!--遍历数组--> <foreachname='lubn'item='img'> <li> <divstyle="width:100%;height:500px;overflow:hidden;"> <imgsrc="__PUBLIC__/Upload/<{$img.img}>"width="100%"> </div> </li> </foreach> </ul> </div> <!--javascript代码--> <script> $(function(){ $('#luboli').eq(0).css('display','block');//设置第一张图片显示 $('#luboli').eq(0).siblings().css('display','none');//设置除第一张图片外其他图片都隐藏//定义显示函数functionshow(i){$("#luboli").eq(i).css('display','block');//设置第i张图片显示$("#luboli").eq(i).siblings().css('display','none');//设置除第i张图片外其他图片都隐藏}varlis=$('#luboli').length; //计算图片总数vari=0;varinit=null;//定义定时函数functionauto(){init=setInterval(function(){//调用显示函数，每4000毫秒循环一次show(i);i++;if(i==lis){i=0;}},4000);}//调用定时函数auto(); }) </script>16.5.3商品分类导航的实现商品分类导航常用的一个关键技术就是无限级分类。所谓无限级分类，就是对数据完成多次分类，如同一棵树，从根开始，到主干、枝干、叶子……。实现无限级分类常用的方法有两种：递归和操作指针，此处使用递归方式。1．定义分类函数在“ThinkPHP\Library\Org\Type\”目录下新建文件“CatTree.class.php”，在其中定义函数getlist()，首先将查询出来的数据进行遍历，判断每个类别是否为顶级分类，如果是顶级分类，则以该类别的ID为父类ID，查询此类别下面的子类别；再以该子类别为父类，向下查询，直到每个类别下面的子类别为空，结束递归。代码如下： publicstaticfunctiongetlist($allcats,$pid=0){ $tree=array(); //每次都声明一个新数组用来存放子元素 foreach($allcatsas$v){ if($v[self::$pid]==$pid){ //匹配子类别 $v[self::$son]=self::getlist($allcats,$v[self::$id]); //递归获取子类别 if($v[self::$son]==null){ //如果子元素为空则调用unset()函数进行删除，说明已经到该分支的最后一个元素 unset($v[self::$son]); } $tree[]=$v; //将记录存入新数组 } } return$tree;}2．调用函数在IndexController控制器类的index()方法中将全部类别查询出来，然后调用前面定义的分类函数getlist()，并为模板变量赋值。代码如下：//实例化Cats模型$cats=M('Cats');//查询所有类别$allcats=$cats->field('catsid,catsname,pid,path')->select();//调用分类函数$type=CatTree::getlist($allcats);//为模板变量赋值$this->assign('type',$type);由于无限级分类函数放在第三方类库中，为静态方法，在控制器类中调用该方法时，需要使用“use”关键字导入相应的类，格式为“useOrg\Type\CatTree;”。3．显示类别在模板中遍历显示处理后的结果。代码如下：<!--遍历顶级分类--><foreachname="type"item="cats"><divclass="item"><h3class="t01_channelhome"><ahref="__MODULE__/Goodslist/index/catsid/<{$cats.catsid}>"><i></i><{$cats.catsname}><s>></s></a></h3><divclass="sub-item"><h4><ahref="__MODULE__/Goodslist/index/catsid/<{$cats.catsid}>"><{$cats.catsname}></a></h4><divclass="sub-list"><!--遍历子分类--><foreachname="cats['subcat']"item="cat"><ahref="__MODULE__/Goodslist/index/soncatsid/<{$cat.catsid}>/catsname/<{$cat.catsname}>"target="_self"><{$cat.catsname}></a>