口罩预约管理系统——系统网站实现(前端+PHP+MySQL)

口罩预约管理系统网站实现

一、前言

二、系统登陆逻辑及界面实现

三、用户模块

1、用户预约系统界面

2、用户查看我的订单界面

3、用户修改预约信息

四、管理员模块

1、管理员登陆界面

 2、查看用户预约订单

3、修改/删除用户信息

五、快递员模块

1、快递员登录配送系统

2、接单

3、关单

六、系统实现总结

1、安全性

2、用户预约时间

3、前后端与数据库交互


口罩预约管理系统网站实现

一、前言

在上一篇《口罩预约管理系统——数据库设计(前端+PHP+MySQL)》,基本上完成口罩预约管理系统的数据库设计,而这个项目的目标是实现一个相对完整、功能齐全的模拟口罩预约管理系统,所以这一篇将完成接下来的工作——系统网站前端(HTML+CSS+Javascript)和后端(PHP),以及实现前后端与MySQL数据库的交互,实现功能简要描述如下:

  • 用户模块:创建账号,登录系统预约口罩确认提交,查看订单状态修改订单预约信息,修改个人注册信息。
  • 市政人员(管理员)模块:查询已注册用户信息修改或删除用户信息,审核订单以及分配快递员。管理每种类型口罩,查询库存数量,合理分配用户预约的口罩数量,按需求查看订单的配送状态,方便做数据分析。
  • 快递员模块:查看分配到的订单,选择接单配送,完成配送选择关单按订单状态查看订单,统计完成的订单数量。

二、系统登陆逻辑及界面实现

系统登录页面对系统进行安全性管理,三种角色的账号和密码分别保存在 admin,users,deliver 表中,根据不同的登录用户,设计不同的权限,从而进入不同的模块,登录模块流程图 :

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第1张图片

系统界面使用简单的登录页面:

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第2张图片

输入框和用户类型框以及登录按钮,登录页面后端使用 login_check.php 来处理用户请求信息,并返回结果。前端、后端和数据库之间交互,检索登录身份,如果有账号记录,则登录成功,否则登录失败。
整个系统实现使用的技术包括 HTML5、CSS3、Javascript、PHP 和 MySQL 数据库。运用并结合这些技术使系统呈现友好的操作页面和系统功能的引导。下面将介绍各个功能页面及关键代码。

三、用户模块

1、用户预约系统界面

使用到的前端元素包括输入框、下拉框、日期选择框、文本区域和Button按钮,详见代码实现:

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第3张图片

前端页面代码:






	
	口罩预约系统
	
	



	
	

口罩预约系统

姓名
身份证号
联系方式
口罩类型
预约个数
期望到货日期
详细地址

 可见HTML头部加入了session机制,防止未登录造成非法访问。然后从数据库中查询表记录,匹配用户登陆信息。

后端代码实现:

reserveorder.php 对用户提交的表单进行处理,用户 3 天之内只能预约一次,否则系统会将判定结果告诉用户,通过获取当前时间戳进行比较实现,这个功能看似简单,在具体实现的时候遇到一些小问题,比如从数据库的表中查询获取时间的数据类型与当前获取的时间如何进行比较。所以需要进行时间格式的设定。具体见代码部分:

//reserveorder.php
";
	echo "alert('预约失败,用户3天内已预约!');";
	echo "window.location.href='user.php';";
	echo "";
}

else {

	/*订单表*/
	$q = "select * from info"; // where user_id='$userid'";
	$r = mysqli_query( $link, $q );
	$arrary = mysqli_fetch_array( $r );
	$row_num = mysqli_num_rows( $r );
	$order_id = 100001 + $row_num;
	$statue = "已预约";


	$insert_order = "insert into info values('" . $order_id . "','" . $userid . "','" . $name . "','" . $type . "','0','" . $phone . "','" . $address . "','" . $statue . "',now()" . ")";

	$result = mysqli_query( $link, $insert_order )or die( "订单生成插入记录失败:" . mysqli_error() );

	$query = "insert into reserve(user_id,phone,ID,mask_type,r_num,ex_date,address,re_date) value('" . $userid . "','" . $phone . "','" . $ID . "','" . $type . "','" . $num . "','" . $date . "','" . $address . "',now()" . ")";

	$result = mysqli_query( $link, $query )or die( "预约记录失败:" . mysqli_error() );


	echo "";
}
mysqli_free_result( $result );
mysqli_close( $link );
?>

 PHP后端主要的处理任务就是查询数据表数据,对表进行插入、更新和删除操作,以及实现简单的JS弹窗功能。

