Linux & Android Dialy

Todo チェック情報のDB反映

#11 チェック機能を実装してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9311
を元に
チェック情報をDBに反映させる

まず、どの要素なのか特定するために id を取得したいので

var id =$(this).parent().data('id');

現在の要素は

<input type="checkbox" class="checktask" <?php if($task['type']=="done"){
 echo "checked"; }?>>

なので
この input の親要素、つまり１つ↑の要素なので

<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">

ということになり li 要素の id となる

次にチェックボックスの状態を取得したいので

var title = $(this).next();

next() は、現在の要素の次の要素となるので
現在の input の次の

<span class="<?php echo h($task['type']); ?>"><?php echo h($task['title']); ?></span>

を指す

これで、
var title へ
notyet
done
delete
のどれかの状態が格納されることになる

そして、次に Ajax 処理になる

        $>post('_ajax_check_task.php',{id:id},function(rs){
        
        });

実際の処理をするのは
_ajax_check_task.php
で
渡すのは id
成功したときの処理は

function(rs){
}

の中に書く

まず、成功したときの処理を記述

	if(title.hasClass('done')){
                title.removeClass('done');
          }else{
                title.addClass('done');
          }

これは
.removeClass() で class=”done” を消して
.addClass() で class=”done” をつけている

こうすることで
チェックボックスがついているなら
class=”done” になり
ついていないなら、このクラスがついていないことになる

removeClass() については
http://semooh.jp/jquery/api/attributes/removeClass/class/

addClass() については
http://semooh.jp/jquery/api/attributes/addClass/class/
のリファレンスを参考にする

ここまでできたら
_ajax_check_task.php
を作成する

違いは sql の内容なので
cp _ajax_delete_task.php _ajax_check_task.php
でファイルをコピーして編集する

$sql ="update tasks set type = 'delete',modified = now() where id = :id";

の部分を
$sql =”update tasks set type = if(type=’done’, ‘notyet’, ‘done’) ,modified = now() where id = :id”;
とする

mysql では if 文による分岐ができるため
type=’done’ なら
notyet にして
そうでないのなら
done にするという判定処理ができる

その部分が

if(type='done', 'notyet', 'done') 

使い慣れた言語で書き換えてみると

if(type=='done'){
  type="notyet";
}else {
  type="done";
}

とおなじ意味になる

これは三項演算子をやったことがあると
イメージしやすいかもしれない

ここまでできたら
chrome で検証

チェックボックスのチェックを入れたり消したりして
無事に反映されれば成功

もし動作しないのなら
Ctrl + shift +i
で developer tools を起動して
console でエラーがでていないか確認

ToDo チェック機能の実装

#10 チェック機能を実装してみよう (1)
http://dotinstall.com/lessons/todo_app_php_v2/9310
を元にチェック機能を実装する

チェックボタンをつけるので、
index.php へチェックボックスを追加する

<li id="task_<?php echo h($task['id']); ?>" data-id="<?php echo h($task['id']); ?>">

の下に
チェックボックスを追加するため

<input type="checkbox" class="checktask" <?php if($task['type']=="done"){
 echo "checked"; }?>>

を追加する

intput type=”checkbox”
でチェックボックスを指定

if($task['type']=="done"

は、フラグが done つまり実行済みになっているなら

echo "checked";

でチェックボックスへチェックを入れている

また、チェック済みなら
タイトルの文章に打ち消しなどの表示効果でアクションをつけるようにする

このタイトル表示は

<?php echo h($task['title']); ?>

なのでこれを書き換える

まず span 要素をつけておく

<span class="<?php echo h($task['type']); ?>"><?php echo h($task['title']); ?></span>

これで、span 要素のクラス名が
done
delete
notyet
のどれかになるので

この type が done 、つまり実行済みで
チェックボックスにチェックが入っているなら　
span 要素へ
CSSを適用するようにする

.done{
                        text-decoration: line-through;
                        color:gray;
                }

text-decoration:は
打ち消し線とか
下線を引いたりできる

詳しい解説は
http://www.htmq.com/style/text-decoration.shtml
のリファレンスを参考にする

今回、指定した
line-through　は打ち消し線

そしてチェックボックスをクリックしたときの動作をつくる
これは jQuery で実装する

  $(document).on('click','.checktask',function(){

  });

というようにする
on() を使っているのは
PHP で動的に追加された要素に対する処理のため
引数の意味は
click が行う動作
.checktask が class=”checktask”
function() がそのときに行う処理
となる

on()
bind()
live()
などの違いは
http://tacamy.hatenablog.com/entry/2013/03/03/213113
を参考に

ToDo 削除をDBへ反映

#09 Todo更新情報をDBへ反映を削除してみよう (3)
http://dotinstall.com/lessons/todo_app_php_v2/9309
を参考に
Todo更新情報をDBへ反映 の削除情報をDBへ反映する

vim _ajax_delete_task.php
でファイルを開いて編集していく

まず

require_once('config.php');
require_once('functions.php');

で設定ファイルを読み込む

次に、functions.php で設定した
connectDb() でDB接続

次にsql を変数に格納
削除とはいっても
delete で実際に消すのではなく
フラグを変更することで、消したという判定にしている

$sql ="update tasks set type = 'delete',modified = now(), where id = :id";

modifiedは変更した時間なので
now() で現在時刻を指定

このsql を実行するため

$stmt = $dbh->prepare($sql);
$stmt->execute(array(":id"=> (int)$_POST['id']));

今回は、POST での値のため
id の配列指定は

(int)$_POST['id']

としている

(int) にしているのは、整数でないとダメなので
整数型に強制変換している

この強制変換はキャストといって
java とか C とかでも使われる

ここまでできたら
chrome をつかって検証

もし削除で消して、リロードして消えていないのなら
DB接続関連がおかしいので
_ajax_delete_task.php
のソースを確認する

残念ながら developer tools で
このエラーは発見できなかった

調べた結果

$sql ="update tasks set type = 'delete',modified = now(), where id = :id";

と、
now() のあとに , がついていたのが原因

これを修正したら、正常に稼働した

DBの中身を確認するため
mysql -u root -p
でログインして
use dotinstall
でDB選択

elect * from tasks;
で確認すると
type が delete
となっているのが確認できる