Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development
Code

JQuery और PHP के साथ एक डायनामिक पोल बनाना

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

जब आप jQuery की चतुराई के साथ PHP की कुछ साफ फंक्शनलिटी जोड़ते हैं तो आप कुछ बहुत अच्छे परिणाम उत्पन्न कर सकते हैं। इस ट्यूटोरियल में हम PHP और XHTML का उपयोग करते हुए एक पोल बनाते हैं, फिर एक पेज रिफ्रेश करने की आवश्यकता को खत्म करने के लिए कुछ Ajax इफेक्ट्स का उपयोग करें, और एनीमेशन का एक छोटा सा छोटा हिस्सा प्रदान करें।

  1. HTML
  2. PHP
    1. Introduction
    2. poll_default()
    3. poll_submit()
    4. poll_return_results()
    5. poll_ajax()
  3. CSS
  4. Javascript
    1. Introduction
    2. formProcess()
    3. loadResults()
    4. animateResults()

HTML

चलो हमारे <head> को सेट अप करें:

  • style.css CSS मार्कअप को रखेगाI
  • jquery.js jQuery की एक बेस लाइब्रेरी हैI
  • jQuery के लिए कुकी मैनीपुलेशन (cookie manipulation) जोड़ने के लिए jquery.cookie.js Klaus Hartl द्वारा एक प्लगइन है।
  • poll.js के पास जावास्क्रिप्ट है जो पोल को डायनामिक बनाता है।

इसके बाद, हम एक सरल पोल फार्म बनाएंगे:

Poll

इस फ़ॉर्म को अभी के लिए PHP द्वारा प्रोसेस किया जाएगा, और जब हमारा Javascript रन होगा, jQuery द्वारा। PHP और Javascript वैल्यू टैग से ऑप्शन ID खींचने के लिए डिज़ाइन किए गए हैं। &nbsp; सिर्फ एक HTML एंटिटी एन्कोडेड प्लेस है, और &rarr; एक एरो है: →


PHP

परिचय

यदि Javascript डिसेबल है, तो PHP होगा:

  1. फॉर्म से GET/POST रिक्वेस्ट प्राप्त करें
  2. कुकी को set/check करें
  3. सुनिश्चित करें कि रिक्वेस्ट एक विशिष्ट IP से है
  4. एक फ्लैट फ़ाइल DB में मतदान को स्टोर करें
  5. एक HTML फ़ाइल के साथ शामिल रिजल्ट को रीटर्न करें

यदि Javascript इनेबल है, तो PHP होगा:

  1. Javascript से GET/POST रिक्वेस्ट प्राप्त करें
  2. सुनिश्चित करें कि रिक्वेस्ट एक विशिष्ट IP से है
  3. एक फ्लैट फ़ाइल DB में मतदान को स्टोर करें
  4. परिणामों को JSON के रूप में रीटर्न करें

फ्लैट फ़ाइल DB के लिए हम Like Plant द्वारा लिखे गए पैकेज का उपयोग करेंगे।

सबसे पहले, हमें पोल ऑप्शंस के नाम और ID के साथ एक ऐरे (array) की जरूरत है:

फ्लैट फ़ाइल पैकेज, कॉलम आइडेंटिफ़ायर के लिए संख्याओं का उपयोग करता है, तो इनको नामो में परिवर्तित करने के लिए कुछ कांस्टेंट को सेट करते हैं:

जब फ़ॉर्म सबमिट किया जाता है, तो PHP को यह जानने की आवश्यकता है कि परिणाम को कौन सी फाइल के अंदर डाला जाए और रीटर्न करें, इसलिए हम एक और कांस्टेंट सेट करें:

हमें flatfile.php को शामिल करने और डेटाबेस ऑब्जेक्ट को प्रारंभ करने की आवश्यकता है:

फ्लैट फाइलें सिर्फ डेटा डायरेक्टरी में स्टोर्ड टेक्स्ट फ़ाइलें हैं:

यदि हमें पोल पैरामीटर के साथ एक रिक्वेस्ट मिलती है, तो यह स्टैटिक फॉर्म है, इसलिए हम इसे प्रोसेस करते हैं। यदि रिक्वेस्ट में एक वोट पैरामीटर है, तो यह एक Ajax रिक्वेस्ट है। अन्यथा, हम सिर्फ HTML_FILE रीटर्न करेंगे।

poll_default()

poll_default() सीधे स्क्रिप्ट में बिना वैलिड GET/POST रिक्वेस्ट के साथ प्रोसेस करता है।

global लाइन फंक्शन के स्कोप में $db ऑब्जेक्ट उपलब्ध कराती है।

