PHP + MySQL 学习笔记（一）--- DIV 与 table 在 HTML + CSS 规划， PHP mysqli_fetch_array() 程式练习

延续前几篇的试验，我找了一个卜卦的输出界面，准备把这个画面放在HTML 的区块里面

变成这个样子。

规划分析

我用红线表明纵的划分方法和 蓝色弧线做横的划分方法。

纵的方法就是在各自的 div 里面用 ul 和 li， 然后在 PHP 底下 用 for… 回圈跑六次。跑完的结果发现会产生高度不一致的情况。产生了下一张图片。

纵的规划产生高低不平的画面

使用表格做横向的规划

利用 table ，做六次 的 tr 、td 的输出

<article>
	 		<!-- 内容放在这个中间-->
			<table >
			    <tr style="background-color: #fdd">
			        <th style='width: 40px'>六兽</th> <th colspan="2">伏    神</th>   <th>世  应</th> <th colspan="3">本 卦</th>  
			        <th colspan="2">爻  变</th>   <th colspan="3">变  卦</th>   
			     <td style="text-align: center;"></td>
			    </tr>
			   
			    <?php
			    	for ($i=0; $i <6 ; $i++) { 
					echo "<tr style='height: 10px'>"; 
					echo "<td > </td>";
			    	echo "<tr>";
						
			    		/*******1**********/
						echo "<td> ";	
						echo $pugua_result[$liushou_sql[$i]];
						echo "</td>";	
			    		/*******2**********/
						echo "<td> ";
						if ($pugua_result[$fushen_qin_sql[$i]]=="empty")
							{
								echo '   ';
							} else {echo $pugua_result[$fushen_qin_sql[$i]];}		
						echo "</td>";	
			    		/******3**********/
						echo "<td> ";	
 						if ($pugua_result[$fushen_gz_sql[$i]]=="empty")
							{
								echo '   ';
							} else {echo $pugua_result[$fushen_gz_sql[$i]];}	
						echo "</td>";	
			    		/******4***********/
						echo "<td style='text-align: center;'> ";	
						if ($pugua_result[$shiying_sql[$i]]=="empty")
							{
								echo '   ';
							} else {echo $pugua_result[$shiying_sql[$i]];}	
						echo "</td>";	
			    		/*******5**********/
						echo "<td> ";							
						echo $pugua_result[$liuqin_sql[$i]];
						echo "</td>";
						/*******6**********/
						echo "<td> ";		
						if ($pugua_result[$tuyinyang_sql[$i]]=="1")
								{
									echo '<img  src="image/yang_s.JPG" height="20" width="50">';
								} else  
									{echo '<img  src="image/yin.JPG" height="20" width="50">';}				
						echo "</td>";
			    		/*******7**********/
						echo "<td> ";							
						echo $pugua_result[$ganzhi_sql[$i]];
						echo "</td>";
			    		/*******8**********/
						echo "<td style='width: 20px'> ";	
						if ($pugua_result[$yaobian_sql[$i]]=="empt")
							{
								echo '   ';
							} else {echo $pugua_result[$yaobian_sql[$i]];}							
						echo "</td>";
						echo "<td> ";	
						if ($pugua_result[$yaobian_sql[$i]]=="empt")
							{
								echo '   ';
							} else {echo '---->';}							
						echo "</td>";
			    		/*******9**********/
						echo "<td> ";							
						echo $pugua_result[$ganzhi_bian_sql[$i]];
						echo "</td>";
						/*******10**********/
						echo "<td> ";							
						echo $pugua_result[$liuqin_bian_sql[$i]];
						echo "</td>";
						/*******11**********/
						echo "<td> ";							
						if ($pugua_result[$tuyinyang_bian_sql[$i]]=="yang")
								{
									echo '<img  src="image/yang_s.JPG" height="20" width="50">';
								} else  
									{echo '<img  src="image/yin.JPG" height="20" width="50">';}				

						echo "</td>";
					echo "</tr>"; 
 					}
		        ?>
			    
			</table>			
			<!-- 内容放在这个中间-->
	 	</article>

几个特点

1. 把 table 里面的 border 取消，就是没有线条的意思。
2. 表头 th，里面加了 colspan=“3”，横向三格连通在一起。
3. 加了一行空白在表头 （th）之下,增加美观。
4. MySQL 的php 资料载入方式写在以下的程式。
5. 空白的地方是需要用 if… else 做判断，然后印出空白格。

<?php
//database connectivity
$con=mysqli_connect("localhost","root","password","pugua") or die(mysqli_error());
//select  values from pridictresult table
$id;
$sql = "SELECT * from bugua-1 WHERE id='003'";
$result = mysqli_query($con,$sql);
$pugua_result=mysqli_fetch_array($result);

mysqli_close($con);
/*******************************/
$liushou_sql=array( 'liushou_0', 'liushou_1', 'liushou_2', 'liushou_3', 'liushou_4', 'liushou_5');

$fushen_qin_sql=array('fushen_qin_0', 'fushen_qin_1', 'fushen_qin_2', 'fushen_qin_3', 'fushen_qin_4', 'fushen_qin_5');

$fushen_gz_sql=array('fushen_gz_0', 'fushen_gz_1', 'fushen_gz_2', 'fushen_gz_3', 'fushen_gz_4','fushen_gz_5');

 $shiying_sql=array('shiying_0', 'shiying_1', 'shiying_2', 'shiying_3', 'shiying_4', 'shiying_5');
 $liuqin_sql=array('liuqin_0', 'liuqin_1', 'liuqin_2', 'liuqin_3', 'liuqin_4', 'liuqin_5');

$tuyinyang_sql=array( 'tuyinyang_0', 'tuyinyang_1', 'tuyinyang_2', 'tuyinyang_3', 'tuyinyang_4', 'tuyinyang_5'); 

$ganzhi_sql=array('ganzhi_0', 'ganzhi_1', 'ganzhi_2', 'ganzhi_3', 'ganzhi_4', 'ganzhi_5'); 

$yaobian_sql=array('yaobian_0', 'yaobian_1', 'yaobian_2', 'yaobian_3', 'yaobian_4', 'yaobian_5');
$ganzhi_bian_sql=array('ganzhi_bian_0', 'ganzhi_bian_1', 'ganzhi_bian_2', 'ganzhi_bian_3', 'ganzhi_bian_4', 'ganzhi_bian_5');

$liuqin_bian_sql=array('liuqin_bian_0', 'liuqin_bian_1', 'liuqin_bian_2', 'liuqin_bian_3', 'liuqin_bian_4', 'liuqin_bian_5');

$tuyinyang_bian_sql=array('tuyinyang_bian_0', 'tuyinyang_bian_1', 'tuyinyang_bian_2', 'tuyinyang_bian_3', 'tuyinyang_bian_4', 'tuyinyang_bian_5') ;
/******************************************************/
?>

几个编辑程式

1. Sublime text: 网络上找以下就有了。做出来的 PHP 档案要透过 浏览器\ phpadmin 检查验证。这个时候 MySQL已经启动。
2. phpDesigner 8 http://www.mpsoftware.dk/phpdesigner.php，可以直接在编辑器执行 php 档， 和 debug 除错。但是需要另外启动 MySQL。

这两个都可以找到所谓的“免费”版。

网络上有许多免费的电子书可以参考，不过，都是英文版的。譬如：manithchhuon/the-best-php-books
里面有十几本不同的 php 参考。