ワンソースでデータベース定義、PHP・JavaScript・HTML全てのソースコードを含んでいるので分かりやすいかも知れません。
その代わり、AngularJSのお作法などはかなり省略しているのでご注意。
以下のPHPソースをWebサーバーに置いてブラウザで開くと、todo.dbという名前のデータベースを作成してToDoの格納・削除・完了マークを付ける操作をすることが出来ます。
todo.php
<?php
$db = new PDO('sqlite:todo.db');
$db->exec('CREATE TABLE IF NOT EXISTS todo(id INTEGER PRIMARY KEY, title TEXT, completed INTEGER)');
if (isset($_GET['id'])) {
switch ($_SERVER['REQUEST_METHOD']) {
case 'GET':
echo json_encode($db->query('SELECT * FROM todo')->fetchAll(PDO::FETCH_ASSOC));
break;
case 'POST':
$in = json_decode(file_get_contents('php://input'), true);
if (isset($in['id'])) {
$db->prepare('UPDATE todo SET completed=? WHERE id=?')->execute([$in['completed'], $in['id']]);
} else {
$db->prepare('INSERT INTO todo(title,completed) VALUES(?,0)')->execute([$in['title']]);
}
break;
case 'DELETE':
$db->prepare('DELETE FROM todo WHERE id=?')->execute([$_GET['id']]);
break;
}
exit;
}
?>
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="UTF-8">
<title>ToDo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular-resource.min.js"></script>
<script>
angular.module('app', ['ngResource']).controller('Controller', function($scope, $resource) {
var res = $resource('?id=:id');
$scope.todos = res.query();
$scope.post = function() {
res.save({title: $scope.title}, function() {
location.reload();
});
};
$scope.delete = function(id) {
res.delete({id: id}, function() {
location.reload();
});
};
$scope.change = function(todo) {
res.save({id: todo.id, completed: todo.completed});
};
});
</script>
</head>
<body ng-controller="Controller">
<p ng-repeat="todo in todos">
<input type="checkbox" ng-model="todo.completed" ng-true-value="'1'" ng-false-value="'0'" ng-click="change(todo)">
<span ng-style="{textDecoration: todo.completed === '1' ? 'line-through' : 'none'}">{{todo.title}}</span>
<span style="cursor: pointer" ng-click="delete(todo.id)">✕</span>
</p>
<input ng-model="title">
<button ng-click="post()">post</button>
</body>
</html>
テーブルの内容
| カラム名 | 内容 |
|---|---|
| id | プライマリキー |
| title | ToDoの内容 |
| completed | 未完了:0 完了:1 |