Web Design Company in India, Delhi

AJAX online Examples

Miracle Studios — Fri, 17 Oct 2008 17:29:22 +0000

There are a few special techniques or effects that can spice up just about any web page. These are the top 20 Ajax effects that every web developer should know. They’re essential parts of any web developer’s toolbox. If you haven’t seen them yet, you no doubt will in your future web development endeavors.

1. TextboxList meets Autocompletion

Auto-completing fields in a form can be a huge time saver and a major benefit to the user. For example, searching for email addresses is a chore that can easily made much more simple (and I dare say fun) with a splash of Ajax. TextboxList meets Autocompletion is one such example of an auto-complete script that takes a Facebook-esque approach to autocompletion. The implementation is crisp and useful, not to mention easy on the eyes.

2.Ajax IM

Ajax IM is an incredible Ajax instant messenger that works just like Yahoo! messenger or any other IM client, except it’s embedded on the website as opposed to a desktop client. Ajax IM is incredibly robust, and could add quite a bit to your user’s experience. If you’ve got a social networking site or any site where it’s encouraged for users to interact with each other, an IM client could be a great way to increase interaction.

3. LiveValidation

Web forms can be one of the most frustrating aspects of the Internet. Most are too long and try to collect too much information, and sometimes make it very hard for a valuable user to fill the form out. Possibly one of the most frustrating aspects of filling out a form is hitting “Submit” and getting errors that have to be corrected.

One way to ease the pain of web forms is to add Ajax validation that tells the user instantly when he’s made a mistake. LiveValidation is an excellent Ajax script that can make adding Ajax form validation super easy for the developer. A must-have for any project that uses forms.

4. Inline Editing

The ability to edit something inline is a small aesthetic feature that can really add to the user’s experience. There’s something much niftier with being able to click a text field and instantly have the ability to edit it.

Manoloweb has a great little Ajax implementation of an inline editor. It’s a tiny script, but it can be modified to be as simple or complex as you wish.

5. Ajax Upload

Uploading files with Ajax is so much nicer than the boring, old alternative. It’s nice to see the progress of the upload, and it can be much handier for the developer to be able to use Ajax uploads that only modify small sections of the web page.

Because there are many different flavors of Ajax uploading, a simple example that can be added to. AnyExample has a quick and excellent tutorial on how to make a basic Ajax upload that you can use as is or expand upon. If you’re looking for an immediate solution, check out jQuery’s jqUploader or the multiple file upload scripts.

6. Fancy Upload

Now that we’ve covered the basics for file uploading with Ajax, check out the excellent Fancy Upload. It’s built off of the excellent Javascript framework MooTools and can be styled and modified almost endlessly. It’s unobtrusive, can be placed inline and is server independent, so integrating this script to an existing app is relatively easy.

7. ClickHeat Clicks Heatmap

Heatmaps are an underused aspect in web development. While this may not be a wildly-popular feature that your users are begging for, heatmaps are excellent for the developer to see just what the site users are clicking on. While there are plenty of hosted services out there like crazyegg, you can also use your own hosted, Ajax-powered heatmap that’s completely free with ClickHeat.

ClickHeat is very simple, but also very powerful. It shows who’s clicking on what part of your page in a given date range. This can add plenty of insight as you tweak your layouts for the best performances. Knowing where your visitors click is absolutely essential information. You can visually see what ads are performing best, what links people like to click on, and much more data.

8. Ajax Mail Form

There’s nothing more valuable to a startup or brand new website than a simple form for your visitors to sign up for launch dates and site updates. If you can add Ajax to dynamically process the information, it’s a huge bonus. NinjaDesigns has a nifty little PHP script that allows you to add a signup form on your website that uses Ajax to send the information, so a new page isn’t loaded. Extremely valuable for any web developer.

9. Ajax Directory Manager

Navigating a traditional hierarchy or folder tree can be quite a pickle for a web user. Each click on a folder requires a page reload, and you can kiss drag-n-drop functionality goodbye. If you want to add a user-friendly directory manager, use Ajax.

Relay is a robust directory manager built on ajax that features an interface with features like:

drag-n-drop file and folders
dynamically loading file structure
uploads with file progress bar
user accounts

.. and more. Relay is totally fully featured, and can be used as a standalone application or a compliment to an existing site.

10. Ajax Email Client

Who doesn’t love Gmail? The email service by Google completely changed the way we use and think about email, and it also forced others like Yahoo! and Hotmail to play catchup and try to compete with Gmail’s features. Google accomplished all of this with a little help from our friend Ajax.

If you wanted to mimic Gmail and create your own Ajax email client, it’s a fun experiment and could be used for many applications. DevArticles has an “oldie but goodie”, a somewhat older but excellent article on how to set up your own Gmail clone.

11. Improve Form Usability with Auto Messages

Many of the scripts listed in this article deal with improving user forms, as it’s a big trouble spot for many web developers. The last thing a site owner wants is for people to abandon the website as they’re signing up for the service! If you can make the process of filling out the web form easier, you’ll have a much higher form completion rate.

Using auto messages for forms is an excellent way to give guideposts to the user. Woork has a stellar tutorial on how to add automatic messages to form fields, so that when they’re hovered on a little popup shows below the input. It’s a small feature to add, but huge for improving the user’s experience.

12. qGallery

While it isn’t a full-featured gallery, qGallery is an excellent example of using Ajax to request photos and media. It’s based around the prototype Javascript framework, and it’s a perfect little script for showcasing images. It even has cache functions built in to save bandwidth.

13. Ajax Star Rating

It seems that people almost always want to give their opinion on something. Having a simple way for users to create ratings is a great way to add interactivity to your website, and also gives the users a “voice”.

There is a simple Ajax script that will do this called the unobtrusive ajax start rater. This nifty little script allows users to rate just about anything you specify. It’s not tied to any platform, so you could literally use the script for anything that used PHP and MySQL.

14. CakePHP Ajax Form

If you’re a user of the web framework like Django or CakePHP, you’ll appreciate the tutorial by CakeBaker on how to submit a form with Ajax. It’s actually quite simple to do, and only requires a few lines of code. One especially useful function of this code is that it’s unobtrusive, meaning that if Javascript is disabled in the browser, the form will still submit, just not with Ajax.

15. Amberjack Site Tours

In terms of web developers, Amberjack is one of the most impressive Javascript libraries to date. Amberjack allows you to quickly and easily create site tours for your users that make using your website less of a mystery. The best part of Amberjack is that the whole library is less than 4kb in size! It’s incredibly easy to customize, and can really make a huge impact on your site visitors with only a little bit of work.

16. Prototype UI

Prototype UI takes all of the hard work out of creating visual Ajax elements like carousels and modal windows. The script is based off of Prototype and Scriptaculous, and it’s essentially a library of user interface classes. The library is constantly growing, and all of the features are highly skinnable and easy to customize.

It’s always hard to find different libraries for things modal boxes and carousels, so it’s nice when they’re all bundled together.

17. JCrop

Photo editing online is typically a rather involved process. Either you use a service like Picnik or you just fire up ‘ol Photoshop to edit your images. Wouldn’t it be nice if the website allowed you to crop the images that you were uploading?

This is now possible with a jQuery plugin called JCrop. JCrop allows your users to crop any image that’s been uploaded to your servers, using a powerful Ajax cropping engine. Brilliant.

18. jQuery Auto-tabbing Plugin

Like we’ve stated earlier, the job of the web developer is to make filling out forms as easy as possible for the site user. That means adding even the smallest feature if it enhances the user’s experience. One such example is using auto-tabs on things like phone number input fields and social security numbers. Lousyllama has an excellent jQuery plugin that allows you to auto-tab form fields that you specify.

19. Sort Table Rows with Ajax

Sorting table elements is an incredibly useful feature to have with pages that showcase lots of data. The Daily Inspired has a nifty tutorial that shows how to achieve this effect with Stuart Langridge’s sortable.js.

Tables are great at organizing data, but being able to further drill-down the information gives your users many more options to viewing the data they way that they want to.

20. DrasticMap

Google Maps is yet another revolutionary product from Google that relies heavily on Ajax to power the site. DrasticMap is a stellar Javascript/Ajax script that allows you to map coordinates stored in a MySQL database on top of a Google map. It’s highly flexible and configurable, and the possibilities are endless in the ways that it can be used.

Posted by: Expertz Web

Posted in Web Development Tagged: ajax, ajax example, ajax tutorial

HTACCESS URL Rewriting

Miracle Studios — Sun, 12 Oct 2008 17:01:19 +0000

The Apache server’s mod_rewrite module gives you the ability to transparently redirect one URL to another, without the user’s knowledge. This opens up all sorts of possibilities, from simply redirecting old URLs to new addresses, to cleaning up the ‘dirty’ URLs coming from a poor publishing system — giving you URLs that are friendlier to both readers and search engines.

An Introduction to Rewriting

Readable URLs are nice. A well designed website will have a logical file system layout, with smart folder and file names, and as many implementation details left out as possible. In the most well designed sites, readers can guess at filenames with a high level of success.

However, there are some cases when the best possible information design can’t stop your site’s URLs from being nigh-on impossible to use. For instance, you may be using a Content Management System that serves out URLs that look something like

http://www.example.com/viewcatalog.asp?category=hats&prodID=53

This is a horrible URL, but it and its brethren are becoming increasingly prevalent in these days of dynamically-generated pages. There are a number of problems with an URL of this kind:

It exposes the underlying technology of the website (in this case ASP). This can give potential hackers clues as to what type of data they should send along with the query string to perform a ‘front-door’ attack on the site. Information like this shouldn’t be given away if you can help it.

Even if you’re not overly concerned with the security of your site, the technology you’re using is at best irrelevant — and at worst a source of confusion — to your readers, so it should be hidden from them if possible.

Also, if at some point in the future you decide to change the language that your site is based on (to » PHP, for instance); all your old URLs will stop working. This is a pretty serious problem, as anyone who has tackled a full-on site rewrite will attest.
The URL is littered with awkward punctuation, like the question mark and ampersand. Those & characters, in particular, are problematic because if another webmaster links to this page using that URL, the un-escaped ampersands will mess up their XHTML conformance. They will have to laboriously replace all the ampersands with & character entities, which is often forgotten.
Some search engines won’t index pages which they think are generated dynamically. They’ll see that question mark in the URL and just turn their asses around.

Luckily, using rewriting, we can clean up this URL to something far more manageable. For example, we could map it to

http://www.example.com/catalog/hats/53/

Much better. This URL is more logical, readable and memorable, and will be picked up by all search engines. The faux-directories are short and descriptive. Importantly, it looks more permanent.

To use mod_rewrite, you supply it with the link text you want the server to match, and the real URLs that these URLs will be redirected to. The URLs to be matched can be straight file addresses, which will match one file, or they can be regular expressions, which will match many files.

Basic Rewriting

Some servers will not have » mod_rewrite enabled by default. As long as the » module is present in the installation, you can enable it simply by starting a .htaccess file with the command

RewriteEngine on

Put this .htaccess file in your root so that rewriting is enabled throughout your site. You only need to write this line once per .htaccess file.

Basic Redirects

We’ll start off with a straight redirect; as if you had moved a file to a new location and want all links to the old location to be forwarded to the new location. Though you shouldn’t really ever » move a file once it has been placed on the web; at least when you simply have to, you can do your best to stop any old links from breaking.

RewriteEngine on RewriteRule ^old\.html$ new.html

Though this is the simplest example possible, it may throw a few people off. The structure of the ‘old’ URL is the only difficult part in this RewriteRule. There are three special characters in there.

The caret, ^, signifies the start of an URL, under the current directory. This directory is whatever directory the .htaccess file is in. You’ll start almost all matches with a caret.
The dollar sign, $, signifies the end of the string to be matched. You should add this in to stop your rules matching the first part of longer URLs.
The period or dot before the file extension is a special character in regular expressions, and would mean something special if we didn’t escape it with the backslash, which tells Apache to treat it as a normal character.

So, this rule will make your server transparently redirect from old.html to the new.html page. Your reader will have no idea that it happened, and it’s pretty much instantaneous.

Forcing New Requests

Sometimes you do want your readers to know a redirect has occurred, and can do this by forcing a new HTTP request for the new page. This will make the browser load up the new page as if it was the page originally requested, and the location bar will change to show the URL of the new page. All you need to do is turn on the [R] flag, by appending it to the rule:

RewriteRule ^old\.html$ new.html [R]

Using Regular Expressions

Now we get on to the really useful stuff. The power of mod_rewrite comes at the expense of complexity. If this is your first encounter with regular expressions, you may find them to be a tough nut to crack, but the options they afford you are well worth the slog. I’ll be providing plenty of examples to guide you through the basics here.

Using regular expressions you can have your rules matching a set of URLs at a time, and mass-redirect them to their actual pages. Take this rule;

RewriteRule ^products/([0-9][0-9])/$ /productinfo.php?prodID=$1

This will match any URLs that start with ‘products/’, followed by any two digits, followed by a forward slash. For example, this rule will match an URL like products/12/ or products/99/, and redirect it to the PHP page.

The parts in square brackets are called ranges. In this case we’re allowing anything in the range 0-9, which is any digit. Other ranges would be [A-Z], which is any uppercase letter; [a-z], any lowercase letter; and [A-Za-z], any letter in either case.

We have encased the regular expression part of the URL in parentheses, because we want to store whatever value was found here for later use. In this case we’re sending this value to a PHP page as an argument. Once we have a value in parentheses we can use it through what’s called a back-reference. Each of the parts you’ve placed in parentheses are given an index, starting with one. So, the first back-reference is $1, the third is $3 etc.

Thus, once the redirect is done, the page loaded in the readers’ browser will be something like productinfo.php?prodID=12 or something similar. Of course, we’re keeping this true URL secret from the reader, because it likely ain’t the prettiest thing they’ll see all day.

Multiple Redirects

If your site visitor had entered something like products/12, the rule above won’t do a redirect, as the slash at the end is missing. To promote good URL writing, we’ll take care of this by doing a direct redirect to the same URL with the slash appended.

RewriteRule ^products/([0-9][0-9])$ /products/$1/ [R]

Multiple redirects in the same .htaccess file can be applied in sequence, which is what we’re doing here. This rule is added before the one we did above, like so:

RewriteRule ^products/([0-9][0-9])$ /products/$1/ [R] RewriteRule ^products/([0-9][0-9])/$ /productinfo.php?prodID=$1

Thus, if the user types in the URL products/12, our first rule kicks in, rewriting the URL to include the trailing slash, and doing a new request for products/12/ so the user can see that we likes our trailing slashes around here. Then the second rule has something to match, and transparently redirects this URL to productinfo.php?prodID=12. Slick.

Match Modifiers

You can expand your regular expression patterns by adding some modifier characters, which allow you to match URLs with an indefinite number of characters. In our examples above, we were only allowing two numbers after products. This isn’t the most expandable solution, as if the shop ever grew beyond these initial confines of 99 products and created the URL productinfo.php?prodID=100, our rules would cease to match this URL.

So, instead of hard-coding a set number of digits to look for, we’ll work in some room to grow by allowing any number of characters to be entered. The rule below does just that:

RewriteRule ^products/([0-9]+)$ /products/$1/ [R]

Note the plus sign (+) that has snuck in there. This modifier changes whatever comes directly before it, by saying ‘one or more of the preceding character or range.’ In this case it means that the rule will match any URL that starts with products/ and ends with at least one digit. So this’ll match both products/1 and products/1000.

Other match modifiers that can be used in the same way are the asterisk, *, which means ‘zero or more of the preceding character or range’, and the question mark, ?, which means ‘zero or only one of the preceding character or range.’

Adding Guessable URLs

Using these simple commands you can set up a slew of ‘shortcut URLs’ that you think visitors will likely try to enter to get to pages they know exist on your site. For example, I’d imagine a lot of visitors try jumping straight into our stylesheets section by typing the URL http://www.yourhtmlsource.com/css/. We can catch these cases, and hopefully alert the reader to the correct address by updating their location bar once the redirect is done with these lines:

RewriteRule ^css(/)?$ /stylesheets/ [R]

