(゚д゚)ノ コンバンワ!中の人ですYO!


さて本日も引き続きコードイグナイターのモデルについてやっていきませうか。


MVCのM、モデルは前にも言ったようにデータベースを扱う部分です。


で、コードイグナイターではデフォルト状態では必要最低限よろしくDBを扱うライブラリが読み込まれていません。

なので読み込むようにしなければ。あとDBの作成。


(´・ω・)っ旦~ お茶ドウゾ



さて上で言ったようにデフォ状態だとDBを呼んでくるライブラリないんで読み出ししてるはずなのに!!なんてことのないようにちゃんと設定&確認しましょう。


さてまずはテーブルを用意しませう。


使用するRDBですがMYSQLで。SQLiteでもいーんだろーけどコードイグナイターの便利な機能であるscaffoldというのが使えないらしいのでMYSQLで。scaffoldは跡で出てきます。多分(ぉぃ


でぁPHPMyAdminでDBとテーブルを作成しますぉ(´ω`)(XAMPP環境前提)


DB名:igniter_db

テーブル名:blogs

フィールフドの定義:

id int not null auto_increment

timestamp int not null

title varchar(255) not null

content text not null



PHP2009-19

(´ω`)これでおk。



で、データをいれとかなきゃ取ってきようがないのであらかじて挿入(卑猥だ)しておくわけですYO。

phpMyAdmin初だったり(いつもLINUXのコマンドラインメインorz)するのでインサート文すらどうやるのかわからないとかね…これはひどい。


で。とりあえず。作成終わった人は、↑のメニューにSQLってあるのでそのリンクをクリック。

初期段階ではselect文か何かがはいってるけど、そこにinsert文かけてやればおk。

入力後右下の『実行するボタン』を押せば、1 行挿入しました。 ( クエリの実行時間 0.0003 秒 )って出るかと。


PHP2009-20
↑こんなんなればおk。CUIに慣れてるとGUIで戸惑うから困る。


        _,,:-ー''" ̄ ̄ ̄ `ヽ、
     ,r'"           `ヽ.
 __,,::r'7" ::.              ヽ_
 ゙l  |  ::              ゙) 7
  | ヽ`l ::              /ノ )
 .| ヾミ,l _;;-==ェ;、   ,,,,,,,,,,,,,,,_ ヒ-彡|
  〉"l,_l "-ー:ェェヮ;::)  f';;_-ェェ-ニ ゙レr-{   / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
  | ヽ"::::''   ̄´.::;i,  i `'' ̄    r';' }   | 久々に困った

 . ゙N l ::.  ....:;イ;:'  l 、     ,l,フ ノ   | GUIメインの俺がCUIのLINUXに触れて
 . |_i"ヽ;:...:::/ ゙'''=-='''´`ヽ.  /i l"  < 戸惑ったのが昔の俺なんだよな
   .| ::゙l  ::´~===' '===''` ,il" .|'".    | XAMPPはGUIメインだから困る
    .{  ::| 、 :: `::=====::" , il   |     \________
   /ト、 :|. ゙l;:        ,i' ,l' ノト、
 / .| \ゝ、゙l;:      ,,/;;,ノ;r'" :| \
'"   |   `''-、`'ー--─'";;-'''"   ,|   \_

困る。

んで無事テーブルもできたしデータも登録し終えたので、ちゃちゃっと先進んでしませうかね。

データベース関連の設定は、『application』内の『config』にある『database.php』にある。

それを書き換えて、使えるようにしよう。

$db['default']['hostname'] = "localhost";
$db['default']['username'] = "root";
$db['default']['password'] = "";
$db['default']['database'] = "igniter_db";
$db['default']['dbdriver'] = "mysql";
$db['default']['dbprefix'] = "";
$db['default']['pconnect'] = TRUE;
$db['default']['db_debug'] = TRUE;
$db['default']['cache_on'] = FALSE;
$db['default']['cachedir'] = "";
$db['default']['char_set'] = "utf8";
$db['default']['dbcollat'] = "utf8_general_ci";

↑のように書き換えればOK。

hostname ホスト名。ローカル環境ならlocalhostでおk。

username ユーザー名。rootでおk。※username⇒root、パスワードなしのまま外部公開すると即死フラグ。ヤメトケ。

password アクセスパスワード。これも設定せずに外部はry 外部したいなら最低限username変更+pass設定しとけ

database 使用するDB名。

dbdriver 使用するDBの種類。今回はMYSQLなのでmysql。

pconnect DB鯖への接続の指定。SQLiteみたいなDBじゃないものの場合FALSEでおk

次にデータベースを使用できるようライブラリを読み込むよう設定する。

使用するライブラリ名は'database'。うむ。そのままだ。

『config』内の「autoload.php」を開き、$autoload['libraries'] = array();という部分を探し、次のように修正。


$autoload['libraries'] = array('database');

(゚∀゚)ちなみにこの$autoloadに配列で自分の使いたいライブラリを渡してやればライブラリが自動で読み込まれるようになります。でも、必要最低限というコードイグナイターの信条を貫くならば、DB以外のあんまし使わないライブラリはそのつど呼び出して使うようにしませう。でないと毎回たくさんのライブラリを読み込むことで遅くなるぉ。

ということで個別に読み込む場合は↓のようにすればおk


$this->load->library('ライブラリ名');


一般のフレームワークではこの後『モデルクラスの定義』という作業があるそうですが、コードイグナイターは華麗にスルーできます。すばらしい(ぇ

DBライブラリを読み込むことで、DB利用の為のオブジェクトがコントローラーから使えるからなのです。

   ハハ 華麗にスルー
   (゚ω゚) +
  /  \
((⊂ )  ノ\つ))
   (_⌒ヽ
   丶 ヘ |
εニ三 ノノ J

ということでモデルを用意せずともDBへアクセスできるという華麗なスルー環境(謎)を生かしてコントローラーの修正作業に移りましょう。

レコード一覧を取得するメソッドをコントローラーに用意。

例によってhelo.phpを改造してDB操作用にしてしまいませう。まさにエコ。(ぉ

helo.phpのindexメソッドを次のように修正してくだされー。



function index(){
$data = array('head_title'=>'index','content'=>'index');
$data['records'] = $this->db->get('blogs')->result_array();
$this->load->view('layout/mylayout',$data);
}

解説。


db->get(''テーブル名)->result_array();

↑はDBオブジェクト(ライブラリで読み込むようにしたのでコンストラクタで自動生成されるようになる)にgetというメソッドを介してテーブルへアクセスし、結果レコードをarray、つまり配列の形で取得しています。

getメソッドには、テーブル名を指定できますが、第ニ引数に値を設定することでLIMIT値を指定してやることができます。

また、第三引数はオフセット値の設定になります。つまり、次の3種類のパターンが可能ということです。


$変数 = $this->db->get('テーブル名');

$変数 = $this->db->get('テーブル名',LIMIT値);

$変数 = $this->db->get('テーブル名',LIMIT値,オフセット値);


これにより指定したテーブルのすべてのレコード、もしくは指定した一部のレコードを取り出すことができます。

最後にresult_array()の部分。

これは返されたレコードを連想配列の形にまとめたものをさらに配列にまとめたものです。

そうすることで、ビュー側で配列から順にレコードを取り出し、そこからそれぞれのフィールドの値を取り出して処理できます。

次に、ビューの作成。

『views』のindex.phpを↓のように書き換えませう。

デフォルトだと、


<h1>フォームの送信</h1>
<?=$msg; ?>
<form method="POST" action='/igniterapp/helo/index'>
<input type="text" name="text1" id="text1" size="60">
<input type="submit">
</form>

こうなっているので、それを↓のように$recordsを取り扱える様に書き換えませう。



<h1>Blog一覧</h1>
<p>テーブルの一覧です。</p>
<table>
<tr>
<th>ID</th>
<th>DATA</th>
<th>TITLE</th>

<th>CONTENT</th>
</tr>
<?php foreach ($records as $row): ?>
<?="<tr><td>{$row['id']}</td>" ?>
<?="<td>".date('Y/m/d'.$row['timestamp'])."</td>" ?>
<?="<td>{$row['title']}</td>" ?>
<?="<td>{$row['content']}</td></tr>" ?>
<?php endforeach; ?>
</table>


そしてCSSの修正。『igniterapp』フォルダの『css』フォルダのmylayout.cssの末尾に以下のように追記。

table{
background-color: #ffffff;
border-style: solid;
border-width: 1px;
border-color: #cccccc;
}

th{
background-color: #ddccdd;
border-style: solid;
border-width: 1px;
border-color: #cccccc;
}
td{
border-style: solid;
border-width: 1px;
border-color: #cccccc
}

修正が完了したら、レッツアクセス!


PHP2009-21
↑のように表示されればヽ( ^ω^)ノ サクセス!


PHP2009-22
↑PHPMyAdminで2行ほどレコードを追加。ちゃんと反映されているようだ。

以上がDBに登録されているデータを取ってきて表示するところまで。次はPHPでの登録ができるようにしよう。

『views』に新たに「add.php」を作成。内容は以下の通り。

add.php

<h1>Blog新規作成</h1>
<p>新しい記事を記述してください。</p>
<form method="POST" action="/igniterapp/helo/add">
<table>
<tr>
<th>TITLE</th>
<td><input type="text" name="title" size="60"></td>
</tr>
<tr>
<th>CONTENT</th>
<td><textarea name="content" cols="40" rows="3"></textarea></td>
</tr>
<tr>
<th></th>
<td><input type="submit"></td>
</tr>
</table>
</form>

タイトルとコンテンツの2つのみのフォーム。それであ次はコントローラーを修正しませう。


      g(^^^^_______,,,,,,;;59q
   ,,p6l゚゚    ゚l[゛`、]pvn .l[..l
  」"  4^゚゚゚゚゚゚゚_][  __,,,, .l[
  [゜  ,,g「゚p[{4,,  (" ^〉.\
  ],,,,gl゚"  .l[、.;][  .\^^^ .l
    ]!   ゚\ __,,xxx。  ]
    ][      [゚   ]l.  〈
   J!      〔、  .l[  ]
   |。_     .\-fff" ,,p
     ^"^9nxxxx./r==4"゛


ポーニョポーニョポニョ♪

      ,,,,,,pxxvxxg,,,,_
   ,,df(^"゛ g、    ^゚゚lq
  〈!   ,,dl゚゛   ./==x]t,,_
   ]l.__,,g[,,,,,,,,,,,,,,p4"   .l[^k
   ][「,,pr=t、`、  ____ .l[ ]
  g" ][_  ]!  ./「゚^゚9,,「n,,]
 4゚ .。、.\イ   ゚lk ,,g[  .l]
 ]l. 〈^゚ltn4,,,,_        ]
 ヨ。. ゚ll._   ゚"9n......./ff  ]
  ヨ、.\q,,,,____   ,,gf゛ gl゚
   ^9nnxxxxx゚゚゚゚゚゚゚゚゚゚xvtf"゛


魚の子 !


一時未知の電波が混線しましたことを深くお詫び致します。

では気を取り直して『controllers』のhelo.phpに新たにヘルパーを使うための修正、およにaddメソッドを次のように追加してください。

helo.php

<?php

class Helo extends Controller{

function Helo(){

parent::Controller();
$this->load->helper('url');

}

function index(){
$data = array('head_title'=>'index','content'=>'index');
$data['records'] = $this->db->get('blogs')->result_array();
$this->load->view('layout/mylayout',$data);
}

function add(){
if($this->input->post('title') != null){
$data = array(
'timestamp'=> time(),
'title'=> $this->input->post('title',true),
'content'=> $this->input->post('content',true)
);
$this->db->insert('blogs',$data);
redirect(base_url().'helo/index');
}else{
$data = array('head_title'=>'ADD BLOG','content'=>'add');
$this->load->view('layout/mylayout',$data);
}
}

}
?>

以上ができたらhttp://localhost/igniterapp/helo/add

へアクセス。


PHP2009-23

うまくいけば↑のようにフォームが表示されるので、実際に書き込んでみませう。

!!(´Д`;)なんとここで重大なミスをしていることが判明。

仕組みとしてはinsertでtitleとcontentが書き込まれた後にレコード一覧である/heloへ飛ばされるわけなのだが・・・

何度やってもおかしなURLにorz

リダイレクト先が、なんとhttp://localhost.igniterappi/helo/index

に。igniterappiって何だYO!

まさに

    /\___/ヽ   ヽ
   /    ::::::::::::::::\ つ
  . |  ,,-‐‐   ‐‐-、 .:::| わ
  |  、_(o)_,:  _(o)_, :::|ぁぁ
.   |    ::<      .::|あぁ
   \  /( [三] )ヽ ::/ああ
   /`ー‐--‐‐―´\ぁあ
状態。

で。どこがおかしかったのかというと『config』の「config.php」の次の行。


$config['base_url'] = "http://localhost.igniterappi/ ";

そりゃbaseURLがlocalhost.igniterappiになるわけだ。

    /\___/ヽ   ヽ
   /    ::::::::::::::::\ つ
  . |  ,,-‐‐   ‐‐-、 .:::| わ
  |  、_(o)_,:  _(o)_, :::|ぁぁ
.   |    ::<      .::|あぁ
   \  /( [三] )ヽ ::/ああ
   /`ー‐--‐‐―´\ぁあ

修正後、気を取り直して再度トライ。なんという…


PHP2009-24
入力後、ボタンを押す。


PHP2009-25
無事追加されたレコードが表示された。

ヽ( ^ω^)ノ サクセス!

さて解説。

レコードの追加は、$dbにある『insert』というメソッドで実行します。

$this->db->(テーブル,配列);

insertは、第一引数で指定したテーブルに、第二引数の配列を新たなレコードとして追加します。

ここでの処理をみていきませう。


$data = array(

'timestamp' => time(),

'title'=> $this->input->post('title',true),

'content'=> $this->post('content',true)

);

まず追加するレコードのデータを$dataから取得。post(**)部分ですな。postされたデータの中からtitleとcontentを取り出してそれぞれ配列のtitleとcontentに格納しているわけです。time()は時刻を取得してます。

次。


$this->insert('blogs',$data);の部分で、上記配列のデータをDBへ格納しています。

そして最後に


redirect(base_url().'helo/index');

で、ベースURLにhelo/indexをくっつけたURLへリダイレクトがかかるようになっている訳です。

ここでのベースURLは上のほうで書いた様に、『config』フォルダ内の「config.php」内で設定したベースURLです。

(´Д`;)さてとりあえずここまでで表示・登録まではできましたが@更新・削除等まだまだ項目は続きます。

(´Д`;)と…いうわけで…続き…ます…|||orzガクッ


        _,,:-ー''" ̄ ̄ ̄ `ヽ、
     ,r'"           `ヽ.
 __,,::r'7" ::.              ヽ_
 ゙l  |  ::              ゙) 7
  | ヽ`l ::              /ノ )
 .| ヾミ,l _;;-==ェ;、   ,,,,,,,,,,,,,,,_ ヒ-彡|
  〉"l,_l "-ー:ェェヮ;::)  f';;_-ェェ-ニ ゙レr-{   / ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄
  | ヽ"::::''   ̄´.::;i,  i `'' ̄    r';' }   | 

 . ゙N l ::.  ....:;イ;:'  l 、     ,l,フ ノ   | DB関連は項目が多すぎる
 . |_i"ヽ;:...:::/ ゙'''=-='''´`ヽ.  /i l"  < から困る
   .| ::゙l  ::´~===' '===''` ,il" .|'".    | 
    .{  ::| 、 :: `::=====::" , il   |     \________
   /ト、 :|. ゙l;:        ,i' ,l' ノト、
 / .| \ゝ、゙l;:      ,,/;;,ノ;r'" :| \
'"   |   `''-、`'ー--─'";;-'''"   ,|   \_

