エス技研

WordPress、CakePHP、PHP、baserCMSなどの Web系システムを中心に情報を提供します!


CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3

   

CakePHP3の更新画面でファイルアップロードプラグイン Upload Plugin 3.0を使う方法

 
この記事は、CakePHP3でファイルや画像をアップロードするプラグイン「Upload Plugin 3.0」の解説記事の 3本立てのうちの「最終回」です。
 
Upload Plugin 3.0の基本的な設置方法を解説した記事は下記にありますので、基本的な設置方法から理解したい場合は、下記の記事から読んでください。
CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1
 
この記事では、基本的な設置方法を踏まえたうえで、アップロードする画像、ファイルのバリデーションや、アップロードするファイルを複数にする場合や、記事を削除したときに画像も一緒に削除する処理など、実用的な利用を想定したカスタマイズ方法を解説していきます。
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2
 
そして、この最後の記事では、2記事までで解説した画像を新規登録でアップロードする処理に続く処理として、記事を更新する際の画像の取り回しの処理、および、登録した画像を表示する処理について解説します。
CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3
 
 
また、サンプルのソースコードは、「CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1」で紹介したソースコードの一部をカスタマイズする前提で書いていますので、全体のソースコードは「CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1」を参照してください。
 
 
ちなみに、ファイルのアップロード処理は、PHP自体がサポートしていますので、プラグインを使わなくても比較的簡単に実装することができます。
 
その CakePHP3でファイルのアップロード処理を自作した際の、ソースコード付きの解説記事を下記で書いていますので合わせて参考にしてみてください。
CakePHP3でファイルのアップロード処理を自作・解説付き・その1
CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その2
 
ファイルアップロード処理の理解のために読んでみるのもいいかもしれません。
 
 

ファイルアップロードプラグイン Upload Plugin 3.0の更新画面での処理

 
これまで、その1、その2では、ファイルアップロードプラグイン Upload Plugin 3.0の基本的な使い方、カスタマイズの方法について解説しました。
 
それらの記事は、あくまでも記事を追加する画面での処理でした。
ただファイルがアップロードします、という処理でした。
 
 
ですが、今回は、記事を更新する画面での処理です。
 
記事を更新する画面では、すでに登録されている画像を確認する処理や、画像だけ削除する処理や、記事と一緒に画像も更新する処理など、多様な処理が必要となります。
 
この記事では、それらの処理について解説をしていきます。
 
 
また、更新の処理は、下記のページの記事をベースに処理を Upload Plugin 3に対応する処理に変更をしています。
CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その2
 
 

テンプレートファイル edit.ctpの変更

 
更新の処理のテンプレート「edit.ctp」は下記の様に追記をします。
 

 
元々ある「echo $this->Form->control('image1');」の前に、1行目~10行目を追記します。
 
追記する内容は、画像がアップロードされている場合、その画像を表示する処理です。
アップロードするファイルが、PDFファイルなどの画像ではない場合は、ファイル名を表示し、とリンクの設定をする処理に変更するといいでしょう。
 
1行目で「image1_path」の有無をチェックすることで、ファイルがアップロードされているか否かをチェックします。
「image1」のファイル名が保存される項目は、一度ファイル名が保存されると、それを消すことができないため(私が消す方法を見つけることができなかったため)、「image1」の項目ではファイルの有無の正確なチェックができないと判断しました。
 
2行目の「str_replace('¥¥','/',$topic->image1_path)」は、Windows環境(XAMPP環境)の場合の処理で、ファイルのパスが「¥」が編集されるため、それを「/」に変換するための処理です。
Linux環境の場合は「$topic->image1_path」だけで問題ありません。
 
3行目、5行目の「image1_before」「image1_path_before」は、画面を表示する時点での画像のファイル名とパスを hiddenで編集します。
 
Formヘルパーについては「CakePHP3のForm Helperの使い方のまとめ」に記事を書いていますので、そちらも参考にしてください。
 
 
このテンプレートファイルを使って、トピックスを更新する画面を表示すると、画像がある場合は、下記の様に画像が編集され、「delete」のボタンが表示されます。

 
ファイルを削除する場合は、「delete」ボタンをクリックすると画像だけを削除する、という処理につなげます。
 
画像のサイズや、ボタンの並びなどは CSSなどで調整をしてください。
 
 

