TODOリストをPHPで作ってみよう！

投稿：2020年09月04日｜更新：2020年09月10日

PHPを学習したので、PHPプログラミング初心者向けに、何か一つ制作の流れをご紹介します。学んだあとは実際に何か一つ制作してみるのがスキルアップにつながるでしょう。ここではわたしの低いレベルでの知識を元に、ToDoリストを作ってみました。

TODOリストをPHPで書く前にすること！

ToDoリストは、仕事だけでなく私用の日常生活でも、やるべきことをリスト化してくれる手法（ツール）になります。
そんなToDoリストですが、パソコンやスマホで扱える自分用のWEBアプリとして、PHPプログラミングで作ってみることにしました。

PHPプログラミングでTODOリストを作る準備

まずはどんなToDoリストを作りたいかを、下書きしながら考えてみましょう。自分用のToDoリストをPHPプログラミングで作りますが、はじめは簡単なものから作っていきましょう。

ToDoリストに必要な機能

ToDoリストではまずどのような機能が必要で、どんな仕組みにすればよいか簡単にまとめてみましょう。

・やりたいリストを新規作成して入力後に保存する
・やりたいリストを複数表示できるようにする
・やり終わったリストを削除する

自分がToDoリスト（やりたいこと）したいものを書けば、その値を保存をしてもらい、リスト作業が終了したら削除することができるようにします。リストは複数表記できるようにしなければなりません。

ToDoリスト作りに必要な知識

・PHP+HTMLの基礎知識

今回はPHP初心者向けなので、CSSやJavaScript またはフレームワークなどは習得度を考慮して使用しません。ここで完成したあとは次回のステップアップとして、見映えよくしたり機能を拡張したりと挑戦していけばよいでしょう。

ToDoリストのデータ保存形式

・PHPでのファイル保存

ToDoリストで重要なのは、ToDoリスト化されたリストデータを保存する機能にします。データを保存するやり方として、ファイル、ブラウザ、サーバー、DBなどありますが、今回はシンプルなファイル保存で作成します。

ToDoリストサンプル図

ToDoリストに必要な最低限の機能であれば下記イメージ図になります。ここからは実際にイメージを参考にToDoリストを作っていきましょう。

・TODOリスト事例１

・TODOリスト事例２

・TODOリスト事例３

今回はToDoリスト一つにしても複数の作成方法がありますが、今回は初学者向けにシンプルなのに決めました。
ワンクリックで新規追加できたり、削除できるのがPHPで作成する場合は簡単なはずです。

・TODOリスト事例４

TODOリストをPHPで書いてみよう！

ToDoリストを作る準備やイメージができたので、それでは実際に作成していきましょう。

① WEBブラウザにHTMLデザインしよう

まずはHTMLのみだけでWEBブラウザに表示される部分を書いていきましょう。あとで修正が増えますのでまずはシンプルに作ります。

■ソースコード

<!DOCTYPE html>
<html lang= "ja">
<body>

<table>
<tr>
    <td>メールの返信をする</td>
    <td>
        <input type="hidden" name="del" value="">
        <input type="submit" value="削除">
    </td>
</tr>
<tr>
    <td>プレゼン資料を作成する</td>
    <td>
        <input type="hidden" name="del" value="">
        <input type="submit" value="削除">
    </td>
</tr>
<tr>
    <td>12時より打ち合わせ会議</td>
    <td>
        <input type="hidden" name="del" value="">
        <input type="submit" value="削除">
    </td>
</tr>
</table>

<hr>
<form method= "post">
    <input type= "text" name= "txt">
    <input type= "submit" value= "投稿">
</form>    

</body>
</html>

<!DOCTYPE html>

<body>

<table>

<tr>

<td>メールの返信をする</td>

<td>

</td>

</tr>

<tr>

<td>プレゼン資料を作成する</td>

<td>

</td>

</tr>

<tr>

<td>12時より打ち合わせ会議</td>

<td>

</td>

</tr>

</table>

<hr>

</form>

</body>

</html>

今回のファイル名は、HTMLのみで書きましたが後々にPHPコードも追記しますので、PHP拡張子で作成してください。
ここでは、「todo.php」にしましょう。

■ブラウザ表示

ToDoリストをHTMLのみで作成してみましたが、はじめにイメージした通りにできるはずです。書き方はそれぞれありますが、ここでは初学者向けとして、コードを省略したり本来とは違う書き方をしている場合もあります。

② 値を保存するファイルを準備しよう

次にToDoリストをPHPで動作させるには、リスト化された値を保存するファイルが今回必要になります。そこで先にファイルを作成して適当にリスト値を保存してみましょう。

・メモ帳を新規で起動（開く）する

・Windowsの場合、タスクバーの左下にある検索「ここに入力して検索」より、「notepad」と入力するとメモ帳が起動します。

・Windowsの他の場合、画面左下にあるタスクバーのWindowsスタートメニューをクリックし、Windowsアクセサリをさらにクリックすると、メモ帳があるのでクリックすれば起動します。

