0 Comments

AJAX/PHP/JQuery/CSS设计拖拉式购物车(1)

发布于:2013-07-03  |   作者:广州网站建设  |   已聚集:人围观

下边,笔者将带领大家使用PHP,JQuery和CSS和AJAX技术,去设计一个拖拉式的购物车,这个购物车的效果比较酷,当你选择好要购买的商品后,直接用鼠标拖拉到一个购物篮的图标中去,则完成一次购物的过程,跟在超市购物的过程有点相像。本文将使用MySQL数据库,并且用到了jQuery中的一个很好用的插件simpletip(地址:http://craigsworks.com/projects/simpletip/),接下来会介绍其详细的用法。
广州网站建设,网站建设,广州网页设计,广州网站设计

步骤1 建立Mysql数据库

首先,为我们的购物车应用建立如下的mysql数据库文件,下面给出表结构,并添加一些样例数据:


  1. CREATE TABLE IF NOT EXISTS `internet_shop` (  
  2.   `id` int(6) NOT NULL auto_increment,  
  3.   `img` varchar(32) collate utf8_unicode_ci NOT NULL default '',  
  4.   `name` varchar(64) collate utf8_unicode_ci NOT NULL default '',  
  5.   `description` text collate utf8_unicode_ci NOT NULL,  
  6.   `price` double NOT NULL default '0',  
  7.   PRIMARY KEY  (`id`),  
  8.   UNIQUE KEY `img` (`img`)  
  9. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;  
  10.  
  11. INSERT INTO `internet_shop` VALUES(1, 'iPod.png''iPod''The original and popular iPod.', 200);  
  12. INSERT INTO `internet_shop` VALUES(2, 'iMac.png''iMac''The iMac computer.', 1200);  
  13. INSERT INTO `internet_shop` VALUES(3, 'iPhone.png''iPhone''This is the new iPhone.', 400);  
  14. INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png''iPod Shuffle''The new iPod shuffle.', 49);  
  15. INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png''iPod Nano''The new iPod Nano.', 99);  
  16. INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png''Apple TV''The new Apple TV. Buy it now!', 300); 

这里我们只是简单地设计了商品的属性表,其中包括了商品的图片,名称,价格和描述,在实际的应用中,可能会设计更复杂的商品属性。
广州网站建设,网站建设,广州网页设计,广州网站设计

飞机