PHP/jQueryで作るToDoアプリ (全20回)

学習状況の管理には無料ユーザー登録が必要です。

PHPとjQueryを使ってToDoを管理するためのWebアプリを作ってみます。Ajaxを多用することで使いやすいシステムになっています。

全20回レッスンの詳細と、完了状況は以下のとおりです。

	タイトル (動画時間 53:26)	学習状況
	#01 ToDoアプリを作ってみよう (02:29) ToDoアプリの完成版を確認したのちに必要となる知識や開発の流れについて説明していきます。	未完了
	#02 データベースの設定をしよう (02:56) まずはデータベースの作成、ユーザーの設定、テーブルの設計をしていきます。	未完了
	#03 アプリ共通の設定をしよう (02:58) データベースの設定・確認をしたのちに、アプリ共通の設定ファイルを作っていきます。	未完了
	#04 アプリ共通の関数を作ろう (02:35) アプリ共通の設定、関数を作りこんでいきます。	未完了
	#05 ToDoの一覧を表示してみよう (1) (02:53) データベースに接続してToDoデータを表示する方法について解説していきます。	未完了
	#06 ToDoの一覧を表示してみよう (2) (02:26) jQuery/jQuery UIを読み込んだのちに、ToDoのデータをHTMLに反映させていきます。	未完了
	#07 ToDoを削除してみよう (1) (02:42) ToDoを削除するためのリンクを作り、クリックしたときの処理を作りこんでいきます。	未完了
	#08 ToDoを削除してみよう (2) (02:41) 削除リンクをクリックしたときの挙動を作りこんでいきます。	未完了
	#09 ToDoを削除してみよう (3) (02:26) ToDoの削除情報をデータベースへ反映させていきます。	未完了
	#10 チェック機能を実装してみよう (1) (02:32) ToDoを完了させるためのチェック機能を作りこんでいきます。	未完了
	#11 チェック機能を実装してみよう (2) (02:36) チェック情報をデータベースに反映させる処理を実装し、動作を確認していきます。	未完了
	#12 並び替え機能を実装してみよう (1) (02:48) ToDoをドラッグ＆ドロップで並び替えできるように機能を実装していきます。	未完了
	#13 並び替え機能を実装してみよう (2) (02:56) 並べ替えたToDoの順序をデータベースに反映させ、動作確認をしていきます。	未完了
	#14 ToDoの編集をしてみよう (1) (02:45) ToDoを編集するためのリンクを作り、クリックイベントを設定していきます。	未完了
	#15 ToDoの編集をしてみよう (2) (02:52) ToDoを編集するためのフォームを作成していきます。	未完了
	#16 ToDoの編集をしてみよう (3) (02:58) ToDoが更新されたときの処理を作りこんでいきます。	未完了
	#17 ToDoの編集をしてみよう (4) (02:46) ToDoの更新情報をデータベースに反映させていきます。	未完了
	#18 ToDoの追加をしよう (1) (02:30) ToDoの追加をするためのフォームを作っていきます。	未完了
	#19 ToDoの追加をしよう (2) (02:27) ToDo追加時のイベントを設定していきます。	未完了
	#20 ToDoの追加をしよう (3) (02:10) 新しいToDoをデータベースに追加していきます。	未完了

