Posts tagged form

jQuery でクッキーを扱う方法

1

jQuery でクッキーを扱うのを下記サイトを参考にやってみました。
javascriptライブラリjQueryでcookieを超簡単に扱う方法 : 4GALAXYのメモ
Klaus Hartl – Stilbüro : Cookie Plugin for jQuery

jquery.cookie.js の準備

jquery.cookie.js をダウンロードして HTML で使えるようにします。

<script type="text/javascript" src="jquery.cookie.js"></script>

(続きを読む…)

ソフトバンク携帯の一部端末で HTML の解釈がおかしくないか?

1

ソフトバンク携帯の一部機種でおかしな現象が起きています。

<font color="#ff0000">
<input name="hoge" type="text" value="あいうえお">
</font>

というような HTML を表示すると value 属性の「あいうえお」という文字が赤くなる。
これが困るのが背景色を黒とかにして、文字色を白にしているような場合、フォームのテキスト入力エリアは背景が白なのでそこに表示される文字も白になり一見なにも表示されていないようになってしまいます。
(続きを読む…)

CakePHP 1.2 Form ヘルパーで input タグとエラーメッセージを別々に表示する方法

2

CakePHP1.2 では Form ヘルパーの input メソッドでエラーメッセージを自動的に表示することが可能です。 自動的にエラーメッセージを表示するためには CakePHP1.2 のバリデーション で書いたようにモデルのバリデーションでエラーメッセージを設定しておきます。

