Category: Web Development

jQuery Essentials – Round 3

 

I still receive a good number of hits to my first (10 jQuery Essentials) and second (jQuery Essentials – Round 2) collection of jQuery plugins. So, I have been thinking about making the next post in the series for quite some time. Time has always been the killer of ideas, along with the fact that not too many plugins found way to my list of favorites.

Now that I have some fresh essentials, this post was inevitable.

[poll id=”2″]

18. jQuery UI

ui

This is the official big boss with a number of core interactions (drag, dropping, sorting, selecting, resizing) and few great widgets (accordions, date pickers, dialogs, sliders, tabs) built on top of those. Although its a great collection, I somehow haven’t been able to use it in any real projects yet. It seems small plugins always get a favor than big collections 🙂

19. Facebox

facebox

This is a cute, little plugin that shows Facebook style dialog boxes using jQuery. It supports nearly all the possible contents you might want to show in a dialog box: image, div, remote pages. It has both automatic behavior and manual invoking. Simple and fun to me.

(more…)

Cross-Domain AJAX calls using PHP

   

AJAX has become the core component of many web applications around us. And its fairly easy to handle AJAX now a days, with the help of various javascript libraries (ex: jQuery, Prototype, Mootools, YUI, etc). But there is one security issue that web browsers impose in doing AJAX calls – they don’t let you do AJAX calls in web servers different than yours. That means, if your script is in www.mydomain.com and you’re trying to do AJAX call to www.anotherdomain.com/get.php, then the browser will through error like: “Error: uncaught exception: Permission denied to call method XMLHttpRequest.open”.

Now, there are a number of solutions to this problem. Instead of explaining them all to you, lemme provide you the simplest one: using a PHP transport file. If you already know the thing and just need the script, download from here.

Others, let’s see an example implementation first.

Example use

   1: xmlHttp.onreadystatechange=function()
   2: {
   3:     if(xmlHttp.readyState==4)
   4:     {
   5:         alert(xmlHttp.responseText);
   6:     }
   7: }
   8:  
   9: xmlHttp.open("GET", 'http://myserver.com/transport.php?action=' + 
  10:                     urlencode('different-server.com/return_call.php') +
  11:                     '&method=get&data1=101&data2=pass', true );
  12:  
  13: xmlHttp.send(null);

Now, lets see how it works:

  1. The script makes an AJAX call to the myserver.com/transport.php with a few parameters:
    • action = the target URL you need to fetch, from a different domain
    • method = the HTTP method (post/get)
    • data1, data2 = sample parameters for using as either query-string or POST fields
  2. When the request is received by transport.php, it uses cURL to make a call to the page mentioned in action.
  3. Based on the method, it either makes a GET request or a POST request. In both cases, it sends the extra parameters that are sent.
  4. After the response is received, transport.php echoes it. So, you have what you need!

Download

transport.php
Cross-Domain AJAX call transporter.
Downloaded: [downloadcounter(transport)] times

Comments and suggestions are most welcomed 🙂

HTTP Class for PHP (supports both cURL and fsockopen)

  

Feb 2009: A couple bugs have been fixed and library updated.

This is a wrapper HTTP class that uses either cURL or fsockopen to harvest resources from the web. It supports a handy subset of functionalists of HTTP that are mostly needed in day to day coding. Scripts who need to communicate with other servers will find it useful. If you’re looking to invoke any RESTful API and don’t want to bother adding a bunch of libraries for that simple thing, just put this class and you’re set.

Download

Detailed documentation can be found here. And you can download the source from here.

Update

Class added in Orchid – “PHP framwork for the rest of us”

Features

  • Can use both cURL and fsockopen.
  • Degrades to fsockopen if cURL not enabled.
  • Supports HTTP Basic authentication.
  • Supports defining custom request headers.
  • Supports defining connection timeout values.
  • Supports defining user agent and referral values.
  • Supports both user-defined and persistent cookies.
  • Supports secure connections (HTTPS) with and without cURL.
  • Supports adding requests parameters for both GET and POST.
  • Supports automatic redirection (maximum redirect can be defined).
  • Returns HTTP response headers and response body data separately.

Example 1 – Simple Get (Facebook Application List)

1<?php
2 
3include_once('class.http.php');
4 
5$http = new Http();
6 
7$http->execute('http://www.facebook.com/apps/index.php?sort=6');
8echo ($http->error) ? $http->error : $http->result;

Example 2 – Invoking Yahoo Term Extraction API

 1<?php
 2 
 3include_once('class.http.php');
 4 
 5$http = new Http();
 6 
 7$http->addParam('appid'   , 'a_really_random_yahoo_app_id');
 8$http->addParam('context' , 'I am happy because I bought a new car');
 9$http->addParam('output'  , 'xml');
10 
11$http->execute('http://search.yahooapis.com/ContentAnalysisService/V1/termExtraction');
12echo ($http->error) ? $http->error : $http->result;

Example 3 – Logging into Basecamp (without using cURL!)

 1<?php
 2 
 3include_once('class.http.php');
 4 
 5$http = new Http();
 6 
 7$http->useCurl(false);
 8$http->setMethod('POST');
 9 
