简易版网上订餐

2017-11-18

简易版网上订餐，包括从后台添加菜品图片，菜品，价格

HTML代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box {
				width: 600px;
				height: 400px;
				border: 2px solid black;
				margin: 50px auto;
				text-align: center;
				position: relative;
			}
			.myPhp{
				height: 140px;
				margin-top: 150px;
				width: 800px;
			}
			#order, #show {
				text-align: left;
			}
			#show {
				border: 2px solid black;
				width: 600px;
				margin-top: 150px;
			}
			#show div, form div {
				height: 50px;
			}
			#show div span:nth-of-type(1), form div span:nth-of-type(1), #show div span:nth-of-type(2), form div span:nth-of-type(2) {
				display: inline-block;
				width: 140px;
			}
			img {
				width: 40px;
				vertical-align: middle;
				margin: 0 8px;
			}
			#btn1, #btn2 {
				width: 50px;
				font-size: 16px;
				background: #F5F5F5;
			}
			#btn2 {
				margin-left: 8pxs;
			}
			#btn1 {
				position: absolute;
				bottom: 10px;
				right: 20px;
			}
		</style>
	</head>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<body>
		<!--前台界面-->
		<div class="myHtml box">
			<h1>丽德国际大酒店</h1>
			<form id="order" action="" method="post" enctype="multipart/form-data">		
				<input type="button" id="btn1" name="submit1" value="提交"/>
			</form>
		</div>
		<div id="show"></div>
		<!--老板添加菜单-->
		<!--
			老板往后台添加菜单，到文件中，后台从文件中获取菜品，返回到前台，形成订单界面
			用户通过点击勾选，前台将所选菜品和份数传到后台，后台经过计算，将结果反倒浅谈
		-->
		<div class="myPhp box">
			<h2>添加菜单</h2>
			图片：<input type="file" id="pic" name="pic" />
			菜品：<input type="text" name="caipin" id="caipin" value="" />
			价格：<input type="text" name="price" id="price" />元
			<input type="button" id="btn2" name="submit2" value="提交"/>
		</div>
	</body>
	<script type="text/javascript">
		//老板添加菜
		$('#btn2').click(function() {
			var str = $('#caipin').val()+" "+$('#price').val();
			var formDate = new FormData();
			formDate.append("str",str);
			formDate.append("pic",$('#pic')[0].files[0]);
			$.ajax({
				type:"post",
				url:"writeDan.php",
				async:true,
				data: formDate,
				processData: false,
				contentType: false,
				success: function() {},
			});
		})
		//前台发送请求，获取菜单
		$.ajax({
			type:"get",
			url:"dingDan.php?action=caidan",
			async:true,
			data: {},
			dataType: "json",
			success: function(data) {
				createCai(data);
			}
		});
		//创建前台点菜界面
		function createCai(data) {
			console.log(data)
			for(var i = 0; i < data.length-1; i++) {
				$("<div><img src="+data[i].split(' ')[0]+" ><span>菜品："+data[i].split(' ')[1]+"</span><span>　　价格：￥"+data[i].split(' ')[2]+"元</span>　　份数：<input type='text'><input type='checkbox'></div>").appendTo("#order");
			}
		}
	
		//点击 点餐的时候  获取勾选菜品，所选份数
		$("#btn1").click(function() {
			var arrIndex = [];
			var arrCount = [];
			$('input:checkbox').each(function(index,obj) {
				if($('input:checkbox')[index].checked == true) {
					var count = parseInt($('input:text')[index].value);
					arrIndex.push(index);
					arrCount.push(count);	
				}
			})

			$.ajax({
				type:"post",
				url:"dingDan.php",
				async:true,
				data: {"index":arrIndex,"count":arrCount},
				dataType: "json",
				success: function(data) {
					console.log(data)
					$("<h3>您所选购：</h3>").appendTo('#show');
					for(var i = 0; i<data.length-1;i++) {
						$("<div><img src="+data[i].split(' ')[0]+" ><span>"+data[i].split(' ')[1]+"</span><span> 单价："+data[i].split(' ')[2]+"</span><span> 小计："+data[i].split(' ')[2]+"</span></div>").appendTo('#show');
					}
					$("<h4>总价："+data[data.length-1]+"</h4>").appendTo('#show');
				}
			});
		})
	</script>
</html>

####PHP代码1 往后台上传图片，添加菜品和价格

<?php
	if(!empty($_POST['str'])) {
		$result = false;
		if(!empty($_FILES['pic']['name'])){
			$type = $_FILES['pic']['type'];
			if($type == "image/jpeg" || $type == "image/png" || $type == "image/gif"){
				$result = move_uploaded_file($_FILES['pic']['tmp_name'],$_FILES['pic']['name']);
			}	
		}
		if($result) {
			$str = $_FILES['pic']['name']." ".$_POST['str']."\n";
			$fp = fopen("dingDan.txt","a+");
			fwrite($fp,$str);
			fclose($fp);
		}
	}	
?>

####PHP代码2 从后台去数据

<?php
	if(!empty($_GET['action'])) {
		$fp = fopen("dingDan.txt","r");
		$arr = array();
		while(!feof($fp)) {
			$arr[] = fgets($fp);
		}
		$arr1 = json_encode($arr);
		echo $arr1;
		fclose($fp);
	}
	if($_POST) {
		$fp = fopen("dingDan.txt","r");
		$arr = array();
		while(!feof($fp)) {
			$arr[] = fgets($fp);
		}
		fclose($fp);
		$index = $_POST['index'];
		$count = $_POST['count'];
		$allTotal = 0;
		$arr2 = array();
		for($i=0;$i<count($index);$i++) {
			$picture = explode(" ",$arr[$index[$i]])[0];
			$caiPin = explode(" ",$arr[$index[$i]])[1];
			$price = explode(" ",$arr[$index[$i]])[2];
			$total = $price * $count[$i];
			$arr2[] = $picture." ".$caiPin." ".$price." ".$total;
			$allTotal += $total;	
		}
		$arr2[] = $allTotal;
		$num = json_encode($arr2);
		echo $num;	
	}
?>