The simple regular expression in this rule allows it to match the css URL with or without a trailing slash. The question mark means ‘zero or one of the preceding character or range’ — in other words either yourhtmlsource.com/css or yourhtmlsource.com/css/ will both be taken care of by this one rule.

This approach means less confusing 404 errors for your readers, and a site that seems to run a whole lot smoother all ’round.

Posted in Apache, Web Development Tagged: .htaccess URL ReWrite, htaccess

.htaccess Tips and Tricks.

Miracle Studios — Sun, 12 Oct 2008 16:54:43 +0000

more clever stuff here

redirecting and rewriting

“The great thing about mod_rewrite is it gives you all the
configurability and flexibility of Sendmail. The downside to mod_rewrite is that
it gives you all the configurability and flexibility of Sendmail.”

- Brian Behlendorf, Apache Group

One of the more powerful tricks of the .htaccess hacker is the ability to rewrite URLs. This enables us to do some mighty manipulations on our links; useful stuff like transforming very long URL’s into short, cute URLs, transforming dynamic ?generated=page&URL’s into /friendly/flat/links, redirect missing pages, preventing hot-linking, performing automatic language translation, and much, much more.

Make no mistake, mod_rewrite is complex. This isn’t the subject for a quick bite-size tech-snack, probably not even a week-end crash-course, I’ve seen guys pull off some real cute stuff with mod_rewrite, but with kudos-hat tipped firmly towards that bastard operator from hell, Ralf S. Engelschall, author of the magic module itself, I have to admit that a great deal of it still seems so much voodoo to me.

The way that rules can work one minute and then seem not to the next, how browser and other in-between network caches interact with rules and testing rules is often baffling, maddening. When I feel the need to bend my mind completely out of shape, I mess around with mod_rewrite!

After all this, it does work, and while I’m not planning on taking that week-end crash-course any time soon, I have picked up a few wee tricks myself, messing around with webservers and web sites, this place..

The plan here is to just drop some neat stuff, examples, things that have proven useful, and work on a variety of server setups; there are apache’s all over my LAN, I keep coming across old .htaccess files stuffed with past rewriting experiments that either worked; and I add them to my list, or failed dismally; and I’m surprised that more often these days, I can see exactly why!

Very little here is my own invention. Even the bits I figured out myself were already well documented, I just hadn’t understood the documents, or couldn’t find them. Sometimes, just looking at the same thing from a different angle can make all the difference, so perhaps this humble stab at URL Rewriting might be of some use. I’m writing it for me, of course. but I do get some credit for this..

# time to get dynamic, see.. RewriteRule ^(.*)\.htm $1.php

beginning rewriting..

Whenever you use mod_rewrite (the part of apache that does all this magic), you need to do..

you only need to do this once per .htaccess file:

Options +FollowSymlinks

RewriteEngine on

..before any ReWrite rules. note: +FollowSymLinks must be enabled for any rules to work, this is a security requirement of the rewrite engine. Normally it’s enabled in the root and you shouldn’t have to add it, but it doesn’t hurt to do so, and I’ll insert it into all the examples on this page, just in case*.

The next line simply switches on the rewrite engine
for that folder. if this directive is in you main .htaccess file, then the ReWrite engine is theoretically enabled for your entire site, but it’s wise to always add that line before you write any redirections, anywhere.

* Although highly unlikely, your host may have +FollowSymLinks enabled at the root level, yet disallow its addition in .htaccess; in which case, adding +FollowSymLinks will break your setup (probably a 500 error), so just remove it, and your rules should work fine.

Important: While some of the directives on this page may appear split onto two lines, in your .htaccess file, they must exist completely on one line. If you drag-select and copy the directives on this page, they should paste just fine into any text editor.

simple rewriting

Simply put, Apache scans all incoming URL requests, checks for matches in our .htaccess file and rewrites those matching URLs to whatever we specify. something like this..

all requests to whatever.htm will be sent to whatever.php:

Options +FollowSymlinks

RewriteEngine on

RewriteRule ^(.*)\.htm$ $1.php [NC]

Handy for anyone updating a site from static htm (you could use .html, or .htm(.*), .htm?, etc) to dynamic php pages; requests to the old pages are automatically rewritten to our new urls. no one notices a thing, visitors and search engines can access your content either way. leave the rule in; as an added bonus, this enables us to easily split php code and its included html structures into two separate files, a nice idea; makes editing and updating a breeze. The [NC] part at the end means “No Case”, or “case-insensitive”, but we’ll get to the switches later.

Folks can link to whatever.htm or whatever.php, but they always get whatever.php in their browser, and this works even if whatever.htm doesn’t exist! but I’m straying..

As it stands, it’s a bit tricky; folks will still have whatever.htm in their browser address bar, and will still keep bookmarking your old .htm URL’s. Search engines, too, will keep on indexing your links as .htm, some have even argued that serving up the same content from two different places could have you penalized by the search engines. This may or not bother you, but if it does, mod_rewrite can do some more magic..

this will do a “real” http redirection:

Options +FollowSymlinks

RewriteEngine on

RewriteRule ^(.+)\.htm$ http://corz.org/$1.php [R=301,NC]

This time we instruct mod_rewrite to send a proper HTTP “permanently moved” redirection, aka; “301″. Now, instead of just redirecting on-the-fly, the user’s browser is physically redirected to a new URL, and whatever.php appears in their browser’s address bar, and search engines and other spidering entities will automatically update their links to the .php versions; everyone wins. and you can take your time with the updating, too.

For details of the many 30* response codes you can send, see here.

not-so-simple rewriting … flat links and more

You may have noticed, the above examples use regular expression to match variables. What that simply means is.. match the part inside (.+) and use it to construct “$1″ in the new URL. In other words, (.+) = $1 you could have multiple (.+) parts and for each, mod_rewrite automatically creates a matching $1, $2, $3, etc, in your target (aka. ‘substitution’) URL. This facility enables us to do all sorts of tricks, and the most common of those, is the creation of “flat links”..

Even a cute short link like http://mysite/grab?file=my.zip is too ugly for some people, and nothing less than a true old-school solid domain/path/flat/link will do. Fortunately, mod_rewrite makes it easy to convert URLs with query strings and multiple variables into exactly this, something like..

a more complex rewrite rule:

Options +FollowSymlinks

RewriteEngine on

RewriteRule ^files/([^/]+)/([^/]+).zip /download.php?section=$1&file=$2 [NC]

would allow you to present this link as..

http://mysite/files/games/hoopy.zip

and in the background have that transparently translated, server-side, to..

http://mysite/download.php?section=games&file=hoopy

which some script could process. You see, many search engines simply don’t follow our ?generated=links, so if you create generating pages, this is useful. However, it’s only the dumb search engines that can’t handle these kinds of links; we have to ask ourselves.. do we really want to be listed by the dumb search engines? Google will handle a good few parameters in your URL without any problems, and the (hungry hungry) msn-bot stops at nothing to get that page, sometimes again and again and again…

I personally feel it’s the search engines that should strive to keep up with modern web technologies, in other words; we shouldn’t have to dumb-down for them. But that’s just my opinion. Many users will prefer /files/games/hoopy.zip to /download.php?section=games&file=hoopy but I don’t mind either way. As someone pointed out to me recently, presenting links as standard/flat/paths means you’re less likely to get folks doing typos in typed URL’s, so something like..

an even more complex rewrite rule:

Options +FollowSymlinks

RewriteEngine on

RewriteRule ^blog/([0-9]+)-([a-z]+) http://corz.org/blog/index.php?archive=$1-$2 [NC]

would be a neat trick, enabling anyone to access my blog archives by doing..

http://corz.org/blog/2003-nov

in their browser, and have it automagically transformed server-side into..

http://corz.org/blog/index.php?archive=2003-nov

which corzblog would understand. It’s easy to see that with a little imagination, and a basic understanding of
posix regular expression, you can perform some highly cool URL manipulations.

Here’s the very basics of regexp (expanded from the apache mod_rewrite documentation)..

Escaping:

\char escape that particular char

For instance to specify special characters.. [].()\ etc.

Text:

.             Any single character  (on its own = the entire URI)
[chars]       Character class: One of following chars
[^chars]      Character class: None of following chars
text1|text2   Alternative: text1 or text2 (i.e. "or")

e.g. [^/] matches any character except /
(foo|bar)\.html matches foo.html and bar.html

Quantifiers:

? 0 or 1 of the preceding text
* 0 or N of the preceding text  (hungry)
+ 1 or N of the preceding text

e.g. (.+)\.html? matches foo.htm and foo.html
(foo)?bar\.html matches bar.html and foobar.html

Grouping:

(text)  Grouping of text

Either to set the borders of an alternative or
for making backreferences where the nth group can
be used on the target of a RewriteRule with $n

e.g.  ^(.*)\.html foo.php?bar=$1

Anchors:

^    Start of line anchor
$    End   of line anchor

An anchor explicitly states that the character right next to it MUST
be either the very first character ("^"), or the very last character ("$")
of the URI string to match against the pattern, e.g..

^foo(.*) matches foo and foobar but not eggfoo
(.*)l$ matches fool and cool, but not foo

shortening URLs

One common use of mod_rewrite is to shorten URL’s. Shorter URL’s are easier to remember and, of course, easier to type. An example..

beware the regular expression:

Options +FollowSymlinks

RewriteEngine On

RewriteRule ^grab(.*) /public/files/download/download.php$1

this rule would transform this user’s URL..

http://mysite/grab?file=my.zip

server-side, into..

http://mysite/public/files/download/download.php?file=my.zip

which is a wee trick I use for my distro machine, among other things. everyone likes short URL’s, and so will you; using this technique, you can move /public/files/download/ to anywhere else in your site, and all the old links still work fine; simply alter your .htaccess file to reflect the new location. edit one line, done – nice – means even when stuff is way deep in your site you can have cool links like this..

// document.write("/trueview/sample.php")
//-->
// -->
// -->/trueview/sample.php
</p> <div> <a href="/trueview/php/sample.php" mce_href="/trueview/php/sample.php"><br /> /trueview/php/sample.php</a> </div> <p>
and this; links which are not only short, but flat..

capturing variables

Slapping (.*) onto the end of the request part of a ReWriteRule is just fine when using a simple $_GET variable, but sometimes you want to do trickier things, like capturing particular variables and converting them into other variables in the target URL. Or something else..

When capturing variables, the first thing you need to know about, is the [QSA] flag, which simply tags all the original variables back onto the end of the target url. This may be all you need. The second thing, is %{QUERY_STRING}, an Apache server string we can capture variables from, using simple RewriteCond (aka. conditional ) statements.

In the following example, the RewriteCond statement checks that the query string has the foo variable set, and captures its value while it's there. In other words, only requests for grab that have the foo variable set, will be rewritten, and while we're at it, we'll also switch foo, for bar..

capturing a $_GET variable:

Options +FollowSymlinks

RewriteEngine On

RewriteCond %{QUERY_STRING} foo=(.*)

RewriteRule ^grab(.*) /page.php?bar=%1

would translate a link/user's request for..

http://domain.com/grab?foo=foobar

server-side, into..

http://domain.com/page.php?bar=foobar

Which is to say, the user's browser would be fed page.php (without an [R] flag in the RewriteRule, their address bar would still read /grab?foo=foobar). The variable bar would be available to your script, with its value set to foobar.

This variable has been magically created, by simply using a regular ? in the target of the RewriteRule, and tagging on the first captured backreference, %1.. ?bar=%1

Note how we use the % character, to specify variables captured in RewriteCond statements, aka "Backreferences". This is exactly like using $1 to specify numbered backreferences captured in RewriteRule patterns, except for those captured inside RewriteCond statements, we use % instead of $.

You can use the [QSA] flag in addition to these query string manipulations, merge them. In the next example, the value of foo becomes the directory in the target URL, the variable file is magically created, and the original query string is then tagged back onto the end of the whole thing..

QSA Overkill!

Options +FollowSymlinks

RewriteEngine On

RewriteCond %{QUERY_STRING} foo=(.+)

RewriteRule ^grab/(.*) /%1/index.php?file=$1 [QSA]

So a request for..

http://domain.com/grab/foobar.zip?level=5&foo=bar

is translated, server-side, into..

http://domain.com/bar/index.php?file=foobar.zip&level=5&foo=bar

Depending on your needs, you could even use flat links and dynamic variables together, something like this could be useful..

mixing flat and dynamic links in a single ruleset..

Options +FollowSymlinks

RewriteEngine On

RewriteCond %{QUERY_STRING} version=(.+)

RewriteRule ^grab/([^/]+)/(.*) /%1/index.php?section=$1&file=$2 [QSA]

By the way, you can easily do the opposite, strip a query string from a URL, by simply putting a ? right at the end of the taget part. This example does exactly that, whilst leaving the actual URI intact..

just a demo!

Options +FollowSymlinks

RewriteEngine On

RewriteCond %{QUERY_STRING} .

RewriteRule foo.php(.*) /foo.php? [L]

The RewriteCond statement only allows requests that have something in their query string, to be processed by the RewriteRule, or else we'd end up in that hellish place, dread to all mod_rewriters.. the endless loop. RewriteCond is often used like this; as a safety-net.

cooler access denied

In part one I
demonstrated a drop-dead simple mechanism for denying access to particular files and folders. The trouble with
this is the way our user gets a 403 "Access Denied" error, which is a bit like having a door slammed in your face.
Fortunately, mod_rewrite comes to the rescue again and enables us to do less painful things. One method I often
employ is to redirect the user to the parent folder..

they go "huh?.. ahhh!"

# send them up!

Options +FollowSymlinks

RewriteEngine on

RewriteRule ^(.*)$ ../ [NC]

It works great, though it can be a wee bit tricky with the URLs, and you may prefer to use a harder location, which avoids potential issues in indexed directories, where folks can get in a loop..

they go damn! Oh!

# send them exactly there!

Options +FollowSymlinks

RewriteEngine on

RewriteRule ^(.*)$ /comms/hardware/router/ [NC]

Sometimes you'll only want to deny access to most of the files in the directory, but allow access to maybe one or two files, or file types, easy..

deny with style!

# users can load only "special.zip", and the css and js files.

Options +FollowSymlinks

RewriteEngine On

RewriteCond %{REQUEST_FILENAME} !^(.+)\.css$

RewriteCond %{REQUEST_FILENAME} !^(.+)\.js$

RewriteCond %{REQUEST_FILENAME} !special.zip$

RewriteRule ^(.+)$ /chat/ [NC]

Here we take the whole thing a stage further. Users can access .css (stylesheet) and javascript files without problem, and also the file called "special.zip", but requests for any other filetypes are immediately redirected back up to the main "/chat/" directory. You can add as many types as you need. You could also bundle the filetypes into one line using | (or) syntax, though individual lines are perhaps clearer.

Here's what's currently cooking inside my /inc/ directory..

all-in-one control..

RewriteEngine on

Options +FollowSymlinks

# allow access with no restrictions to local machine at 192.168.1.3

RewriteCond %{REMOTE_ADDR} !192.168.1.3

# allow access to all .css and .js in sub-directories..

RewriteCond %{REQUEST_URI} !\.css$

RewriteCond %{REQUEST_URI} !\.js$

# allow access to the files inside img/, but not a directory listing..

RewriteCond %{REQUEST_URI} !img/(.*)\.

# allow access to these particular files...

RewriteCond %{REQUEST_URI} !comments.php$

RewriteCond %{REQUEST_URI} !corzmail.php$

RewriteCond %{REQUEST_URI} !digitrack.php$

RewriteCond %{REQUEST_URI} !gd-verify.php$

RewriteCond %{REQUEST_URI} !post-dumper.php$

RewriteCond %{REQUEST_URI} !print.php$

RewriteCond %{REQUEST_URI} !source-dump.php$

RewriteCond %{REQUEST_URI} !textview.php$

RewriteRule ^(.*)$ / [R,nc,l]

prevent hot-linking

Believe it or not, there are some webmasters who, rather than coming up with their own content will steal yours. Really! Even worse, they won't even bother to copy to their own server to serve it up, they'll just link to your content! no, it's true, in fact, it used to be incredibly common. These days most people like to prevent this sort of thing, and .htaccess is one of the best ways to do it.

This is one of those directives where the mileage variables are at their limits, but something like this works fine for me..

