当前位置：首页 > article >正文

从零开始：PHP基础教程系列-第13篇：构建简单的Web应用

article 2025/3/1 7:15:57

从零开始：PHP基础教程系列

第13篇：构建简单的Web应用

在本篇文章中，我们将学习如何使用PHP构建一个简单的Web应用。这个应用将实现用户注册和登录功能，并使用PDO与MySQL数据库进行交互。我们将逐步实现这个应用的基本功能。

一、项目结构

首先，我们需要创建一个基本的项目结构：

/simple-web-app
    ├── index.php
    ├── register.php
    ├── login.php
    ├── dashboard.php
    ├── db.php
    └── style.css

二、数据库设置

在开始之前，我们需要设置数据库。以下是创建数据库和用户表的SQL语句：

CREATE DATABASE simple_web_app;

USE simple_web_app;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

三、数据库连接

在 db.php 文件中，我们将设置数据库连接：

<?php
$dsn = 'mysql:host=localhost;dbname=simple_web_app;charset=utf8';
$username = 'your_username';
$password = 'your_password';

try {
    $pdo = new PDO($dsn, $username, $password);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("连接失败: " . $e->getMessage());
}
?>

四、用户注册功能

在 register.php 文件中，我们将实现用户注册功能：

<?php
require 'db.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'];
    $password = password_hash($_POST['password'], PASSWORD_DEFAULT);

    $sql = "INSERT INTO users (username, password) VALUES (:username, :password)";
    $stmt = $pdo->prepare($sql);

    try {
        $stmt->bindParam(':username', $username);
        $stmt->bindParam(':password', $password);
        $stmt->execute();
        echo "注册成功！";
    } catch (PDOException $e) {
        echo "注册失败: " . $e->getMessage();
    }
}
?>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>用户注册</h1>
    <form method="POST" action="">
        <input type="text" name="username" placeholder="用户名" required>
        <input type="password" name="password" placeholder="密码" required>
        <button type="submit">注册</button>
    </form>
</body>
</html>

五、用户登录功能

在 login.php 文件中，我们将实现用户登录功能：

<?php
require 'db.php';
session_start();

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $username = $_POST['username'];
    $password = $_POST['password'];

    $sql = "SELECT * FROM users WHERE username = :username";
    $stmt = $pdo->prepare($sql);
    $stmt->bindParam(':username', $username);
    $stmt->execute();
    $user = $stmt->fetch(PDO::FETCH_ASSOC);

    if ($user && password_verify($password, $user['password'])) {
        $_SESSION['user_id'] = $user['id'];
        header("Location: dashboard.php");
        exit();
    } else {
        echo "用户名或密码错误";
    }
}
?>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>用户登录</h1>
    <form method="POST" action="">
        <input type="text" name="username" placeholder="用户名" required>
        <input type="password" name="password" placeholder="密码" required>
        <button type="submit">登录</button>
    </form>
</body>
</html>

六、用户仪表盘

在 dashboard.php 文件中，我们将显示用户登录后的欢迎信息：

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit();
}

require 'db.php';

$sql = "SELECT username FROM users WHERE id = :id";
$stmt = $pdo->prepare($sql);
$stmt->bindParam(':id', $_SESSION['user_id']);
$stmt->execute();
$user = $stmt->fetch(PDO::FETCH_ASSOC);
?>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>用户仪表盘</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>欢迎, <?php echo htmlspecialchars($user['username']); ?>!</h1>
    <a href="logout.php">登出</a>
</body>
</html>

七、登出功能

在 logout.php 文件中，我们将实现登出功能：

<?php
session_start();
session_destroy();
header("Location: login.php");
exit();
?>

八、样式文件

在 style.css 文件中，我们可以添加一些简单的样式：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
}

h1 {
    color: #333;
}

form {
    margin: 20px 0;
}

input {
    display: block;
    margin: 10px 0;
    padding: 10px;
    width: 200px;
}

button {
    padding: 10px 15px;
    background-color: #5cb85c;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #4cae4c;
}