Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. PHP
Code

使用PHP和MySQL构建购物车功能

by
Difficulty:AdvancedLength:LongLanguages:

Chinese (Simplified) (中文(简体)) translation by Fuhuan (you can also view the original English article)

关于本周的视频教程,我们将教你如何使用PHP和MySQL的构建自己的购物车功能。 你会发现,它并不像你想象的那么困难。


截屏预览



步骤1

我们先看看文件结构:


结构体

  • reset.css - 你可以从这个链接重置
  • style.css - 我们自己的css文件,我们将用它来设计我们的HTML标记
  • connection.php - 将使我们的数据库连接的文件
  • connection.php - 将使我们的数据库连接的文件
  • cart.php - 可以从购物车功能中更改产品的文件(添加,删除)
  • products.php - 产品列表页面

第2步

我们将首先编写html标记,然后对其进行设计。 所以打开index.php并复制/粘贴下面的代码:

正如你所看到的,我们的页面有两列:主列和侧栏。 正如你所看到的,我们的页面有两列:主列和侧栏。 打开文件style.css并输入下面的代码:

打开文件style.css并输入下面的代码:



全屏显示



全屏显示

在我们转到PHP / MySQL之前,我们需要创建数据库。 所以打开phpMyadmin并按照下列步骤操作:

  1. 转到权限选项卡,单击添加新用户按钮,然后使用以下设置:用户名:教程; 主机:localhost; 密码:supersecretpassword ;. 现在确保已设置全局权限; 然后继续下一步。
  2. supersecretpassword ;. 现在确保已设置全局权限; 然后继续下一步。
  3. 创建一个名为products的新表,并将字段数设置为4.现在填充这些字段,以便你具有:id_integer - 确保将其设置为INT并将其标记为PRIMARY(也将其设置为auto_increment); 名称 - 使其长度为100的VARCHAR; 描述 - 长度为250的VARCHAR; 价格 - 确保它设置为DECIMAL(2,6)
  4. 用一些示例产品填充表格

为了节省一些时间,我导出了我的产品表,以便你可以简单地运行以下查询:





步骤4

在我们开始从数据库提取数据之前,我会将我的index.php作为产品列表和购物车功能的模板。 因此,将以下代码添加到index.php页面的顶部:

  1. session_start() - 这是供以后使用; 它将允许我们实际使用会话(在将任何其他数据发送到浏览器之前写入session_start至关重要)。
  2. 在第二行中,我们包含connection.php,它将建立与数据库的连接(我们将在一秒钟内处理这个问题)。 还有一件事:include和require的区别在于,如果使用require并且找不到文件,那么脚本执行将会结束。 如果你使用“包含”,该脚本将继续工作。
  3. 除了将整个html代码(链接指向css,指向js)复制到网站中的每个文件之外,你都可以将它们全部相对于单个文件。 首先,我检查是否有一个名为“页面集”的GET变量。 如果不是,我将创建一个名为_pages的新变量。 如果首先设置名为页面的GET变量,那么我想确保我要包含的文件是有效的页面。

为了使这项工作,我们需要包括该文件; 将此行添加到ID为“main”的div之间的index.php中:

现在这里是我们现在完整的index.php:


我们创建与MySQL的连接。 打开connections.php并键入以下内容:


第5步

现在是编写产品页面标记的时候了。 所以继续打开它并键入以下内容:

我们来看看这个页面:


正如你所看到的,这很丑陋。 所以让我们通过添加这个额外的CSS来设计它。

所以让我们通过添加这个额外的CSS来设计它。


看起来好多了,你不觉得吗? 下面你有完整的style.css代码:


第6步

在我们从数据库中提取产品之前,让我们从表格中删除最后2个表格行(我们只用它来查看我们的表格的样子)。 删除这个:

又完成了一大步! 现在在表格行所在的位置输入以下PHP代码:

  1. 因此,首先我们使用SELECT来检索产品,然后我们从数据库中循环每一行,并将其回显到表格行中的页面。
  2. 你可以看到锚点链接到同一页面(当用户单击将其添加到购物车功能/会话中的产品的锚点时)。 我们只是传递一些额外的变量,如产品的ID。

如果你将某个添加到购物车功能链接悬停,则可以在页面底部看到产品的ID已通过。



第7步

让我们通过在页面顶部添加以下代码来实现锚点的工作:

  1. 如果设置了名为action的GET变量并且它的值是ADD,那么我们执行代码。
  2. 我们确保通过GET变量的id是一个整数
  3. 如果产品的ID在购物车功能SESSION中,我们只需将其数量增加1
  4. 如果id不在会话中,我们需要确保通过GET变量的id存在于数据库中。 如果是这样,我们抓住价格并创建会话。 如果没有,我们设置一个名为message的变量来保存我们的错误。

让我们来检查一下这个消息变量是否已经设置并且将它回显给页面(在H1页面标题下键入这个代码):

在这里你可以看到完整的products.php页面。

如果产品的ID无效,则会显示错误消息



第8步

让我们回到index.php并构建边栏。 添加下面的代码:

  1. 首先我们检查购物车是否已设置。 如果不是,我们会显示该消息,提醒用户该购物车是空的。
  2. 接下来我们创建一个mysql SELECT,但我们只选择会话中存在的产品。 为了做到这一点,我们使用foreach函数。 因此,我们正在循环会话并将产品ID添加到SELECT。 接下来,我们使用substr函数从SELECT中删除最后一个逗号。
  3. 最后,我们将数据输出到浏览器。

看看下面的图片:



由于index.php是所有文件的模板,因此边栏也将在cart.php中可见。 这不是很酷吗?!


第9步

最后,打开cart.php并键入以下代码:

最后,打开cart.php并键入以下代码: 你应该注意到,不是在表单中显示数量,现在它显示在输入框中(以便我们可以更改数量)。 此外,该表格还被封装在一个表单标签中。要获取这些项目的总价格,我们会将特定产品(来自会话)ID的数量与其价格相乘。 这是在每个循环中完成的。

注意:输入是一个数组,键是产品的ID,数量是数量值。



第10步

我们需要做的最后一步是使表单工作。 因此,将此代码添加到cart.php页面的顶部。

  1. 首先我们检查表单是否被提交。 如果已提交并且输入值为零,则我们取消设置该会话。
  2. 如果该值是任何其他值,我们将该数量设置为该值。

这里是完整的cart.php


我希望你喜欢这个教程。 如果你有任何问题,可以观看更深入的视频教程!或在下方提出!

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.