Unlimited WordPress themes, graphics, 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


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

关注我们的公众号
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.