・メモ帳にリスト化した値を入力する

まずはメモ帳のなかに、仮のやりたい項目をリスト内容として保存します。保存する内容は短めで一行ごとになります。

※保存する内容は上部でのHTMLのリスト内容とは、やりたい項目リストを違う内容にすること！

~~メールの返信をする~~
~~プレゼン資料を作成する~~
~~12時より打ち合わせ会議~~

今回ファイルに保存するリスト内容は下記にしました。
・電話のお問い合わせに返答する
・プログラミング学習１時間する
・運動解消でジョギング30分する

■ファイル内

・ファイル名を「data.txt」で保存する

作成したファイル「data.txt」は、「todo.php」と同じフォルダ内に同じ階層に分かりやすいように置いてください。

③ 保存された値をPHPで出力（呼び出す）しよう

次は「data.txt」に保存されているリスト内容を、WEBブラウザ側に表示させます。テキストファイルをPHPで一行ずつ呼び出して出力します。

■ソースコード

<?php
$FILE = 'data.txt';
print_r($FILE);

$DATA = [];
$BOARD= [];

if(file_exists($FILE)) {
    $BOARD = file('data.txt', FILE_IGNORE_NEW_LINES);
    //print_r($BOARD);
}

foreach($BOARD as $key => $DATA){
    echo $key;
    echo $DATA;
};

<?php

$FILE = 'data.txt';

print_r($FILE);

$DATA = [];

$BOARD= [];

if(file_exists($FILE)) {

$BOARD = file('data.txt', FILE_IGNORE_NEW_LINES);

//print_r($BOARD);

}

foreach($BOARD as $key => $DATA){

echo $key;

echo $DATA;

};

■ブラウザ表示

0電話のお問い合わせに返答する
1プログラミング学習１時間する
2運動解消でジョギング30分する

④ 作成したHTMLにファイル値を組み込んだ処理をしよう

HTML文で組まれた部分に、ファイルのリスト内容を出力したい箇所に表示されるように作成します。

・HTML文だけで表示されたリスト内容

HTML文で組まれたリスト内容は削除し、PHPでファイル内のリスト内容を入れ替えします。

実際に書き換える箇所は数行になります。

・PHPでのファイル値を出力してる部分

■ソースコード

foreach($BOARD as $key => $DATA){
    echo $key;
    echo $DATA;
};

foreach($BOARD as $key => $DATA){

echo $key;

echo $DATA;

};

・HTMLで実際に表示する部分

■ソースコード

<table>
<tr>
    <td>メールの返信をする</td>
    <td>
        <input type="hidden" name="del" value="">
        <input type="submit" value="削除">
    </td>
</tr>
</table>

<table>

<tr>

<td>メールの返信をする</td>

<td>

</td>

</tr>

</table>

上記のPHP部分とHTML部分が組み込まれて下記になります。

全体のコードになります。

■ソースコード

<?php
$FILE = 'data.txt';
$DATA = [];
$BOARD= [];

if(file_exists($FILE)) {
    $BOARD = file('data.txt', FILE_IGNORE_NEW_LINES);
}else{
    $FILE = fopen('data.txt', 'w');
    fclose($FILE);
}
?>

<!DOCTYPE html>
<html lang= "ja">
<body>

<table>
<?php foreach($BOARD as $key => $DATA): ?>
<tr>
    <td><?php echo $DATA; ?></td>
    <td>
        <input type="hidden" name="del" value="">
        <input type="submit" value="削除">
    </td>
</tr>

<?php endforeach; ?>
</table>

<hr>
<form method= "post">
    <input type= "text" name= "txt">
    <input type= "submit" value= "投稿">
</form>    

</body>
</html>

<?php

$FILE = 'data.txt';

$DATA = [];

$BOARD= [];

if(file_exists($FILE)) {

$BOARD = file('data.txt', FILE_IGNORE_NEW_LINES);

}else{

$FILE = fopen('data.txt', 'w');

fclose($FILE);

}

<!DOCTYPE html>

<body>

<table>

<?php foreach($BOARD as $key => $DATA): ?>

<tr>

<td>

</td>

</tr>

<?php endforeach; ?>

</table>

<hr>

</form>

</body>

</html>

■ブラウザ表示

⑤ リストを新規保存できるようにしよう

ファイルから呼び出して順序に表示させることはできましたので、次はリストの新規保存できるようにします。

■ソースコード

<?php
$FILE = 'data.txt';
$DATA = [];
$BOARD= [];

if(file_exists($FILE)) {
    $BOARD = file('data.txt', FILE_IGNORE_NEW_LINES);
}else{
    $FILE = fopen('data.txt', 'w');
    fclose($FILE);
}

