第七章点餐系统管理端

移动终端软件开发实战李钦深圳信息职业技术学院软件学院科技楼1703C室[e-mail]移动终端软件开发实战第七章跟我做在线点餐系统(1)管理端开发本章大纲•7-1、设计思路•7-2、文件结构•7-3、开发步骤•7-1设计思路7-1设计思路•本系统分为三大模块：服务端、管理端、客户端。三个模块之间的关系如图7-9所示。•管理端直接在服务器上运行，供饭店管理者使用。7-1设计思路•管理端7-1设计思路•管理端的设计思路可简单描述如下：•设计管理端主页面index.xml，包含菜单管理与订单管理两个子页面，使用css与js技术，为主页面设计样式。•设计菜单管理页面ShowMenu.php，负责查询数据库，实现菜式查询。包含连个子页面，菜式添加与菜式删除。•设计菜式添加页面AddMenu.php，负责向数据库中插入数据，实现菜式添加，并通过状态页面AddMenuStatus.php显示数据库插入状态。•设计菜式删除页面DelMenuStatus.php，负责删除数据库中的数据，实现菜式删除。•设计订单管理页面ShowOrder.php，负责查询数据库，显示客户提交的订单，并通过结账管理页面PayStatus.php，对订单进行管理。•7-2文件结构7-2文件结构•我们把管理端程序放在的系统根目录，如图8-1所示。•三个文件夹中的程序属于服务端，根目录中的程序属于管理端。•7-3开发步骤7-3开发步骤•（1）主界面设计•管理端界面设计采用DIV+CSS。在系统根文件夹新建index.html，设计效果如图8-2所示。7-3开发步骤•代码如下，实现添加两个按钮，分别跳转到订单管理主页面ShowOrder.php和菜单管理主页面ShowMenu.php。代码完成后，在浏览器输入“”进行测试。7-3开发步骤•index.html的样式在mystyle.css中设计，代码如下。7-3开发步骤•（2）菜单管理主页面设计•在系统根文件夹新建ShowMenu.php，实现页面如图8-3所示。7-3开发步骤•代码如下，用于查询数据库，将数据库中的菜单显示到页面上，并添加两个按钮：添加菜式和删除菜式，用于跳转到菜式的添加页面AddMenu.php与删除页面DelMenuStatus.php。•页面整体设计采用DIV+CSS，本页面的DIV和CSS写在同个PHP中。页面使用了Jquery，为菜单的奇数行、偶数行、首行设置不同的颜色。使用Jquery，需要到Jquery官网上下载jquery.min.js文件，复制到系统根文件架D:\xampp\htdocs\Order\。7-3开发步骤•（3）菜式添加页面设计•在系统根文件夹新建AddMenu.php，同样使用mystyle.css实现样式设计。设计效果如图8-4所示7-3开发步骤•代码如下，实现在表单中进行新菜式信息输入，点击添加按钮，则跳转到AddMenuStatus.php，通过POST方式将表单中的信息发送AddMenuStatus.php。7-3开发步骤•（4）菜式添加状态页面设计•在根文件夹下新建AddMenuStatus.php，代码如下，用于将用户在AddMenu.php页面中输入的信息插入数据库，实现菜式的添加，添加成功后，显示成功信息，并在3秒后自动跳转回菜单管理主页面ShowMenu.php。7-3开发步骤•（5）菜式删除状态页面设计•在根文件夹下新建DelMenuStatus.php，代码如下，•用于将用户在AddMenu.php页面中选中的菜式从数据库中删除，实现菜式的删除，•删除成功后，显示成功信息，并在3秒后自动跳转回菜单管理主页面ShowMenu.php。7-3开发步骤•（6）订单管理主页面设计•在系统根文件夹新建ShowOrder.php，实现页面如图8-5所示。7-3开发步骤•代码如下，用于查询数据库，将数据库中的订单显示到页面上，•并添加一个按钮：结账，用于跳转到结账页面PayStatus.php。•页面整体设计采用DIV+CSS，本页面的DIV和CSS写在同个PHP中。•页面使用了Jquery，为菜单的奇数行、偶数行、首行设置不同的颜色。7-3开发步骤•（7）结账页面设计•在系统根文件夹新建PayStatus.php，代码如下。用户结账后，删除选中的订单。7-3开发步骤•（8）测试•