南京邮电大学Web技术双语实验二(Web服务端脚本编写)

该实验旨在创建一个图书售卖界面,用户输入姓名、地址、邮编,并选择书籍数量及支付方式。提交后,PHP脚本处理数据,生成新页面展示订单详情,包括总价、购买书籍数和支付方式。实验强调了HTML表单元素和PHP处理POST数据的能力。
摘要由CSDN通过智能技术生成

一、 实验目的和要求

1 显示一个图书售卖界面,主要包括一下内容
(1)HTML 的标题为“Welcome to book seller”。
(2)页面内容第一行黑体显示“You are welcome”。
(3)标签提示“please input your name”,并创建输入框。
(4)标签提示“please input your address”,并创建输入框。
(5)标签提示“please input your zip”,并创建输入框。
(6)黑体显示“please fill in the quantity field of the following form”。
(7)表格分成四列,分别是“book”,“publisher”,“price”,“quantity”,其中包含的信息如
表格所示
book publisher price quantity
Web technology Springer press $5.0
mathematics ACM press $6.2
principle of OS Science press $10
Theory of matrix High education press $7.8
(8)quantity 采用输入框输入。
(9)显示“payment method”
(10)用单选按钮显示支付方式选项“cash”,“cheque”,“credit card”。
(11)显示两个标准按钮,“submit”按钮和“reset”按钮。
2 当用户输入完各个内容并按下“submit”按钮后,通过脚本生成新的HTML 页面。其中
包含以下内容
(1)customer name
(2)customer address
(3)customer zip
(4)以表格形式显示订购图书信息,包含四列“book”,“publisher”,“price”,“total cost”,
其中total cost 通过脚本动态计算生成。未购买的图书不显示。
(5)计算并显示“××has bought××books”。(××分别指代客户名字和购买书的数量)
(6)计算并显示“××paid××”。(这里××指代客户名字和总金额数)
(7)根据用户的选择显示“paid by××”。(这里×指代用户选择的支付方式)
3 如果用户按的是“重置”按钮,则清除所有的输入信息。

二、实验环境(实验设备)

三、实验原理及内容

1首先编写html页面

<html>
<head>
   <title>
      Welcome to book seller
   </title>
</head>
<body>
   <form action = "seller.php" method = "post">
   <h1>Yor are Welcome</h1>
   <table>
      <tr>
         <td >please input your name</td>
         <td><label><input type = "text" name = "name" size = "30"/></label></td>
      </tr>
      <tr>
         <td>please input your address</td>
         <td><label><input type = "text" name = "address" size = "30"/></label></td>
      </tr>
      <tr>
         <td>please input your zip</td>
         <td><label><input type = "text" name = "zip" size = "30"/></label></td>
      </tr>
   </table>
      <p style="font-family: 黑体">
         please fill in the quantity field of the following form
      </p>
   <table border = "border">
      <tr>
         <th>book</th>
         <th>publisher</th>
         <th>prise</th>
         <th>quantity</th>
      </tr>
      <tr>
         <th>Web technology</th>
         <td>Springer</td>
         <td>$5.0</td>
         <th><label><input type= "text" name = "web"/></label></th>
      </tr>
      <tr>
         <th>mathematics</th>
      <td>ACM press</td>
      <td>$6.2</td>
      <th><label><input type="text" name="mathematics"/></label></th>
      </tr>
      <tr>
         <th>principle of OS</th>
         <td>Science press</td>
         <td>$10</td>
         <th><label><input type =  "text" name = "OS"/></label></th>
      </tr>
      <tr>
         <th>Theory of matrix</th>
         <td>High education press</td>
         <td>$7.8</td>
         <th><label><input type =  "text" name = "matrix"/></label></th>
      </tr>
   </table>
   <h3>Payment method:</h3>
   <p>
      <label><input type = "radio" name = "payment" value = "cash" checked = "checked"/>Cash</label>
      <label><input type = "radio" name = "payment" value = "cheque"/>cheque</label>
      <label><input type = "radio" name = "payment" value = "credit card"/>credit card</label>
   </p>
   <p>
      <label><input type = "submit" value = "Submit"/></label>
      <label><input type = "reset" value = "Reset"/></label>
   </p>
   </form>
</body>
</html>

2 html页面效果如下图所示

在这里插入图片描述

3 编写服务端php脚本

<html>
<head>
   <title>process the seller.html form</title>
</head>
<body>
   
   <?php
      $web = $_POST["web"];
      $mathematics  = $_POST["mathematics"];
      $OS = $_POST["OS"];
      $matrix = $_POST["matrix"];
      $name = $_POST["name"];
      $address = $_POST["address"];
      $city = $_POST["zip"];
      $payment = $_POST["payment"];
 
      if($web == "") $web = 0;
      if($mathematics == "") $mathematics = 0;
      if($OS == "") $OS = 0;
      if($matrix == "") $matrix = 0;
 
      $web_cost = 5.0 * $web;
      $mathematics_cost = 6.2 * $mathematics;
      $OS_cost = 10 * $OS;
      $matrix_cost = 7.8 * $matrix;
 
      $total_price = $web_cost + $mathematics_cost + $OS_cost + $matrix_cost;
      $total_items = $web + $mathematics + $OS + $matrix;
   ?>
   <h4>costomer:</h4>
   <?php
   print("$name<br/> $address<br/> $city<br/>");
   ?>
   <p/><p/>
   <table border = "border">
      <caption>Order information</caption>
      <tr>
         <th>book</th>
         <th>publisher</th>
         <th>price</th>
         <th>total cost</th>
      </tr>
      <tr align = "center">
         <td>Web technology</td>
         <td>Springer</td>
          <td>$5.0</td>
          <td><?php printf("$%4.2f",$web_cost)?></td>
      </tr>
      <tr align = "center">
         <td>mathematics</td>
         <td>ACM press</td>
          <td>$6.2</td>
          <td><?php printf("$%4.2f",$mathematics_cost)?></td>
      </tr>
      <tr align = "center">
         <td>principle of OS</td>
         <td>Science press</td>
          <td>$10</td>
          <td><?php printf("$%4.2f",$OS_cost)?></td>
      </tr>
      <tr align = "center">
         <td>Theory of matrix</td>
         <td>High education press</td>
          <td>$7.8</td>
          <td><?php printf("$%4.2f",$matrix_cost)?></td>
      </tr>
   </table>
   <p/><p/>
   <?php print "$name has bought $total_items books<br/>";
        printf("$name paid $%5.2f<br/>",$total_price);
        print "paid by $payment<br/>";
   ?>
</body>
</html>

4 服务端页面显示如下

在这里插入图片描述

四、实验小结(包括问题和解决方法、心得体会、意见与建议等)

(一)实验中遇到的主要问题及解决方法
1、要把input标签放在label标签里
2、提交和重置按钮只对同一级form下的内容生效
(三)意见与建议(没有可省略)

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

亦是远方

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值