Render là gì?

Render là một thuật ngữ dùng để chỉ hành động IN ra màn hình giá trị của biến trong PHP.

Dữ liệu dạng mảng (array) là gì?

Dữ liệu dạng mảng (array) là kiểu dữ liệu có cấu trúc, được lưu trữ theo kiểu key => value. Với:

  • Mỗi key là một khóa chứa giá trị duy nhất (thường là số nguyên (integer) bắt đầu từ 0 hoặ c là chuỗi (string) tương ứng với tên cột (column) trong table nào đó).
  • value: là giá trị được lưu trữ trong key đó. Có thể là các kiểu dữ liệu của PHP như Chuỗi (String), Số nguyên (Integer), Số có dấu chấm động (Float, Double, Decimal), Kiểu dữ liệu Đúng/Sai (Boolean), kiểu Array, kiểu Object...

Ví dụ khai báo mảng array:

Cho thông tin Sinh viên như sau:

  • Họ tên:Dương Nguyễn Phú Cường
  • Giới tính:Nam
  • Điểm lý thuyết:8
  • Điểm thực hành:10

Để khai báo thông tin về Sinh viên này, ta thấy có 4 thuộc tính tương ứng như sau:

  • Họ tên: có thể đặt tên key là hoten
  • Giới tính: có thể đặt tên key là gioitinh
  • Điểm lý thuyết: có thể đặt tên key là diemlt
  • Điểm thực hành: có thể đặt tên key là diemth

Code khai báo trong PHP như sau:

<?php
// Khai báo biến mảng (array) mô tả về thông tin về Sinh viên 1
$arrSinhVien1 = array(
  'hoten'     => 'Dương Nguyễn Phú Cường', // key Họ tên          có value = 'Dương Nguyễn Phú Cường'
  'gioitinh'  => 'Nam',                    // key Giới tính       có value = 'Nam'
  'diemlt'    => 8,                        // key Điểm lý thuyết  có value = 8
  'diemth'    => 10                        // key Điểm thực hành  có value = 10
);
?>

Ví dụ khai báo mảng của mảng (Danh sách) Jagged Array

Cho danh sách Sinh viên như sau:

Họ tên Giới tính Điểm LT Điểm TH
Dương Nguyễn Phú Cường Nam 8 10
Trần Thị B Nữ 6 7
Phạm Văn C Nam 7 9

=> Yêu cầu sử dụng PHP để khai báo các biến chứa giá trị tương ứng và RENDER ra màn hình với định dạng danh sách Table như trên.

Thực hành

Bước 1: tạo file render-du-lieu-danh-sach-array.php trong thư mục gốc của dự án

Bước 2: viết code như sau

Bước 2.1: hình dung từ file Excel

Bước 2.2: khởi tạo mảng (array) lưu trữ dữ liệu dòng 1

Bước 2.3: khởi tạo mảng (array) lưu trữ dữ liệu dòng 2

Bước 2.4: khởi tạo mảng (array) lưu trữ dữ liệu dòng 3

Bước 2.5: khởi tạo mảng (array) lưu trữ TẤT CẢ các dòng dữ liệu

Bước 3: trình diễn ra giao diện

1. Phong cách (style) viết code 1: sử dụng <?php foreach() : ?> và <?php endforeach; ?>

  • Có nhiều phong cách (styles) viết code.
  • Đây là cách render code thường sử dụng trong dự án do dễ đọc hiểu code.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="keywords" content="Nền tảng,HTML,CSS,XML,JavaScript, Lập trình C#, Lập trình, Web, Kiến thức, Đồ án">
  <meta name="author" content="Dương Nguyễn Phú Cường">
  <meta name="description" content="Cung cấp các kiến thức Nền tảng, cơ bản về Lập trình, Lập trình web, Lập trình di động, Cơ sở dữ liệu, ...">
  <title>Render dữ liệu danh sách Array bằng PHP | NenTang.vn</title>
</head>
<body>
  <h1>Render dữ liệu dạng danh sách Array bằng PHP</h1>

  <?php
  // Khai báo biến mảng (array) mô tả về thông tin về Sinh viên 1
  $arrSinhVien1 = array(
    'hoten'     => 'Dương Nguyễn Phú Cường', // key Họ tên          có value = 'Dương Nguyễn Phú Cường'
    'gioitinh'  => 'Nam',                    // key Giới tính       có value = 'Nam'
    'diemlt'    => 8,                        // key Điểm lý thuyết  có value = 8
    'diemth'    => 10                        // key Điểm thực hành  có value = 10
  );

  // Khai báo biến mảng (array) mô tả về thông tin về Sinh viên 2
  $arrSinhVien2 = array(
    'hoten'     => 'Trần Thị B',            // key Họ tên          có value = 'Trần Thị B'
    'gioitinh'  => 'Nữ',                    // key Giới tính       có value = 'Nữ'
    'diemlt'    => 6,                       // key Điểm lý thuyết  có value = 6
    'diemth'    => 7                        // key Điểm thực hành  có value = 7
  );

  // Khai báo biến mảng (array) mô tả về thông tin về Sinh viên 3
  $arrSinhVien3 = [
    'hoten'     => 'Phạm Văn C',            // key Họ tên          có value = 'Phạm Văn C'
    'gioitinh'  => 'Nam',                   // key Giới tính       có value = 'Nam'
    'diemlt'    => 7,                       // key Điểm lý thuyết  có value = 7
    'diemth'    => 9                        // key Điểm thực hành  có value = 9
  ];

  // Tạo mảng Danh sách (array) lớn chứa các mảng dữ liệu con
  // Danh sách có 3 dòng dữ liệu => tương đương với 3 array con
  $arrDanhSach = [
    $arrSinhVien1,
    $arrSinhVien2,
    $arrSinhVien3,
  ];
  ?>

  <!-- Render phong cách 1 (style viêt code) -->
  <h2>Danh sách Thông tin của Sinh viên</h2>
  <h3>Render theo phong cách 1 (style viết code) <span style="color: red;">foreach: và endforeach;</span></h3>
  <table border="1">
    <tr>
      <th>Họ tên</th>
      <th>Giới tính</th>
      <th>Điểm LT</th>
      <th>Điểm TH</th>
    </tr>

    <?php foreach($arrDanhSach as $sv): ?>
    <tr>
      <td><?php echo $sv['hoten']; ?></td>
      <td><?php echo $sv['gioitinh']; ?></td>
      <td><?= $sv['diemlt']; ?></td>
      <td><?= $sv['diemth']; ?></td>
    </tr>
    <?php endforeach; ?>

  </table>