if($_SERVER['REQUEST_METHOD'] == 'POST'){
    if(!empty($_POST['txt'])){
        $text = $_POST['txt'];
        $fp = fopen("data.txt", 'a');
        fwrite($fp, $text."\n");
        fclose($fp);
    }
    header('Location: '.$_SERVER['SCRIPT_NAME']);
    exit;
}

?>

<!DOCTYPE html>
<html lang= "ja">
<body>

<table>
<?php foreach($BOARD as $key => $DATA): ?>
<tr>
    <td><?php echo $DATA; ?></td>
    <td>
    <form action="" method= "post">
        <input type="hidden" name="del" value="">
        <input type="submit" value="削除">
    </form> 
    </td>
</tr>
<?php endforeach; ?>
</table>

<hr>
<form action="" method= "post">
    <input type= "text" name= "txt">
    <input type= "submit" value= "投稿">
</form>    

</body>
</html>

<?php

$FILE = 'data.txt';

$DATA = [];

$BOARD= [];

if(file_exists($FILE)) {

$BOARD = file('data.txt', FILE_IGNORE_NEW_LINES);

}else{

$FILE = fopen('data.txt', 'w');

fclose($FILE);

}

if($_SERVER['REQUEST_METHOD'] == 'POST'){

if(!empty($_POST['txt'])){

$text = $_POST['txt'];

$fp = fopen("data.txt", 'a');

fwrite($fp, $text."\n");

fclose($fp);

}

header('Location: '.$_SERVER['SCRIPT_NAME']);

exit;

}

<!DOCTYPE html>

<body>

<table>

<?php foreach($BOARD as $key => $DATA): ?>

<tr>

<td>

</form>

</td>

</tr>

<?php endforeach; ?>

</table>

<hr>

</form>

</body>

</html>

■ブラウザ表示

⑥ リストの一部を削除できるようにしよう

ファイルから呼び出して順序に表示させることはできましたので、次はリストの新規保存できるようにします。

■ソースコード

<?php
$FILE = 'data.txt';
$DATA = [];
$BOARD= [];

if(file_exists($FILE)) {
    $BOARD = file('data.txt', FILE_IGNORE_NEW_LINES);
}else{
    $FILE = fopen('data.txt', 'w');
    fclose($FILE);
}

if($_SERVER['REQUEST_METHOD'] == 'POST'){

    if(!empty($_POST['txt'])){
        $text = $_POST['txt'];
        $fp = fopen("data.txt", 'a');
        fwrite($fp, $text."\n");
        fclose($fp);
    }

    if(isset($_POST['del'])){
        $fp = fopen("data.txt", 'w');
        foreach($BOARD as $key => $NEWBOARD){
            if($key != $_POST['del']){
                fwrite($fp, $NEWBOARD."\n");
            }
        }
        fclose($fp);
    }

    header('Location: '.$_SERVER['SCRIPT_NAME']);
    exit;
}

?>

<!DOCTYPE html>
<html lang= "ja">

<body>

<table>
<?php foreach($BOARD as $key => $DATA): ?>
<tr>
    <td><?php echo $DATA; ?></td>
    <td>
    <form action="" method= "post">
        <input type="hidden" name="del" value="<?php echo $key; ?>">
        <input type="submit" value="削除">
    </form> 
    </td>
</tr>
<?php endforeach; ?>
</table>

<hr>
<form action="" method= "post">
    <input type= "text" name= "txt">
    <input type= "submit" value= "投稿">
</form>    

</body>
</html>

<?php

$FILE = 'data.txt';

$DATA = [];

$BOARD= [];

if(file_exists($FILE)) {

$BOARD = file('data.txt', FILE_IGNORE_NEW_LINES);

}else{

$FILE = fopen('data.txt', 'w');

fclose($FILE);

}

if($_SERVER['REQUEST_METHOD'] == 'POST'){

if(!empty($_POST['txt'])){

$text = $_POST['txt'];

$fp = fopen("data.txt", 'a');

fwrite($fp, $text."\n");

fclose($fp);

}

if(isset($_POST['del'])){

$fp = fopen("data.txt", 'w');

foreach($BOARD as $key => $NEWBOARD){

if($key != $_POST['del']){

fwrite($fp, $NEWBOARD."\n");

}

fclose($fp);

}

header('Location: '.$_SERVER['SCRIPT_NAME']);

exit;

}

<!DOCTYPE html>

<body>

<table>

<?php foreach($BOARD as $key => $DATA): ?>

<tr>

<td>

</form>

</td>

</tr>

<?php endforeach; ?>

</table>

<hr>

</form>

</body>

</html>

■ブラウザ表示

PHPでToDoListを作成するまとめ

TODOリストをPHPで動作するように簡単に作ってみましたががいかかだったでしょうか。わたしがまだ知識不足もありますので、しっかりした書き方でなかったり、セキュリティなども考慮しておりません。

最終的には、上記のようなTODOリストでデザインや機能拡充できるようにしたいです。ではカスタマイズは、ご自身で練習がてら取り組んでみてください。

月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31