PHP and script.aculo.us Web 2.0 Application Interfaces

By Sridhar Rao Chivukula
    Advance your knowledge in tech with a Packt subscription

  • Instant online access to over 7,500+ books and videos
  • Constantly updated with 100+ new titles each month
  • Breadth and depth in over 1,000+ technologies
  1. About script.aculo.us

About this book

script.aculo.us is a JavaScript library that provides dynamic visual effects, user interface controls, and robust AJAX features. It is to client-side what PHP is to server-side – powerful, simple, complete fun, and above all, a MUST! As developers, we all dream of building applications that users can instantly fall in love with and get productive. Simple and niche applications are the future of web applications. script.aculo.us when used with PHP as a server-side scripting language, can give us a new way of looking at things and changing the way we work.

script.aculo.us provides you with easy-to-use, cross-browser user interface JavaScript libraries to enhance your web sites and web applications. It provides dynamic visual effects, user interface controls, and robust AJAX features. This book covers all aspects for a developer to learn and master the art of using advanced JavaScript also referred to as 2.0 aspects in PHP web applications. script.aculo.us is an effective and powerful add-on to the Prototype library and when combined with PHP, it can make a lot of difference. The difference every developer dreams of.

This book has been written keeping in view every basic step as well as covering the most complex aspects while writing our applications — from simple effects, to the AJAX way of communicating through systems in applications. It gives you a completely new way of adding interactivity to your web applications. You will learn how sript.aculo.us provides interactivity and beauty to your project so that it engages users and appeals to the masses.

Faster, more efficient, and more productive applications are what we are trying to build. Each chapter of this book has been hand-crafted to make sure that you as a developer can learn and master the art of making beautiful applications.

The book covers all the various aspects of script.aculo.us with a few real-world clone projects, which will surely help you explore your creative side.

The aim of this book is to make you go "WOW"!

Publication date:
May 2009
Publisher
Packt
Pages
264
ISBN
9781847194046

 

Chapter 1. About script.aculo.us

We have been developing web applications using PHP and MySQL. But now we want to learn how to make our applications interactive in terms of usage, and build a community around them. In short, we want to build simple, yet powerful applications.

Look no further! script.aculo.us is our savior and our love, too. script.aculo.us is a JavaScript library that provides dynamic visual effects, user interface controls, and robust AJAX features. In this chapter, we will explore the script.aculo.us library with regards to versions, features, and real-world usage.

The official site of script.aculo.us describes it as Web 2.0 JavaScript, which it truly is. We will also see how we can delight our friends with just a few lines of code.

Welcome to the script.aculo.us world

Anyone developing a web application knows how painful it is to make cross-browser JavaScript functionality − especially when we are dealing with XMLHttpRequest aka AJAX and many more such features, as different browsers behave differently.

Thomas Fuchs wrote the initial version of script.aculo.us to solve this problem. The open-source community of script.aculo.us too added many more features that have redefined the way JavaScript is being used. From simple effects to complex Rich Internet Applications (RIA), script.aculo.us does it all. script.aculo.us supports popular browsers available in the market such as Internet Explorer, Mozilla, Opera, and Safari.

script.aculo.us is an add-on to the Prototype library. If Prototype makes JavaScript simple, script.aculo.us makes JavaScript fun.

 

Welcome to the script.aculo.us world


Anyone developing a web application knows how painful it is to make cross-browser JavaScript functionality − especially when we are dealing with XMLHttpRequest aka AJAX and many more such features, as different browsers behave differently.

Thomas Fuchs wrote the initial version of script.aculo.us to solve this problem. The open-source community of script.aculo.us too added many more features that have redefined the way JavaScript is being used. From simple effects to complex Rich Internet Applications (RIA), script.aculo.us does it all. script.aculo.us supports popular browsers available in the market such as Internet Explorer, Mozilla, Opera, and Safari.

script.aculo.us is an add-on to the Prototype library. If Prototype makes JavaScript simple, script.aculo.us makes JavaScript fun.

 

Versions


Now that we are ready to have some serious fun with script.aculo.us, it's important to quickly grab the latest version. We will require the Prototype library that comes with the latest version of script.aculo.us.

Note

You can download the latest version of script.aculo.us from their official site at http://script.aculo.us/. Save the file in the web server's root directory,www, inside the specific project folder. The Getting Started URL explains this process in detail.

