Tabs bookmarkable via urlhash
Base64 encode and decode Meer informatie
  • Clear input/output
  • Fill with sample
  • Copy output to input

  • Enter text here

  •  
  • Base64 encode
  • Base64 decode
  • Base64 safe encode safe coding : All characters exept [A-Z], [a-z] and [0-9] and \s are entity-encoded before base64 encoding
  • Base64 safe decode
  •  
  • Output
Charcode / Unicode encode and decode Meer informatie over Unicode Meer informatie over HTML entities
  • Clear input/output
  • Fill with sample
  • Copy output to input

  • Enter text here

  •  
  • Charcode character to charcode
  • Character charcode to character
  • Unicode charcode to Unicode
  • Charcode Unicode to charcode
  • Numeric entity Text to Numeric entities, see also HTML entities
  • Text Numeric entities to text
  •  
  • Output
Encode and decode HTML entities Meer informatie over HTML entities
  • Clear input/output
  • Fill with sample

  • Enter text here

  • Allow Double Encoding
  • Encode Method
  •  
  • HTML entity
  • HTML entity
  •  
  • Output
URI encode and decode
  • Clear input/output
  • Fill with sample

  • Enter text here

  •  
  • URI encode all native javascript functions
  • URI decode
  • URI component encode
  • URI component decode
  •  
  • Output
UTF-8 encode and decode Meer informatie
  • Clear input/output
  • Fill with sample

  • Enter text here

  •  
  • UTF encode
  • UTF decode
  •  
  • Output
RSA Encode and decode Meer informatie
  • Clear input/output
  • Fill with sample

  • Enter text here

  • RSA Encode
  • RSA Decode
  •  
  • Remark :Clear Form before next submission
  • Output


Flow:
Volgorde van events bij het encrypten van de data:
  1. Allereerst worden onPageLoad de publieke keys gegenereerd op de server en naar de client verzonden
  2. Na het klikken op de [Encode] button wordt de encrypted data aan het form toegevoegd
  3. De encrypted data wordt in het outputvenster getoond
  4. Het inputvenster wordt gedisabled zodat de orginele data niet verstuurd wordt
  5. Het "onEncrypt" event wordt getriggerd
  6. De [Encode] button wordt gedisabled
  7. De formdata wordt gecodeerd en opgeslagen in het XHR-object
  8. Na het klikken op de [Decode] button wordt de data naar de server gestuurd via AJAX
  9. De [Decode] button wordt gedisabled
  10. De server decodeert en decrypt de data
  11. De keys worden gewist
  12. De data wordt als voorbeeld teruggestuurd via AJAX naar de client, normaal wordt de data op de server verwerkt (database)
  13. De data wordt getoond in het outputvenster na verwerking op de client


Voorbeeld van class met interfaces (Model, View, Controller) :

FormProcess is een class (xhr-interface met de server) die de encrypted data naar de server stuurt en het gedecodeerde resultaat teugstuurt naar de client voor verwerking. In The Real World zou de data bijvoorbeeld in een database worden opgeslagen.

var FormProcess = (function(){
    
    //private
    var BTN='#encrypt_nohash',
        CNT_MESSAGE='#message';
        
    var oData={};

    var XHR = {
			
            submit : function(obj){
                obj= typeof(obj)==='undefined' ? oData.obj:obj;
                $.submit({
                    type            : obj.type,
                    encode          : 'base64',//base64, base64safe, utf8
                    json            : true,
                    url             : obj.url,
                    data            : 'd='+obj.data,
                    onsuccess       : this.submitSuccessResult,//200
                    onfailure       : this.submitFailureResult,//404 ea
                    scope           : self       
                });
            },
                    
            submitSuccessResult : function(oResponse){
                var doc=oData.doc;
                doc.output.val(oResponse.data);
                $.serialize.disableFields(doc.decode1.selector);
                return true;
            },
                    
            submitFailureResult : function(oResponse){
                alert('oops, server error, please try again');
                return false;
            }
        };
        
    //public
    var self = {
        submit : function(obj){
            XHR.submit(obj);
        },
        setData :function(obj){
            $.extend(oData,obj);
        }
    };
    return self;
})();

Voorbeeld van een onload-interface-class die de events aan de verschillende buttons koppelt

