【第5回】プログラミング未経験だけどWebシステムを作ってやる!【TODOリスト完成】

前回までで、PHPを使ってデータベースにテーブルを作るまでをやりましたね
今回はそこからの続きです
読んでない方は読んでね!

というか、Webシステムを公開するまでを記事にしてるはずなのに
なんかPHP講座になってるのわけわからん
これだけは言っとくけど私はPHPマスターでもなんでも無い
駆け出しなんちゃってプログラマーです

間違いとかあると思うから、自分で調べてやってくれよ!

データベースを操作する

データベースを操作するにはSQL文というのを使います
テーブルを作るときに使っていたんですが、詳しくは自分で調べてください
投げっぱなしがこのブログですので
こことか見たらなんとなくわかってくるかなと思います
これで完璧!5分でわかるSQL文の基本!

テーブルを作った後は基本的に4つの文を使います

  • select文→データの参照
  • insert文→データの追加
  • update文→データの更新
  • delete文→データの削除

この4つをマスターすれば大丈夫、怖いものなんて無い
ホントはテーブル同士を結合したりとか、集計したりとか色々あるけど
基本がわかってないとなんとやら

todoのページを作る

さて、前回の「create_table.php」で「todo」テーブルを作りました。
今回は、TODOリストを表示して、タスクを追加したり、完了にしたり、削除できるようにしましょう

私にはHTMLやCSSの知識がほとんど無いので今回はBootstrapを使って、
モーダルとかを駆使して現代っぽいページを作ります
そんなわけで、とりあえず拡張子をhtmlでデザインを作ります

表示イメージ:sample-3/todo.html

こんな感じでセンスの欠片も無いフロントサイドが出来ました
このtodo.htmlの拡張子をphpに変えて色々機能を追加していきましょう

あれ?タスクの内容「カラム名content」を忘れてしまいましたね
まぁ、あとから考えたらタスクの内容や詳細いらない気がしてきたので無視しますw
ごめんなさいwww

todoページに機能を足していく

デザインが決まったので機能を足していきましょう
後出しで申し訳ないですけど、今回Ajaxという非同期通信技術を使います。
Ajaxについて知りたい方はこちら
初心者目線でAjaxの説明

Ajaxを使う理由ですが、様々な場面で非同期通信が使えたら楽になったり
ユーザビリティーがアップするので、最初から慣れておきましょう
私は、先程のリンク先を理解しているわけでは無いですが、
抽象的なイメージでこんな感じで便利!ってのをわかっているつもりですw

抽象的なイメージを持って、こうやれば使える!ってわかっていれば、
そこそこ動くものは作れてしまうものです。
ただし、より駆使したものを作る時にはしっかりとした基礎の知識が必要になるので
私みたいにならないでくださいw

はい、というわけでタスクを色々いじる機能を追加していきましょう!
Ajaxは最後に!

insert文でタスクを追加する

データベースに接続して、タスクを追加する
追加するのはタスク名と完了フラグですね
テーブル設定ミスったんですが、本当はあれですね
完了フラグにデフォルト値を設定しておけば追加する必要無いですね

てなわけで、データベースに接続してタスクを追加するコードです

さて、ただ追加するだけではなく色々使いましたね
if(isset~の辺りはモーダルで入力された値を取得するコードになります。
ちなみにissetや、emptyなどを使いますが、PHPはデータ型を明確に指定しなくて良い分、
この判定が思わぬ動作をしたりします。

はじめのうちは、下記サイトを見て判定したいデータがどんな型の値かを意識して使っていきましょう
PHP isset, empty, is_null の違い早見表

update文でタスクを完了にする

タスクが追加できれば、次はタスクを完了にしなければなりません
タスクを完了にするには、update文でflagの値を変更する必要があります

では上のコードに追加する形で以下のコードを突っ込みます

delete文でタスクを消す

本当に必要かどうかは別として、データベース操作に慣れるために
タスクを消す機能も追加してあげましょう
上のコードに追加する形で以下のコードを突っ込みます

select文でデータを取得する

追加、変更、削除を追加してからデータを取得しましょう
てなわけで、個人的には一番上が良いので一番上に以下のコードを突っ込みましょう

てなわけで以下コードを突っ込むんだい!

ORDER BYは取得する時の並び順です
この書き方だと、flagカラムの値を昇順で並び替えてから、idカラムの値を昇順で並び替えます
つまり未完が上に来て、idの若い(登録日が古い)順に並び替えてくれます

よし、これで冒頭の4つのSQL文を使えました

では、todo.phpの作成に入りましょう

と、その前にAjaxですねー

Ajaxを追加

Ajaxの機能を追加しましょう!
何のために使うかというと、完了に変更や削除のときにモーダルで表示されます
その時のタスク名を出すために使います。

foreachでモーダルをいっぱい作る方法もありますが、
タスクの数と生成されるhtml量が比例されて、重くなるので
避けた方がいいと考えてAjaxで値を取得してきます。

てなわけで、<head></head>の間に下記コードを突っ込みましょう

多分JavascriptやJQuery、Ajaxに詳しい人からすると色々言いたいと思いますが、
私はよく理解していないので、これで実装させてますw
問題があったり、もっとスッキリさせる方法があれば是非教えてください・・・

じゃあ、Ajaxで指定している task.phpを作りましょう
task.phpはselectでデータを取得してくるだけです

はい、こんな感じですね

それでは、todo.phpを作り変えていきましょう

todo.phpを作り上げる

色々とコードを追加してして!って書いたせいで、その通り進めた方が万が一いれば、
なんかよくわからないことになっていると思います

実は記事を書きながらコードを書いていっているので、私もよくわからないことになってたりしますw

まぁとりあえずforeachやifを使って最終的にはこんな感じになりました~

とまぁ、こんな感じですかね
動作サンプル:sample-3/todo.php

実際に追加とかできるので色々試してみてください

今回、一つのphpに全て書きましたが、
実際は処理別にファイルを分けたりして読み込ませる方がいいです。
約300行の中から、修正したい場所を探すのは大変ですからね

また、下記の設定コード

これを実行するPHPに書き込んでいると、悪い人が何らかの方法を使って
IDとパスワードを盗んだりできてしまうので、別ファイルにして読み込ませましょう

今回はここまでです

次回は?

最後に触れた、別のファイルを読み込ませる方法
今回作ったタスクリストはみんなで編集できてしまうので、
ユーザー毎に自分用のリストを作れるようにしましょうかね

ここまでできれば、会員制のWebシステムが出来てしまうのだ!
今回長かったから改ページした方がいいのか?
わからん!

それでは~