27,59 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
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"!
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 219
Veröffentlichungsjahr: 2009
Ähnliche
Table of Contents
PHP and script.aculo.us Web 2.0 Application Interfaces
Sridhar Rao
PHP and script.aculo.us Web 2.0 Application Interfaces
Building powerful interactive AJAX applications with script.aculo.us and PHP
Copyright © 2009 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.
First published: April 2009
Production Reference: 2280409
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-847194-04-6
www.packtpub.com
Cover Image by Filippo (<[email protected]>)
Credits
Author
Sridhar Rao
Reviewers
Andrew J. Peterson
Robert F. Castellow
Acquisition Editor
James Lumsden
Development Editors
Nikhil Bangera
Dilip Venkatesh
Technical Editors
Bhupali Khule
Hithesh Uchil
Copy Editor
Sneha Kulkarni
Indexer
Monica Ajmera
Production Editorial Manager
Abhijeet Deobhakta
Editorial Team Leader
Akshara Aware
Project Team Leader
Lata Basantani
Project Coordinator
Rajashree Hamine
Proofreader
Laura Booth
Production Coordinator
Aparna Bhagat
Cover Work
Aparna Bhagat
About the author
Sridhar Rao has been learning, working, and developing web applications from the time he was first introduced to the Web. The very idea of reaching out to the masses and bringing change in the behavior of the users through web applications excites him the most.
Most of his work has been in PHP, MySQL, and JavaScript. He has worked with some of the leading technology and service companies in his IT career.
Sridhar currently works for the world's leading database and enterprise company. He holds an engineering degree in Information Technology and is based in Bangalore, India.
A book is not the work of an individual. I would like to thank my family and friends for their encouragement and support. I would like to thank the whole team of Packt who not only helped me when things were difficult, but also believed in this project. Special mention goes to James Lumsden, Nikhil Bangera, Rajashree Hamine, Bhupali Khule, Hithesh Uchil, and Navya Diwakar for their extra efforts and patience.
About the reviewers
Rob Castellow is the president of PAC Enterprises LLC, a contract and development company responsible for providing quality professional services. He has provided services in the development of several J2EE based projects for large corporations in the telecommunication and financial services sectors.
Rob graduated in 1998 with a Masters in Electrical Engineering from the Georgia Institute of Technology, and began his career developing embedded systems. Rob soon found that all the fun was in developing enterprise systems and has been working on J2EE based applications ever since.
Rob is an enthusiast of new technologies. When he is not proofreading books in PHP or script.aculo.us, he can be found developing Grails applications, attending user groups, reading books, and managing or developing several web sites.
Andrew J. Peterson lives with his wife and three daughters in San Francisco, California. He has about 20 years of experience in building and managing software systems for consumers, enterprises, and non-profits. His expertise contributes in the full life-cycle of software development, software methodologies, software architecture, software engineering, and usability.
Andrew has diverse experience in the industry. In the consumer space, he led a team in the creation of the top-selling SoundEdit 16. He served numerous roles producing enterprise software for the leading supplier of software solutions for container terminals, shipping ports and lines, and distribution centers.
He transferred this experience to web-based software. Over the past ten years, he's built a variety of web applications, including non-profit, social networking, social search, pharmaceuticals, and social e-commerce. He has built successful projects in a variety of languages, including Java, Ruby, C++, and Perl.
I'd like to thank my daughters for sharing their energy with me.
Preface
Let me start by thanking the whole script.aculo.us community, which is pushing the limits of creativity through JavaScript.
This book is a humble attempt to help developers to quickly get on board and make their web applications AJAXified using Prototype and script.aculo.us. We have used PHP and MySQL as our server-side artillery to spread love among the PHP and MySQL developers and community as a whole for script.aculo.us.
Prototype library has been covered in depth and features have been explained in a way that would not only help a beginner but also amaze gurus. The script.aculo.us library has been fully explored with the help of snippets, codes, and examples.
Exclusive hands-on examples have been provided that will act as a reference guide whenever needed.
Towards the end of the book we go on to build three web applications from scratch.
"If Prototype is giving our web applications powerful performance, script.aculo.us is making them look functionally beautiful."
What this book covers
Chapter 1 Kick-starts our script.aculo.us journey. We will explore the overview of the script.aculo.us library, real-world usage, and a quick example.
In Chapter 2 we will learn about the powerful Prototype library. We will explore various features like DOM, AJAX, event handling, and helper functions.
Chapter 3 gets us started with PHP and MySQL in building our complete Login Management System, getting AJAX into the picture, and create our own Tag Cloud.
In Chapter 4 we will learn with the help of hands-on examples, how to add multimedia and effects to web applications using script.aculo.us.
In Chapter 5 we will learn to make simple, clean, and beautiful user interfaces using drag and drop. Drag everything and drop something.
In Chapter 6 we will learn how to use InPlaceEditor and InPlaceCollection for editing on the fly.
Chapter 7 explores yet another 2.0 feature called autocompletion to create more robust and engaging applications.
In Chapter 8 we will learn the hands-on examples with different types of sliders and how to integrate it into our web applications.
Chapter 9 is our reference guide for all the script.aculo.us features in one go.
In Chapter 10 we will learn how to build our own tadalist application from scratch to live.
In Chapter 11 we will build your own social bookmarking application from scratch to live.
In Chapter 12 we will learn how to build a new design for a 2.0 shopping site from scratch to live.
Chapter 13 explains the build modules required to implement 43 things, 43 people, and 43 places from scratch to live.
Who this book is for
This book is for web developers who swear by simple yet agile and useful web applications. This book assumes basic knowledge of HTML, CSS, JavaScript, and PHP. A PHP beginner will surely find this book useful, and for the gurus, the book gives you a completely new way of adding interactivity to your web applications. The examples in the book use PHP, but can be adapted easily to other languages.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book − what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply drop an email to <[email protected]>, and mention the book title in the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or email <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Downloading the example code for the book
Visit http://www.packtpub.com/files/code/4046_Code.zip to directly download the example code.
The downloadable files contain instructions on how to use them.
Errata
Although we have taken every care to ensure the accuracy of our contents, mistakes do happen. If you find a mistake in one of our books − maybe a mistake in text or code − we would be grateful if you would report this to us. By doing so, you can save other readers from frustration, and help us to improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the let us know link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata added to any list of existing errata. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works in any form on the Internet, please provide us with the location address or web site name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
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.
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:
Now let's add effects to this<div>:
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:
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!
Chapter 2. Exploring Client-side Techniques with Prototype
In the previous chapter, we saw some basic features provided by the script.aculo.us library such as effects, drag and drop, and AJAX.
In this chapter we will cover the wonderful Prototype library. Some of the key features of Prototype that we will be covering are as follows:
About Prototype
Prototype was originally written by Sam Stephenson. It is a powerful open-source JavaScript framework, which makes it easy to develop dynamic and rich internet applications. Prototype provides both simple and advanced JavaScript extensions that assist developers, instead of making them rewrite their own code base. This includes the powerful XMLHttpRequest (XHR).
Prototype natively supports the AJAX and Document Object Model (DOM) features. This makes it an obvious choice for developers who want to bring about rapid web application development.
A single chapter dedicated to Prototype is certainly not sufficient to cover and explain everything that Prototype can help us do. However, remember that we want to build dynamic web applications, and step-by-step we will explore features of the library that we can actually use in our applications.
As said before, Prototype makes JavaScript easy, script.aculo.us makes it fun to work with.
The story so far: Versions
The Prototype framework has seen a lot of contribution and changes from the community since Sam Stephenson released it in February 2005.
The current stable version of Prototype is version 1.6, which comes with the script.aculo.us library. Alternatively, you can grab the latest copy from http://www.prototypejs.org/.
Compatibility
Prototype's JavaScript framework has the compatibility to work with leading web browsers. What makes it more powerful is the fact that developers can extend it with any of their programming languages such as Ruby, PHP, and Java.
