第三節：入口文件 · 購物車

入口文件就是cart中的index.php，就是測試smarty時使用的index.php，在此基礎上進行外觀設計，添加數據。　第一步：設計外觀設計外觀，就是設計index.html模板。　　設計外觀要用到bootstrap知識，[參考教程網頁](http://v3.bootcss.com/css/#overview) 　　html網頁代碼知識，[參考教程網頁](http://www.w3school.com.cn/html/index.asp) 　　本教程重點學習php，所以上述知識需要朋友們自學。 ~~~ <!doctype html> <html> <head> <meta charset="utf-8">  <title>{$title}</title>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body class="container"> <div class="col-md-12"> <hr />  <h2>     {$content}</h2> <hr /> </div> <div class="col-md-12"> <table class="table table-bordered" > <tr> <td> <div align="center"><img src="images/sy_2.jpg" width="980" height="75"></div> </td> </tr> <tr> <td> <div align="center"><img src="images/sy_4.jpg" width="980" height="258"></div> </td> </tr> </table> <table class="table table-bordered" > <tr> <td> <table class="table table-bordered" style="width:980px;margin: auto;"> <tr> <td > <div align="center"> <table width="185" border="1" style="float:left;margin-left:10px;"> <tr > <td colspan="2">圖片</td> </tr> <tr> <td>商品：</td> <td>商品</td> </tr> <tr> <td>價格：</td> <td>價格</td> </tr> </table> </div> </td> </tr> </table> </td> </tr> </table> </div> </body> </html> ~~~ 運行效果圖： ![](https://box.kancloud.cn/22791572007037261840d76919427fe3_800x429.jpg) * * * * * 　　第二步：編寫index.php 　模板設計好后，只需要往里填充數據即可。數據從何而來？這就需要index.php中的php代碼了，用相關函數讀取數據，將數據賦值php變量，再將php變量賦值給模板變量，最后，在模板文件中調用模板變量，即大功告成。 :) 修改原先index.hp代碼，換成以下代碼。 ~~~ <?php //導入smarty核心文件. require('config.php'); //導入數據連接文件. require('conn.php'); //定義一個新數組,將每條記錄賦值給新數組. $array=array(); //sql查詢語句及變量. $sql='select * from goods order by id desc'; //執行查詢語句. $query=mysqli_query($link,$sql); //獲得記錄集數據. while($info=mysqli_fetch_array($query,MYSQL_BOTH)){ array_push($array,$info); //var_dump($info); //測試行. }//while end. //將整理好的記錄集賦值給模板變量. $smarty->assign('myrow',$array); //調用模板文件. $smarty->display('index.html'); ?> ?> ~~~ *上述代碼已測試，運行正常。筆者也是寫一點代碼就運行一下，上邊的var_dump($info)就是測試行，實際應用時，將它變成了注釋。* 解析： require('文件名'),包括并運行指定文件. 　$sql='select * from goods order by id desc'; 查詢goods數據，以id字段倒序排列，將結果賦值給$sql變量。 $query=mysqli_query($link,$sql); 執行查詢,mysqli_query(連接標識符即連接變量,查詢語句) mysqli_fetch_array($query,MYSQL_BOTH)，mysqli_fetch_array(查詢結果,獲取方式) MYSQL_BOTH,表示可以使用字段號或字段名獲得內容。 while(條件){}，條件循環. while($info=mysqli_fetch_array($query,MYSQL_BOTH)),每次讀取一條記錄，循環一次，指針會自動下移一行，直到結束。 $smarty->assign('myrow',$array); 給模板變量賦值. $smarty->display('index.html');調用模板文件。 * * * * * 　　第三步：修改模板，將提取的數據填充到模板index.html中。以下是修改后的代碼： ~~~ <!doctype html> <html> <head> <meta charset="utf-8">  <title>購物車測試程序</title>  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body class="container"> <div class="col-md-12"> <hr />  <h2>購物車測試程序</h2> <hr /> </div> <div class="col-md-12"> <table class="table table-bordered" > <tr> <td> <div align="center"><img src="images/sy_2.jpg" width="980" height="75"></div> </td> </tr> <tr> <td> <div align="center"><img src="images/sy_4.jpg" width="980" height="258"></div> </td> </tr> </table> <table class="table table-bordered" > <tr> <td> <table class="table table-bordered" style="width:980px;margin: auto;"> <tr> <td > <div align="center"> {foreach from=$myrow item=data} <table width="185" border="1" style="float:left;margin-left:10px;"> <tr > <td colspan="2">圖片</td> </tr> <tr> <td>商品：</td> <td>{$data.name}</td> </tr> <tr> <td>價格：</td> <td>{$data.price}</td> </tr> <tr> <td>品牌：</td> <td>{$data.brand}</td> </tr> </table> {/foreach} </div> </td> </tr> </table> </td> </tr> </table> </div> </body> </html> ~~~ * * * * * index.html與第一步時的區別：去掉{title}和{content}變量，這樣index.php中少兩行代碼，看著更簡潔，我們的重點是學習php. 在商品table上、下分別加上了循環代碼{foreach}{/foreach} 下面解析一下{foreach} {foreach from=$myrow item=data} from屬性：指定循環的數組，此數組變量就是從index.php中傳過來的。而且指定時不用加引號。 item屬性：當前元素的變量名，可隨意命名，但最好易記且有意義。調用字段值方法{$data.字段名}，如調商品名：{$data.name}。 * * * * * 　　第四步：在入口文件(首頁)，添加“購買”和“查看購物車”鏈接。　　在原網頁代碼上稍做修改，代碼如下： ~~~ ...... <tr> <td>品牌：</td> <td>{$data.brand}</td> </tr> <tr> <td height="50" colspan="2" align="center" ><button type="button" class="btn btn-success"><a href="buy.php?id={$data.id}" style="color:#FFF">購買</a></button></td> </tr> </table> {/foreach} </div> </td> </tr> </table> </td> </tr> <tr> <td align="center"> <h3><button type="button" class="btn btn-success"><a href="shopping_cart.php" style="color:#FFF">查看購物車</a></button></h3></td> </tr> </table> ~~~ 　　解析：　< href="buy.php?id={$data.id}" style="color:#FFF">購買</>　　　　這是購買鏈接，href指定鏈接網址且帶id參數，style指定鏈接文字的顏色。注：省了a，否則此行不顯示。 <button type="button" class="btn btn-success"> 　這是bootstrap樣式，指定鏈接按鈕顏色。 * * * * * 　　OK!，入口文件即首頁就完成了（如下圖），下一步解析buy.php頁。 ![](https://box.kancloud.cn/7ef634ececa0f4b6aa70442339a8ab2e_800x512.jpg) * * * * * ## 天行健，君子當自強不息！ * * * * *