/* モデルのバリデーション */
var $validate = array(
    'email' => array(
        'required' => array(
       	    'rule'=>VALID_NOT_EMPTY ,
       	    'message' => '必須項目です'
       	),
);

/* View の Form ヘルパー */
echo $form->input('User/email', array('type'=>'text'));

(続きを読む…)

PHP を勉強するのにオススメ書籍の10冊

1

これから PHP を覚える人、もっと技術を向上させたい人にオススメの本を10冊ピックアップしてみました。
逆にこれはオススメ!という本があればコメントで教えてください。
順番はとくにオススメの順ではありません。気になったところから読んでみるのがよいかと思います。
(続きを読む…)

iモードID の仕様

1

iモードID の仕様が公開されました。

作ろうiモードコンテンツ:iモードセンタの各種情報 | サービス・機能 | NTTドコモ

リンクに ?guid=ON という引数をつけないとダメらしいです。
(続きを読む…)

PHP5.2 DateTime クラスのメモ

1

PHP5.2 以降から日付の処理に DateTime クラスが使用できるようになりました。
PHP5.2 で開発していて DateTime クラスを使用する機会があったのでメモしておきます。

DateTime オブジェクトの生成

$date = new DateTime();または、
$date = date_create();
で生成します。
引数には strtotime 関数が理解できる形式を指定することができます。
指定しないとデフォルトは “now” です。つまり現在の日時になります。

日付の操作

strtotime と同じようなことが DateTime::modify() でできます。
$data->modify('+1 day');
指定方法は strtotime と同じです。

日付のフォーマット

date(‘Y-m-d’) のように出力する日付のフォーマットを指定できます。
$date->format('Y-m-d');
指定できる形式は date 関数と同じです。

まとめ

2008年3月12日の翌日を Y-m-d 形式で出力するには下記のようになります。

$date = new DateTime("2008-03-12");
$date->modify("+1 day");
echo $date->format("Y-m-d");

CakePHP1.2 Form ヘルパーで日付のフォームを作る

1

CakePHP1.2 の Form ヘルパーを使用して日付のフォームを作成したときのメモです。

$attr = array('minYear' => 2000, 'maxYear' => date('Y'), 'separator' => ' / ');
echo $form->dateTime('Model/field', 'YMD', 'NONE', date('Y-m-d'), $attr);

とすると下のような日付を選択するフォームができます。

Form Helper Date

第2引数の ‘YMD’ で年月日の並び順を指定します。日付を表示しない場合は ‘NONE’ を指定します。

NONE
非表示
YMD
年月日の順に表示
DMY
日月年の順に表示
MDY
月日年の順に表示

第3引数で時間表示の指定をします。

NONE
非表示
12
時間を12時間表示
24
時間を24時間表示

第4引数でデフォルトの日時を指定します。

第5引数で属性を指定します。

separator
日付の select タグの間に表示する文字
minYear
開始する年
maxYear
終了する年
interval
分を何分刻みで表示するか

CakePHP1.2 のバリデーション

12

CakePHP 1.2 を使用してフォームを作成してバリデーションを使用したメモです。

下記サイトを参考にさせていただきました。
cakePHP 1.2のバリデーションを理解する – cakephp – クロアチアで働くプログラマー日記

例としてメールアドレスを2回入力させるフォームを考えて見ます。
バリデーションルールとして

  • 必須項目
  • メールアドレスとして正しい
  • メールアドレスがユニーク
  • 2回入力したメールアドレスが一致する

モデルにバリデーションを定義する

var $validate = array(
    'email' => array(
        'unique' => array(
    	    'rule' => array('checkUnique', 'email'),
    	    'message' => 'メールアドレスは既に登録されています'
    	),
        'rule1' => array(
       	    'rule' => array('email'),
       	    'message'=>'メールアドレスが正しくありません'
      	 ),
        'required' => array(
       	    'rule'=>VALID_NOT_EMPTY ,
       	    'message' => '必須項目です'
       	),
    ),
    'email_confirm' => array(
        'rule1' => array(
    	    'rule'=> array('checkCompare'),
    	    'message'=>'一致しません'
    	),
    ),
);

私はエラーメッセージをバリデーション定義にまとめておきたいので、上記のように各ルールに
'message' => 'エラーメッセージ'
として定義しています。
ここで定義しておけば、後でビューに書くフォームヘルパーでフォームを出力するときに引っかかったエラーを自動的に出力することができます。

また、自分でバリデーション関数を作成してチェックすることもできます。それが checkUnique と checkCompare です。

メールのユニークチェックは参考サイトを参考にさせていただきました。

function checkUnique($field){
    foreach( $field as $key => $value ){
        $this->recursive = -1;
        $found = $this->find(array("{$this->name}.$key" => $value));
        return !$found;
    }
}

次にメールアドレスを2回入れたものが一致するかのチェックです。
これはパスワードなどでもたまに使用するので汎用性を持たせてあります。
例えばメールアドレスのフィールド名が email の場合、確認用のフィールド名は ‘_confirm’を付けて email_confirm としておけばこの2つが一致するかチェックします。

function checkCompare($field) {
    foreach( $field as $key => $value ){
        if (preg_match('/^(.+)_confirm$/', $key, $regs)) {
            return $this->data[$this->name][$regs[1]] == $this->data[$this->name][$key];
        }
    }
}

ビューでフォームを設定

<?php echo $form->input('User/email', array('type'=>'text')); ?>
<?php echo $form->input('User/email_confirm', array('type'=>'text')); ?>

このように書いておけばバリデーションエラーがある場合は、モデルのバリデーションに定義したエラーメッセージを自動的に出力してくれます。

ちなみに上記のように書くと input タグの前に email などのフィールド名が出力されます。これを消したい場合は
<?php echo $form->input('User/email', array('type'=>'text', 'label'=>'')); ?>
と書くと表示されなくなります。

追記:
コメントで教えていただきました。label=>” だと表示されないが、label タグは残るので
<?php echo $form->input('User/email', array('type'=>'text', 'label'=>false)); ?>
とするとラベルタグも出力されなくなります。

コントローラでバリデーションチェック

以下のようになります。

function action() {
    if ($this->data) {
        if ($this->User->create($this->data) && $this->User->validates()) {
	    // バリデーションOK
	}
    }
}

他にもいろいろフォーム気がついた点があったのでそれはまた後でまとめます。

CakePHP Ajax のフォームを作成する

5

今さらなのですが CakePHP1.1 で Ajax のフォームを作成するというのをやったのでメモしておきます。

Ajax , Javascript ヘルパーを使用できるようにする

コントローラで Ajax, Javascritp ヘルパーを使用できるようにする。
var $helpers = array('Ajax', 'Javascript');

prototype.js を読み込む

webroot/js に prototype.js を配置し、ビューで読み込みます。
<?php echo $javascript->link('prototype'); ?>

ビューでフォームを作成する

今回は submit ボタンを押した後、更新中には submit ボタンを消して変わりに「更新中」というメッセージを表示し、更新終了後にメッセージをボタンの下の id=ajax_message に表示するようにしました。

<?php
$options = array(
    "update" => "ajax_message",
    "loading" => "Element.hide('ajax_button'); Element.show('ajax_loading');",
    "complete" => "Element.show('ajax_button'); Element.hide('ajax_loading');",
    );
echo $ajax->form("/controller/action/", "post", $options);
?>
<?php echo $html->input('Model/Field', array('type'=>'text')); ?><br>
<input type="submit" id="ajax_button">
<div id="ajax_loading" style="display:none;">更新中...</div>
<div id="ajax_message"></div>

$ajax->form の $options の
“update” で更新するメッセージ領域を指定し、
“loading”でアップロード中の動き、
“complete” で処理終了後の動き
を指定しています。

コントローラに Ajax で処理するアクションを作成

function action() {
    $this->layout = 'ajax';
    /* $this->data にフォームの内容が渡るので必要な処理を書く */
    $this->Model->id = $this->data['Model']['id'];
    $this->Model->saveField("Field", $this->data['Model']['Field'], true);
}

$this->layout で ‘ajax’ を指定して余計なヘッダ、フッタが出ないようにします。

Ajax で出力するビューを作成する

上のコントローラのアクションで出力するビューを作成します。
上の例では saveField でフォームから送られてきたデータを使用して更新処理しています。その結果によってメッセージを送信します。

<?php
if($msg=$error->messageFor('Model/Field')) {
    echo $msg;
} else {
    echo "更新しました";
}
?>

CakePHP jQuery を使用した Ajax ファイルアップロード

6

下記ページを参考にさせていただきました。
“jQueryを使ったAjaxファイルアップロード” フォーラム – CakePHP Users in Japan
David Golding Design Blog -

上記ページでは jQuery を使用してテキストファイルをアップロードしてテキストの内容を表示するというものですが、画像をアップロードしてアップロードした画像をフォームの下に Ajax を利用して表示するというのをやってみました。

jQuery 使用準備

jquery.js と jquery.form.js を app/webroot/js/ 以下に配置します。
アップロードするビューで上記 JavaScript ファイルを読み込むため下記コードをビューに追加します。
<?php echo $javascript->link(array('jquery.js','jquery.form.js')); ?>

ビューにアップロードするフォームを作成する

今回は users コントローラの form アクションでフォームを表示します。Ajax の処理を行うのは users コントローラの upload アクションです。
views/users/form.ctp

<h1>upload test</h1>
<?php echo $form->create('User',array('name'=>'uploadForm','id'=>'uploadForm','type'=>'file'));?>
<?php echo $form->input('upload_file',array('label'=>'Upload Text File ','type'=>'file'));?>
<?php echo $form->button('アップロード',array('onClick'=>'$('#uploadForm').ajaxSubmit({target: '#uploadFile',url: '/users/upload'}); return false;'));?>
</form>
<div id="uploadFile"></div>

コントローラの処理

views/users/form.ctp から「アップロード」ボタンを押すと users/upload アクションの $this->data にアップロードファイルの情報が入ってきます。ここでは mime タイプによって JPEG ファイルのみをアップロードできるようにしています。アップロード後に views/users/upload.ctp を出力します。

function upload() {
    if (!$this->data['User']['upload_file']) {
        $this->set('error','アップロードするファイルを選択してください');
	$this->render('upload','ajax');
    } else {
	if ($this->data['User']['upload_file']['type'] != 'image/jpeg') {
	    $this->set('error','アップロードできる画像は JPEG のみです');
	    $this->render('upload','ajax');
	} else {
	    $filename = '/files/'.intval(rand()).'.jpg';
	    rename($this->data['User']['upload_file']['tmp_name'], WWW_ROOT.$filename);
	    $this->set('filename', $filename);
	    $this->render('upload','ajax');
	}
    }
}

Ajax が返すビューを作成する

/users/upload で処理した結果を返すビューを作成します。今回は veiws/users/upload.ctp として作成しました。ここで img タグによりアップロードしたファイルを表示しています。

<?php if (!empty($error)): ?>
<p><?php echo $error;?></p>
<?php else: ?>
<p>Upload successful</p>
<?php echo $html->image($filename); ?>
<?php endif; ?>

以上で jQuery を使用して Ajax で画像のアップロードができます。

Go to Top