Trình diễn (render) dữ liệu Danh sách Array ra giao diện (HTML, CSS, JS) sử dụng PHP

Nền tảng Kiến thức - Hành trang tới Tương lai

Chương trình học

Chương 3-Bài 4. Trình diễn (render) dữ liệu Danh sách Array ra giao diện (HTML, CSS, JS) sử dụng PHP

Tác giả: Dương Nguyễn Phú Cường

Ngày đăng: Hồi xưa đó

Xem định dạng IN

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

Về trang chủ Về Khóa học

Bài học trước Bài học tiếp theo

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

Bài học trước Bài học tiếp theo

Về trang chủ Về Khóa học

Vuexy

Files

Members

NỀN TẢNG

Chương trình học

Chương 3-Bài 4. Trình diễn (render) dữ liệu Danh sách Array ra giao diện (HTML, CSS, JS) sử dụng PHP

Render là gì?

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

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

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

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; ?>`

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

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

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

Kiểm tra kết quả

Mục lục

Chương trình học

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Vuexy

Files

Members

Trình diễn (render) dữ liệu Danh sách Array ra giao diện (HTML, CSS, JS) sử dụng PHP

Chương trình học

Chương 3-Bài 4. Trình diễn (render) dữ liệu Danh sách Array ra giao diện (HTML, CSS, JS) sử dụng PHP

Render là gì?

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

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

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

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; ?>

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

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

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

Kiểm tra kết quả

Mục lục

Chương trình học

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải 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

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

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

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

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