[Site] 画像アップロード (仕様)

タグ :

作成サイト「koweboo」についてまとめるシリーズです。
今回は画像のアップロードについてです。
今回はユーザーイメージについてまとめます。
イメージ画像はユーザー自信で設定できるようにしたいと思います。

画像についての基礎知識は、過去記事「画像の取り扱い」を参照してください。

基本仕様

ユーザーの画像はマイページ編集画面にてアップロードできるようにします。
編集画面にて画像ファイルを選択し、更新することでアップロード完了とします。

マイページで使用する画像は大きめの画像を用い、一覧で使用する画像には小さめの画像を用います。
よって、アップロードした画像のサイズを変更して保存しておく方法を取ります。
ユーザー画像のサイズは、

大 : 104 × 104
小 : 16 × 16

に変更させようと思います。

保存方法は、サーバ内に画像専用のフォルダを設けて、そこに保存させます。
フォルダは、「/app/webroot/img/」内に「user」という名前で作成します。

画像の種類は、

  • gif
  • jpg
  • png

の3種類を保存できるようにします。
(GDでサポートされているのがこの3種類なので)
この種類とファイル名をデータベースに保存しておき、表示時に取り出して使用することにします。

テーブルの作成

画像データ保存用のデータテーブルを追加します。

[user_images]
フィールド名 名称 説明
id ユーザー画像ID 主キー
user_id ユーザーID 画像のユーザーID
filename ファイル名 画像ファイル名
type 種類 画像の種類(拡張子)

登録時、ユーザーIDにはログインユーザーIDが、画像のファイル名には自動生成したファイル名が、画像の種類には選択した画像の種類が自動で登録されます。

画像の表示

画像の表示は、一般的な「img」タグを用いて表示させます。
書くまでも無いですが、以下のソースコードになります。

<img src=<?php echo (フォルダパス + ファイル名 + 拡張子); ?> />

フォルダパスは固定値で良いです。
ファイル名と拡張子は、データベースから取得した値となりますので、コントローラにて値を渡してやります。

画像を登録する際に行う編集処理を作成しなくてはいけないのですが、長くなりそうなので、続きは次回に。。。

Share

  • このエントリーをはてなブックマークに追加

Comment

コメントを残す

*がついている欄は必須項目です。

  • Twitter
  • Facebook
  • Google Plus
  • RSS Feed