タイトル	内容
#01 ToDoアプリを作ってみよう	完成版の確認必要となる知識レッスンの環境開発の流れ
#02 データベースの設定をしよう	データベースの作成ユーザーの設定テーブルの設計サンプルデータの挿入
#03 アプリ共通の設定をしよう	データベースの確認データベース定数の設定
#04 アプリ共通の関数を作ろう	エラー表示の設定共通関数の作成
#05 ToDoの一覧を表示してみよう (1)	データベースへの接続 ToDoデータの表示 HTMLの作成
#06 ToDoの一覧を表示してみよう (2)	jQueryの読み込み jQuery UIの読み込み ToDoの表示
#07 ToDoを削除してみよう (1)	削除リンクの作成クリックイベントの設定
#08 ToDoを削除してみよう (2)	idの取得 ajax処理の設定 ajax処理完了時の動作の作成
#09 ToDoを削除してみよう (3)	ToDoの削除処理
#10 チェック機能を実装してみよう (1)	チェックボックスの設置スタイルの設定クリックイベントの設定
#11 チェック機能を実装してみよう (2)	データベース処理動作確認
#12 並び替え機能を実装してみよう (1)	jQuery UIのsortable
#13 並び替え機能を実装してみよう (2)	データベース処理動作確認
#14 ToDoの編集をしてみよう (1)	編集リンクの作成クリックイベントの設定
#15 ToDoの編集をしてみよう (2)	編集フォームの作成
#16 ToDoの編集をしてみよう (3)	クリックイベントの設定更新後の要素の作成
#17 ToDoの編集をしてみよう (4)	ToDoの更新処理動作確認編集リンクの設定
#18 ToDoの追加をしよう (1)	追加フォームの設定イベントの設定
#19 ToDoの追加をしよう (2)	ajax処理の設定新しい要素の作成・表示
#20 ToDoの追加をしよう (3)	ToDoの追加動作確認

#01 ToDoアプリを作ってみよう

832日前

今回のToDoアプリは練習用もしくは個人利用を想定しています。
作成したToDoアプリを一般に公開する場合には、

* ログイン機能
* CSRFを防止するためのトークンの利用
* AJAX経由でPOSTされる値の厳密なチェック

なども実装しておくようにしましょう。

#02 データベースの設定をしよう

831日前

こうしたコマンドはコピー＆ペーストするのではなく、commands.sqlをMySQLから読み込むことで実行することもできます。詳しくは以下を参照してください。
http://dotinstall.com/lessons/basic_mysql_v2/7418

831日前

KEYを指定しておけば、そのキーでの検索が高速になります。ただし、あまりつけすぎると今度はデータを挿入する際に時間がかかります。このKEYはあとから変更できるので一般的にはシステムの利用状況を観察しながら調整していくことになります。最初は「これが検索されるだろうな」という予想をしつつ適度につけていきましょう。

831日前

PHPで別ファイルを読み込むにはrequireとincludeがよく使われます。両者の違いは次のレッスンを参考にしてみてくださいね。
http://dotinstall.com/lessons/basic_php_tips/2006

831日前

grant命令についてはこちらのレッスンで説明されています。
http://dotinstall.com/lessons/basic_mysql_v2/7404

#04 アプリ共通の関数を作ろう

831日前

error_reportingについては以下の公式ドキュメントも参考にしてみてください。
http://php.net/manual/ja/function.error-reporting.php

#05 ToDoの一覧を表示してみよう (1)

831日前

array_pushについては以下をご覧ください。
http://php.net/manual/en/function.array-push.php
また上記にもありますが、「array_push($tasks, $row);」は、次のように書いてもOKです。

$tasks[] = $row;

#06 ToDoの一覧を表示してみよう (2)

831日前

動画中でも使われていますが、HTML中にif, while, for, foreachを埋め込む際には以下の「制御構造に関する別の構文」を参考にしてみてください。
http://www.php.net/manual/ja/control-structures.alternative-syntax.php

#07 ToDoを削除してみよう (1)

831日前

jQueryの.onについては以下を御覧ください。
http://api.jquery.com/on/

#08 ToDoを削除してみよう (2)

831日前

jQueryのFadeOutはよく使いますので覚えておきましょう。括弧の中にミリセカンドを入れれば消える時間をコントロールできます。800あたりがふわっとした感じでおすすめです（ご自身で確認しながら調整してみてください）。
http://api.jquery.com/fadeOut/

831日前

$.postでidを渡すときの「id: id」という表現は最初、混乱するかもしれません。
最初の「id」は外部ファイル（_ajax_delete_task.php）に値を渡すときの「名前」で、次の「id」はその値（「$(this).parent().data('id')」の内容が入ります）なので混同しないようにしましょう。

831日前

jQueryの$.postについては以下をご覧ください。Ajax的な処理を作るときにはよく使いますので慣れておくようにしましょう。
http://api.jquery.com/jQuery.post/