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

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

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

---

前提条件

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

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

---

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

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

---

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

1. phpMyAdmin を開きます。
2. todo_app という名前の新しいデータベースを作成します。
3. 次の 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 を追加します。

    <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">


    <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;
}

---

ステップ 7: アプリケーションを実行する

1. ブラウザを開いて、http://localhost/todo_app/index.phpに移動します。
2. いくつかのタスクを追加、表示、削除します。 ?

---

おめでとうございます! PHP と MySQL を使用して、最初のデータベース駆動型 Web アプリを構築しました。この単純なプロジェクトは、より複雑なアプリケーションを作成するための基礎を築きます。タスクの優先順位付けやユーザー認証などの機能を追加してみてください。

このチュートリアルが気に入ったら、コメントを残すか、他の開発者と共有してください。コーディングを楽しんでください! ?