how DARE they!

Options +FollowSymlinks

# no hot-linking

RewriteEngine On

RewriteCond %{HTTP_REFERER} !^$

RewriteCond %{HTTP_REFERER} !^http://(www\.)?corz\.org/ [NC]

RewriteRule .*\.(gif|jpg|png)$

// -->
// -->http://corz.org/img/hotlink.png [NC]
</p> <div> <a href="/img/hotlink.png" mce_href="/img/hotlink.png" title="(opens in a new window - apple-click (shift-click on peecees) for a new tab instead)"><br /> http://corz.org/img/hotlink.png</a> [NC]<br /> </div> <p>

You may see the last line broken into two, but it's all one line (all the directives on this page are). Let's have a wee look at what it does..

We begin by enabling the rewrite engine, as always.

The first RewriteCond line allows direct requests (not from other pages - an "empty referrer") to pass unmolested. The next line means; if the browser did send a referrer header, and the word "corz.org" is not in the domain part of it, then DO rewrite this request.

The all-important final RewriteRule line instructs mod_rewrite to rewrite all matched requests (anything without "corz.org" in its referrer) asking for gifs, jpegs, or pngs, to an alternative image. Mine says "no hotlinking!" You can see it in action here.

There are loads of ways you can write this rule. google for "hot-link protection" and get a whole heap. Simple is best. You could send a wee message instead, or direct them to some evil script, or something. These days, mine is a simple corz.org logo, which I think is rather clever.

lose the "www"

I'm often asked how I prevent the "www" part showing up at my site, so I guess I should add something about that. Briefly, if someone types http://www.corz.org/ into their browser (or uses the www part for any link at corz.org) it is redirected to the plain, rather neat, http://corz.org/ version. This is very simple to achieve, like this..

beware the regular expression:

Options +FollowSymlinks

RewriteEngine on

RewriteCond %{http_host} ^www\.corz\.org [NC]

RewriteRule ^(.*)$ http://corz.org/$1 [R=301,NC]

You don't need to be a genius to see what's going on here. There are other ways you could write this rule, but again, simple is best. Like most of the examples here, the above is pasted directly from my own main .htaccess file, so you can be sure it works perfectly. In fact, I recently updated it so that I could share rules between my dev mirror and live site without any .htaccess editing..

here's what I'm currently using:

Options +FollowSymlinks

RewriteEngine on

RewriteCond %{HTTP_HOST} ^www\.(.*) [NC]

RewriteRule ^(.*)$ http://%1/$1 [R=301,NC,L]

multiple domains in one root

If you are in the unfortunate position of having your sites living on a host that doesn't support multiple domains, you may be forced to roll your own with .htaccess and mod_rewrite. So long as your physical directory structure is well thought-out, this is fairly simple to achieve.

For example, let's say we have two domains, pointing at a single hosted root; domain-one.com and domain-two.com. In our web server root, we simply create a folder for each domain, perhaps one/, and two/ then in our main (root) .htaccess, rewrite all incoming requests, like this..

All requests NOT already rewritten into these folders, transparently rewrite..

#two domains served from one root.. RewriteCond %{HTTP_HOST} domain-one.com RewriteCond %{REQUEST_URI} !^/one RewriteRule ^(.*)$ one/$1 [L] RewriteCond %{HTTP_HOST} domain-two.com RewriteCond %{REQUEST_URI} !^two RewriteRule ^(.*)$ two/$1 [L]

All requests for the host domain-one.com are rewritten (not R=redirected) to the one/ directory, so long as they haven't already been rewritten there (the second RewriteCond). Same story for domain-two.com. Note the inconsistency in the RewriteCond statement; !^/dir-name and !^dir-name should both work fine.

Also note, with such a simple domain & folder naming scheme, you could easily merge these two rule sets together. This would be unlikely in the real world though, which is why I left them separate; but still, worth noting.

Other general settings and php directives can also go in this root .htaccess file, though if you have any further rewrite you'd like to perform; short URL's, htm to php conversion and what-not; it's probably easier and clearer to do those inside the sub-directory's .htaccess files.

automatic translation

If you don't read English, or some of your guests don't, here's a neat way to have the wonderful Google translator provide automatic on-the-fly translation for your site's pages. Something like this..

they simply add their country code to the end of the link, or you do..

Options +FollowSymlinks

RewriteEngine on

RewriteRule ^(.*)-fr$ http://www.google.com/translate_c?hl=fr&sl=en&u=http://corz.org/$1 [R,NC]

RewriteRule ^(.*)-de$ http://www.google.com/translate_c?hl=de&sl=en&u=http://corz.org/$1 [R,NC]

RewriteRule ^(.*)-es$ http://www.google.com/translate_c?hl=es&sl=en&u=http://corz.org/$1 [R,NC]

RewriteRule ^(.*)-it$ http://www.google.com/translate_c?hl=it&sl=en&u=http://corz.org/$1 [R,NC]

RewriteRule ^(.*)-pt$ http://www.google.com/translate_c?hl=pt&sl=en&u=http://corz.org/$1 [R,NC]

You can create your menu with its flags or whatever you like, and add the country code to end of the links.. Want to see this page in French?

Although it is very handy, and I've been using it here for a couple of years here at the org, for my international blog readers, all two of them, heh. Almost no one knows about it, mainly because I don't have any links . One day I'll probably do a wee toolbar with flags and what-not. Perhaps not. Trouble is, the Google translator stops translating after a certain amount of characters (which seems to be increasing, good), though these same rules could easily be applied to other translators, and if you find a good one, one that will translate a really huge document on-the-fly, do let me know!

If you wanted to be really clever, you could even perform some some kind of IP block check and present the correct version automatically, but that is outside the scope of this document. note: this may be undesirable for pages where technical commands are given (like this page) because the commands will also be translated. "RewriteEngine dessus" will almost certainly get you a 500 error page!

`httpd.conf`

Remember, if you put these rules in the main server conf file (usually httpd.conf) rather than an .htaccess file, you'll need to use ^/... ... instead of ^... ... at the beginning of the RewriteRule line, in other words, add a slash.

`inheritance..`

If you are creating rules in sub-folders of your site, you need to read this.

You'll remember how rules in top folders apply to all the folders inside those folders too. we call this "inheritance". normally this just works. but if you start creating other rules inside subfolders you will, in effect, obliterate the rules already applying to that folder due to inheritance, or "decendancy", if you prefer. not all the rules, just the ones applying to that subfolder. a wee demonstration..

Let's say I have a rule in my main /.htaccess which redirected requests for files ending .htm to their .php equivalent, just like the example at the top of this very page. now, if for any reason I need to add some rewrite rules to my /osx/.htaccess file, the .htm >> .php redirection will no longer work for the /osx/ subfolder, I'll need to reinsert it, but with a crucial difference..

this works fine, site-wide, in my main .htaccess file

# main (top-level) .htaccess file..# requests to file.htm goto file.php Options +FollowSymlinks RewriteEngine on
RewriteRule ^(.*)\.htm$ http://corz.org/$1.php [R=301,NC]

Here's my updated /osx/.htaccess file, with the .htm >> .php redirection rule reinserted..

but I'll need to reinsert the rules for it to work in this sub-folder

# /osx/.htaccess file..Options +FollowSymlinks RewriteEngine on RewriteRule some rule that I need here RewriteRule some other rule I need here
RewriteRule ^(.*)\.htm$ http://corz.org/osx/$1.php [R=301,NC]

Spot the difference in the subfolder rule, highlighted in red. you must add the current path to the new rule. now it works again, and all the osx/ subfolders will be covered by the new rule. if you remember this, you can go replicating rewrite rules all over the place.

If it's possible to put your entire site's rewrite rules into the main .htaccess file, and it probably is; do that, instead, like this..

it's a good idea to put all your rules in your main .htaccess file..

# root /.htaccess file..Options +FollowSymlinks RewriteEngine on # .htm >> .php is now be covered by our main rule, there's no need to repeat it. # But if we do need some /osx/-specific rule, we can do something like this..
RewriteRule ^osx/(.*)\.foo$ /osx/$1.bar [R=301,NC]

Note, no full URL (with domain) in the second example. Don't let this throw you; with or without is functionally identical, on most servers. Essentially, try it without the full URL first, and if that doesn't work, sigh, and add it - maybe on your next host!

The latter, simpler form is preferable, if only for its tremendous portability it offers - my live site, and my development mirror share the exact same .htaccess files - a highly desirable thing.

By the way, it perhaps doesn't go without saying that if you want to disable rewriting inside a particular subfolder, where it is enabled further up the tree, simply do:

handy for avatar folders, to allow hot-linking, etc..

RewriteEngine off

`conclusion`

In short, mod_rewrite allows you to send browsers from anywhere to anywhere. You can create rules based not simply on the requested URL, but also on such things as IP address, browser agent (send old browsers to different pages, for instance), and even the time of day; the possibilities are practically limitless.

The ins-and outs of mod_rewrite syntax are topic for a much longer document than this, and if you fancy experimenting with more advanced rewriting rules, I urge you to check out the apache documentation.

If you have apache installed on your system, there will likely be a copy of the apache manual, right here, and the excellent mod_rewriting guide, lives right here. do check out the URL Rewriting Engine notes for the juicy syntax bits. That's where I got the cute quote for the top of the page, too.

;o)

(or

`troubleshooting tips..`

`rewrite logging..`

When things aren't working, you may want to enable rewrite logging. I'll assume you are testing these mod_rewrite directives on your development mirror, or similar setup, and can access the main httpd.conf file. If not, why not? Testing mod_rewrite rules on your live domain isn't exactly ideal, is it? Anyway, put this somewhere at the foot of your http.conf..

Expect large log files..

## ONLY FOR TESTING REWRITE RULES!!!!! # RewriteLog "/tmp/rewrite.log" #RewriteLogLevel 9
RewriteLogLevel 5

Set the file location and logging level to suit your own requirements.

If your rule is causing your Apache to loop, load the page, immediately hit your browser's "STOP" button, and then restart Apache. All within a couple of seconds. Your rewrite log will be full of all your diagnostic information, and your server will carry on as before.

Setting a value of 1 gets you almost no information, setting the log level to 9 gets you GIGABYTES! So you must remember to comment out these rules and restart Apache when you are finished because, not only will rewrite logging create space-eating files, it will seriously impact your web server's performance.

RewriteLogLevel 5 is very useful, I find.

`Fatal Redirection`

If you start messing around with 301 redirects [R=301], aka. "Permanently Redirected", and your rule isn't working, you could give yourself some serious headaches..

Once the browser has been redirected permanently to the wrong address, if you then go on to alter the wonky rule, your browser will still be redirected to the old address (because it's a browser thing), and you may even go on to fix, and then break the rule all over again without ever knowing it. Changes to 301 redirects can take a long time to show up in your browser.

Solution: restart your browser, or use a different one.

Better Solution: Use [R] instead of [R=301] while you are testing . When you are 100% certain the rule does exactly as it's expected to, then switch it to [R=301] for your live site.

`debug-report.php`
`A php script to make your mod_rewrite life easier!`

When things aren't working as you would expect, you probably won't have to enable rewrite logging to get the information you need. What's usually required is no more than a quick readout of all the current variables, $_GET array, and so on; so you can see exactly what happened to the request.

For another purpose, I long ago created debug.php, and later, finding all this information useful in chasing down wonky rewrites, created a "report" version, which rather than output to a file, spits the information straight back into your browser, as well as $_POST, $_SESSION, and $_SERVER arrays, special variables, like __FILE__, and much more.

Usage is simple; you make it your target page, so in a rule like this..

RewriteRule ^(.*)\.html$ /catch-all.php?var=$1

Posted By: ExpertzWeb

Posted in Apache, Web Development Tagged: .htaccess tutorial, .htaccess URL ReWrite, .htacess tips and tricks

37 More Shocking jQuery Plugins

Miracle Studios — Sat, 11 Oct 2008 18:45:52 +0000

It’s really amazing to see what one can create using jQuery. Developers just don’t stop making incredibly interactive web applications every now and then. This post just demonstrates excellent examples of some of the best jQuery plugins out there.

jQuery Sliders

1) Slider Gallery- A similar effect used to showcase the products on the Apple web site. This ‘product slider’ is similar to a straight forward gallery, except that there is a slider to navigate the items, i.e. the bit the user controls to view the items. Simple stuff.

Live Demo: Here

2) Accessible slider- Illustrations and code samples showing how to make a slider UI control accessible to those who aren’t running JavaScript or CSS.

Live Demo: Here

jQuery Manipulating Images

3) crop, labelOver and pluck-Crop-Gives your visitors the power to crop any image on the fly using JavaScript only. Also there are 2 other plugins: LabelOver and Pluck.

Live Demo Of Crop: Here
Live Demo of LabelOver: Here

4) Semitransparent rollovers -A simple method for enabling semi-transparent rollovers which actually work on IE 6.

Live Demo Of Crop: Here

5) Creating A Sliding Image Puzzle Plug-In- Creates sliding-image puzzles based on containers that have images. Running the demo page we get this output in the image below:

Live Demo: Here

jQuery Navigation Menus

6) Digg Header- This is a replica of the Digg header. Fluid width (but only to a point!), drop down menus, attractive search, easy to change colors… There is a lot of smarts in a small place in this example!

Live Demo: Here
Download Code: From Here

7) IconDock- a jQuery JavaScript library plugin that allows you to create a menu on your web like the Mac OS X operating system dock effect one.

Live Demo: Here
Download Code: From Here

jQuery Accordions

8 ) Horizontal Accordion- This plugin provides some simple options to alter the accordion look and behavior.

9) HoverAccordion- A jQuery Plugin for no-click two-level menus.

jQuery Image Viewer

10) Step Carousel Viewer- Displays images or even rich HTML by side scrolling them left or right. Users can step to any specific content on demand.

11) Featured Content Glider- You can showcase new or featured contents on your page, by turning ordinary pieces of HTML content into an interactive, “glide in” slideshow. Supports two different display modes- “manual” and “slideshow.”

jQuery Charts

12) jQuery + jFlot - Plots, Canvas and Charts.

13) Accessible charts using canvas and jQuery - A proof of concept for visualizing HTML table data with the canvas element by using jQuery to provides several types of editable graphs, such as Pie, Line, Area, and Bar.

Live Demo: Here

jQuery Editors

14) Small Rich Text Editor - Small footprint, Cross-browser, Ajax Image upload, HTML Cleanup with PHP back-end rich text editor with all basic Rich Text functionality included.

Live Demo: Here
Download Code: From Here

15)markItUp! Universal markup editor- This plugin allows you to turn any textarea into a markup editor. Html, Textile, Wiki Syntax, Markdown, BBcode or even your own Markup system can be easily implemented. Worth Checking!

Live Demo: Here
Download Code: From Here

jQuery Flash Plugins

16) jQuery Flash Plugin- A jQuery plugin for embedding Flash movies.

17) jMP3- jMP3 is an easy way make any MP3 playable directly on most any web site (to those using Flash & JS),

using the sleek Flash Single MP3 Player & jQuery.

18) jQuery Media Plugin- It can be used to embed virtually any media type, including Flash, Quicktime, Windows Media Player, Real Player, MP3, Silverlight, PDF and more, into a web page.

jQuery Tabs

You can use the a href=”http://docs.jquery.com/UI/Tabs”>jUI/Tabsto create more dynamic tab functionality.

19) jQuery Tabs- Typical tabbing structure which degrade nicely without JavaScript enabled.

Live Demo: Here

jQuery LightBox

20) Fancy Box- Kinda different image zooming script for those who want something fresh. Features: Automatically scales large images to fit in window, adds a nice drop shadow under the full-size image, image sets to group related images and navigate through them

21) Thickbox Plus- Click an Image to view a ThickBox image that is resized when your window is resized to fit the window.

Live Demo: Here
Download Code: From Here

jQuery Datagrid plugins

22) Flexi Grid- Lightweight but rich data grid with resizable columns and a scrolling data to match the headers, plus an ability to connect to an xml based data source using Ajax to load the content. Similar in concept with the Ext Grid only its pure jQuery love, which makes it light weight and follows the jQuery mantra of running with the least amount of configuration.

