3.2 实例：用PHP开发一个简单的网站
通过对PHP开发Web应用基础知识的学习，读者掌握了使用PHP获取和处理表单数据、用PHP验证数据的有效完整、PHP中session的使用和处理文件上传等基本技能。本节将通过一个具体的实例来进一步加强对这些技能的应用介绍，本节还将进一步学习界面设计和布局方面的应用。
3.2.1 网站功能设计
本节将制作一个简单数据录入系统。首先用户提供登录名和密码登录系统，之后使用session维护用户状态。进入系统后，用户可以录入一些个人信息。该系统还应该实现对应不同用户录入的数据，有不同的显示结果。
该系统客户端使用CSS完成页面设计和布局，并且使用JavaScript验证数据是否有效。客户端使用PHP处理这些数据，并将数据显示至浏览器。
3.2.2 页面设计
初步考虑设计两个页面，一个页面是用户登录界面；另一个页面是用户信息的录入界面。此外，还需要PHP程序完成用户验证和负责获取表单提交的数据，并将表单数据显示出来。
（1）首先建立用户登录界面，如图3-13所示。
（2）接下来建立用户信息录入界面，如图3-14所示。
图3-13 用户登录界面
图3-14 用户信息录入界面
接下来的内容，将介绍如何实现这些页面和PHP程序。
3.2.3 用JavaScript实现客户端响应
用JavaScript可以在客户端验证数据的有效性。在上述登录页面中加入一些JavaScript脚本，就可以验证用户是否输入了用户名。
代码3-8实现了如图3-12所示的用户登录界面，在<head>标签内加入了JavaScript脚本，用以检验用户输入的用户名是否为空，如果为空，则向用户弹出一个提示对话框。此外，该HTML文档中还加入了CSS代码，定义了页面字体的显示大小、表格单元格背景颜色等页面效果。
代码3-8 用户登录界面3-8.html
01 <html>
02 <head>
03 <title>3-8.html
用户登录</title>
04 <style>
05 .tbl{font-size:10pt;width:30%;text-align:right;background-color:#abcdef;}
06 </style>
07
08 <script language="JavaScript">
09 //
用来检查用户输入是否为空的函数
10 function check_name()
11 {
12 //
判断表单login
中，名为user_name
的input
元素的值是否为空
13 if(login.user_name.value=="")
14 {
15 alert("
请输入用户名！");
16 return false;
17 }
18 }
19 </script>
20 </head>
21
22 <body>
23 //
注意，这里要添加onsubmit
属性，通过它，当submit
按钮被单击时，JavaScript
函数check_name
被调用
24 <form name="login" action="3-9.php" method="POST" onsubmit="return check_name()">
25 <table border="0" width="200px" >
26 <tr>
27 <td class="tbl">
用户名：</td><td><input type="text" name="user_name"></td>
28 </tr>
29 <tr>
30 <td><input type="submit" value="
登入系统"></td>
31 </tr>
32 </table>
33 </form>
34
35 </body>
36 </html>
图3-15 通过JavaScript完成客户端响应
【代码解析】代码3-8使用JavaScript判断用户的输入是否为空，当用户没有任何输入而提交表单时，JavaScript将会弹出一个警告对话框，如图3-15所示，通过这样的方式完成客户端的响应。
3.2.4 服务器端用PHP处理请求
当用户输入了用户名后，该数据将提交至一个PHP程序做处理，服务器端的PHP处理程序需要显示用户刚刚输入的用户名以及一个录入用户信息的界面。考虑到不同的用户录入的信息都是不同的，不同的用户只能看到自己的录入信息，所以要在程序中使用session维护不同用户的状态和数据。
（1）例如代码3-9，可用来处理用户输入的用户名，并且负责显示数据录入界面。代码3-9就是常见的在HTML文档中内嵌PHP代码的文件。
代码3-9 处理用户名并且显示信息录入界面3-9.php
01 <?php
02 session_start(); //
开始session
03
04 $user = $_POST['user_name']; //
获取3-8.html
传入的用户名
05 if(!empty($user))
06 {
07 $_SESSION['user'] = $user; //
将用户名注册到session
变量中
08 $welcome = "
您好，".$user."
！请录入以下信息后提交。<br/>";
09 }
10 ?>
11 <html>
12 <head>
13 <title>3-9.php
用户信息录入</title>
14 </head>
15
16 <body>
17 <?php
18 echo $welcome; //
显示一条欢迎信息
19 ?>
20 <form name="info" action="" method="POST">
21 <table border="0">
22 <tr><td>
性别：</td><td><input name="gender" type="radio" value="
男">
男 <input name="gender"
23 type="radio" value="
女">
女</td></tr>
24 <tr><td>
年龄：</td><td><input name="age" type="input" size="3"></td></tr>
25 <tr>
26 <td>
血型：</td>
27 <td>
28 <select name="blood_type">
29 <option value="A">A
型</option>
30 <option value="B">B
型</option>
31 <option value="O">O
型</option>
32 <option value="AB">AB
型</option>
33 <option value="
其他">
其他血型</option>
34 </select>
35 </td>
36 </tr>
37 <tr><td><input type="submit" value="
提交"></td></tr>
38 </table>
39 </form>
40
41 </body>
42 </html>
【代码解析】代码第01～10是一段PHP代码，其通过第04行的$_POST['user_name']来获取用户输入的姓名，然后通过第07行的$_SESSION['user']保存住该用户名。
图3-16 用户登录后看到的界面
（2）当用户输入用户名并提交后，上述程序将会输出一句问候语，然后是用户信息的录入界面，如图3-16所示。
（3）在代码3-9的基础上加入一些对3-9.php中表单数据是否提交的判断，实现对录入信息的处理。如果用户没有提交数据，那么，仍然显示信息录入界面。代码3-10就是在代码3-9的基础上做一些修改，用来完成对用户录入信息的处理，并输出用户信息。
代码3-10 处理用户录入信息3-10.php
01 <?php
02 session_start();
03
04 $user = $_POST['user_name'];
05 if(!empty($user))
06 {
07 $_SESSION['user'] = $user;
08 $welcome = "
您好，".$user."
！请录入以下信息后提交。<br/>";
09 }
10
11 $gender = $_POST['gender'];
12 $age = $_POST['age'];
13 $blood = $_POST['blood_type'];
14
15 //
如果当前用户提交了数据，则输出这些数据
16 if(!empty($gender) && !empty($age) && !empty($blood))
17 {
18 echo "
性别：".$gender."<br/>";
19 echo "
年龄：".$age."<br/>";
20 echo "
血型：".$blood."<br/>";
21 }
22 //
如果用户没有提交数据，则显示信息录入界面
23 else
24 {
25 ?>
26
27 <html>
28 <head>
29 <title>3-9.php
用户信息录入</title>
30 </head>
31
32 <body>
33 <?php
34 echo $welcome;
35 ?>
36 <form name="info" action="" method="POST">
37 <table border="0">
38 <tr><td>
性别：</td><td><input name="gender" type="radio" value="
男">
男 <input name="gender"
39 type="radio" value="
女">
女</td></tr>
40 <tr><td>
年龄：</td><td><input name="age" type="input" size="3"></td></tr>
41 <tr>
42 <td>
血型：</td>
43 <td>
44 <select name="blood_type">
45 <option value="A">A
型</option>
46 <option value="B">B
型</option>
47 <option value="O">O
型</option>
48 <option value="AB">AB
型</option>
49 <option value="
其他">
其他血型</option>
50 </select>
51 </td>
52 </tr>
53 <tr><td><input type="submit" value="
提交"></td></tr>
54 </table>
55 </form>
56
57 </body>
58 </html>
59 <?php
60 }
61 ?>
【代码解析】第16行语句就是通过if语句来判断用户的输入，其中读者要看清楚!empty($gender)&&!empty($age)&&!empty($blood)这个语句，首先是通过empty()函数判断值是否为空，然后通过!运算符取反，最后通过&&运算符将3个比较结果再进行比较。
图3-17 案例输出结果
（4）将3-8.html中表单提交后的处理程序改为3-10.php，即将表单的action属性改为“3-10.php”，输入用户名后提交至3-10.php。在3-10.php生成的页面中录入用户信息后提交，此时3-10.php中的表单数据提交到自身（3-10.php）。然后再通过程序判断，输出用户所录入的信息。最后的输出效果如图3-17所示。
在线客服
共有条评论 网友评论