NetBeans IDEとCakePHP データ更新（２/３）

　1-3-1-2　編集と削除機能
ここまできたら、編集と削除も作ってみましょう。下記ソースを参考にしてください。
内容は、編集の場合「指定（id）のデータを画面に表示し、修正内容が送られてきたら、保存してindex画面を表示する。指定（id）データがない場合は、空画面を表示する。」削除の場合は、保存しての部分が削除してに変わるだけです。
アドレス欄には「http://localhost/PhpProject1/OrderLists/EditOrderList/1」
または「http://localhost/PhpProject1/OrderLists/DeleteOrderList/1」のように入力してください。
最後の「1」がレコードのidとなります。データが3件あって3件目を削除する場合は、
「http://localhost/PhpProject1/OrderLists/DeleteOrderList/3」となります。

２．フォームを作成する。（レイアウトとcss）
2-1.　今まで見てきた画面は、CakePHPで用意されているレイアウト「default.ctp」とcss「cake.generic.css」を利用して出力されていました。
　　これから、OrderList用のレイアウトとcssで画面を作成していきます。

2-2　CakePHPレイアウトの構成を表すファイルとデザインを表すファイルを分けています。

2-2-1　レイアウト構成

今回はヘッダー、ボディ、フッターの構成を作成します。

「View」を展開して「Layouts」フォルダーで右クリックして「新規」から「OrderList.ctp」を作成しましょう。

＜head＞～＜/head＞は、HTMLのヘッダー部です。＄変数はプログラムで値をセットします。

「echo $this->html->css('OrderList');」は、デザインに関する記述ですが、あとで説明します。

＜body＞～＜/body＞の中にレイアウトを定義します。

・＜div id="header"＞は、ヘッダー部

・＜div id="content"＞は、データ部

・＜div id="footer"＞は、フッター部

の構成とします。データ部以外は任意であり、なくてもかまいません。また、＄変数については、プログラムで値をセットしますが、データ部の「$content_for_layout」は、各画面の「.ctp」ファイルから展開されます。

2-2-2　デザイン設定
　　　先程出てきた「css」ファイルについてです。cssとは？についての説明は省略させていただきます。
　　　画面のデザインはデフォルトの「cake.generic.css」を使用していましたが、もう少し実用的な画面になるようにしたいと思います。

ここで、重要なのは、画面イメージを持っておくことです。こういう画面を出すためには、どういった

cssが必要かという観点からcssを作成します。

まずは「webroot」を展開して「css」フォルダーで右クリックして「新規」から「OrderList.css」を

作成しましょう。

以下の画面イメージを使用して説明します。

2-2-2-1　テーブル

　Tableの構成を定義します。ここでは、スタイル・ビルダーを使用しました。私のようにデザイン力のない場合、重宝いたします。「th」「td」も同様に作成します。

2-2-2-2　submitボタンを横に並べる。

まず、「index.ctp」に以下の部分を追加します。

次にcssの方に以下の内容を追加してください。
#action_group ul li {
    list-style-type: none;
    float:left;
}
2-2-2-3　radioボタンを横に並べる。

これは、以下の内容を追加することでできます。

.input radio {

    display: inline;

    text-align: left;

2-2-2-4　完成した「OrderList.css」。下の枠をクリックするとソースを展開します。

（１/３）へ　　　　　　（３/３）へ