Live Demo: Here
Download Code: From Here

23) Query Grid 3.1- Datagird plugin for jQuery, where the user can manipulate the number of requested pages with adding, updating, deleting row data.

Live Demo: Here
Download Code: From Here

jQuery Field Manipulation

24) FaceBook Like – jQuery and autosuggest Search Engine- This autosuggest search engine is inspired from facebook for design,

use jQuery as ajax framework and BSN Autosuggest libs.

Live Demo: Here

25) Masked Input Plugin- It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates,phone numbers, etc).

jQuery with cool animation Effects

26) jQuery Enchant- Devoted to rich effects. It already features all effects you know from scriptaculous/interface, as well as many more great additions: color animations, class animations and highly configurable effects.

27) EasyDrag jQuery Plugin- Add the ability to drag and drop almost any DOM element without much effort. So it’s simple to use and you can also attach handlers both to the drag and to the drop events.

28) Simple Effects Plugins- Nice animation effects that can easily toggle, hide, show, fade, slide elements.

29) Slide out and drawer effect- A demonstration of accordion effect in action, where the mouse settles on the title of the ’section’ and the associated links are exposed. What makes this effect particularly cool, is that the drawers maintain a fixed height and slide between restricted area.

Live Demo: Here

jQuery Worth Checking Plugins

30) crop, labelOver and pluck- How to create a drop cap and apply it to every paragraph in a DIV.

31) Style Author Comments Differently with jQuery- Nice custom styling applied to comments left by the author.

32) Creating a fading header- A simple example using jQuery and CSS that shows you how to create the fading header technique.

Live Demo: Here

33) Coda Bubble- A demonstration of the ‘puff’ popup bubble effect as seen over the download link on the Coda web site

Live Demo: Here

34) Another In-Place Editor- This is a script that turns any element, or an array of elements into an AJAX in place editor using one line of code.

Live Demo: Here

35) jQuery Taconite- The jQuery Taconite Plugin allows you to easily make multiple DOM updates using the results of a single AJAX call. It processes an XML command document that contain instructions for updating the DOM.

Live Demo: Here

jQuery Web Applications

36) GenFavicon- A cool online generator that creats little favicons used throughout the web. You have the option of either specifying a URL for the image you’d like to convert or uploading it to the site for processing.

37) WriteMaps- WriteMaps provides an easy-to-use interface for creating, editing, and sharing your sitemaps.

Posted by: Expertz Web

Posted in Latest News, Web Development Tagged: java, java plugins, java script, java script plugins, java script query, java tutorial, latest java script, latest java script plugins, plugins

45+ Fresh Out of the oven jQuery Plugins

Miracle Studios — Sat, 11 Oct 2008 18:38:40 +0000

This month ago we’ve presented the 50 favorite jQuery plugins and 37 More Shocking jQuery Plugins for many developers use and we promised that the second version will be coming soon. Today, we are going to introduce 45+ more jquery plugins that were recently created, so you don’t have to do the search as we did it and will continue to do it to build a useful library of jquery plugins and solutions.

Image SlideShows and Galleries

1) Galleria -Is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS.

2) jQuery Multimedia Portfolio -Non obstrusive and accessible portfolio supporting multiple media : photos, video (flv), audio (mp3), will automatically detect the extension of each media and apply the adapted player.

3) wSlide -Change your lists in animated box (with pagination)

Pagination

5) Pagination- Create navigational elements, when you have a a large list of items you can display them grouped in pages and present navigational elements to move from one page to another.

Navigation

6) Accordion Menu -In this Accordion menu example, the menu headers are H3 tags, with each sub menu being UL tags that expand/ contract.

7) jQuery Treeview Plugin

8 ) Coda-Slider- Amazing jQuery Coda-Slider can be used for Nice, slick content presentation.

9) Simple Horizontal Accordion

Tables and Grids

10) TableRowCheckboxToggle – It generically adds the toggle function to any table rows you specify based on the css class names. It will by default toggle any checkboxes within the table row.

11) TableEditor – TableEditor provides flexible in place editing of HTML tables.

12) Ingrid – ngrid is an unobtrusive jQuery component that adds datagrid behaviors (column resizing, paging, sorting, row and column styling, and more) to your tables.

Forms

13) jQuery Nice Form – Create custom looking form elements, that function like normal form elements.

14) Easy Multi Select Transfer- Allowing options to be traded from one multi select to another.

15) jQuery Form Plugin- Allows you to easily and unobtrusively upgrade HTML forms to use AJAX by using ajaxForm and ajaxSubmit methods to gather information from the form element and determine how to manage the submit process which allows you to have full control over how the data is submitted.

Scrolling

16) jQuery.SerialScroll – This plugin allows you to easily animate any series of elements, by sequentially scrolling them. You can use it as a section slider, text scroller, slideshows, and news ticker.

17) liScroll – LiScroll is a jQuery plugin that transforms any given unordered list into a scrolling News Ticker

18) Spinner – Allows you to cycle through millions of items or groups of items with the appearance of a scroller and functionality of a page horizontally or vertically.

Form Elements

19) jWYSIWYG – This plugin is an inline content editor to allow editing rich HTML content on the fly.

20) Simple chained combobox -Very simple chained selects plugin for jQuery with JSON processing and callback feature, chain multiple selects with ease.

21) jQuery checkbox

22) jGrow -jGrow is a jQuery plug-in that makes the textarea adjust its size according to the length of the text.

Toggling

23) jTruncate in Action – jTruncate provides simple yet customizable truncation for text entities in your web page.

24) toggleElements – toggleElements is designed to hide informations on your site and show it only when the user requests more information.

Gradients and Shadows

25) Drop Shadows – Interesting Drop shadow effect generated by a jQuery Plugin.

26) Gradient jQuery plugin – It allows you to define a gradient fill and have an element filled with a gradient. You can set the direction of the gradient (right-left or up-down) and the opacity of the gradient easily.

27) Gradient – The gradient plugin adds a dynamically created configurable gradient to the background of an element without the use of images.

Lightbox

28) Facebox -Is a jQuery-based, Facebook-style lightbox which can display images, divs, or entire remote pages.

29) jQuery Lightbox Plugin- (balupton edition)

Color Picker

30) jQueryColorPicker – A simple jquery color picker plugin that can make user change the color of the background of the page easily.

This is worth checking out

31) Animated InnerFade- Full w3c compliant animated slideshow with sliding effect on large images.

32) Easy POP Show 1.0 Release – Full screen show for slide news or Image Gallery.

33) jqChart- Ajax & Draggable Simple Chart on Canvas+jQuery.

34) UI Datepicker -A simple jQuery UI Datepicker. Just add a text input field to your page and then attach the datepicker to it.

35) JSmile – A totally unobtrusive way for both (x)html and javascript events/functionality, this plug-in allows you to add, and remove, smiles in an entire document or only in some specified element.

36) ImgAreaSelect – imgAreaSelect is a jQuery plugin for selecting a rectangular area of an image.

37) jPrintArea-jPrintArea is a small jquery plugin to print only contents of a specified element.

Check out their demo page

38) jTabber- Allows you to scroll through content by clicking on tabs, without the page having to reload.

39) jQuery Calculation Plug-in – The Calculation plug-in is designed to give easy-to-use jQuery functions for commonly used mathematical functions.

40) jquery.biggerlink – A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link.

41) Humanized Messages- It’s simply a large and translucent message that’s displayed over the contents of your screen. They fade away when the user takes any action (like typing or moving the mouse).

42) Ajax Manager -Helps you to manage AJAX requests and responses (i.e. abort requests, block requests, order responses).

43) Background-Position Animation

44) Lazyload-Delays loading of images in (long) web pages. Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down they are loaded when needed.

Check out their demo page

45) jQuery Tag Suggestion- The same tag suggesting as-you-type support that del.icio.us is uses.

Check out their demo page

Posted by: Expertz Web

Posted in Latest News, Web Development Tagged: java, java plugins, java script, java script plugins, java script query, java tutorial, latest java script, latest java script plugins, plugins

Using htaccess Redirect Rule

Miracle Studios — Sat, 11 Oct 2008 18:29:38 +0000

I will tell you right off the bat that I don’t “get” regular expressions, and I don’t get .htacess rewrite rules. I wish I understood them better, but there’s some part of my brain that just fights me every time I try to get a better all-around understanding. Still, I have to (and want to) do stuff with htaccess, so I end up digging for code online, and trying stuff until something works. I wish I knew more about WHY it worked, but I’m just happy that it works at all.

Now that I’m done with my disclaimer, on to the point of this post. I had to use a htaccess file to redirect a subdomain to a directory in the main domain. For example: http://blog.mysite.com needed to point to http://www.mysite.com/blog/

After much digging and trial and error, this seems to work:

RewriteEngine On RewriteCond %{HTTP_HOST} ^blog\.mysite\.com RewriteRule ^(.*)$ /blog/$1 [L]

Posted by: Expertz Web

Posted in Latest News, Web Development Tagged: htaccess, htaccess Redirect Rule, Redirect Rule, Redirect Rule of htaccess, using htaccess, Using htaccess Redirect Rule

Building Dynamic Menus In wordpress

Miracle Studios — Thu, 09 Oct 2008 12:03:16 +0000

More and more people are using WordPress as a Content Management System (CMS), and for good reason. It’s well supported, produces good mark-up, and it’s flexible. But when using it as a CMS it suddenly becomes very important to optimize the support of WordPress “Pages.” Unlike post, archive, and category links, a web site’s “Pages” have the utmost importance. This article will teach you how to produce a dynamic WordPress “Pages” navigation menu that looks good and behaves as a main navigation menu should.

To Begin With…

The first thing to consider is placement. For a vertical menu I would suggest placing the code I will supply in the sidebar.php file under the “sidebar” div if you have one. And if you’re going for a horizontally-displayed navigation menu I suggest adding the code in the header.php file underneath your main heading.

The Markup

Here’s the mark-up you will want to place in your file of choice.



 Blog Navigation

 Blog Home

 

 RSS Feed

Markup Notes

Now to explain what’s what in the script above.

Note 1

I first identify the menu with a “nav” ID. This isn’t needed for styling since WordPress generates the list-item classes in its core, but I’m using it anyway as it serves two purposes. The “page_item” class doesn’t really need to be there. Go with it; editing core files isn’t advisable as it’ll impede upgrading WordPress. The main reason I offer this is to use #nav as a fragment identifier so as to use it as a bookmark link target for a “Jump to Navigation” link: Jump to Navigation (Code 1)

Note 2

This is a bit of page negotiation since I want the menu to have a home page link — something not provided on the page list by default. When you’re on the index this will say “Blog Navigation” and be styled as a current page link, but if you’re on any other page, including a “paged” home (when you view older posts via a page turner link), the link will say “Blog Home” instead and will look clickable instead of like the “current page” style. (Code 2)

Note 3

This is the meat and potatoes so to speak. This is the code for the dynamic menu produced by the WordPress core. This will produce page links in list item tags:

. Each will bear the “page_item” class except the current page where it’ll also bear the “current_page_item” class. I use only the latter. This conditional tag has two parameters in the function:

sort_column=menu_order — This allows you to use the page ordering feature built into WordPress. This ensures you can put your page links in an order you deem logical.
title_li= — This parameter can contain data such as

Heading

. If it is removed, the word “Pages” will display between the dynamic links and the home page link. If the

heading elements are left blank the word “Pages” will display in the same spot. This would be okay if there was no home page link but that’s not the case, so I give the whole parameter a null value. I could give it a “0” (zero) I suppose. (Code 3)

Note 4

This last link is optional. Use it if your want a prominent link to your Really Simple Syndication or RSS feed. I give this link a special “rss” class so I can give it a unique background image in the style sheet. I add it to the “ul#nav” selector in the style sheet so the same attributes and properties are applied. I then give it a background image in a new CSS block — I’ll show you what I mean next. (Code 4)

Styling the List

What follows are some styles for your Cascading Style Sheet (CSS). These styles will produce block-level links in the vertical format. You can modify these styles to get your desired look, add backgrounds, change colors, anything you wish. To make it a horizontal menu you’ll want to float it left (right reverses the order so you’ll have to modify the scripting and markup) and list items will need the display property, “inline.” You can also give the unordered list a width and center it with margin-auto. You will also want to center-align the text, probably…

Nonetheless, this will offer you a simple copy and paste beginning. (All of this should be put in a container div of 200 pixels with 10 pixels of padding unless you decide to modify dimension and/or units, or you’re doing the horizontal thing.)

 /* This styles the unordered list element to remove bullets and align the text */
ul#nav {
list-style-type : none;
text-align : right;
}

/*
This styles the links. It’s a block-level link and the text is positioned
with padding. Other styles are defined: width, colors, text attributes, etc.
*/
ul#nav a, ul#nav a.rss {
background-color : #d3d3a7;
padding : 15px 5px 2px 10px;
margin-bottom : 10px;
width : 180px;
height : auto;
color : #333;
font-weight : bold;
font-style : normal;
display : block;
text-decoration : none;
}

/* This gives the “rss” class link a background image */
ul#nav a.rss {
background : #d3d3a7 url(images/rss.jpg) no-repeat 2px 2px;
}

/* This is only necessary for IE6 else the link margins will collapse on hover */
ul#nav li {
margin-bottom : 10px;
}

/* This removes the default left margin (indentation) */
ul#nav li {
margin-left : 0;
}

/*
Now to offer some hover and focus styles. Further specification of focus/active styles
could be added but I didn’t do it in this example. I didn’t feel it was needed
*/
ul#nav a:hover, ul#nav a:focus, ul#nav a:active {
background-color : #669900;
color : #fff;
}

/* This offers up a hover/focus state image for the “rss” class link */
ul#nav a.rss:hover, ul#nav a.rss:focus {
background : #669900 url(images/rss_on.jpg) no-repeat 2px 2px;
}

/*
This style the single state of the “current_page_item” class link. Not needed for
the “rss” class link since that target page won’t display the menu
*/
ul#nav li.current_page_item a, ul#nav li.current_page_item a:hover,
ul#nav li.current_page_item a:focus, ul#nav li.current_page_item a:active {
background-color : #9e9e55;
color : #fff;
cursor : default;
text-align : left;
}

Miscellaneous

Here’s some general info.

You could add to the style info above to support child pages, or sub-pages, but the CSS I provided doesn’t support that link type in a special way — the subpage links and the current page link will both be marked the same way.
You could also modify the script part of this menu if you had a static home page. Please note, however, that I’m not sure if a modification is needed to tell the truth. I haven’t tried it in such an application. You tell me.
What I have on this site is custom made because I currently have several non-WordPress pages. Thus, if you want to see an example of this menu, please check out the sidebar on my BeastBlog v.2.0 theme support blog, but please know that it is slightly different than what I’m offering here. I added a “btn” class in addition to the “nav” ID. Doing it this way allows advanced theme users — since the theme is publically available — the ability to easily give additional menus the same styling via the “btn” class (because IDs must be unique on any given page while classes can be used repeatedly).
In my example, when on the home page, I offer a link. This doesn’t have to be the case. A heading in a list item could be styled, plain text could be offered, what ever you want. I chose to do this instead. Laziness.

Posted by: Expertz Web

Posted in Latest News, Web Development Tagged: dynamic menu, dynamic menu in wordpress, dynamic wordpress menu, menu in wordperss, menu tutorial, wordpress, wordpress menu, wordpress tutorial

Get Started with PHP in FileMaker Pro

Miracle Studios — Thu, 09 Oct 2008 11:57:32 +0000

WEB DEVELOPMENT

Get Started with PHP in FileMaker Pro

Leverage the power of PHP, a server-side scripting language, to speed and secure Web queries.

By Bob Bowers, Contributing Editor

PHP is a popular, powerful, and free middleware tool for building Web applications. It’s a server-side embedded scripting language, much like other middleware tools such as Cold Fusion, ASP, JSP, and Lasso. You can configure PHP for use with a variety of Web servers on a variety of platforms, including Linux, Windows, and Mac OS X.

And you can use it to publish FileMaker Pro data to the Web.

You’ve likely heard or read something about the XML capabilities of FileMaker Pro 6. In addition to XML import and export, the Web Companion can output XML in response to an appropriately structured query. It’s this ability that lets PHP communicate with FileMaker Pro.

