ajaxによるTODOアプリ作成

ajaxとは？

Ajaxとは，Asynchronous Javascript+XMLの略称です。 Javascriptを使い，Webページとは非同期（Asynchronous）にXML形式（もしくはテキスト形式）のデータ通信を行う手法を指します。 Ajaxを使うと特別なプラグインなどを必要とせず，Webページの必要な部分だけ必要に応じて書き換えることができるため，ユーザビリティの高いWebアプリケーションを作ることができます。また，異なるWebサービスをまとめたりすることもできるため，既存のWebサービスから別の価値を生み出すWebアプリケーションを作ることができます。

今回はブラウザ上の動きをJavaScriptで制御し、PHPでデータベースの操作を行うということらしっす。

つまり、JavaScriptとPHPを使うことで、画面上でのデータの消去・修正・追加とデータベース側でのデータの消去・修正・追加を別々に行われているらしいってことみたいです。今回のポイントは画面遷移をしないで、全ての処理をしている点です。

XamppのMySQLのphpMyAdminでデータベースajax(データベース名ajax,照合順序utf8_general_ci)を作成。

作成したデータベースajaxをクリックして、テーブルajax(テーブル名ajax,カラム数3)で

実行。

名前	データ型	照合順序	インデックス	A_I
id	INT		primary	レ(チェックを入れる)
title	TEXT	utf8_general_ci
disp	INT

空白部分は特に記入する必要はありません。

ファイルを6つ用意します。

index.php

<?php
require_once('config.php'); //config.phpファイルの呼び出し
require_once('function.php'); //function.phpファイルの呼び出し

$dbh = db_connect( );
$tasks = array( );
$sql = "select * from ajax where disp = 0";

foreach( $dbh->query( $sql ) as $row ){
array_push( $tasks , $row );
}
//var_dump($tasks);
?>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>TODOアプリ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function( ){
$('#title').focus( );

$("#add").click(function( ){
var title = $("#title").val( );
$.post('add.php',{title:title},function(rs){
var e = $('<li id="task_'+rs+'"data-id="'+rs+'"><span></span> <button class="edit">編集</button><button class="delete">削除</button></li>');
$('#tasks').append(e).find('li:last span:eq(0)').text(title);
$('#title').val('').focus( );
}); //27行目のfunctionの締め
}); //25行目のfunctionの締め

$(function(){
$(document).on('click','.delete',function(){
if(confirm('本当に削除しますか？')){
var id=$(this).parent().data('id');
$.post('delete.php',
{
id:id
},function(rs){

$('#task_'+id).fadeOut(800);
});
} //36行目のifの締め
}); //35行目のfunctionの締め
}); //34行目のfunctionの締め
//空
$(document).on('click','.edit',function(){
var id = $(this).parent( ).data('id');
var title = $(this).prev( ).text( );
$('#task_'+id ).empty( ).append($('<input type="text">').attr('value',title)).append('<input type="button" value="更新" class="update">');
$('#task_'+id+'input:eq(0)').focus( );
}); //49行目のfunctionの締め

$(document).on('click','.update',function(){
var id = $(this).parent( ).data('id');
var title = $(this).prev().val();

$.post('update.php',
{
id:id,
title:title
},function(rs){
var e = $('<span></span><button class="edit">編集</button><button class="delete">削除</button>');
$('#task_'+id).empty( ).append(e).find('span:eq(0)').text(title);
}); //
});

}); //22行目のfunctionの締め

</script>
</head>

<body>
<h1>TODOアプリ</h1>
<input type="text" id="title">
<input type="button" id="add" value="追加">
<ul id="tasks">
<?php foreach($tasks as $task):?>
<li id="task_<?php echo h($task['id']);?>" data-id="<?php echo h($task['id']);?>"><span><?php echo h($task['title']);?></span><button class="edit">編集</button><button class="delete">削除</button></li>
<?php endforeach; ?>
</ul>
</body>
</html>

config.php←DB(データベース)に接続する時に必要なデータを定数にしたファイル。

<?php
//DBに接続するデータを定数にしている(function.phpで使う定数を定義している。)
define('DSN','mysql:host=localhost;dbname=ajax;charset=utf8'); //MySQLのホストとDBの名前の情報
define('DB_USER','root'); //MySQLのユーザー名
define('DB_PASSWORD',''); //MySQLのパスワード

function.php←データベースに接続する関数とhtmlspecialcharsを使いやすくする関数をまとめたファイル。

<?php
function db_connect(){
try{
return new PDO(DSN,DB_USER,DB_PASSWORD); //MySQLへ接続　どこかにDSN,DB_USER,DB_PASSWORDをそれぞれ定義する必要がある
}catch(PDOExcepttion $e){ //接続できなかった場合$eへエラーが格納される
echo $e->getMessage(); //エラーメッセージを出力
exit;
}
} /*function db_connect()の締め、今回はデータベース関数と呼ぶことにします。*/

function h($s){
return htmlspecialchars($s, ENT_QUOTES, "UTF-8"); //htmlspecialcharsを使用しやすくするため関数化
}

delete.php←削除ファイル。

<?php
require_once('config.php'); //configファイルの読み込み
require_once('function.php'); //functionファイルの読み込み

$dbh = db_connect(); //function.phpで作っていたデータベース関数を$dbhに代入。

$sql = "update ajax set disp = 1 where id = :id"; /*テーブルajaxのid=:idのカラムをdisp=1に上書きします、というsql文を発行。$sqlに代入します。*/

$stmt = $dbh->prepare($sql); /*$dbhに$sql(上記のsql文を実行するため)の準備をさせる、それを$stmtに代入します。*/
$stmt->execute(array(":id" => $_POST['id'])); /*:idが$_POST['id']だった時、$stmtを実行する。*/

update.php←修正ファイル。

<?php
require_once('config.php'); //configファイルの読み込み
require_once('function.php'); //functionファイルの読み込み

$dbh = db_connect( ); //function.phpで作っていたデータベース関数を$dbhに代入。

$sql = "update ajax set title = :title where id = :id;"; /*テーブルajaxのid=:idのカラムをtitle=:titleに上書きします、というsql文を発行。$sqlに代入します。*/
$stmt = $dbh->prepare($sql); /*$dbhに$sql(上記のsql文を実行するため)の準備をさせる、それを$stmtに代入します。*/
$stmt ->execute(array(":id"=>$_POST['id'],":title"=>$_POST['title'])); /*:idが$_POST['id']、:titleが$_POST['title']だった時、$stmtを実行する。*/

add.php←追加ファイル

<?php
require_once('config.php'); //configファイルの読み込み
require_once('function.php'); //functionファイルの読み込み

$dbh = db_connect( ); //function.phpで作っていたデータベース関数を$dbhに代入。

$sql = "insert into ajax (title,disp) values(:title.1)";
$stmt = $dbh->prepare($sql);
$stmt->execute(array(":title"=>$_POST['title']));
echo $dbh->lastInsertId();