ExtJS Tutorial: Using ExtJS Form to store data to mysql database using PHP
In my previuos post about tutorial ExtJS, i post how to show data in our mysql database to ExtJS Grid. Now i will write how to insert data to our database using ExtJS Form. I Will make a simple one, i will use same table i use at my previous tutorial. here the screenshoot of form i made.
Java Mobile Game: My First Java Mobile Game “Naruto Sokoban”
I While ago i have finished my first java mobile game. I made a sokoban game with Naruto as the player character because iam one of millions of Naruto fans. I develop this game using Netbeans 5.5 IDE. here the information of the JAD file of this game:
MIDlet-1: Naruto Sokoban, /res/charset/Naruto.png, src.NarutoSokoban
MIDlet-Jar-Size: 308559
MIDlet-Jar-URL: NarutoSokoban.jar
MIDlet-Name: NarutoSokoban
MIDlet-Vendor: Vendor
MIDlet-Version: 1.0
MicroEdition-Configuration: CLDC-1.0
MicroEdition-Profile: MIDP-2.0
and here the screenshoot of the game:
ExtJS tutorial part III: Paging Grid with PHP and MySql
In my previous post i wrote how to create ExtJS grid with data from mysql database using php. In that post i make an example with little data, its ok for that example. But if our data is big it sound annoying if we must show them in grid at once. The solution is create a grid with paging. So in this post i will show haw to create a ExtJS grid with paging like this picture below.
there is no big different with my previous post, all we need just modify the js file and php file. you can download source for my previous post here
ExtJS tutorial part II: Building Grid with Json data store
In my previous post i wrote a tutorial about building simple array grid using extjs. But if i have my data in a database, how i can display it on the grid? In this post i will show how to display data form the database into the extjs grid using php, mysql, and json.
1. Create the table first dan insert some sample data
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | CREATE TABLE IF NOT EXISTS `strawhats` ( `id` TINYINT(4) NOT NULL AUTO_INCREMENT, `name` VARCHAR(25) NOT NULL, `POSITION` VARCHAR(25) NOT NULL, `ambition` TEXT NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; INSERT INTO `strawhats` (`id`, `name`, `POSITION`, `ambition`) VALUES (1, ‘Monkey D Luffy’, ‘Captain’, ‘I Will become the pirate king’), (2, ‘Roronoa zoro’, ‘Swordman’, ‘Become greatet swordman’), (3, ‘Sanji’, ‘Cook’, ‘Find all blue’), (4, ‘Nami’, ‘Navigator’, ‘Draw map of the world’), (5, ‘Usopp’, ‘Sniper’, ‘Become greatest warrior’); |
2. db-grid.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>DB GRID SAMPLE</title> <!–- include ext-all.css -–> <link rel="stylesheet" href="ext-2.2/resources/css/ext-all.css" /> <!–- include ext-base.js -–> <script type="text/javascript" src="ext-2.2/adapter/ext/ext-base.js"></script> <!–- include ext-all.js -–> <script type="text/javascript" src="ext-2.2/ext-all.js"></script> <!–- include db-grid.js -–> <script type="text/javascript" src="db-grid.js"></script> </head> <body> <!–- grid will render to this element -–> <div id="db-grid"></div> </body> </html> |
Ext JS tutorial part I: Building Simple Array Grid
First time i using Ext JS, i think how difficult to use this library. and at the first time i try to build my first grid i fail 
what i see is a blank page and i dont know what the error. but i am not give up :D, when i am surfing on the internet i found firebug. firebug is tools that integrates with Firefox. With this tool you can debug error in your javascript code. you can download firebug here
so, before we start this tutorial make sure you already install Firefox and firebug. and you already have the Ext JS library of course :). if you dont have the ExtJS library yet you can download here
lets start with the array grid (grid that the data is load from array). I use Ext-2.2 for this tutorial.
1. write the html first (array-grid.html)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <html> <head> <title>Array Grid Sample</title> <!– include ext-all.css –> <link rel=”stylesheet” type=”text/css” href=”ext-2.2/resources/css/ext-all.css” /> <!– include ext-base.js –> <script type=”text/javascript” src=”ext-2.2/adapter/ext/ext-base.js”></script> <!– include ext-all.js –> <script type=”text/javascript” src=”ext-2.2/ext-all.js”></script> <!– include your javascript code here ( see part 2 ) –> <script type=”text/javascript” src=”array-grid.js”></script> </head> <body> <!– grid will render to this element –> <div id=”grid-example”></div> </body> </html> |
2. write the javascript (array-grid.js)
make sure your code to build grid is inside this code:
1 2 3 | Ext.onReady (function () { // place your code here }); |
Ext JS overview: Cross-browser JavaScript library for building rich internet applications
Ext JS is a cross-browser JavaScript library. It includes customizable UI widgets and extensible component model so you can build rich internet application. Its also support all major web browsers like IE 6+, Firefox 1.5+, Safari 3+, and Opera 9+.
First time i use it to build web application, i am impressed. its awesome .. With Ext JS you can build web application like desktop application. You can check out how awesome this thing by looking the sample application here or you can download the library here (it includes full source code, build, HTML javadoc documentation and samples).
here the screenshoot of grid that build with Ext JS.
-
Find It
-
Recently Written
- ExtJS Tutorial: Using ExtJS Form to store data to mysql database using PHP
- Java Mobile Game: My First Java Mobile Game “Naruto Sokoban”
- ExtJS tutorial part III: Paging Grid with PHP and MySql
- ExtJS tutorial part II: Building Grid with Json data store
- Ext JS tutorial part I: Building Simple Array Grid
- Ext JS overview: Cross-browser JavaScript library for building rich internet applications
-
Categories
-
Monthly Archives