ตัวอย่างโค้ดต่อไปนี้ เป็นการประยุกต์ใช้งาน css ในการแบ่งเนื้อหาที่ต้องการแสดง
เป็นคอมลัมน์ ตามที่ต้องการ พร้อมกับการแบ่งหน้า สะดวกในการนำไปประยุกต์ใช้ เช่น ใช้กับการ
แบ่งเนื้อหาข่าว หรือบทความ หรือ gallery รูปภาพเป็นคอลัมน์
ทดสอบการปรับแต่ง และดูผลลัพธ์ ก่อนการใช้งาน
SQL ข้อมูลจังหวัดสำหรับ ทดสอบ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | -- -- 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'); |
โค้ดเต็มสำหรับทดสอบ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | <?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"<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> |
