GOOCODE - Find your code/scripts

1 In the previous article, we use HTML5 to listen to the phone in order to achieve a shaking effect. Shake the phone can be applied to many scenarios, such as a shake to change the draw, shake songs, search. In this paper, I will tell you how to use HTML5 + PHP + jQuery to achieve the effect of mobile phone shaking to change clothes.

Note that this is an integrated application of knowledge WEB article, read this premise is that you need to have a basic knowledge of HTML5, jQuery, PHP, MySQL, and other related areas.

HTML
My default page Product Information (dress a certain brand product images and text), and of course you can get product information from the database practical applications.

<div id="pro" rel="1"> 
    <p>Shaking your phone hard</p> 
    <img src="images/z1.jpg" width="300" height="300"> 
    <p>Gray</p> 
</div> 

Then load the jQuery library file in the page, and we continue to follow the previous article: "Mobile phone gravity and direction sensing applications by HTML5 - shaking effect" used in mobile phones listens shaking code: shake.js.

<script src="jquery.js"></script> 
<script src="shake.js"></script> 

jQuery
We use shake.js to detect the user's mobile phone shaking, shake when the function is called shakeEventDidOccur happen (), send an Ajax request to the background product.php, daemon returns the corresponding JSON data submitted in the request parameters. We display the corresponding product images and text information based on the data returned, to achieve the effect of change clothes.

window.onload = function() {
    var myShakeEvent = new Shake({
        threshold: 15
    });
    myShakeEvent.start();
    window.addEventListener('shake', shakeEventDidOccur, false);
    function shakeEventDidOccur () {
		var pro_id = $("#pro").attr("rel");
		$.getJSON("product.php?id="+pro_id,function(json){
			if(json.msg==1){
				$("#pro").attr("rel",json.pro.id).html('<img src="images/'+json.pro.pic+'" width="300" height="300"><p>'+json.pro.color+'</p>');
			}else{
				alert(json.msg);
			}
		});
    }
};

PHP
Background product.php submitted over ajax parameters according to the received id, query data in the database information other than the current id, access to the corresponding data sets results, and then take out a group of random centralized data from the data (because each show only one data ) to return to the front to call JSON format, see the code:

<?php 
//connect db
include_once("connect.php"); 
 
$id = intval($_GET['id']); 
if($id==0) exit; 
//query data
$query = mysql_query("select * from dress where id!='$id'"); 
$total = mysql_num_rows($query); 
$arr = array(); 
if($total==0){ 
    $arr['msg'] = 'Not enough clothes!'; 
}else{ 
    $arr['msg'] = 1; 
    while($row=mysql_fetch_array($query)){ 
        $pros[] = array( 
            'id' => $row['id'], 
            'color' => $row['color'], 
            'pic' => $row['pic'] 
        ); 
    } 
    //get random data 
    $arr['pro'] = $pros[array_rand($pros)]; 
} 
//export JSON data
echo json_encode($arr); 
?> 

Of course, this is just one instance of the application, you can optimize the development of PHP code based on the actual application, in line with your project's build quality PHP code, and finally offer mysql data table structure:

CREATE TABLE IF NOT EXISTS `dress` ( 
  `id` int(11) NOT NULL AUTO_INCREMENT, 
  `color` varchar(30) NOT NULL, 
  `pic` varchar(30) NOT NULL, 
  PRIMARY KEY (`id`) 
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ; 
 
INSERT INTO `dress` (`id`, `color`, `pic`) VALUES 
(1, 'Gray', 'z1.jpg'), 
(2, 'Purple', 'z2.jpg'), 
(3, 'Red', 'z3.jpg'), 
(4, 'Blue', 'z4.jpg');