今回の完成品
始めの状態がこの画面で、、、、
マイページ画像を変更すると、
こうなります！！！
具体的に実装するもの
- マイページの制作
- usersテーブルから認証済ユーザーのデータを取得
- usersテーブルにマイページ写真の初期値を入れる
- 認証済みユーザーがマイページ写真を新たに選定した際、usersテーブルの初期値と入れ替える
ログイン中のユーザーのデータをusersテーブルから取得
まずは Controller に、My_pageController.php を作成し以下のコードを打ち込む。
My_pageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Auth;
class My_pageController extends Controller
{
public function index()
{
$id = Auth::id();
$user = DB::table('users')->find($id);
return view('my_page', ['my_user' => $user]);
}
}
use Illuminate\Support\Facades\Auth;
$id = Auth::id();
ここでは、認証済みユーザーの取得を行なっています。
public function index()
{
$user = DB::table('users')->find($id);
return view('my_page', ['my_user' => $user]);
}
ここでは、上で取得した id から users テーブルから取得するデータを選択し、持ってきています。
そして、 return で my_page のパスに送っています。
次に、views の階層に、 my_page.blade.php を作成します。
my_page.php
@if (Session::has('message'))
<p>{{ session('message') }}</p>
@endif
<p>名前:{{ $my_user->name }}</p>
<p>メールアドレス:{{ $my_user->email }}</p>
<!DOCTYPE html>
<html lang="ja">
<body>
<!-- マイページ変更画面 -->
<form action="/my_page2" method="post" enctype='multipart/form-data'>
{{ csrf_field() }}
<!-- 画像内容 -->
<div>
<input type="file" name="top_image">
</div>
<input type="submit" value="変更する">
</form>
</body>
</html>
以上で認証済みユーザーのデータを所得し表示する形ができました。
最後にちゃんとパスが通るように routes に通り道を書いておきます。
routes の web.php に以下を書き込みます。
web.php
Route::get('/my_page2', 'My_pageController@index');
Route::post('/my_page2', 'My_pageController@my_page_update');
usersテーブルにマイページ写真の初期値を入れる
① migrationファイルを作る
php artisan make:migration change_users_add_to_defroute_table --table=users
change から後ろの内容は任意で大丈夫です。ただやっていることを端的に書けていたら、後々探すときに苦労しないので分かりやすく短く書くことをお勧めします。
② migrationファイルを編集
up() にはカラムの追加を、
down() はこの処理を巻き戻す処理を書きます。
path.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class ChangeArtistsTableProfilePhotoPath extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('usersテーブルの画像パスを入れているカラム名')->default('/def_img/noimage.png');
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('usersテーブルの画像パスを入れているカラム名');
});
}
}
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('usersテーブルの画像パスを入れているカラム名')->default('/def_img/画像名');
});
}
ここで、 public の def_img の下の階層に入れている画像名をログインした際に表示されるマイページ写真に初期値として登録します。(先に画像を def_img の下に入れてくださいね！)
③ migrationする
php artisan migrate
これでusersテーブルが変更され、画像のパスを入れていたカラムに初期値が入ります
！！！
認証済みユーザーがマイページ写真を新たに選定した際、usersテーブルの初期値と入れ替える
テーブルの初期値を入れ替えるために、再び My_pageController.php に戻ります。
そして以下の内容を加えてください。
My_pageController.php
public function my_page_update(Request $request)
{
if($request->hasFile('top_image')) {
$id = Auth::id();
$photo_path = $request->file('top_image')->store('public/top_file');
$top_image_pass2 = basename($photo_path);
// DBの対象カラムを更新する
$affected = DB::table('users')
->where('id', $id)
->update(['profile_photo_path' => $top_image_pass2]);
// 画像に表示させる
return redirect("/my_page2")->with([
"message" => "マイページ画像を変更しました。",
"top_image_pass" => $top_image_pass2
]);
}
}
これで Controller は完成です！
$photo_path = $request->file('top_image')->store('public/top_file');
$top_image_pass2 = basename($photo_path);
$photo_path で post で、来た画像データを public/top_file の場所で受け取ります。そして画像のパスのみを取り出します。
// DBの対象カラムを更新する
$affected = DB::table('users')
->where('id', $id)
->update(['profile_photo_path' => $top_image_pass2]);
// 画像に表示させる
return redirect("/my_page2")->with([
"message" => "マイページ画像を変更しました。",
"top_image_pass" => $top_image_pass2
]);
ここでは、 ->where('id', $id) で認証データの画像パスのカラムに画像パスデータを送り users テーブルを更新することをしています。その下では、画像を view で表示させるためにパスを送っています。
次は view を改善していきたいと思います。
my_page.php
@if (Session::has('message'))
<p>{{ session('message') }}</p>
@endif
<p>名前:{{ $my_user->name }}</p>
<p>メールアドレス:{{ $my_user->email }}</p>
@if (Session::has('top_image_pass'))
<img src="{{ asset('/storage/top_file') }}/{{ session('top_image_pass') }}" alt="">
@elseif ($my_user->profile_photo_path == "/def_img/noimage.png")
<p><img src="{{ $my_user->profile_photo_path }}" alt=""> </p>
@else
<p><img src="{{ asset('/storage/top_file') }}/{{ $my_user->profile_photo_path }}" alt=""> </p>
@endif
<!DOCTYPE html>
<html lang="ja">
<body>
<!-- マイページ変更画面 -->
<form action="/my_page2" method="post" enctype='multipart/form-data'>
{{ csrf_field() }}
<!-- 画像内容 -->
<div>
<input type="file" name="top_image">
</div>
<input type="submit" value="変更する">
</form>
</body>
</html>
これにて view の完成です！
@if (Session::has('top_image_pass'))
<img src="{{ asset('/storage/top_file') }}/{{ session('top_image_pass') }}" alt="">
@elseif ($my_user->profile_photo_path == "/def_img/noimage.png")
<p><img src="{{ $my_user->profile_photo_path }}" alt=""> </p>
@else
<p><img src="{{ asset('/storage/top_file') }}/{{ $my_user->profile_photo_path }}" alt=""> </p>
@endif
上記の if 文では以下の三つの判別を行なっています。
- if文
- 画像を変更していない場合、初期値の画像を表示
- 画像を今、変更した場合その画像の表示
- 以前変更した場合その画像の表示
まとめ
今回は、以前の記事とは違うやり方でテーブルにアップロードしました。今回のパターンの方が、コード量が減るので、お勧めですw
もし参考になった際は、ぜひフォローお願いします。