入口文件就是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,它接收index.php中传过来的值-->
<title>{$title}</title>
<!--bootstrap.min.css样式链接-->
<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 />
<!--模板变量content-->
<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>
~~~
运行效果图：
* * * * *
第二步：编写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,它接收index.php中传过来的值-->
<title>购物车测试程序</title>
<!--bootstrap.min.css样式链接-->
<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 />
<!--模板变量content-->
<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页。
* * * * *
## 天行健，君子当自强不息！
* * * * *
