第七章点餐系统管理端.pptx

《第七章点餐系统管理端.pptx》由会员分享，可在线阅读，更多相关《第七章点餐系统管理端.pptx（47页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、移动终端软件开发实战李钦李钦深圳信息职业技术学院深圳信息职业技术学院软件学院软件学院科技楼科技楼1703C1703C室室kenneth_lee_kenneth_lee_移动终端软件开发实战第第七七章章 跟我做跟我做在线点餐系统在线点餐系统( (1 1) )管理端开发管理端开发本章大纲本章大纲 7-17-1、设计思路设计思路 7-27-2、文件结构文件结构 7-37-3、开发步骤开发步骤 7-1 7-1 设计思路设计思路 7-1 7-1 设计思路设计思路 本系统分为三大模块：服务端、管理端、客户端。本系统分为三大模块：服务端、管理端、客户端。三个模块之间的关系如图三个模块之间的关系如图7-97-

2、9所示。所示。 管理端直接在服务器上运行，供饭店管理者使用。管理端直接在服务器上运行，供饭店管理者使用。 7-1 7-1 设计思路设计思路 管理端管理端 7-1 7-1 设计思路设计思路 管理端的设计思路可简单描述如下：管理端的设计思路可简单描述如下： 设计管理端主页面设计管理端主页面index.xmlindex.xml，包含菜单管理与订单管理两，包含菜单管理与订单管理两个子页面，使用个子页面，使用csscss与与jsjs技术，为主页面设计样式。技术，为主页面设计样式。 设计菜单管理页面设计菜单管理页面ShowMenu.phpShowMenu.php，负责查询数据库，实现，负责查询数据库，实现

3、菜式查询。包含连个子页面，菜式添加与菜式删除。菜式查询。包含连个子页面，菜式添加与菜式删除。 设计菜式添加页面设计菜式添加页面AddMenu.phpAddMenu.php，负责向数据库中插入数据，负责向数据库中插入数据，实现菜式添加，并通过状态页面实现菜式添加，并通过状态页面AddMenuStatus.phpAddMenuStatus.php显示数显示数据库插入状态。据库插入状态。 设计菜式删除页面设计菜式删除页面DelMenuStatus.phpDelMenuStatus.php，负责删除数据库中，负责删除数据库中的数据，实现菜式删除。的数据，实现菜式删除。 设计订单管理页面设计订单管理页面

4、ShowOrder.phpShowOrder.php，负责查询数据库，显示，负责查询数据库，显示客户提交的订单，并通过结账管理页面客户提交的订单，并通过结账管理页面PayStatus.phpPayStatus.php，对，对订单进行管理。订单进行管理。 7-2 7-2 文件结构文件结构 7-2 7-2 文件结构文件结构 我们把管理端程序放在的系统根目录，如图我们把管理端程序放在的系统根目录，如图8-18-1所示。所示。 三个文件夹中的程序属于服务端，根目录中的程序属于管三个文件夹中的程序属于服务端，根目录中的程序属于管理端。理端。 7-3 7-3 开发步骤开发步骤 7-3 7-3 开发步骤开发

5、步骤 （1 1）主界面设计）主界面设计 管理端界面设计采用管理端界面设计采用DIV+CSSDIV+CSS。在系统根文件夹新建。在系统根文件夹新建index.htmlindex.html，设计效果如图，设计效果如图8-28-2所示。所示。 7-3 7-3 开发步骤开发步骤 代码如下，实现添加两个按钮，分别跳转到订单管理主代码如下，实现添加两个按钮，分别跳转到订单管理主页面页面ShowOrder.phpShowOrder.php和菜单管理主页面和菜单管理主页面ShowMenu.phpShowMenu.php。代码完成后，在浏览器输入代码完成后，在浏览器输入“http:/localhost/Orde

6、r/index.htmlhttp:/localhost/Order/index.html”进行测试。进行测试。 7-3 7-3 开发步骤开发步骤 index.htmlindex.html的样式在的样式在mystyle.cssmystyle.css中设计，代码如下。中设计，代码如下。 7-3 7-3 开发步骤开发步骤 （2 2）菜单管理主页面设计）菜单管理主页面设计 在系统根文件夹新建在系统根文件夹新建ShowMenu.phpShowMenu.php，实现页面如图，实现页面如图8-38-3所示。所示。 7-3 7-3 开发步骤开发步骤 代码如下，用于查询数据库，将数据库中的菜单显示到代码如下，用

