تو این قسمت برای شما اسکریپت سیستم نظرسنجی را قرار دادیم که  توی این اسکریپت از PHPو MYSQL و JQuery و AJAX بهره میبریم تا یه اسکریپت کاملا حرفه ای رو آماده کنیم،پس با ما همراه باشید.

خوب توی مرحله اول به سه تا جدول نیاز داریم؛چرا سه تا جدول ؟ خوب یه جدول سوالات نظر سنجی رو توی خودش نگهداری میکنه و جدول دومی پاسخ های سوالات رو توی خودش داره و جدول سومی هم برای ثبت IP کاربران هست که از رای دادن دوباره با یک IP جلوگیری کنیم که کمک میکنه نظرسنجی بهتر و قابل اعتماد تری داشته باشیم.

کد SQL برای جدول اول که ما اینجا اسمشو میذاریم question :

۱    CREATE TABLE IF NOT EXISTS `question` (
۲     `id` bigint(20) NOT NULL AUTO_INCREMENT,
۳     `title` varchar(500) COLLATE utf8_bin NOT NULL,
۴     PRIMARY KEY (`id`)
۵    )

توی این جدول دو تا فیلد داریم یکی فیلد ID که لازمه هر جدوله و یکی هم فیلد title که عنوان نظر سنجی توش قرار میگیره.

کد SQL برای جدول جواب ها و ثبت رای کاربران که اسمشو گذاشتیم answers :

۱    CREATE TABLE IF NOT EXISTS `answers` (
۲     `id` bigint(20) NOT NULL DEFAULT ‘0’,
۳     `title` varchar(500) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL,
۴     `number` bigint(20) NOT NULL,
۵     `q_id` bigint(20) NOT NULL,
۶     PRIMARY KEY (`id`),
۷     KEY `q_id` (`q_id`)
۸    )

توی این جدول هم فیلد های ID و title برای برای عنوان جواب و فیلد number برای تعداد پاسخ های این جواب و فیلد q_id برا نگهداری شناسه سوال که درو اقع مشخص میکنه این جواب مربوط به این سوال هست،ما توی این جدول علاوه بر اینکه فیلد ID رو به عنوان کلید اصلی قرار دادیم،فیلد q_id رو هم به عنوان Index گذاشتیم تا توی کوئری هایی که با q_id سروکار داره سریعتر عمل کنه.

کد SQL برای جدول ثبت IP کاربران اسمشو گذاشتیم polls :

