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