カテゴリー: PHP + MySQL

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
となっているのが確認できる

Todo削除リンククリック時の挙動設定

#08 Todo更新情報をDBへ反映を削除してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9308
を元に
削除リンククリック時の挙動を作成

編集するのは index.php

削除するには li要素の id が必要になるので

<?php foreach($tasks as $task) :?>
<li>

の li へ id をつける

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

とすることで
foreach() でループしたぶんだけ idが割り当てられる

なお config.php で h() を作成して
出力される文字を無害化するのを忘れずに

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

は
task_数値

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

は
数値

というように出力される

これで

        if(confirm('本当に削除しますか？')){
                        
        }

で
この割り当てた id を使って id を引っ張ってくる

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

とする

$(this)
は、現在の要素、つまり
今回なら

<span class="delete-task">[削除]</span>

を意味する

.parent() は、その親要素という意味なので

<span>

の親要素は

<li>

となる

.parent().data('id')

なので、
li 要素の id ということで

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

になる

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

ではないので注意

.parent() については
http://www.jquerystudy.info/reference/traversing/parent.html
のリファレンスを参考にする

構文は .parent(セレクタ)
セレクタは、html の要素
今回から li　になっている

.data() については
http://semooh.jp/jquery/api/internals/jQuery.data/elem,+name/
のリファレンスを参考に
.data() は指定された名前の値をかえす

今回なら.data(‘id’)なので
id=”” の部分の値をかえす

次にDBで削除処理する Ajax ファイルを作っていく

$.post('_ajax_delete_task.php',{
                id:id,
          },function(rs){
                $('#task_'+id).fadeOut(800);
          });

.post() は
POSTでページを読み込む関数
http://semooh.jp/jquery/api/ajax/jQuery.post/+url%2C+data%2C+callback%2C+type+/
のリファレンスを参考にする

引数の意味は
‘_ajax_delete_task.php’
が読み込むURL

id;id
が、キーと値の組み合わせ

function(rs){
}
が通信成功のときの処理になる

このときに渡すのは 該当する taskのid になるので
id:id,

終わったときの処理は[/php]
function(rs){

}[/php]
の中に書く　

このときの処理は

$('#task_'+id).fadeOut(800);

で、該当する id の li 要素を
.fadeOut() を使って
指定したミリ秒でフェードアウトする
今回なら 0.8秒になる

