Posts tagged input

jQuery で Ajax のメモ

0

jQuery の自分へのメモです。
(続きを読む…)

ソフトバンク携帯の一部端末で 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'));

(続きを読む…)

WordPress テーマを作成する(6) CSS でデザインを整える

1

前回まではまだ縦に長いだけのデザインされていない状態でした。今回は CSS を作成してデザインを整えてブログらしくして行こうと思います。 (続きを読む…)

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 で画像のアップロードができます。

CakePHP HTML ヘルパーで出力するラジオボタンにラベルを付ける方法

2

CakePHP 1.1 の HTML ヘルパーが出力するラジオボタンにはラベルが付いていないのでラジオボタン以外の文字の部分をクリックしてもチェックができません。そこで CakePHP HTML ヘルパーで出力されるタグを変更する方法 のエントリーの方法を使用してラジオボタンにラベルを付加してみました。

app/config/tags.ini.php
radio = <label><input type="radio" name="data[%s][%s]" id="%s" %s />%s</label>

あとは普通に $html->radio() を使用して出力すればラベルが付加されています。

CakePHP 1.2 ではラジオボタンにラベルがついた状態で出力されていました。

CakePHP 1.2 の saveAll その2

3

CakePHP 1.2 の saveAll その1 では同一モデルへの複数レコードを saveAll で保存しました。今回はアソシエーションのモデルのデータを saveAll で保存する方法です。

アソシエーションのモデルのデータを保存

モデル
user.php

< ?php
class User extends AppModel {
    var $name = 'User';
    var $hasMany = array('Comment');
}
?>

comment.php

< ?php
class Comment extends AppModel {
    var $name = 'Comment';
    var $belongsTo = array('User');
}
?>

コントローラ
users_controller.php

function add() {
    if (!empty($this->data)) {
        $this->cleanUpFields();
        $this->User->create();
        if ($this->User->saveAll($this->data)===false) {
            $this->Session->setFlash('保存に失敗しました);
        } else {
            $this->Session->setFlash('保存しました');
        }
        $this->redirect(array('action'=>'index'), null, true);
    }
}

ビュー
users/add.ctp

< ?php echo $form->create('User');?>
< ?php echo $form->input('User.name');?>
< ?php echo $form->input('Comment.body'); ?>
< ?php echo $form->end('Submit');?>

CakePHP 1.2 の saveAll その1 の同一モデルへの複数レコードの保存よりも使い道は多いのではないかと思います。

追記
このエントリーは CakePHP 1.2.0.6311 beta で検証しています。

Go to Top