Bài 8 : Form trong Laravel 5

Form trong Laravel 5

Laravel 5 hỗ trợ chúng ta tạo form một cách dễ dàng thông qua các hàm đã xây dựng sẵn. Trong bài viết này mình sẽ hướng dẫn các bạn tạo 1 form dùng để lưu thông tin bài viết vào bảng articles mà chúng ta đã sử dụng ở các bài trước.

1. Thêm routes

Mình sẽ thêm một route mới dùng để hiển thị form cho người dùng nhập thông tin, route này sẽ có nhiệm vụ gọi tới function create() trong ArticlesController

PHP

1	Route::get('/articles/create', 'ArticlesController@create');

2. Sửa file controller ArticlesController.php

Bên trong file ArticlesControllers.php đã tạo ở bài trước, mình thêm một function mới gọi là create() ứng với route đã được tạo. Function này sẽ có trách nhiệm gọi view là create.blade.php để hiện thị form

PHP

1 2 3

public function create(){     return view("create"); }

3. Cài đặt gói service HtmlServiceProvider

Để có thể sử dụng form trong Laravel 5, chúng ta cần phải cài đặt thêm gói HtmlServiceProvider, vì Laravel khi cài đặt ban đầu chưa tích hợp nó vào. HtmlServiceProvider cung cấp các phương thức đã xây dựng sẵn giúp chúng ta thao tác với form được dễ dàng hơn.

Để download cài đặt gói HtmlServiceProvider, mình mở cmd, gõ lệnh sau:

PHP

1	composer require illuminate/html

các bạn đợi khoảng vài giây để tiến trình cài đặt diễn ra như dưới đây :

PHP

1 2 3 4

Using version ~5.0 for illuminate/html ./composer.json has been updated Loading composer repositories with package information Updating dependencies (including require-dev)

Tiếp đến, sau khi đã cài đặt xong ServiceHtmlProvider, các bạn mở config/app.php, tìm đến các dòng chứa các provider của Laravel :

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

