केकपीएचपी में AJAX jQuery और प्रोटोटाइप पर

CakePHP में AJAX के कार्यान्वयन का एक छोटा सा उदाहरण, एक उदाहरण से पता चलता है कि CakePHP में AJAX के साथ काम करना कितना आसान है, फ्रेमवर्क सभी कार्यों का ध्यान रखता है। हम jquery.js लाइब्रेरी पर उदाहरण को लागू करेंगे, फिर हम प्रोटोटाइप पर अपने उदाहरण का रीमेक करेंगे। पुस्तकालय

शुरुआत

हमें स्थापित और कॉन्फ़िगर किए गए CakePHP ढांचे की आवश्यकता होगी।


हमारे उदाहरण में उन पर पोस्ट और टिप्पणियां शामिल होंगी, टिप्पणियों में हम AJAX तकनीक का उपयोग करेंगे।
पोस्ट और टिप्पणी तालिका बनाएँ:

CREATE TABLE `comments` ( `id` varchar(36) COLLATE utf8_unicode_ci NOT NULL, `post_id` varchar(36) COLLATE utf8_unicode_ci NOT NULL, `title` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL, `body` text COLLATE utf8_unicode_ci, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; CREATE TABLE `posts` ( `id` varchar(36) COLLATE utf8_unicode_ci NOT NULL, `title` varchar(255) COLLATE utf8_unicode_ci DEFAULT NULL, `body` text COLLATE utf8_unicode_ci, `created` datetime DEFAULT NULL, `modified` datetime DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; 

हम बेक के साथ सभी "गंदे" कार्य प्रदान करेंगे, अर्थात् केक बेक कमांड का उपयोग करके, CakePHP फ्रेमवर्क एप्लिकेशन कंसोल कंसोल एप्लिकेशन (\ app \ Console \ cake), मैं एक मॉडल, नियंत्रक उत्पन्न करूंगा, और हमारे आवेदन का लुक, सेंकना कुछ सवाल पूछेंगे और स्वचालित रूप से हमारे मॉडल लिंक करेंगे, चेक सेट करें; डेटा में मॉडल में प्रवेश किया। अहसानुल बारी, अनुपम सियाम "केकपीएचपी एप्लीकेशन डेवलपमेंट" द्वारा "गोले का उपयोग करना: आगे बढ़ें, तेज़" के अध्याय 8 में केक सेंकना का विस्तार से वर्णन किया गया है।


हम jQuery कनेक्ट करते हैं

निम्नलिखित लाइन को ऐप \ View \ Layouts \ default.ctp फ़ाइल में जोड़ें:

 echo $this->Html->script('jquery-1.8.3.min'); 

लाइब्रेरी 'jquery-1.8.3.min.js' को ऐप \ webroot \ js \ में डालना होगा
हम CakePHP फ्रेमवर्क के सहायक को इंगित करेंगे कि हम किस जावास्क्रिप्ट लाइब्रेरी का उपयोग करते हैं, नियंत्रक ऐप \ नियंत्रक \ AppController.php में जोड़ें:

 public $helpers = array('Js' => array('Jquery'); 

लेकिन हमारा आवेदन पहले से ही हेल्पलाइन 'एचटीएमएल', 'फॉर्म', 'सेशन', 'पेजिनेटर' का उपयोग करता है, वे स्वचालित रूप से तब तक जुड़े रहते हैं जब तक कि हम सहायक को स्पष्ट रूप से परिभाषित नहीं करते हैं, इसलिए हम उन्हें हेल्पर इनिशियलाइज़र में जोड़ते हैं:

 public $helpers = array('Html','Form','Session','Js' => array('Jquery'),'Paginator'); 

AJAX इंजन

अब मुख्य कोड जो AJAX इंजन उत्पन्न करेगा।

 <div id="comments"> <!-- ,     AJAX--> <?php foreach($comments as $comment): ?> <div class="comment"> <!—  --> <p><b><?php echo $comment['Comment']['title'];?></b></p> <p><?php echo $comment['Comment']['body'];?></p> </div> <?php endforeach;?> <!--      --> <?php echo $this->Form->create('Comment',array('controller' =>'comments', action'=>'add','onSubmit'=>'return false;')); echo $this->Form->input('Comment.title'); echo $this->Form->input('Comment.body'); echo $this->Form->input('Comment.post_id',array('type'=>'hidden','value'=>$comment['Comment']['post_id'])); echo $this->Js->submit('Add Comment',array('url'=>'/comments/add_ajax','update'=>'#comments','evalScripts'=>'true')); echo $this->Js->writeBuffer(); //  echo $this->Form->end(); ?> </div> 

इस कोड को मौजूदा फ़ाइल ऐप \ _ \ _ पोस्ट \ view.ctp में रखा गया है और नई फ़ाइल ऐप \ View \ Comments \ add_success.ctp में पुन: उपयोग के लिए थोड़ा संशोधित कोड है। पूरे AJAX इंजन को 3 लाइनों में रखा गया है, यदि आप उन्हें हटाते हैं तो हमें इनपुट के लिए सामान्य रूप मिलता है:

 'onSubmit'=>'return false;' //  ,      echo $this->Js->submit('Add Comment',array('url'=>'/comments/add_ajax','update'=>'#comments','evalScripts'=>'true')); //   AJAX echo $this->Js->writeBuffer(); //CakePHP    JavaScript  

$ यह-> Js-> सबमिट () फ़ंक्शन बहुत सारे मापदंडों का समर्थन करता है, शायद आप JSON प्रारूप में सर्वर से डेटा प्राप्त करने के लिए जाते हैं या यहां सेटिंग्स के विवरण के लिए GET विधि का उपयोग करते हैं , लेकिन हम केवल इसमें रुचि रखते हैं:

 'url'=>'/comments/add_ajax' //    ,       submit. 'update'=>'#comments', //     html ,     (#comments). 'evalScripts'=>'true' //    prototype,  AJAX      . 

यदि हम अपना उदाहरण चलाते हैं, तो हम देखेंगे कि CakePHP ने पहले ही सभी काम कर लिए हैं, अर्थात्, इसने jQuery लाइब्रेरी के $ .ajax फ़ंक्शन को कनेक्ट और कॉन्फ़िगर किया है:

 <div class="submit"> <input id="submit-1030630577" type="submit" value="Add Comment"> </div> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () {$("#submit-1030630577").bind("click", function (event) {$.ajax({data:$("#submit-1030630577").closest("form").serialize(), dataType:"html", evalScripts:"true", success:function (data, textStatus) {$("#comments").html(data);}, type:"post", url:"\/comments\/add_ajax"}); return false;});}); //]]> </script> 

JQuery को प्रोटोटाइप में बदलें
बदल देते हैं:

 //public $helpers = array('Html','Form','Session','Js' => array('Jquery'),'Paginator'); public $helpers = array('Html','Form','Session','Js' => array('Prototype'),'Paginator'); 

हमें मिलता है:

 <div class="submit"> <input id="submit-1936204617" type="submit" value="Add Comment"> </div> <script type="text/javascript"> //<![CDATA[ document.observe("dom:loaded", function (event) {$("submit-1936204617").observe("click", function (event) {event.stop(); var jsRequest = new Ajax.Updater("comments", "/comments/add_ajax", {evalScripts:"true", method:"post", parameters:$($("submit-1936204617").form).serialize()});});}); //]]> </script> 

यदि आप सही ढंग से प्रोटोटाइप लाइब्रेरी को जोड़ने का काम करते हैं:

 //echo $this->Html->script('jquery-1.8.3.min'); echo $this->Html->script('prototype'); 

, तो अनुप्रयोग पहले से ही प्रोटोटाइप इंजन पर चलेगा।

AJAX बटन हैंडलर

बटन के लिए AJAX हैंडलर कंट्रोलर ऐप \ नियंत्रक \ CommentsController.php में स्थित है

  public function add_ajax() { if ($this->request->is('post')) { $this->Comment->create(); if ($this->Comment->save($this->request->data)) { $comments=$this->Comment->find('all',array('conditions'=>array('post_id'=>$this->request->data['Comment']['post_id']),'recursive'=>-1)); $this->set(compact('comments')); $this->render('add_success','ajax'); } else { $this->render('add_failure','ajax'); } } } 

इसका वर्णन उस लेख के दायरे से परे है जिसे मैं लिखना चाहता था। आप इस लेख में चर्चा किए गए उदाहरण को यहाँ डाउनलोड कर सकते हैं ।

प्रयुक्त साहित्य की सूची:
जॉन रीसिग "जावास्क्रिप्ट पेशेवर प्रोग्रामिंग तकनीक"
बेनकेन ई।, समकोव जी। "AJAX: इंटरनेट के लिए प्रोग्रामिंग"
प्रोखोरेनोक एन। "जावास्क्रिप्ट में jQuery की नई शैली"
Prokhorenok H. "HTML, JavaScript, PHP और MySQL। सज्जन वेबमास्टर सेट »
लैंगस्टॉर्फ जेसन "पेशेवरों के लिए PHP और jQuery"
मिशेल ई। डेविस, जॉन ए। फिलिप्स "लर्निंग पीएचपी और माईएसक्यूएल"
डेविड फ्लैनगन जावास्क्रिप्ट। विस्तृत गाइड, 5 वें संस्करण »
Mariano Iglesias CakePHP 1.3 एप्लीकेशन डेवलपमेंट कुकबुक
डेविड गोल्डिंग "नौसिखिए से पेशेवर तक CakePHP की शुरुआत"
अनुपम स्याम, अहसानुल बारी केकपीएचपी एप्लीकेशन डेवलपमेंट
काई चान और जॉन केमकोर रिचर्ड के। मिलर के साथ "प्रैक्टिकल केकपीएचपी प्रोजेक्ट्स"