困る。


人気ブログランキングへ

(゚д゚)クワッ さて前回思ったよりもボリュームが膨らんで泣く泣く分割してしまいましたが(管理人の管理能力不そk…)今回はいよいよフォームを作成していきますYO!


       ヽ|/
     / ̄ ̄ ̄`ヽ、
    /         ヽ
   /  \,, ,,/    |
   | (●) (●)|||  |
   |  / ̄⌒ ̄ヽ U.|   ・・・・・・・・ゴクリ。
   |  | .l~ ̄~ヽ |   |
   |U ヽ  ̄~ ̄ ノ   |
   |    ̄ ̄ ̄    |



さて値の受け渡しがわかったところでいよいよモノとしてフォームをつくっていきまっしょい!


まぁ基本としてフォームから送信⇒受信したデータを表示といったところでせうか。


まずは送信部分から。


流れはビューからコントローラーへ投げてコントローラーで処理してビューに投げる、そういう構図になります。


ではまずviewのindex.phpを↓のように修正しましょう。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3c.org./TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="
http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>フォームの送信</title>
</head>
<body>
<h1>フォームの送信</h1>
<?=$msg; ?>
<form method="POST" action='/igniterapp/helo/index'>
<input type="text" name="text1" id="text1" size="60">
<input type="submit">
</form>
</body>
</html>


とりあえずテキスト入力エリアをひとつ作成。またコントローラーから変数$msgを受け取れるようにしておきます。


次に、核であるコントローラーのindexメソッドを修正します。


function index(){

if($this->input->post('text1')!=null){
$str = '<p>送信内容:'.$this->input->post('text1').'</p>';

}else{
$str = '<p>テキストを入力してください!</p>';
}
$data = array('msg'=>$str);
$this->load->view('index',$data);
}

実際の画面はこうなります。


PHP2009-7
初期


PHP2009-8
入力


PHP2009-9
送信後


解説~。

フォーム送信時のデータ受け渡しは$this->input->post('項目名');でゲッツできます。

項目名はidなのか名前なのか。よくわからんので試してみました。

『views』のindex.phpのテキストタグのid=""部分を除去してみますた。



PHP2009-10
フムン。ちゃんと受け渡しはできている模様。ではname=""を削ってid=""にしてみよう。



PHP2009-11
id="item1"でname="item1"を削った結果。受け渡しが正常に行われなくなった。

あくまで推測の域だがどうやらフォームでの受け渡しはname=""がないとダメなようだ。



POSTは送れる。だがGETはどうか。

>codeigniterに限ったことなのだが、コードイグナイターは『GET形式のデータ送信はセキュリティ上の問題がある。だからない。』というスタンスを貫いている。それゆえデフォルトではGET形式はサポートされていない。


しかし、だからといって不可能というわけでもない。


『俺はどうしてもGETじゃなきゃだめなんだぁぁぁあああ』

    /\___/ヽ   ヽ
   /    ::::::::::::::::\ つ
  . |  ,,-‐‐   ‐‐-、 .:::| わ
  |  、_(o)_,:  _(o)_, :::|ぁぁ
.   |    ::<      .::|あぁ
   \  /( [三] )ヽ ::/ああ
   /`ー‐--‐‐―´\ぁあ
