（ﾟдﾟ）ｸﾜｯ さて前回思ったよりもボリュームが膨らんで泣く泣く分割してしまいましたが（管理人の管理能力不そｋ…）今回はいよいよフォームを作成していきますＹＯ！
ヽ|/
／￣￣￣｀ヽ、
/ ヽ
/ ＼,, ,,／ |
| （●） （●）||| |
| /￣⌒￣ヽ U.| ・・・・・･･･ｺﾞｸﾘ。
| | .ｌ~￣~ヽ | |
|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);
}
実際の画面はこうなります。
初期
入力
送信後
解説～。
フォーム送信時のデータ受け渡しは$this->input->post('項目名');でｹﾞｯﾂできます。
項目名はidなのか名前なのか。よくわからんので試してみました。
『views』のindex.phpのテキストタグのid=""部分を除去してみますた。
フムン。ちゃんと受け渡しはできている模様。ではname=""を削ってid=""にしてみよう。
id="item1"でname="item1"を削った結果。受け渡しが正常に行われなくなった。
あくまで推測の域だがどうやらフォームでの受け渡しはname=""がないとダメなようだ。
ＰＯＳＴは送れる。だがＧＥＴはどうか。
>codeigniterに限ったことなのだが、コードイグナイターは『GET形式のデータ送信はセキュリティ上の問題がある。だからない。』というスタンスを貫いている。それゆえデフォルトではＧＥＴ形式はサポートされていない。
しかし、だからといって不可能というわけでもない。
『俺はどうしてもGETじゃなきゃだめなんだぁぁぁあああ』
/＼＿＿_／ヽ ヽ
／ ::::::::::::::::＼ つ
. | ,,-‐‐ ‐‐-､ .:::| わ
| ､_(o)_,: _(o)_, :::|ぁぁ
. | ::< .::|あぁ
＼ /( [三] )ヽ ::／ああ
／｀ー‐--‐‐―´＼ぁあ
という人向けに。
『application』内の『config』内にあるconfig.phpを開き、以下の部分を検索。
$config['enable_query_strings' ]= FALSE;
上記の部分をTRUEに変更してやれば、クエリー文字が利用できるようになります。
そして、ＧＥＴが送信可能になるのですが$_ＧＥＴは毎回初期化されるってのは相変わらず。
でも$_REQUESTから値を取り出せるのですよ。あとはもっとスマートにやりたいならまさに
$this->input->getで取れます。
ただ、上記設定を強行すると、アクセスするアドレスもクエリーを考慮しなければならなくなります。
helo/indexへのアクセスは、http://localhost/igniterapp/index.php?c=helo&m=index としなければならなくなります。Cはクエリー、Ｍはメソッド。
ＧＥＴは扱おうと思えば扱えるけど、あんまりお勧めはしませんＹＯ。
ＧＥＴを強行した結果、アドレス欄がカオスになって、
ｸ ｸ ｜| プ / ｸ ｸ ｜| プ /
ｽ ｸ ｽ ＿ | | │ //. ｽ ｸ ｽ ＿ | | │ //
／ ｽ ─ | | ッ // ／ ｽ ─ | | ッ //
／ ＿＿＿＿＿ // ／ //
. ／ ｌ⌒ｌ ｌ⌒ｌ ＼ ）） ＿＿＿＿
. ／ ／￣| ,=| |=､|￣ヾ ／ ＿＿＿＿ヽ
/￣/￣. ー'●ー' ￣ｌ￣ | | /, －､, -､ｌ ））
|￣l￣￣ __ |. ￣ｌ￣.| _| -| ,=|=､ ||
|.￣|￣￣ `Y⌒l__￣ﾉ￣ (6. ｰ っ-´､}
ヽ ヽ 人_（ ヾ ヽ `Y⌒l_ﾉ
>〓〓〓〓〓〓-ｲ ／ヽ 人_（ ヽ
／ ／ Θ ヽ｜ / ￣￣￣ ヽ-ｲ
な事態になっても知りませんＹＯ（言いすぎかもですが。
話はそれましたがデータ送信時に問題になるモノがあります。
そう、WEBアプリの宿命ともいえる脆弱性？ﾃﾞｽ。
ＸＳＳ（ＣＳＳと区別するためにXらしい。）でJavaScriptを埋め込まれ、ｱﾎﾞｰﾝという事態に。
それを回避する方法が当然あるわけですが、それがまた至極簡単。
$str = '<p>送信内容：'.$this->input->post('text1',true).'</p>';
↑$input->postで値を取り出す際に、第二引数に"true"を設定するだけ。これだけ。
↑実際にJSを埋め込んでみると…
有害なタグがｱﾎﾞｰﾝしている！
これだけでXSS対策ができてしまうわけです。すげー。
しかも！
有害でないタグはそのまま表示。
<span>タグで文字色を赤にしてみやう。
ちゃんと表示される。
まぁこのように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の現場では時間が無くてデスマるのが日常茶飯事なので、すこしでも手間を惜しみたいわけです。
となると、サイト上のヘッダー、フッター部分やメニュー部分なんていうものはほぼ変わらないも同然なんで全部使いまわしてぇＹＯ!!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と、３つのパーツをそれぞれ読み込みます。
組み込まれる要素は
①タイトル表示
②ヘッダー、フッター表示
③コンテンツの表示
以上になります。
ヘッダー、フッタは以下の通り。それぞれ一行ずつ、できたら『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;
}
ここでヘッダー・フッターで使用するスタイルを一通り用意しますた。
必要に応じて追記していけばおｋです。
そして、コンテンツとしては今回作成したフォーム『index.php』を使いませう。
使用するのはコンテンツに配置する部分だけなので、ＤＯＣＴＹＰＥ宣言や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);
}
追加は赤字部分のみ。
それでは実際にどうなったか見てみよう。
スタイルシートが適用されて色が…。ちなみに上下にそれぞれheader.php/footer.phpの<p>タグの内容がでているのがわかるだろうか。
そして当然、入力してクエリボタンを押せば…
（ ﾟдﾟ）…（ﾟдﾟ ）…（ ﾟдﾟ ）ｺｯﾁﾐﾝﾅ!!
さて長くなりましたが…とりあえず、CV編は以上になります…書き留めるのも気力消費するわぁ…
(´Д｀;)ﾌｩﾌｩとりあえず今回はこれにて終了。次回以降はいよいよＭＶＣの最後のＭ、モデルについて取り扱っていきますＹＯ！
(´Д｀;)ﾉｼ 次回へ続く!