It’s beyond the scope of this article to teach you how to be a PHP developer. My goal is to teach you enough to whet your appetite and hopefully inspire you to give PHP a try on your next Web project. At the end of the article, I’ll list some resources you can consult for help with configuring and using PHP. Dozens of books on PHP are available as well.

How it works

PHP has built-in functions for sending requests to Web servers and processing the results. Using those functions, PHP can send a query to the Web Companion and get results back in XML. Now, if you had to assemble these queries and parse the incoming XML manually, you’d likely give up on PHP pretty quickly. Thankfully, there’s an easier way. Chris Hansen, a FileMaker developer, has written a class for PHP that does all the hard work for you. The class, which he calls “FX,” is free from his Web site, http://www.iviking.org. Using FX means you don’t have to know a lick of XML to get PHP to interact with FileMaker Pro. You just have to know how to use the functions Chris provides in the class, and that’s fairly easy. The documentation provided with the download is thorough and easy to follow.

Try it out

Often, the best way to understand something new is to play through a simple scenario. After you have a working model, it’s easier to go back and learn variations and exceptions. Let’s look, then, at a simple, typical Web publishing scenario using PHP. Imagine you have a FileMaker Pro database (Employee.fp5) containing employee names and phone numbers. Your goal is to make search and results pages so users can access the database via a browser over the company intranet.

A typical hardware configuration for FileMaker/PHP solutions is to have two machines: a Web server running Apache or IIS, with PHP installed, and a separate machine running FileMaker Unlimited. Your databases must be open on that second machine (locally or as the guest of FileMaker Server) and shared to the Web Companion. To have FileMaker Unlimited respond to requests for XML, the only configuration required is to have the Web Companion enabled. In the Web Companion configuration screen, however, it’s a good idea to restrict access to only the IP address of the Web server. Limiting the traffic to that single IP address secures your data-bases from being accessed directly from a Web browser by hackers.

To test that you have the Web Com-panion configured properly and it will respond to requests for XML, open a browser (on any machine on the network) and type the following URL:

http:// /FMPro?-format=-fmp_xml&-dbnames

In this request, you’re simply asking the Web Companion at that IP address for a list of accessible databases, formatted as XML. If you’re using a recent copy of Microsoft Internet Explorer, you should see the XML result in your browser. With other browsers, you might have to View Source to see the response.

Figure 1: Web interaction topology — In a typical FileMaker/PHP solution, Web users submit requests to a Web Server, which in turn requests information via XML from a FileMaker Unlimited machine.

All of the HTML pages (both static and those with embedded PHP code) reside on the Web server. Users interact with this machine rather than directly with your FileMaker Unlimited machine. Figure 1 illustrates this topology.

Any requests the Web server receives for pages with a .php extension are handed off to PHP for processing. If necessary, PHP talks to the Web Companion on your FileMaker Unlimited machine to send or retrieve data. PHP then passes back plain HTML to the Web server, which is, in turn, sent to the user’s browser. Users never see the PHP code embedded in your HTML pages. They’ll only see the post-processing results, which is simply HTML. So, take the following page for example, which I’ll call test.php:

$a = 5;

$b = 8;

$c = $a * $b;

echo "If you multiply $a and $b, you'll get $c";

?>

When a browser requests test.php, the Web server notices the .php extension, and hands the document off to PHP for processing. PHP executes the program code contained between the symbols. Here, you’re asking PHP to multiply 5 and 8, then write a line of output. After execution, PHP hands back the processed document to the Web server. Thus, what the Web server sends back to the browser is simply:

If you multiply 5 and 8, you'll get 40

Now that you’ve tested both the Web Companion and the Web server independently, it’s time to write your search and results pages. As with other embedded languages (e.g., CDML, Lasso, Cold Fusion, ASP, JSP), you don’t have to have any special tools to embed PHP code in an HTML document. Just about any Web-authoring tool or text editor does the trick.

The page where users enter their search criteria is just a plain old HTML form. To display that form to the user, there’s no need to have PHP talk to the database. It’s only when the form is submitted that PHP has to perform a find in the database. So, keeping formatting to a minimum for now, your search.html page consists of the following:

XYZ Corp Employee Directory

Last Name:

name="LastName">

First Name:

name="FirstName">

Figure 2: Search page — The search page itself is just a plain HTML form, but it contains instructions to send the user’s entries to a PHP page for processing when the form is submitted.

Take a look at the form tag on line 7. A form’s “action” attribute tells the Web server what to do with the form after it has been submitted. In this case, it instructs the Web server to send all the form data to something called findEmp.php, the next page you’re going to write. Figure 2 shows the search page as it would appear to users.

Now you write the code for the search results page, which I’ll call findEmp.php. Remember, the .php extension tells the Web server this page contains embedded PHP code.

include ("FX.php");

$query = new FX("127.0.0.1", "591"); // IP address and

// port of the Web

// Companion

$query->SetDBData ("Employee.fp5");

$query->AddDBParam ('Last Name', $_POST['LastName']);

$query->AddDBParam ('First Name', $_POST['FirstName']);

$result = $query->FMFind();

if ($result['foundCount'] == 0) {

echo "No records matched your selection. Please try

again";

} else {

echo "Search Results

";

echo "

";

echo "

";

foreach ($result['data'] as $recordKey =>$recordData) {

echo "

";

echo "

";

echo "

";

echo "

";

echo "

";

}

echo "

Last Name

First

Name

Phone Number

“.$recordData['Last Name'][0].” “.$recordData['First Name'][0].” “.$recordData['Phone Number'][0].”

";

}

?>

Search Again

The first PHP function invoked is an include function. By including the FX.php document, you'll have access to the functions in the FX library. So, to use FX, all you do is upload FX.php to your Web server and include it at the top of each page you want to connect to a database.

The next chunk of PHP code provides FX with parameters it must have to query the Web Companion. The IP address and port of the FileMaker Unlimited machine are specified as part of the instantiation of a new FX object, called $query here. (FX, by the way, is written using object-oriented techniques. PHP supports an object-oriented style, but doesn't mandate it.) The SetDBData function then specifies the database (and optionally, layout) to query. The two AddDBParam functions turn the user's entries from the search page into search arguments. Because you accessed this page as the result of a form submission, this page has access to all the form parameters submitted by the user. PHP stores this in an array called $_POST.

Figure 3: Finding Fred — The results of your search for “Flintstone.”

In the next line, you invoke the FMFind function and place the results in a variable called, aptly enough, $result. It's at this point that PHP makes a connection to FileMaker. FileMaker responds with a stream of XML (because that's the format PHP requests), and the FMFind function parses the incoming data and puts it into a big, multi-dimensional array. One of the items in that array contains the number of records returned by the query. You use a simple conditional statement to evaluate the number of records, then either output to the browser window a "No records found" message, or proceed to loop through the search results (using the foreach function) and output them to the screen. Figure 3 shows what the search results might look like after searching for "Flintstone" in the Employee database.

With that, this simple example is complete. If you've never seen PHP code before, it might seem a bit strange at first. But really, if you have any experience with procedural or object-oriented programming, you'll pick up PHP syntax quickly.

In addition to searching for records, you can use FX to submit requests to the Web Companion that will add, edit, or delete records from a database. You can also submit multiple requests in a single document. That's akin to using the inline functions of Lasso or CDML.

Worth considering

I hope I've convinced you that PHP is worthy of your consideration as a Web development tool. PHP is powerful, fast, full-featured, well-supported, and easy to learn. To top it off, it's free. Drop Chris Hansen a note thanking him for his generous contribution to the FileMaker community.

Resources

These resources will get you started with FX, PHP, and Web development in general.

http://www.iviking.org -- Chris Hansen's FX site.

http://www.php.net -- Includes installers, tutorials, and online documentation.

Advanced FileMaker Pro 6 Web Development, by Bob Bowers and Steve Lane (Wordware Publishing, 2003).

`Get Started with PHP`

`No reader comments ... yet.`

Want to Build Website With PHP FIlemaker Expertzweb can help you out

Posted in Latest News, Web Desigining Tagged: filemaker, filemaker tutorial, PHP, PHP Filemaker API Tutorial, PHP filemaker Integration, PHP tutorial, php tutorial filemaker web development, start php filemaker, tutorial, Web Development

FileMaker® API for PHP Tutorial

Miracle Studios — Thu, 09 Oct 2008 11:51:35 +0000

Introduction
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6

Introduction

Welcome to the FileMaker API for PHP Tutorial

This tutorial demonstrates key functionality of the FileMaker API for PHP. The tutorial consists of 6 lessons designed to teach you how to use the API to integrate a FileMaker Pro database with a PHP web application. Each lesson introduces a particular capability of the API, explaining how the code is written and how it works.

The tutorial database is a FileMaker questionnaire system (questionnaire.fp7). Each questionnaire record can have multiple related questions. Each question can have multiple related answers. Only one questionnaire is selected to be the active questionnaire. The active questionnaire is the one users are invited to take when using the PHP web application.
When a user completes an online questionnaire, the system adds a respondent record for the user and adds the user’s answers as related records.

The tutorial completes a PHP web application gradually, each lesson building upon the previous lesson as follows:

Lesson 1
- Setting up the FileMaker database object
  - What is necessary for me to prepare the FileMaker database object for use in my own custom web applications?
- Perform Find All
  - How can I find all records in a database and display them on the web?
- Perform Find
  - How can I find a particular record in the database and display it on the web?
Lesson 2
- Display Container Images
  - How can I display web-compatible images in container fields on my website?
- Use the ContainerBridge.php
  - What is the ContainerBridge.php file and how does it work?
Lesson 3
- Display FileMaker Value Lists
  - How can I display FileMaker custom value lists on the web?
- Add Records
  - How do I add records to a FileMaker database from a submitted web form?
Lesson 4
- Get Record by ID
  - How can I retrieve a FileMaker record by its internal ID without performing another find?
- Get Related Set (Portal)
  - How can I display records from a FileMaker portal on my website?
Lesson 5
- Add Related Records
  - How can I add records to a portal from my website?
Lesson 6
- Review of Get Related Set (Portal)
  - How can I display records from a FileMaker portal on my website?
- Customize Format with Cascading Style Sheets
  (CSS)
  - How can I change the look of my HTML output using Cascading Style Sheets?

This tutorial doesn’t cover all of the API. However, after you complete these lessons, you will have a good foundation. To discover more about the API, see the FileMaker API for PHP documentation.

To view the FileMaker API for PHP documentation, go to the FileMaker Server Admin Console Start Page and click “PHP Site Assistant and XSLT Site Assistant Tools.” On the Web Publishing Tools page, click “FileMaker API for PHP Documentation.” Use the documentation as a reference while you complete this tutorial. This reference will help you discover how to use the FileMaker API for PHP more completely.

You should also become familiar with the questionnaire.fp7 database. Discover how it works and how questionnaires are built by creating questions with multiple answers. Your knowledge of the questionnaire.fp7 design will be an integral part of understanding how the tutorial PHP application uses the API.

Getting Started

Setup and Installation

You must have FileMaker Server 9 installed and it must host the questionnaire.fp7 database. The tutorial folder must be hosted on the web server machine that is part of your FileMaker Server deployment.

For more information on the installation and deployment of FileMaker Server 9, see the FileMaker Server Getting Started Guide. For more information about the FileMaker API for PHP, see FileMaker Server Custom Web Publishing with PHP.

Suggested Knowledge and Skills

You should be familiar with HTML programming. This includes HTML declarations, headers, and element tags. If you need more information on programming web pages with HTML, see the XHTML Tutorial at W3Schools.

You should be familiar with PHP programming. This includes standard output, variables, arrays, conditional loops, objects, methods, and functions. For more information on programming with PHP, see the PHP Tutorial at W3Schools.

You should be comfortable using a text editor with HTML and PHP. This tutorial requires the use of a text editor to view and modify HTML and PHP code.

You should have a working knowledge of FileMaker Pro database design. This includes fields, relationships, layouts, portals, and containers. For more information on designing databases with FileMaker Pro, see the FileMaker Pro documentation.

Best Practices

When editing records in FileMaker Pro, remember to exit or commit the record in order for changes to take effect. Web pages do not reflect changes entered into the database until the record has been exited.

To view the PHP pages of each lesson in your web browser, you must supply the fully qualified URL in order for the PHP code to execute. For example, if the files are hosted on your local machine, point your browser to a URL that starts with “http://localhost/…”. Do not use the local file path which may start with “file:///Volumes/…”. Using a “file://” URL results in the display of PHP code, not the execution of PHP code. Always make sure the URL begins with “http”, or “https” if you have set up SSL on your web server.

Lesson 1

Objective

Lesson 1 details the essentials for using the FileMaker API for PHP in two PHP files: home.php and dbaccess.php. The home.php file serves as a web browser starting point, and the dbaccess.php file sets up a FileMaker object that represents the database. These pages show the basic steps for instantiating the FileMaker database object, setting its key properties, and performing a find on the questionnaire.fp7 database.

Start

To view the tutorial example, direct your web browser to home.php located inside the Lesson1 folder. This page displays the welcome screen for the FileMaker Questionnaire System. When the page loads, a connection occurs behind the scenes between PHP and the Web Publishing Engine, resulting in a found record from the questionnaire.p7 database.

Using your text editor, open the file home.php inside the Lesson1 folder. Locate the following code just after the body tag.

This PHP statement includes, or loads, the dbaccess.php file. The dbaccess.php file contains functions which set up the FileMaker database object and prepare it for database operations. Consequently, API methods in home.php will not work without it. Although the methods in dbaccess.php could have been written in the home.php file, they have been separated for easier debugging and maintenance.

Set up the FileMaker Database Object

The dbaccess.php file contains code for setting up the FileMaker database object. It plays a fundamental role in building the questionnaire application. Follow these steps to set up the FileMaker object:

Load the FileMaker API for PHP
Assign an instance of the FileMaker database class to a variable
Set key properties for the new FileMaker instance

Using your text editor, open the file dbaccess.php located in the Lesson1 folder and follow the description of each step below.

1. Load the FileMaker API for PHP

To use the FileMaker API, it must first be loaded into PHP memory. This is done with the require statement.

require_once (‘FileMaker.php’);

Once loaded, you can create instances of the FileMaker database class, using them for database connections in your web application. An attempt to use the API without loading it first will result in an error.

2. Assign an instance of the FileMaker database class to a variable

An instance of the FileMaker database class must be created before it can be used. It must also be assigned to a variable to refer to it in the code.

$fm = new FileMaker();

The above code creates an instance of the FileMaker database object. It is referred to as the variable $fm.

3. Set key properties for the new FileMaker instance

The FileMaker database object has a set of properties which can be set at any time. Some properties, however, must be set before database operations can occur. Here is the code which sets the properties required for this tutorial.

$fm->setProperty(‘database’, ‘questionnaire’);

$fm->setProperty(‘username’, ‘web’);

$fm->setProperty(‘password’, ‘web’);

Note – The database name questionnaire does not need the fp7 extension added in the parameter.

Note – See the FileMaker API for PHP documentation for a list of the FileMaker database class properties and their descriptions.

The dbaccess.php file contains very little code, but it effectively prepares the Filemaker object for use. After the file is loaded, the FileMaker object is useable as the variable $fm and key properties are set to their required values. The dbaccess.php file enables the home.php file to communicate with the questionnaire.fp7 database.

Perform Find, Perform Find All

The home.php file performs two database operations: Find All (Show All Records) and Find. To view the code for these operations, open the home.php file in your text editor. To view the database for these operations, open the questionnaire.fp7 file that you hosted on FileMaker Server.

1. Find All (Show All Records)

The questionnaire.fp7 database contains a layout called Active Questionnaire. This layout serves as an interface; it contains only one record in the table. On this layout, users select which questionnaire is the active questionnaire. The web application needs to retrieve the ID of this active questionnaire.

The active questionnaire ID is retrieved by performing a Find All (Show All Records) on the layout Active Questionnaire. This operation uses the command object FileMaker_Command_FindAll.

Note - See the FileMaker API for PHP documentation for a list of command objects and their methods.

