--------------- <> -----------------
--- KHOA HỌC - CÔNG NGHỆ - GIÁO DỤC - VIỆC LÀM ---
--- Học để đi cùng bà con trên thế giới ---

Tìm kiếm trong Blog

Hiển thị các bài đăng có nhãn cookie. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn cookie. Hiển thị tất cả bài đăng

Cookie (2) - Bài tập về cookie

 Phần trước: Cookie (1) - Tìm hiểu về cookie

-----

1.8       Bài tập về cookie

Bài tập 1: Viết chương trình để khi truy cập vào trang web, chương trình sẽ xuất thời gian truy cập lần gần đây nhất. Đây là đoạn mã tham khảo:

<?php

            echo "Chao ban, <br>";

            if(isset($_COOKIE['thoiGianTruyCap'])) {

                        echo "Thoi gian truy cap gan day nhat la: " .  date('d/m/Y H:i:s', $_COOKIE['thoiGianTruyCap']);

                        setcookie('thoiGianTruyCap', time(), time() + 600);

                       

            } else {

                        setcookie('thoiGianTruyCap', time(), time() + 600);

            }

?>

Xem thêm clip sau (của tác giả Lưu Trường Hải Lân): https://www.youtube.com/watch?v=PATRjYG2nhM&list=PLv6GftO355AsZFXlWLKob6tMsWZa4VCY1&index=105

Bài tập 2:

2.1. Thiết kế giao diện sau (vùng có viền đỏ) bằng HTML và CSS, có thể dùng Bootstrap hoặc không. (yêu cầu này là tùy chọn, cho bạn nào thích làm về front-end)

 


2.2. Kiểm tra thông tin đăng nhập của người dùng, nếu khớp với thông tin người dùng trong tập tin users.ini thì tạo cookie lưu lại thông tin đăng nhập. Lưu ý: Tên đăng nhập có thể là họ tên hoặc số điện thoại. Chưa xử lý phần Mã kiểm tra.

2.3. Sau khi người dùng đăng nhập thành công, duy trì việc đăng nhập này trong 3 phút, quá thời gian này, tự động đăng xuất người dùng.

Mã nguồn tham khảo:

[index.php]

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Document</title>

  <link href="css/bootstrap.min.css" rel="stylesheet">

</head>

<body>

  <div class="container">

    <?php

    if (isset($_COOKIE['fullname'])) {

      echo '<h3> Xin chào: ' . $_COOKIE['fullname'] . '</h3>';

      echo '<a href="logout.php">Đăng xuất</a>';

    } else {

      ?>

    <h3 class="text-center">Login</h3>

    <div class="row">

      <div class="col-md-4 col-md-offset-4">

       <form action="process.php" method="post">

        <div class="form-group">

          <label for="username">Username</label>

          <input type="text" id="username" name="username"class="form-control">

        </div>

        <div class="form-group">

          <label for="password">Password</label>

          <input type="password" id="password" name="password" class="form-control">

        </div>

        <button type="submit" class="btn btn-primary">Đăng nhập</button>

      </form>

    </div>

  </div>

  <?php

      }

  ?>

</div>

</body>

</html>

 

[process.php]

 

<h3 class="text-center">process</h3>

<?php

  // kiểm tra dữ liệu khác rỗng

  function checkEmpty($value) {

    $flag = false;

    if (!isset($value) || trim($value) == '') {

      $flag = true;

    }

    return $flag;

  }

 

  if (isset($_COOKIE['fullname'])) {

    echo '<h3> Xin chào: ' . $_COOKIE['fullname'] . '</h3>';

    echo '<a href="logout.php">Đăng xuất</a>';

  } else {

    if (!checkEmpty($_POST['username']) && !checkEmpty($_POST['password'])) {

      $username = $_POST['username'];

      $password = md5($_POST['password']);

      $data = parse_ini_file('users.ini');

      if (array_key_exists($username, $data)) {

        $userInfo = explode ('|', $data[$username]);

        if ($username == $userInfo[0] && $password == $userInfo[1]) {

          setcookie('fullname', $userInfo[2], time() + 200);

          echo '<h3> Xin chào: ' . $userInfo[2] . '</h3>';

          echo '<a href="logout.php">Đăng xuất</a>';

        } else {

          header('location:index.php');

        }

      }else {

        header('location:index.php');

      }

    } else {

    // die('test');

      header('location:index.php');

    }

  }

?>

 

[logout.php]

 

<?php

  setcookie('fullname');

  header('location:index.php');

?>

 

[users.ini]

 

