تشخیص لرزش موبایل با 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;
}
?>

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

 

در همین رابطه :   فرم ثبت نام حرفه ای با PHP/jQuery به صورت AJAX

منبع

2 Comments

پاسخ دهید

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

More in HTML 5
دانلود رایگان ۱۰ قالب واکنش گرای Bootstrap

خوشبختانه خیلی از توسعه دهندگان و طراحان قالب هستند که قالب های وب سایت زیبا و رایگانی را طراحی و...

Close