An instance of the FileMaker_Command_FindAll object is created by having the $fm (FileMaker database instance) execute its newFindAllCommand() method, specifying (in parenthesis) the name of the layout Active Questionnaire. The layout determines which table occurrence is used (context) and which fields are returned (results).

The FileMaker_Command_FindAll instance must be assigned to a variable as the following example shows.

$findCommand = $fm->newFindAllCommand(‘Active Questionnaire’);

The above code assigns a new FileMaker_Command_FindAll object to the variable $findCommand. The Find All command is performed with the execute() method. The find results must be assigned to a variable.

$result = $findCommand->execute();

It is possible, after executing a command, that an error will occur. If an error does occur (or no matching records are found), the $result variable is assigned a FileMaker_Error object. Use the following code to check for the FileMaker_Error object. The error message is displayed by using the getMessage() method.

if (FileMaker::isError($result)) {

echo “

Error: ” . $result->getMessage() . “

”;

exit;

}

If no error has occurred, the variable $result contains an array of FileMaker_Record objects, one for every record in the found set. Use the $result variable to retrieve the first record in the Find All result. Because PHP arrays are indexed numerically by default, you can get the first record by using the following code.

$record = $records[0];

This code assigns a FileMaker_Record object containing the first record in the found set to the variable $record. You can retrieve the contents of the questionnaire_id from this record by using the getField() method. The results of the getField() method must be assigned to a variable.

$active_questionnaire_id = $record->getField(‘questionnaire_id’);

This variable now contains the ID of the active questionnaire. The next step uses this variable as a parameter in the next find.

Note - See the FileMaker API for PHP documentation for a list of objects and their methods.

2. Find

Now that you have the ID of the active questionnaire, you can use it to Find the questionnaire record. The code for performing this operation is located near the bottom of the home.php file. The operation uses the command object FileMaker_Command_Find.

An instance of the FileMaker_Command_Find is created by having the $fm (FileMaker database instance) execute its newFindCommand() method, specifying (in parenthesis) the name of the layout Active Questionnaire. The layout determines which table occurrence is used in the find and which fields are returned in the results.

The FileMaker_Command_Find instance must be assigned to a variable as the following example shows.

$findCommand =& $fm->newFindCommand(‘questionnaire’);

To add criteria to the find, use the addFindCriterion() method. The addFindCriterion() method takes two parameters: fieldName and searchParameter. Pass the “Questionnaire ID” field name (as defined in FileMaker Pro) and the variable $active_questionnaire_id as parameters.

$findCommand->addFindCriterion(‘Questionnaire ID’, $active_questionnaire_id);

Note – The addFindCriterion() method can be called multiple times, simulating the logical AND which occurs when entering multiple find criteria into a single find request within FileMaker Pro.

After the find criteria have been added, the execute() method is used to perform the find. The results of the execute() method must be assigned to a variable.

$result = $findCommand->execute();

The $result variable now contains an array of FileMaker_Record objects. Because the find was performed on the layout questionnaire, each record in $result contains the values for every field on the questionnaire layout.

The final code in this page uses PHP echo statements and the getField() method to output the Questionnaire Name and Description fields on the home.php page.

Lesson 2

Objective

Lesson 2 covers the code required to display FileMaker Pro container images on the web. If you store web-compatible images in a FileMaker Pro database, you can use the FileMaker API for PHP to retrieve those images and display them on your web site.

Start

Open the FileMaker API Tutorial database questionnaire.fp7 and make sure that the active questionnaire has a web compatible image in the container field. Next, view the PHP tutorial example by opening the Lesson2 home.php file in your web browser. Notice the page displays the image of the active questionnaire. Try changing the container image in the FileMaker database. Make sure you exit the record when you are done. Refresh your browser and watch the website update with the new image.

Display Container Image

To see how the API is used for this operation, open the file home.php in the folder Lesson2. View the last PHP statements in the file, paying particular attention to the (image) tag and its src (source) attribute.

Please note the following points regarding this technique.

The container field Graphic is on the layout questionnaire (which is the layout of the previous find). Remember, only values from fields on the layout used for the find are returned to the API.
The value of the Graphic field returned is not an image, but a special URL which requests the image from the Web Publishing Engine.

echo ‘getField(‘Graphic’)) . ‘”>’;

Because an HTML (image) tag must have a file path as its src (source) attribute, this lesson uses a separate file to actually retrieve the image. The file that retrieves the container image is called ContainerBridge.php, and its filename appears inside the src (source) attribute of the (image) tag.

The ContainerBridge.php file does not know which image you want displayed. To specify the image, you must append the Graphic field value to the end of the src (source) URL. In HTML, this is called the GET method.

Using a name/value pair, and starting with a question mark, concatenate the desired string. The name is set to “path” and the value is set to the getField() method result, passing the name of the container field (Graphic) in parenthesis.

Note – The getField() result is passed to the PHP urlencode() function to ensure that special characters are correctly encoded for a URL.

Using ContainerBridge.php

Using your text editor, open the file ContainerBridge.php in the Lesson2 folder. This simple script uses the getContainerData() FileMaker_Record method to retrieve the actual image.

For getContainerData() to work, you must pass the field results from getField() (of a container field) to the getContainerData() method in parenthesis. In home.php, the result from getField() for the Graphic field was passed through the URL. In ContainerBridge.php, the result is retrieved from the URL via the path element of the $_GET array and passed to the getContainerData() method.

echo $fm->getContainerData($_GET['path']);

The ContainerBridge.php file simple retrieves the path of the specified image from the FileMaker Pro database so that the home.php file can use it in the tag to display the image in the web browser.

Note – See the FileMaker API for PHP documentation for a list of FileMaker_Record object methods.

Lesson 3

Objective

Lesson 3 covers the code required to create a dynamic web form using FileMaker layout objects. It also discusses the code required for adding a new FileMaker record from a web form submission. This lesson uses two additional PHP files: Respondent.php and handle_form.php. The Repondent.php file serves to dynamically generate a web form, while the handle_form.php file is used to validate form entries and enter them into the questionnaire.fp7 database as a new record.

Start

Open the questionnaire web site by pointing your browser to the home.php file in the Lesson3 folder. This version of the page displays a Continue button for you to start the questionnaire application. When you click the Continue button, you are redirected to the Respondent.php file. Enter your information into the web form and click Submit; retry if you did not enter enough information. When your form validates, you see the Thank You message and the information you entered is added to the questionnaire.fp7 database as a new record.

Retrieve Value List Items

To view how this application works, open the Respondent.php page in your text editor. Note that the dbaccess.php file is included near the top. As discussed in Lesson 1, this include statement ensures that you have an instance of the FileMaker database class, and that the instance can be used as the variable $fm.

Notice the Respondent.php radio button form element called “prefix”. This element derives its values from the questionnaire.fp7 FileMaker Pro database by using its value list of the same name. This technique allows you to build a dynamic form element based on a value list defined in the FileMaker database. In this way, you don’t have to update your PHP code every time the value list changes in the database. This technique is implemented in the following steps:

Retrieve a layout object via the getLayout() method (passing the layout name in parenthesis)
- The getLayout() method returns a FileMaker_Layout object
Retrieve the value list values via the getValueList() method
- getValueList() is a method of the FileMaker_Layout object
Loop through the array of values and output each as a radio button

When using this technique, remember that the layout specified must contain a field which is formatted by the value list specified. If a value list is requested with the getValueList() method, and the value list has not been formatted to any field on the layout specified with getLayout(), an error will result. Here is the code which is used to display the dynamic radio buttons.

$layout =& $fm->getLayout(‘Respondent’);
$values = $layout->getValueList(‘prefixes’);
foreach($values as $value){

echo ‘’ . $value . ‘ ‘;
}

Note – See the FileMaker API for PHP documentation for a list of FileMaker_Layout object methods.

Note - The form in Respondent.php also contains several hidden form elements. One named “active_questionnaire_id” contains the questionnaire ID from home.php. This form passes the ID into handle_form.php where it will be used in Lesson 4.

Add New Record

When the Respondent.php form has submitted the data, values are passed to the action page handle_form.php via the POST method. Using your text editor, open the handle_form.php file located in the Lesson3 folder.

Notice that the user-submitted data is assembled into an array and assigned to the variable $respondent_data. In this associative array, the Key for each element is the exact name of the FileMaker field that the data is to be posted to. The Value of each element corresponds to the values submitted from the HTML form element within the $_POST array. This $respondent_data array is used by the FileMaker object when creating the database record.

After assembling the data array, the PHP code performs some simple validation checks. These validation methods use PHP code explicitly; there is no validation performed by FileMaker Server during this operation.

After the user data passes validation, a new record can be created in two simple steps:

Create a new FileMaker_Command_Add object, passing two parameters:
- layout name (the layout must have the necessary fields on it)
- data array ($respondent_data)
Add the record with the execute() method

$newRequest =& $fm->newAddCommand(‘Respondent’, $respondent_data);
$result = $newRequest->execute();

Remember, when creating a new FileMaker_Command_Add object, you must specify the name of the layout. The layout name determines which table occurrence is used (context) and which fields are returned (results). The fields used to enter data must be on the layout.

In Lesson 4, the handle_form.php page will be augmented to use the added record and display the first question.

Lesson 4

Objective

Lesson 4 covers the code required to retrieve a FileMaker record by its ID and retrieve related records from a portal. Portals are powerful controls used in FileMaker Pro solutions. The FileMaker API for PHP has special methods designed to work with portal data. This lesson introduces some of that functionality.

Start

Open the FileMaker Pro questionnaire.fp7 database which is hosted on FileMaker Server. Click the Edit Questionnaire button and make sure the active questionnaire has at least one record in the Question portal. Then open the Lesson4 home.php file in your web browser. Select the Continue button and enter your respondent information.

Next you are prompted with the first question of the active questionnaire. Open the FileMaker Pro questionnaire.fp7 database again. Locate the first question of the active questionnaire. Try changing the first question type. Click the Edit Answers button and add possible answers. Refresh your web browser to see the updated question.

This lesson introduces two new tasks you can perform: get a record by its ID and retrieve a set of related records from a portal.

Find Record by ID

With your text editor, open the handle_form.php file located inside the Lesson4 folder. Scroll down a third of the file to where the handle_form.php file ended in Lesson 3. Notice that this lesson adds code that requests the record object of the new respondent record. This request is necessary because the Respondent ID field is defined with the Auto Enter Serial Number option in FileMaker Pro and you need to retrieve the Auto Enter number.

As with Find functions in Lesson 1, a new record can be retrieved by using the getRecord() and getField() methods.

$records = $result->getRecords();
$record = $records[0];
$respondent_recid = $record->getField(‘Respondent ID’);

The next task is to retrieve the active questionnaire name. To accomplish this, use the getRecordById() method of the FileMaker instance ($fm).

When using getRecordById(), pass the internal FileMaker record ID and the name of the layout. The layout determines which table occurrence (context) is used and which field values (results) are returned. The code in this page passes the active_questionnaire_id of the $_POST array sent to this file from the respondent form of Respondent.php.

$active_questionnaire_id = $_POST['active_questionnaire_id'];

$active_questionnaire = $fm->getRecordById(‘questionnaire’,$active_questionnaire_id);
$questionnaire_name = $active_questionnaire->getField(‘Questionnaire Name’);

Note – Every record object returned from an API operation contains the internal FileMaker record ID which can be retrieved with the getRecordId() method.

The next task is to retrieve the questionnaire records and display the first question. Search for all questions which match the active questionnaire ID. This find is performed against the Questions layout.

$findCommand =& $fm->newFindCommand(‘Questions’);
$findCommand->addFindCriterion(‘Questionnaire ID’, $active_questionnaire_id);
$result = $findCommand->execute();
$records = $result->getRecords();
$question = $records[0];

Get Related Set

The questionnaire database is designed so that each question has a specific type (for example, text, radio, and checkbox). If the type is for a multiple choice answer, each question can have multiple answer choices. The layout Questions contains a portal which displays the possible answers. If a question has one or more answers, the following code displays the answer choices using the “type” specified.

To explain this code, assume that the question is of type radio. Scroll down the handle_form.php document until you see the else if condition which checks for radio or ranking question types.

else if ($question_type ==”radio” || $question_type ==”ranking”)

If the condition is true, the following code retrieves the related answer choices and displays them as radio button form elements. Answer records from the portal can be retrieved by using the getRelatedSet() method of the FileMaker_Record object.

When calling the getRelatedSet() method, the name of the related table must be passed in parenthesis and the portal defined with this relationship must be on the layout used when retrieving the $question record.

$relatedSet = $question->getRelatedSet(‘question_answers’);

The variable $relatedSet now contains an array of record objects from the related portal. Loop through the array and output the field values for each record found.

foreach ($relatedSet as $relatedRow)
{
$possible_answer = $relatedRow->getField(‘question_answers::answer’);
echo ‘’ . $possible_answer . ‘
’;
}

You could have retrieved the related records by performing a find, but it is much easier to use getRelatedSet() using a portal that already contained the related set.

Lesson 5

Objective

Lesson 5 covers the code necessary to add related records. If you have a portal defined on a layout which allows creation of related records, you can use the FileMaker API for PHP to add related records from the web.

Start

Open your web browser to the home.php page being hosted in the Lesson5 directory. Click the Continue button and complete the online survey. Open the FileMaker questionnaire.fp7 database which is hosted on FileMaker Server. From the Active Questionnaire select the Review Responses button and navigate to the last record in the table. This record contains the respondent information you entered. Each answer is saved as a record in the Responses portal.

Add Related Record (Portal Rows)

Adding portal rows with the FileMaker API for PHP can be done in four steps:

Start with a valid record object
Create a new blank related record
Add data to the fields of the new record (optional)
Commit the new record

Start with a Valid Record Object

With your text editor, open the handle_form.php file located in the Lesson5 tutorial folder. Scroll down and look for the code which retrieves the respondent record:

$respondent_rec = getRespondentRecordFromRespondentID($respondent_recid);

This code uses a function which has been added to the dbaccess.php file. If you open the dbaccess.php in your text editor, you can see this function’s definition near the bottom. Inside the function definition notice that the newFindCommand() method uses the Respondent layout for its context .

$find = $fm->newFindCommand(‘Respondent’);

This function assigns the respondent record object to the $respondent_rec variable. The variable is referenced to the layout Respondent because that layout was the context of the find command. Therefore any methods used by the $respondent_rec variable start from the context of the Respondent layout.

Create a New Blank Related Record

Going back to the handle_form.php file, the next line of code begins to create the new related record.

$new_response = $respondent_rec->newRelatedRecord(‘Responses’);

When this line executes, the variable $new_response is assigned a blank record object (a new record has not yet been created in the FileMaker database).

It is important to understand the context of this operation. This code starts from the layout of the calling record object (Responses) and specified the relationship of a portal on that layout. Then the code passes the related table name to the newRelatedRecord() method.

Add Data to the Fields of the Blank Record (optional)

After you have a new blank record and know which portal context that the record belongs to, you can begin entering data with the setField() method. This method takes two parameters: field name and field value. Because this is a related record, the field name must be expressed with the relationship name and the field name separated by two colons.

$new_response->setField(‘Responses::Question ID’, $cur_question);
$new_response->setField(‘Responses::Response’, $translatedAnswer);

After you have created the new related record and have added data to the appropriate fields, you are ready to commit the entry.

Note – It is not necessary to set field data before committing a new blank record.

Commit the New Record

No new record objects are created in the FileMaker database until they have been committed. The commit() method inserts the FileMaker_Record object into the questionnaire.fp7 FileMaker database.

$result = $new_response->commit();

The $result variable is now assigned the FileMaker_Record object of the new record, and the new record has been created in the FileMaker database. If an error occurs, the variable $result contains a FileMaker_Error object. It is good practice to check for errors after executing the commit() method.

Lesson 6

Objective

Lesson 6 reviews the code necessary for displaying related fields from a portal. It also introduces the basic instructions for using Cascading Style Sheets (CSS) to modify the appearance of your web application.

Start

Open your web browser to the home.php page hosted in the Lesson6 directory. Notice the new look of the site. This formatting comes from a separate CSS page. CSS styles can be used to format HTML code used in your web application and are discussed at the end of this lesson.

