Defafe

Because of you, I still hold to share knowledge through this blog. These days I am confused what to write on this blog, I have no time to continue my project before. But do not worry, now I want to share knowledge, how to make a completed registration form with a captcha. As we know captcha is necessary to protect the blog or our website from spam.

Registration form is composed of 5 input, ie name, username, passwword, confirm password, email, and spam code. Below are some validation that I use to make this registration form:

1. Each input can not be empty, sourcecode ==> “allowBlank: false”.
2. username: user can only create a username at least 3 characters and maximum of 12 characters, source code ==> Minlength: 3, MaxLength: 12.
3. password: sourcecode ==> inputType: ‘passoword’
4. email validation : sourcecode ==> vtype: ‘email’.

To create spam on the extjs code I use script like below.

xtype:'box',
 autoEl:{
 tag:'img',
 src:'spam.php'
 }

You can download the sourcecode is in the link below.

download | demo

I am sorry when I check back my previous tutorial on uploading files and images, there are some mistakes that should be fixed in its database, and there are some parts that I have not explained clearly. Now I will try to explain again some of which I consider important.

1. On these tutorials you can only upload image files that have extensions gif,  jpeg and png. if you upload a file extension other than the image file, the file will not be able to upload or error.
2. create a folder image and article to store files uploaded.

download this sourcecode , demo this application

form-upload-extjs

In this tutorial, I will give examples of the usage of bar chart by using extjs and php. Generally, bar chart consists of the x-axis and y-axis in this tutorial I will provide a case study about the number of sales in each month, the x-axis represents the name of the month, while the y-axis represents the total sales of each month.

we first create a database with the name of “chart” after that create a table with a “sale”, tables of contents consists of two columns of “month” and “sumOfsel”, for more details on the source code can be seen below.

CREATE TABLE IF NOT EXISTS `sale` (

 `month` int(11) NOT NULL,

 `sumOfsel` int(11) NOT NULL

) ENGINE=MyISAM  DEFAULT CHARSET=latin1;

after create tables, enter data into a table, like the example below:

INSERT INTO `penjualan` (`month`, `sumOfsel`) VALUES

(0, 1400),

(2, 2000),

(3, 4000),

(4, 8000),

(0, 30000),

(1, 5000),

(5, 14686);

(more…)

In this section i want to share about how to make chart using extjs and php, this chart very sampel, i use pie chart and json to make it.

case study: in this tutorial I want to display the graph the number of visitors in a particular month.

create database: exmaple “chart” after that create table like this:

CREATE TABLE IF NOT EXISTS `testchart` (
 `name` varchar(100) NOT NULL,
 `visit` varchar(100) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

(more…)

On occasion this time I just want to introduce additional features in extjs 3, before I continue my  project “ Part 1: simple application of extjs using layout browser “, just the information that my project is using extjs 2.

Ok, we start this review. in extjs 3 there are some features that help us to develop a website. some fiture of extjs 3 are as follow.

1.  Form (custome spinner widget example, vbox layout with form).

2. Toolbars and Menus (toolbar buttons group, toolbars overflow, status bar update ).

3. Template and Data Views (ListView).

4. Drag and drop (filed to grid drag and drop).

5. Misscellaneous (editor, bubble panel, button, spotlight, debuging console).

6. Tree (treeGrid, check tree).

7. Charts (chart, pie chart, stacked bar chat, reloaded chart ).

8. Tabs (group tabs, tabpanel scroller menu).

9. Grid (progress bar pager, sliding pager, grouping with dynamic summary, buffered grid view, editable grid with writable store, grouping grid view extension, looking grid view extension ).

links this tutorial