Chương 8-Bài 3. 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ì?
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
keylà 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ữ trongkeyđó. 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
keylàhoten - Giới tính: có thể đặt tên
keylàgioitinh - Điểm lý thuyết: có thể đặt tên
keylàdiemlt - Điểm thực hành: có thể đặt tên
keylà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-67thà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
$ibắ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++
- Biến chạy
- Thay thế đoạn code render trên
từ dòng 60-67thà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ụngfor endforthì 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-67thà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
Chương trình học
Các bài học
Bài học trước Bài học tiếp theo
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