功能展示:

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第4张图片

2、用户查看我的订单界面

由上一步预约成功之后会直接跳转我的订单界面,如下:

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第5张图片

这部分前端实现简单,只需一个页面处理,前后端结合,将查询记录返回前端表单即可。






	
	我的订单





	

我的订单

"; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; } ?>
订单号 预约人姓名 口罩类型 分配数量 预约数量 电话 地址 订单状态 预约日期 期望到货日期 修改
" . $arr[ 'order_id' ] . "" . $arr[ 'user_name' ] . "" . $arr[ 'mask_type' ] . "" . $arr['allocate_num'] ."" . $arr['r_num'] ."" . $arr[ 'phone' ] . "" . $arr[ 'address' ] . "" . $arr['statue'] ."" . $arr['re_date'] ."" . $arr['ex_date'] ."修改

3、用户修改预约信息

这部分继承预约页面的功能,稍微进行修改,实现功能主要是:类似网上购物,下单后只能修改手机号和收货地址而其他信息设置为只读状态。

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第6张图片

代码实现:


";
	echo "alert('订单已受理,无法修改!');";
	echo "window.location.href='myorder.php';";
	echo "";
}
//如果用户预约了多个订单,通过自然连接,选择当前指定的订单号
$query = "select * from (users natural join reserve)natural join info where users.user_id='$id' and users.user_id=reserve.user_id and reserve.user_id=info.user_id  and info.order_id='$orderid'";

$result = mysqli_query( $link, $query );
$arr = mysqli_fetch_array( $result );
?>



	
	修改订单信息
	
	



	
		

修改订单信息

姓名
身份证号
联系方式
口罩类型
预约个数
期望到货日期
详细地址

四、管理员模块

系统实现基本功能,对于页面布局未设计得很精美,所以接下来的管理员界面就是这样 V●ᴥ●V

首页包括修改和删除用户的功能。

1、管理员登陆界面

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第7张图片

这里展示后端处理,前端部分比较容易实现。这里展示一个比较特别的功能,运用SQL语言实现模糊查询,演示如下:

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第8张图片






	
	
	管理员
	
	



	

管理员登录界面

"; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; echo ""; } ?>
账号 密码 姓名 身份证号 注册时间 修改
" . $arr[ 'user_id' ] . "" . $arr[ 'pwd' ] . "" . $arr[ 'user_name' ] . "" . $arr[ 'ID' ] . "" . $arr[ 'date' ] . "修改/删除

口罩信息表

"; echo ""; echo ""; echo ""; echo ""; echo ""; } ?>
口罩类型 仓库 剩余数量 单位价格
" . $maskarr[ 'mask_type' ] . "" . $maskarr[ 'store' ] . "" . $maskarr[ 'remain_num' ] . "" . $maskarr[ 'price' ] . "

 2、查看用户预约订单

细心的朋友可以看到管理员界面右上角有审核订单的按钮,这里就是查看用户预约订单的入口,进去后看到是这样的。

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第9张图片

后端实现从数据库查询数据返回前端,另外,注意重要的一点,管理员只能审核已预约的订单,防止误操作多次审核订单,对之进行分配,所以后端需要做一点限制以及错误操作提醒。

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第10张图片

后端实现具体代码:

";
	echo "alert('该订单已经审核过!');";
	echo "window.location.href='adm_order.php';";
	echo "";
}
//如果用户预约了多个订单,通过自然连接,选择当前指定的订单号以及用户信息进行处理
$query = "select * from (users natural join reserve)natural join info where users.user_id=reserve.user_id and reserve.user_id=info.user_id  and info.order_id='$order_id'";

$result = mysqli_query( $link, $query ) or die("出错啦!");
$arr = mysqli_fetch_array( $result );
$address = $arr['address'];

$de = "select * from delivers";
$de_re=mysqli_query($link,$de);

?>

 合法的审核订单则进入界面如下,管理员可操作订单信息只包括分配口罩数量、分配快递员,其他为只读状态,这样保证用户预约信息的正确性,防止管理员修改用户信息。

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第11张图片

3、修改/删除用户信息

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第12张图片

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第13张图片







修改用户信息

修改用户信息

五、快递员模块

1、快递员登录配送系统

快递员可以根据订单状态查询自己的订单