script.aculo.us 1.8 is the latest version that comes with Prototype 1.6.0.1 beta. Alternatively, if you have an older version such as 1.7 or 1.6, it should be fine. However, we highly recommend upgrading it to version 1.8, as it adds new features for multimedia support and incorporates many bug fixes which may be missing in the previous versions.

 

The script.aculo.us fun begins


The best way to understand and visualize what script.aculo.us can do for us is by getting our code up and running − quickly! Yes, we mean it. Let's explore some features of script.aculo.us with examples and real-world scenarios before we move on to create the next big thing on the Web.

Effects

You want to impress your application users, don't you? Effects are all about adding interactivity to your applications, which in turn gives an appealing user interface to make users fall in love with your applications.

script.aculo.us comes with an effects engine, which provides various effects such as grow, slide, highlight, and many more. When applied in applications these effects add beauty to the functionality.

And, what if I tell you that we can do this in one line of code? I know you won't believe it, so let's see it happening. Just copy and paste the following JavaScript code in your editor and you should see the magic unfold.

The HTML code, which we will use to add effects, is as follows:

<html>
<body>
<div id="effect-id"> </div>
</body>
</html>

Now let's add effects to this<div>:

new Effect.Highlight($('effect-id'));

You should be able to see the effects when the<div> is selected. A simple real-world example of what you have done now is shown next. It's a WordPress application using the script.aculo.us effects.

Want to try something else? Try this:

new Effect.Fade($('effect-id'));

After applying the fade effect to the<div>, you should see the<div> fading away slowly.

We will use many such effects in our applications throughout the book.

Drag and drop

Drag and drop is another feature that is quite often seen in many web applications. Imagine a simple shopping cart where you can simply drag-and-drop the items you want to buy from a list of items. Isn't it simple for users? Yes, it indeed is. And even better, it is simple for developers too.

The complete drag and drop features of script.aculo.us will be explained in Chapter 5. For now, check out the Backpackit application from 37signals at www.backpackit.com and visualize what kind of application you want to create using drag and drop.

In the following screenshot we can drag notes and lists, and re-arrange the items on the page:

AJAX

Asynchronous JavaScript and XML or AJAX, as it is commonly known, redefines and bridges the gap between the web and desktop applications. As a user, we send requests to the server and data is received as a response. This is then displayed to us − the user − on the same page without the whole page getting reloaded. The same applies to desktop widgets synchronizing with web applications.

script.aculo.us uses the functions and power of Prototype, such as Request and Updater, to add AJAX functionality to web applications easily. For now, all you should understand is how it will help us in our applications.

In the previous screenshot we could add a List, Note, Divider, and Tag without moving to another page. Everything is done on the same page, but the data is sent to the server using AJAX. From the user's perspective, the application is easy, fast, and simple.

As we said before, we can add a Note, List, and Tag without moving to another page. This feature makes use of the power of XML features through AJAX techniques, which update the server at runtime and even fetch the data from the server without loading the whole page.

Our idea of building a project is also the same. We shall go through all these features step-by-step in Chapter 2.

 

Much more fun


It's only the beginning of the fun. We have just touched upon an overview of the library. There are many other features such as autocomplete, sliders, in-place editing, and multimedia. All these features are fun to work with and are covered in depth in the chapters to come.

Throughout the process of learning script.aculo.us, all you need to do is visualize the possibilities of how we can make our applications more interactive and engaging.

 

Summary


In this chapter we saw an overview of the script.aculo.us library. Real-world scenario of WordPress and Backpackit prove that script.aculo.us has been trusted with developing and deploying simple, yet powerful user-driven applications.

In the next chapter we will explore the very powerful JavaScript library Prototype. We will learn about DOM manipulation, helper functions, and AJAX in detail. Anything and everything about Prototype will be covered − but all the while having fun. Read on!

About the Author

  • Sridhar Rao Chivukula

    Sridhar Rao Chivukula is a technical lead at Mindtree Ltd and is based out of New York City. He brings with him more than a decade of rich hands-on experience in all aspects of frontend engineering. He has worked with leading companies such as Oracle, Tech Mahindra, and Cognizant Technology Solutions. He has a Bachelor's degree in Information Technology. He is the author of the books Expert Angular and PHP and Web 2.0 Application Interfaces, published by Packt.

    Browse publications by this author
PHP and script.aculo.us Web 2.0 Application Interfaces
Unlock this book and the full library for $5 a month*
Start now