PHP + MySQL 学习笔记（八）--- MySQL+ PHP+Javascript + jQuery 设计一个简单的 --在线店面

最新推荐文章于 2022-10-29 12:07:17 发布

READ LEE

最新推荐文章于 2022-10-29 12:07:17 发布

阅读量460

点赞数

文章标签： mysql php jquery html

本文链接：https://blog.csdn.net/weixin_45889834/article/details/112298841

版权

创建在线店面

将学到：

如何为在线商店创建关系表
如何创建脚本以显示商店类别
如何创建脚本以显示单个项目
如何创建JavaScript以增强店面

在本文中，将创建一个通用的在线店面。使用的示例代表完成这些任务的许多不同可能性之一，并且旨在提供知识的基础，而不是完成任务的确定方法。还将获得一些有关如何使用JavaScript来使店面更易于使用和对用户更具吸引力的想法。

规划和创建数据库表

在处理为在线商店创建数据库表的过程之前，请考虑现实生活中的购物过程。当走进商店时，商品会以某种方式订购：硬件和婴儿服装没有混合在一起，电子产品和洗衣粉不是并排的，依此类推。将这些知识应用于数据库规范化，可以看到需要一个表来保存类别，并且需要一个表来保存项目。在这个简单的商店中，每个项目都属于一个类别。
接下来，考虑一下项目本身。根据拥有的商店的类型，商品可能带有或不带有颜色，以及可能带有或没有尺寸。但是所有的物品都会有一个名称，描述和价格。
同样，从规范化角度考虑，可以想象您可能有一个常规项目表和两个与常规项目表相关的其他表。

表20.1显示了用于在线店面的示例表和字段名称。创建实际的SQL语句，但首先应查看此信息并尝试查看关系。问问自己哪个字段应该是主键或唯一键。**
在这里插入图片描述

如下面的SQL语句所示，store_categories 表除了 id 字段外还有两个字段：cat_title 和 cat_desc，分别用于标题和描述。 id 字段是主键，cat_title 是唯一字段，因为没有理由将拥有两个相同的类别：

CREATE TABLE store_categories (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,    
    cat_title VARCHAR (50) UNIQUE,    cat_desc TEXT
);

接下来，我们处理 store_items 表，该表除了 id 字段外还有五个字段-都不是唯一键。字段定义中指定的长度是任意的；您应该使用最适合您商店的东西。

cat_id 字段将项目与 store_categories 表中的特定类别相关。此字段不是唯一字段，因为您希望每个类别中包含多个项目。
item_title，item_price，和item_desc（用于描述）字段是不言自明的。
item_image字段包含一个文件名（在这种情况下，假定该文件在您的服务器本地），该文件名用于在显示项目信息时用于构建HTML 标记：

CREATE TABLE store_items (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    cat_id INT NOT NULL,
    item_title VARCHAR (75),
    item_price FLOAT (8,2),
    item_desc TEXT,
    item_image VARCHAR (50)
);

store_item_size 和store_item_color 表均包含可选信息：如果出售书籍，它们将没有尺寸或颜色，但是如果出售衬衫，它们将具有尺寸或颜色。对于每个表，item_id，item_size 和 item_color 字段都不是唯一键，因为可以根据需要将多个颜色和大小与特定项目关联：

CREATE TABLE store_item_size (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    item_id INT NOT NULL,
    item_size VARCHAR (25)
);
CREATE TABLE store_item_color (
    id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
    item_id INT NOT NULL,
    item_color VARCHAR (25)
);

这些是基本店面（即用于显示要出售的商品）所必需的所有表格。
现在，需通过 MySQL 监视器或其他界面发出 MySQL 查询即可向表中添加信息。如果想跟样本数据一起使用，下面是一些示例。

将记录插入到store_categories表中

以下查询在您的计算机中创建了三个类别
store_categories 表（帽子，衬衫和书籍）：