$(‘#task_’+id)は

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

のこと

とりあえず
touch _ajax_delete_task.php
でファイルだけつくって
実行

chrome の developer tools で確認して
エラーがないけどうまく起動しないため
vim index.php_post
でファイルを作成して
ソースをコピペ
diff -w index.php index.php_post
で違いを比較したところ

  $(document).on('click','.delete-task',function(){

が

  $(document).on('cluck','delete-task',function(){

というように
click が cluck だったり
.delete-task の .　がなかったりしてうまくいかなかた
これを修正して再度実行すると成功した

todo 削除リンク作成とクリック時の処理

#07 Todo更新情報をDBへ反映を削除してみよう (1)
http://dotinstall.com/lessons/todo_app_php_v2/9307
を参考に、Todo更新情報をDBへ反映 を削除するリンクを作って
クリックしたときの処理を作成する

また
今後多用する jQuery の .on() については
http://www.jquerystudy.info/reference/events/on.html
の解説を参考にするとわかりやすい

昔のソースだと
.bind() でかかれているのもあるけど
この .bind() の場合
動的に追加した要素にイベントを設定できない

ではまずはリンクを作成したいので
index.phpを編集する
[pho]
[/pho]
の下に
span 要素を追加する
[pho]
[削除][/pho]

span要素は、それ自体は何の意味ももたないけど
CSSとか java script などと合わせることで
いろいろ使える
http://www.tohoho-web.com/html/span.htm
のリファレンスが参考になる

そして、このspan をCSS適用でリンクボタンのように
見せる

        <style>
                .delete-taks{
                        cursor: pointer;
                        color: blue;
                }
        </style>

とする

curosr :pointer 

とすると、リンクボタンのようになる

.delete-task は id=”delete-task” という意味

今回 span 要素を使っているのは、リンクするためではなく、クリックするのをつくるため

次に

<span class="delete-task">[削除]</span>

をクリックしたときのQuery で書く

<script>
$(function(){

});
</script>

jQuery を扱うにはこの中へ書いていく

クリックしたときの処理をするには
.on() を使う

  $(document).on('cluck','delete-task',function(){

  });

on() の引数は
動作 =クリックなので click
対象 = id=”delete-task”のところ
行う処理 = function(){} の中身
となる

で行う処理は

        if(confirm('本当に削除しますか？')){
        
        }

というように
確認ダイアログを confirm() で出している

confirm() については
http://www.htmq.com/js/window_confirm.shtml
のリファレンスを参考にする

DBのTODOデータをHTMLへ反映

#06 Todo更新情報をDBへ反映の一覧を表示してみよう (2)
http://dotinstall.com/lessons/todo_app_php_v2/9306
を元に
jQuery/jQuery UIを読み込んで
DBのToDo データをHTMLへ反映する

PHPでは、HTMLと組み合わせて使うけど
他の言語と比べて
for とか if の条件分岐などの制御が少しわかりにくい
これは HTML の中でPHPのソースが混じるのが原因
制御構造に関する構文について
http://www.php.net/manual/ja/control-structures.alternative-syntax.php
を参考にしておくとわかりやすくなる

これらを参考にしながら
まずは index.php へ
jQuery と jQuery UI のライブラリを読み込む

インターネットからアクセスするか
もしくはダウンロードしてファイルを読み込む

基本的にサーバーで行うweb アプリなら
ネットには常時接続なので
リンクするほうを使う

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

を HTML の meta 要素へ追記

次に、$tasks の中身をHTMLへ表示する

リスト形式で表示するので

<ul>
<?php foreach($tasks as $task) :?>
<li>
<?php echo h($task['title']); ?>
</li>
<?php endforeach; ?>
</ul>

とすれば
$tasks のデータの分だけループして
リスト表示してくれる

ちなみに、私の環境の場合
ブラウザで文字化けしたため

config.php で

define('DSN','mysql:host=localhost;dbname=dotinstall_Todo更新情報をDBへ反映_app;charset=utf8');

というように

;charset=utf8

を追記して
文字コードを指定している

今回、この対処は
http://otukutun.hatenablog.com/entry/2013/02/06/171150
を参考にさせていただきました

todo の一覧表示

#05 Todoの一覧を表示してみよう (1)
http://dotinstall.com/lessons/todo_app_php_v2/9305
を参考に
DB接続して データを表示

まず、index.phpを作る

いつもどおり、設定ファイルを読み込む

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

次にDB接続

$dbh = connectDb();

次に、タスクを表示するには、配列を用意して
そこに入れる
これはSQLで行う

$sql ="select * from tasks where type != 'delete' order by seq";

これで
状態が delete になっていないものを選んでいる

このデータを引っ張ってくるには

foreach($dbh->query($sql) as $row){

として
SQL実行結果を $row へ格納

array_push($tasks,$row);

で
$tasks という配列へ
実行結果である$row を追加していく

$tasks[] = $row;

としても同じ意味になる

array_push()
は要素を配列の最後に追加する関数
詳しくは
http://php.net/manual/ja/function.array-push.php
のリファレンスを参考に

そして値の確認をしたいので
var_dump() を使って中身を確認する

var_dump($tasks);

これで格納されているデータをみることができる
確認できたら　var_dump($tasks) はコメントアウト

これを表示したいのでHTMLを書いていく

<!DOCTYPE html>
<html lang="ja">
<head>
        <meta charset="utf-8">
        <title>Todoアプリ</title>
</head>
<body>
<h1>Todoアプリ</h1>


</body>
</html>

これがベースとなるHTMLのソース

todo アプリの共通設定

#04 アプリ共通の関数を作ろう
http://dotinstall.com/lessons/todo_app_php_v2/9304
を参考に
共通設定ファイルの config.php
関数ファイルの functions.php を作成する

まず、config.php
でエラー標示の設定
NOTICE 以外のすべてのエラーを表示するので

error_reporting(E_ALL & -E_NOTICE);

error_reporting() については
http://php.net/manual/ja/function.error-reporting.php
のリファレンスを参考にする

次に、よく使う関数は functions.php に書いておく

DB接続関数
connectDb()

データをHTML出力のときにエスケープする関数
h()
を作成する

まずは、h() から
これは、htmlspecialchars() の設定

htmlspecialchars() については
http://php.net/manual/ja/function.htmlspecialchars.php
のリファレンスを参照

今回は

function h($s){
        return  htmlspecialchars($s,ENT_QUOTES,"UTF-8");
}

引数の意味は
$s が文字列
ENT_QUOTES が変換パラメータで
シングルクオートが

 '''

(あるいは

'

) になる
UTF-8 は文字コード

次に、connectDb()

function connectDb(){
        try{
                return new PDO(DSN,DB_USER,DB_PASSWORD);
        }catch(PDOException $e){
                echo $e->getMessage();
                exit;
        }
}

基本的に、 try{} 部分には成功したときの処理
catch{} には失敗したときの処理を書く

今回は、成功したら

 return new PDO(DSN,DB_USER,DB_PASSWORD);

でDB接続

失敗したら

                echo $e->getMessage();
                exit;

でエラーを表示して終了

アプリ共通設定の設定

#03 アプリ共通の設定をしよう
http://dotinstall.com/lessons/todo_app_php_v2/9303
を参考に
DBへ仮データの挿入
そしてアプリ共通の設定ファイルになる config.php を作成する

まずはデータの挿入

insert into tasks (seq,type,title,created,mdified) values
(1,'notyet','本を購入',now(),now()).
(2,'notyet',提案書作成',now(),now()),
(3,'done',英文日記',now(),now());

これを保存したら
mysql -u root -p < Todo更新情報をDBへ反映.sql を実行して mysql root のパスワードを入力 これでDBが作成されるので mysql -u root -p でログインして[sql] use dotinstall_Todo_app; desc tasks;[/sql] でテーブルを確認 [sql] select * from tasks;[/sql] でデータも挿入されていることを確認する 次に、config.phpを作成して 定数を記入していく

個人利用のPHP/jQueryで作るToDoアプリのDB作成

#02 データベースの設定をしよう
http://dotinstall.com/lessons/todo_app_php_v2/9302
を参考に
DBを設定

実行環境は vagrant で作成したローカル開発環境
　
まずは、作業ディレクトリ作成

vagrant ssh で接続して
mkdir /var/www/html/todo_app_php/
cd /var/www/html/todo_app_php/

今回も、sqlファイルを作成し読み込む

vim Todo更新情報をDBへ反映.sql
でファイルを作成して
SQL を書いていく

以下はソースと解説メモ

create database dotinstall_Todo更新情報をDBへ反映_app;

grant all on dotinstall_Todo更新情報をDBへ反映_app.* to dbuser@localhost identified by '3EwruTrE';

use dotinstall_Todo更新情報をDBへ反映_php;

create table tasls(
id int not null auto_increment primary key,
seq int not null,
type enum('notyet','done','delete') default 'notyet',
title text,
created datetime,
modified datetime,
KEY type(type),
KEY seq(seq)
);

自動連番で主キーになるように

id int not null auto_increment primary,

今回は並び替えをするので
並び替えの順番をシークエンスという意味で seq を作成

seq int not null,

タスクが終わっているか否かという状態を
notyet まだ終わっていない
done 終わった
deleted 削除された
という意味で
デフォルトは追加された時点なら
notyet になるようにする

 type enum('notyet','done','deleted') default 'notyet',

タスクのタイトルをテキスト管理するので

title text,

作成と変更時刻のため

created datetime,
modified datetime,

そしてインデックス作成のため

KEY type(type),
KEY seq(seq)

としている