स्क्रिप्ट सुनिश्चित करने के लिए अद्वितीय आईपी को ट्रैक करता है कि आप केवल एक बार वोट कर सकते हैं, इसलिए हम यह जांचने के लिए एक क्वेरी करते हैं कि वह DB में है या नहीं:

यदि हमारे पास कोई कुकी नहीं है और IP क्वेरी खाली आती है, तो क्लाइंट ने अभी तक वोट नहीं दिया है, इसलिए हम सिर्फ HTML फ़ाइल भेज सकते हैं जिसमें फॉर्म शामिल है। अन्यथा, हम सिर्फ परिणाम भेजते हैं:

poll_submit()

poll_submit() फॉर्म सबमिशन लेता है, जांच करता है कि क्लाइंट पहले ही मतदान कर चुका है, और फिर वोट के साथ DB को अपडेट करता है।

इन लाइन्स को चयनित ऑप्शंस की ID मिलती है, और इसमें $id सेट किया जाता है:

हमें यह जांचना होगा कि ऑप्शंस अभी तक DB में है या नहीं:

यदि यह DB (रिजल्ट खाली नहीं है) में है, तो हमें एक updateSetWhere() चलाने की आवश्यकता है। अगर ऐसा नहीं है तो हमें एक insert() की ज़रूरत है:

किसी भी तरह से, हमें DB में IP डालने की आवश्यकता है, और एक कुकी सेट (एक वर्ष में समाप्त हो जाती है) करने की:

poll_return_results()

poll_return_results() पोल परिणाम उत्पन्न करता है, HTML फ़ाइल लेता है, परिणाम के साथ फार्म को बदलता है, और क्लाइंट को फ़ाइल देता है।

सबसे पहले, HTML फ़ाइल को ग्रैब करने दें और उसे $html सेट करें:

इसके बाद, हम परिणाम HTML स्ट्रक्चर शुरू करते हैं:

परिणाम HTML बनाने के लिए हमें DB से सभी rows (ऑप्शन्स) को वोटों की संख्या से सॉर्ट करने की आवश्यकता है:

प्रतिशत की गणना करने के लिए हमें कुल वोटों की भी आवश्यकता है:

इसके बाद, हम वर्तमान विकल्प में वोट के प्रतिशत की गणना करते हैं:

परिणामों के लिए HTML एक डेफिनिशन लिस्ट (<dl>) होगी, जो कि बार ग्राफ बनाने के लिए CSS के साथ स्टाइल होगी:

साथ ही, हमें यह जांचना चाहिए कि वर्तमान ऑप्शन वह है जिसे क्लाइंट ने मतदान किया है और रंग बदल गया है:

यहां, हम कुल वोट गिनती जोड़ते हैं और HTML टैग बंद करते हैं:

यह एक regex है जो poll-container <div> पाता है:

इस फ़ंक्शन में अंतिम चरण में regex का उपयोग करते हुए रिजल्ट के साथ पोल फॉर्म को रिप्लेस करना है, और परिणाम को रीटर्न करना है:

poll_ajax()

poll_ajax() Javascript से एक रिक्वेस्ट लेता है, DB में वोट जोड़ता है, और परिणामों को JSON के रूप में देता है।

कुछ ऐसी लाइनें हैं जो poll_submit() से अलग हैं। पहला चेक करें अगर जावास्क्रिप्ट सिर्फ परिणाम चाहता है, और कोई वोट गिना नहीं होना चाहिए:

अन्य दो लाइन्स पूरे DB को चुनती हैं और इसे JSON के रूप में रीटर्न करती है:


CSS

Poll Results

यह CSS PHP या Javascript द्वारा रीटर्न किये गए परिणाम को स्टाइल देता हैं।

  • .graph कंटेनर के लिए बार्स (bars), टाइटल्स (titles) और परसेंटेज (percentages) को स्टाइल देता है। प्रत्येक साइट के लिए width अलग होगी।
  • .bar-title बार ग्राफ के लिए टाइटल्स को स्टाइल देता है।
  • .bar-container इंडिविजुअल बार और प्रतिशत कंटेनर को स्टाइल देता है
  • .bar-container div उस div पर स्टाइल करता है जिस पर बार अप्लाई होता है। बार्स (bars) को बनाने के लिए, एक परसेंटेज width PHP या Javascript के साथ सेट की जाती है।
  • .bar-container strong परसेंटेज को स्टाइल देता है।
  • #poll-results p टोटल वोट्स को स्टाइल देता है।

Javascript

परिचय

Javascript सबमिट बटन को अवरुद्ध (intercept) करेगा, Ajax के साथ वोट भेजें, और परिणामों को एनिमेट करें।

सबसे पहले, कुछ वैश्विक (global) वैरिएबल। आपको PHP से पहले तीन को पहचानना चाहिए। votedID क्लाइंट द्वारा वोट किये गए ऑप्शन की ID को स्टोर करता है।