</body>
</html>

2. Phong cách (style) viết code 2: sử dụng <?php foreach() { ?> và <?php } ?>

  • Đây là cách render code thường ít sử dụng trong dự án hơn do dấu ngoặc nhọn nhỏ và khó nhìn @@.
  • Thay thế đoạn code render trên từ dòng 60-67 thành đoạn code sau và kiểm tra kết quả.
<!-- Render phong cách 2 (style viêt code) -->
<h2>Danh sách Thông tin của Sinh viên</h2>
<h3>Render theo phong cách 2 (style viết code) <span style="color: red;">foreach { và }</span></h3>
<table border="1">
  <tr>
    <th>Họ tên</th>
    <th>Giới tính</th>
    <th>Điểm LT</th>
    <th>Điểm TH</th>
  </tr>

  <?php foreach($arrDanhSach as $sv) { ?>
  <tr>
    <td><?php echo $sv['hoten']; ?></td>
    <td><?php echo $sv['gioitinh']; ?></td>
    <td><?= $sv['diemlt']; ?></td>
    <td><?= $sv['diemth']; ?></td>
  </tr>
  <?php } ?>

</table>

3. Phong cách (style) viết code 3: sử dụng <?php for: ?> và <?php endfor; ?>

  • Đây là cách render code sử dụng vòng lặp for. Cần khai báo:
    • Biến chạy $i bắt đầu từ 0
    • Chạy đến số lượng phần tử có trong danh sách mảng array. Sử dụng hàm count($array) để lấy được số lượng phần tử đang có trong mảng.
    • Mỗi lần chạy tăng biến chạy lên 1 đơn vị $i++
  • Thay thế đoạn code render trên từ dòng 60-67 thành đoạn code sau và kiểm tra kết quả.
<!-- Render phong cách 3 (style viêt code) -->
<h2>Danh sách Thông tin của Sinh viên</h2>
<h3>Render theo phong cách 3 (style viết code) <span style="color: red;">for: và endfor;</span></h3>
<table border="1">
  <tr>
    <th>Họ tên</th>
    <th>Giới tính</th>
    <th>Điểm LT</th>
    <th>Điểm TH</th>
  </tr>

  <?php for($i = 0; $i < count($arrDanhSach); $i++): ?>
  <tr>
    <td><?php echo $arrDanhSach[$i]['hoten']; ?></td>
    <td><?php echo $arrDanhSach[$i]['gioitinh']; ?></td>
    <td><?= $arrDanhSach[$i]['diemlt']; ?></td>
    <td><?= $arrDanhSach[$i]['diemth']; ?></td>
  </tr>
  <?php endfor; ?>

</table>
<hr />

4. Phong cách (style) viết code 4: sử dụng <?php for { ?> và <?php } ?>

  • Đây là cách render code sử dụng vòng lặp for. Tương tự như cách trên, thay vì sử dụng for endfor thì sử dụng dấu ngoặc nhọn { }. Tuy nhiên hạn chế sử dụng, vì rất khó nhìn trong khi đọc code
  • Thay thế đoạn code render trên từ dòng 60-67 thành đoạn code sau và kiểm tra kết quả.
<!-- Render phong cách 4 (style viêt code) -->
<h2>Danh sách Thông tin của Sinh viên</h2>
<h3>Render theo phong cách 4 (style viết code) <span style="color: red;">for { và }</span></h3>
<table border="1">
  <tr>
    <th>Họ tên</th>
    <th>Giới tính</th>
    <th>Điểm LT</th>
    <th>Điểm TH</th>
  </tr>

  <?php for($i = 0; $i < count($arrDanhSach); $i++) { ?>
  <tr>
    <td><?php echo $arrDanhSach[$i]['hoten']; ?></td>
    <td><?php echo $arrDanhSach[$i]['gioitinh']; ?></td>
    <td><?= $arrDanhSach[$i]['diemlt']; ?></td>
    <td><?= $arrDanhSach[$i]['diemth']; ?></td>
  </tr>
  <?php } ?>

</table>

Kiểm tra kết quả

Xem kết quả tại: http://learning.nentang.vn/php/lessons/render-trong-php/render-du-lieu-danh-sach-array.php