Author: Mohammad Emran

jQuery Essentials – Round 2

I’ve seen some steep traffic in my blog after my first post on jQuery (10 jQuery Essentials). Thanks to everybody who paid a visit. It’s time for the Round 2 of the same series.

The new collection walks through some more areas in the web toolkit where jQuery can help UI builders out. Although it contains the elements missing from the last post, it also includes better implementation of some previously mentioned element (for example, the tabs).

Without more blabbing, here we go:

11. InnerFade with JQuery

“InnerFade is a small plugin for the jQuery. It’s designed to fade any element inside a container in and out. Thess elements could be anaything you want, e.g. images, list-items, divs. Simply produce your own slideshow for your portfolio or advertisings. Create a newsticker or do an animation.”

12. jQuery BlockUI Plugin

The jQuery BlockUI Plugin shows the gray overlay over your whole page or a page element to prevent the users from interacting with it. Its very useful in conjunction with AJAX, where you need to intentionally limit the user’s actions for some time. The author has included a number of examples matching most practical uses.

13. tablesorter 2.0 (beta)

This excellent implementation of a table sorting has made its way even if its in the beta stage. I’ve looked for a simple solution of this type for too many times, and now finally found it. It allows you to present your data in table and will allow multi-column sorting behavior to it. And implementation is pretty straight-forward.

14. jCalendar

A beautifully done inline dynamic calendar with a few useful features – navigation, auto sizing, degradation, etc. It looks aesthetically pleasing to me than many other calendar implementation.

15. idTabs

A fabulous tab implementation using jQuery! It has outnumbered all the implementation before. A ticker in the site says the best thing to me: “It’s not overloaded with features, it gets to the point.” Superbly done!

16. EasyDrag jQuery Plugin

A great implementation of drag n drop functionality using jQuery. It makes any DOM element draggable, with the minimal amount of code. Very handy if you want to facilitate the user with something on the site that they can move along and place wherever they need.

17. jTagEditor

It’s a nice, simple plugin that can turn your textarea into a tag editor. The editor can provide a variety of commands in a non-WYSIWYG way. Helpful if you would like your visitors enter contents without much fuss. Its lightweight and customizable. And the author shows some good examples as well.

That will conclude the list for today. Again, thanks to the visitors who came by to pay a visit and also to the mighty resource finders: Google, Ajax Rain, Ajaxian, and AJAX Magazine.

Goodbye for today!

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

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.

Web 2.0 how-to design style guide

Yesterday I found this excellent Web 2.0 how-to design style guide by Ben Hunt. I accidentally found it while searching with the keyword “Web 2.0” in google’s new blog search.

This style guide focusses on the new trends in the web 2.0 designs such as:

  1. Simplicity
  2. Central layout
  3. Simple nav
  4. Bold logos
  5. Bigger text
  6. Strong colours
  7. Rich surfaces
  8. Gradients
  9. Reflections
  10. Cute icons

I can bet you’ll like this site as anything. Also do browse the other sections of the site, its a gold mine!!

Repository of DB Models

We all have designed databases in our life in various occasions. Its quite a fun job for small scale db, but gets hectic when lots of relations come into play. What if someone helps you out with a sample db model on the topic that you are going to make? Wouldn’t it be helpful if you can get an idea about the various entities, know some of the basic business rules and see a sample E-R diagram before starting?

Barry Williams thinks so and has built Llibrary of Free Data Models to help the database makers out there. Its a collection of over 400 ‘Kick-start’ data models that he created in the last 5 years. The top 10 most demanded models of the library are (full list here):

  1. Libraries and Books
  2. Inventory Control for Retail Stores
  3. Hotel Reservations
  4. Video Rentals
  5. School Management
  6. Clients and Fees
  7. CD collections
  8. Customers and Invoices
  9. Payroll
  10. Apartment Rentals

So, bookmark this site and use as a reference for any new data model you need to work with.