با در این پست می خواهیم روی برنامه ای کار کنیم که می تواند لرزش موبایل را تشخیص داده و طبق آن کارهایی را انجام دهد. ایده جالبی که می خواهیم با این روش پیاده کنیم این است که کاربر گوشی خود را به لرزش در بیاورد و سایت به او تخفیف دهد . این ایده برای سایت های تجاری و فروشگاه ها می تواند جالب تر باشد و حتی باعث جذب کاربران و فروش بیشتر شود .
این کار با مرورگرهای وب موبایل و سنسور شتاب سنج(accelerometer) گوشی انجام می گیرد.
جدول محصولات
در این جدول اطلاعات کلیه محصولات قرار می گیرد
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;
}
?>دانلود فایل های برنامه | پیش نمایش
سلام.
این سیستم فقط برای IOS کار میکنه؟
بسیار جالب بود مرسی