PHP Academy · レッスン

簡単なToDoリストを作成する

Q: 「簡単なToDoリストを作成する」で何を学びますか？

PHPとHTMLを使って基本的なToDoリストアプリケーションを作成します ブラウザで直接実行するハンズオンコードでPHP Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

PHPとHTMLを使って基本的なToDoリストアプリケーションを作成します

「簡単なToDoリストを作成する」はCoddyKit上の無料PHP Academyレッスンです。これはレッスン1/2です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはPHP Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 PHP Academyコースには全2レッスンが含まれています。

To-Doリストプロジェクトの概要

シンプルなTo-Doリストの構築

シンプルなTo-Doリストの構築に関するレッスンへようこそ！このプロジェクトでは、タスクの追加、表示、削除を行うPHPアプリケーションの作成方法を学びます。それでは始めましょう！

プロジェクトのセットアップ

始める前に、次のものが用意されていることを確認してください：

XAMPPやWAMPなどのWebサーバー。
テキストエディターまたはIDE（例：VS Code）。
プロジェクトディレクトリ内のtodo.phpという名前のファイル。

重要なポイント：このプロジェクトでは、タスクを一時的に保存するためにPHPセッションを使用します。

基本的なHTML構造の作成

まず、To-DoリストアプリケーションのHTMLレイアウトを作成します。例：

ヒント：タスクの一覧を表示するには、ul要素を使用してください。

<!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</title>
</head>
<body>
  <h1>To-Do List</h1>
  <form action="todo.php" method="post">
    <input type="text" name="task" placeholder="Enter a new task" required>
    <button type="submit" name="add">Add Task</button>
  </form>
  <ul>
    <!-- Task list will appear here -->
  </ul>
</body>
</html>

PHPセッションの開始

リクエスト間でタスクを保存するには、PHPセッションを使用します。todo.phpファイルの先頭に次のコードを追加してください：

重要なポイント：セッションを使用すると、ページ間を移動している間もデータを保持できます。

<?php
  session_start();

  if (!isset($_SESSION['tasks'])) {
    $_SESSION['tasks'] = [];
  }
?>

リストへのタスクの追加

リストにタスクを追加する

フォームの送信を処理して、新しいタスクをセッションに追加します。例：

ヒント：ユーザー入力から不要な空白を削除するには、trim() を使用します。

<?php
  if (isset($_POST['add'])) {
    $task = trim($_POST['task']);
    if (!empty($task)) {
      $_SESSION['tasks'][] = $task;
    }
  }
?>

タスクリストを表示する

ループを使用して、セッションに保存されているタスクを表示します。例：

重要なポイント：各タスクには、リストから削除するための削除ボタンが含まれています。

<ul>
  <?php
    if (!empty($_SESSION['tasks'])) {
      foreach ($_SESSION['tasks'] as $key => $task) {
        echo "<li>$task <form style='display:inline;' method='post'><button type='submit' name='delete' value='$key'>Delete</button></form></li>";
      }
    } else {
      echo "<li>No tasks added yet.</li>";
    }
  ?>
</ul>

タスクを削除する

削除ボタンの送信を処理して、タスクを削除します。例：

ヒント：削除後にタスクのインデックスが一貫性を保てるよう、再インデックス化を行います。

<?php
  if (isset($_POST['delete'])) {
    $key = $_POST['delete'];
    unset($_SESSION['tasks'][$key]);
    $_SESSION['tasks'] = array_values($_SESSION['tasks']); // Re-index the array
  }
?>

アプリケーションを拡張する

次のような機能を追加できます：

CSSでアプリケーションをスタイリングし、ユーザーインターフェースを改善します。
JavaScriptを使用して、タスクを削除する前に確認ダイアログを表示します。
タスクをデータベースに保存し、データを永続化します。

重要なポイント：機能を拡張すると、アプリケーションがより使いやすく、機能的になります。

よくできました！

おめでとうございます！PHPを使用して、シンプルなToDoリストアプリケーションを構築できました。セッションを使ってタスクを保存する方法、フォームデータを処理する方法、タスクを動的に表示・削除する方法を学びました。次のレッスンでは、PHPのスキルをさらに高めるために、別の楽しいプロジェクトを作成します。引き続きコーディングしましょう！

よくある質問

「簡単なToDoリストを作成する」レッスンは無料ですか？

はい。「簡単なToDoリストを作成する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、PHP Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 PHP Academyコースには全2レッスンが含まれています。

「簡単なToDoリストを作成する」で何を学びますか？

PHPとHTMLを使って基本的なToDoリストアプリケーションを作成しますブラウザで直接実行するハンズオンコードでPHP Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

PHP Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのPHP Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン1/2です。

「簡単なToDoリストを作成する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このPHP Academyレッスンでコードを書いて実行できますか？

はい。すべてのPHP Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

簡単なToDoリストを作成する
お問い合わせフォームを作成する

← PHP Academyに戻る