آموزش ساخت نظر سنجی با پی اچ پی و آجاکس به روش ساده
خوب توی مرحله اول به سه تا جدول نیاز داریم؛چرا سه تا جدول ؟ خوب یه جدول سوالات نظر سنجی رو توی خودش نگهداری میکنه و جدول دومی پاسخ های سوالات رو توی خودش داره و جدول سومی هم برای ثبت IP کاربران هست که از رای دادن دوباره با یک IP جلوگیری کنیم که کمک میکنه نظرسنجی بهتر و قابل اعتماد تری داشته باشیم.
کد SQL برای جدول اول که ما اینجا اسمشو میذاریم question :
[codesyntax lang=”php”]
| CREATE TABLE IF NOT EXISTS `question` ( `id` bigint(۲۰) NOT NULL AUTO_INCREMENT, `title` varchar(۵۰۰) COLLATE utf8_bin NOT NULL, PRIMARY KEY (`id`) ) |
[/codesyntax]
توی این جدول دو تا فیلد داریم یکی فیلد ID که لازمه هر جدوله و یکی هم فیلد title که عنوان نظر سنجی توش قرار میگیره.
کد SQL برای جدول جواب ها و ثبت رای کاربران که اسمشو گذاشتیم answers :
[codesyntax lang=”php”]
| CREATE TABLE IF NOT EXISTS `answers` ( `id` bigint(۲۰) NOT NULL DEFAULT '۰', `title` varchar(۵۰۰) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL, `number` bigint(۲۰) NOT NULL, `q_id` bigint(۲۰) NOT NULL, PRIMARY KEY (`id`), KEY `q_id` (`q_id`) ) |
[/codesyntax]
توی این جدول هم فیلد های ID و title برای برای عنوان جواب و فیلد number برای تعداد پاسخ های این جواب و فیلد q_id برا نگهداری شناسه سوال که درو اقع مشخص میکنه این جواب مربوط به این سوال هست،ما توی این جدول علاوه بر اینکه فیلد ID رو به عنوان کلید اصلی قرار دادیم،فیلد q_id رو هم به عنوان Index گذاشتیم تا توی کوئری هایی که با q_id سروکار داره سریعتر عمل کنه.
کد SQL برای جدول ثبت IP کاربران اسمشو گذاشتیم polls :
[codesyntax lang=”php”]
| CREATE TABLE IF NOT EXISTS `polls` ( `id` bigint(۲۰) NOT NULL AUTO_INCREMENT, `q_id` bigint(۲۰) NOT NULL, `ip` int(۱۱) unsigned NOT NULL, `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP, PRIMARY KEY (`id`), KEY `q_id` (`q_id`,`ip`) ) |
[/codesyntax]
خوب تو این جدول همه فیلد ID و فیلد q_id برای نگهدرای شناسه سوال (دوستان عزیز توجه داشته باشند شناسه سوال در اینجا به عنوان شناسه نظر سنجی هم برای عمل میکنه)،فیلد ip برای نگهداری IP کاربری که رای داده و date هم برای نگهدرای تاریخ و ساعت رای کاربر(تیو phpMyAdmin اگه نوع فیلد رو TIMESTAMP قرار بدید خودش به صورت اتوماتیک تاریخ و ساعت لحظه پردازش رو وارد میکنه).
خوب اینم از ساختار و فیلد های جدول ها ما؛
قسمت HTML
توب فایل index.php قسمت فرم و ظاهر نظر سنجی رو طراحی میکنیم.
[codesyntax lang=”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 class="wrap" > <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 class="title">'.$row['title'].'</p>'; $result=$db->query("SELECT * FROM answers WHERE q_id='{$row['id']}'");?> <form action="" method="post" > <div class="options"> <input type="hidden" id="question_id" value="<?php echo $row['id']; ?>"> <?php while($ans=$db->fetch_array($result)){ ?> <p class="vote" ><input type="radio" value="<?php echo $ans['id']; ?>" name="group">&nbsp<?php echo $ans['title']; ?></p> <?php } } $db->disconnect(); ?> </div> </form> <p class="btns"> <a href="javascript:void(0);" id="send" class="btn">ثبت نظر</a> <a href="javascript:void(0);" id="results" class="btn">نمایش نتایج</a> </p> </div> </body> </html> |
[/codesyntax]
ما مثل همیشه از کلاسی که توی پروژه های قبلی ازش استفاده میکردیم هم همین جا استفاده میکنیم و تیو خط اول اونو فراخوانی کردیم (تنظیمات دیتابیس حتما توی فایل config.php انجام بشه).
قسمت HTML که توضیح خاصی نداره فقط اون کد های جاوا اسکریپت رو که اضافه کردیم بعدا میگیم باهاشون چکار داریم.توی قسمت PHP که نوشتیم با دستور global $db متغییر db رو از فایل database که اون بالا اضافه اش کردیم رو فراخوانی کردیم (چون از قبل برای راحتی کار همون جا تعریف شده)،خوب باس ایتفاده از متد ها کلاسی که داریم به بانک وصل شدیم و اولین سوال نظرسنجی رو فراخونی کردیم و نشون دادیم و بعدشم با استفاده ار ID سوال اول تمامی گزینه هایی که مرتبط به این سوال هستن رو فراخوانی کردیم و داخل یه تگ div با کلاس options نشون دادیم،یه نکته اینکه قبل حلقه که جواب ها رو برای ما نشون میده من یه تگ input و از نوع hidden اضافه کردم که برای ما مقدار ID ُوال رو نگهداری میکنه (حالا این ID توی ارسال به صفحه پردازش و ثبت اطلاعات خیلی کاربرد داره)،آخرشم که با متد disconnect از دیتابیس قطع ارتباط کردیم.
خوب برای قسمت استایل هم کمی CSS نوشتیم:
[codesyntax lang=”php”]
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ | *{ margin: ۰; padding: ۰; font-family: tahoma; font-size: ۹pt; direction: rtl; text-align: right; } .wrap{ width:۳۰۰px; margin: ۳۰px auto; background-color: bisque; position: relative; padding: ۱۰px; overflow: hidden; } .options{ margin: ۵px; } .title{ font-weight: bold; padding:۵px; } .btn{ width: ۱۰۰px; padding: ۶px ۱۲px; text-decoration: none; border-radius: ۶px; background-color: coral; color: #۰۰۰; text-align: center; } .btns{ margin: ۵px; text-align: center; } .vote{ padding: ۱۰px; } #loader{ height: ۱۰۵%; width: ۱۰۵%; background-color: #۰۰۰; color:#FFFFFF; text-align: center; padding-top:۵۰px; font-weight: bold; opacity: ۰.۴; display: none; position: absolute; top:-۱۰px; right:-۱۰px; z-index: ۱۰۰; } .p_result { width:۱۰۰%; border:۱px solid black; height:۱۵px; margin:۱۰px ۰; overflow: hidden; } .s_result{ height:۱۰۰%; background-color: orangered; width: ۰; } .total_poll{ text-align: center; margin: ۱۰px auto; border-radius: ۶px; -webkit-border-radius: ۶px; padding: ۵px ۶px; border:۱px solid coral; } |
[/codesyntax]
می توانید نتیجه کارتان را با آنچه در فایل ضمیمه است مشاهده کنید.