Click the Continue button and complete the online survey. Notice that the thankyou.php page displays a summary of the questions you answered. These questions and responses are from a portal on the Respondent layout in the questionnaire.fp7 database. If a FileMaker layout contains portal data, it can be displayed on the web using the FileMaker API for PHP.

Get Related Sets

Using your text editor, open the thankyou.php page which is located in the Lesson6 directory. Scroll to the end of the file and locate the last HTML table.

Notice the code above the table which retrieves the respondent record.

$respondent_record = getRespondentRecordFromRespondentID($respondent_recid);

The getRespondentRecordFromRespondentID() function is defined in the dbaccess.php page. Its context is the Respondent layout in the questionnaire.fp7 database.

Looking inside the HTML table, note that the $respondent_record variable is used to retrieve the set of related records. This is accomplished by using the getRelatedSet() method. To use the getRelatedSet() method, you must specify the related table name of the desired portal and the desired portal must be on the Respondent layout.

$response_related_set = $respondent_record->getRelatedSet(‘Responses’);

The above code assigns an array which contains the records from the portal Responses to the variable $response_related_set. Each response is a FileMaker_Record object. This code uses the getField() method of the FileMaker_Record object to output the portal rows in an HTML table. Remember to use the full name of the related table and field name separated by two colons when you output related fields.

Here is the loop which displays the related set in HTML.

foreach ($response_related_set as $response_related_row)

{

$question = $response_related_row->getField(‘Questions 2::question’);

$answer = $response_related_row->getField(‘Responses::Response’);
//converts any line returns in the answer to commas
$answer = str_replace(“\n”,”, “,$answer);
echo ‘’ . $question . ‘’;
echo ‘’ . $answer . ‘’;

}

Formatting with CSS

You can format your web applications using Cascading Style Sheets (CSS). With your text editor, open the style.css file located inside the Lesson6 folder and review the styles defined for some of the HTML tags. CSS styles can be applied to any HTML tag, allowing you to format multiple items on multiple pages from a single definition.

To apply formatting to a specific HTML tag, you must declare the tag name. Following the tag name, you must state the style attributes enclosed in curly braces. As in PHP, each statement must be terminated by a semi-colon.

body {
background-color: #333333;
padding: 20px;
color: #ffffff;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

After you have created a CSS file, you can apply it to any HTML or PHP document. To apply external styles, you must include or link the style sheet to your document: use the (link) tag in the header of your HTML output.

With your text editor, open the thankyou.php file located in the Lesson6 folder. Inside the header tags, notice the <link> (link) tag which tells the web browser to apply the style.css formatting. When using the tag, be sure to supply the correct path or href to your CSS page.

Style sheets can be used in multiple applications and each application can use multiple style sheets. For more information on CSS styles and their attributes visit the CSS2 reference at W3Schools.

Posted by: Expertz Web

Posted in Uncategorized Tagged: X filemaker X PHP X PHP Filemaker API Tutorial X PHP filemaker Integration X start php filemaker

Getting Started: Ajax

Miracle Studios — Wed, 08 Oct 2008 18:17:54 +0000

The foundation that makes Ajax possible is the communication layer with the server. The most complete option for performing this communication is the JavaScript XMLHttpRequest object. If XMLHttpRequest is not suitable to you, hidden IFrames and cookies can also be used. We will examine both options later in this chapter.

This chapter introduces you to the XMLHttpRequest
object, showing you how to work around its implementation differences
between browsers. After that, we make some actual page requests, both
in a synchronous fashion and in an asynchronous fashion. This chapter
finishes with some various fallback approaches that can be used if a
browser doesn’t support XMLHttpRequest, including how to use IFrames and cookies as your communication channel.

2.1 `XMLHttpRequest` Overview

Originally, Microsoft designed XMLHttpRequest to allow Internet Explorer (IE) to load XML documents from JavaScript. Even though it has XML in its name, XMLHttpRequest really is a generic HTTP client for JavaScript. With it, JavaScript can make GET and POST HTTP requests. (For POST requests, data can be sent to the server in a format of your choosing.) The main limitations to XMLHttpRequest
are due to the browser security sandbox. It can make only HTTP(S)
requests (file URLs, for example, won’t work), and it can make requests
only to the same domain as the currently loaded page.

The security limitations of XMLHttpRequest do limit
the ways in which you can use it, but the trade-off in added security
is well worth it. Most attacks against JavaScript applications center
around injecting malicious code into the Web page. If XMLHttpRequest
allowed requests to any Web site, it would become a major player in
these attacks. The security sandbox reduces these potential problems.
In addition, it simplifies the programming model because the JavaScript
code can implicitly trust any data it loads from XMLHttpRequest. It can trust the data because the new data is just as secure as the page that loaded the initial page.

Despite the fact that XMLHttpRequest provides only a
small API and just a handful of methods and properties, it has its
differences between browsers. These differences are mainly in event
handling and object instantiation (in IE, XMLHttpRequest is actually an ActiveX object), so they aren’t hard to work around. In the following overview of the XMLHttpRequest API, the Mozilla syntax for XMLHttpRequest instantiation is used. If you want to run the examples in IE, you need to replace new XMLHttpRequest(); with either new ActiveXObject("MSXML2.XMLHTTP.3.0"); or the full cross-browser instantiation method shown in the “Cross-Browser XMLHttpRequest” section of this chapter.

XMLHttpRequest is the most-used method for Ajax
communications because it provides two unique features. The first
feature provides the ability to load new content without that content
being changed in any way, which makes it extremely easy to fit Ajax
into your normal development patterns. The second feature allows
JavaScript to make synchronous calls. A synchronous call stops all
other operations until it’s complete, and while this isn’t an option
that is usually used, it can be useful in cases in which the current
request must be completed before further actions are taken.

2.1.1 `XMLHttpRequest::Open()`

The open method is used to set the request type (GET, POST, PUT, or PROPFIND),
the URL of the page being requested, and whether the call will be
asynchronous. A username and password for HTTP authentication can also
be optionally passed. The URL can be either a relative path (such as page.html) or a complete one that includes the server’s address (such as http://www.miraclestudios.us/)The basic method signature is:

open(type,url,isAsync,username,password)

In the JavaScript environment, security restrictions are in place. These security restrictions cause the open method to throw an exception if the URL is from a different domain than the current page. The following example uses open to set up a synchronous GET request to index.html:

1 var req = new XMLHttpRequest();
2 req.open(’GET’, ’index.html’, false);
3 req.send(null);
4 if(req.status == 200)
5 alert(req.responseText);

2.1.2 `XMLHttpRequest::Send()`

The send method makes the connection to the URL specified in open.
If the request is asynchronous, the call will return it immediately;
otherwise, the call will block further execution until the page has
been downloaded. If the request type is POST, the payload will be sent as the body of the request that is sent to the server. The method signature is:

send(payload)

When you make a POST request, you will need to set the Content-type header. This way, the server knows what to do with the uploaded content. To mimic sending a form using HTTP POST, you set the content type to application/x-www-form-urlencoded. URLencoded
data is the same format that you see in a URL after the “?”. You can
see an example of this encoded data by making a form and setting its
method to GET. The following example shows a synchronous POST request to index.php that is sending a URLencoded payload. If index.php contains , you can see the submitted data translated as if it’s a normal form in the alert:


1	var req = new XMLHttpRequest();
2	req.open(’POST’, ’index.php’, false);
3	req.setRequestHeader(’Content-type’,
4	’application/x-www-form-urlencoded;charset=UTF-8;’);
5	req.send(’hello=world&XMLHttpRequest=test’);
6	if(req.status == 200)
7	alert(req.responseText);

var req = new XMLHttpRequest();
req.open(’POST’, ’index.php’, false);
req.setRequestHeader(’Content-type’,
’application/x-www-form-urlencoded;charset=UTF-8;’);
req.send(’hello=world&XMLHttpRequest=test’);
if(req.status == 200)
alert(req.responseText);

2.1.3 `XMLHttpRequest::setRequestHeader()`

There are many different cases in which setting a header on a request might be useful. The most common use of setRequestHeader() is to set the Content-type, because most Web applications already know how to deal with certain types, such as URLencoded. The setRequestHeader method signature takes two parameters: the header to set and its value:


1	setRequestHeader(header,value)

setRequestHeader(header,value)

Because requests sent using XMLHttpRequest send the
same standard headers, including cookie headers and HTTP authentication
headers, as a normal browser request, the header name will usually be
the name of the HTTP header that you want to override. In addition to
overriding default headers, setRequestHeader is useful for setting custom, application-specific headers. Custom headers are generally prefixed with X- to distinguish them from standard ones. The following example makes a synchronous GET request adding a header called X-foo to test.php. If test.php contains , you will see the submitted header in the alert:


1	var req = new XMLHttpRequest();
2	req.open(’GET’, ’test.php’, false);
3	req.setRequestHeader(’X-foo’,’bar’);
4	req.send(null);
5
6	if(req.status == 200)
7	alert(req.responseText);

var req = new XMLHttpRequest();
req.open(’GET’, ’test.php’, false);
req.setRequestHeader(’X-foo’,’bar’);
req.send(null);

if(req.status == 200)
alert(req.responseText);

2.1.4 `XMLHttpRequest::getResponseHeader()` and `getAllResponseHeaders()`

The getResponseHeader method allows you to get a single header from the response; this is especially useful when all you need is a header like Content-type; note that the specified header is case-insensitive. The method signature is as follows:


1	getResponseHeader(header)

getResponseHeader(header)

getAllResponseHeaders returns all the headers from the
response in a single string; this is useful for debugging or searching
for a value. The following example makes a synchronous GET request to test.html. When the client receives a response, the Content-type is alerted and all the headers are alerted:


1	var req = new XMLHttpRequest();
2	req.open(’GET’, ’test.html’, false);
3	req.send(null);
4
5	if(req.status == 200) {
6	alert(req.getResponseHeader(’Content-type’));
7	alert(req.getAllResponseHeaders());
8	}

var req = new XMLHttpRequest();
req.open(’GET’, ’test.html’, false);
req.send(null);

if(req.status == 200) {
alert(req.getResponseHeader(’Content-type’));
alert(req.getAllResponseHeaders());
}

2.1.5 Other `XMLHttpRequest` Methods

All browsers implement an abort() method, which is
used to cancel an in-progress asynchronous request. (An example of this
is shown in the “Sending Asynchronous Requests” section in this
chapter.) Mozilla-based browsers also offer some extra methods on top
of the basic API; for instance, addEventListener() and removeEventListener() provide a way to catch status events without using the on* properties. There is also an overrideMimeType() method that makes it possible to force the Content-type to text/xml
so that it will be parsed into a DOM document even if the server
doesn’t report it as such. The Mozilla-specific methods can be useful
in certain circumstances, but in most cases, you should stay away from
them because not all browsers support them.

2.1.6 `XMLHttpRequest` Properties

XMLHttpRequest provides a number of properties that
provide information or results about the request. Most of the
properties are self-explanatory; you simply read the value and act on
it. The on* properties are event handlers that are used by assigning a function to them. A list of all the properties follows:

status. The HTTP status code of the request response.
statusText. The HTTP status code that goes with the code.
readyState. The state of the request. (See Table 2-1 in the next section of this chapter for values.)
responseText. Unparsed text of the response.
responseXML. Response parsed into a DOM Document object; happens only if Content-type is text/xml.
onreadystatechange. Event handler that is called when readyState changes.
onerror. Mozilla-only event handler that is called when an error happens during a request.
onprogress. Mozilla-only event handler that is called at an interval as content is loaded.
onload. Mozilla-only event handler that is called when the document is finished loading.

NOTE

Mozilla resets event handlers, such as onreadystatechange, after a request is completed, so you need to reset them if you are making multiple calls with the same object.

2.1.7 `readyState` Reference

Table 2-1 shows the possible values for the readyState variable. It will return a number representing the current state of the object. Each request will progress through the list of readyStates.

Table 2-1 `readyState` Levels

`readyState` Status Code	Status of the `XMLHttpRequest` Object
`(0) UNINITIALIZED`	The object has been created but not initialized. (The `open` method has not been called.)
`(1) LOADING`	The object has been created, but the `send` method has not been called.
`(2) LOADED`	The `send` method has been called, but the status and headers are not yet available.
`(3) INTERACTIVE`	Some data has been received. Calling the `responseBody` and `responseText` properties at this state to obtain partial results will return an error, because status and response headers are not fully available.
`(4) COMPLETED`	All the data has been received, and the complete data is available in the `responseBody` and `responseText` properties.

The readyState variable and the onreadystatechange event handler are linked in such a way that each time the readyState variable is changed, the onreadystatechange event handler is called.

2.2 Cross-Browser `XMLHttpRequest`

One of the attributes that have made XMLHttpRequest
such a popular transport for Ajax requests is that it is easy to use in
a way that is compatible across multiple browsers. The big two
browsers, IE and Firefox, provide the same basic API. This consistency
makes for a similar development experience. Opera and Safari also
support the same basic API, but only in their more recent versions.

When you are writing cross-browser, the first problem you need to overcome is that XMLHttpRequest
is an ActiveX object in IE, and it’s a normal JavaScript object in
Mozilla and the other browsers. There are a number of approaches to
overcoming this problem, including optional JScript code for IE, but I
find that the simplest solution is just to use exceptions. Listing 2-1
shows an example that tries every version of the XMLHTTP
ActiveX object, if needed. This helps make our implementation as robust
as possible. The function also throws an exception if it’s not possible
to create an XMLHttpRequest object. This gives us a way to give error messages or to fall back to IFrame requests, if needed.

Listing 2-1 Cross-Browser `XMLHttpRequest` Creation


1	// function to create an XMLHttpClient in a cross-browser manner
2	function initXMLHttpClient() {
3	var xmlhttp;
4	try {
5	// Mozilla / Safari / IE7
6	xmlhttp = new XMLHttpRequest();
7	} catch (e) {
8	// IE
9	var XMLHTTP_IDS = new Array(’MSXML2.XMLHTTP.5.0’,
10	’MSXML2.XMLHTTP.4.0’,
11	’MSXML2.XMLHTTP.3.0’,
12	’MSXML2.XMLHTTP’,
13	’Microsoft.XMLHTTP’ );
14	var success = false;
15	for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
16	try {
17	xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
18	success = true;
19	} catch (e) {}
20	}
21	if (!success) {
22	throw new Error(’Unable to create XMLHttpRequest.’);
23	}
24	}
25	return xmlhttp;
26	}

// function to create an XMLHttpClient in a cross-browser manner
function initXMLHttpClient() {
var xmlhttp;
try {
// Mozilla / Safari / IE7
xmlhttp = new XMLHttpRequest();
} catch (e) {
// IE
var XMLHTTP_IDS = new Array(’MSXML2.XMLHTTP.5.0’,
’MSXML2.XMLHTTP.4.0’,
’MSXML2.XMLHTTP.3.0’,
’MSXML2.XMLHTTP’,
’Microsoft.XMLHTTP’ );
var success = false;
for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
try {
xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
success = true;
} catch (e) {}
}
if (!success) {
throw new Error(’Unable to create XMLHttpRequest.’);
}
}
return xmlhttp;
}

The overall pattern of this code is simple: Create an XMLHttpRequest
instance in the most optimal way possible, as shown in line 6. This
creation should always succeed on Mozilla-based browsers, such as
Firefox, on Opera, and on the upcoming IE 7.

If XMLHttpRequest doesn’t exist, catch the exception
that is thrown, as shown in line 7. Getting an exception means you’re
on IE or an old browser. To test for IE, attempt to create an ActiveX
version of XMLHttpRequest, which is accomplished by the following:

Looping over all possible ActiveX identifiers. This action will
create an ActiveX instance for each identifier until the creation
succeeds, setting the success flag to true, as shown in lines 9–20.
If creation is successful, returning an XMLHttpRequest instance, as shown in line 25. Otherwise, throwing a JavaScript exception, as shown in line 22.

This approach allows for minimal overhead if the browser supports a native XMLHttpRequest object while fully supporting IE. It also gives us an error if XMLHttpRequest
isn’t supported at all. This error could be displayed to the user at
this point, or you could insert another communication approach, such as
hidden IFrames.

2.3 Sending Asynchronous Requests

