月別: 2013年8月

データ削除フラグによる削除の実装
#17 データを削除してみよう (3)
http://dotinstall.com/lessons/contacts_php_v2/9817
を元に
削除をおした時に、件数が反映されていないので
これを修正する
これを実装するには
span 要素に id=”num” というように id を振ってコントロールできるようにする
<p><span><?php echo count($entries); ?></span>件あります。</p>
を
<p><span id=”num”><?php echo count($entries); ?></span>件あります。</p>
と変更する
次に、jQuery 部分のソース変更
confirm() の if のところで
var num = $(‘#num’).text();
.text() は、中身の取得をする関数
そして、
num–;
とすれば、件数を引くことができる
計算はできているけど、これだけでは
表示している件数は変わらない
変更するには
$(‘#num’).text(num);
というように
.text() に num をセットすれば変更が反映される
とりあえず、ここまでできたら、動作確認
Google Chrome で
developer console を起動して、エラーなしを確認
これで、実際に行ってみると、削除すると件数が変わるのを体験できる

jQueryとAjaxを使ってデータの削除処理を実装
#15 データを削除してみよう (1)
http://dotinstall.com/lessons/contacts_php_v2/9815
を元に
jQueryとAjaxを使ってデータの削除処理を実装
編集するファイルは
admin/index.php
まず、jQuery を使うので、ライブラリの読み込み
HTMLの head　要素の中に
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
を追記
deletelink に対してクリックされたときの処理を
jQuery で実装する
書き込み場所は
お問い合わせフォームへのリンクの下あたり
$(function(){
$(‘.deletelink’).click(‘function(){
if(confirm(“削除してもよろしいですか？”)){
$.post(‘./delete.php’,
.deletelink は
class=”deletelink” という意味
. は jQuery ではクラスを意味する
confirm() は java script で 確認ウインドウを開く
“”の中に書いた
削除してもよろしいですか？は
そのときにでるメッセージ
これは
Step.17 – 確認ウィンドウで問い合わせる
http://www.red.oit-net.jp/tatsuya/java/confirm.htm
がわかりやすい
$.post() は
ajax jQuery を使ったPOST送信
これを使うと、複雑な$.ajax() を使わずに
サーバーと通信できる
http://semooh.jp/jquery/api/ajax/jQuery.post/+url,+data,+callback,+type+/
を参考にするとわかりやすい
書式としては
$.post(url, data, callback, type)
となる
$.post(
‘./delete.php’,
{ id: $(this).data(‘id’)},
function(rs){
$(‘#entry_’ +rs).fadeOut(800);
});
}
});
コールバック関数で消したいのは li 要素なので
li要素に id をつける
<li id=”entry_<?php echo h($entry[‘id’]); ?>”>
とする
PHPで 呼び出しているので
ループしている間、自動的に id を付与してくれる
また、コールバック関数内で
rsに id が入るようになるので
entry_ + rs だと
id=1 なら entry_1 となる

削除フラグ設定
#14 削除フラグを設定しよう
http://dotinstall.com/lessons/contacts_php_v2/9814
を参考に、削除フラグで管理できるようにDB設定を変更
今までは、DBのレコードから直接削除だったけど
今回は削除フラグを立てて、
そこから削除するようにしていく
初期のDB設計のときに設定が抜けているため
DBの設定を変更する
DBの変更には alter コマンドを使う
alter table entries add status enum(‘active’,’deleted’) default ‘active’ after memo;
このSQLを実行することで
テーブルに追加される
after memo となっているので
memo の後ろに追加される
default ‘active’ となっているので普通に挿入したら
active 扱いになる
mysql -u root -p でログインすると
DB移動が面倒なので
mysql -u dbuser -p dotinstall_contacts_php
として
dbuser のパスワードを入れれば
一回で今使っているDBにログインできる
まずは、この状態を確認するため、
desc entries;
で現状を確認
そして
今回の alter コマンドを実行
desc entries;
で確認すると
新しい項目ができているのが確認できる
DB設計の変更ができたら、管理画面である
admin/index.php も変更する
$sql のところのSQL文を
select * from entries where status = ‘active’ order by created desc
として、active 状態のものだけ表示するようにする
こうすることで
削除をえらんだ時に
レコードを抹消するのではなく、
status を active から deleted に変更するというようになる
おそらく、このフラグをつくるというのは
ゲーム作成などでも使えると思うので、今後の参考にしようと思う

DBからの一覧表示
#13 お問合せの一覧を表示しよう (2)
http://dotinstall.com/lessons/contacts_php_v2/9813
を参考に
DBの出データをリスト形式で表示し、
必要なリンクを設定
var_dump($entries);
exit;
で中身の表示ができたら、これをコメントアウト
/admin/index.php の
HTML部分を編集していく
まず、格納されている件数を表示するには
$entries の件数をカウントすればいいので
<?php echo count($entries); ?>件あります
とすれば、
count() によりカウントして数値を表示してくれる
count() に関しては
http://php.net/manual/ja/function.count.php
のマニュアルを参照
これは要素の数を数える関数
そして、リスト表示は
foreach() と echo を使ってループで作成する
この手法は
Web API で取得した結果をリスト表示するのにも
よく使われる
例えば、検索ワードでヒットした結果を
リスト表示するとか、
キーワードにリンクした
アフィリエイトのリンクをリスト表示するなどなど
今回はPHPだけど java script なら
phone gap などでハイブリッドアプリにして
リリースも可能
今回の場合だと
一覧表示を作って
そこに出てきたEメールアドレスをリスト表示して
削除
編集
のリンクもつけたリストを作成している
<ul>
<?php foreach($entries as $entry) :?>
<li>
<?php echo h($entry[‘email’]); ?>
<a href=”edit.php?id=<?php echo h($entry[‘id’]); ?>”>[編集]</a>
<span class=”deletelink” data-id=”<?php echo h($entry[‘id’]); ?>”>[削除]</span>
</li>
<?php endforeach; ?>
</ul>
<?php echo h($entry[‘email’]); ?>
でEメールの表示
<a href=”edit.php?id=<?php echo h($entry[‘id’]); ?>”>[編集]</a>
で編集リンクの作成
<span class=”deletelink” data-id=”<?php echo h($entry[‘id’]); ?>”>[削除]</span>
で削除という表示を作成
<style>
.deletelink {
color:blue;
cursor: pointer;
}
</span>
とすることで、リンクっぽくしている
cursor: pointer;
はリンクカーソル
詳しい解説に関しては
★スタイルシートリファレンス
http://www.htmq.com/style/cursor.shtml
を参照