teo = "teo|c4ca4238a0b923820dcc509a6f75849b|Nguyen Van Teo"

ti = "ti|c81e728d9d4c2f636f067f89cc14862c|Tran Van Ti"

Video tham khảo phần backend: https://www.youtube.com/watch?v=PATRjYG2nhM&list=PLv6GftO355AsZFXlWLKob6tMsWZa4VCY1&index=105

-----

Cập nhật: [14/10/2020]
-----
Xem thêm: Cookie (3) - 

Cookie (1) - Tìm hiểu về cookie

1         Cookie

1.1       Khái niệm

Cookie (còn có tên gọi khác là http cookie, web cookie, Internet cookie, browser cookie) là một phần dữ liệu nhỏ, được lưu trên máy tính (đĩa cứng) của người dùng, khi người dùng truy cập một website.

Dữ liệu của cookie có định dạng kiểu “tên/giá trị” (name/value). Ví dụ: tên/nguyenvanteo, matkhau/abc.

Cookie được dùng để:

– Ghi lại thông tin trạng thái (ví dụ, tên các mặt hàng đã được bỏ vào giỏ hàng)

– Ghi lại hoạt động duyệt web của người dùng (ví dụ, đã bấm nút nào, quá trình đăng nhập, đã từng vào các trang nào)

– Lưu lại các thông tin mà người dùng đã từng nhập vào các form như tên, mật khẩu, địa chỉ, số tài khoản ngân hàng

 

1.2       Cookie được lưu ở đâu?

Mỗi trình duyệt trên máy tính sẽ có vị trí để lưu thông tin cookie của riêng nó, vì vậy nếu dùng hai trình duyệt truy cập vào cùng một website thì sẽ có hai cookie khác nhau.

Ví dụ trình duyệt Chrome trên Windows 10, sẽ lưu ở C:/Users/<user hiện hành>/AppData/Local/Google/Chrome/User Data/Default/Cookies.

Trình duyệt FireFox trên Windows 10, sẽ lưu ở C:\Users\user hiện hành\AppData\Roaming\Mozilla\Firefox\Profiles\xxxx.default\cookies.sqlite.

Lưu ý: với các trình duyệt web hiện đại, thông tin trong cookie luôn được mã hóa; vì vậy không thể sử dụng các chương trình mở tập tin thông thường (ví dụ File Explorer) để xem nội dung của cookie được;  mà phải sử dụng chính trình duyệt hoặc các ngôn ngữ lập trình.

Ví dụ, để xem cookie bằng trình duyệt Chrome, thực hiện các bước sau:

– Từ cửa sổ trình duyệt Chrome, trên thanh công cụ, bấm vào mục sau cùng (Customize and Control Chrome – mũi tên hướng lên, màu xanh), chọn mục Settings.

– Cuộn xuống, tìm tới mục Privacy and secutiry, chọn mục Cookies and other site data, bấm vào mũi tên bên phía phải

– Chọn tiếp mục See all cookies and site data để xem các cookie quan tâm. Có thể truy cập trang tiki.vn, sau đó trong mục này, tìm kiếm từ khóa tiki để xem các cookie đã được tạo ra.

1.3       Các loại cookie

Có nhiều loại cookie, mỗi loại có đặc điểm và mục đích sử dụng khác nhau. Ví dụ:

– HttpOnly

– Persistent

– SameSite

– Secure

– Session

– Supercookie

– Third-party

1.4       Cơ chế hoạt động của một cookie

Đặc tả của giao thức HTTP sẽ quy định cách thức web server thiết lập và đọc giá trị của cookie trong mỗi phiên làm việc với trình duyệt. Đây là cơ chế hoạt động của cookie:

– Khi trình duyệt muốn xem nội dung của một trang web, nó sẽ gửi một request (HTTP GET) tới web server. Trong request có chứa tên trang web muốn xem và tên miền của web server.

Ví dụ:

GET /index.php

Host: www.congty.com

– Sau khi nhận được request, web server sẽ gửi về trình duyệt một HTTP response, bên trong có chứa: mã trạng thái cho request, các cookie nó muốn thiết lập trên máy người dùng bằng lệnh Set-Cookie, và nội dung của trang web.

HTTP/1.0 GET OK

Content-type: text/html

Set-Cookie: name1=value1; attributes

Set-Cookie: name2=value2; attributes

Nội dung trang HTML   

– Trong một HTTP response, các thông tin về cookie được đặt trước nội dung trang HTML. Web server sẽ gán cho mỗi cookie một tên duy nhất, cùng với giá trị, và các thuộc tính tùy chọn (attributes) khác. Trình duyệt sẽ lưu các giá trị cookie này xuống đĩa cứng tại máy client.

