サイトレビューサイト制作への道その5
チェックボックスのデータをエディットで変更する
1.エディットにチェックボックスを追加
2.データをエディットに送る
3.チェックボックスを反映
4.データの保存
5.まとめ
1.エディットにチェックボックスを追加
前回サイトを追加するときにチェックボックスを付けられるようになったので、エディットでサイトのカテゴリーを変更出来るようにしていきたいと思います。 まずは前々回と同じ要領でエディットにチェックボックスを配置していきます。今回は「View」の「edit」ファイルに書き込んでいきます。
echo $this->Form->input('field', array( 'options' =>$options , 'type' => 'select', 'multiple'=> 'checkbox', 'empty' => '(choose one)' ));
これを追加するだけですね。
2.データをエディットに送る
次に「SitesController.php」を編集していきます。
public function edit($id = null) {
に記述していきます。
$data = $this->Category->find('list', array( 'fields' => array('Category.id', 'Category.cat_name'), )); //チェックボックスのそれぞれの名前（カテゴリー名）をセット $this->set('category', $data); //idがあるかどうか if (!$this->Site->exists($id)) { throw new NotFoundException(__('Invalid site')); } $data = $this->Site->find('first',array('conditions'=>array('id'=>$id))); //pr($data); //デバッグ $this->set('editcategory', $data); $edata = $data;
コントローラーからビューにデータを送れるようします。
3.チェックボックスを反映
また「View」の「edit」を編集していきます。 まずはデータを受け取れるかデバッグで確認します。
debug($editcategory); exit;
これで詳細データを送れてることを確認出来ればチェックボックスに反映させます。
echo $this->Form->input('cat_id', array( 'options' =>$category, 'type' => 'select', 'multiple'=> 'checkbox', 'selected' => array($editcategory['Site']['cat_id1'], $editcategory['Site']['cat_id2'], $editcategory['Site']['cat_id3'], $editcategory['Site']['cat_id4'], $editcategory['Site']['cat_id5']), ));
これでエディットを開いてすぐに
こうなります。
4.データの保存
最後に編集したデータを保存していきたいと思います。またまた「SitesController.php」のエディットを記述していきます。
if ($this->request->is(array('post', 'put'))) { //サイト名、サイト写真、URL、レビューの変更 $site_name = $this->request->data( 'Site.site_name'); $img_src = $this->request->data( 'Site.img_src'); $url = $this->request->data( 'Site.url'); $review = $this->request->data( 'Site.review'); //入力したカテゴリーデータを$test01～$test05に入れる $test01 = $this->request->data( 'Site.cat_id.0'); $test02 = $this->request->data( 'Site.cat_id.1'); $test03 = $this->request->data( 'Site.cat_id.2'); $test04 = $this->request->data( 'Site.cat_id.3'); $test05 = $this->request->data( 'Site.cat_id.4'); //データの代入 $request = $this->request->data; //サイト名、サイト写真、URL、レビューのデータを代入する $request['Site']['site_name'] = $site_name; $request['Site']['img_src'] = $img_src; $request['Site']['url'] = $url; $request['Site']['review'] = $review; //それぞれにチェックボックスのデータを代入する $request['Site']['cat_id1'] = $test01; $request['Site']['cat_id2'] = $test02; $request['Site']['cat_id3'] = $test03; $request['Site']['cat_id4'] = $test04; $request['Site']['cat_id5'] = $test05; // if ($this->request->is(array('post', 'put'))) { //データを受け取る //if ($this->Site->save($this->request->data)) { //データをセーブ if ($this->Site->save($request)) { //データをセーブ
これでサイト名、サイトのイメージ画像、URL、レビュー、カテゴリーの変更を保存出来ます。 確実にもっと短く出来ると思いますが今はこれでご勘弁！
5.まとめ
入力、編集、削除とこれで管理者画面らしくなってきたかと思います。まあまだまだやることはあるわけですが、、
サイトレビューサイト制作への道その4
チェックボックスの内容をデータベースへの保存
1.カラムを増やす
2.チェックボックスのデータを保存する
3.まとめ
1.カラムを増やす
前回作ったチェックボックスですが、あのままではデータベースにカテゴリーの情報が保存されません。
なので「sites」テーブルのカラムを増やしていくつかのタグを保存できるようにします。
注意点として今回のやり方だとタグ付けできる数に制限が出来てしまいます。無制限にタグ付けするやり方はまたいつか、、、
こんな感じになります。注意点はデフォルト値をNULLにしておくくらいです。
2.チェックボックスのデータを保存する
次にを保存をしていきます例によって制作中のフォルダを開いて、「SitesController.php」を編集していきます。
if ($this->request->is('post')) {
の中にいろいろ記述していきます。
$test01 = $this->request->data( 'Site.cat_id.0'); $test02 = $this->request->data( 'Site.cat_id.1'); $test03 = $this->request->data( 'Site.cat_id.2'); $test04 = $this->request->data( 'Site.cat_id.3'); $test05 = $this->request->data( 'Site.cat_id.4');
これでまずチェックボックスにチェックを入れたもののデータを$test01～$test05に入れます。 次に
$request = $this->request->data; $request['Site']['cat_id1'] = $test01; $request['Site']['cat_id2'] = $test02; $request['Site']['cat_id3'] = $test03; $request['Site']['cat_id4'] = $test04; $request['Site']['cat_id5'] = $test05; debug($request); //データの確認表示する // exit; //強制終了
これで先ほど用意したcat_id1～cat_id5までにデータを代入していきます。 ちなみに最後のexit;のコメントを外すとプログラムを強制終了してデバッグ表示ができます。
if ($this->Site->save($request)) {//保存する $this->Flash->success(__('The site has been saved.')); //保存で来た return $this->redirect(array('action' => 'index')); } else { $this->Flash->error(__('The site could not be saved. Please, try again.')); }
元からあるのがほとんどですが、$requestを入れることでデータを保存出来ます。
ちなみにうまくいけばPHPmyadminがこうなります。（三行目）
3.まとめ
うーんやはり前回も思った通りcakePHPのデータのやりとりは難しさを感じました。
$test01 = $this->request->data( 'Site.cat_id.0'); $request['Site']['cat_id1'] = $test01;
データを求めるのに'Site.cat_id.0'とドットで繋いでくという感覚になれなかったです。。
どちらかというと二行目の['Site']['cat_id1']は配列だととらえやすいのでまだ分かりやすいですね。
ただこれもcakePHPのルールなどでしっかり覚えて使えるようになっていきたいと思いました。
サイトレビューサイト制作への道その3
cakePHP管理者画面チェックボックスを追加
1.チェックボックスを作る
2.文字表示をする
3.コントローラー側で準備
4.ビュー側で受け取り
5.まとめ
1.チェックボックスを作る
管理者画面を制作していきたいと思います。サイトのカテゴリーを選べるチェックボックスを作ります。
サイトを追加するときにサイト名やURLと一緒にそのサイトで解説している言語を設定したいので言語ごとのカテゴリーを設定できるチェックボックスが必要になります。
まず初めに超シンプルなチェックボックスを作りたいと思います
「xampp」フォルダの「htdocs」の制作中のフォルダを開きます。
「view」フォルダの中の「add.ctp」を編集していきます。
「 public function add() { 」内が追加するときのページに関わるのでこちらを編集していきます。
このページを変更していきます。
<?php echo $this->Form->create('Site'); ?> <fieldset> <legend><?php echo __('Add Site'); ?></legend> <?php echo $this->Form->input('site_name'); echo $this->Form->input('img_src'); echo $this->Form->input('url'); echo $this->Form->input('review');
この下に
echo $this->Form->checkbox('done');
を書くことで一個だけのチェックボックスを設置出来ます。
2.文字表示をする
このままでは何のためのチェックボックスなのか分からないので文字を足します。
$options = array(
2 => 'ajax',
6 => 'backbone.js',
8=> 'Bootstrap',
13 => 'CoffeeScript',
);
echo $this->Form->input('field', array(
'options' =>$options ,
'type' => 'select',
'multiple'=> 'checkbox',
'empty' => '(choose one)'
));
これを書くことで ajax backbone.js Bootstrap CoffeeScript の四つのチェックボックスを表示出来ます。
3.コントローラー側で準備
次に「Controller」フォルダの「SitesController.php」を編集していきます。
class SitesController extends AppController {
public $components = array('Paginator');
//Categoryを宣言
public $uses = array('Category'); //この行を追加する
public function add() {
の直下に
$data = $this->Category->find('list', array( 'fields' => array('Category.id', 'Category.cat_name'), )); $this->set('category', $data); //setでビュー側へ送る準備になっている // $data = $this->Category->find('list'); // pr($data); //デバッグ表示 // debug($data); //デバッグ表示（何行目かまで表示）
これでコントローラー側の
4.ビュー側で受け取り
あとはビューに戻り
echo $this->Form->input('field', array( 'options' =>$category, //ここを$optionsから$categoryに変えている 'type' => 'select', 'multiple'=> 'checkbox', 'empty' => '(choose one)' ));
少し変更を加えると、、、 カテゴリーを増やすとサイトを増やすときのチェックボックスにそのカテゴリーが追加されている。
5.まとめ
これで必要な言語をどんどん追加できます。今回のややこしいポイントはフォルダ間のデータの引き渡しでした。 これからも使うものだと思うので復習はしていきたいと思いました。。
サイトレビューサイト制作への道その2
データベースを完成させよう
1.bakeをしてからの確認
2.データベースの修正
3.まとめ
1.bakeをしてからの確認
前回大まかなデータベースを制作したので、bakeをします。コマンドプロンプトを立ち上げて
.\Vendor\bin\cake bake
を実行します。
この画面が出るはずなのでMVCを設定していきます。MVCとは、M = Model V = View C = Controller のことです。
まずMと押すとモデルの設定を行います。最初にどのテーブルの設定を行うか選びます。これは毎回聞かれるのでつどつど選択して下さい。 まずデフォルトを押して基本的に、というかほぼすべてエンターを押し続けて設定は完了します。
次にVでビューの設定を行います。 VはまずWarning: Choosing no will overwrite Posts views if it exist. (y/n)を [y]を押します。その後は全てそのままエンターで大丈夫です。
最後にCのコントローラーの設定を行います。少しだけ入力が異なるので注意して下さい。 テーブルを選んだ後に[n][y][n][y][y][y]の順番で設定します。 これでブラウザでlocalhost/sites/sitesなど検索するとばばーんとグラフィカルなデータベースが完成しています。
2.データベースの修正
ここで少しデータベースの変更を行いました。
categoriesテーブルに「category_names_id」というカラムを追加します。
category_nameテーブルを追加し「id」「cat_name」「created」「modified」を設定しました。
この変更をしたことでもう一度bakeを行う必要があります。 再度確認しcategory_nameテーブルが出来ていればオーケーです。
3.まとめ
今回は今までやったことの振り返りなどが基本でした。やはり何度か繰り返し実行することで慣れてくるものがあるので復習が大切だと思いました。
サイトレビューサイト制作への道その1
本格的なwebサービス制作へ
1.何を作るのか
2.設計
3.データベースを作成
4.cakeとbake
5.まとめ
1.何を作るのか
今回からwebサービスの制作の工程をアップしていきたいと思います。今回作るものは一言でまとめると「webサイトを紹介するサイト」です。 まあ要はまとめサイトのようなもので、技術系のサイトやブログのURLをまとめて勉強に役立てるサイトになります。 例えばPHPを使って会員制のページを作りたいと思ったときに、このサイトで「PHP」「会員」と検索すれば会員制ページの作り方を紹介しているwebサイトを表示してそこに飛ぶことができるって感じです。
2.設計
まずはどんなサイトでどんなデザインでユーザーはどんな流れで操作するのかを決めます、これを初めに決めないとあとあとどう作るかいちいち悩む事になります。 特にチーム制作でここをおろそかにするととんでもないことに、、、あぁ何度も後悔しましたよorz
エクセルなどを使ってさまざまなデータをリストアップします。サイト名、使い方の流れ、参考サイト、管理画面に必要なものなど事細かにデータを残しておくことが大切です。
次にデータベースに必要なものと簡単でいいのでサイトのデザインを書いておきましょう。
3.データベースを作成
先ほど決めたデータベースに必要なものを参考にデータベースを作成していきます。このように必要なものを最初にリストアップしておくと後の制作で余計な手間を取らなくてよくなります。
今回はphpmyadminを使いました。
こんな感じになります。
必ず最初のフィールド値は「id」にする必要があります。
次に「created」と「modified」というものがあります。「created」はデータを作成した日時「modified」はデータを更新した日時を保存するものです。どちらもデータ型は「datetime」にします。
4.cakeとbake
前回も行なったbakeをしていきます。 まず「xampp」フォルダの「htdocs」に「sites」フォルダを作ります。続いてcomposer.jsonファイルをコピーしてきます。 以下composer.jsonの中身 { "name": "testapp", "require": { "php": ">=5.3.3", "ext-mcrypt": "", "cakephp/cakephp": "2.8.", "cakedc/migrations": "~2.3", "slywalker/boost_cake": "", "phpunit/phpunit": "3.7.", "cakephp/debug_kit" : "2.2.", "cakedc/search" : "2.5." }, "config": { "vendor-dir": "Vendor" } }
コマンドプロンプトを立ち上げて「composer install」と入力します。続いて「Config」フォルダの「database.php.default」をコピーして「detabase.php」とします。58行目～62行目を変更します。まず56行目login' => 'root',57行目'password' => '',60行目'database' => 'sites',62行目のコメントアウトを外します。（もちろん私の場合はこうするっていうことなので皆さんに合わせて変えてください） 次に「Vendor」の中の「bin」の「cake.bat」をterapadかサクラエディタなどで開いて、4行目を「cmd /C "%BIN_TARGET%" %*」に変更します。 次にコマンドプロンプトで「.\Vendor\bin\cake bake project」を実行してbakeをします。 ブラウザで[localhost/sites]を叩いて確認します。（多分これでおっけい、、、のはず）
5.まとめ
ソースツリーを開いて「sites」フォルダをリポジトリにしてgithub(ブラウザ)を開いて
「sites」という名前をつけてSSHのURLをコピーします。ソースツリーの設定からリモートを選び、追加を押して
ユーザー名を入力してOKです。プッシュしたところで、とりあえず今回はここまで。
いやぁ先はまだまだ遠いな(遠い目) ただ確実に進んでいると信じています。愚直な私は近道が出来ませんし、今は一歩ずつしか進めませんがその分足腰は鍛えられいると思います。ではではこの辺で
cakePHPの基本
cakePHPを使ってみた
1.cakePHPのセッティング
2.bakeのセッティング
3.ブラウザでデータベースの確認
4.まとめ
1.cakePHPのセッティング
まずはcakePHPを使うために「https://getcomposer.org/doc/00-intro.md#installation-windows」のサイトを訪れて、「 Composer-Setup.exe.」を叩きます。次にhttps://codezine.jp/article/detail/7827 codezine.jp
を参考にインストールを進めていきます。
インストールが完了したら、xamppのhtdocsの中に「cake」フォルダを制作します。
今後このフォルダを基にgitでリポジトリを作っておけば管理しやすくて便利です。
2.bakeのセッティング
コマンドプロンプトを立ち上げてbakeをセッティングしていきます。コマンドプロンプトで「composer」と入力します。 cakeディレクトリに移動して「composer install」と入力します。ちなみに自分はappフォルダを制作して続けました。 続いて「.\Vendor\bin\cake bake projec 」を入力します。 「console\cake bake」でデータベースの設定をします。ちなみに「\」を必ず使って下さい。（「/」ではなくて「\」出ないとうまくいきませんでした。） うまく稼働すればbakeの各種設定に進みます。 MならModel VならViewについてとうふうに細かい設定を行います。
3.ブラウザでデータベースの確認
ブラウザを開き「localhost/cake」を叩きます。するとうまくいけば
こんな感じになります。
確認で来たら「localhost/cake/テーブル名」にして叩きます。そしてうまくいけば
こうなります。ここではデータ一つ一つの確認、更新、削除がグラフィカルに行えます。これを使えば今後のプロダクト制作がスムーズになるはずです。
4.まとめ
うーんこの、、、全く持ってひどいブログだとは自覚しております。orz やはり設定のブログは細かいところまで理解していないで書くのが難しいと悟りました（悟り世代）ですがいつか一から設定を行い理解し、突っ込みどころのないブログを書き上げたい。そう思いました。
データベースの基本
データベースを触ってみた
1.データベースの意味
2.Adminを使いましょう
3.A5:SQLを起動アンド確認しましょう
4.A5:SQLを使ってみましょう（選択、追加、更新、削除）
5.まとめ
1.データベースの意味
なぜデータベースが必要なのか、今や様々ななものにデータベースが使われています、顧客データや検索履歴など生活に関わるものからゲームの制作まで多岐にわたります。簡単に説明すると大量のデータをまとめて保存し使いたいときに使い、必要なとき必要なものだけを取り出せるようにするシステムです。
2Adminを使いましょう
まずXAMPPを立ち上げて 「Apache」と「MySQL」をスタートします。次にMySQLのAdminを押すとwebからMyAdminが起動します。 起動したらまずデータベースの名前をつけます（とりま「test」にでも）照合順序を決めます、照合順序とは要は文字コードです。「utf-8_general_ci」を選びましょう。 テーブル名をつけて（とりま「user」にでも）、今回はカラムを4にしておきます。そして[実行] 四つの行と沢山の列が出来上がります。まず最初の行の名前は「id」とでもしておきます。 データは数値データなのでINTで長さは今はあまり考えずに10とでも、、、ちょっと飛ばしてインデックスを「PRIMARY」にして実行します。A_Iの欄にチェックを入れてあとはそのままにしておいてください。
ほかの行にemailやusernameやtodouhukennなど入れてください。文字データの場合はデータ型をVARCHARなどにして下さい。文字なのでね。保存を押せばDBの完成です（パチパチ！）
3.A5:SQLを起動アンド確認しましょう
ここからはA%SQLを使いたいのでまずはインストールして下さい。 実行して今作った「test」を探して確認します。今作ったカラム（「id」「username」「email」「todouhukenn」）があることを確認し、これからデータベースに対する操作をしていきます。
4.A5:SQLを使ってみましょう（選択、追加、更新、削除）
選択
データベースの中から確認したいものがある場合 SELECT * FROM user; ですべてのデータを確認します。
SELECT id,username FROM user; でidとusernameだけを抽出して確認出来ます。
追加
INSERT INTO user (email,username,todouhukenn) VALUES ('nonaka@gmail.com','nonaka','東京都'); 必要なカラムをしっかり宣言し追加したい情報を記述します。idは自然に追記されるようになっているので大丈夫です。 先ほどA_Iにチェックをつけましたが、あれはオールインクリメントと言って追加されるデータを1+していくというものです。 インクリメント、、、++ってやつですね（キリッ
更新
UPDATE user SET todouhukenn = '群馬' WHERE id = 5; idの5番の「todouhukenn」を群馬に更新します。
削除
DELETE FROM user WHERE id = 3; idの3番を削除します。
5.まとめ
現段階のデータベースでは中々目に見えてどうのこうのがないので難しいと感じました、がこれからの制作には絶対に必要なものだと思うので、しっかり復習していかなければと考えています。
うーん文字ばっかりで読むのが辛いブログになってしまった、、、
