3.5 实操：写一个简单网页

在本实操中，我们将创建一个简单的 PHP 网页，包含基本的 HTML 结构和 PHP 代码，展示如何混合使用 PHP 和 HTML。

1. 目标

创建一个包含以下功能的简单网页：

显示当前日期和时间
提供一个表单，允许用户输入姓名
提交表单后，显示欢迎信息
包含基本的样式和布局

2. 步骤

步骤 1：创建文件

在网站根目录中创建一个名为 simple-page.php 的文件。

步骤 2：编写代码

php

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单 PHP 网页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f4f4f4;
        }
        .container {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .info {
            background-color: #e8f4f8;
            padding: 10px;
            border-left: 4px solid #3498db;
            margin-bottom: 20px;
        }
        form {
            margin-top: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            margin-bottom: 10px;
        }
        button {
            background-color: #3498db;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #2980b9;
        }
        .greeting {
            background-color: #d4edda;
            color: #155724;
            padding: 10px;
            border-radius: 4px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>欢迎访问我的 PHP 网页</h1>
        
        <div class="info">
            <p><strong>当前日期和时间：</strong><?php echo date('Y年m月d日 H:i:s'); ?></p>
            <p><strong>服务器信息：</strong><?php echo $_SERVER['SERVER_SOFTWARE']; ?></p>
            <p><strong>PHP 版本：</strong><?php echo phpversion(); ?></p>
        </div>
        
        <h2>请输入你的姓名</h2>
        <form method="post">
            <label for="name">姓名：</label>
            <input type="text" id="name" name="name" placeholder="请输入你的姓名" required>
            <button type="submit">提交</button>
        </form>
        
        <?php
        // 处理表单提交
        if ($_SERVER['REQUEST_METHOD'] === 'POST') {
            // 获取表单数据
            $name = $_POST['name'];
            
            // 验证数据
            if (!empty($name)) {
                // 输出欢迎信息
                echo '<div class="greeting">';
                echo '<h3>欢迎你，' . htmlspecialchars($name) . '！</h3>';
                echo '<p>很高兴认识你！这是一个使用 PHP 和 HTML 混合编写的简单网页。</p>';
                echo '<p>你可以看到页面上显示了当前的日期和时间，以及服务器和 PHP 的版本信息。</p>';
                echo '</div>';
            } else {
                echo '<div class="greeting" style="background-color: #f8d7da; color: #721c24;">';
                echo '<p>请输入你的姓名！</p>';
                echo '</div>';
            }
        }
        ?>
        
        <div style="margin-top: 30px; padding-top: 20px; border-top: 1px solid #ddd;">
            <h3>网页功能说明：</h3>
            <ul>
                <li>显示当前日期和时间</li>
                <li>显示服务器信息和 PHP 版本</li>
                <li>接收用户输入的姓名</li>
                <li>显示个性化的欢迎信息</li>
            </ul>
        </div>
    </div>
</body>
</html>

3. 代码解析

3.1 HTML 结构

使用标准的 HTML5 文档结构
包含 <head> 和 <body> 部分
使用内部 CSS 样式美化页面

3.2 PHP 代码

date('Y年m月d日 H:i:s')：获取并格式化当前日期和时间
$_SERVER['SERVER_SOFTWARE']：获取服务器软件信息
phpversion()：获取当前 PHP 版本
$_SERVER['REQUEST_METHOD']：检查请求方法
$_POST['name']：获取表单提交的姓名
htmlspecialchars()：防止 XSS 攻击，转义特殊字符

3.3 表单处理

使用 method="post" 提交表单
检查 $_SERVER['REQUEST_METHOD'] 是否为 POST
验证表单数据是否为空
根据验证结果显示不同的信息

4. 运行网页

步骤 1：启动服务

确保 Apache 服务已经启动

步骤 2：访问网页

打开浏览器
输入网址：http://localhost/simple-page.php
按下回车键

步骤 3：测试功能

查看页面显示的日期、时间和服务器信息
在表单中输入你的姓名
点击「提交」按钮
查看显示的欢迎信息
尝试不输入姓名直接提交，查看错误提示

5. 扩展练习

练习 1：添加更多表单字段

php

<form method="post">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" placeholder="请输入你的姓名" required><br>
    
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" placeholder="请输入你的邮箱"><br>
    
    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" placeholder="请输入你的年龄"><br>
    
    <button type="submit">提交</button>
</form>

练习 2：添加更复杂的逻辑

php

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_POST['name'];
    $age = isset($_POST['age']) ? $_POST['age'] : 0;
    
    if (!empty($name)) {
        echo '<div class="greeting">';
        echo '<h3>欢迎你，' . htmlspecialchars($name) . '！</h3>';
        
        if ($age > 0) {
            if ($age < 18) {
                echo '<p>你还未成年，要好好学习哦！</p>';
            } else {
                echo '<p>你已经成年了，可以独立做很多事情了！</p>';
            }
        }
        
        echo '</div>';
    }
}
?>

练习 3：添加计数器功能

php

<?php
// 简单的页面访问计数器
$counter_file = 'counter.txt';

// 读取当前计数
if (file_exists($counter_file)) {
    $count = (int)file_get_contents($counter_file);
} else {
    $count = 0;
}

// 增加计数
$count++;

// 保存计数
file_put_contents($counter_file, $count);

// 显示计数
echo '<p><strong>页面访问次数：</strong>' . $count . '</p>';
?>

6. 最佳实践

代码组织：将 HTML 和 PHP 代码合理分离
输入验证：始终验证用户输入
输出转义：使用 htmlspecialchars() 防止 XSS 攻击
错误处理：处理可能出现的错误情况
代码注释：添加适当的注释，提高代码可读性
样式分离：对于复杂页面，建议使用外部 CSS 文件

7. 总结

通过本实操，你已经学会了：

创建一个混合 PHP 和 HTML 的网页
使用 PHP 输出动态内容
处理表单提交
验证用户输入
美化页面样式

这是一个基础的 PHP 网页示例，展示了 PHP 的基本用法和与 HTML 的结合方式。随着你学习的深入，你可以创建更加复杂和功能丰富的 PHP 应用。

3.5 实操：写一个简单网页 ​

1. 目标 ​

2. 步骤 ​

步骤 1：创建文件 ​

步骤 2：编写代码 ​

3. 代码解析 ​

3.1 HTML 结构 ​

3.2 PHP 代码 ​

3.3 表单处理 ​

4. 运行网页 ​

步骤 1：启动服务 ​

步骤 2：访问网页 ​

步骤 3：测试功能 ​

5. 扩展练习 ​

练习 1：添加更多表单字段 ​

练习 2：添加更复杂的逻辑 ​

练习 3：添加计数器功能 ​

6. 最佳实践 ​

7. 总结 ​