Dưới đây là các thuộc tính (tùy chọn), có thể thiết lập cho mỗi cookie:

+ Domain=site

+ Expires=datetime

+ HttpOnly

            + Max-Age=number

+ Path=path

+ SameSite=setting

+ Secure

– Sau khi web server đã thiết lập cookie trên trình duyệt, ở lần gửi request một trang web tiếp theo (cùng web server), trình duyệt sẽ gửi toàn bộ các cookie do web server đã thiết lập trước đó. Lưu ý: trình duyệt chỉ gửi name/value của cookie mà không gửi các thuộc tính mà web server đã thiết lập trước đó. Ví dụ:

GET /index.php

Host: www.congty.com

Cookie: name1=value1; name2=value2 

1.5       Cookie trên các trình duyệt

Mỗi trình duyệt sẽ xử lý cookie theo cách của riêng nó. Tuy nhiên, có một số yêu cầu tối thiểu đã được đặc tả trong giao thức HTTP gồm:

– Kích thước vùng lưu cookie trên trình duyệt không nhỏ hơn 4.096 byte

– Trình duyệt phải cho phép lưu ít nhất 50 cookie/website

– Tổng số cookie trình duyệt có thể lưu trữ không ít hơn 3.000

1.6       Tìm hiểu persistent cookie

Persistent cookie (tạm dịch là “cookie cố định”) là loại cookie có thời gian tồn tại được xác định cụ thể. Persistent cookie sẽ hết hiệu lực sau một mốc thời gian hoặc sau một khoảng thời gian được ấn định trước. Trong thời gian còn hiệu lực, thông tin của persistent cookie sẽ được gửi đến web server mỗi khi người dùng truy cập website, hoặc khi họ truy cập một nguồn tài nguyên thuộc website thông qua một website khác.

Đôi khi, người ta gọi persistent cookies là tracking cookie (cookie theo dõi), vì các nhà quảng cáo có thể sử dụng cookie này để theo dõi thói quen, hành vi duyệt web của người dùng.

Tuy nhiên, persistent cookie thường được dùng cho các tình huống hợp pháp, chính đáng như lưu lại thông tin đăng nhập của người dùng, để họ không phải nhập lại trong các lần đăng nhập sau.

Phần này sẽ minh họa hoạt động của cookie bằng ngôn ngữ PHP.

1.6.1       Tạo cookie

Để tạo cookie, sử dụng hàm setcookie($name, $value, $time)

– $name: tên cookie

– $value: giá trị gán cho cookie

– $time: thời gian tồn tại của cookie

Ví dụ,

<?php

            setcookie('username','nguyenvanteo', time()+120); //thời gian cookie có hiệu lực là 120 giây.

?>

Sau khi chạy đoạn mã trên bằng trình duyệt, vào xem giá trị của cookie vừa được lưu trên máy client. Ví dụ xem bằng trình duyệt chrome:

– Từ cửa sổ trình duyệt Chrome, trên thanh công cụ, bấm vào mục sau cùng (Customize and Control Chrome – mũi tên hướng lên, màu xanh), chọn mục Settings.

– Cuộn xuống, tìm tới mục Privacy and secutiry, chọn mục Cookies and other site data, bấm vào mũi tên bên phía phải

– Chọn tiếp mục See all cookies and site data để xem cookie vừa lưu. Lưu ý: trình duyệt sẽ sắp xếp các cookie theo chiều tăng của domain website. Do vậy, có thể xóa tất cả cookie bằng nút REMOVE ALL, sau đó chạy lại đoạn mã PHP, để tìm cookie dễ hơn. Ví dụ: website có đường dẫn là: http://localhost/mywebsite/trangweb.php, thì trong mục này sẽ tìm tới mục localhost để xem thông tin của cookie.

Ví dụ, thông tin của cookie username:

Name: username

Content: nguyenvanteo

Domain: localhost

Path: /mywebsite

Send for: Same-site connections only

Accessible to script: Yes

Created: Tuesday, October 13, 2020 at 2:52:26 AM

Expires: Tuesday, October 13, 2020 at 2:54:26 AM

1.6.2       Đọc cookie

Để đọc thông tin cookie do trình duyệt gửi về web server, sử dụng biến $_COOKIE

Ví dụ,

<?php

            setcookie('username','nguyenvanteo', time()+120); //thời gian cookie có hiệu lực là 120 giây.

            echo '<pre>';

            print_r($_COOKIE);

            echo '</pre>';

