Tuesday, February 14, 2012

DataTables Editable (CRUD) Add-on by Google

DataTables Editable (CRUD) Add-on

http://jquery-datatables-editable.googlecode.com/svn/trunk/index.html

http://code.google.com/p/jquery-datatables-editable/wiki/Overview

Overview  

Overview of the functionalities provided by the DataTables Editable plugin
Phase-Requirements
Updated Oct 2, 2011 by joc...@gmail.com

Site content

Introduction

JQuery DataTables Editable plugin enhances standard HTML table by adding data management functionalities (adding new records to the table, selecting and deleting records, and editing cells inline) on the client-side. Look of the HTML table when JQuery DataTables Editable plugin is applied is shown below:


Editing jquery datatable data

Editing table data

You can find code on the DataTables site where you can see how to implement inline editing of cells in the table using the jEditable plug-in. As an alternative, you can use the DataTables CRUD plug-in that enables editing cells,deleting rows, and adding new records in the table. An example of a fully editable DataTable is shown in the following figure:

editable-datatable-java-edit.png

An example of initialization of the editable plug-in is shown in the following listing:

 $('#example').dataTable().makeEditable(); 

There are a lot of configuration properties that can be used in order to configure CRUD functionalities. An example is shown below:

 $('#example').dataTable()   .makeEditable({         sUpdateURL: "UpdateData.php",         sAddURL: "AddData.php",         sDeleteURL: "DeleteData.php",         aoColumns: [                         null,                 {             },             {                 type: 'textarea'             },             {                 type: 'select',                 onblur: 'cancel',                 submit: 'Ok',                 loadurl: 'EngineVersionList.php',                 sUpdateURL: "CustomUpdateEngineVersion.php"             },              {                 type: 'select',                 onblur: 'submit',                 data: "{'':'Please select...', 'A':'A','B':'B','C':'C'}"             }         ]  });

In this configuration are defined server-side URLs that will be called when the user actually edits, deletes, or adds a new record. Also, in each of the columns is defined a different editor. The first column is read only, the second one uses the default setting (inline text box), the third uses a text area instead of text box, while the other two columns use drop-down lists. The fourth column will load values for the items that will be displayed in the list from the server-side page defined in the loadurl parameter, and it will post the edited values to the column specific sUpdateURLparameter instead of the global editing URL defined in sUpdateURL. The select lists that are used for editing of the cells in the fifth column have list items that are defined locally in the data parameter. There are a lot of additional settings you can find on the DataTables CRUD site.

Saturday, February 11, 2012

An Introduction to memcached


I would like to talk about my personal favorite method of caching: memcached. I'll show you how memcached works, how to install it, and how to use it to help your site/application run faster and scale better. According to the memcached site, "memcached is a high-performance, distributed memory object caching system, generic in nature, but intended for use in speeding up dynamic web applications by alleviating database load." In plain English, this means memcached is an application that you can use to take advantage of spare free memory on any number of machines to cache pretty much anything you want (with a few exceptions) and retrieve it very quickly. Memcached was originally developed by Danga Interactive to help speed up LiveJournal. Some of memcached's great features are that in runs on a number of platforms (Linux, BSD, Windows), is VERY fast, and has a number of client APIs already written so you'll more than likely find libraries for any type of project you're working on. We'll focus on the PHP API in this article......

CodeIgniter - Open source PHP web application framework

CodeIgniter - Open source PHP web application framework

codeigniter.com/
CodeIgniter: an open source Web Application Framework that helps you write PHP programs.

Yii high-performance PHP framework

The FastSecure and ProfessionalPHP Framework 

http://www.yiiframework.com/

Yii is a high-performance PHP framework best for developing Web 2.0 applications.

Yii comes with rich features: MVC, DAO/ActiveRecord, I18N/L10N, caching, authentication and role-based access control, scaffolding, testing, etc. It can reduce your development time significantly.

Tuesday, February 7, 2012

Google Maps images downloader


Google Maps images downloader



Google Maps is a tool you can use via your Internet browser. You can find maps filled with great amounts of detail, yet it only works when you are online, and there are no built-in features to save a particular map.

The 'Print' option is one way to save a map (in PDF format) within Google Maps – the downside of this method is that one can only print what is actually on-screen. If you wish to capture a bigger physical area, you may have to zoom out multiple times, thus losing the location's minute details. Conversely, if you want to show accurate detail, you would have to zoom in and lose the rest of the expanse.

How can you capture a large area or map and still have a good amount of detail? This article will show you how, without using a Google Maps images downloader.

Tools Needed:

  • Notepad
  • Mozilla Firefox Internet Browser
  • Firefox ScreenGrab Extension – This utility can capture what appears on-screen: the image in a window, a specific selection, a frame, or the whole page. It stores Web pages as images. These images may be saved as files or saved on the clipboard.

Instructions:

Log on to the Net using the Firefox browser. Download and install ScreenGrab.

Go to this URL: http://maps.google.com/ and access the map location you want to capture.

Manipulate Google Maps' zoom feature based on the image you want to capture and the amount of detail you need (depending on your prospective use for the map). Do not worry about the map size at this stage.

Go to 'Link' at the upper right portion of the map. Open that link, and click on the 'Customize and preview embedded map' option in the small pop-up panel that emerges.

One can adapt the map size according to the user's needs through another pop-up panel. After choosing the option 'Custom', type in the final map's dimensions (height and width in pixels). If the values are changed to 2000 x 800, for example, the preview map will adjust to show the new size.

HTML code will appear under the map preview. Take note of the code if the current map size is what you need.

Access the Notepad program and paste the HTML code from the previous step. There are no specifics to follow for naming the file, just make sure that it is saved with an '.html' extension. Your file name may be 'hometown.html', for example. Append one quotation mark before the first character and another after the last character of the file name. This ensures that Notepad stores the file with the '.html' extension (and not '.txt').

Access the HTML file from the previous step within the browser. The map will appear in the size you have chosen. The map will most likely be physically larger that your screen, so shift the map left, right, up, and down to check the 'unseen' portions.

You now have a map in the size you have specified. All that remains is to capture that map and store it as an image. Firefox ScreenGrab now comes into play. Once ScreenGrab has been installed, click on its icon in your Firefox browser. Select 'Complete Page/Frame' to save. Save the picture as any of these two file formats: PNG or JPG.

Your Google Map has been downloaded and ready for printing!