Laravel小專案之第4節 Laravel-通過表單實現新增及操作狀態提示功能
阿新 • • 發佈：2019-01-11
第4節 Laravel-通過表單實現新增及操作狀態提示功能 4.1 顯示新增表單檢視 4.2 通過模型實現新增 4.3 操作狀態提示 4.1 顯示新增表單檢視 修改邊欄的連結 \resources\views\shared\siderbar.blade.php <div class="col-md-3"> <div class="list-group"> <a href="{{ url('/') }}" class="list-group-item active">學生列表</a> <a href="{{ url('student/create') }}" class="list-group-item">新增學生</a> </div> </div> \resources\views\shared\message.blade.php <div class="alert alert-danger"> <ul> <li>姓名不能為空</li> <li>年齡只能為整數</li> <li>請選擇性別</li> </ul> </div> \resources\views\student\create.blade.php @extends('layout/student') @section('content') <!-- 所有的錯誤提示 --> @include('shared/message') <!-- 自定義內容區域 --> <div class="panel panel-default"> <div class="panel-heading">新增學生</div> <div class="panel-body"> <form class="form-horizontal"> <div class="form-group"> <label for="name" class="col-sm-2 control-label">姓名</label> <div class="col-sm-5"> <input type="text" class="form-control" id="name" placeholder="請輸入學生姓名"> </div> <div class="col-sm-5"> <p class="form-control-static text-danger">姓名不能為空</p> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">年齡</label> <div class="col-sm-5"> <input type="text" class="form-control" id="age" placeholder="請輸入學生年齡"> </div> <div class="col-sm-5"> <p class="form-control-static text-danger">年齡只能為整數</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性別</label> <div class="col-sm-5"> <label class="radio-inline"> <input type="radio" name="sex" value="option1"> 未知 </label> <label class="radio-inline"> <input type="radio" name="sex" value="option2"> 男 </label> <label class="radio-inline"> <input type="radio" name="sex" value="option3"> 女 </label> </div> <div class="col-sm-5"> <p class="form-control-static text-danger">請選擇性別</p> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">提交</button> </div> </div> </form> </div> </div> @endsection \app\Http\Controllers\StudentController.php /** * 新增表單頁面，表單提交到當前頁 * * @param * @return void * @author webjust [[email protected]] */ public function create() { return view('student/create'); } \app\Http\routes.php Route::get('/', ['uses' => '[email protected]']); // 新增表單路由 Route::any('student/create', ['uses' => '[email protected]']); 新增hover效果。\resources\views\shared\siderbar.blade.php <div class="col-md-3"> <div class="list-group"> <a href="{{ url('/') }}" class="list-group-item {{ Request::path() == '/' ? 'active' : '' }}">學生列表</a> <a href="{{ url('student/create') }}" class="list-group-item {{ Request::path() == 'student/create' ? 'active' : '' }}">新增學生</a> </div> </div> 這裡使用了 Request::path() 方法，更多Request facade 方法可以檢視手冊：https://cs.laravel-china.org/#requests 4.2 通過模型實現新增 給form表單新增action： <form class="form-horizontal" method="post" action="{{ url('student/create') }}"> \app\Http\Controllers\StudentController.php public function create(Request $request) { // 判斷是POST請求，也就是提交表單時走這個區間 if($request->isMethod('POST')) { echo "post"; } return view('student/create'); } 此時會報 TokenMismatchException in VerifyCsrfToken.php line 67: 的錯誤。 Laravel 提供簡單的方法保護你的應用程式不受到 跨網站請求偽造 攻擊。跨網站請求偽造是一種惡意的攻擊，破壞份子偽造 已通過身份檢驗的使用者身份 來執行未經授權的命令。 Laravel 會自動生成一個 CSRF token 給每個使用者的 Session。該 token 用來驗證使用者是否為實際發出請求的使用者。可以使用 csrf_field 輔助函式來生成一個包含 CSRF token 的 _token 隱藏表單欄位。 更多檢視：http://d.laravel-china.org/docs/5.2/routing#csrf-protection 在Blade模板引擎中使用： {{ csrf_field() }} 修改 input 欄位的屬性：name="Student[name]" 這樣可以獲得一個數組下標以模型名命名的陣列。 \resources\views\student\create.blade.php <form class="form-horizontal" method="post" action="{{ url('student/create') }}"> {{ csrf_field() }} <div class="form-group"> <label for="name" class="col-sm-2 control-label">姓名</label> <div class="col-sm-5"> <input type="text" name="Student[name]" class="form-control" id="name" placeholder="請輸入學生姓名"> </div> <div class="col-sm-5"> <p class="form-control-static text-danger">姓名不能為空</p> </div> </div> <div class="form-group"> <label for="age" class="col-sm-2 control-label">年齡</label> <div class="col-sm-5"> <input type="text" name="Student[age]" class="form-control" id="age" placeholder="請輸入學生年齡"> </div> <div class="col-sm-5"> <p class="form-control-static text-danger">年齡只能為整數</p> </div> </div> <div class="form-group"> <label class="col-sm-2 control-label">性別</label> <div class="col-sm-5"> <label class="radio-inline"> <input type="radio" name="Student[sex]" value="2"> 未知 </label> <label class="radio-inline"> <input type="radio" name="Student[sex]" value="1"> 男 </label> <label class="radio-inline"> <input type="radio" name="Student[sex]" value="0"> 女 </label> </div> <div class="col-sm-5"> <p class="form-control-static text-danger">請選擇性別</p> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">提交</button> </div> </div> </form> 修改：\app\Http\Controllers\StudentController.php public function create(Request $request) { // 判斷是POST請求，也就是提交表單時走這個區間 if($request->isMethod('POST')) { $data = $request->input('Student'); var_dump($data); } return view('student/create'); } 訪問：http://example.com/student/create 提交表單，效果： 實現模型的新增操作： // 判斷是POST請求，也就是提交表單時走這個區間 if($request->isMethod('POST')) { $data = $request->input('Student'); // var_dump($data); $data['created_time'] = time(); $data['updated_time'] = time(); // 模型的新增方法 $ret = Student::insert($data); var_dump($ret); } 新增資料測試，查詢資料庫，可以看到新增加了1條記錄哦！(^__^) 嘻嘻…… 使用重定向方法：redirect() public function create(Request $request) { // 判斷是POST請求，也就是提交表單時走這個區間 if($request->isMethod('POST')) { $data = $request->input('Student'); // var_dump($data); $data['created_time'] = time(); $data['updated_time'] = time(); // 模型的新增方法 $ret = Student::insert($data); if($ret) { return redirect('/'); } else{ return redirect('student/create'); } } return view('student/create'); } 4.3 操作狀態提示 重定向並加上 Session 快閃記憶體資料 通常重定向至新的 URL 時會一併 寫入快閃記憶體資料至 session。所以為了方便，你可以利用鏈式呼叫的方式建立一個 RedirectResponse 的例項 並 快閃記憶體資料至 Session。這對於在一個動作之後儲存狀態訊息相當方便： return redirect('/')->with('success', '操作成功！'); 當然，在使用者重定向至新的頁面後，你可以獲取並顯示 session 的快閃記憶體資料。舉個例子，使用 Blade 的語法： @if (session('success')) <div class="alert alert-success"> {{ session('success') }} </div> @endif 修改如下： // 模型的新增方法 $ret = Student::insert($data); if($ret) { return redirect('/')->with('success', '新增成功！'); } else{ return redirect('student/create')->with('error', '新增失敗！'); } \resources\views\shared\success.blade.php @if(Session::has('success')) <!-- 成功提示框 --> <div class="alert alert-success alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>成功!</strong> {{Session::get('success')}} </div> @endif @if(Session::has('error')) <!-- 失敗提示框 --> <div class="alert alert-danger alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> <strong>失敗!</strong> {{Session::get('error')}} </div> @endif 同理，我們也可以使用 Session類的方法。如： @if(Session::has('success')) {{Session::get('success')}} 為了顯示最新新增的資料，我們採用倒序的排列方式： public function index() { // 對 Eloquent 模型進行分頁 $students = Student::orderby('id', 'desc')->paginate(5); // 渲染 student/index 檢視，並傳遞查詢出來的全部資料 return view('student/index', ['students' => $students]); } 最終效果如下：
最終效果如下：
第4節 Laravel-通過表單實現新增及操作狀態提示功能
4.1 顯示新增表單檢視
修改邊欄的連結
\resources\views\shared\siderbar.blade.php
\resources\views\shared\message.blade.php
\resources\views\student\create.blade.php