という人向けに。


『application』内の『config』内にあるconfig.phpを開き、以下の部分を検索。

$config['enable_query_strings' ]= FALSE;


上記の部分をTRUEに変更してやれば、クエリー文字が利用できるようになります。

そして、GETが送信可能になるのですが$_GETは毎回初期化されるってのは相変わらず。

でも$_REQUESTから値を取り出せるのですよ。あとはもっとスマートにやりたいならまさに

$this->input->getで取れます。

ただ、上記設定を強行すると、アクセスするアドレスもクエリーを考慮しなければならなくなります。


helo/indexへのアクセスは、http://localhost/igniterapp/index.php?c=helo&m=index としなければならなくなります。Cはクエリー、Mはメソッド。

GETは扱おうと思えば扱えるけど、あんまりお勧めはしませんYO。

GETを強行した結果、アドレス欄がカオスになって

  ク    ク   || プ  / ク   ク  || プ  /
  ス  ク ス _  | | │ //. ス ク ス _ | | │ //
  / ス   ─  | | ッ // /  ス   ─ | | ッ //
  / _____  // /          //
.  /   l⌒l l⌒l \  ))   ____
. / / ̄| ,=| |=、| ̄ヾ   / ____ヽ
/ ̄/ ̄.  ー'●ー'  ̄l ̄ |  | /, -、, -、l  ))
| ̄l ̄ ̄  __ |.    ̄l ̄.| _| -| ,=|=、 ||
|. ̄| ̄ ̄  `Y⌒l__ ̄ノ ̄ (6.   ー っ-´、}
ヽ  ヽ    人_(  ヾ    ヽ    `Y⌒l_ノ
  >〓〓〓〓〓〓-イ   /ヽ  人_(  ヽ
/   /  Θ  ヽ|  /    ̄ ̄ ̄ ヽ-イ

な事態になっても知りませんYO(言いすぎかもですが。


話はそれましたがデータ送信時に問題になるモノがあります。

そう、WEBアプリの宿命ともいえる脆弱性?デス。

XSS(CSSと区別するためにXらしい。)でJavaScriptを埋め込まれ、アボーンという事態に。

それを回避する方法が当然あるわけですが、それがまた至極簡単。


$str = '<p>送信内容:'.$this->input->post('text1',true).'</p>';
↑$input->postで値を取り出す際に、第二引数に"true"を設定するだけ。これだけ。


PHP2009-12

↑実際にJSを埋め込んでみると…
PHP2009-13
有害なタグがアボーンしている!

これだけでXSS対策ができてしまうわけです。すげー。


しかも!


有害でないタグはそのまま表示。



PHP2009-14
<span>タグで文字色を赤にしてみやう。



PHP2009-15
ちゃんと表示される。


まぁこのようにTRUEを指定するだけでお手軽にXSS対策ができてしまうわけですが、やっぱり組むのも人なので、どうしても第二引数を忘れた、なんてことも起こりうるかもしれませぬ。

で、なんと便利なことに、Codeigniterではすべての入力に対してXSS対策を自動でしてくれる設定というものができます。すごい。


『application』内の『config』にあるconfig.phpを開いて、以下の文を検索。

$config['global_xss_filtering'] = FALSE;

この部分をTRUEに変えてやるだけですべての入力で自動でXSS対策の処理をしてくれるようになります。そして第二引数でTRUEと指定する必要もなくなるわけです。


function index(){

if($this->input->post('text1')!=null){
$str = '<p>送信内容:'.$this->input->post('text1').'</p>';

}else{
$str = '<p>テキストを入力してください!</p>';
}
$data = array('msg'=>$str);
$this->load->view('index',$data);
}

config.phpを書き換えてXSS自動にした人のみ↑の書き換え。




以下おまけ****

大規模なサイトになってくると、画面の部分的にも大半が同じなのだから使いまわすことで労力を削れるのでは、というかWEBの現場では時間が無くてデスマるのが日常茶飯事なので、すこしでも手間を惜しみたいわけです。

となると、サイト上のヘッダー、フッター部分やメニュー部分なんていうものはほぼ変わらないも同然なんで全部使いまわしてぇYO!!50も60も同じheaderやfooterなんて!!(場合によってはもっと多いかもですが…)てな感じなので、ヘッダー、フッター等使いまわしてしまいましょう。


Codeigniterでは$load->viewによってページを読み込み、レンダリングするのが基本です。

そして、読み込みは連続して読み込ませることも可能、つまり、バラバラのパーツごとに読み込ませることも可能、ということです。



大体のレイアウト:

ベース:ヘッダー、フッター、コンテンツを配置。

ヘッダー:ぼでーの一番上に表示。

フッター:ぼでーの一番下に表示。

コンテンツ:核部分。ここだけ入れ替えればいいんじゃね?


さてまずはレイアウト用の部品からつくっていきまっしょい!

『views』フォルダに『layout』というフォルダを用意しませう。


次に、ベース部分の作成。『layout』フォルダ内に作成。

mylayout.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="
http://www.w3c.org/1999/xhtml " xml:lang="ja" lang="ja">
<head>
<title><?=$head_title ?></title>
<link rel="stylesheet" type="text/css" href="/igniterapp/css/mylayout.css" />
</head>
<body>
<table class="content_table">
<tr><td>
<?php $this->load->view('layout/header.php'); ?>
</td></tr>
<tr><td>
<?php $this->load->view($content); ?>
</td></tr>

<tr><td>
<?php $this->load->view('layout/footer.php'); ?>
</td></tr>
</table>
</body>
</html>


header.php/$content/footer.phpと、3つのパーツをそれぞれ読み込みます。

組み込まれる要素は

①タイトル表示

②ヘッダー、フッター表示

③コンテンツの表示

以上になります。


ヘッダー、フッタは以下の通り。それぞれ一行ずつ、できたら『layout』フォルダに保存。
header.php

<p class="header">this is header</p>


footer.php

<p class="footer">this is footer</p>


そして最後にスタイルシート。

さてコードイグナイターの初期設定で.htaccessでimageとcssに細工したのは覚えているだろうか。

スタイルシートやJavaScriptのようなビューで使用するファイル類は直接index.phpへ送られると正しく動作しない。なのでフォルダを分けてファイルを配置するのだ。


スタイルシートは『codeigniterapp』フォルダ内に新たに『css』フォルダを作成し、その中に格納する。

では『css』フォルダにmylayout.cssを配置しよう。


mylayout.css

body{
background-color: #ffeeff;
}

h1 {
background-color: #9900AA;
color: #FFFFFF;
font-size: 12pt;
padding: 5px;
}

p.header{
padding: 1px;
font-size: 9pt;
color: #666666;
text-align: right;
border-style: solid none none none;
border-width: 1px;
border-color: #999999;
}

p.footer{
padding: 1px;
font-size: 9pt;
color: #666666;
text-align: right;
border-style: none none solid none;
border-width: 1px;
border-color: #999999;
}

table.content_table{
width: 100%;
padding: 3px;
color: #004466;
}

table.content_table tr td{
border-style: none;
}


ここでヘッダー・フッターで使用するスタイルを一通り用意しますた。

必要に応じて追記していけばおkです。


そして、コンテンツとしては今回作成したフォーム『index.php』を使いませう。

使用するのはコンテンツに配置する部分だけなので、DOCTYPE宣言やhtmlタグやheadタグ等全部取り除きましょう。


\views\index.php

<h1>フォームの送信</h1>
<?=$msg; ?>
<form method="POST" action='/igniterapp/helo/index'>
<input type="text" name="text1" id="text1" size="60">
<input type="submit">
</form>

さて最後にコントローラーメソッドを修正しましょう。この作業でようやく終わり、のはずです。

ちなみにコントローラーの方はindexメソッドのみの修正。クラスとかコンストラクタはノータッチで。


helo.php


if($this->input->post('text1')!=null){
$str = '<p>送信内容:'.$this->input->post('text1').'</p>';

}else{
$str = '<p>テキストを入力してください!</p>';
}
$data = array('msg'=>$str,'head_title'=>'index','content'=>'index');
$this->load->view('layout/mylayout',$data);
}

追加は赤字部分のみ。

それでは実際にどうなったか見てみよう。


PHP2009-16
スタイルシートが適用されて色が…。ちなみに上下にそれぞれheader.php/footer.phpの<p>タグの内容がでているのがわかるだろうか。



PHP2009-17
そして当然、入力してクエリボタンを押せば…



PHP2009-18
( ゚д゚)…(゚д゚ )…( ゚д゚ )コッチミンナ!!



さて長くなりましたが…とりあえず、CV編は以上になります…書き留めるのも気力消費するわぁ…

(´Д`;)フゥフゥとりあえず今回はこれにて終了。次回以降はいよいよMVCの最後のM、モデルについて取り扱っていきますYO!


(´Д`;)ノシ 次回へ続く!

人気ブログランキングへ

(゚д゚)ノ こむばむわ、中の人ですぉ。


さて引き続き本日もコードイグナイダーっていきましょう(意味不明


今回は宣言どおり、コントローラーとビューについてやっていきまっしょい。(゚д゚)クワッ


前にMVCとか出てきたと思うけれど要は動きの部分と見た目の部分ですな。残りはDBなので今回はパス。次回以降で。



では早速やっていきませう。


まずは前回の事項の確認。

コードイグナイターアクセス時には、http://localhost/codeigniterapp/ コントローラー/メソッド

でアクセスすると書きましたが、そこのあたりを具体的に見ていって見ませう。


まずは例用にheloクラスを作成。

クラス名:Helo

ファイル名:helo.php


※クラス名は最初の一文字のみ必ず大文字に。ファイル名はすべて小文字で。

『application』内の『contllers』フォルダ内に『helo.php』を作成しませう。


helo.php

<?php

class Helo extends Controller {


 function Helo(){

parent::Controller();

}


function index(){

echo 'これはCodeigniterの表示です。';

}

}

?>


保存できたら、アドレス欄にhttp://localhost/codeigniterapp/helo

でアクセスしてみませう。


PHP2009-4

↑の様に表示されたら成功。

もし文字化けしたら文字コードをUTF8なりに変えてください。


この画面は、『helo.php』のHeloクラスのindexメソッドを実行した結果です。

メソッドも指定されていない場合にはweb鯖のindex.html同様indexのモノを実行します。

web鯖ではファイル名が指定されていない場合、index.htmlにアクセスしているものとみなされますがそれと一緒です。


上記のアドレスを正しく表記するなら、以下のようになります。

http://localhost/codeigniterapp/index.php/helo/index


↑の様に、index.phpにheloというコントローラー名とindexというメソッドが渡されていることになります。


ではコードの解説に移りましょう。


<?php

class クラス名 extends Controller {


 function クラス名(){

parent::Controller();

}


function index(){

echo 'これはCodeigniterの表示です。';

}

}

?>


クラスは必ずControolerクラスを継承して作成します。

クラス名は何でもおkですが、必ずファイル名と同じにしませう。

そして最初の文字のみ大文字にしませう。(ファイル名はすべて小文字、クラス名は最初の一文字のみ大文字)


つぎはCodeigniter固有のお話。

コードイグナイターでは、クラス名と同じ名称のメソッドがコンストラクタとして機能します。つまり__constructとわざわざ書く必要はないわけです。


そしてその中では必ずparent::Controoler();を実行しておきます。

これによりスーパークラスであるControolerクラスのコンストラクタが呼び出され、初期化処理がスーパークラスに渡されます。


コントローラーには、アクセスして実行されるメソッドが用意されます。

これは引数をもたないシンプルなもの。


今回はechoで文字列を書き出すだけの処理です。

つまりブラウザに文字列が表示されるだけになります。


以上がざっとコードの解説になるわけですが、今のままだと、コントローラーで表示までしちゃっているわけですよ。

MVCの意味がないので表示部分をV(View)に分けてみませう。



まずはViewのファイルを作成します。

『aplication』内の『views』フォルダの中にview用のファイルを作成します。

ぶっちゃけXAMPPだと初期段階で直アク防止用indexファイル(403ファイル)があるので、めんどいのでこれを直接書き換えてつつ別名で保存してしまいましょう(ぉぃ


デフォルトindex.html

<html>
<head>
<title>403 Forbidden</title>
</head>
<body>

<p>Directory access is forbidden.</p>

</body>
</html>


これを下記の様に書き換えて、『別名で保存』、『index.php』というファイル名で『views』フォルダに保存しましょう。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3c.org./TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="
http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Helo</title>
</head>
<body>
<h1>HELO!</h1>
<p>これはビューを使った表示です。</p>

</body>
</html>


ちなみに文字コードはUTF-8で保存しましょう。でないと文字化けしますよ。


続いて、Vを分けたのでコントローラーにも修正が必要です。

Heloコントローラークラスのindexメソッドを修正しましょー。

といっても書き換えるのはホントにこれだけなんですがね。


function index(){

$this->load->view('index');

}

↑インデックスメソッド以外はそのままで。{とか誤って消さない様に注意。


で。


できたらブラウザでhttp://localhost/codeigniterapp/helo にアクセス!




PHP2009-5

↑の様に表示されましたでしょうか?もし『これがCodeigniterの表示です』が表示された場合はもう一度『views』フォルダのindex.phpファイルと、『controller』フォルダのhelo.phpファイルのコードを確認してください。

ヽ( ^ω^)ノ サクセス!

では解説。

$this->load->view('index');


すでに予想されているとは思いますが、↑の一行の意味は「views」フォルダ内から、indexという名称(拡張子切捨)のファイルをロードして表示!という命令。要は拡張子を除いたファイル名を読み込んでレンダリングして表示するというコト。


さて。以上で一応MVCのVとCの切り分けができるようになったわけだ。

だがぢつはまだ問題は残されている。


それは…


ヽ( ^ω^)ノ サクセス!

じゃない、どうやって変数等の値を受け渡すか、という部分だ。

というわけで後半はフォームの作成を通じて変数の受け渡しを実践していくぉ!


PHP2009-ゆっくり



とまぁそういうことで後半戦へいきまっしょい。


さぁ、コントローラーからビューへ値を受け渡して表示させるにはどうすればいいか。


一般的なフレームワークでは、必要な値をコントローラーで設定することでビューにその値を埋め込むことができる。その点はcodeigniterも同様なのだが、他と違うのはそれが変数ではなく、連想配列の形で渡されることだろう。


管理人がうろ覚えで思い出すと、たしかスマーティー等では、htmlに{$title}だか何だかというモノを埋め込むことでPHP側で定義した変数$titleがあたかもHTMLへ埋め込まれているように表示される、というものだ。

つまるところ、{$title}は$titleなのであり、一対一の関係。それに対してコードイグナイターでは勝手に連想配列が生成されてその連想配列を指定することで変数の値が取れる、という仕組みを採用しているようだ。


仕組みは、viewをロード、レンダリングする際にその連想配列を渡すとview側でその連想配列に入っている各キーに対応した名前の変数が用意されるというものだ。

まぁ、説明するより実際にやってみたほうがはやいので、そうしてみよう。


まずはコントローラーのindexメソッドを修正しよう。ファイル名はもち『helo.php』。

修正する箇所は下記の部分。ほかはいじっちゃダメ!!


function index(){
$this->load->view('index');
}

を、下のように修正。

function index(){

$data = array(
'title' => 'INDEX PAGE',
'h1' => 'HEADLINE',
'p' => array(
'これはCodeigniterによるWEBページです。',
'複数の値を変数としてビューに受け渡せます。',
'実際に試してみてください'
)

);
$this->load->view('index',$data);
}

続いてビューの方も修正。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"
http://www.w3c.org./TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns="
http://www.w3.org/1999/xhtml ">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?=$title ?></title>
</head>
<body>
<h1><?=$h1 ?></h1>

<?php foreach($p as $p1): ?>
<p><?=$p1 ?></p>

<?php endforeach; ?>
</body>
</html>


<title>、<h1>、<p>にそれぞれ変数を出力するための記述が埋め込まれています。

<?=h1 ?>はスマーティーでいうところの{$h1}みたいなモノ。


で。注意点は<p.>の部分。

↑で$p1に対してはさらに配列で


'これはCodeigniterによるWEBページです。',
'複数の値を変数としてビューに受け渡せます。',
'実際に試してみてください'

の3つの値が渡されています。

titleやh1では単一なことを考えるとこれは面倒です。ですが、foreachのタグを埋め込むことでp1配列内のすべてを表示できる、という形になります。



PHP2009-6
↑が実行結果。

※エラー!!index.php*行目が***※と表示された場合は


⇒foreachに注意!(管理人はこれではまったorz)<?php foreach($p as $p1): ?>の部分。

foreachの開きタグ()の後ろは『;』ではなく、『:』です。これ間違えるとエラー。しばらく原因がわからずに云々うなっておりますた。||orz ちなみに閉じの<?php endforeach; ?>では『;』でおk。


しかしこれで配列までも自由に埋め込めるようになったわけですね。…ゴクリ。


(´・ω・`)いい加減長くなってきた&日付変わったのでフォームは以下次号!!


つづきます…orz

人気ブログランキングへ