コントローラーファイル TopicsController.phpの変更

 
続いて、コントローラーファイルを更新します。
 
 

必要なクラスをロードする処理

 
まず最初に、ファイルを削除する処理と例外処理で必要となるクラスを use句で設定をします。
 

 
Folder、Fileクラスに関しては下記が参考になります。
 https://book.cakephp.org/3.0/ja/core-libraries/file-folder.html
 
「RuntimeException」クラスに関しては下記が参考になります。
 http://waterada.ldblog.jp/archives/20000008.html
 
 

ファイルアップロードの処理の追記

 
続いて、更新処理「edit」アクションの処理として下記の 9行目~67行目、72行目~78行目の処理を追記します。
 

 
 
処理は、画像1、画像2の 2つの画像をアップロードする処理を想定したコントローラーにしていますので、やや長いですが、画像1だけであればその分短くなります。
 
10行目が、画像1の「delete」ボタンがクリックされた場合の処理です。(28行目が、画像2の「delete」ボタンがクリックされた場合の処理です。)
 
12行目で画像のパス、13行目で画像のファイル名を取得し、15行目でファイルの削除処理を実行しています。
16行目~19行目は、削除処理を実行することに関連し、データベースの項目をクリアするために null、0を編集しています。
また、16行目で「$topic['image1'] = '';」として「image1」に nullを代入していますが、テーブルの値がクリアされることはありません。(なぜクリアされないかは調査中です。)
 
47行目からは、「delete」ボタンではなく、記事を更新する「submit」ボタンがクリックされた場合の処理です。
 
51行目は、新しいファイルが入力された場合、かつ、その前にファイルが登録されている状態であった場合は、古いファイルを削除する必要がありますので、その判定をしています。
ここでのファイルの削除処理は、処理エラーになってもエラーメッセージは出さない処理になっています。
理由は、古いファイルが消えなくても処理の流れには大きな影響がない、と判断しているためです。
 
最後が 73行目からの処理で、ここでは「delete」ボタンがクリックされた場合は、更新画面に戻る処理をしています。
 
 

ファイルアップロードプラグイン Upload Plugin 3.0の表示側での処理

 
ファイルアップロードプラグイン Upload Plugin 3.0に関連する最後のコーナーですが、最後は、登録したファイルを表示する処理です。
 
すでに、更新画面で表示する処理を書いてしまっていますので、改めて説明する必要はないかもしれませんが、解説の項目としては必要であろう、ということで記載します。
 
 

アップロードしたファイルを表示する処理

 
アップロードしたファイルを表示する処理です。
templateファイルに記述するコードは以下の通りです。
 

 
「image1」は、画像を表示することに加え、画像へリンクを貼る処理が加えられています。
「image2」は、画像を表示するだけの処理です。
 
「image1」の方で大事なポイントは、「'escape'=>false」を指定しているところです。
この設定がないと画像が表示されず、imgタグのソースコードが表示されます。
 
また、先にも書きましたが、「str_replace("¥¥","/",$topic->image1_path)」は、Windows環境(XAMPP環境)の場合の処理で、ファイルのパスが「¥」が編集されるため、それを「/」に変換するための処理です。
Linux環境の場合は「$topic->image1_path」だけで問題ありません。
 
 

ファイルアップロードプラグイン Upload Plugin 3.0のまとめ

 
ファイルアップロードプラグインである Upload Plugin 3.0をインストールから、基本的な使い方、実用的なカスタマイズ方法、そして、この記事で更新する場合の処理について解説をしてきました。
CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2
CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3
 
 
以前は、ファイルアップロード処理自体も自作をしたこともありまして、それについての記事は下記に書いています。
CakePHP3でファイルのアップロード処理を自作・解説付き・その1
CakePHP3で画像・ファイルのアップロード処理を自作・解説付き・その2
 
ファイルのアップロード処理に関して、自作した処理とプラグインを使う処理とで比較した場合、ファイルをアップロードする処理自体は、プラグインを利用すると簡単に処理を構築することができました。
ですが、更新画面の処理に関しては、特に処理が用意されていませんので、プラグインを利用するメリットがあまり感じられない状況でした。
この更新の際の処理こそがプラグインを使るメリットなんじゃないかとも思うくらいなので、そこは結局自分で考えないといけないところが残念でした。
 