۱    CREATE TABLE IF NOT EXISTS `polls` (
۲     `id` bigint(20) NOT NULL AUTO_INCREMENT,
۳     `q_id` bigint(20) NOT NULL,
۴     `ip` varchar(20) NOT NULL,
۵     `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
۶     PRIMARY KEY (`id`),
۷     KEY `q_id` (`q_id`,`ip`)
۸    )

خوب تو این جدول همه فیلد ID و فیلد q_id برای نگهدرای شناسه سوال (دوستان عزیز توجه داشته باشند شناسه سوال در اینجا به عنوان شناسه نظر سنجی هم برای عمل میکنه)،فیلد ip برای نگهداری IP کاربری که رای داده و date هم برای نگهدرای تاریخ و ساعت رای کاربر(تیو phpMyAdmin اگه نوع فیلد رو TIMESTAMP قرار بدید خودش به صورت اتوماتیک تاریخ و ساعت لحظه پردازش رو وارد میکنه).

خوب اینم از ساختار و فیلد های جدول ها ما؛
قسمت HTML

توب فایل index.php قسمت فرم و ظاهر نظر سنجی رو طراحی میکنیم.

۱    <?php
۲    require_once ‘config/database.php’;
۳    ?>
۴    <!DOCTYPE html>
۵    <html>
۶     <head>
۷     <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
۸     <title>Poll System</title>
۹     <link rel=”stylesheet” href=”js/style.css”>
۱۰     <script type=”text/javascript” src=”js/jquery-1.9.1.min.js”></script>
۱۱     <script type=”text/javascript” src=”js/ajaxreq.js”></script>
۱۲     </head>
۱۳     <body >
۱۴     <div >
۱۵     <div id=”loader”>
۱۶
۱۷     </div>
۱۸     <?php
۱۹     global $db;
۲۰     $db->connect();
۲۱     $result=$db->query(“SELECT * FROM question WHERE id=1 LIMIT 1”);
۲۲     while($row=$db->fetch_array($result)){
۲۳     echo ‘<p>’.$row[‘title’].'</p>’;
۲۴     $result=$db->query(“SELECT * FROM answers WHERE q_id='{$row[‘id’]}'”);?>
۲۵     <form action=”” method=”post” >
۲۶     <div>
۲۷     <input type=”hidden” id=”question_id” value=”<?php echo $row[‘id’]; ?>”>
۲۸     <?php
۲۹     while($ans=$db->fetch_array($result)){
۳۰     ?>
۳۱     <p ><input type=”radio” value=”<?php echo $ans[‘id’]; ?>” name=”group”>&nbsp<?php echo $ans[‘title’]; ?></p>
۳۲     <?php
۳۳     }
۳۴     }
۳۵     $db->disconnect();
۳۶     ?>
۳۷
۳۸     </div>
۳۹
۴۰     </form>
۴۱     <p>
۴۲     <a href=”javascript:void(0);” id=”send”>ثبت نظر</a>
۴۳     <a href=”javascript:void(0);” id=”results”>نمایش نتایج</a>
۴۴     </p>
۴۵
۴۶     </div>
۴۷
۴۸     </body>
۴۹    </html>

ما مثل همیشه از کلاسی که توی پروژه های قبلی ازش استفاده میکردیم هم همین جا استفاده میکنیم و تیو خط اول اونو فراخوانی کردیم (تنظیمات دیتابیس حتما توی فایل config.php انجام بشه).

قسمت HTML که توضیح خاصی نداره فقط اون کد های جاوا اسکریپت رو که اضافه کردیم بعدا میگیم باهاشون چکار داریم.توی قسمت PHP که نوشتیم با دستور global $db متغییر db رو از فایل database که اون بالا اضافه اش کردیم رو فراخوانی کردیم (چون از قبل برای راحتی کار همون جا تعریف شده)،خوب باس ایتفاده از متد ها کلاسی که داریم به بانک وصل شدیم و اولین سوال نظرسنجی رو فراخونی کردیم و نشون دادیم و بعدشم با استفاده ار ID سوال اول تمامی گزینه هایی که مرتبط به این سوال هستن رو فراخوانی کردیم و داخل یه تگ div با کلاس options نشون دادیم،یه نکته اینکه قبل حلقه که جواب ها رو برای ما نشون میده من یه تگ input و از نوع hidden اضافه کردم که برای ما مقدار ID ُوال رو نگهداری میکنه (حالا این ID توی ارسال به صفحه پردازش و ثبت اطلاعات خیلی کاربرد داره)،آخرشم که با متد disconnect از دیتابیس قطع ارتباط کردیم.

خوب برای قسمت استایل هم کمی CSS نوشتیم:

۱    *{
۲     margin: 0;
۳     padding: 0;
۴     font-family: tahoma;
۵     font-size: 9pt;
۶     direction: rtl;
۷     text-align: right;
۸    }
۹    .wrap{
۱۰     width:300px;
۱۱     margin: 30px auto;
۱۲     background-color: bisque;
۱۳     position: relative;
۱۴     padding: 10px;
۱۵     overflow: hidden;
۱۶    }
۱۷    .options{
۱۸     margin: 5px;
۱۹    }
۲۰    .title{
۲۱     font-weight: bold;
۲۲     padding:5px;
۲۳    }
۲۴    .btn{
۲۵     width: 100px;
۲۶     padding: 6px 12px;
۲۷     text-decoration: none;
۲۸     border-radius: 6px;
۲۹     background-color: coral;
۳۰     color: #000;
۳۱     text-align: center;
۳۲    }
۳۳    .btns{
۳۴     margin: 5px;
۳۵     text-align: center;
۳۶    }
۳۷    .vote{
۳۸     padding: 10px;
۳۹    }
۴۰    #loader{
۴۱     height: 105%;
۴۲     width: 105%;
۴۳     background-color: #000;
۴۴     color:#FFFFFF;
۴۵     text-align: center;
۴۶     padding-top:50px;
۴۷     font-weight: bold;
۴۸     opacity: 0.4;
۴۹     display: none;
۵۰     position: absolute;
۵۱     top:-10px;
۵۲     right:-10px;
۵۳     z-index: 100;
۵۴    }
۵۵    .p_result
۵۶    {
۵۷     width:100%;
۵۸     border:1px solid black;
۵۹     height:15px;
۶۰     margin:10px 0;
۶۱     overflow: hidden;
۶۲    }
۶۳    .s_result{
۶۴     height:100%;
۶۵     background-color: orangered;
۶۶     width: 0;
۶۷    }
۶۸    .total_poll{
۶۹     text-align: center;
۷۰     margin: 10px auto;
۷۱     border-radius: 6px;
۷۲     -webkit-border-radius: 6px;
۷۳     padding: 5px 6px;
۷۴     border:1px solid coral;
۷۵    }