Creating a site with login function with Laravel with XAMPP(3/4) User information change function
Aug 25, 2020
PHP
MySQL
xampp
Laravel
Windows10
Target
** Allow user information and table data to be changed from the browser side with Laravel **
Previous article
Creating a site with a login function with Laravel with XAMPP (2/4) enabling authentication function
Creating a user information change page
Preparation
Before creating the page you want to create, arrange the environment so that you can work easily.
Remove capitalization
Currently, the code entered in lowercase by css is also converted to uppercase and displayed.
To cancel it, delete text-transform: uppercase; from <style> of home.blade.php.
Change the top page
The top page of the site created this time is (project name)\resources\views\home.blade.php.
Looking at (project name)\routes\web.php, the routing process that returns welcome.blade.php is defined when http://127.0.0.1:8000/ is accessed. I understand.
Route::get('/', function () {
return view('welcome');
});
So, change the definition to return home.blade.php.
Route::get('/', function () {
return view('home');
});
In the first place, home.blade.php is the first page displayed when login is successful, and nothing is displayed when you are not logged in.
Therefore, it is necessary to change the contents displayed in the login state and the non-login state.
If you actually look at home.blade.php, you can see the code @gest.
This is the blade syntax that determines if the current user is an authenticated user, using the if statement.
In other words, this issue can be solved by defining the content to be displayed when not logged in immediately under @gest and the content to be displayed at login at the next @else.
I made the following contents.
<div class="card-header">
@guest
Laravel
@else
Hello, {{ Auth::user()->name }} !!
@endguest
</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<div class="links">
@guest
<a href="{{ route('login') }}">Login</a>
<a href="{{ route('register') }}">Register</a>
<a href="">Search</a>
@else
<a href="">Edit user information</a>
<a href="">User search</a>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Log out
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
@endguest
</div>
</div>
The above contents are displayed as follows.
Non-login http://127.0.0.1:8000/
Login status http://127.0.0.1:8000/home
Currently, there are login and registration functions in the upper right and center areas, so I want to use only the center area.
In that case, the purpose can be achieved by commenting out the following part of (project name)\resources\views\layouts\app.blade.php.
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
@guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
@if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
@endif
@else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v- pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
@csrf
</form>
</div>
</li>
@endguest
</ul>
User information change screen
From here on is the main subject.
First, create it from the page for changing user information.
I want to be able to change user information by clicking the red frame in the image below at http://127.0.0.1:8000/home.
As the configuration, it looks like Edit screen→Edit confirmation screen→Edit complete screen.
The controller is created by executing the following command in the terminal.
$ php artisan make:controller User/EditController
When going to the edit screen created this time from http://127.0.0.1:8000/home, it is necessary to pass the ID of the current user.
Without it, you can’t work because you can’t get the values from the table.
Codes such as Auth::~ can solve this problem.
If you are using the authentication function, you can output the information of the currently logged in user by declaring such Auth::id().
The rest is completed with a general controller creation method.
<?php
namespace App\Http\Controllers\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Auth;
use App\User;
class EditController extends Controller
{
public function edit()
{
$Auth_data = Auth::id();
$User_data = User::where('id', $Auth_data) -> first();
return view('user/edit',['User' => $User_data]);
}
}
The page to be displayed uses a table and only displays each item and the current input value.``` (project name)\resources\views\user\edit.blade.php @extends(‘layouts.app’)
@section(‘content’)
@endsection
After creating the page for display, add a link to the page created this time in the transition source `home.blade.php`.
``` (project name)\resources\views\home.blade.php
<a href="home/edit">Edit user information</a>
Finally added the routing process.
Route::get('/home/edit','User\EditController@edit');
The page created by the above code is as follows.
User information change confirmation screen
Next, create a page to confirm the contents entered on the change screen and an edit confirmation screen.
As before, create a controller from the terminal with the following command so that you can pass the value thrown with POST from the edit screen to the page for display.
$ php artisan make:controller User/EditCheckController
<?php
namespace App\Http\Controllers\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\User;
class EditCheckController extends Controller
{
public function check(Request $request)
{
$id = $request -> input('edit_id');
$name = $request -> input('edit_name');
$email = $request -> input('edit_email');
$works_id = $request -> input('edit_works_id');
$comment = $request -> input('edit_comment');
$flag = $request -> input('edit_flag');
$edit_database = User::where('id', $id) -> first();
$edit_data = array(
'id' => $id,
'name' => $name,
'email' => $email,
'works_id' => $works_id,
'comment' => $comment,
'created_at' => $edit_database['created_at'],
'updated_at' => $edit_database['updated_at'],
'delete_flag' => $flag
);
return view('user/edit_check',['data' => $edit_data]);
}
}
The page to display uses a table to display each item and the current input value.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
Register with the following contents. Is it OK?
</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}</div>
@endif
<div class="edit_table">
<form method="POST" action="edit_finish">
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>WORKS_ID</th>
<th>COMMENT</th>
<th>CREATED_AT</th>
<th>UPDATED_AT</th>
<th>DELETE_FLAG(0=表示, 1=非表示)</th>
</tr>
<tr>
<td>{{ $data['id'] }}</td>
<td>{{ $data['name'] }}</td>
<td>{{ $data['email'] }}</td>
<td>{{ $data['works_id'] }}</td>
<td>{{ $data['comment'] }}</td>
<td>{{ $data['created_at'] }}</td>
<td>{{ $data['updated_at'] }}</td>
<td>{{ $data['delete_flag'] }}</td>
<td><input type="submit" value="変更を反映する"></td>
<input type="hidden" value="{{ $data['id'] }}" name="edit_id">
<input type="hidden" value="{{ $data['name'] }}" name="edit_name">
<input type="hidden" value="{{ $data['email'] }}" name="edit_email">
<input type="hidden" value="{{ $data['works_id'] }}" name="edit_works_id">
<input type="hidden" value="{{ $data['comment'] }}" name="edit_comment">
<input type="hidden" value="{{ $data['delete_flag'] }}" name="edit_flag">
</tr>
</table>
@csrf
</form>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
次のルーティング処理を追記して、http://127.0.0.1:8000/home/edit から http://127.0.0.1:8000/home/edit_check にエラーが表示されず遷移できるか確かめる。
Route::get('/home/edit_check','User\EditController@edit');
Route::post('/home/edit_check','User\EditCheckController@check');
編集確認画面 → 編集画面
編集完了画面の作成に移る前に、確認画面から編集画面へ遷移する場合の処理を考える。 ここで重要なのは変更画面から確認画面へ移る際の値を渡すことだ。 早速、そのためのコードを追記していく。
(プロジェクト名)\resources\views\user\edit_check.blade.phpの</form>の下あたりに、現在の値を渡すコードを記入。
</form>
</div>
<div>
<form method="post" action="edit">
<input type="hidden" value="{{ $data['id'] }}" name="edit_id">
<input type="hidden" value="{{ $data['name'] }}" name="edit_name">
<input type="hidden" value="{{ $data['email'] }}" name="edit_email">
<input type="hidden" value="{{ $data['works_id'] }}" name="edit_works_id">
<input type="hidden" value="{{ $data['comment'] }}" name="edit_comment">
<input type="hidden" value="{{ $data['delete_flag'] }}" name="edit_flag">
<input type="submit" value="戻る">
@csrf
</form>
</div>
(プロジェクト名)\app\Http\Controllers\User\EditController.phpに編集確認画面からデータを受け取れるよう追記。
public function return_check(Request $request)
{
$id = $request -> input('edit_id');
$edit_data = User::where('id', $id) -> first();
$name = $request -> input('edit_name');
$email = $request -> input('edit_email');
$works_id = $request -> input('edit_works_id');
$comment = $request -> input('edit_comment');
$flag = $request -> input('edit_flag');
$User_data = array(
'id' => $id,
'name' => $name,
'email' => $email,
'works_id' => $works_id,
'comment' => $comment,
'created_at' => $edit_data['created_at'],
'updated_at' => $edit_data['updated_at'],
'delete_flag' => $flag
);
return view('user/edit',['User' => $User_data]);
}
最後にルーティング処理を追記して、実際に確認。
Route::post('/home/edit','User\EditController@return_check');;
編集完了画面
今までの変更内容をデータベースに登録するファイルを作成していく。 上の2つと違って、データベースに登録するだけなので結構簡単。
いつも通りコントローラーを作成し、確認画面から送られてきた値をデータベースに保存する。
$ php artisan make:controller User/EditFinishController
<?php
namespace App\Http\Controllers\User;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\User;class EditFinishController extends Controller
{
public function finish(Request $request)
{
$id = $request -> input('edit_id');
$name = $request -> input('edit_name');
$email = $request -> input('edit_email');
$works_id = $request -> input('edit_works_id');
$comment = $request -> input('edit_comment');
$flag = $request -> input('edit_flag');
$edit_data = User::where('id', $id) -> update([
'name' => $name,
'email' => $email,
'works_id' => $works_id,
'comment' => $comment,
'delete_flag' => $flag
]);
$User_data = User::where('id', $id) -> first();
return view('user/edit_finish',['data' => $User_data]);
}
}
The page to be displayed is the same as the confirmation screen, only the registered data is displayed using the table.
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">
The user information is saved with the following contents.
</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
<div class="edit_table">
<table>
<tr>
<th>ID</th>
<th>NAME</th>
<th>EMAIL</th>
<th>WORKS_ID</th>
<th>COMMENT</th>
<th>CREATED_AT</th>
<th>UPDATED_AT</th>
<th>DELETE_FLAG(0=Show, 1=Hide)</th>
</tr>
<tr>
<td>{{ $data['id'] }}</td>
<td>{{ $data['name'] }}</td>
<td>{{ $data['email'] }}</td>
<td>{{ $data['works_id'] }}</td>
<td>{{ $data['comment'] }}</td>
<td>{{ $data['created_at'] }}</td>
<td>{{ $data['updated_at'] }}</td>
<td>{{ $data['delete_flag'] }}</td>
</tr>
</table>
</div>
<div>
<a href="/home">To home screen</a>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Add the following routing process and check if the completion screen is displayed or check if the data has been updated from phpMyAdmin.
Route::get('/home/edit_finish','User\EditController@edit');
Route::post('/home/edit_finish','User\EditFinishController@finish');
Next article
This time, I created a page that can change the data of the user logged in from the browser side. Next time, we will create a page with a search function.