自分流

なんちゃってエンジニアによる自分用メモ

お題で開発

プロフィールの編集機能の実装【お題で開発:5】

投稿日:2019年10月27日 更新日:

前回ログイン機能を作りました。

今回はプロフィールの編集機能を作っていきます。

これも基本的な部分ですね。

 

 

プロフィール編集機能に必要な機能

・DBからlogin_idでユーザデータをとってきて表示

・編集画面で編集項目の入力

・編集項目の正当性確認(バリデート)

・画像のアップロード

・画像のリサイズ(サムネイル化)

・古い画像の削除

・DBのデータの更新

 

盛り沢山ですね。

さぁやっていきましょう。

 

画像のアップロードについて

あとで実装するんですが、先んじて概念をば。

基本的な考え方は文字などとおなじです。

  • formタグの中のinputタグで送信
  • 受け取った側では$_FILES変数を使用してサーバーにファイル保存

 

入力のinputタグは以下のようになります。

<input type=”file” name=”image”>

またファイルアップロードの際、formタグにenctype=”multipart/form-data”という記述が必要になりますので、入力側の全体像はこんな感じになります。

 

受け取った側では$_POSTではなく、 $_FILESを使います。

アップロードされたファイルは一時フォルダに保存され、一定時間経つと消えます。

なので、消えない場所に移動させておく必要があり、その際使うのがmove_uploaded_file()です。

カッコがいっぱいで見づらいですが、要は

move_upload_file(‘アップロードファイルの一時保存ファイル名’, ‘保存先)

という命令を呼べばアップロード完了!

 

 

プロフィール編集機能の実装

 

ファイル構成は以下の通り

 

処理の流れはこんな感じ

プロフィール(表示) → プロフィール(入力) → チェック → DBへ保存

 

 

プロフィール表示画面

セッションからlogin_idを取得して、それをキーにDBからユーザーデータを表示しています。

DBからデータを取る部分は共通でよく使うので関数化。

おなじく画像のタグも何箇所かで同じロジックを使うので関数化しています。

 

DBからユーザーデータを取得する処理

特に難しいこともしておらず、login_idでデータを検索して、検索結果を返しています。

 

画像の表示タグ組み立て

関数にするまでもないけど、何箇所かで使用するため。

対象となる画像があれば<a>タグ作るし、なければ作らない。そんだけ。

 

入力画面

ユーザーデータをDBから取得してデフォルトの値としてinputタグのvalueにセットしていますね。

 

ポイントはDBに格納されているimageの値(今使用中の画像のパス)をhiddenで渡してるところです。

これは、最終的にデータを更新する際、今使用中の画像と新しい画像とが違う場合は、古い画像を捨てる必要がありますので、そこで使用します。

 

 

入力値のチェック

各種データの正当性チェック(バリデーション)をかけて、問題あればやりなおしを促し、問題なければhiddenで埋め込み次のページ(DBへ保存の処理など)に渡す。

入力値のチェックは大体こんな感じになるのかなと。

 

保存する画像のファイル名

画像の保存はファイル名をそのまま使用するとファイル名がかぶる可能性があるので、一意性を担保するようにしました。

$extは拡張子

uniqid()はマイクロ秒単位で変化するユニークな文字列を返してくれます。が、マイクロ秒とはいえかぶる可能性があるため、引数にrand()を使用しさらに一意性を高めます。

 

保存する画像のリサイズ

画像はそのままアップロードすると大きすぎる場合があるので、リサイズしています。

ImageMagick(Imagick)というのを使ってさっくりやってます。

300 * 300のサイズにリサイズして上書きしてますね。

 

DBへ保存

UPDATE文でDBを上書きしてますね。

 

後始末として、古い画像を削除しています。

最初にif($image_old != $image)を比較しておかないと、古い画像名=新しい画像名の場合でも削除してしまうことになるからです。

この辺も登録時にファイル名の一意性を担保すればする必要ない処理になってきますね。

 

 

まとめ

画像のアップロードもやったので、入力部分の基本的なところは全部できましたね。

つぶやきやコメントもこの応用ですむので、あとは同様の機能をつくっていくだけです。終わりが見えてきました!

そのあと未知のフロント側なんですが、どうなることやら・・・

 

今回の成果

github

 

機能一覧

  • ユーザー登録 済!
  • ログイン 済!
  • プロフィール編集
  • プロフィールに画像投稿
  • 一覧表示
  • 新規つぶやき
  • つぶやきへのコメント
  • コメントへのコメント
  • つぶやき、コメントに画像添付
  • いいね

 

つづく

-お題で開発
-, , , ,


comment

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

関連記事

ツイート一覧機能の実装【お題で開発:7】

前回ツイート機能を作りました。 今回はツイート一覧機能を作っていきます。   タイムライン を作ってみたいですが どういう仕組みかパッと浮かばないので、昔ながらの10件ずつ表示してページ送り …

ユーザーの新規登録機能の実装【お題で開発:3】

前回環境構築も済み、意気揚々と開発! あんまり頭の中で構築できておらず、 不安しかありませんがハマりながら作っていきます。 やればなんとかなるでしょうし、やらなければなんともならないですからね。 &n …

お題で開発はじめました 【お題で開発:0】

最近Twitterをはじめました!かじです。こんにちは。   定期的に新しい環境を学びたくなる僕は、入門書を一通り読んで満足してしまうのですが、正直身になっていないのでその先を常々悩んでいま …

ツイート機能の実装【お題で開発:6】

前回プロフィール編集機能を作りました。 今回は投稿(ツイート)機能を作っていきます。 メインとなる部分ですね。   今までの応用でなんとかなるのですが、せっかくなのでちょっと違うことをしてみ …

ログイン機能の実装【お題で開発:4】

前回ユーザーの新規登録を作りました。 今回は登録したユーザーでのログインを作ります。     もはやどんなサービスでも存在するログイン機能。 今更説明するまでもない機能ですが、どう …

Top