html+php网上预约网页及表单数据保存到mysql

最新推荐文章于 2022-03-05 10:15:49 发布

帅帅辉的博客

最新推荐文章于 2022-03-05 10:15:49 发布

阅读量2k

点赞数 3

分类专栏：前端知识学习文章标签： php html 预约网页 MySql

本文链接：https://blog.csdn.net/qq_42757964/article/details/98496377

版权

前端知识学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

做的是个仓库预约的小demo

后台是php写的，因为没学过前端知识和后台技术。网页也是在网上扒拉来的模板改的，所以不规范地方请自行更改。

这是原网页

这是我改的：

由于单纯的一个静态html网页在实际应用中没什么卵用，需要搭配后台，才能够将网页提交的数据送往你想存储的地方或者在进行二次处理。也就是说在你点击submit(图中提交申请按钮)按钮之后，剩下的事情就的由后台处理了。写后台的语言有很多，搭建后台所需的环境也有不同的方法。

我用的是php+html表单提交数据保存到mysql中

php代码：welcome.php

<?php
$name = $_POST["name"];   //将html网页中你想提交的数据的name属性标明
$sex = $_POST["sex"];
$age = $_POST["age"];
$tel = $_POST["tel"];
$orderTime = $_POST["orderTime"];
$description = $_POST["description"];
//架设在本机的MySql的名字，用户，密码（我设的空密码），及你创建好的库mydb
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "myDB";
 
// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检测连接
if ($conn->connect_error) {
    die("0000: " . $conn->connect_error);
} 
 //将html中我想提交的数据全部存储到数据库中
$sql = "INSERT INTO second_test(name, sex, age, tel, orderTime, description)
VALUES ('$name', '$sex', $age, '$tel', '$orderTime', '$description')";
 //如果添加到MySql成功就跳转页面“1111”表示添加成功
if ($conn->query($sql) === TRUE) {
    echo "1111";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
 
$conn->close();
?>

提交成功后：
后台数据库新增加一条预约：

整套项目我已上传smartStorage.zip

html代码： index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>粮仓存储预约</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" href="css/yuyue.css" />
<LINK rel=stylesheet type=text/css href="css/datepicker.css">
<SCRIPT type=text/javascript  src="js/jquery-1.6.2.min.js"></SCRIPT>
<SCRIPT type=text/javascript  src="js/jquery.datepicker-mi.js"></SCRIPT>
<SCRIPT type=text/javascript  src="js/form.js"></SCRIPT>
</head>

<body>
<div class="yuyue_box">
  <div class="yuyue_head"><img src="images/yuyue_top.jpg" width="1366" height="86" /></div>
  <div class="telcon">
    <div class="tell">
      <div class="ts"> <span>提示:</span>
        <p>您所填资料将会被保密，请放心填写。<br />
          请填写详细的个人及作物信息<br />
          方便我们提前了解您的情况，为您备选合适的仓位。</p>
      </div>
      <div class="telform">
        <form action="welcome.php" method="post">
          <input type="hidden" name="sectionid" value="41">
          <input type="hidden" name="orderExpert" value="81">
          <div class="telc">
            <label>用户姓名:</label>
            <input type="text" d="name" id="name" value="" name="name" />
          </div>
          <div class="telxb">
            <label>用户性别：</label>
            <input type="radio" checked="checked" class="sontelxb" value="man" name="sex" />
            &nbsp;男&nbsp;&nbsp;&nbsp;&nbsp;
            <input name="sex" type="radio" value="woman" />
            &nbsp;女</div>
          <div class="telc">
            <label>年龄：</label>
            <input type="text" id="ageses" value="" name="age" />
          </div>
          <div class="telc" style=" margin-bottom:2px">
            <label>联系电话：</label>
            <input  id="tel" type="text" value="" name="tel" />
          </div>
          <p style=" margin-top:1px">*请准确填写，此号码为与您联系的号码</p>
          <div class="telrq">
            <label>预约日期：</label>
            <input type="text" id="time" class="date-pick" 	onclick="this.value='';this.style.color='black';this.style.background='images/420bf521c6dd4a13ac016894278546d0.gif';" value="点击选择预约时间" name="orderTime" />
          </div>
          <div class="telbq">
            <label>预约作物描述：</label>
            <textarea name="description"></textarea>
          </div>
          <p>*请尽量详细填写农作物相关属性,方便我们更好的了解您的产品以便安排相应仓位</p>
		  <input type="submit" name="sub" value=" " class="tijiao" />
          <script language=javascript>
			<!--
			var url = document.referrer;
			document.writeln("<input type=\"hidden\" name=\"URL\" value="+url+">");
			//-->
			</script>
        </form>
      </div>
      <div class="bdz">
        <FORM style="DISPLAY: none" id=lxb-data-form>
          <INPUT id=uid name=uid value=2398773 type=hidden>
          <INPUT id=ttk name=ttk type=hidden>
        </FORM>
      </div>
    </div>
    <div class="telr"> <img src="images/yuyue_07.jpg" width="457" height="704" border="0" usemap="#yuyuecase_Map"  /> 
 </div>
    <div style="clear:both"></div>
  </div>
  <div class="footel">
    <div>准确记录个人信息，特殊农产品针对其相关属性及对环境温湿度等条件特殊要求要明确记录在预约作物描述中。</div>
    <p>XX大学研究小组拥有最终解释权</p>
  </div>
</div>
</body>
</html>