?>

Kết quả xuất ra màn hình là:

Array

(

    [username] => nguyenvanteo

)

Hoặc,

<?php

            setcookie('username','nguyenvanteo', time()+120); //thời gian cookie có hiệu lực là 120 giây.

            echo '<pre>';

            print_r($_COOKIE['username']);

            echo '</pre>';

?>

1.6.3       Xóa cookie

Để xóa cookie, sử dụng một trong hai hàm sau:

– setcookie($name), với $name là tên cookie muốn xóa

– setcookie($name, $value, $time), với $time thuộc về quá khứ

Ví dụ 1, xóa cookie bằng hàm setcookie($name):

<?php

            setcookie('username','nguyenvanteo', time()+120); //thời gian cookie có hiệu lực là 120 giây.

            // xóa cookie

            setcookie('username');

            echo '<pre>';

            print_r($_COOKIE);

            echo '</pre>';

?>

Kết quả xuất ra màn hình là:

Array

(

)

Ví dụ 2, xóa cookie bằng hàm setcookie($name, $value, $time), với $time thuộc về quá khứ:

<?php

            setcookie('username','nguyenvanteo', time()+120); //thời gian cookie có hiệu lực là 120 giây.

            // xóa cookie

            setcookie('username', 'noi dung bat ki', time()-1);

            echo '<pre>';

            print_r($_COOKIE);

            echo '</pre>';

?>

Kết quả xuất ra màn hình là:

Array

(

)

1.7       Ví dụ minh họa về hoạt động của cookie

Minh họa bằng ngôn ngữ PHP.

– Vào trình duyệt xóa sạch cookie

– Tạo một trang web bất kì, với đoạn mã sau:

[trangweb.php]

<?php

            setcookie('thoiGianTruyCap', time(), time() + 600);

            if(isset($_COOKIE['thoiGianTruyCap'])) {

                        echo "Web server da gui_ghi cookie xuong trinh duyet vao luc" .  date('d/m/Y H:i:s', $_COOKIE['thoiGianTruyCap']);

            } else {

                        echo "Truy cap Web server lan dau, nen chua co gia tri cua cookie";

            }

?>

– Từ trình duyệt, truy cập trangweb.php lần đầu, sẽ có kết quả sau:

Truy cap Web server lan dau, nen chua co gia tri cua cookie

– Tuy nhiên, nếu mở trình duyệt, vào xem các cookie thì sẽ thấy cookie thoiGianTruyCap đã được ghi xuống trình duyệt.

– Thực hiện refresh trang web, nghĩa là truy cập tới web server lần 2, kết quả trên trình duyệt sẽ là:

Web server da gui_ghi cookie xuong trinh duyet vao luc14/10/2020 04:44:37

-----

Cập nhật: [14/10/2020]
-----

Ngu ngơ học làm web (89) - Cookie

Tiếp theo của: Ngu ngơ học làm web (88) - Bài tập về session
-----

Phần 89.       Cookie


Đây là clip số 104:


- Cookie được sử dụng để lưu trữ dữ liệu người dùng trên máy client.

- Mỗi trình duyệt trên máy client có một vùng nhớ cookie riêng, vì vậy nếu dùng hai trình duyệt truy cập vào cùng một website thì sẽ có hai cookie khác nhau.

Để tạo cookie, sử dụng hàm:

setcookie($name, $value, $time)

- $name: tên cookie

- $value: giá trị gán cho $name

- $time: thời gian tồn tại của cookie $name

Ví dụ,

<?php
  setcookie('myCookie','my test', time() + 60); //thời gian tồn tại là 1 phút
?>

Sau khi chạy đoạn mã trên, vào xem giá trị của cookie vừa lưu, trong trình duyệt chrome:

- Mở menu ở góc trên, bên phải của trình duyệt

- Vào mục Settings, bấm tiếp vào mục Advanced ở cuối màn hình

- Trong mục Privacy and security, chọn mục Content settings, chọn tiếp mục Cookies

- Chọn mục See all cookies and site data, các cookie sẽ được sắp xếp tăng theo tên của trang web. Có thể xóa tất cả cookie bằng nút REMOVE ALL, sau đó chạy lại đoạn mã PHP, để tìm cookie dễ hơn.

Để truy cập cookie, sử dụng biến $_COOKIE

Ví dụ,

setcookie('myCookie','my test', time() + 60); //thời gian tồn tại là 1 phút
  echo '<pre>';
  print_r($_COOKIE);
  echo '</pre>';

