Create a Website in HTML 5
I. Introduction.
I am describing here how to make amazing userfriendly html5 website with EXTJS4. First of all i want to give a breif idea about HTML5.
HTML5 is
the newest version of the HyperText Markup Language that was developed in the
late 80's in order to describe documents that linked to each other. Basically
HTML5 has it’s many new syntactical features, which include the <video>,
<audio>, and <canvas> elements, as well as the integration of SVG
content. Due to these new elements, it will be very easy to integrate multimedia
and graphical content to web without using flash and third party plugins. There
are also another new elements like <section>, <article>,
<header> and <nav> which enrich the semantic value of the document.
Other major advantages of HTML5 are described below.
1. Cross-Browser Compatibility
When it comes to HTML5, one of
the most important factors a business must take into consideration is browser
support. Will it be compatible with the browsers your visitors are using to
view your website? The good thing is that all the popular web browsers
are being designed with HTML5 in mind. In fact, Microsoft Internet
Explorer, Mozilla Firefox, and Google Chrome have all been updated with
features that support the newest version of the standard. Apple and Google have
even optimized their browsers to accommodate the mobile users of iPhone and
Android platforms respectively.
2.
Easy to include Multimedia
Due to usability
purpose the web sites made by developers are highly interactive nowadays and
for this developers need to include fluid animations, stream video, play music
and Social Network sites like Facebook and Twitter into the websites. Till now
they have only the option to integrate it with the help of Flash or
Silverlight, Flex or javascript like tools. But these consume so much time to
develop and even the complexity of web application also increased. But now with
the help of HTML5 it is possible to embed video and audio, high quality
drawings, charts and animation and many other rich content without using any
plugins and third party programmas as the functionality is built into the
browser.
3.
Easy Forms submission
HTML5 enables designer
to use more fancier forms. Even it makes form validation native to HTML, User
interface enhancements and reduced need for JavaScript (only needed in browsers
that don’t support form types). There will be different type of text inputs,
search and different fields for different purpose.
4.
Local storage and Session
storage
While cookies have
been used to track unique user data for years, they have serious disadvantages.
The largest flaw is that all of your cookie data is added to every HTTP request
header. This can end up having a measurable impact on response time. So a best
practice is to reduce cookie size. With HTML5 we can do better by using
sessionStorage and localStorage (two different storage in HTML5) in place
of cookies. It is not a permanent database, but enables you to store structured
data, temporarily.
II. Extjs Forms
I will explain a sample login application using EXTJS4
1. First you download extjs files from Sencha website
1. First you download extjs files from Sencha website
2. create an entry point that means an HTML (JSP,ASP or PHP) file. I am explaining this with PHP.
Here is the code for the HTML file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"> <script type="text/javascript" src="extjs/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script> <script type="text/javascript" src="login.js"></script> </head> <body></body> </html>
ext-all.css
ext-base.cs
ext-all.css
These three files you will get with Extjs package.
3. Write LOGIN.JS file
Like html controls in by using EXTJS framework you can use extjs controls.
1. First we create a variable to hold extjs form panel.
2. Items can be added to the form panel using the configuration
items:[{item1,item2,item3}]
Here in this example i'm using form submit method using
Full LOGIN.JS file code is here,
3. Server File (PHP)
ext-base.cs
ext-all.css
These three files you will get with Extjs package.
3. Write LOGIN.JS file
Like html controls in by using EXTJS framework you can use extjs controls.
1. First we create a variable to hold extjs form panel.
2. Items can be added to the form panel using the configuration
items:[{item1,item2,item3}]
Here in this example i'm using form submit method using
login.getForm().submit()
Full LOGIN.JS file code is here,
Ext.onReady(function(){ Ext.QuickTips.init(); // Create a variable to hold our EXT Form Panel. // Assign various config options as seen. var login = new Ext.FormPanel({ labelWidth:80, url:'login.php', frame:true, title:'Please Login', defaultType:'textfield', monitorValid:true, // Specific attributes for the text fields for username / password. // The "name" attribute defines the name of variables sent to the server. items:[{ fieldLabel:'Username', name:'loginUsername', allowBlank:false },{ fieldLabel:'Password', name:'loginPassword', inputType:'password', allowBlank:false }], // All the magic happens after the user clicks the button buttons:[{ text:'Login', formBind: true, // Function that fires when user clicks the button handler:function(){ login.getForm().submit({ method:'POST', waitTitle:'Connecting', waitMsg:'Sending data...', // Functions that fire (success or failure) when the server responds. // The one that executes is determined by the // response that comes from login.asp as seen below. The server would // actually respond with valid JSON, // something like: response.write "{ success: true}" or // response.write "{ success: false, errors: { reason: 'Login failed. Try again.' }}" // depending on the logic contained within your server script. // If a success occurs, the user is notified with an alert messagebox, // and when they click "OK", they are redirected to whatever page // you define as redirect. success:function(){ Ext.Msg.alert('Status', 'Login Successful!', function(btn, text){ if (btn == 'ok'){ var redirect = 'test.php'; window.location = redirect; } }); }, // Failure function, see comment above re: success and failure. // You can see here, if login fails, it throws a messagebox // at the user telling him / her as much. failure:function(form, action){ if(action.failureType == 'server'){ obj = Ext.util.JSON.decode(action.response.responseText); Ext.Msg.alert('Login Failed!', obj.errors.reason); }else{ Ext.Msg.alert('Warning!', 'Authentication server is unreachable : ' + action.response.responseText); } login.getForm().reset(); } }); } }] }); // This just creates a window to wrap the login form. // The login object is passed to the items collection. var win = new Ext.Window({ layout:'fit', width:300, height:150, closable: false, resizable: false, plain: true, border: false, items: [login] }); win.show(); });
3. Server File (PHP)
<?php $loginUsername = isset($_POST["loginUsername"]) ? $_POST["loginUsername"] : ""; if($loginUsername == "f"){ echo "{success: true}"; } else { echo "{success: false, errors: { reason: 'Login failed. Try again.' }}"; } ?>
(To be continued..)
