16 July 2011

Introduction of Jquery and its use in cakephp Applications

The day Tim Berners-Lee invented WWW AKA World Wide Web , we have seen a lot of changes in the way we present information through internet . Today if you visit a website, you will see a lot of special effects that adds a lot to look and feel of website . Have you ever wondered how these effects can be implemented in a webpage?
No? Not a problem , here is the chance for you. You might have heard about javaScript which is used to make webpages interactive, but it was not that much effective , So web developers provide a  new library named jQuery  is designed to change the way that you write JavaScript. It is also fast and concise
Now Let us now learn how to use it in cake applicationYou have to first download it . You can download it from here . Then you have to put it in js folder of  your webroot directory inside app folder of your cakephp application.

In order to use jQuery Special Effects, you have to include it in your view or  ctp file using following syntax
echo $this->Html->script('jQuery');

Note you have to make sure , that name of jQuery file should be "jQuery.js", otherwise it will not work on Linux server.
 
Look us now start with some scripting
The Basic syntax used in Jquery is $(selector).action()
  • A dollar sign basically mean getElementBy
  • A (selector) to "query (or find)" HTML elements
  • A jQuery action() to be performed on the element(s)
<script type="text/JavaScript">
$(document).ready(function(){
// This line is used to prevent execution of script until page load
 $(".hide").click(function(){
       $(".manish").hide("slow"); // hides all elements with class="manish”
      });
 $(".show").click(function(){
         $(".manish").show("slow"); // Show all elements with class="manish”
  });
}) ;</script>

Now we will do some css part . You have to create a new css file with any name of your choice and write the following code in it.
 
div.manish  {
  width:300px;
  background-color:yellow;
  padding:7px;
  border:solid 1px #c3c3c3;
  }
Now include it in css folder of webroot directory and then include it in your webpage using following syntax
echo $this->Html->css('style1');

Now its time to create some button on which you will fire events such as hide, show using cakephp syntax

echo  $this->Form->button('hide me', array('class' => 'hide'));
echo  $this->Form->button('show me', array('class' => 'show'));

 <div class="manish">
    
<p>
    <span style="font-family:arial;font-size:14px;">My name is Manish Kumar Goyal
      I am a computer Engineer
</span>
    </p>
 </div>
So with this we are done, this is one of the most basic explanation of Jquery , if still have any kind of query. Feel free to ask