Bài 9 : Laravel Cookie lưu trữ thông tin duyệt web

Cookie là những tập tin nhỏ mà trình duyệt tạo ra nhằm lưu trữ thông tin trong quá trình duyệt web, cookie có thể sử dụng để duy trì trạng thái người dùng khi vào các trang khác nhau trên một website. Cookie có thời gian hết hạn, do đó trong khoảng thời gian chưa hết hạn, nó lưu trữ thông tin người dùng cho những lần truy cập tiếp theo trên chính website đó.

Laravel cung cấp cách thức tạo ra và lấy thông tin cookie, toàn bộ thông tin được mã hóa và được gán với một mã xác thực do đó bất kỳ căn thiệp nào từ phía người dùng lên cookie đều bị Laravel phát hiện. Lấy các giá trị cookie sử dụng phương thức cookie của Request (Xem thêm Laravel Request) theo cú pháp như sau:

$value = $request->cookie('name');

Khi đó biến $value sẽ chứa giá trị cookie tên là name. ## Gán giá trị cookie cho Response

Bạn có thể gán một cookie vào một instance của Illuminate\Http\Response như sau:

return response('Hello World')->cookie(
    'name', 'value', $minutes, $path, $domain, $secure, $httpOnly
);

Có rất nhiều tham số trong phương thức thiết lập cookie, tuy nhiên ngắn gọn chỉ cần cung cấp 3 tham số đầu.

return response('Hello World')->cookie(
    'name', 'value', $minutes
);

Bạn có thể sử dụng global helper cookie, nó là một instance của Symfony\Component\HttpFoundation\Cookie, cookie chỉ được gửi đến trình duyệt người dùng khi nó được gắn vào một response.

$cookie = cookie('name', 'value', $minutes);
return response('Hello World')->cookie($cookie);

Ví dụ thực hành Laravel Cookie

Ok, chúng ta đã có đầy đủ kiến thức về Laravel Cookie ở hai phần đầu, tiếp theo chúng ta sẽ đi vào một ví dụ thực tế giúp bạn hiểu rõ hơn về cookie và cách xử lý cookie trong Laravel. Trong ví dụ contact form ở bài Laravel Request, chúng ta muốn lưu tên người gửi tin nhắn để lần sau khi người đó vào lại trang contact chúng ta sẽ tự động mặc định tên người dùng và email để khỏi phải nhập lại. Chúng ta bắt tay vào thực hành ví dụ này: Sửa đổi lại view contact để thêm phần nhập địa chỉ email (resources/views/fontend/contact.blade.php)

<html>
   <head>
      <title>Contact us - Allaravel.com Example</title>
      <link href = "https://fonts.googleapis.com/css?family=Arial:100" rel = "stylesheet" type = "text/css">
      <style>
         html, body {
            height: 100%;
         }
         body {
            margin: 0;
            padding: 0;
            width: 100%;
            display: table;
            font-weight: 100;
            font-family: 'Arial';
         }
         .container {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
         }
         .content {
            text-align: center;
            display: inline-block;
         }
         .title {
            font-size: 96px;
         }
      </style>
   </head>
   <body>
      <div class = "container">
         <div>
            <?php 
               if(isset($success)){
                  echo $success;
               }
            ?>
         </div>
         <div class = "content">
            <form action = "/contact" method = "post">
               <input type = "hidden" name = "_token" value = "<?php echo csrf_token() ?>">
               <table>
                  <tr>
                     <td>Họ và tên</td>
                     <td><input type = "text" name = "name" /></td>
                  </tr>

                  <tr>
                     <td>Địa chỉ email</td>
                     <td><input type = "text" name = "email" /></td>
                  </tr>

                  <tr>
                     <td>Tiêu đề</td>
                     <td><input type = "text" name = "title" /></td>
                  </tr>

                  <tr>
                     <td>Nội dung</td>
                     <td>
                        <textarea name="message" rows="5"></textarea>
                     </td>
                  </tr>

                  <tr>
                     <td colspan = "2" align = "center">
                        <input type = "submit" value = "Gửi" />
                     </td>
                  </tr>
               </table>
            </form>
         </div>
      </div>
   </body>
</html>

Chúng ta để thêm phần nhập địa chỉ email và chỉnh sửa lại để khi nhấn Gửi nếu thành công chỉ gửi lại lời nhắn: “Bạn đã gửi tin nhắn thành công”. Kiểm tra đường dẫn http://laravel.dev/contact để lại giao diện.

