ToDo管理のアプリを作成する - ステップアップ備忘録

今回はdotoinstallのToDo管理アプリの作成について。
気になったことやつまづいたところを重点的に。

MySQL(データベース)の設定

MySQL部分
- tinyint → 整数型の一つ。0～255までの範囲の数字を扱う。
- default→ 何も変更されていない際の規定値を示す
HTML部分の作成
- placeholder → 入力欄に初期表示する内容を定義(仮で入れておく情報)
CSS部分の作成
- float → 指定された要素を左寄せまたは右寄せに配置する ul > li → liがulの直下の子要素であることを示す border-radius → ボックスの4つのコーナーの角丸をまとめて指定する。
詳しい内容は↓のサイトを参照
HTMLクイックリファレンス

全件抽出してみる

queryとprepareの違い
きちんと理解していなかったので、しっかりまとめてみます。どちらもphpからMySQLを実行したい際に使う、実行前の準備をするようなメソッド

  query → 実行の際にユーザからの入力情報を含めることができない  
      $sql = 'select * from データベース名';   
      $stmt = $db->query($sql);  
      $stmt->excute();  


  prepare → 実行の際にユーザーからの入力情報を含めることができる  
      $sql = ' Insert into (todos → テーブル名) (title→変数) values (:title→変数);  
      $stmt =($this->) $db->prepare($sql);  
      $stmt->excute();

ちなみに、execute()は実行する際のメソッド、$stmtはPDOStatmentオブジェクトを指す

イベントの追加(jQuery)

jQueryはjavascriptライブラリの一つでブラウザによって異なるjavascriptの仕様のそれぞれの違いを吸収し同じコードで違うブラウザでも同じ動作を実現できるのが特徴。
- CDN(ContentsDeliveryNetwork)を用いるやり方と自サイトにjQueryファイルをアップロードして使うやり方がある。
- jQueryの1型、2型、3型などのバージョンの違いは、それぞれがサポートしているブラウザの違いになる。
  - javascriptを適用したいブラウザ(ターゲット)にIE8以下を含む場合は1型
  - IE9以上、その他も3型に適合しない場合は2型
  - chrome, egde, safari, FireFox, Operaの最新バージョンとそのひとつ前、IE9以上、モバイルならばsafari(iOS7以上)とAndroidの標準ブラウザ(Android4.0以上)などがターゲットになるならば3型

動的な部分の作りこみ

index.phpにidもしくはclassを定義し、javascriptと紐づけする
idと紐づける場合先頭に#、classと紐づける場合は先頭に「 . 」を持ってくる。
javascript部分のphp内での動作
_(ファイル名).phpはファイルがバックグラウンドで動作するという意味。
javascriptで指定された処理を受け取った時にどう処理していくかを記述する。
メソッドの実装
sprintf → フォーマットされた文字列を返す
fetch column → 単一カラムを返す
removeclass → jQueryのメソッド、addclassで適用したCSSクラス(今回はdone)の適用を外す
CFRS対策
データの改ざんチェック
サーバ側からtoken(推測されにくい文字列のこと)を発行し、まずSESSION(サーバ側のデータ保存機能)に格納される。
そのあとフォーム(クライアント側)からもtokenを発行し、処理の中でsessionに格納されたtokenとフォームからのtokenを突き合わせて一致するかを確認する。
削除と追加
動的な部分はjQueryで管理し、受け取った後の処理部分はPHPに記述する。

完成させる

CSS部分
display → ディスプレイへの表示と非表示を管理
jQuery部分
prepend → 引数で指定したコンテンツを各要素の先頭に挿入する
attr(key, value) → キーと値を渡してすべての要素に属性を設定する
エラーコードへの対応
illegal return statementというエラーが出た際に気を付けたいこと
このエラーはreturnができない場所からreturnしたという意味
returnは関数内でのみ可能なので、「関数の外からreturnしてるよ」と言われている、この時は閉じかっこをよく確かめることが大事

まとめ

jQueryの記述の仕方が少し難しい、少しだけjavascriptに触れたことがあるがだいぶ忘れているので、
わからないと思ったことをそのままにせず、しっかり調べておく。