|
 |
| |
ขอตัวอย่างการโชว์รูปภาพจากฐานฯแบบเรียงแนวนอน และตัดแถวตามที่เรากำหนดหน่อยครับ |
| |
 |
|
|
 |
 |
|
การจัด Layout เป็นการทำงานฝั่ง front-end กำหนดที่ HTML+CSS
ตัวอย่าง static page ที่แสดงรูปภาพแถวละ 3 รูป
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<div class="row">
<div class="column">
<img src="1.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="2.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="3.jpg" alt="Mountains" style="width:100%">
</div>
</div>
<div class="row">
<div class="column">
<img src="4.jpg" alt="Snow" style="width:100%">
</div>
<div class="column">
<img src="5.jpg" alt="Forest" style="width:100%">
</div>
<div class="column">
<img src="6.jpg" alt="Mountains" style="width:100%">
</div>
</div>
</body>
</html>
เมื่อเห็นภาพรวมแล้วก็ทำเป็น dynamic content เข้าลูปในส่วนที่ซ้ำกัน
Code (PHP)
$x = [1, 2, 3, 4, 5, 6];
for ($i = 0; $i < count($x); $i++) {
echo $x[$i];
if (($i+1) % 3 == 0) echo "<br>";
}
แบบ table (PHP)
<?php
$x = [1, 2, 3, 4, 5, 6];
?>
<table>
<?php
for ($i = 0; $i < count($x); $i++) {
if ($i % 3 == 0) {
?>
<tr>
<td><?php echo $x[$i] ?? ""; ?></td>
<td><?php echo $x[$i+1] ?? ""; ?></td>
<td><?php echo $x[$i+2] ?? ""; ?></td>
</tr>
<?php
}
}
?>
</table>
ส่วนการดึงข้อมูลมาจากฐานข้อมูล ใช้หลักการเดียวกัน
ลองประยุกต์ดูครับ
|
 |
 |
 |
 |
| Date :
2022-09-02 17:46:22 |
By :
009 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
อีกตัวอย่าง loop <td> ด้วย
Code (PHP)
$x = [1, 2, 3, 4, 5, 6, 7, 8];
?>
<table>
<?php
for ($i = 0; $i < count($x); $i++) {
if ($i % 3 == 0) {
?>
<tr>
<?php for ($j = 0; $j < 3; $j++) { ?>
<td><?php echo $x[$i+$j] ?? ""; ?></td>
<?php } ?>
</tr>
<?php
}
}
?>
</table>
|
| |
|
|
| |
| Date :
2022-09-02 17:55:09 |
By :
009 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 04
|
