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

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

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..)

Java Developer Cochin | Java Expert Cochin | Java Expert Kerala | Java Programmer

Wednesday, 27 June 2012