Hier gebruik ik een dynamische DOM-interface die per tab een interface met de VIEW instantiŽerd


$(document).ready(function(){
            //init=======================================
            Koppelen van modules
            $("#tabs").tabs({ selected: 0 });
            
			$.extend(Util);//tools object
            $.extend(RequestManager);//xhr request object
            $.extend(HTML);//html entity decode object
            $.extend(RSA);//encryption object
            
			$.logInit();//logger for debugging
            //===========================================
            //constants
            var INIT_TAB = 1;
            
            //private vars
            var doc,
                root = $.getLocation().root,
                $form = $('#form');
            
            //dom (VIEW) interface constructor. Voor elke afzonderlijke tab wordt
              een referentie naar de formelementen in die tab geladen.
              format : {object}referentie = new Nodes({integer} tabindex)
              
            function Nodes(tab){
                this.tab=parseInt(tab);
                this.input=$('#txt'+this.tab+'Input');
                this.output=$('#txt'+this.tab+'Output');
                this.doubleEncode=$('input[name="chkDouble"]');
                this.entity=$('#radMethodEn');
                this.numeric=$('#radMethodNum');
                this.clear=$('#cmd'+this.tab+'Clear');
                this.fill=$('#cmd'+this.tab+'Fill');
                this.copy=$('#cmd'+this.tab+'Copy');
                this.encode1=$('#cmd'+this.tab+'1Encode');
                this.encode2=$('#cmd'+this.tab+'2Encode');
                this.encode3=$('#cmd'+this.tab+'3Encode');
                this.decode1=$('#cmd'+this.tab+'1Decode');
                this.decode2=$('#cmd'+this.tab+'2Decode');
                this.decode3=$('#cmd'+this.tab+'3Decode');
            }

            //private helper methods
            var base64encode = function(safe){
                var value=doc.input.val();
                var result;
                
                result=$.base64encode(value,safe);
                doc.output.val(result);
            };
            
            var base64decode = function(safe){
                var value=doc.output.val();
                var result;
                
                result=$.base64decode(value,safe);
                doc.output.val(result);
            };
            var clear = function(){
                $(':input').removeAttr("disabled").removeClass('disabled');//tab6
                $('input[name="safe"]').detach();//tab6
                $('textarea').val('');
            };
            //tab 6 function
              Dit is de eerste callback nadat de keys van de server zijn opgehaald
              
            var init = function(){
                //events
                doc.encode1.click(function(event){
                
                    $.serialize.andEncryptBeforeSubmit({
                        form            : "form",
                        fieldsToEncrypt : ['txt6Input'],
                        type            : "xhr-post",
                                        //xhr-post, xhr-get, http-get, http-post
                        beforeSubmit    : function(obj){
                            doc.output.val(obj.encrypted);//show encrypted result
                                                            interface met de VIEW
                            FormProcess.setData({
                                obj     : obj,
                                doc     : doc
                            });//pass data to custom submit function
                                 and store it in FormProcess object
                        },
                        noSubmit        : {   
                            //fields not to be submitted here
                        },
                        btnEncrypt       : doc.encode1.selector,
                        hash             : false, //no hash client/serverkey 
                                            check at server
                        posturl          : 'xhr/submit_nohash.php',
                        encodeURI        : 'base64'//encode all characters 
                                            except [A-Z],[a-z] and[0-9]
                    });
                });
                
            };

            //on tabselect event, 
              per tab wordt hier een interface naar de CONTROLLER gŽistantiŽerd.
              
            $form.bind('tabsselect', function(event, ui) {
            
                var tab = typeof(ui)==='object' 
                    ? parseInt( ui.tab.href.replace(root+'#tabs-', '') ) : ui;
                
                doc= new Nodes(tab);//load dom-interface for this tab

                switch(tab){
                    case 1 ://base64
                        
                        doc.encode1.click(function(event){
                            base64encode();
                        });
                        doc.decode1.click(function(event){
                            base64decode();
                        });
                        doc.encode2.click(function(event){
                            base64encode(true);
                        });
                        doc.decode2.click(function(event){
                            base64decode(true);
                        });
                        doc.input.sample='een snippet'
                        break;
                    case 2 ://charcode
                        doc.encode1.click(function(event){//char to code
                            var value=doc.input.val();
                            var result;
                            
                            result=value.charCodeAt(0);
                            doc.output.val(result);
                        });
                        doc.decode1.click(function(event){//code to char
                            var value=doc.input.val();
                            var result;
                            
                            result=String.fromCharCode(parseInt(value) );
                            doc.output.val(result);
                        });
                        doc.encode2.click(function(event){//charcode to unicode
                            var value=doc.input.val();
                            var result;
                            
                            result='U+'+$.decToHex(value);
                            doc.output.val(result);
                        });
                        doc.decode2.click(function(event){//unicode to charcode
                            var value=doc.input.val();
                            var result;
                            
                            value=value.replace('U+', '');
                            result=$.hexToDec(value);
                            doc.output.val(result);
                        });
                        doc.encode3.click(function(event){//text to entity
                            var value=doc.input.val();
                            var result;
                            
                            result=$.txtToCharCode(value);
                            doc.output.val(result);
                        });
                        doc.decode3.click(function(event){//entity to text
                            var value=doc.input.val();
                            var result;
                            
                            result=$.charCodeToTxt(value);
                            doc.output.val(result);
                        });
                        doc.input.sample='een voorbeeldtekst';
                        break;
                    case 3 ://html
                        doc.encode1.click(function(event){
                            var db=doc.doubleEncode[0].checked,
                                mode;
                            doc.entity[0].checked ? mode='entity':mode='numerical';
                            $.html.setOptions({
                                encodeType      : mode,  // entity OR numerical
                                encodeDouble    : db
                            });
                            doc.output.val( $.html.encode(doc.input.val()) );
                        });
                        doc.decode1.click(function(event){
                            doc.output.val( $.html.decode( doc.output.val() ) );
                        });
                        doc.input.sample='een vorbeeld';
                        
                        break;
                    case 4 ://uri
                        doc.encode1.click(function(event){
                            var value=doc.input.val();
                            var result;
                            
                            result=encodeURI(value);
                            doc.output.val(result);
                        });
                        doc.decode1.click(function(event){
                            var value=doc.output.val();
                            var result;
                            
                            result=decodeURI(value);
                            doc.output.val(result);
                        });
                        doc.encode2.click(function(event){
                            var value=doc.input.val();
                            var result;
                            
                            result=encodeURIComponent(value);
                            doc.output.val(result);
                        });
                        doc.decode2.click(function(event){
                            var value=doc.output.val();
                            var result;
                            
                            result=decodeURIComponent(value);
                            doc.output.val(result);
                        });
                        doc.input.sample='een url';
                        break;
                    case 5 ://utf8
                        doc.encode1.click(function(event){
                            var value=doc.input.val();
                            var result;
                            
                            result=$.encode_utf8(value);
                            doc.output.val(result);
                        });
                        doc.decode1.click(function(event){
                            var value=doc.output.val();
                            var result;
                            
                            result=$.decode_utf8(value);
                            doc.output.val(result);
                        });
                        doc.input.sample='een tekst';
                        break;
                    case 6 ://rsa
                        $.rsaGetKey(init);//get server key and pass 
                                            onsuccess callback function
                        
                        clear();
                        
                        doc.decode1.click(function(event){
                            FormProcess.submit(); 
                        });
                        doc.input.sample='een sample';
                        break;
                }//end switch
                
                //Algemene CONTROLLER interface, voor elke tab hetzelfde dus
                //clear button
                doc.clear.click(function(event){
                    clear();   
                });
                //load testsample button
                doc.fill.click(function(event){
                    doc.input.val(doc.input.sample);
                });
                //copy button
                doc.copy.click(function(event){
                    doc.input.val( doc.output.val() );
                    doc.output.val('');
                });
                
            });//end tabselect event handler
            
            //onpageload tab1 activation
              De eerste tab (index 1) is actief als de pagina geladen wordt. 
              De CONTROLLER interface van tab1 moet dan eerst worden gŽinitialiseerd.
              
            doc= new Nodes(INIT_TAB);//load dom-interface for INIT_TAB (view)
            $form.trigger('tabsselect',INIT_TAB);//load controller-interface
 
});
MD-5 hash
  • Clear input/output
  • Fill with sample

  • Enter text here

  •  
  • MD hash generated with javascript MD5 functions
  •  
  • Output