تشخیص لرزش موبایل با jQuery

در این پست می خواهیم روی برنامه ای کار کنیم که می تواند لرزش موبایل را تشخیص داده و طبق آن کارهایی را انجام دهد. ایده جالبی که می خواهیم با این روش پیاده کنیم این است که کاربر گوشی خود را به لرزش در بیاورد و سایت به او تخفیف دهد . این ایده برای سایت های تجاری و فروشگاه ها می تواند جالب تر باشد و حتی باعث جذب کاربران و فروش بیشتر شود .

این کار با مرورگرهای وب موبایل و سنسور شتاب سنج(accelerometer) گوشی انجام می گیرد.

iphone-shake

جدول محصولات

در این جدول اطلاعات کلیه محصولات قرار می گیرد

CREATE TABLE `products` (
`product_id` int AUTO_INCREMENT,
`product_name` varchar(150),
`product_img` text,
`price` float,
`discount` int,
PRIMARY KEY (`product_id`)
);

 


جاوااسکریپت

این بخش شامل تابع $.shake می شود که لرزش موبایل را تشخیص می دهد و بعد از آن تابع phoneShake() را فراخوانی می کند

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ios-shake.js"></script>
<script type="text/javascript" src="js/jquery.ui.shake.js"></script>
<script type="text/javascript">
$(document).ready(function() {

setInterval(function()
{
$('#shake').shake();
}, ۳۰۰۰);

function phoneShake()
{
var productID=$(".product_id").attr('id');
var url='ajax_discount.php';
var data='product_id='+productID;

$.ajax({
type:"POST",
url:url,
data:data,
dataType:"json",
success:function(data)
{
$('#shake').hide();
$('#result').html(data);
}
});
}

$.shake({
callback: function()
{
phoneShake();
}
});
});
</script>

PHP

شامل کدهای php می شود که اطلاعات محصولات را از دیتابیس می گیرد و نمایش می دهد

<?php
require 'db.php';
$product_id='1';
$sql = "SELECT product_name,product_img,price FROM products WHERE product_id=:product_id";

try {
$db = getDB();
$stmt = $db->prepare($sql);
$stmt->bindParam("product_id", $product_id);
$stmt->execute();
$products = $stmt->fetchAll(PDO::FETCH_OBJ);
$db = null;

foreach($products  as $row)
{
$product_name=$row->product_name;
$product_img=$row->product_img;
$price=$row->price;
}
}
catch(PDOException $e)
{ 
echo 'Connection Error';
}
?>

HTML

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
//JavaScript
</head>
<body>
<div id="<?php echo $product_id;?>" class="product_id">
<img src="<?php echo $product_img;?>" /> 
</div>
<div id="shake">Just shake your phone</div>
<div id="result"><?php echo $price;?></div>
</body>
<html>

DB.php

شامل اطلاعات مورد نیاز برای اتصال به پایگاه داده است و قبل از استفاده باید از فعال بودن ماژول php_pdo در php.ini اطمینان حاصل کنید

<?php
function getDB() {
$dbhost="localhost";
$dbuser="username";
$dbpass="password";
$dbname="database";
$dbConnection = new PDO("mysql:host=$dbhost;dbname=$dbname", $dbuser, $dbpass); 
$dbConnection->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
return $dbConnection;
}
?>

دانلود فایل های برنامه | پیش نمایش

 

در همین رابطه :   اسنیپت : روش پیدا کردن تعداد روزها و ساعت ها بین دو تاریخ مختلف

منبع

دسته بندی : jQueryPHPتجهيزات همراه

2 نظر

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

More in عكاسی
۳۲ عکس پرتره بسیار زیبا (سری سوم)

استقبال گرم شما دوستان از موضوع عکس های پرتره  باعث شد این بار نیز با گلچینی از زیباترین عکس های پرتره...

Close