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

PHPを学習したので、PHPプログラミング初心者向けに、何か一つ制作の流れをご紹介します。学んだあとは実際に何か一つ制作してみるのがスキルアップにつながるでしょう。ここではわたしの低いレベルでの知識を元に、ToDoリストを作ってみました。
TODOリストをPHPで書く前にすること!
ToDoリストは、仕事だけでなく私用の日常生活でも、やるべきことをリスト化してくれる手法(ツール)になります。
そんなToDoリストですが、パソコンやスマホで扱える自分用のWEBアプリとして、PHPプログラミングで作ってみることにしました。
PHPプログラミングでTODOリストを作る準備
まずはどんなToDoリストを作りたいかを、下書きしながら考えてみましょう。自分用のToDoリストをPHPプログラミングで作りますが、はじめは簡単なものから作っていきましょう。
ToDoリストに必要な機能
ToDoリストではまずどのような機能が必要で、どんな仕組みにすればよいか簡単にまとめてみましょう。
・やりたいリストを複数表示できるようにする
・やり終わったリストを削除する
自分がToDoリスト(やりたいこと)したいものを書けば、その値を保存をしてもらい、リスト作業が終了したら削除することができるようにします。リストは複数表記できるようにしなければなりません。
ToDoリスト作りに必要な知識
今回はPHP初心者向けなので、CSSやJavaScript またはフレームワークなどは習得度を考慮して使用しません。ここで完成したあとは次回のステップアップとして、見映えよくしたり機能を拡張したりと挑戦していけばよいでしょう。
ToDoリストのデータ保存形式
ToDoリストで重要なのは、ToDoリスト化されたリストデータを保存する機能にします。データを保存するやり方として、ファイル、ブラウザ、サーバー、DBなどありますが、今回はシンプルなファイル保存で作成します。
ToDoリストサンプル図
ToDoリストに必要な最低限の機能であれば下記イメージ図になります。ここからは実際にイメージを参考にToDoリストを作っていきましょう。
・TODOリスト事例1
・TODOリスト事例2
・TODOリスト事例3
今回はToDoリスト一つにしても複数の作成方法がありますが、今回は初学者向けにシンプルなのに決めました。
ワンクリックで新規追加できたり、削除できるのがPHPで作成する場合は簡単なはずです。
・TODOリスト事例4
TODOリストをPHPで書いてみよう!
ToDoリストを作る準備やイメージができたので、それでは実際に作成していきましょう。
① WEBブラウザにHTMLデザインしよう
まずはHTMLのみだけでWEBブラウザに表示される部分を書いていきましょう。あとで修正が増えますのでまずはシンプルに作ります。
■ソースコード
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 32 33 34 35 36 |
<!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> |
今回のファイル名は、HTMLのみで書きましたが後々にPHPコードも追記しますので、PHP拡張子で作成してください。
ここでは、「todo.php」にしましょう。
■ブラウザ表示
ToDoリストをHTMLのみで作成してみましたが、はじめにイメージした通りにできるはずです。書き方はそれぞれありますが、ここでは初学者向けとして、コードを省略したり本来とは違う書き方をしている場合もあります。
② 値を保存するファイルを準備しよう
次にToDoリストをPHPで動作させるには、リスト化された値を保存するファイルが今回必要になります。そこで先にファイルを作成して適当にリスト値を保存してみましょう。
・Windowsの場合、タスクバーの左下にある検索「ここに入力して検索」より、「notepad」と入力するとメモ帳が起動します。
・Windowsの他の場合、画面左下にあるタスクバーのWindowsスタートメニューをクリックし、Windowsアクセサリをさらにクリックすると、メモ帳があるのでクリックすれば起動します。
今回ファイルに保存するリスト内容は下記にしました。
・電話のお問い合わせに返答する
・プログラミング学習1時間する
・運動解消でジョギング30分する
■ファイル内


③ 保存された値をPHPで出力(呼び出す)しよう
次は「data.txt」に保存されているリスト内容を、WEBブラウザ側に表示させます。テキストファイルをPHPで一行ずつ呼び出して出力します。
■ソースコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<?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プログラミング学習1時間する
2運動解消でジョギング30分する
④ 作成したHTMLにファイル値を組み込んだ処理をしよう
HTML文で組まれた部分に、ファイルのリスト内容を出力したい箇所に表示されるように作成します。
HTML文で組まれたリスト内容は削除し、PHPでファイル内のリスト内容を入れ替えします。
実際に書き換える箇所は数行になります。
・PHPでのファイル値を出力してる部分
■ソースコード
1 2 3 4 |
foreach($BOARD as $key => $DATA){ echo $key; echo $DATA; }; |
・HTMLで実際に表示する部分
■ソースコード
1 2 3 4 5 6 7 8 9 |
<table> <tr> <td>メールの返信をする</td> <td> <input type="hidden" name="del" value=""> <input type="submit" value="削除"> </td> </tr> </table> |
上記のPHP部分とHTML部分が組み込まれて下記になります。
全体のコードになります。
■ソースコード
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 32 33 34 35 36 37 38 |
<?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> |
■ブラウザ表示
⑤ リストを新規保存できるようにしよう
ファイルから呼び出して順序に表示させることはできましたので、次はリストの新規保存できるようにします。
■ソースコード
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<?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> |
■ブラウザ表示
⑥ リストの一部を削除できるようにしよう
ファイルから呼び出して順序に表示させることはできましたので、次はリストの新規保存できるようにします。
■ソースコード
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<?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でToDoListを作成するまとめ
TODOリストをPHPで動作するように簡単に作ってみましたががいかかだったでしょうか。わたしがまだ知識不足もありますので、しっかりした書き方でなかったり、セキュリティなども考慮しておりません。
最終的には、上記のようなTODOリストでデザインや機能拡充できるようにしたいです。ではカスタマイズは、ご自身で練習がてら取り組んでみてください。