逆に言うと、更新の処理は多様な考え方がありますので、そこはプラグインに頼らず、実装したい処理を自分で実装できるようになっている、ととらえるべきなのかもしれません。
 
 

CakePHP3の関連記事

CakePHP3にWYSIWYGエディタのCKEditor4を設置、カスタマイズ方法を解説
CakePHP3でページごとに読み込むJavaScript、CSSを変える処理の解説
CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
CakePHP3の更新画面でUpload Plugin 3.0を使う方法、viewで使う方法解説・その3
CakePHP3のUpload Plugin 3.0をバリデーションなど実運用向けのカスタマイズ方法解説・その2
CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1
CakePHP3でユーザ定義の定数、変数を設定し、読み込む方法解説
CakePHP3のバージョンを指定してインストールする詳細な手順を解説
CakePHP3のタイムゾーンを協定世界時UTCから日本標準時間JSTにずれを変更する方法
CakePHP3チュートリアルで日付と時刻のDateTimeでエラーが出たときの対処方法
 
その他の「CakePHP3」に関する記事一覧
 
 

 - CakePHP 2.x 3.x

GoogleAdwords

GoogleAdwords

最後までお読みいただきましてありがとうございます。
この記事が参考になったと思いましたらソーシャルメディアで共有していただけると嬉しいです!

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

下記の空欄を埋めてください。 * Time limit is exhausted. Please reload CAPTCHA.

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

※入力いただいたコメントは管理者の承認後に掲載されます。

  関連記事

CakePHPを学ぶ際にはオブジェクト指向を学ぼう

CakePHPはオブジェクト指向で書かれていますので、CakePHPを学ぶにはオブジェクト指向も学びましょう。

CakePHP3のForm Helperの使い方のまとめ

CakePHP3になりフォームヘルパーの使い方も大きく変わりましたので、使い方をまとめました。基本的な使い方からプラスアルファの便利な使い方まで紹介。

CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1
CakePHP3の画像、ファイルアップロードプラグインUpload Plugin 3.0の設置解説・その1

CakePHP3でファイル、画像をアップロードするプラグイン、upload plugin 3を導入する手順を解説した記事。3部作のその1で基本的な導入方法の解説で読みながら簡単に導入が可能。

CakePHP 2.3 連携先のテーブルの項目で条件抽出する場合

アソシエーション(連携)している先のテーブルの項目で条件抽出する際の考え方と注意点をサンプルソースを用いて説明しています。

CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説
CakePHP3にデイトピッカー jQuery UI DatePickerを実装する手順の解説

CakePHP3にjQuery UIのDatePickerを実装する手順を説明。併せて、デイトピッカーを設置に関連するCakePHP3の解説と、テーマを変更したり、表記を変更するカスタマイズする方法なども紹介。

CakePHP3のビューで受取ったテーブルのオブジェクトを連想配列に変換する方法
CakePHP3のビューで受取ったテーブルのオブジェクトを連想配列に変換する方法

コントローラーからビューに送ったテーブルのオブジェクトを連想配列に変換し、ビューの中で自由に使えるようにするメソッド「toArray()」の解説。連想配列に変換できれば利用度アップ!

CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数
CakePHP3でDocumentRootやtmp、webroot、logsなどのフォルダへのパスの定数

CakePHP3で特定フォルダのパスの定数を解説。root、DocumentRoot、app、config、webroot、tests、tmp、cache、vendor、コア、コアの srcが設定済み。realpath()関数を使うと柔軟なパス指定が可能。

CakePHP 2.3 Search Pluginで検索処理 その3入力エリア一つで複数の項目を同時に検索する方法

CakePHPの検索プラグイン Search Pluginの検索処理の中で入力エリア一つで複数の項目を同時に検索する方法を解説。

CakePHP 2.3 テーブルの項目を演算した結果を条件として抽出する方法

アソシエーション(連携)している先のテーブルの項目で演算をする場合の考え方と注意点をサンプルソースを用いて説明しています。分かってしまえば簡単です。

CakePHP 2.3 Search Pluginで検索処理 その7queryを使って 日付の範囲検索

CakePHPの検索プラグイン Search Pluginの検索処理の中で queryを使って日付の範囲検索の方法です。