初心者のための PHP: 初めてのデータベース駆動型 Web アプリの構築-PHPチュートリアル-php.cn

初心者のための PHP: 初めてのデータベース駆動型 Web アプリの構築

Susan Sarandon

リリース： 2025-01-06 01:23:43

オリジナル

746 人が閲覧しました

PHP を始めたばかりの場合、取り組むことができる最もエキサイティングなプロジェクトの 1 つは、データベース駆動型の Web アプリを構築することです。これは、バックエンドがどのように機能し、データベースと対話し、動的コンテンツをユーザーに提供するかを理解するための優れた方法です。

PHP for Beginners: Building Your First Database-Driven Web App

このチュートリアルでは、PHP と MySQL を使用して簡単な To-Do リストアプリ を構築します。最終的には、ユーザーがタスクを追加、表示、削除できるアプリケーションが完成します。

前提条件

本題に入る前に、次のものがあることを確認してください。

PHP (バージョン 7.4 以降)
MySQL (または MariaDB)
XAMPP や Laragon などのローカルサーバー
VS Code のようなコードエディター

ステップ 1: 環境をセットアップする

ローカルサーバー (XAMPP など) をインストールします。
Apache サービスと MySQL サービスを開始します。
Web ルートディレクトリ (XAMPP の場合は htdocs) に移動し、todo_app という名前の新しいフォルダーを作成します。

ステップ 2: データベースを作成する

phpMyAdmin を開きます。
todo_app という名前の新しいデータベースを作成します。
次の SQL クエリを実行してタスクテーブルを作成します。

sql
CREATE TABLE tasks (
    id INT AUTO_INCREMENT PRIMARY KEY,
    task VARCHAR(255) NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

ログイン後にコピー

ステップ 3: HTML フロントエンドを構築する

todo_app フォルダーに index.php ファイルを作成し、次の HTML を追加します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>




<hr>

<h2>
  
  
  Step 4: Handle Adding Tasks
</h2>

<p>Create a new file called <em>add_task.php</em> and add the following code:<br>
</p>

<pre class="brush:php;toolbar:false"><?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $task = $_POST['task'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Insert the task into the database
    $stmt = $conn->prepare("INSERT INTO tasks (task) VALUES (?)");
    $stmt->bind_param("s", $task);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

ログイン後にコピー

ステップ 5: 削除タスクを処理する

delete_task.php:
という名前の新しいファイルを作成します。

<?php
if (isset($_GET['id'])) {
    $id = $_GET['id'];

    // Connect to the database
    $conn = new mysqli("localhost", "root", "", "todo_app");

    // Delete the task from the database
    $stmt = $conn->prepare("DELETE FROM tasks WHERE id = ?");
    $stmt->bind_param("i", $id);
    $stmt->execute();

    $stmt->close();
    $conn->close();

    // Redirect back to the main page
    header("Location: index.php");
    exit();
}
?>

ログイン後にコピー

ステップ 6: CSS を追加する (オプション)

同じフォルダーに styles.css ファイルを作成して、アプリのスタイルを設定します。

body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    color: #333;
    margin: 0;
    padding: 0;
}

.container {
    width: 50%;
    margin: 50px auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

h1 {
    text-align: center;
}

form {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

form input {
    flex: 1;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

form button {
    padding: 10px 20px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

form button:hover {
    background-color: #218838;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

ul li a {
    color: #dc3545;
    text-decoration: none;
}

ログイン後にコピー