Synchronous requests are easier to use than asynchronous requests
because they return data directly and remove the hassle of creating
callback functions. However, they aren’t the standard use case for XMLHttpRequest
because the entire browser is locked while the request is happening.
There are some circumstances in which blocking is useful (mainly when a
decision needs to be made before the current function ends), but in
most cases, you’ll want these requests to happen in the background. An
asynchronous request allows the browser to continue running JavaScript
code and users to continue interacting with the page while the new data
is loaded. With the proper user interface, asynchronous communication
allows an Ajax application to be useful even when the user’s connection
to the site is slow.

To make an asynchronous call, we need to accomplish two tasks: set the asynchronous flag on open to true, and add a readyStateChanged
event handler. This event handler will wait for a ready state of 4,
which means the response is loaded. It will then check the status
property. If the status is 200, we can use responseText; if it’s another value, we have an error, so we’ll need to create an alert dialog to show it. An asynchronous call to test.php is shown in Listing 2-2. The initXMLHttpClient function from an earlier chapter section, “Cross-Browser XMLHttpRequest,” is used to create our XMLHttpRequest object.

Listing 2-2 Making an Asynchronous Request


1	var req = initXMLHttpClient();
2	req.onreadystatechange = function() {
3	if (req.readyState == 4) {
4	if (req.status == 200) {
5	alert(req.responseText);
6	} else {
7	alert(’Loading Error: [’+req.status+’] ’
8	+req.statusText);
9	}
10	}
11	}
12	req.open(’GET’,’test.php’,true);
13	req.send(null);

Although this code gets the job done, it’s not a great long-term solution because we will have to write a new onreadystatechange method for each call. The solution to this is to create our own HttpClient class that wraps XMLHttpRequest.
Such a class gives us an easy-to-use API and a property to use for the
callback that has to deal only with successful requests. Just adding
some helper methods would be a simpler solution, but that’s not a
possibility because IE doesn’t allow you to add methods to an ActiveX
object.

A sample XMLHttpRequest wrapper class is shown in Listing 2-3. The main features of the HttpClient class are a callback property that is called when a successful asynchronous request is complete and a makeRequest method that combines the open and send functions. It also provides event properties that are called when a request is made (onSend), when it ends (onload), and when an errors occurs (onError). A default onSend and onLoad implementation is provided, which creates a basic loading message while requests are being made.

Listing 2-3 `HttpClient XMLHttpRequest` Wrapper


1	function HttpClient() { }
2	HttpClient.prototype = {
3	// type GET,POST passed to open
4	requestType:’GET’,
5	// when set to true, async calls are made
6	isAsync:false,
7
8	// where an XMLHttpRequest instance is stored
9	xmlhttp:false,
10
11	// what is called when a successful async call is made
12	callback:false,
13
14	// what is called when send is called on XMLHttpRequest
15	// set your own function to onSend to have a custom loading
16	// effect
17	onSend:function() {
18	document.getElementById(’HttpClientStatus’).style.display =
19	’block’;
20	},
21
22	// what is called when readyState 4 is reached, this is
23	// called before your callback
24	onload:function() {
25	document.getElementById(’HttpClientStatus’).style.display =
26	’none’;
27	},
28
29	// what is called when an http error happens
30	onError:function(error) {
31	alert(error);
32	},
33
34	// method to initialize an xmlhttpclient
35	init:function() {
36	try {
37	// Mozilla / Safari
38	this.xmlhttp = new XMLHttpRequest();
39	} catch (e) {
40	// IE
41	var XMLHTTP_IDS = new Array(-’MSXML2.XMLHTTP.5.0’,
42	-’MSXML2.XMLHTTP.4.0’,
43	’MSXML2.XMLHTTP.3.0’,
44	’MSXML2.XMLHTTP’,
45	-’Microsoft.XMLHTTP’);
46	var success = false;
47	-for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
48	try {
49	-this.xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
50	success = true;
51	} catch (e) {}
52	-}
53	-if (!success) {
54	-this.onError(’Unable to create XMLHttpRequest.’);
55	}
56	}
57	},
58
59	// method to make a page request
60	// @param string url The page to make the request to
61	// @param string payload What you’re sending if this is a POST
62	// request
63	makeRequest: function(url,payload) {
64	if (!this.xmlhttp) {
65	this.init();
66	}
67	this.xmlhttp.open(this.requestType,url,this.isAsync);
68
69	-// set onreadystatechange here since it will be reset after a
70	//completed call in Mozilla
71	var self = this;
72	this.xmlhttp.onreadystatechange = function() {
73	self._readyStateChangeCallback(); }
74
75	this.xmlhttp.send(payload);
76
77	if (!this.isAsync) {
78	return this.xmlhttp.responseText;
79	}
80	},
81
82	// internal method used to handle ready state changes
83	_readyStateChangeCallback:function() {
84	switch(this.xmlhttp.readyState) {
85	case 2:
86	this.onSend();
87	break;
88	case 4:
89	this.onload();
90	if (this.xmlhttp.status == 200) {
91	this.callback(this.xmlhttp.responseText);
92	} else {
93	-this.onError(’HTTP Error Making Request: ’+
94	-’[’+this.xmlhttp.status+’]’+
95	-’+this.xmlhttp.statusText));
96	}
97	break;
98	}
99	}
100	}

function HttpClient() { }
HttpClient.prototype = {
// type GET,POST passed to open
requestType:’GET’,
// when set to true, async calls are made
isAsync:false,

// where an XMLHttpRequest instance is stored
xmlhttp:false,

// what is called when a successful async call is made
callback:false,

// what is called when send is called on XMLHttpRequest
// set your own function to onSend to have a custom loading
// effect
onSend:function() {
document.getElementById(’HttpClientStatus’).style.display =
’block’;
},

// what is called when readyState 4 is reached, this is
// called before your callback
onload:function() {
document.getElementById(’HttpClientStatus’).style.display =
’none’;
},

// what is called when an http error happens
onError:function(error) {
alert(error);
},

// method to initialize an xmlhttpclient
init:function() {
try {
// Mozilla / Safari
this.xmlhttp = new XMLHttpRequest();
} catch (e) {
// IE
var XMLHTTP_IDS = new Array(-’MSXML2.XMLHTTP.5.0’,
-’MSXML2.XMLHTTP.4.0’,
’MSXML2.XMLHTTP.3.0’,
’MSXML2.XMLHTTP’,
-’Microsoft.XMLHTTP’);
var success = false;
-for (var i=0;i < XMLHTTP_IDS.length && !success; i++) {
try {
-this.xmlhttp = new ActiveXObject(XMLHTTP_IDS[i]);
success = true;
} catch (e) {}
-}
-if (!success) {
-this.onError(’Unable to create XMLHttpRequest.’);
}
}
},

// method to make a page request
// @param string url The page to make the request to
// @param string payload What you’re sending if this is a POST
// request
makeRequest: function(url,payload) {
if (!this.xmlhttp) {
this.init();
}
this.xmlhttp.open(this.requestType,url,this.isAsync);

-// set onreadystatechange here since it will be reset after a
//completed call in Mozilla
var self = this;
this.xmlhttp.onreadystatechange = function() {
self._readyStateChangeCallback(); }

this.xmlhttp.send(payload);

if (!this.isAsync) {
return this.xmlhttp.responseText;
}
},

// internal method used to handle ready state changes
_readyStateChangeCallback:function() {
switch(this.xmlhttp.readyState) {
case 2:
this.onSend();
break;
case 4:
this.onload();
if (this.xmlhttp.status == 200) {
this.callback(this.xmlhttp.responseText);
} else {
-this.onError(’HTTP Error Making Request: ’+
-’[’+this.xmlhttp.status+’]’+
-’+this.xmlhttp.statusText));
}
break;
}
}
}

The HttpClient class contains comments explaining its
basic functionality, but you will want to look at a couple of areas in
detail. The first areas are the properties you’ll want to set while
interacting with the class; these include the following:

requestType (line 4). Used to set the HTTP request type, GET is used to request content that doesn’t perform an action whereas POST is used for requests that do.
isAsync (line 6). A
Boolean value used to set the request method. The default is false,
which makes an synchronous request. If you’re making an asynchronous
request, isAsync is set to true. When making an asynchronous request, you also need to set the callback property.
callback (line 12). This property takes a function that takes a single parameter result and is called when a request is successfully completed.

Lines 16–31 contain simple functions for handling some basic user
feedback. When a request is sent to the server, a DOM element with the
ID of HttpClientStatus
is shown (lines 16–19). When it completes, it is hidden again (lines
23–26). The class also defines a function to call when an error happens
(lines 29–31); it creates an alert box with the error message. Common
errors include receiving a 404 page not found HTTP error message or not being able to create an XMLHttpRequest
object. The implementation of these three functions is simple, and
you’ll likely want to override them with more sophisticated
application-specific versions.

Lines 33–56 contain the init method, which is identical to the initXMLHttpClient function we created in Listing 2-1, except for what it does with its error message. Now it sends it to the onError method. You won’t be dealing with this function directly because the makeRequest method will take care of it for you. The makeRequest
method (lines 62–79) is your main interaction with the class. It takes
two parameters: a URL to which to make the request and a payload that
is sent to the server if you’re making a POST request. The actual implementation is a more generic version of the code shown in Listing 2-2. The _readyStateChangeCallback (lines 82–99) method is set as the readyState handler by makeRequest. It handles calling onSend when the initial request is sent and then calling onload when the request completes. It also checks for a 200 HTTP status code and calls onError if some other status is returned.

Listing 2-4 uses the HttpClient class and shows its
basic usage. A wrapper class like this helps cut down the amount of
code you need to write per request while giving a single place to make
future changes.

Listing 2-4 Using the `HttpClient XMLHttpRequest` Wrapper


1
2
3	Simple XMLHttpRequest Wrapper Test Page
4
5
6
7
19
20	“HttpClientStatus” style=“display:none”>Loading …
21	Make an Async Test call
22	“target”>
23
24

Simple XMLHttpRequest Wrapper Test Page

var client = new HttpClient();
client.isAsync = true;

function test() {
client.callback = function(result) {
document.getElementById(’target’).innerHTML = result;
}
client.makeRequest(’.’,null);
}
// –>

Make an Async Test call

Using the HttpClient XMLHttpRequest wrapper is a
simple task. You start by including it in the header of your HTML page
(line 5), and then you can proceed to use it. You do this by creating
an instance of the class (line 9), configuring its basic properties (in
this case, setting isAsync to true (line 10)), and then setting up some code to call makeRequest.
In most cases, this code will be contained in a function so that it can
be tied to a user-driven event, such as clicking a link. The call is
made by the test function (lines 12–17); the test function first sets up a callback to run when the request is complete (lines 13–15), and then it calls makeRequest (line 16), which starts the Ajax call.

2.4 Ajax Without `XMLHttpRequest`

There are a number of cases in which you might not have XMLHttpRequest
support. The most common would be in the case of an older browser. This
is the hardest to work around, not because there is no Ajax fallback,
but because all the other DOM manipulation that you do within the
application won’t work. Another problem case is when your browser
supports everything that is needed except for XMLHttpRequest. This problem could occur when IE is in a mode where it can’t use ActiveXObjects
or when you are using a pre-7.6 version of Opera. In some cases,
especially intranet applications, it’s easy to just require an upgrade,
but if you want to use Ajax on a public site, you’ll want to think
about using some sort of fallback mechanism. The best candidate for a
fallback is to use hidden IFrames. Another option is to
use cookies, but they can send only a limited amount of data per
request, so it is hard to drop in cookie-based approaches as a
replacement for code that has been written with XMLHttpRequest in mind. Only XMLHttpRequest supports synchronous calls, so if they are necessary for your application, then using it as a fallback will not be possible.

If you’re using a fully wrapped XMLHttpRequest and
you don’t use synchronous calls, providing transparent fallback to your
program should be possible. You need only to replace the final throwing
of an exception in the example init method with the instantiation of your IFrame HTTP client. The main item to remember about using another approach instead of XMLHttpRequest is that it’s not going to gain you huge leaps in compatibility. The major browsers already support XMLHttpRequest.
This support makes browsers with JavaScript turned off, not those
running an unsupported browser, the biggest group that can’t use your
Ajax application. The advantages and disadvantages of the Ajax
communication techniques are shown in Table 2-2.

Table 2-2 Advantages and Disadvantages of Ajax Techniques

Technique

Advantages

Disadvantages

XMLHttpRequest

Can make requests to pages not set up for Ajax

Can set/get all HTTP headers

Can make HTTP requests using any type (GET, POST, PROPFIND, and so on)

Supports full control over POST requests, allowing for any type of data encoding

Requests ActiveX to be enabled in IE 5 and 6

Is only available in newer versions of Opera and Safari

Has small implementation differences between browsers

IFrame

Can make POST and GET HTTP requests

Supportes all modern browsers

Supports asynchronous file uploads

Prohibits synchronous requests

Server pages must be designed to work with IFrame requests

Has implementation differences between browsers

Can leave extra entries in browser history (depends on browser and implementation)

All request data is URL-encoded, increasing request size

Supports the largest number of browsers

Few implementation differences between browsers

Prohibits no synchronous requests

Doesn’t work with large requests/results

Requires server pages to be designed to work with cookie requests

Requires polling on the client

Can make only GET HTTP requests

Posted by: Expertz Web

Posted in Latest News, Web Development Tagged: ajax, ajax development, ajax getting started, ajax overview, ajax programming, ajax start, overview of ajax, start ajax

Web Design Company in India, Delhi

AJAX online Examples

1. TextboxList meets Autocompletion

2.Ajax IM

3. LiveValidation

4. Inline Editing

5. Ajax Upload

6. Fancy Upload

7. ClickHeat Clicks Heatmap

8. Ajax Mail Form

9. Ajax Directory Manager

10. Ajax Email Client

11. Improve Form Usability with Auto Messages

12. qGallery

13. Ajax Star Rating

14. CakePHP Ajax Form

15. Amberjack Site Tours

16. Prototype UI

17. JCrop

18. jQuery Auto-tabbing Plugin

19. Sort Table Rows with Ajax

20. DrasticMap

HTACCESS URL Rewriting

An Introduction to Rewriting

Basic Rewriting

Basic Redirects

Forcing New Requests

Using Regular Expressions

Multiple Redirects

Match Modifiers

Adding Guessable URLs

.htaccess Tips and Tricks.

redirecting and rewriting

beginning rewriting..

simple rewriting

not-so-simple rewriting … flat links and more

shortening URLs

capturing variables

cooler access denied

prevent hot-linking

lose the "www"

multiple domains in one root

automatic translation

httpd.conf

inheritance..

conclusion

troubleshooting tips..

rewrite logging..

Fatal Redirection

debug-report.php A php script to make your mod_rewrite life easier!

37 More Shocking jQuery Plugins

jQuery Sliders

jQuery Manipulating Images

jQuery Navigation Menus

jQuery Accordions

jQuery Image Viewer

jQuery Charts

jQuery Editors

jQuery Flash Plugins

jQuery Tabs

jQuery LightBox

jQuery Datagrid plugins

jQuery Field Manipulation

jQuery with cool animation Effects

jQuery Worth Checking Plugins

jQuery Web Applications

45+ Fresh Out of the oven jQuery Plugins

Image SlideShows and Galleries

Tag Clouds

Pagination

Navigation

Tables and Grids

Forms

Scrolling

Form Elements

Toggling

Gradients and Shadows

Lightbox

Color Picker

This is worth checking out

`httpd.conf`

`inheritance..`

`conclusion`

`troubleshooting tips..`

`rewrite logging..`

`Fatal Redirection`

`debug-report.php`
`A php script to make your mod_rewrite life easier!`

`Get Started with PHP`

`No reader comments ... yet.`

2.1 `XMLHttpRequest` Overview

2.1.1 `XMLHttpRequest::Open()`

2.1.2 `XMLHttpRequest::Send()`

2.1.3 `XMLHttpRequest::setRequestHeader()`

2.1.4 `XMLHttpRequest::getResponseHeader()` and `getAllResponseHeaders()`

2.1.5 Other `XMLHttpRequest` Methods

2.1.6 `XMLHttpRequest` Properties