'providers' => [ /* * Laravel Framework Service Providers... */ 'Illuminate\Foundation\Providers\ArtisanServiceProvider', 'Illuminate\Auth\AuthServiceProvider', 'Illuminate\Bus\BusServiceProvider', 'Illuminate\Cache\CacheServiceProvider', 'Illuminate\Foundation\Providers\ConsoleSupportServiceProvider', 'Illuminate\Routing\ControllerServiceProvider', 'Illuminate\Cookie\CookieServiceProvider', 'Illuminate\Database\DatabaseServiceProvider', 'Illuminate\Encryption\EncryptionServiceProvider', 'Illuminate\Filesystem\FilesystemServiceProvider', 'Illuminate\Foundation\Providers\FoundationServiceProvider', 'Illuminate\Hashing\HashServiceProvider', 'Illuminate\Mail\MailServiceProvider', 'Illuminate\Pagination\PaginationServiceProvider', 'Illuminate\Pipeline\PipelineServiceProvider', 'Illuminate\Queue\QueueServiceProvider', 'Illuminate\Redis\RedisServiceProvider', 'Illuminate\Auth\Passwords\PasswordResetServiceProvider', 'Illuminate\Session\SessionServiceProvider', 'Illuminate\Translation\TranslationServiceProvider', 'Illuminate\Validation\ValidationServiceProvider', 'Illuminate\View\ViewServiceProvider',

và thêm 1 HtmlServiceProvider mới

PHP

1	'Illuminate\Html\HtmlServiceProvider',

vào ở cuối  như sau :

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

'providers' => [ /* * Laravel Framework Service Providers... */ 'Illuminate\Foundation\Providers\ArtisanServiceProvider', 'Illuminate\Auth\AuthServiceProvider', 'Illuminate\Bus\BusServiceProvider', 'Illuminate\Cache\CacheServiceProvider', 'Illuminate\Foundation\Providers\ConsoleSupportServiceProvider', 'Illuminate\Routing\ControllerServiceProvider', 'Illuminate\Cookie\CookieServiceProvider', 'Illuminate\Database\DatabaseServiceProvider', 'Illuminate\Encryption\EncryptionServiceProvider', 'Illuminate\Filesystem\FilesystemServiceProvider', 'Illuminate\Foundation\Providers\FoundationServiceProvider', 'Illuminate\Hashing\HashServiceProvider', 'Illuminate\Mail\MailServiceProvider', 'Illuminate\Pagination\PaginationServiceProvider', 'Illuminate\Pipeline\PipelineServiceProvider', 'Illuminate\Queue\QueueServiceProvider', 'Illuminate\Redis\RedisServiceProvider', 'Illuminate\Auth\Passwords\PasswordResetServiceProvider', 'Illuminate\Session\SessionServiceProvider', 'Illuminate\Translation\TranslationServiceProvider', 'Illuminate\Validation\ValidationServiceProvider', 'Illuminate\View\ViewServiceProvider', 'Illuminate\Html\HtmlServiceProvider',

Tiếp đến các bạn tìm đến dòng chứa các aliases

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

'aliases' => [ 'App'       => 'Illuminate\Support\Facades\App', 'Artisan'   => 'Illuminate\Support\Facades\Artisan', 'Auth'      => 'Illuminate\Support\Facades\Auth', 'Blade'     => 'Illuminate\Support\Facades\Blade', 'Bus'       => 'Illuminate\Support\Facades\Bus', 'Cache'     => 'Illuminate\Support\Facades\Cache', 'Config'    => 'Illuminate\Support\Facades\Config', 'Cookie'    => 'Illuminate\Support\Facades\Cookie', 'Crypt'     => 'Illuminate\Support\Facades\Crypt', 'DB'        => 'Illuminate\Support\Facades\DB', 'Eloquent'  => 'Illuminate\Database\Eloquent\Model', 'Event'     => 'Illuminate\Support\Facades\Event', 'File'      => 'Illuminate\Support\Facades\File', 'Hash'      => 'Illuminate\Support\Facades\Hash', 'Input'     => 'Illuminate\Support\Facades\Input', 'Inspiring' => 'Illuminate\Foundation\Inspiring', 'Lang'      => 'Illuminate\Support\Facades\Lang', 'Log'       => 'Illuminate\Support\Facades\Log', 'Mail'      => 'Illuminate\Support\Facades\Mail', 'Password'  => 'Illuminate\Support\Facades\Password', 'Queue'     => 'Illuminate\Support\Facades\Queue', 'Redirect'  => 'Illuminate\Support\Facades\Redirect', 'Redis'     => 'Illuminate\Support\Facades\Redis', 'Request'   => 'Illuminate\Support\Facades\Request', 'Response'  => 'Illuminate\Support\Facades\Response', 'Route'     => 'Illuminate\Support\Facades\Route', 'Schema'    => 'Illuminate\Support\Facades\Schema', 'Session'   => 'Illuminate\Support\Facades\Session', 'Storage'   => 'Illuminate\Support\Facades\Storage', 'URL'       => 'Illuminate\Support\Facades\URL', 'Validator' => 'Illuminate\Support\Facades\Validator', 'View'      => 'Illuminate\Support\Facades\View', ],

và thêm 2 alias mới là Form và Html

PHP

1 2	'Form'      => 'Illuminate\Html\FormFacade', 'View'      => 'Illuminate\Html\HtmlFacade',

vào cuối như sau :

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

'aliases' => [ 'App'       => 'Illuminate\Support\Facades\App', 'Artisan'   => 'Illuminate\Support\Facades\Artisan', 'Auth'      => 'Illuminate\Support\Facades\Auth', 'Blade'     => 'Illuminate\Support\Facades\Blade', 'Bus'       => 'Illuminate\Support\Facades\Bus', 'Cache'     => 'Illuminate\Support\Facades\Cache', 'Config'    => 'Illuminate\Support\Facades\Config', 'Cookie'    => 'Illuminate\Support\Facades\Cookie', 'Crypt'     => 'Illuminate\Support\Facades\Crypt', 'DB'        => 'Illuminate\Support\Facades\DB', 'Eloquent'  => 'Illuminate\Database\Eloquent\Model', 'Event'     => 'Illuminate\Support\Facades\Event', 'File'      => 'Illuminate\Support\Facades\File', 'Hash'      => 'Illuminate\Support\Facades\Hash', 'Input'     => 'Illuminate\Support\Facades\Input', 'Inspiring' => 'Illuminate\Foundation\Inspiring', 'Lang'      => 'Illuminate\Support\Facades\Lang', 'Log'       => 'Illuminate\Support\Facades\Log', 'Mail'      => 'Illuminate\Support\Facades\Mail', 'Password'  => 'Illuminate\Support\Facades\Password', 'Queue'     => 'Illuminate\Support\Facades\Queue', 'Redirect'  => 'Illuminate\Support\Facades\Redirect', 'Redis'     => 'Illuminate\Support\Facades\Redis', 'Request'   => 'Illuminate\Support\Facades\Request', 'Response'  => 'Illuminate\Support\Facades\Response', 'Route'     => 'Illuminate\Support\Facades\Route', 'Schema'    => 'Illuminate\Support\Facades\Schema', 'Session'   => 'Illuminate\Support\Facades\Session', 'Storage'   => 'Illuminate\Support\Facades\Storage', 'URL'       => 'Illuminate\Support\Facades\URL', 'Validator' => 'Illuminate\Support\Facades\Validator', 'View'      => 'Illuminate\Support\Facades\View', 'Form'      => 'Illuminate\Html\FormFacade', 'View'      => 'Illuminate\Html\HtmlFacade', ],

Đến đây chúng ta đã setup các yêu cầu cần thiết để có thể sử dụng form trong laravel 5. Tiếp đến chúng ta sẽ tạo view để hiển thị form.

4. Tạo view

Trong thư mục view, tiếp tục tạo file view như đã nhắc ở trên là create.blade.php có nội dung như sau :

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form trong Laravel 5</title> </head> <body> <h1>Them Bai Viet Moi</h1> {!! Form::open() !!} {!! Form::close() !!} </body> </html>

Lưu lại, sau đó bật cmd gõ lệnh sau để chạy server laravel

PHP

1	php artisan serve

bạn sẽ thấy message trả về là

PHP

1	Laravel development server started on http://localhost:8000

vào trình duyệt gõ đường dẫn sau :

PHP

1	http://localhost:8000/articles/create

1 trang trắng sẽ hiện ra với tiêu đề là Them Bai Viet Moi vì lúc này chúng ta chỉ mới tạo thẻ form chứ chưa tạo bất cứ một input nào cả. Dùng Inspect Element trong chrome hoặc firefox (nhấn F12 hoặc trên trình duyệt, click chuột phải chọn Inspect Implement) , bạn sẽ thấy một thẻ form đã được tạo ra như hình dưới

thẻ form trong laravel 5

Các bạn thấy đó, rõ ràng với cách viết đơn giản

PHP

1 2 3

{!! Form::open() !!} {!! Form::close() !!}

Laravel đã tự động tạo ra cho chúng ta thẻ form với method là POST, còn action là đường dẫn gọi tới route hiện tại của chúng ta.

Tiếp theo, mình sẽ thêm 1 input mới gọi là name và có label là Name vào thẻ form như sau :

PHP

1 2 3 4

{!! Form::open() !!}   {!! Form::label('name','Name:') !!}   {!! Form::text('name') !!} {!! Form::close() !!}

Chạy lại đường dẫn trên bạn sẽ thấy 1 thẻ input mới được tạo ra như hình dưới

Tạo thẻ inut trong form

Tương tự, mình thêm 1 input mới gọi là author và button submit form:

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Form trong Laravel 5</title> </head> <body> <h1>Them Bai Viet Moi</h1> {!! Form::open() !!} {!! Form::label('name','Name:') !!} {!! Form::text('name') !!} <br />   {!! Form::label('author','Author:') !!} {!! Form::text('author') !!} </br>   {!! Form::submit('Them moi')!!} {!! Form::close() !!} </body> </html>

Chạy lại đường dẫn, bạn sẽ thấy như thế này

form trong laravel 5

Vậy là chúng ta đã thiết kế xong 1 form đơn giản trong Laravel 5. Tiếp đến mình sẽ viết code để khi người dùng họ điền thông tin vào các input và ấn submit form, ta sẽ tiến hành lưu các gía trị này vào database.

5. Lấy gía trị từ form

Ở mục 4 trên, các bạn thấy action của thẻ form mặc định đang gọi tới route hiện hành của chúng ta là

PHP

1	http://localhost:8000/articles/create

Nhưng ở đây mình muốn khi submit form sẽ chạy vào một route mới gọi là articles, nên mình sẽ edit lại action của form một chút như sau

PHP

1	{!! Form::open(['url' => 'articles']) !!}

điều này đồng nghĩa với việc bạn phải tạo một route mới là articles với method là POST trong file routes.php

PHP

1	Route::post('/articles', 'ArticlesController@store');

route này có nhiệm vụ chuyển hướng data từ các thẻ input khi submit form bằng phương thức POST tới function store() trong ArticlesController. Vì thế trong ArticlesController.php mình sẽ thêm 1 function mới gọi là store() có nội dung sau:

PHP

1 2 3 4 5

public function store(Request $request){ $dulieu_tu_input = $request->all();   return $dulieu_tu_input; }

Các bạn lưu ý là để có thể lấy được thông tin từ các input, thì bạn phải truyền đối tượng Request vào bên trong hàm store của chúng ta.

Chạy lại đường dẫn, điền thông tin vào các thẻ input (ở đây input name mình điền là “hieu”, input author điền “kungfuphp”) và ấn button Them moi, mình sẽ lấy được các thông tin được POST đi từ form dưới dạng json như sau.

PHP

1	{"_token":"9iLt4QJnr4BmzbbvpQhR6YCmpNOiCf2cpc06xGvr","name":"hieu","author":"kungfuphp"}

6. Lưu gía trị lấy được vào database

Sau khi các bạn đã lấy được gía trị từ form, việc tiếp theo thì chúng ta sẽ thực hiện lưu dữ liệu lấy được này vào database.

Mình sửa lại function store() một chút như sau :

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

public function store(Request $request){ $dulieu_tu_input = $request->all();   //Gọi model Articles.php đã được tạo ra ở các bài trước $articles = new Articles;   //Lấy thông tin từ các input đưa vào thuộc tính name, author                 //trong model Articles $articles->name = $dulieu_tu_input["name"]; $articles->author = $dulieu_tu_input["author"];   //Tiến hành lưu dữ liệu vào database $articles->save();   //Sau khi đã lưu xong, tiến hành chuyển hướng tới route articles                 //hiển thị toàn bộ thông tin bảng articles trong database đã được tạo ở các bài trước return redirect('articles'); }

Chạy lại url điền thông tin và ấn Them moi, bạn sẽ được chuyển hướng tới trang http://localhost:8000/articles, với thông tin hiển thị ra là thông tin bạn đã lưu vào database :

PHP

1 2 3 4

Name : hieu | Author : kungfuphp.com Name : trung | Author : hehehee Name : google.com | Author : kungfuphp.com Name : apple.com | Author : kungfuphp.com

Tổng kết : Bài viết này mình đã chia sẽ tới các bạn về tạo form trong laravel 5 và cách mà dữ liệu nhập từ form được lưu vào trong database như thế nào. Chúc các bạn học tốt !

Nguồn : kungfuphp.com