10$http->addParam('user_name', 'emran');
11$http->addParam('password', 'hasan');
12 
13$http->setReferrer('https://someproject.projectpath.com/login');
14$http->execute('https://someproject.projectpath.com/login/authenticate');
15 
16echo ($http->error) ? $http->error : $http->result;

Example 4 – Getting a protected feed

1<?php
2 
3include_once('class.http.php');
4 
5$http = new Http();
6$http->setAuth('emran', 'hasan');
7 
8$http->execute('http://www.someblog.com/protected/feed.xml');
9echo ($http->error) ? $http->error : $http->result;

Htpasswd protection library for Code Igniter

 

This is a library designed to run with Code Igniter that allows the application to protect any folder in the webserver using the htpasswd method of Apache. It can also group the users and create group based permission on the folders. The use is very simple: you need to define an array of the users (and array of groups if you need that), tell it where to store the password files and tell which folder to protect. It will do the rest for you. Here goes the function:

    /**
     * Protect a given folder with htpasswd protection method
     *
     * @author  Md Emran Hasan <emran@rightbrainsolution.com>
     * @param   string  location of the folder to protect
     * @param   string  location of the folder to write the group and password file
     * @param   array   an array with the users info (username and password)
     * @param   array   an array with the groups along with their user list
     * @return  boolean
     * @access  public
     */
    function protect($protectFolder, $passFolder, $userData, $groupData = array())

It is a small part of the large protection library I have been developing for a membership management application called MemberSmart . This application allows someone to protect their PHP and non-PHP based files residing in a server in a number of ways. Among the methods, the htpasswd is the most easy and convenient one. This application will be released soon by the client I am working for.

Download the library with the example from htpasswd.zip. Here is an example controller highlighting the use of the library.

<?php

class Protect extends Controller {

    function Protect()
    {
        parent::Controller();
    }
    
    function index()
    {
        // Load the library
        $this->load->library(‘AuthHtpasswd’);
        
        // Create the user array (this might come from your db)
        $userData = array(
                            array(
                                    ‘username’ => ‘admin’,
                                    ‘password’ => ‘root’
                                 ),
                            array(
                                    ‘username’ => ‘test’,
                                    ‘password’ => ‘test123’
                                 ),
                            array(
                                    ‘username’ => ’emran’,
                                    ‘password’ => ‘hasan’
                                 )
                         );

        // Create the group array (this might also come from your db)
        $groupData = array(
                            array(
                                    ‘name’ => ‘ADMIN’,
                                    ‘users’ => array(‘admin’, ’emran’)
                                 ),
                            array(
                                    ‘name’ => ‘QA’,
                                    ‘users’ => array(‘test’)
                                 )
                         );

        // Define the root to the folders
        $rootDir = $_SERVER[‘DOCUMENT_ROOT’] . DIRECTORY_SEPARATOR;

        // Protect them!
        $action = $this->authhtpasswd->protect($rootDir . ‘cs’,
                                         $rootDir . ‘data’,
                                         $userData,
                                         $groupData
                                        );

        // Is there any error? If yes, then show them!
        if (!$action)
        {
            $this->authhtpasswd->printErrors();
        }
    }
}
?>

Md Emran Hasan
Co-founder & CTO
Right Brain Solution Ltd.

10 jQuery Essentials

 

Its now a few weeks of my using jQuery as the standard JavaScript library for my web projects. I’m really fascinated with the super-easy writing of JS using jQuery. In the course of using it for normal usages, I had to add a few other functionalities using Javascript. Before trying to find out a solution myself, I searched for jQuery based solutions for those. And here is a list of some of the excellent resources I found on the web:

1. Interface Elements

“Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery.”

2. jQuery Tabs

“It’s a jQuery plugin that lets you create JavaScript tabs very easily – once you assembled the HTML with just one line of JavaScript code.”

3. jQuery Start Ratings

“Here is a quick and dirty re-creation of a star rating plugin. This is a fully degradable plugin that creates the Star Rating interface based on a simple form structure.”

4. jEditable – in place editing

“My name is jEditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different xhtml elements.”

5. jQuery Date Picker

“Welcome to the homepage for version 2 of the jQuery datePicker plugin. This is a complete re-write from the ground up to add power and flexibility to the date picker.”

6. jQuery Multi File Upload

“jQuery.MultiFile is a plugin for jQuery to help users easily select multiple files for upload in a concise quick and easy manner.”

7. jQuery Portlets

The portlets feature drag/drop, expand, collapse and many more features!

8. jQuery Autocomplete

jQuery plugin: Autocomplete is very easy to integrate to your existing forms.

9. Better tooltip

This plugin enhances the default tooltips. You can style them via stylesheets and improve their behaviour. The tooltip is shown at the mouse position and moves if there isn’t enough space.

10. Form Validation

An excellent way of validating your forms with a mix of jQuery, CSS and some HTML markup. Truly marvelous!

That’s full pack! I hope these will help you out with you jQuery’ing. Many other sites helped me find these resources, including Google, Ajax Rain, Ajaxian, and AJAX Magazine.

Goodbye for today!

Md Emran Hasan
Co-founder & CTO
Right Brain Solution Ltd.