4 系统详细设计与实现
基于HTML5的肇庆旅游网站的详细设计与实现主要是根据前面的基于HTML5的肇庆旅游网站的需求分析和基于HTML5的肇庆旅游网站的总体设计来设计页面并实现业务逻辑。主要从基于HTML5的肇庆旅游网站界面实现、业务逻辑实现这两部分进行介绍。
4.1游客用户功能模块
系统首页以上中下的布局进行展示，正上方是系统的导航栏，中间是轮播图，下面是旅游公告、景点信息推荐等信息。其界面展示如下图4-1所示。
图4-1 前台首页界面图
用户点击首页右上角“注册”进入注册页面填写账号、密码、确认密码、昵称、邮箱、身份等信息后点击“注册”按钮，系统会对输入的信息进行验证，验证通过后即可完成注册。其界面展示如下图4-2所示。
图4-2用户注册界面图
注册代码如下：
public function register()
{
if (Request::isPost()) {
$request = Request::param();
$request['create_time'] = isset($request['create_time']) ? $request['create_time'] : date('Y-m-d H:i:s');
$request['update_time'] = isset($request['update_time']) ? $request['update_time'] : date('Y-m-d H:i:s');
$result = $this->validate($request, $this->validate);
if (true !== $result) {
$data['error'] = 30000;
$data['message'] = $result;
} else {
$request['password'] = md5($request['password']);
$result = $this->model->register($request, $this->table);
$data = $result;
}
} else {
$data['error'] = 30000;
$data['message'] = "field的值不能为空！";
}
return json_encode($data);
}
public function register($request=[],$table_name = ''){
$username = $request['username'];
$bol = $this->where(['username'=>$username])->find();
if (!$bol){
$result = self::allowField(true)->save($request);
if ($result) {
return ['result' => 1];
} else {
return ['error' => ['code' => 3000, 'message' => '注册失败']];
}
}else{
return ['error' => ['code' => 3000, 'message' => '注册失败,账号已存在']];
}
}
用户注册后可以通过自己的账户名和密码进行登录。用户点击首页右上角的“登录”进入输入完整的自己的账户名和密码信息并点击“登录”按钮后，系统会对输入的信息进行验证，验证通过后即可完成登录，其界面如下图4-3所示。
图4-3用户登录界面图
登录代码如下：
public function login()
{
if (Request::isPost()) {
$request = Request::param();
$result = $this->validate($request, $this->validate);
if (true !== $result) {
$data['error'] = 30000;
$data['message'] = $result;
} else {
$request['password'] = md5($request['password']);
$result = $this->model->login($request, $this->table);
$data = $result;
}
} else {
$data['error'] = 30000;
$data['message'] = "field的值不能为空！";
}
return json_encode($data);
}
public function login($request=[],$table_name = ''){
$username = $request['username'];
$password = $request['password'];
$bol = $this->where(['username'=>$username])->find();
if ($bol){
$password = md5($password);
if ($request['password']==$bol['password']) {
//添加token信息
$access_token['create_time'] = date('Y-m-d H:i:s');
$access_token['update_time'] = date('Y-m-d H:i:s');
$access_token['info'] = json_encode($bol);
// $access_token['info'] = $bol;
$access_token['token'] = md5(date('Y-m-d H:i:s'));
$bol_token = Db::name('AccessToken')->insert($access_token);
if ($bol_token){
$data['obj'] = $bol;
$data['obj']['token'] = $access_token['token'];
return ['result' => $data];
}else{
return ['error' => ['code' => 5000, 'message' => '登录失败,token生成失败']];
}
} else {
return ['error' => ['code' => 5000, 'message' => '登录失败,密码不正确']];
}
}else{
return ['error' => ['code' => 5000, 'message' => '登录失败,账号不存在']];
}
}
用户点击导航栏的“旅游公告”进入页面可以查看系统发布的网站公告、关于我们、联系方式、网站介绍信息。点击网站公告进入页面可以查看该公告的详细信息。其界面展示如下图4-4所示。
图4-4旅游公告界面图
用户可以查看新景点信息列表中某一景点的详细信息并可以进行点赞、收藏和发表评论操作；点击详情下方的“下单订票”进入页面填写购买数量等信息后点击“提交”即可完成景点门票的购买。其界面如下图4-5所示。
图4-5 景点信息界面图
用户可以查看旅游路线列表中某一路线的详细信息并可以进行收藏，支持通过关关键字进行搜查查询旅游路线信息。其界面如下图4-6所示。
图4-6 旅游路线界面图
用户可以查看酒店客房列表中某一酒店客房的详细信息并可以进行点赞、收藏和发表评论操作；点击详情下方的“下单预定”进入页面输入订房数量、入住天数等信息后点击“提交”即可完成客房预定。其界面如下图4-7所示。
图4-7 酒店客房界面图
用户点击我的头像下方的“个人中心”进入页面可以查看和管理个人中心中的个人首页、订票信息、客房预定、退房信息和收藏信息。点击“订票信息/客房预定”进入页面可以查看列表中某一订单的详情并完成在线支付，可以对订票信息/客房预定信息进行查询和重置操作；可以查看或删除收藏列表信息。其界面如下图4-8所示。
图4-8 个人中心界面图
4.2管理员功能模块
管理员可以查看轮播图列表中某一轮播的详情，可以对轮播图信息进行查询、重置、新增和删除操作；可以查看旅游公告列表中某一公告信息的详情，可以对旅游公告信息进行查询、重置、新增和删除操作。其界面如下图4-9所示。
图4-9公共管理界面图
新增的代码如下：
public function add()
{
if (Request::isPost()) {
$request = Request::param();
$request['create_time'] = isset($request['create_time']) ? $request['create_time'] : date('Y-m-d H:i:s');
$request['update_time'] = isset($request['update_time']) ? $request['update_time'] : date('Y-m-d H:i:s');
$result = $this->validate($request, $this->validate);
if (true !== $result) {
// 验证失败 输出错误信息
$data['error'] = 30000;
$data['message'] = $result;
} else {
if($this->table == 'user'){
$request['password'] = md5($request['password']);
}
$res = $this->add_before($request, $this->table, $this->table_id);
if($res['code'] == 200){
$result = $this->model->add($request, $this->table, $this->table_id);
$this->add_after($this->table);
$data = $result;
}else{
$data['error'] = $res;
}
}
} else {
$data['error']['code'] = 30000;
$data['error']['message'] = "field的值不能为空！";
}
return json_encode($data);
}
删除的代码如下：
public function del()
{
$request = Request::param();
$result = $this->model->del_data($request, $this->table, $this->table_id);
$data = $result;
return json_encode($data);
}
管理员可以查看系统用户（管理员、旅游用户）列表中某一用户的详情，可以对系统用户信息进行查询、重置、新增和删除操作。其界面如下图4-10所示。
图4-10用户管理界面图
管理员可以查看景点信息列表中某一景点的详情和评论信息，可以对景点信息进行查询、重置、新增和删除操作；点击列表上方的“新增”进入页面填写景点类型、景点位置等信息后点击“提交”即可完成景点信息的添加。其界面如下图4-11所示。
图4-11景点信息界面图
图片上传的代码如下：
public function upload()
{
$month = date('Ym', time());
$data = 'file';
$path = 'upload/file/' . $month . "/";//上传文件保存位置
$allow_ext = explode(",", "jpg,jpeg,png,jfif,bmp,gif,ico,xls,xlsx,AVI,mov,rmvb,rm,FLV,mp4,3GP");
if ($_FILES) {
$file = $_FILES[$data];
$rst = [];
if (!empty($file['name'])) {
$file_type = explode('.', $file['name']);
$ext = end($file_type); //获取文件的格式
$ext = strtolower($ext);
if (!in_array($ext, $allow_ext)) {
$rst['error']['code'] = 30000;
$rst['message'] = '只能上传jpg,jpeg,png,jfif,bmp,gif,ico,xls,xlsx,AVI,mov,rmvb,rm,FLV,mp4,3GP类型文件';
} else {
if (!is_dir($path))
{
mkdir($path, 0777, true);
};
$name = date('YmdHis') . '_' . rand(10000, 99999) . '.' . $ext;
$save_rst = move_uploaded_file($file['tmp_name'], $path . $name);
if ($save_rst !== false) {
$rst['result']['url'] = 'http://'.$_SERVER['HTTP_HOST'].'/'.$path . $name;
} else {
$rst['error']['code'] = 30000;
$rst['error']['message'] = '文件上传失败';
}
}
} else {
$rst['error']['code'] = 30000;
$rst['error']['message'] = '未选择文件';
}
} else {
$rst['error']['code'] = 30000;
$rst['error']['message'] = '未获取到文件';
}
return json_encode($rst);
}
管理员可以查看旅游路线列表中某一路线的详情和评论信息，可以对旅游路线信息进行查询、重置、新增和删除操作；点击列表上方的“新增”进入页面填写路线类型、途径位置等信息后点击“提交”即可完成旅游路线信息的添加。其界面如下图4-12所示。
图4-12旅游路线界面图
管理员可以查看酒店客房列表中某一客房的详情和评论信息，可以对酒店客房信息进行查询、重置、新增和删除操作；点击点击列表上方的“新增”进入页面填写酒店名称、客房名称等信息后点击“提交”即可完成酒店客房信息的添加。其界面如下图4-13所示。
图4-13酒店客房界面图
管理员可以查看房间类型列表中某一类型的详情，可以对房间类型信息进行查询、重置、新增和删除操作；点击点击列表上方的“新增”进入页面房间类型信息后点击“提交”即可完成房间类型的添加。其界面如下图4-14所示。
图4-14房间类型界面图
管理员可以查看客房预定列表中某一订单的客房预定的详情，点击“退房”输入退房日期等信息后点击“提交即可完成该订单的退房；可以对客房预定信息进行查询、重置、新增和删除操作。其界面如下图4-15所示。
图4-5客房预定界面图
5系统测试
5.1 系统测试目的
无论什么样的系统，测试都至关重要，通过测试可以检查出潜藏的缺陷，从而确保系统的性能和稳定性，避免Bug的出现，并确保系统的功能和性价比达到预期的要求。
5.2系统测试用例
系统测试包括：用户登录功能测试、旅游公告查看功能、轮播图信息添加功能、密码修改功能测试，如表5-1、5-2、5-3、5-4所示：
表5-1 用户登录功能测试表
| 用例名称 | 用户登录系统 |
| 目的 | 测试用户通过正确的用户名和密码可否登录功能 |
| 前提 | 未登录的情况下 |
| 测试流程 | 1) 进入登录页面 2) 输入正确的用户名和密码 |
| 预期结果 | 用户名和密码正确的时候，跳转到登录成功界面，反之则显示错误信息，提示重新输入 |
| 实际结果 | 实际结果与预期结果一致 |
旅游公告查看功能测试：
表5-2 旅游公告查看功能测试表
| 用例名称 | 旅游公告查看 |
| 目的 | 测试旅游公告查看功能 |
| 前提 | 旅游用户登录 |
| 测试流程 | 点击旅游公告 |
| 预期结果 | 可以查看到所有旅游公告信息 |
| 实际结果 | 实际结果与预期结果一致 |
轮播图信息添加界面测试：
表5-3 轮播图信息添加界面测试表
| 用例名称 | 轮播图信息新增测试用例 |
| 目的 | 测试轮播图信息新增功能 |
| 前提 | 管理员用户正常登录情况下 |
| 测试流程 | 1）管理员点击公共管理下方的轮播图，然后点击添加进入新增页面填写信息。 2）填写完毕后点击提交。 |
| 预期结果 | 提交以后，页面首页会显示新的轮播图信息 |
| 实际结果 | 实际结果与预期结果一致 |
密码修改功能测试：
表5-4 密码修改功能测试表
| 用例名称 | 密码修改测试用例 |
| 目的 | 测试管理员密码修改功能 |
| 前提 | 管理员用户正常登录情况下 |
| 测试流程 | 1）管理员点击“修改密码”进入页面填写修改信息。 2）修改后点击“确认修改”。 |
| 预期结果 | 可以使用新的密码登录系统 |
| 实际结果 | 实际结果与预期结果一致 |
5.3 系统测试结果
通过编写基于HTML5的肇庆旅游网站的测试用例，已经检测完毕用户登录功能测试、旅游公告查看功能、轮播图信息添加功能、密码修改功能测试，通过这四大模块的测试为基于HTML5的肇庆旅游网站的后期推广运营提供了强力的技术支撑。
搜索推广是什么意思谷歌google官网入口武汉网页设计培训机构网建什么意思天津制作网站公司推荐青岛高级网站建设价格css选择器中国企业网官方网站查询深圳网站设计首选灵点网络靠谱安庆网站设计app制作价格新生活cms安卓系统下载书签制作方法网络设计方案书中内容很多网页空间是什么意思网络营销与网站推广的怎么查询域名备案信息女生学网络工程难吗外贸网站建设公司 迅当网企业seo排名哪家好网站app免费制作软件网线制作机网络维护与管理财务公司网站模板百度商城购物单个药品营销策划方案深圳公司注册核名官网暖暖大全免费版全免费观看bd竞彩足球最新比赛软件开发工程师报考条件软件开发工具的主要的分类方法