Ngu ngơ học làm web (52) - Form trong PHP

Tiếp theo của: Ngu ngơ học làm web (51) -  Biến, hằng, kiểu dữ liệu, toán tử trong PHP
------

Phần 52.       Form trong PHP

Trong các phần học về HTML, CSS và JavaScript cũng đã làm quen với Form rồi, tuy nhiên mới chỉ dừng lại ở mức cơ bản, đó là hiển thị các ô nhập liệu, nút bấm, nhãn, ô chọn, danh sách chọn; xử lý các hiệu ứng, lấy giá trị của các ô nhập liệu; và các xử lý đều ở phía Client. Phần này sẽ tìm hiểu sâu hơn về Form, về cách Form gửi dữ liệu về Server, cùng các xử lý khác.

Tạm hiểu Form là mẫu nhập liệu, là một biểu mẫu tạo sẵn, gồm các ô trống để người dùng điền thông tin phù hợp.

Đây là clip số 4: làm việc với Form – phần 1


Trong một trang web, Form dùng để nhận các giá trị mà người dùng nhập vào và đưa ra các xử lý phù hợp.

Tạo Form bằng mã HTML.

Form được bọc trong cặp thẻ <form></form>, trong Form chứa các ô nhập liệu, ví dụ các thẻ <input>.

Toàn bộ dữ liệu của form được gửi về server khi người dùng bấm vào nút submit (nút có kiểu là submit, type=“submit”). Submit nghĩa là đệ trình, gửi lên.

Form gồm ba thông tin quan trọng: tên của Form (thuộc tính name), dữ liệu của Form sẽ được gửi tới đâu để xử lý (thuộc tính action = gửi tới trang nào/tập tin nào) và phương thức gửi dữ liệu từ Client tới Server là gì (thuộc tính method=phương thức get hay post).

Ví dụ, Form sau gồm hai ô nhập liệu và một nút submit:

[index.php]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="process.php" method="get" name="main-form">
    <label for="">Email:</label>
    <input type="text" name="email"> <br>
    <label for="">Password:</label>
    <input type="password" name="password"> <br>
    <input type="submit" value="Submit Form">
  </form>
</body>
</html>

Sau khi bấm nút Submit Form, dữ liệu của Form sẽ được gửi tới trang process.php.

Phương thức get (hoặc GET – không phân biệt chữ hoa/thường): dữ liệu được gửi đi sẽ xuất hiện trên thanh địa chỉ của trình duyệt, do vậy dữ liệu không được bảo mật. Ví dụ, http://localhost/process.php?email=a%40gmail.com&password=abc. Tại phía Server, sử dụng biến $_GET hoặc $_REQUEST của PHP để lấy dữ liệu do Web Client gửi tới.

Phương thức post (hoặc POST): dữ liệu được gửi ngầm, nên không xuất hiện trên thanh địa chỉ của trình duyệt, dữ liệu được bảo mật. Ví dụ, http://localhost/process.php. Tại phía Server, sử dụng biến $_POST hoặc $_REQUEST của PHP để lấy dữ liệu do Web Client gửi tới.

Thuộc tính name trong các <input> là các tham chiếu, được sử dụng để lấy dữ liệu từ Web Client gửi tới Server. Ví dụ: echo $_GET['email'] . ' ' . $_GET['password'];. Có thể hiểu $_GET là một mảng gồm nhiều phần tử, mỗi phần tử được tham chiếu tới bằng thuộc tính name.

Ví dụ, tạo thêm trang process.php để xuất dữ liệu do trang index.php gửi tới.

[process.php]

<?php
  echo $_GET['email'];
  echo '<br>';
  echo $_GET['password'];
?>

Đây là clip số 5: làm việc với Form – phần 2


Tạo một chức năng phân trang đơn giản.

Dùng hàm isset() để kiểm tra dữ liệu có được gửi hay không, nghĩa là phần tử của mảng $_GET hoặc $_POST tại vị trí name đã được gán giá trị chưa? Ví dụ, $page = (isset($_GET['page']) == true) ? $_GET['page'] : 0;

Lưu lại đoạn mã để tham khảo,

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>Pagination</title>
 <style>
 
  .content {
    margin: 10px auto;
    width: 800px;
    text-align: center;
    border: 1px solid red;
    padding: 20px;
  }
  .pages a {
    display: inline-block;
    width: 40px;
    background: green;
    color: white;
    text-decoration: none;
  }

 </style>
</head>
<body>
  <div class = "content">
    <div class = "pages">
      <a href = "pagination.php?page=1">1</a>
      <a href = "pagination.php?page=2">2</a>
      <a href = "pagination.php?page=3">3</a>
      <a href = "pagination.php?page=4">4</a>
      <a href = "pagination.php?page=5">5</a>
      <a href = "pagination.php?page=6">6</a>
      <a href = "pagination.php?page=7">7</a>
    </div>
    <?php
      $page = (isset($_GET['page']) == true) ? $_GET['page'] : 0;
    ?>
    <p>Bạn đang ở trang thứ <?php echo $page; ?></p>
  </div>
</body>

</html>
-----------
Cập nhật [7/9/2020]
-----------