Thay đổi phương thức insertMessage của ContactController (app\Http\Controllers\ContactController.php)

public function insertMessage(Request $request){
    $name    = $request->input('name');
    $email   = $request->input('email');
    $title   = $request->input('title');
    $message = $request->input('message');

    // Lưu cookie trong 30 phút
    $minutes = 30;
    $name_cookie = cookie('name', $name, $minutes);
    $email_cookie = cookie('email', $email, $minutes);

    // Insert message vào database, tạm thời coi như đã cập nhật database
    // chúng ta sẽ trở lại phần này trong những bài viết sau

    $data = ['success' => 'Bạn đã gửi tin nhắn thành công!'];
    return response()
        ->view('fontend.contact', $data, 200)
        ->withCookie($name_cookie)
        ->withCookie($email_cookie);
}

public function showContactForm(Request $request){
    $name  = $request->cookie('name');
    $email = $request->cookie('email');

    return view('fontend.contact')->with(['name' => $name, 'email' => $email]);
}

Thay đổi lại view contact (resources/views/fontend/contact.php) để kiểm tra xem nếu có các biến 𝑛𝑎𝑚𝑒𝑣ànamevàemail thì điền tự động vào mỗi khi người dùng truy cập lại trang http://laravel.dev/contact.

<html>
   <head>
      <title>Contact us - Allaravel.com Example</title>
      <link href = "https://fonts.googleapis.com/css?family=Arial:100" rel = "stylesheet" type = "text/css">
      <style>
         html, body {
            height: 100%;
         }
         body {
            margin: 0;
            padding: 0;
            width: 100%;
            display: table;
            font-weight: 100;
            font-family: 'Arial';
         }
         .container {
            text-align: center;
            display: table-cell;
            vertical-align: middle;
         }
         .content {
            text-align: center;
            display: inline-block;
         }
         .title {
            font-size: 96px;
         }
      </style>
   </head>
   <body>
      <div class = "container">
         <div>
            <?php 
               if(isset($success)){
                  echo $success;
               }
            ?>
         </div>
         <div class = "content">
            <form action = "/contact" method = "post">
               <input type = "hidden" name = "_token" value = "<?php echo csrf_token() ?>">
               <table>
                  <tr>
                     <td>Họ và tên</td>
                     <td><input type = "text" name = "name" <?php if(isset($name)) echo 'value = "' . $name . '"'?>/></td>
                  </tr>

                  <tr>
                     <td>Địa chỉ email</td>
                     <td><input type = "text" name = "email" <?php if(isset($email)) echo 'value = "' . $email . '"'?>/></td>
                  </tr>

                  <tr>
                     <td>Tiêu đề</td>
                     <td><input type = "text" name = "title" /></td>
                  </tr>

                  <tr>
                     <td>Nội dung</td>
                     <td>
                        <textarea name="message" rows="5"></textarea>
                     </td>
                  </tr>

                  <tr>
                     <td colspan = "2" align = "center">
                        <input type = "submit" value = "Gửi" />
                     </td>
                  </tr>
               </table>
            </form>
         </div>
      </div>
   </body>
</html>

Các đoạn mã

<?php if(isset($email)) echo 'value = "' . $email . '"'?>

trông không được đẹp mắt cho lắm nhưng cứ tạm chấp nhận vậy, đến phần Laravel Blade chúng ta sẽ có cách viết trong đơn giản và đẹp mắt hơn. OK, vậy là chúng ta đã chuẩn bị mã nguồn xong và thực hiện kiểm thử theo kịch bản như sau: 1. Truy cập trang http://laravel.dev/contact, điền thông tin vào form liên hệ và ấn vào Gửi.

Khi xử lý xong, xuất hiện thông báo “Bạn đã gửi tin nhắn thành công!”.
Đóng trình duyệt, sau đó mở trình duyệt và vào lại đường dẫn http://laravel.dev/contact bạn sẽ thấy các thông tin về Họ và tên, địa chỉ email đã được điền tự động do các thông tin này được lưu trong cookie.

Kết quả là những lần truy nhập sau vào địa chỉ http://laravel.dev/contact với cùng một trình duyệt lúc đầu sử dụng, các giá trị như Họ và tên, Địa chỉ email được tự động điền vào giúp cho người dùng không phải mất công nhập lại.