7、于查询数据库，将数据库中的菜单显示到页面上，并添加两个按钮：添加菜式和删除菜式，用于页面上，并添加两个按钮：添加菜式和删除菜式，用于跳转到菜式的添加页面跳转到菜式的添加页面AddMenu.phpAddMenu.php与删除页面与删除页面DelMenuStatus.phpDelMenuStatus.php。 页面整体设计采用页面整体设计采用DIV+CSSDIV+CSS，本页面的，本页面的DIVDIV和和CSSCSS写在同个写在同个PHPPHP中。页面使用了中。页面使用了JqueryJquery，为菜单的奇数行、偶数行、，为菜单的奇数行、偶数行、首行设置不同的颜色。使用首行设置不同的颜色。使用Jq

8、ueryJquery，需要到，需要到JqueryJquery官网官网上下载上下载jquery.min.jsjquery.min.js文件，复制到系统根文件架文件，复制到系统根文件架D:xampphtdocsOrderD:xampphtdocsOrder。 7-3 7-3 开发步骤开发步骤 （3 3）菜式添加页面设计）菜式添加页面设计 在系统根文件夹新建在系统根文件夹新建AddMenu.phpAddMenu.php，同样使用，同样使用mystyle.cssmystyle.css实现样式设计。设计效果如图实现样式设计。设计效果如图8-48-4所示所示 7-3 7-3 开发步骤开发步骤 代码如下，实

9、现在表单中进行新菜式信息输入，点击添代码如下，实现在表单中进行新菜式信息输入，点击添加按钮，则跳转到加按钮，则跳转到AddMenuStatus.phpAddMenuStatus.php，通过，通过POSTPOST方式将方式将表单中的信息发送表单中的信息发送AddMenuStatus.phpAddMenuStatus.php。 7-3 7-3 开发步骤开发步骤 （4 4）菜式添加状态页面设计）菜式添加状态页面设计 在根文件夹下新建在根文件夹下新建AddMenuStatus.phpAddMenuStatus.php，代码如下，代码如下，用于将用户在用于将用户在AddMenu.phpAddMenu.

10、php页面中输入的信息插入数据库页面中输入的信息插入数据库，实现菜式的添加，添加成功后，显示成功信息，并在，实现菜式的添加，添加成功后，显示成功信息，并在3 3秒后自动跳转回菜单管理主页面秒后自动跳转回菜单管理主页面ShowMenu.phpShowMenu.php。 7-3 7-3 开发步骤开发步骤 （5 5）菜式删除状态页面设计）菜式删除状态页面设计 在根文件夹下新建在根文件夹下新建DelMenuStatus.phpDelMenuStatus.php，代码如下，代码如下， 用于将用户在用于将用户在AddMenu.phpAddMenu.php页面中选中的菜式从数据库中页面中选中的菜式从数据库中

11、删除，实现菜式的删除，删除，实现菜式的删除， 删除成功后，显示成功信息，并在删除成功后，显示成功信息，并在3 3秒后自动跳转回菜单秒后自动跳转回菜单管理主页面管理主页面ShowMenu.phpShowMenu.php。 7-3 7-3 开发步骤开发步骤 （6 6） 订单管理主页面设计订单管理主页面设计 在系统根文件夹新建在系统根文件夹新建ShowOrder.phpShowOrder.php，实现页面如图，实现页面如图8-58-5所示。所示。 7-3 7-3 开发步骤开发步骤 代码如下，用于查询数据库，将数据库中的订单显示到页代码如下，用于查询数据库，将数据库中的订单显示到页面上，面上， 并添加

12、一个按钮：结账，用于跳转到结账页面并添加一个按钮：结账，用于跳转到结账页面 PayStatus.phpPayStatus.php。 页面整体设计采用页面整体设计采用DIV+CSSDIV+CSS，本页面的，本页面的DIVDIV和和CSSCSS写在同个写在同个PHPPHP中。中。 页面使用了页面使用了JqueryJquery，为菜单的奇数行、偶数行、首行设置，为菜单的奇数行、偶数行、首行设置不同的颜色。不同的颜色。 7-3 7-3 开发步骤开发步骤 （7 7）结账页面设计）结账页面设计 在系统根文件夹新建在系统根文件夹新建PayStatus.phpPayStatus.php，代码如下。用户结，代码如下。用户结账后，删除选中的订单。账后，删除选中的订单。 7-3 7-3 开发步骤开发步骤 （8 8）测试）测试 http:/localhost/order/http:/localhost/order/