 |
[PHP]
ขอตัวอย่างการโชว์รูปภาพจากฐานฯแบบเรียงแนวนอน และตัดแถวตามที่เรากำหนดหน่อยครับ |
| |
 |
|
|
 |
 |
|
การจัด Layout เป็นการทำงานฝั่ง front-end กำหนดที่ HTML+CSS
ตัวอย่าง static page ที่แสดงรูปภาพแถวละ 3 รูป
01.<!DOCTYPE html>
02.<html>
03.<head>
04.<style>
05.* {
06. box-sizing: border-box;
07.}
08.
09..column {
10. float: left;
11. width: 33.33%;
12. padding: 5px;
13.}
14.
15./* Clearfix (clear floats) */
16..row::after {
17. content: "";
18. clear: both;
19. display: table;
20.}
21.</style>
22.</head>
23.<body>
24.
25.<div class="row">
26. <div class="column">
27. <img src="1.jpg" alt="Snow" style="width:100%">
28. </div>
29. <div class="column">
30. <img src="2.jpg" alt="Forest" style="width:100%">
31. </div>
32. <div class="column">
33. <img src="3.jpg" alt="Mountains" style="width:100%">
34. </div>
35.</div>
36.<div class="row">
37. <div class="column">
38. <img src="4.jpg" alt="Snow" style="width:100%">
39. </div>
40. <div class="column">
41. <img src="5.jpg" alt="Forest" style="width:100%">
42. </div>
43. <div class="column">
44. <img src="6.jpg" alt="Mountains" style="width:100%">
45. </div>
46.</div>
47.
48.</body>
49.</html>
เมื่อเห็นภาพรวมแล้วก็ทำเป็น dynamic content เข้าลูปในส่วนที่ซ้ำกัน
Code (PHP)
1.$x = [1, 2, 3, 4, 5, 6];
2.for ($i = 0; $i < count($x); $i++) {
3. echo $x[$i];
4. if (($i+1) % 3 == 0) echo "<br>";
5.}
แบบ table (PHP)
01.<?php
02.$x = [1, 2, 3, 4, 5, 6];
03.?>
04.
05.<table>
06.<?php
07.for ($i = 0; $i < count($x); $i++) {
08. if ($i % 3 == 0) {
09.?>
10. <tr>
11. <td><?php echo $x[$i] ?? ""; ?></td>
12. <td><?php echo $x[$i+1] ?? ""; ?></td>
13. <td><?php echo $x[$i+2] ?? ""; ?></td>
14. </tr>
15.<?php
16. }
17.}
18.?>
19.</table>
ส่วนการดึงข้อมูลมาจากฐานข้อมูล ใช้หลักการเดียวกัน
ลองประยุกต์ดูครับ
|
 |
 |
 |
 |
| Date :
2022-09-02 17:46:22 |
By :
009 |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
อีกตัวอย่าง loop <td> ด้วย
Code (PHP)
01.$x = [1, 2, 3, 4, 5, 6, 7, 8];
02.
03.?>
04.
05.<table>
06.<?php
07.for ($i = 0; $i < count($x); $i++) {
08. if ($i % 3 == 0) {
09.?>
10. <tr>
11. <?php for ($j = 0; $j < 3; $j++) { ?>
12. <td><?php echo $x[$i+$j] ?? ""; ?></td>
13. <?php } ?>
14. </tr>
15.<?php
16. }
17.}
18.?>
19.</table>
|
| |
|
|
| |
| Date :
2022-09-02 17:55:09 |
By :
009 |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