口罩预约管理系统——系统网站实现(前端+PHP+MySQL)_第14张图片

 使用视图从订单表中提取部分信息满足配送要求,保证用户信息安全,前端页面迭代之前,方法类似。

页面表单处理,使用之前建立的视图:

					";
						echo "" . $arr[ 'order_id' ] . "";
						echo "" . $arr[ 'mask_type' ] . "";
						echo "" . $arr[ 'allocate_num' ] . "";
						echo "" . $arr[ 'phone' ] . "";
						echo "" . $arr[ 'address' ] . "";
						echo "" . $arr[ 'statue' ] . "";
						echo "" . $arr[ 're_date' ] . "";
						echo "" . $arr_take[ 'take_date' ] . "";
						echo "" . $arr_take[ 'finish_date' ] . "";
						echo "接单/关单";
						echo "";
						
					}
					?>

2、接单

快递员只能接收已分配状态的订单,在代码中体现,使用判断语句判断所选订单的状态,并返回相应的提示。 

";
	echo "alert('已经接过此订单,请勿重复操作!');";
	echo "window.location.href='deliver.php';";
	echo "";	
}

else{
	
	//将配送员信息插入接关单表
	$in_take = "insert into take values('".$deliverid."','".$orderid."','".$arr_de['deliver_name']."',now(),null)";
	mysqli_query($link,$in_take) or die("接单失败".mysqli_error());
	//更新订单表中的状态信息,只能接已分配的订单
	$de_or_st="update info set statue='已接单' where order_id='$orderid'";
	mysqli_query($link,$de_or_st) or die("接单失败".mysqli_error());

	echo "";
}


mysqli_free_result($de_info);
mysqli_close($link);
?>

3、关单

快递员只能关闭已接单状态的订单,表示完成配送,与接单的逻辑同理。

";
	echo "alert('未接该订单,无法关单!');";
	echo "window.location.href='deliver.php';";
	echo "";
}
elseif($jie_arr['statue']=='已关单'){
	echo "";
}
else{
	//更新接关单表,关单状态
	//关单时间
	$up_time = "update take set finish_date=now() where order_id='$orderid'";

	mysqli_query($link,$up_time) or die("关单时间错误".mysqli_error());
	
	$de_or_st="update info set statue='已关单' where order_id='$orderid' and statue='已接单'";
	mysqli_query($link,$de_or_st) or die("关单失败".mysqli_error());

	echo "";
}
mysqli_free_result($jie_re);
mysqli_close($link);
?>

六、系统实现总结

1、安全性

在系统完成进入调试阶段的时候,发现页面在没有登录的情况下,可以直接访问,所以需要在每个页面的头部加一个验证标志,一旦发现没有登录后的 session,直接跳到登录页面,要求用户输入账号和密码登录。具体实现是这样的:

另外,在快递员登录系统查看已经分配到自己的订单,为了用户信息的安全性,对订单数据表建立了视图,保留快递员配送过程需要的用户信息。 

2、用户预约时间

用户预约的操作,为了将具体时间保存到预约订单数据表,供后台管理员查看用户预约信息,这里我遇到了一个问题,如何获取当前时间插入到数据库中,后来使用了 mysql 数据库的系统函数 now(),获取当前时间戳来实现。

3、前后端与数据库交互

这一次数据库应用系统设计中,遇到另一个难点是:如何处理前端表单返回的数据,并且与 mysql 数据库交互。我用到了后端开发的 php 连接数据库,对前端表单返回数据进行处理,通过 sql 语言对数据库进行一系列操作(查询、修改、插入、删除),这个阶段花费的时间相对比较长,前期我实现基本功能的交互,后期在交互过程中发现一些细节问题,比如用户只能在订单为被管理员处理时候修改预约信息管理员不能重复审核订单快递员只能关闭已接单状态的订单不能重复接单关单等细节问题,我在测试系统功能的这个过程不断思考这些细节问题,保证系统具备最基本和最合理的功能和需求,这也让我认识到数据库应用系统设计地各种需要注意的问题,完善功能需求是一个开发过程的重点。

系列文章:

  1. 口罩预约管理系统——数据库设计(前端+PHP+MySQL)
  2. 口罩预约管理系统——系统网站实现(前端+PHP+MySQL)

我的CSDN博客:https://blog.csdn.net/Charzous/article/details/108619341 

你可能感兴趣的:(数据库,前端,html5,前端,php,后端)