अब हमें एक jQuery के तैयार फ़ंक्शन की आवश्यकता होती है, जो पेज लोड होने पर चलता है:

उस फ़ंक्शन के अंदर हम वोट बटन के लिए हैंडलर को रजिस्टर करते हैं जो formProcess को रन करता है जब यह ट्रिगर होता है:

हमें यह भी जांचना होगा कि परिणाम <div> मौजूद है या नहीं, और यदि ऐसा होता है तो परिणामों को एनिमेट करना है:

यदि हमारे पास एक कुकी है तो हमें सीधे परिणाम उत्पन्न करने के लिए कूदना चाहिए क्योंकि यूज़र ने पहले ही वोट दिया है। ऐसा करने के लिए हमें पोल फार्म से छुटकारा पाने की ज़रूरत है, कुकी से ID प्राप्त करें, PHP से परिणाम प्राप्त करें और और उसे loadResult() में पास कर दें।

formProcess()

formProcess() को सबमिट इवेंट द्वारा कॉल किया जाता है जो इसमें एक ईवेंट ऑब्जेक्ट पास करता है। यह फॉर्म को सामान्य रूप से सबमिट करने से, कुकी को चेक/सेट करने से रोकता है, इसके बजाय एक Ajax को सबमिट करने के लिए रन करता है, फिर रिजल्ट्स को HTML में कन्वर्ट करने के लिए loadResults() कॉल करता है।

सबसे पहले, हमें डिफ़ॉल्ट एक्शन (फ़ॉर्म सबमिट करना) को रोकने की आवश्यकता है:

इसके बाद, हमें वर्तमान में सिलेक्टेड ऑप्शन से ID मिलती है:

input[@name='poll']:checked एक jQuery सिलेक्टर है जो <input> का चयन करता है जिसका एट्रिब्यूट name='poll' है और जो checked है। attr("value") ऑब्जेक्ट की वैल्यू को प्राप्त करता है जो हमारे मामले में optn हो जाता है जहां n ऑप्शन की ID है।

अब जब कि हमारे पास ID है, हम इसे प्रोसेस कर सकते हैं। शुरू करने के लिए, हम पोल फार्म को फेड (fade) आउट करते हैं, और एक anonymous फ़ंक्शन को एक कॉलबैक के रूप में सेटअप करते हैं जो फ़ेड पूरा होने पर चलाया जाता है। एनिमेशन स्क्रिप्ट को पॉज (pause) नहीं करते, इसलिए अजीब चीज़ें होती हैं यदि आप इस तरीके से नहीं करते हैं।

इसे समाप्त हो जाने के बाद हम empty() का उपयोग कर DOM से फ़ॉर्म को हटा सकते हैं:

इस मामले में, $(this) DOM एलिमेंट के लिए jQuery का शॉर्टहैंड है जिस पर fade को लागू किया गया था।

JQuery में कुछ अन्य शॉर्टकट फ़ंक्शन हैं, जिनमें $.getJSON() शामिल है जो JSON ऑब्जेक्ट के लिए GET रिक्वेस्ट करता है। जब हमारे पास ऑब्जेक्ट है, तो हम इसे loadResults() के साथ कॉल करते हैं:

आखिरी चीज कुकी को सेट करना है:

loadResults()

loadResults() को $.getJSON() द्वारा कॉल किया जाता है और एक JSON ऑब्जेक्ट पास कर दिया है जिसमें DB का रिजल्ट होता हैं। यह बहुत ज्यादा समान है क्योंकि यह कुछ अपवादों के साथ PHP समकक्ष (counterpart) poll_return_results() है। पहला अंतर यह है कि हम सभी बार की width को 0% तक सेट करते हैं क्योंकि हम उन्हें एनिमेट कर रहे हैं। दूसरा अंतर यह है कि परिणाम दिखाने के लिए हम regex के बजाय jQuery के append() का उपयोग कर रहे हैं। रिजल्ट्स के फेड इन होने के बाद, फ़ंक्शन animateResults() को कॉल करता है।

animateResults()

animateResults() प्रत्येक बार के माध्यम से इटरेट (iterate) करता है और प्रतिशत के आधार पर width वाली प्रॉपर्टी को एनिमेट करता है।

each() एक jQuery फ़ंक्शन है जो सिलेक्टेड प्रत्येक एलिमेंट के माध्यम से इटरेट (iterate) करता है:

सबसे पहले, हम उस एलिमेंट के टेक्स्ट की परसेंटेज सेट करते हैं जो बार के अगला है हो परसेंटेज को लिए हुए <strong> है।

फिर हम यह सुनिश्चित कर लें कि width 0% पर सेट है, और इसे एनिमेट करें:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.