Hoặc,

  setcookie('myCookie','my test', time() + 60); //thời gian tồn tại là 1 phút
  echo '<pre>';
  print_r($_COOKIE['myCookie']);
  echo '</pre>';

Để xóa cookie, sử dụng một trong hai hàm sau:

- setcookie($name), với $name là tên cookie muốn xóa

- setcookie($name, $value, $time), với $time thuộc về quá khứ

Ví dụ,

setcookie('myCookie','my test', time() + 20);
  setcookie('myCookie');
  echo '<pre>';
  print_r($_COOKIE);
  echo '</pre>';

Ví dụ,

setcookie('myCookie','my test', time() + 20);
  setcookie('myCookie', 'abc', time() - 1);
  echo '<pre>';
  print_r($_COOKIE);
  echo '</pre>';

Bài tập: khi truy cập vào trang web, hãy xuất thời gian đăng nhập của lần gần đây nhất. Đây là đoạn mã,

  echo 'Xin chào!' . '<br>';
 
  if (isset($_COOKIE['lastLogin'])) {
    $time = $_COOKIE['lastLogin'];
    echo 'last login: ' . date('d/m/Y H:i:s', $time);
    setcookie('lastLogin',time());
  } else {
    setcookie('lastLogin',time(), time() + 3600);
  }

Bài tập:

- Kiểm tra thông tin đăng nhập của người dùng, nếu khớp với thông tin người dùng trong tập tin users.ini thì tạo cookie lưu lại thông tin đăng nhập.

- Sau khi người dùng đăng nhập thành công, duy trì việc đăng nhập này trong 20 giây, quá thời gian này, tự động đăng xuất người dùng.

[index.php]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container">
    <?php
    if (isset($_COOKIE['fullname'])) {
      echo '<h3> Xin chào: ' . $_COOKIE['fullname'] . '</h3>';
      echo '<a href="logout.php">Đăng xuất</a>';
    } else {
      ?>
    <h3 class="text-center">Login</h3>
    <div class="row">
      <div class="col-md-4 col-md-offset-4">
       <form action="process.php" method="post">
        <div class="form-group">
          <label for="username">Username</label>
          <input type="text" id="username" name="username"class="form-control">
        </div>
        <div class="form-group">
          <label for="password">Password</label>
          <input type="password" id="password" name="password" class="form-control">
        </div>
        <button type="submit" class="btn btn-primary">Đăng nhập</button>
      </form>
    </div>
  </div>
  <?php
      }
  ?>
</div>
</body>
</html>

[process.php]

<h3 class="text-center">process</h3>
<?php
  // kiểm tra dữ liệu khác rỗng
  function checkEmpty($value) {
    $flag = false;
    if (!isset($value) || trim($value) == '') {
      $flag = true;
    }
    return $flag;
  }

  if (isset($_COOKIE['fullname'])) {
    echo '<h3> Xin chào: ' . $_COOKIE['fullname'] . '</h3>';
    echo '<a href="logout.php">Đăng xuất</a>';
  } else {
    if (!checkEmpty($_POST['username']) && !checkEmpty($_POST['password'])) {
      $username = $_POST['username'];
      $password = md5($_POST['password']);
      $data = parse_ini_file('users.ini');
      if (array_key_exists($username, $data)) {
        $userInfo = explode ('|', $data[$username]);
        if ($username == $userInfo[0] && $password == $userInfo[1]) {
          setcookie('fullname', $userInfo[2], time() + 200);
          echo '<h3> Xin chào: ' . $userInfo[2] . '</h3>';
          echo '<a href="logout.php">Đăng xuất</a>';
        } else {
          header('location:index.php');
        }
      }else {
        header('location:index.php');
      }
    } else {
    // die('test');
      header('location:index.php');
    }
  }
?>

[logout.php]

<?php
  setcookie('fullname');
  header('location:index.php');
?>

[users.ini]

teo = "teo|c4ca4238a0b923820dcc509a6f75849b|Nguyen Van Teo"
ti = "ti|c81e728d9d4c2f636f067f89cc14862c|Tran Van Ti"

So sánh session và cookie:


Session
Cookie
Lưu dữ liệu tại server
Lưu dữ liệu tại client
Bị xóa khi người dùng đóng trình duyệt
Bị xóa khi hết thời gian tồn tại
Bảo mật hơn do lưu trên server
Dễ bị chỉnh sửa, do tồn tại trên máy của người dùng

-----------
Cập nhật [8/1/2018]
-----------
Xem thêm: