ใช้ css แบ่งเนื้อหา เป็นคอลัมน์ พร้อมแบ่งหน้า ด้วย php

ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์ใช้งาน css ในการแบ่งเนื้อหาที่ต้องการแสดง
เป็นคอมลัมน์ ตามที่ต้องการ พร้อมกับการแบ่งหน้า สะดวกในการนำไปประยุกต์ใช้ เช่น ใช้กับการ
แบ่งเนื้อหาข่าว หรือบทความ หรือ gallery รูปภาพเป็นคอลัมน์

ทดสอบการปรับแต่ง และดูผลลัพธ์ ก่อนการใช้งาน
 

SQL ข้อมูลจังหวัดสำหรับ ทดสอบ

-- 
-- Table structure for table `province`
-- 

CREATE TABLE `province` (
  `id_province` int(11) NOT NULL auto_increment,
  `name_province` varchar(255) NOT NULL default '',
  `id_region` varchar(255) NOT NULL default '',
  PRIMARY KEY  (`id_province`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=77 ;

-- 
-- Dumping data for table `province`
-- 

INSERT INTO `province` VALUES (1, 'กรุงเทพมหานคร', '1');
INSERT INTO `province` VALUES (2, 'กาญจนบุรี', '1');
INSERT INTO `province` VALUES (3, 'จันทบุรี', '4');
INSERT INTO `province` VALUES (4, 'ฉะเชิงเทรา', '1');
INSERT INTO `province` VALUES (5, 'ชลบุรี', '4');
INSERT INTO `province` VALUES (6, 'ชัยนาท', '1');
INSERT INTO `province` VALUES (7, 'ตราด', '4');
INSERT INTO `province` VALUES (8, 'นครนายก', '1');
INSERT INTO `province` VALUES (9, 'นครปฐม', '1');
INSERT INTO `province` VALUES (10, 'นนทบุรี', '1');
INSERT INTO `province` VALUES (11, 'ปทุมธานี', '1');
INSERT INTO `province` VALUES (12, 'ปราจีนบุรี', '1');
INSERT INTO `province` VALUES (13, 'ประจวบคีรีขันธ์', '1');
INSERT INTO `province` VALUES (14, 'พระนครศรีอยุธยา', '1');
INSERT INTO `province` VALUES (15, 'เพชรบุรี', '1');
INSERT INTO `province` VALUES (16, 'ลพบุรี', '1');
INSERT INTO `province` VALUES (17, 'ราชบุรี', '1');
INSERT INTO `province` VALUES (18, 'ระยอง', '4');
INSERT INTO `province` VALUES (19, 'สมุทรปราการ', '1');
INSERT INTO `province` VALUES (20, 'สมุทรสงคราม', '1');
INSERT INTO `province` VALUES (21, 'สมุทรสาคร', '1');
INSERT INTO `province` VALUES (22, 'สระบุรี', '1');
INSERT INTO `province` VALUES (23, 'สระแก้ว', '1');
INSERT INTO `province` VALUES (24, 'สิงห์บุรี', '1');
INSERT INTO `province` VALUES (25, 'สุพรรณบุรี', '1');
INSERT INTO `province` VALUES (26, 'อ่างทอง', '1');
INSERT INTO `province` VALUES (27, 'กระบี่', '2');
INSERT INTO `province` VALUES (28, 'ชุมพร', '2');
INSERT INTO `province` VALUES (29, 'ตรัง', '2');
INSERT INTO `province` VALUES (30, 'นครศรีธรรมราช', '2');
INSERT INTO `province` VALUES (31, 'นราธิวาส', '2');
INSERT INTO `province` VALUES (32, 'ปัตตานี', '2');
INSERT INTO `province` VALUES (33, 'พังงา', '2');
INSERT INTO `province` VALUES (34, 'พัทลุง', '2');
INSERT INTO `province` VALUES (35, 'ภูเก็ต', '2');
INSERT INTO `province` VALUES (36, 'ระนอง', '2');
INSERT INTO `province` VALUES (37, 'ยะลา', '2');
INSERT INTO `province` VALUES (38, 'สงขลา', '2');
INSERT INTO `province` VALUES (39, 'สตูล', '2');
INSERT INTO `province` VALUES (40, 'สุราษฏร์ธานี', '2');
INSERT INTO `province` VALUES (41, 'กาฬสินธุ์', '6');
INSERT INTO `province` VALUES (42, 'ขอนแก่น', '6');
INSERT INTO `province` VALUES (43, 'ชัยภูมิ', '6');
INSERT INTO `province` VALUES (44, 'นครพนม', '6');
INSERT INTO `province` VALUES (45, 'นครราชสีมา', '6');
INSERT INTO `province` VALUES (46, 'บุรีรัมย์', '6');
INSERT INTO `province` VALUES (47, 'เลย', '6');
INSERT INTO `province` VALUES (48, 'ยโสธร', '6');
INSERT INTO `province` VALUES (49, ' ร้อยเอ็ด', '6');
INSERT INTO `province` VALUES (50, 'มหาสารคาม', '6');
INSERT INTO `province` VALUES (51, 'มุกดาหาร', '6');
INSERT INTO `province` VALUES (52, 'สกลนคร', '6');
INSERT INTO `province` VALUES (53, 'หนองคาย', '6');
INSERT INTO `province` VALUES (54, 'หนองบัวลำภู', '6');
INSERT INTO `province` VALUES (55, 'ศรีสะเกษ', '6');
INSERT INTO `province` VALUES (56, 'สุรินทร์', '6');
INSERT INTO `province` VALUES (57, 'อุดรธานี', '6');
INSERT INTO `province` VALUES (58, 'อำนาจเจริญ', '6');
INSERT INTO `province` VALUES (59, 'อุบลราชธานี', '6');
INSERT INTO `province` VALUES (60, 'กำแพงเพชร', '5');
INSERT INTO `province` VALUES (61, 'ตาก', '5');
INSERT INTO `province` VALUES (62, 'นครสวรรค์', '5');
INSERT INTO `province` VALUES (63, 'น่าน', '5');
INSERT INTO `province` VALUES (64, 'พิจิตร', '5');
INSERT INTO `province` VALUES (65, 'พิษณุโลก', '5');
INSERT INTO `province` VALUES (66, 'พะเยา', '5');
INSERT INTO `province` VALUES (67, 'เชียงใหม่', '5');
INSERT INTO `province` VALUES (68, 'เชียงราย', '5');
INSERT INTO `province` VALUES (69, 'เพชรบูรณ์', '5');
INSERT INTO `province` VALUES (70, 'แพร่', '5');
INSERT INTO `province` VALUES (71, 'แม่ฮ่องสอน', '5');
INSERT INTO `province` VALUES (72, 'ลำปาง', '5');
INSERT INTO `province` VALUES (73, 'ลำพูน', '5');
INSERT INTO `province` VALUES (74, 'สุโขทัย', '5');
INSERT INTO `province` VALUES (75, 'อุตรดิตถ์', '5');
INSERT INTO `province` VALUES (76, 'อุทัยธานี', '5');

โค้ดเต็มสำหรับทดสอบ
 

<?php   
// ทำการเชิ่อมต่อฐานข้อมูล   
$link=mysql_connect("localhost","root","test") or die("error".mysql_error());   
mysql_select_db("test",$link) or  die ('Can't use Database : ' . mysql_error());;    
?>  
<?php
// ส่วนของการกำหนดค่า
$setContainBox=500; // ความกว้างของพื้นที่เนื้อหา
$setNumColumn=2; //จำนวนคอลัมน์ที่ต้องการแสดง
$setNumRow=3; // จำนวนแถวที่ต้องการแสดง
$setHeightColumn=75; //ความสูงของแต่ละแถว
$setMarginColumn=2; // ระยะห่างระหว่างแถวและระหว่างคอลัมน์
$setWidthBorder=1; // ความกว้างเส้นขอบ
$setWidthColumn=($setContainBox/$setNumColumn)-(($setMarginColumn*$setNumColumn)+($setWidthBorder*$setNumColumn)*2);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>learn mysql function</title>
 <style type="text/css">
body{   
	font-size:12px;   
}   
/* css ส่วนตัวเลขแสดงการแบ่งหน้า */
.mynavi{
	display:block;
	width:25px;
	height:20px;
	text-align:center;
	text-decoration:none;margin-right:3px;
	background-color:#99CC33;
	color:#FFFFFF;
	float:left;
	font-size:12px;
	line-height:20px;	
}
/* css ส่วนตัวเลขแสดงการแบ่งหน้า กรณีเมาส์ over หรืออยู่ในหน้านั้น */
.mynavi:hover,.mynavi_active{
	display:block;
	width:25px;
	height:20px;
	text-align:center;
	text-decoration:none;margin-right:3px;
	background-color:#000000;
	color:#FFFFFF;
	float:left;
	font-size:12px;
	line-height:20px;	
}
/* css ส่วนกำหนดรายละเอียดจำนวนหน้า */
.pgnavi{
	display:block;
	height:25px;
	font-size:12px;
	line-height:20px;
	float:left;
	margin-left:50px;
	margin-right:3px;
}
/* css ส่วนพื้นที่เนื้อหา มีการรับค่าจากตัวแปร PHP */
.showInColumn{
	display:block;
	list-style:none;
	margin:0;
	padding:0;
	width:<?=$setContainBox?>px;
	background-color:#FCC;
}
/* css ส่วนพื้นที่เนื้อหาลิสรายการ มีการรับค่าจากตัวแปร PHP */
.listColumn{
	display:block;
	margin:<?=$setMarginColumn?>px;
	height:<?=$setHeightColumn?>px;
	width:<?=$setWidthColumn?>px;
	float:left;  
	border:<?=$setWidthBorder?>px solid #CCC;
}
  </style> 


</head>

<body>
<?php
	// สร้างฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
	function page_navigator($before_p,$plus_p,$total,$total_p,$chk_page){
		echo "<span class=pgnavi>".$before_p." to ".$plus_p." of ".$total." |  Go to Page</span> ";
		for($i=0;$i<$total_p;$i++){
			$now_class=($chk_page==$i)?"mynavi_active":"mynavi";			
			echo "<a class='".$now_class."' href='?s_page=$i'>".intval($i+1)."</a> ";
		}
	}
?>

<?php
$q="select * from province ";  // แก้ไขขื่อตารางตามต้องการ
$qr=mysql_query($q);
$total=mysql_num_rows($qr);
$e_page=$setNumRow*$setNumColumn;	// กำหนด จำนวนรายการที่แสดงในแต่ละหน้า
if(!isset($_GET['s_page'])){
	$_GET['s_page']=0;
}else{
	$chk_page=$_GET['s_page'];	
	$_GET['s_page']=$_GET['s_page']*$e_page;
}
$q.=" limit ".$_GET['s_page'].",$e_page";
$qr=mysql_query($q);
if(mysql_num_rows($qr)>=1){
	$plus_p=($chk_page*$e_page)+mysql_num_rows($qr);
}else{
	$plus_p=($chk_page*$e_page);	
}
$total_p=ceil($total/$e_page);
$before_p=($chk_page*$e_page)+1;

?>

<?
mysql_set_charset("utf8",$link);
$q="select * from province limit ".$_GET['s_page'].",$e_page"; // แก้ไขขื่อตารางตามต้องการ
$qr=mysql_query($q);
echo "<ul class='showInColumn'>";
while($rs=mysql_fetch_array($qr)){
	//  echo $rs['name_province']."<br>";	
?>
<li class='listColumn'><?=$rs['name_province']?></li>
<?php	
}
echo "</ul>";
mysql_close($link);
?>

<br style="clear:both;" />
<br style="clear:both;" />
 <?php
 // เรียกใช้งานฟังก์ชั่น สำหรับแสดงการแบ่งหน้า
  page_navigator($before_p,$plus_p,$total,$total_p,$chk_page); 
  ?> 

</body>
</html>