1. 前台添加菜单
<!--增加菜单前台页面-->
<form name="menu" enctype="multipart/form-data" action="php/menu/addmenu.php" method="post">
菜名： <input type="text" name="menuname" id="menuname" value="" /><br>
价格： <input type="text" name="price" id="" value="" /><br>
图片： <input type="file" name="pic" id="pic" value="" /><br>
<input type="submit" name="submit" value="添加菜单"/>
</form>
2. �后台接受请求，接受数据并创建menu数据库，将上传的数据存储到menu数据库
<?php
//判断用户有没有输入
if(!empty($_POST['submit'])) {
//判定有没有上传图片
if(!empty($_FILES['pic'])) {
//后台需要检查上传类型（放置直接上传PHP文件）
if($_FILES['pic']['type'] == "image/jpeg" || $_FILES['pic']['type'] == "image/png") {
$path = "../../uploads/";
$result = move_uploaded_file($_FILES['pic']['tmp_name'],$path.$_FILES['pic']['name']);
}
//比如要求增加菜单时一定要上传图片
if($result) {
$menuname = htmlspecialchars($_POST['menuname']);
$price = floatval($_POST['price']); //转成浮点数
$pic = $_FILES['pic']['name'];
include "../common/mysql.php";
$fields = array(
'name' => $menuname,
'price' => $price,
'picture' => $pic
);
insert($link, $fields, "menu");
mysqli_close($link);
}
}
}
?>
image.png
3. �前台发送数据，向后台请求刚才上传的数据，然后将获取到的数据遍历形成菜单界面
//使用Ajax获得菜单数据
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var menu = JSON.parse(this.responseText);
createMenu(menu);
}
xhr.open("get","php/menu/listmenu.php");
xhr.send();
function createMenu(data) {
line = "";
for(i in data) {
line += "<li><input type=\"checkbox\" name=\"menu_id[]\" value=\""+data[i].id+"\" /> <img width='50px' src=\"uploads/"+data[i].picture+"\"> <span id=\""+data[i].id+"\" >"+data[i].name+"</span><span id=\""+data[i].id+"\" >"+data[i].price+"</span>元 订购份数： <input type=\"text\" name=\"num_"+data[i].id+"\"/></li>"
document.getElementById("menuUl").innerHTML = line;
}
}
4. ��后台接受请求，打开menu数据库，将数据返回给前段
<?php
//mysql.php 数据库操作函数库文件
include "../common/mysql.php";
$data = getAll($link, "*", "menu", "1=1");
echo json_encode($data);
?>
image.png
5. ���前台注册界面
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<body>
<div id="nav"></div>
<form action="php/member/register.php" method="post" name="form1">
密 码： <input type="password" name="member_password" /> <br>
确认密码： <input type="password" name="member_password_confirm" /> <br>
用户姓名： <input type="text" name="member_name"/> <br>
用户电话： <input type="text" name="member_mobile"/> <br>
用户地址： <input type="text" name="member_address"/> <br>
<input type="hidden" name="member" value="1" />
<input type="button" name="btn" value="立即注册"/>
</form>
</body>
<script type="text/javascript">
$("#nav").load("tpl/nav.html");
document.form1.btn.onclick = checkdata;
var isOk = true;
function checkdata() {
if(document.form1.member_password.value != document.form1.member_password_confirm.value){
alert("两次密码输入不一致");
return false;
}
document.form1.submit();
}
function checkuser(value) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
if(this.responseText == "fail") {
document.form1.btn.disabled = true;
document.form1.member_username.className = "error";
}else {
document.form1.btn.disabled = false;
document.form1.member_username.className = "";
}
}
var formData = new FormData();
formData.append("member_username",value)
xhr.open("POST","php/member/checkuser.php");
xhr.send(formData);
}
</script>
6. ��注册用户的时候检测该用户名是否已经被注册，如果没被注册，可以注册
<?php
//验证用户名的合法性
if(!empty($_POST['member_username'])) {
include "../common/mysql.php";
$username = htmlspecialchars($_POST['member_username']);
//查询该用户名是否已经存在
$member = getOne($link,"*","member","member_username='".$username."'");
//如果查询结果为空 表示没有相同的用户注册
if(empty($member)) {
echo "ok";
}else {
echo "fail";
}
}
?>
7. ��将可以注册的用户名即其他信息，插入到member数据表里面
<?php
//会员注册
if(!empty($_POST['member'])) {
//引入数据库函数库
include "../common/mysql.php";
foreach($_POST as $key => $val) {
$_POST[$key] = htmlspecialchars($val);
}
$member = array(
'member_name' => $_POST['member_name'],
'member_mobile' => $_POST['member_mobile'],
'member_address' => $_POST['member_address'],
'member_username' => $_POST['member_username'],
'member_password' => sha1($_POST['member_password'])
);
insert($link, $member, 'member');
}
?>
会员界面
8. �会员登录页面，将前台输入的用户名和密码传送到后台
<body>
<div id="nav"></div><br>
<!--登陆页面-->
<form action="php/member/login.php" name="form1" method="post">
用户名： <input type="text" name="username" /><br>
密 码： <input type="password" name="password" /><br>
<input type="submit" name="btn" value="立即登录"/>
</form>
</body>
<script type="text/javascript">
$("#nav").load("tpl/nav.html");
</script>
9. �将前台输入的信息进行核实，如果信息不符合留在本页，如果符合，跳转到首页。并以此在member表中查找该会员信息，将会员用户名，名称，电话存储到Session里面，备用
<?php
session_start();
if(!empty($_POST['username']) && !empty($_POST['password'])) {
include "../common/mysql.php";
//对提交的数据进行预处理
$username = htmlspecialchars($_POST['username']);
$password = sha1($_POST['password']);
$member = getOne($link,"*","member","member_username='".$username."' and member_password='".$password."'");
if(!empty($member['member_username'])) {
$_SESSION['member']['username'] = $member['member_username'];
$_SESSION['member']['name'] = $member['member_name'];
$_SESSION['member']['mobile'] = $member['member_mobile'];
header("Location: /php/db/index.html");
}else {
header("Location: /php/db/login.html");
}
}
?>
10. ��判断用户是否登录，如果登录成功返回上述存储在Session里面的数据
<?php
session_start();
if(!empty($_SESSION['member'])) {
//将用户登录信息输出到前台
echo json_encode($_SESSION['member']);
}else {
//nologin 表示用户尚未登录
echo json_encode(array("no login"));
}
?>
11. �前台想后台发送请求，如果用户登录，界面显示 欢迎"+data.name+"来到商城 <a href=''>用户中心
<script type="text/javascript">
$('#nav').load("tpl/nav.html");
$.get("php/member/member_status.php",{},function(data) {
console.log(data);
if(typeof(data.name) != "undefined") {
$('#member_status').html("欢迎"+data.name+"来到商城 <a href=''>用户中心</a>");
}
},"json");
</script>
12. �前台将选中的菜品和分数传送到后台
var xhr = new XMLHttpRequest();
xhr.onload = function() {
document.getElementById("tips").innerHTML = this.responseText;
}
var formData = new FormData();
formData.append("menu",JSON.stringify(userSelected));
xhr.open("POST","php/orders/dingdan.php");
xhr.send(formData);
13. �后台接受数据，遍历数组，将数据插入到listorder表中
<?php
session_start();
//将用户订餐数据记录到数据库
//接受提交的订单数据
if(!empty($_POST['menu'])) {
include "../common/mysql.php";
//$_POST['menu']是前台传来的JSON串
//json_decode 将JSON字符串转变成数组
$menu = json_decode($_POST['menu'],true);
print_r($menu);
//用户选择的checkbox - menu_id
foreach($menu as $key => $val) {
$menu_id = $val['menu_id'];
//订购的份数 num_id
$amount = intval($val['amount']);
echo "订单的菜单id=".$menu_id."<br>";
echo "订单的份数amount=".$amount."<br><br>";
$row = getOne($link, "name,price","menu","id=".$menu_id);
$fields = array(
"menu_name" => $row['name'],
"menu_price" => $row['price'],
'amount' => $amount,
'createDate' => date("Y-m-d H:i:s"),
'name' => $_SESSION['member']['name'],
'number' => $_SESSION['member']['mobile']
);
insert($link, $fields, 'orderlist');
}
}
?>
image.png
image.png
网友评论