How to encode and decode form data in PHP

First, let me ask you the question. Why you need to encode and decode form data.

1) When you are submitting form data to other PHP file using GET Request, form values will be displayed in the browser URL.

2) When you are submitting form data to other PHP file using POST Request, form values will be
viewed using Firebug in Firefox, Chrome Developer Tools in Chrome and IE Developer Tools.

3) If you are performing any credit card transactions in e-commerce site and submitting credit card details to the Payment gateway server using Form.

How to implement Add/Edit Feature in single form using Sencha Touch 2

In Part 4 of this Post Series, we are going to see how we can use single Sencha Touch form for both add and edit feature. If you are new to this Post Series, Please read the previous post. Following are those

• Part 1 - How to create a basic form using Sencha Touch 2.
• Part 2 - Apply Model Validation to the Form using Sencha Touch 2.
• Part3 - Save Form data locally using local storage in Sencha Touch 2.

Jeditable - Edit In Place Plugin For jQuery

Today, i came across a Jquery Plugin Jeditable which allow you to click and edit the content of different html elements

This is How it works

Normal flow is this. User clicks text on web page. Block of text becomes a form. User edits contents and presses submit button. New text is sent to webserver and saved. Form becomes normal text again. For Live Demo, Please click here.

Book Review: Creating Mobile Apps With Sencha Touch 2

I have been reading Creating Mobile Apps with Sencha Touch 2 book by John Earl Clark and Bryan P. Johnson. This book is published by PACKT Publishing. I really enjoyed by reading this Book and i have learned lot of new things that we can do with the help of Sencha Touch 2. I like to review this book. This book covers by creating ten unique applications in Sencha Touch 2

How to add Email Model Validation in Sencha Touch 2

In Sencha Touch 2, Models have strong support for validating its data. In Modal, Validation Configuration follows the same format as the Field Configuration. It expects the field name and type of validation. Following are the validation types available (as per Sencha documentation)

1) presence -  Ensures that the field has a value. Zero counts as a valid value but empty strings do not.

2) length  - Ensures that a string is between a minimum and maximum length. Both constraints are optional.

3) format - Ensures that a string matches a regular expression format. In the example above we ensure that the age field is four numbers followed by at least one letter.

How to group Radio Buttons in a Form using Sencha Touch 2

I got a request from one of my reader regarding 'How to group Radio Buttons in a Form'. We are going to create Gender Field with two radio options (Male and Female). Let's see the implementation.

Implementation:

First, We are going to create a container view component with className and aliasName set as 'RadioContainer'. Layout configuration is set to 'hbox', which will position the  container items horizontally.  Next, we are going add child items to the container using items configuration. This configuration contains label component and another container view component.

Save Form Data Locally using Sencha Touch LocalStorage - Part3

In Part1, We have seen how to create a basic HTML Form using Sencha Touch. In Part2, We have seen how to create model and apply model validation to the Form. Today, we are going to see, how we can store the form data Locally using HTML5 LocalStorage API.

Create Web Heatmaps using Javascript Heatmaps Library

Today, i came across an open source javascript library called 'HeatMaps', which is used to generate realtime heatmaps. It uses the power and flexibility of the HTML5 canvas element to creating heatmaps based on your data (gradient, change the opacity, datapoint radius and so on).

As per the Documentation,

"A heatmap is a visualization used for visualizing three dimensional data. Two dimensions represent cartesian coordinates (x and y values) and the third dimension is used for showing the intensity of a datapoint in relative comparison to the absolute maximum of the dataset. The intensity is shown as a color, usually red (hot) is used for the maxima and blue (cold) for minima."

Convert Object to QueryString in Sencha Touch 2

In Sencha Touch 2, today i came across a handy function Ext.Object.toQueryString() which is used to convert object into encoded query string. This encoded query string can be appended to URL which can used for Store Proxy URL configuration in order to fetch JSON/XML data  from remote server. Let me explain with an example

Example1:

var object1 = {fname:'suresh',lname:'kumar'};
var queryStr = Ext.Object.toQueryString(object1);

output: fname=suresh&lname=kumar

Add Form Validation using Model in Sencha Touch 2 - Part2

In Sencha Touch 2, Form Validation can be done using Model Validation. Before that, we are going to take the Form that we created as part of  'How to Create Basic Form Using Sencha Touch - Part1' Post. Here is the source code of the Basic Sencha Form with snapshot.

How to add Phone Number Validation in Sencha Touch 2

In Sencha Touch 2, Models have strong support for validating its data. In Modal, Validation Configuration follows the same format as the Field Configuration. It expects the field name and type of validation. Following are the validation types available (as per Sencha documentation)

1) presence -  Ensures that the field has a value. Zero counts as a valid value but empty strings do not.

2) length  - Ensures that a string is between a minimum and maximum length. Both constraints are optional.

3) format - Ensures that a string matches a regular expression format. In the example above we ensure that the age field is four numbers followed by at least one letter.

Add Button with image in Sencha Touch 2

In sencha Touch 2, Button (Ext.Button) in Form  is used to make web application interactive by submitting the data to the server and allows user to perform some action. By default, sencha touch uses iconCls configuration in order to apply styles and arrows to the button.Today,  we are going to see how we can add image to the Button View Component Using Sencha Touch. Let's see the implementation.

Add TextField with images in Sencha Touch 2

In sencha Touch 2, TextField (Ext.field.Text) in Form plays an important role in any mobile web applications. Today,  we are going to see how we can add TextField with image in a Form Using Sencha Touch. This will come handy when you are displaying Username with Profile image in Account Profile Form or any other account details form. Let's see the implementation.

How to hide NavigationBar in NavagationView on Sencha Touch 2

In Sencha Touch 2, Navigation View allows you to Push and Pop views into the application. Its basically an  container with a card layout, so only one view can be visible at a time.

By default, NavigationBar will be present when you add NavigationView Component. This NavigationBar provides Back button and additional configurations like apply animation, Positioning, tpl configuration and so on. You can hide the NavigationBar using the hidden config property

Navigation View in Sencha Touch 2 Explained - Part2

If you are new to this Post Series and haven't read Part 1 of this Post. Please read first and proceed with part2. Today, we are going to see how we can apply swipe event to the container view component by using listeners config

Attach Swipe Event Handler to Home Page Container

Using listeners configuration, we are attaching swipe event to the homepage container and also attaching handler function onHomepagecontainerSwipe() that needs to be called when swipe event occurs.