INSERT INTO store_categories VALUES
(1, 'Hats', 'Funky hats in all shapes and sizes!');
INSERT INTO store_categories VALUES (2, 'Shirts', 'From t-shirts to
sweatshirts to polo shirts and beyond.');
INSERT INTO store_categories VALUES (3, 'Books', 'Paperback,
hardback,
books for school or play.');

以下查询将三个项目记录添加到每个类别。随意地添加更多。

INSERT INTO store_items VALUES (1, 1, 'Baseball Hat', 12.00,
'Fancy, low-profile baseball hat.', 'baseballhat.gif');
INSERT INTO store_items VALUES (2, 1, 'Cowboy Hat', 52.00,
'10 gallon variety', 'cowboyhat.gif');
INSERT INTO store_items VALUES (3, 1, 'Top Hat', 102.00,
'Good for costumes.', 'tophat.gif');
INSERT INTO store_items VALUES (4, 2, 'Short-Sleeved T-Shirt',
12.00, '100% cotton, pre-shrunk.', 'sstshirt.gif');
INSERT INTO store_items VALUES (5, 2, 'Long-Sleeved T-Shirt',
15.00, 'Just like the short-sleeved shirt, with longer sleeves.',
'lstshirt.gif');
INSERT INTO store_items VALUES (6, 2, 'Sweatshirt', 22.00,
'Heavy and warm.', 'sweatshirt.gif');
INSERT INTO store_items VALUES (7, 3, 'Jane\'s Self-Help Book',
12.00, 'Jane gives advice.', 'selfhelpbook.gif');
INSERT INTO store_items VALUES (8, 3, 'Generic Academic Book',
35.00, 'Some required reading for school, will put you to sleep.',
'boringbook.gif');
INSERT INTO store_items VALUES (9, 3, 'Chicago Manual of Style',
9.99, 'Good for copywriters.', 'chicagostyle.gif');

注意
前面的查询引用了代码中未包含的各种图形。在线查找免费使用的图像，也可以制作一些占位符图形。

将记录插入到store_item_size表中

以下查询将尺寸与“衬衫”类别中的三个项目之一相关联，并将通用的“一个尺寸适合所有”尺寸与每个帽子（假设它们是奇怪的帽子）相关联。可以自行为衬衫类别中的其余项目插入相同的尺寸关联集：

INSERT INTO store_item_size (item_id, item_size) VALUES (1,'One Size
Fits All');
INSERT INTO store_item_size (item_id, item_size) VALUES (2,'One Size
Fits All');
INSERT INTO store_item_size (item_id, item_size) VALUES (3,'One Size
Fits All');
INSERT INTO store_item_size (item_id, item_size) VALUES (4,'S');
INSERT INTO store_item_size (item_id, item_size) VALUES (4,'M');
INSERT INTO store_item_size (item_id, item_size) VALUES (4,'L');
INSERT INTO store_item_size (item_id, item_size) VALUES (4,'XL');

将记录插入到store_item_color表中

以下查询将颜色与“衬衫”类别中的三个项目之一相关联。自行插入其余衬衫的颜色记录。

INSERT INTO store_item_color (item_id, item_color) VALUES (1,'red');
INSERT INTO store_item_color (item_id, item_color) VALUES (1,'black');
INSERT INTO store_item_color (item_id, item_color) VALUES (1,'blue');

显示项目类别

这个项目中最困难的任务现在已经完成。与思考类别和项目相比，创建用于显示信息的脚本很容易！
您制作的第一个脚本是列出类别和项目的脚本。
显然，不想让用户一走进门就立即列出所有类别和所有项目，但是想让用户选择立即选择一个类别，查看其项目然后选择另一个类别。换句话说，此脚本有两个用途：显示类别；然后，如果用户单击类别链接，它将显示该类别中的项目。
清单20.1显示了 seestore.php 的完整代码。这些项目都是基础CRUD的示例，代表创建，读取，更新，删除，应用程序。即使这样，仍会在列表后详细解释该代码。

LISTING 20.1 Script to View Categories 用于查看类别的脚本
seestore.php

1:  <?php
2:  //connect to database
3:  $mysqli = mysqli_connect("localhost", "testuser", "somepass", "testDB");
4:
5:  $display_block = "<h1>My Categories</h1>
6:  <p>Select a category to see its items.</p>";
7:
8:  //show categories first
9:  $get_cats_sql = "SELECT id, cat_title, cat_desc FROM
10:                  store_categories ORDER BY cat_title";
11: $get_cats_res =  mysqli_query($mysqli, $get_cats_sql)
12:                  or die(mysqli_error($mysqli));
13:
14: if (mysqli_num_rows($get_cats_res) < 1) {
15:      $display_block = "<p><em>Sorry, no categories to browse.</em></p>";
16: } else {
17:     while ($cats = mysqli_fetch_array($get_cats_res)) {
18:         $cat_id  = $cats['id'];
19:         $cat_title = strtoupper(stripslashes($cats['cat_title']));
20:         $cat_desc = stripslashes($cats['cat_desc']);
21:
22:         $display_block .= "<p><strong><a href=\"".$_SERVER['PHP_SELF'].
23:         "?cat_id=".$cat_id."\">".$cat_title."</a></strong><br>"
24:         .$cat_desc."</p>";
25:
26:         if (isset($_GET['cat_id']) && ($_GET['cat_id'] == $cat_id)) {
27:            //create safe value for use
28:            $safe_cat_id = mysqli_real_escape_string($mysqli,
29:                  $_GET['cat_id']);
30:
31:            //get items
32:            $get_items_sql = "SELECT id, item_title, item_price
33:                              FROM store_items WHERE
34:                              cat_id = '".$cat_id."' ORDER BY item_title";
35:            $get_items_res = mysqli_query($mysqli, $get_items_sql)
36:                             or die(mysqli_error($mysqli));37:
38:            if (mysqli_num_rows($get_items_res) < 1) {
39:                  $display_block = "<p><em>Sorry, no items in
this
40:                  category.</em></p>";
41:            } else {
42:                  $display_block .= "<ul>";
43:                  while ($items = mysqli_fetch_array($get_items_res)) {
44:                      $item_id  = $items['id'];
45:                      $item_title = stripslashes($items['item_title']);
46:                      $item_price = $items['item_price'];
47:
48:                      $display_block .= "<li><a href=\"showitem.php?item_id=".
49:                      $item_id."\">".$item_title."</a>
50:                      (\$".$item_price.")</li>";
51:                  }
52:
53:                  $display_block .= "</ul>";
54:             }
55:             //free results
56:             mysqli_free_result($get_items_res);
57:         }
58:      }
59:   }
60: 
61: //free results
62: mysqli_free_result($get_cats_res);
63: //close connection to MySQL
64: mysqli_close($mysqli);
65: ?>
66: <!DOCTYPE html>
67: <html lang="en">
68: <head>
69:   <title>My Categories</title>
70: </head>
71: <body>
72:   <?php echo $display_block; ?>
73: </body>
74: </html>

第3行打开数据库连接，因为无论脚本采取哪种操作（显示类别或显示类别中的项），数据库都是必需的。您也可以使用include来使用数据库连接功能，第 5 行开始 $ display_block 字符串，并在其中添加了一些基本页面标题信息。第 9-12 行创建并发出查询以检索类别信息。第 14 行检查类别；如果该表中没有任何内容，则会在 $ display 块变量中存储一条消息，以供用户显示，而这正是该脚本所做的一切。（释放了一些数据库结果后，它跳到了第 66 行的HTML并显示在屏幕上。）但是，如果找到类别，该脚本将移至第 17 行，这开始了一个while循环以提取信息。

在 while 循环中，第 18-20 行检索类别的 ID，标题和描述。执行字符串操作以确保文本中没有斜杠，并且类别标题以大写显示。第 22-24 行将类别信息（包括自引用页面链接）放置在 $ display_block 字符串中。如果用户单击该字符串显示的链接，则除了返回查询字符串中传递的类别 ID 之外，她将返回此脚本。该脚本在第 26 行中检查该值。
如果由于用户单击类别链接以希望看到列出的项目而将 $ _GET [‘cat_id’] 值传递给脚本（并已验证为有效ID），则该脚本将使用安全的密码生成并发出另一个查询该值的版本（第32–36行）以检索类别中的项目。第 38–51 行检查项目，然后构建项目字符串，作为 $ display_block 的一部分。字符串中的部分信息是指向脚本 showitem.php 的链接，该脚本将在下一部分中创建。
达到这一点之后，该脚本除了释放一些资源外就无所事事，它会打印 HTML和 $ display_block 的值。图20.1显示了直接访问脚本时的结果。
在这里插入图片描述

图20.1仅显示类别信息
商店中的类别。

在图20.2中，用户单击HATS链接时会发生什么：
该脚本收集与类别关联的所有项目，并将它们打印在屏幕上。用户仍然可以跳到同一页面上的另一个类别，脚本将收集该类别的项目。
在这里插入图片描述
图20.2
商店中某个类别内的商品。

显示项目

接下来将要建立的项目显示页面显示了存储在数据库中的项目的所有信息。清单20.2显示了showitem.php的代码。

LISTING 20.2用于查看项目信息的脚本
showitem.php

1:  <?php
2:  //connect to database
3:  $mysqli = mysqli_connect("localhost", "testuser", "somepass", "testDB");
4:
5:  $display_block = "<h1>My Store - Item Detail</h1>";
6:
7:  //create safe values for use
8:  $safe_item_id = mysqli_real_escape_string($mysqli, $_GET['item_id']);
9:
10: //validate item
11: $get_item_sql = "SELECT c.id as cat_id, c.cat_title, si.item_title,
12:                  si.item_price, si.item_desc, si.item_image FROM store_items
13:                  AS si LEFT JOIN store_categories AS c on c.id = si.cat_id
14:                  WHERE si.id = '".$safe_item_id."'";
15: $get_item_res = mysqli_query($mysqli, $get_item_sql)
16:                 or die(mysqli_error($mysqli));
17:
18: if (mysqli_num_rows($get_item_res) < 1) {
19:     //invalid item
20:     $display_block .= "<p><em>Invalid item selection.</em></p>";
21: } else {
22:     //valid item, get info
23:     while ($item_info = mysqli_fetch_array($get_item_res)) {
24:         $cat_id = $item_info['cat_id'];
25:         $cat_title =strtoupper(stripslashes($item_info['cat_title']));
26:         $item_title = stripslashes($item_info['item_title']);
27:         $item_price = $item_info['item_price'];
28:         $item_desc = stripslashes($item_info['item_desc']);
29:         $item_image = $item_info['item_image'];
30:     }
31:
32:    //make breadcrumb trail & display of item
33:    $display_block .= <<<END_OF_TEXT
34:    <p><em>You are viewing:</em><br>
35:    <strong><a href="seestore.php?cat_id=$cat_id">$cat_title</a>
36:       &gt; $item_title</strong></p>
37:    <div style="float: left;"><img src="$item_image" alt="$item_title"></div>
38:    <div style="float: left; padding-left: 12px">
39:    <p><strong>Description:</strong><br>$item_desc</p>
40:    <p><strong>Price:</strong> \$$item_price</p>
41: END_OF_TEXT;
42:    //free result
43:    mysqli_free_result($get_item_res);
44:
45:    //get colors
46:    $get_colors_sql = "SELECT item_color FROM store_item_color WHERE
47:                       item_id = '".$safe_item_id."' ORDER BY item_color";
48:    $get_colors_res = mysqli_query($mysqli, $get_colors_sql)
49:                      or die(mysqli_error($mysqli));
50:
51:    if (mysqli_num_rows($get_colors_res) > 0) {
52:        $display_block .= "<p><strong>Available Colors:</strong> <br>";
53:        while ($colors = mysqli_fetch_array($get_colors_res)) {
54:            item_color = $colors['item_color'];
55:            $display_block .= $item_color."<br>";
56:        }
57:    }
58:    //free result
59:    mysqli_free_result($get_colors_res);
60:
61:    //get sizes
62:    $get_sizes_sql = "SELECT item_size FROM store_item_size WHERE
63:                     item_id = ".$safe_item_id." ORDER BY item_size";
64:    $get_sizes_res = mysqli_query($mysqli, $get_sizes_sql)
65:                     or die(mysqli_error($mysqli));
66:
67:    if (mysqli_num_rows($get_sizes_res) > 0) {
68:       $display_block .= "<p><strong>Available Sizes:</strong> <br>";
69:       while ($sizes = mysqli_fetch_array($get_sizes_res)) {
70:           $item_size = $sizes['item_size'];
71:           $display_block .= $item_size."<br>";
72:       }
73:    }
74:    //free result
75:    mysqli_free_result($get_sizes_res);
76:
77:    $display_block .= "</div>";
78: }
79: //close connection to MySQL
80: mysqli_close($mysqli);
81: ?>
82: <!DOCTYPE html>
83: <html lang="en">
84: <head>
85:   <title>My Store</title>
86: </head>
87: <body>
88:   <?php echo $display_block; ?>
89: </body>
90: </html>

第 3 行建立数据库连接，因为数据库中的信息构成了该页面的所有内容。第 5 行从 $ display_block 字符串开始，带有一些基本的页面标题信息。
第 11–13 行使用第 8 行中创建的安全值创建并发出查询以检索类别和项目信息。此特定查询是表联接。无需从一个表中选择项目信息，然后发出第二个查询以查找类别名称，此查询只需在类别 ID 上加入表以查找类别名称。
第 15 行检查结果；如果表格中没有匹配的项目，则会向用户显示一条消息，而这正是该脚本所做的。但是，如果找到了项目信息，脚本将继续运行并在第 23-30 行中收集信息。

在第34至36行中，首先创建了一个面包屑路径。这只是一个导航设备，用于返回体系结构中的顶级项目。换句话说，将打印一个链接，以便用户可以返回到类别。从此脚本的主查询中检索到的类别 ID 将附加到面包屑跟踪中的链接。在第 37-40 行中，续添加到 $ display_block 中，以设置有关该项目的信息的显示。可以使用在第 23-30 行中收集的值来创建图像链接，打印说明并打印价格。

缺少的是颜色和大小，因此第 46–57 行选择并打印与此项目相关的任何颜色，而第 62–73 行收集与该项目相关的大小。
第 77–78 行包含 $ display_block 字符串和 master if … else语句。由于关闭与MySQL的连接后该脚本无事可做，因此它会打印HTML（第82–90行），包括 $ display_block 的值。图20.3显示了该脚本在以下情况下的结果：
棒球帽是从帽子类别中选择的。当然，显示器将与实际显示器有所不同，在这里插入图片描述
图20.3
棒球帽项目页面。
这就是创建简单的项目显示并将信息从数据库中拉出的全部内容。

在

在线店面中使用JavaScript

在线商店面临的最大挑战之一就是说服客户在网站上停留足够长的时间来购买商品。每次客户必须采取行动时，他们都有机会放弃购买。为避免这种情况，许多在线商店都显示了尽可能多的信息，而无需客户采取任何其他措施（仅单击“购买”按钮除外）。
在创建的简单商店目录界面中，客户可以执行以下几个步骤来购买商品：客户必须选择一个类别，然后选择该商品，然后选择大小和颜色，然后单击以进行购买。或添加到购物车（后者不在本章范围之内）。通过仅删除这些步骤之一，可以降低放弃率并增加销售。一种简单的方法是使用直接显示的项目而不是单击后的幻灯片显示重新设计类别列表。图20.4显示了如果将显示更改为JavaScript幻灯片显示（又称为轮播），商店可能会如何变化。

在这里插入图片描述
FIGURE 20.4
The store using carousels for the categories

尽管您可以使用JavaScript从头开始创建自己的轮播，但是有许多免费和开源选项更易于使用。对于此示例，可在https://github.com/KevinBatdorf/liquidslider 中找到的 Kevin Batdorf 的 Liquid Slider。该滑块具有响应性的优点，并且可以包括标题选项卡以及滑块箭头，以使轮播更加可用。

要使用此滑块库，必须下载库文件并将其放在Web服务器上，然后在脚本中引用它们。通常，当您使用第三方库时，它们将包括入门文档，并且此特定的幻灯片库也不例外-在
https://github.com/KevinBatdorf/liquidslider，您将找到下载，
安装和样本使用说明。

下载该库并将其放在Web服务器文档根目录中的liquidslider目录之后，然后修改了seestore.php脚本，以幻灯片形式直接在类别页面上显示项目。清单20.3显示了这个新脚本。

LISTING 20.3 Store Modified to Use a Slideshow
seestore.php（new)

1:  <?php
2:  //connect to database
3:  $mysqli = mysqli_connect("localhost", "testuser", "somepass", "testDB");
4:
5:  $display_block = "<h1>My Categories</h1>
6:  <p>Scroll through the items in each category.</p>";
7:
8:  //show categories first
9:  $get_cats_sql = "SELECT id, cat_title, cat_desc FROM store_categories
10:                   ORDER BY cat_title";
11:  $get_cats_res =  mysqli_query($mysqli, $get_cats_sql)
12:                   or die(mysqli_error($mysqli));
13:
14:  if (mysqli_num_rows($get_cats_res) < 1) {
15:    $display_block = "<p><em>Sorry, no categories to browse.</em> </p>";
16:  } else {
17:     while ($cats = mysqli_fetch_array($get_cats_res)) {
18:          $cat_id  = $cats['id'];
19:          $cat_title = strtoupper(stripslashes($cats['cat_title']));
20:          $cat_desc = stripslashes($cats['cat_desc']);
21:
22:          $display_block .= "<h2>".$cat_title." </h2>\n<p>".$cat_desc."</p>";
23:
24:          //get items
25:          $get_items_sql = "SELECT id, item_title, item_price, item_desc,
26:             item_image FROM store_items WHERE cat_id = '".$cat_id."'
27:             ORDER BY item_title";
28:          $get_items_res = mysqli_query($mysqli, $get_items_sql)
29:                           or die(mysqli_error($mysqli));
30:
31:          if (mysqli_num_rows($get_items_res) < 1) {
32:             $display_block = "<p><em>Sorry, no items in this category.</em></p>";
33:          } else {
34:             $display_block .= "<section class=\"liquid-slider\"
35:                                id=\"main-slider-".$cat_id."\">";
36:
37:             while ($items = mysqli_fetch_array($get_items_res)){
38:                 $item_id  = $items['id'];
39:                 $item_title = stripslashes($items['item_title']);
40:                 $item_price = $items['item_price'];
41:                 $item_img = $items['item_image'];
42:                 $item_desc = $items['item_desc'];
43:
44:                 $display_block .= <<<END_OF_TEXT
45:  <div>
46:  <h2 class="title">$item_title</h2>
47:  <p>
48:  <img src="$item_img" alt="$item_title" style=" float: left;
49:            margin-right:0.5rem;">
50:  $item_desc
51:  </p>
52:  <p>Price: \$$item_price</p>
53:  <p><a href="seestore.php?cat_id=$cat_id"><button id="">Buy Now</button></a></p>
54:  </div>
55:  END_OF_TEXT;
56:            }
57:
58:            $display_block .= <<<END_OF_TEXT
59: </section>
60: <script type="text/javascript">
61: $(function(){
62:   $('#main-slider-$cat_id').liquidSlider({
63:     dynamicTabs: false,
64:     hoverArrows: false
65:   });
66: });
67: </script>
68: END_OF_TEXT;
69:
70:     }
71:     //free results
72:     mysqli_free_result($get_items_res);
73:  }
74: }
75:
76: //free results
77: mysqli_free_result($get_cats_res);
78:
79: //close connection to MySQL
80: mysqli_close($mysqli);81: ?>
82: <!DOCTYPE html>
83: <html lang="en">
84: <head>
85:   <title>My Categories</title>
86:   <link rel="stylesheet" href="liquidslider/css/liquid-slider.css">
87:  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min. js"></script>
88:  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
89:  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.18/jquery.touchSwipe.min.js"></script>
90:   <script src="liquidslider/js/jquery.liquid-slider.min.js"></script>
91: </head>
92: <body>
93:    <?php echo $display_block; ?>
94: </body>
95: </html>

浏览清单20.3中的代码时，看到清单20.1的许多更改。在第6行，介绍性文本更改为指示可以通过滚动浏览每个类别中的项目。在第22行中显示每个类别的标题和描述之后，直接转到SQL语句以获取该类别中的所有项目，因为无需像以前一样“点击”后端请求就可以“打开”该类别。
在第34至35行中，放置了一个新的HTML元素；此元素将保存将通过获取项目结果并将其显示在第44-55行中创建的《div》中的内容，然后将要构建的滑块内容。现在，该《div》包括所有项目信息，以便用户在滚动显示的单个页面时可以看到它。在第58-68行中，当用户单击将在页面上显示的箭头之一时，滑块脚本已初始化并可以执行操作。
在第81行中完成PHP代码之后，对HTML的第86–90行进行了一些更改。在这些行中，您链接到滑块的CSS文件以及完成该功能所必需的其他一些脚本库。在本文中，
1.将基本的PHP和MySQL知识应用于了店面的创建。显示。
2.学习了如何创建数据库表和脚本来查看类别，项目列表和单个项目。
3.还看到了如何集成第三方JavaScript库来调整页面显示和与客户交互的方式，从而使整个应用程序更加实用和吸引人。

PHP EOT

在这里插入图片描述