三亚美食网《美食网站》说明书.doc

附录A：2013年度本科生毕业设计说明书三亚美食网作品类别： 程序设计 学 院： 电子信息工程学院 专 业： 数字媒体技术 年 级： 2009 级 主创人员： 导师(职称): 2013年6月琼州学院本科毕业设计说明书目录第一章 立项概况11.1 市场概述11.2 用户需求分析11.3 竞争环境分析11.4 可能的问题21.5 开发需求、人员安排31.6 投资与收益估算3第二章 网站规划与设计说明书42.1战略层的设计42.1.1网站目标42.1.2 用户需求42.2 范围层的设计42.2.1功能规格42.2.2内容需求52.3 结构层设计62.3.1 交互设计62.3.2信息架构72.4 框架层的设计82.4.1界面设计82.4.2 导航设计92.4.3 信息设计92.5 表现层的设计（视觉设计）112.5.1首页112.5.2 美食搜索页面122.5.3对比性和一致性12第三章 技术说明书133.1 系统预览133.2数据库设计173.2.1数据库需求分析173.2.2 数据库的逻辑设计183.3 逻辑结构设计183.4 系统功能代码（主要功能代码）193.4.1 简单搜索193.4.2 高级搜索193.4.3 热门推荐213.4.4 地图定位导航223.5 网站安全性设计223.6 网站优化223.7 数据库管理与维护说明23第四章 结论24第五章 附录25附录1、数据库的逻辑设计25附录2：市场调研问卷及数据汇总26琼州学院本科毕业设计说明书第一章 立项概况1.1 市场概述随着消费者对网络服务需求的不断增长，越来越多的人通过网络寻求帮助。海南除了旅游资源丰富之外，由于当地民族繁多,衍生出许许多多的富有乡间特色的民间美食，既有上得大雅的文昌鸡、和乐蟹、东山羊、加积鸭四大名菜以及猪骨汤，肚包鸡等名菜佳肴，也有脍炙人口的海南粉、抱罗粉、炒粉、肥肠、炒螺等美味小吃。此外，还有很多网友和游客不知道的小糕点，小甜食，如菠萝包，木瓜盅，鸭下巴，干炒鹅，蟹粥等美味。1.2 用户需求分析根据市场调研报告总结得出，在用户群体中本地用户占45%。其中：高校学生及三亚市中学群体占30%，三亚市在职工作人员（喜欢外出品尝美食人群）13%，其他人员占2%，这类为网站的固定长期使用者。外地游客占网站用户的60%，其中主题出游（蜜月，毕业旅行，自驾游，滨海度假等）占其中的40%，其他游客（商务旅游，拓展运动，乡村采风）等旅游用户占15%。其他旅游形式的游客占5%，这两类为网站的短期使用者。同时，由市场调研报告中可以看到，关注此类网站的用户年龄集中在18-28岁之间，大部分用户职业为学生，有78.38%的调研者希望拥有三亚美食地图，64.86%的用户希望能够自主显示周边特色美食；人们期待的网站美食分类方式，依次为商品、位置和店家。同时大多数三亚本地居民也需要这样一份美食网站导航，并且多数人面对这样的网站愿意试用并会积极推荐给周边的朋友。1.3 竞争环境分析目前市场上同类的网站数目并不是很多，下面罗列几个相关网站进行对比。美食达人：美食达人，是一个基于地理位置的美食评价网站，用户可以对各地的“美食”进行评价，其信息包含了地理位置与个人评价、评分，非常直观的表现出大家对于美食的各类想法，并且能够同步到人人网、开心网、新浪微博等社交网站上的软件。 功能特点： 美食：记录美食，记录自己每天生活的点点滴滴 分享：探索美食，在城市中探索新的美食，分享到社交媒体，为朋友推荐新的美食 乐趣：搜集勋章，勋章是你游历城市的小小惊喜优点：具有专业的团队更新美食信息，可以同商家进行协商进行优惠政策。可以请得到美食专家进行点评。缺点： 1）美食主要是一些大饭店的推荐。不具民间特色，美食在人间。 2）网站的普及性都不高，网友响应量都很少 3）推荐的美食没有什么特殊性质 4）美食信息多以图片及文本显示，不像美食地图那样系统。 5）上诉美食网站大多数针对全国，对地方性美食不具透彻，缺少本土信息及本土详 细化描述爱帮生活：爱帮生活，是由爱帮网推出的一款基于LBS位置服务的手机客户端软件，是国内领先的本地生活服务客户端。自动获取位置后，可以用它搜周边、查商户、发评价、看团购，找优惠，提供个性化的周边生活指南，且完全免费。主要功能模块有：附近团购，附近优惠，附近商户信息，公交地图导航，搜索与关注地。1.4 可能的问题1）人力资源配备 项目组指导老师有着丰富的关于设计和开发的经验，组员各自分工，分别负责网站设计和代码实现部分的工作。如果开发出现问题，可以翻阅相关资料或者向老师寻求指导意见。2）人员要求 网站设计人员要根据前期需求分析，从网站的整体的色彩基调，搭配，以及模块的搭配入手，充分考虑用户体验，设计出一个用户体验良好的网站；而代码部分则要求程序员在实现功能的同时，要充分考虑浏览器兼容度，安全性，页面加载速度等因素。如果遇到各自开发的问题，可以查看用户体验元素的书籍或者开会讨论。3）技术特点网站通过Photoshop 进行页面整体效果设计，运用Editplus进行前台页面搭建，通过 IETester测试jQuery相关代码的运行和对浏览器中CSS的兼容性进行调试。后台采用PHP + MYSQL +APACHE的框架，采用模块封装来提高网站的二次开发和可维护性；若在使用中出现bug，可以查看w3school使用手册或者相关文档。4）开发资金开发需要人手一台电脑即可，若需要使用数位板，可以向实验室进行借用。5）工期经过大三的学习积累，在设计和功能实现上已经积累了开发基础；为了避免开发工期的3延误，需要按周制定每天的开发计划，若未及时完成所完成的计划，需要开会去分析存在的问题，并加班进行解决。6）市场宣传前期主要面向校内的师生进行宣传，有良好的地利，人和优势；为了更好的增加宣传效果，可以向社团，学生会寻求合作。1.5 开发需求、人员安排1）网站开发的成员安排薛冰：负责网站的前台页面设计及搭建。赵文俊：负责网站功能的代码实现2）网站开发初期需要的概括描述 页面设计：需要从需求分析入手，根据典型案列进行定下色彩计调，并确立网站的排版设计和模块搭配方案；根据初始的设计稿，按模块进行效果测试。 代码实现：根据需求文档和设计目标，按模块对代码进行测试，制定多种方案，在保证功能实现的同时，从安全性和加载速度等因素，择优选择最优方案。1.6 投资与收益估算投资：开发时期的投资主要是解决开发人员的生活保障，项目正式上线后，则主要为市场推广等费用。收益估算：运营初期，为了保障网站更快的深入市场，免费为商家采集，发布信息，网站的用户也可以免费搜索自己需要的美食信息。在取得一定市场占有率后，再根据具体情况采用增值服务的模式来获得收益。3琼州学院本科毕业设计说明书第二章 网站规划与设计说明书2.1战略层的设计2.1.1网站目标1）时间目标：网站开发及总体搭建时间为3个月。数据调研输入时间为1个月。市场宣传时间为1个月。 2）技术性能目标：完成基本美食地图的搭建，提供搜索，高级搜索，热门推荐，团购信息，地图导航2.1.2 用户需求 网站动态信息根据搜索的结果，选择感兴趣的进行查看微博动态简单搜索按店家/美食用户需求在详细页面查看具体介绍信息查看热门推荐通过地图定位和导航进一步获取店家信息图2-1网站用户需求2.2 范围层的设计2.2.1功能规格 1）输入输出需求要保证输入输出数据类型，及媒体，格式，数值范围，精度等。对网站的数据输出标明控制输出量，作出硬拷贝报告（正常结果输出，状态输出及异常输出）以及图形或显示报告的描述。2）安全性需求分析首先，要有保证网站自身的可靠的系统来提供基本的安全机制，有专门的软件来保护软件和数据不被篡改，破坏和非法复制，系统软件则要使计算机系统逻辑上安全，使系统中信息的存取，处理和传输满足系统安全策略的要求，并使系统能够连续和正常的运行。其次，通过设置检验机制，防止SQL注入,恶意调用等。 3）故障处理需求分析对网站的硬件及软件系统的故障，能够进行及时准确的处理，并对各项性能而言所产生的后果和处理方法进行备忘记录。2.2.2内容需求技术可行性，运行可行性分析，人力分析，项目策划，项目进度策划项目目标设定问卷调查，资料分析。罗列需解决问题本地人员及外地游客对产品兴趣调查项目概念市场需要性调查第三方餐饮店对产品兴趣度调查开发团队整合资料，提供解决方案编写可行性报告图2-2网站内容需求表2-1网站主要内容说明 序号功能模块功能概述1搜 索讲三亚美食按照区域、类型、消费分类，可根据需要进行筛选搜索，搜索出理想的美食。2团 购主要根据店家提供的一些优惠信息，将优惠信息展示出来，供用户选择。3热门推荐根据店家的浏览量，及访客评论排名，将大家口碑较好的店家罗列出来，在人们难以做出选择的时候供大家参考别人的意见。4详细信息进入店铺详细信息，可从中浏览到店家的基本信息，服务，和简介，同时显示地图，可供用户浏览具体位置。5关于我们介绍网站项目及其开发团队。 2.3 结构层设计2.3.1 交互设计网站从名字到具体功能设计都是经过由不同阶层的人经过设想综合而设计的，从系统功能到配色方案，充分体现了交互设计的元态性。以人为本，符合多样人群的使用。网站中使用了焦点图片、回到顶部，延迟加载等JQuery应用，使用户可以在网站中得到更好的用户体验。1） 焦点图片浏览图2-3 焦点图片展示 在此控件中，可以自动转换图片，让用户可以在此看到一些美食图片，正常浏览的时候图片会自动循环播放，如果对某张图片特别感兴趣，可以点击左右按钮切换浏览。2） 回到顶部由于页面信息较多，很多用户在顺着页面浏览过程中想返回页面顶部重新搜索，此时滚动鼠标或拉动滚动条都可以，但却比较麻烦，点击“回到顶部按钮”即可立即回到页面顶端。3） 查看完整地图 图2-4 点击查看完整地图按钮在具体的店家信息中，会同时在页面的右侧显示店家的地理位置，此时店家地图只占279*395px，不是很方便用户查看。若用户想看清楚店家地理位置，只需点击“查看完整地图”按钮，即可在页面中央查看全屏完整地图。2.3.2信息架构项目信息架构采用“从上到下”的瀑布式设计原则。从“软件目标与用户需求的理解”开始直接进行结构设计。从最广泛的，满足决策目标的潜在内容与功能开始进行分类，然后再一句逻辑细分出次级分类。这样的主要分类与次级分类的结构形成空槽，可以将内容和功能将按顺序一一填入。 食物分类信息排列 正餐 便餐 小吃 海鲜 鱼 螺 虾蟹 . . 糕点 下午茶 早茶 烧烤 串烧. . 快餐 面粉 小炒 面包 . . . 湘菜 琼菜 川菜 东北菜 粤菜 . . .菜名 店家 图2-5 分类信息 2.4 框架层的设计2.4.1界面设计1） 首页设计图2-6首页页面展示首页界面设计按上到下的顺序来分别是页头logo，图片展示，分模块介绍，软件下载界面，微博更新和最新动态。正文分为横向三大部分，第一部分为经典美食图片展示，第二部分，将网站主题分为三大部分，分别为特色美食、美食地图和店家优惠。最后一部分，反应了大家在微博中对网站，及其美食的互动，和网站内的最心动带，以及关于我们的信息。2） 分页设计 图2-7分页页面展示 点击首页内链接，会链接到分页面，分页面主要分为导航、分类导航和详细信息列表。在导航页面可以链接到任意想链接的页面，分类导航可以从想搜的种类对美食进行挑选搜索。在下部分美食列表中可以浏览到相应分类的美食。2.4.2 导航设计1） 首页导航 图2-8 首页导航设计 首页中，以这三大模块作为导航信息，可以通过点击进入到相应页面。以黑白色作为主体，发差鲜明。清晰分类，可按照用户需求进行连接。2）分页导航 图2-9分页导航设计 分页导航中可以通过输入想找的信息进行搜索也可以通过导航栏进行链接，以红黄色作为搭配，相互呼应。导航按钮链接搜索框，可以在相应页面下进行搜索。并且以背景为红色，作为对当前页面的提示。2.4.3 信息设计1）用户注册信息 个人信息 用户名 密码 邮箱 联系方式 电话 其他联系方式 E-mail地址 2）指示标识 在页面中，由于信息浏览量较大，可能浏览滚动到页面底端想回到顶端重新搜索，只需点击按钮，即可回到顶部，重新进行搜索。图2-10 回到顶部指示标识 3）框线图 图 2-11 首页框线图 图 2-12 框线图2.5 表现层的设计（视觉设计）2.5.1首页 图 2-13 首页页面展示首页视觉设计给用户带来视觉享受：版面清晰明了，所传达信息量不是很大，却能让人一目了然额，进入网站即可了解到网站的功能及所体能提供的信息。首页中并没有罗列过多的美食信息，其中页面前部分引用美食图片来使人们更加了解本网站，在中间导航部分设置链接，可以进一步了解网站具体信息。在页面底部，使用微博互动的方式让人们更加了解本网站，及三亚美食。背景色，网站整体背景使用黑色，黑色背景白色字体，给人以强烈的视觉冲击，让人有继续看下去和再次浏览的欲望。而黑白色虽然是相反色，但这种经典搭配经久不衰，一直吸引着用户的眼球。2.5.2 美食搜索页面图 2-14 美食搜索页美食搜索页面与首页有较大反差，主要以红白搭配为主色调，由于在此页面进行详细的美食信息罗列，用黑色会给人以压抑的感觉，反而红色鲜明明快，给人以欢快，兴奋的感觉，此颜色搭配可以使读者以轻松愉悦的心情浏览详细的美食信息。2.5.3对比性和一致性网站首页使用黑白对比，使人形成强烈的视觉误差，吸引用户。而美食搜索页以明快的红白色作为搭配，给读者以愉悦的心情对网站内的三亚美食进行浏览和了解。虽然首页和分页面看起来颜色搭配不和，但在首页的视觉冲击下浏览二级页面使人有眼前一亮的感觉，既显示出不同，又不会显得太过杂乱。33第三章 技术说明书3.1 系统预览图 3-1首页 图 3-2搜索页 图 3-3团购页 图 3-4热门推荐 图 3-5关于我们 图 3-6 店家信息页图 3-7注册登录页 图 3-8管理员后台图 3-9管理员添加信息页面图 3-10个人信息页 图 3-11搜索统计排行 3.2数据库设计3.2.1数据库需求分析美食表用于存放所有店家的美食信息；店家表用于存放所有店家的店家信息；分类表用于存放所有美食的分类信息；评论表用于存放所有用户的评论信息；用户表用于存放所有用户的注册信息；美食表：（ID，菜名，菜价，菜馆ID，类别，简介，评分，图片地址）商家表：（ID,商家名，特色介绍，地域，地址，电话，人均消费，总评分，服务，环境，好吃度，店家图片）一级分类：（ID，类名）二级分类：（ID，类名，一级ID）美食评论:(ID,评论人，内容，时间，美食ID）店家评论（ID,评论人，内容，时间，店家ID） 注：红色字体为主键，蓝色字体为外键 3.2.2 数据库的逻辑设计详见附录13.2.3 存储过程设计 封装在include文件夹下的mysql.inc.php文件中 3.3 逻辑结构设计注册 主页登陆 动态信息热门推荐搜索微博新闻列表模式关于我们团购信息详细页面查看地图点击查看详细信息查看优惠查看店家信息 图 3-12 逻辑结构3.4 系统功能代码（主要功能代码）3.4.1 简单搜索 菜名 商家 菜名 3.4.2 高级搜索 $jdcz=$_GETjdcz; $name=$_GETname; $place=$_GETplace; $price = $_GETprice; $type = $_GETtype; if($jdcz!=) /简单搜索，直接搜索名字 $sqlinfo = SELECT s.s_id , g.g_id , g.g_name ,s.s_name ,s.s_address,g.g_image , s.jd , s.wd , s.s_place , s.s_tel , s.avecost FROM goods as g JOIN shop as s ON s.s_id = g.s_id WHERE g_name like %.$name.% | s_name like %.$name.% ; else /高级搜索，根据传入的多选表单进行选择 $sqlinfo = SELECT s.s_id , g.g_id , g.g_name ,s.s_name ,s.s_address,g.g_image, s.jd , s.wd , s.s_place , s.s_tel , s.avecost FROM goods as g,shop as s WHERE g.s_id = s.s_id ; if($price != & $price != 0) / by price if($price = 1) $sqlinfo = $sqlinfo.AND s.avecost = 50; else if($price = 2) $sqlinfo = $sqlinfo.AND 50= s.avecost AND s.avecost= 100; if($type != & $type != 0) / by type $sqlinfo = $sqlinfo.AND g.g_typeid = .$type.; if($place != & $place != 0) / by place if($place = 1) $pp = 三亚湾区; else if($place = 2) $pp = 大东海区; else if($place = 3) $pp = 三亚市河西区; else if($place = 4) $pp = 三亚市河东区; $pp = 大东海区; else if($place = 3) $pp = 三亚市河西区; else if($place = 4) $pp = 三亚市河东区; $sqlinfo = $sqlinfo.AND s.s_place = .$pp.; /分页模块 global $_pagesize,$_pagenum,$_system, $_num; /globla $url = price=.$price.&place=.$place.&type=.$type; 传入一个url，关于条件 _page($sqlinfo,6); /第一个参数获取总条数，第二个参数，指定每页多少条 $sqlinfo = $sqlinfo. limit $_pagenum,$_pagesize; 3.4.3 热门推荐/* hojia map 2.0* =* Copy 2013.2.5* Web: * =* Author: zwj* Date: 2013-2-05*/session_start();/定义个常量，用来授权调用includes里面的文件define(IN_TG,true);/定义个常量，用来指定本页的内容define(SCRIPT,rec);/引入公共文件require dirname(_FILE_)./includes/common.inc.php;? ?php A href=new-lookinfo.php?id= target=_blankIMG src= A href=new-lookinfo.php?id= target=_blankDD ?php /_free_result($info1);/_pageing函数调用分页，1|2，1表示数字分页，2表示文本分页_paging(2);3.4.4 地图定位导航 /默认红色标注 var map = new BMap.Map(container); map.centerAndZoom(new BMap.Point(jd?, wd?), 15); map.addControl(new BMap.NavigationControl(); var marker = new BMap.Marker(new BMap.Point(jd?, wd?); / 创建标注 map.addOverlay(marker); / 将标注添加到地图中 var opts = width : 70, / 信息窗口宽度 height: 50, / 信息窗口高度 title : s_name? / 信息窗口标题 var infoWindow = new BMap.InfoWindow(s_address?, opts); marker.addEventListener(click, function() this.openInfoWindow(infoWindow); ); 3.5 网站安全性设计1.由于网站设计中将各个模块封装分别储存，按需调用。为了避免不良用户非法调用，在调用者和被调用者间通过设置布尔类型变量进行检验，若为空，则显示非法调用，不返回任何结果。2. 将页面传值中获得的值，在使用前进行判断和检验，尽量避免不法用户的SQL注入。3.6 网站优化1. 为了提高网站的二次开发和可维护性，将网站中的CSS，JS，调用的函数，组件，按照通用和差异分别封装存放，从而形成在引用公共模块的基础上，各自调用所需的函数块。2. 为了提高用户的交互体验，将图片的加载改为延时加载，从而在及保障图片效果加载的同时，尽最大可能提高网页加载速度。3. 在详细页面实现地图定位导航的同时，为了方便用户查看，假如查看全部地图模块，满足用户不同需求。4. 优化简单搜索的分类，实现搜索对象 - 美食和店家的切换。3.7 数据库管理与维护说明数据库维护用管理采用phpmyadmin视窗管理，采用定期备份，备份时采用文档备份和sql文件备份两种模式；通过设置权限只有最高权限的管理员才可以修改和删除数据。第四章 结论本文主要针对三亚美食网站前台页面的设计与实现进行阐述，页面整体布局应用Dreamweaver软件，通过DIV+CSS进行页面搭建，通过对用户需求的了解，设置分页面所要加载的信息，做到使用户进入网站可以一目了然，随时了解自己需要的信息。同时应用jQuery技术，实现页面的特效及其交互设计，更加方便了用户对网站信息的了解，增加网站和用户之间的互动。三亚美食网站后台功能的设计与实现进行阐述，整体架构采用PHP + MYSQL + APACHE，通过DIV+CSS进行页面搭建，通过对用户需求的了解，设置分页面所要加载的信息，做到使用户进入网站可以一目了然，随时了解自己需要的信息。同时应用Ajax技术，通过PHP和javascript实现底层代码。网站综合运用HTML+jQuery技术，以网络美食浏览为核心，实现了企业宣传、用户搜索查询等功能，用尽可能先进的理念去规范维护体系内所有资源的管理，以实现信息资源的合理调配，分工明确，管理有条不紊，达到最大限度地、最高效率的经营的目的。软件设计以经营管理为核心，以数据或信息为主导，在充分考虑到信息或数据的正确性与可靠性的前提下来实现网站的最终目标需求。 网站，以网络美食浏览为核心，实现了企业宣传、用户搜索查询等功能，用尽可能先进的理念去规范维护体系内所有资源的管理，以实现信息资源的合理调配，分工明确，管理有条不紊，达到最大限度地、最高效率的经营的目的。软件设计以经营管理为核心，以数据或信息为主导，在充分考虑到信息或数据的正确性与可靠性的前提下来实现网站的最终目标需求。第五章 附录附录1、数据库的逻辑设计评分菜馆ID简介大众评分人均消费评论人菜名ID好吃度评论内容地址类别 评论表图片特色菜环境商家名图文链接ID包含类名包含 美食包含商家ID包含电话评论时间地域包含 一级分类包含 评论表美食ID类名评论时间评论内容 二级分类 商家表服务ID一级分类IDID1 n 1 n 1 n 1 1 n n 1 n 图 5-1 逻辑设计附录2：市场调研问卷及数据汇总三亚美食搜索网站可用性和用户研究您好，感谢在百忙中填写本份问卷。为体现动态海南，旅游海南的特色。紧跟国际旅游岛发展步伐。抓住国际旅游岛的发展和机遇。宣传普及三亚美食，及三亚民间特色。该问卷