[Ads]新人の飲み会幹事さん必見!?飲み会幹事マニュアル

2015年01月29日

CakePHP2の画像アップロードプラグイン「Upload」を使ってみる

今日は掲題の通り、CakePHP2の画像アップロードプラグイン「Upload」を使ってみた。初心者Pターは画像の投稿が可能なアプリケーションを作成しようと現在製造を進めている。さて、画像のアップロードの方法だが、CakePHPにはいくつかプラグインがあるようだ。「スポンジの再発明」をさけるために利用してみた。

導入


composerなるモジュール管理ツールを利用するのが便利であるようなのだが、よくわからないので、一旦手動でやってみた。composerの使い方については後日勉強しようと思う。
本家の以下サイトを参考にした。英語が苦手だから本当に苦労する。。。。
http://cakephp-upload.readthedocs.org/en/latest/installation.html

@ダウンロードする
https://github.com/josegonzalez/cakephp-upload
cakephp-upload-master.zip

A解凍して、解凍フォルダを「Upload」にリネームする。
Bapp/Pluginに配置する。
Cbootstrap.php に以下を追記する。
CakePlugin::load('Upload');


導入は以上で完了だ。非常に簡単。

試しにサンプルを作成してみる


では次にサンプル。画像を投稿するサンプルを作ってみた。
@投稿テーブルを作成する。ddlは以下の通り。

CREATE TABLE posts (
id INT UNSIGNED AUTO_INCREMENT PRIMARY KEY,
title VARCHAR(50),
body TEXT,
`photo` varchar(255) DEFAULT NULL,
`photo_dir` varchar(255) DEFAULT NULL,
created DATETIME DEFAULT NULL,
modified DATETIME DEFAULT NULL
)ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;


Aコントローラを作成する。
アクションは3つ。初期表示のindex、投稿処理のpost、投稿データ参照のviewだ。
PostsController.php
<?php
class PostsController extends AppController{

public $scaffold;

/**
* 初期表示
*/
public function index(){
$this->render('index');
}

/**
* 投稿処理
*/
public function post(){

if($this->request->is('post')){
// 登録処理を行う。
$id = $this->Post->save($this->request->data);

// 登録後、参照画面にリダイレクトする。
$this->redirect('/Posts/view/'.$this->Post->id);
return;
}

$this->render('index');
}

/**
* 投稿データ参照
*/
public function view(){

// 投稿idを取得する。
$id = $this->request->pass[0];


// データを取得する。
$options = array('conditions' => array('Post.id' => $id));
$data = $this->Post->find('all', $options);

// 取得したデータをveiwにセットする。
$this->set('data', $data);

$this->render('view');
}
}



B次にモデルの作成。ここで、投稿データのパスの設定を行う。
$actsAsプロパティを設定するだけでよい。ここでは省略するが、thumbnailSizesを指定することで各種サムネイルを作成することが可能である。imagickが必要となるみたいだ。

Post.php
<?php
class Post extends AppModel{

public $actsAs = array(
'Upload.Upload' => array(
'photo' => array(
'fields' => array(
'dir' => 'photo_dir'
)
)
)
);
}



C最後にビュー
投稿画面と投稿データの参照画面を作成する。
index.ctp
<h3>投稿ページ</h3>
<?php echo $this->Form->create('Post', array('type' => 'file', 'action' => 'post')); ?>
<?php echo $this->Form->input('Post.title', array('label' => 'タイトル')); ?>
<?php echo $this->Form->input('Post.body', array('label' => '本文')); ?>
<?php echo $this->Form->input('Post.photo', array('type' => 'file', 'label' => '投稿画像')); ?>
<?php echo $this->Form->input('Post.photo_dir', array('type' => 'hidden')); ?>
<?php echo $this->Form->end('Submit'); ?>


view.ctp
<h3>投稿データ</h3>
<h4>タイトル</h4><br>
<?php echo $data[0]['Post']['title']?><br><br><br>
<h4>本文</h4><br>
<?php echo $data[0]['Post']['body']?><br><br><br>
<h4>画像</h4><br>
<?php echo $data[0]['Post']['photo']?>
<?php echo $data[0]['Post']['photo_dir']?>
<?php echo $this->Html->image('/files/post/photo/'.$data[0]['Post']['photo_dir'].'/'. $data[0]['Post']['photo'] ,array('alt' =>$data[0]['Post']['photo'] )); ?>




動作イメージは以下。
投稿画面で画像を指定する。
uploadサンプル.png
投稿後、投稿した画像を参照できる。
upload投稿後.png


ラベル:CakPHP2
posted by 初心者Pター at 00:19| 日記 | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。