Pages

Tuesday 16 July 2013

POSTING FORM Through Jquery AJAX



POSTING FORM Through Jquery AJAX



Here Iam describing how to submit a form thorugh ajax and displays the validations messages in the page itself.

Step -1
Create folder called myajax and Copy the following code and save it as myformquery.js in myajax folder


(function($){$.extend($.fn,{validate:function(options){if(!this.length){if(options&&options.debug&&window.console){console.warn("Nothing selected, can't validate, returning nothing.")}return}var validator=$.data(this[0],"validator");if(validator){return validator}this.attr("novalidate","novalidate");validator=new $.validator(options,this[0]);$.data(this[0],"validator",validator);if(validator.settings.onsubmit){this.validateDelegate(":submit","click",function(event){if(validator.settings.submitHandler){validator.submitButton=event.target}if($(event.target).hasClass("cancel")){validator.cancelSubmit=true}});this.submit(function(event){if(validator.settings.debug){event.preventDefault()}function handle(){var hidden;if(validator.settings.submitHandler){if(validator.submitButton){hidden=$("<input type='hidden'/>").attr("name",validator.submitButton.name).val(validator.submitButton.value).appendTo(validator.currentForm)}validator.settings.submitHandler.call(validator,validator.currentForm,event);if(validator.submitButton){hidden.remove()}return false}return true}if(validator.cancelSubmit){validator.cancelSubmit=false;return handle()}if(validator.form()){if(validator.pendingRequest){validator.formSubmitted=true;return false}return handle()}else{validator.focusInvalid();return false}})}return validator},valid:function(){if($(this[0]).is("form")){return this.validate().form()}else{var valid=true;var validator=$(this[0].form).validate();this.each(function(){valid&=validator.element(this)});return valid}},removeAttrs:function(attributes){var result={},$element=this;$.each(attributes.split(/\s/),function(index,value){result[value]=$element.attr(value);$element.removeAttr(value)});return result},rules:function(command,argument){var element=this[0];if(command){var settings=$.data(element.form,"validator").settings;var staticRules=settings.rules;var existingRules=$.validator.staticRules(element);switch(command){case"add":$.extend(existingRules,$.validator.normalizeRule(argument));staticRules[element.name]=existingRules;if(argument.messages){settings.messages[element.name]=$.extend(settings.messages[element.name],argument.messages)}break;case"remove":if(!argument){delete staticRules[element.name];return existingRules}var filtered={};$.each(argument.split(/\s/),function(index,method){filtered[method]=existingRules[method];delete existingRules[method]});return filtered}}var data=$.validator.normalizeRules($.extend({},$.validator.classRules(element),$.validator.attributeRules(element),$.validator.dataRules(element),$.validator.staticRules(element)),element);if(data.required){var param=data.required;delete data.required;data=$.extend({required:param},data)}return data}});$.extend($.expr[":"],{blank:function(a){return!$.trim(""+a.value)},filled:function(a){return!!$.trim(""+a.value)},unchecked:function(a){return!a.checked}});$.validator=function(options,form){this.settings=$.extend(true,{},$.validator.defaults,options);this.currentForm=form;this.init()};$.validator.format=function(source,params){if(arguments.length===1){return function(){var args=$.makeArray(arguments);args.unshift(source);return $.validator.format.apply(this,args)}}if(arguments.length>2&&params.constructor!==Array){params=$.makeArray(arguments).slice(1)}if(params.constructor!==Array){params=[params]}$.each(params,function(i,n){source=source.replace(new RegExp("\\{"+i+"\\}","g"),function(){return n})});return source};$.extend($.validator,{defaults:{messages:{},groups:{},rules:{},errorClass:"error",validClass:"valid",errorElement:"label",focusInvalid:true,errorContainer:$([]),errorLabelContainer:$([]),onsubmit:true,ignore:":hidden",ignoreTitle:false,onfocusin:function(element,event){this.lastActive=element;if(this.settings.focusCleanup&&!this.blockFocusCleanup){if(this.settings.unhighlight){this.settings.unhighlight.call(this,element,this.settings.errorClass,this.settings.validClass)}this.addWrapper(this.errorsFor(element)).hide()}},onfocusout:function(element,event){if(!this.checkable(element)&&(element.name in this.submitted||!this.optional(element))){this.element(element)}},onkeyup:function(element,event){if(event.which===9&&this.elementValue(element)===""){return}else if(element.name in this.submitted||element===this.lastElement){this.element(element)}},onclick:function(element,event){if(element.name in this.submitted){this.element(element)}else if(element.parentNode.name in this.submitted){this.element(element.parentNode)}},highlight:function(element,errorClass,validClass){if(element.type==="radio"){this.findByName(element.name).addClass(errorClass).removeClass(validClass)}else{$(element).addClass(errorClass).removeClass(validClass)}},unhighlight:function(element,errorClass,validClass){if(element.type==="radio"){this.findByName(element.name).removeClass(errorClass).addClass(validClass)}else{$(element).removeClass(errorClass).addClass(validClass)}}},setDefaults:function(settings){$.extend($.validator.defaults,settings)},messages:{required:"This field is required.",remote:"Please fix this field.",email:"Please enter a valid email address.",url:"Please enter a valid URL.",date:"Please enter a valid date.",dateISO:"Please enter a valid date (ISO).",number:"Please enter a valid number.",digits:"Please enter only digits.",creditcard:"Please enter a valid credit card number.",equalTo:"Please enter the same value again.",maxlength:$.validator.format("Please enter no more than {0} characters."),minlength:$.validator.format("Please enter at least {0} characters."),rangelength:$.validator.format("Please enter a value between {0} and {1} characters long."),range:$.validator.format("Please enter a value between {0} and {1}."),max:$.validator.format("Please enter a value less than or equal to {0}."),min:$.validator.format("Please enter a value greater than or equal to {0}.")},autoCreateRanges:false,prototype:{init:function(){this.labelContainer=$(this.settings.errorLabelContainer);this.errorContext=this.labelContainer.length&&this.labelContainer||$(this.currentForm);this.containers=$(this.settings.errorContainer).add(this.settings.errorLabelContainer);this.submitted={};this.valueCache={};this.pendingRequest=0;this.pending={};this.invalid={};this.reset();var groups=(this.groups={});$.each(this.settings.groups,function(key,value){if(typeof value==="string"){value=value.split(/\s/)}$.each(value,function(index,name){groups[name]=key})});var rules=this.settings.rules;$.each(rules,function(key,value){rules[key]=$.validator.normalizeRule(value)});function delegate(event){var validator=$.data(this[0].form,"validator"),eventType="on"+event.type.replace(/^validate/,"");if(validator.settings[eventType]){validator.settings[eventType].call(validator,this[0],event)}}$(this.currentForm).validateDelegate(":text, [type='password'], [type='file'], select, textarea, "+"[type='number'], [type='search'] ,[type='tel'], [type='url'], "+"[type='email'], [type='datetime'], [type='date'], [type='month'], "+"[type='week'], [type='time'], [type='datetime-local'], "+"[type='range'], [type='color'] ","focusin focusout keyup",delegate).validateDelegate("[type='radio'], [type='checkbox'], select, option","click",delegate);if(this.settings.invalidHandler){$(this.currentForm).bind("invalid-form.validate",this.settings.invalidHandler)}},form:function(){this.checkForm();$.extend(this.submitted,this.errorMap);this.invalid=$.extend({},this.errorMap);if(!this.valid()){$(this.currentForm).triggerHandler("invalid-form",[this])}this.showErrors();return this.valid()},checkForm:function(){this.prepareForm();for(var i=0,elements=(this.currentElements=this.elements());elements[i];i++){this.check(elements[i])}return this.valid()},element:function(element){element=this.validationTargetFor(this.clean(element));this.lastElement=element;this.prepareElement(element);this.currentElements=$(element);var result=this.check(element)!==false;if(result){delete this.invalid[element.name]}else{this.invalid[element.name]=true}if(!this.numberOfInvalids()){this.toHide=this.toHide.add(this.containers)}this.showErrors();return result},showErrors:function(errors){if(errors){$.extend(this.errorMap,errors);this.errorList=[];for(var name in errors){this.errorList.push({message:errors[name],element:this.findByName(name)[0]})}this.successList=$.grep(this.successList,function(element){return!(element.name in errors)})}if(this.settings.showErrors){this.settings.showErrors.call(this,this.errorMap,this.errorList)}else{this.defaultShowErrors()}},resetForm:function(){if($.fn.resetForm){$(this.currentForm).resetForm()}this.submitted={};this.lastElement=null;this.prepareForm();this.hideErrors();this.elements().removeClass(this.settings.errorClass).removeData("previousValue")},numberOfInvalids:function(){return this.objectLength(this.invalid)},objectLength:function(obj){var count=0;for(var i in obj){count++}return count},hideErrors:function(){this.addWrapper(this.toHide).hide()},valid:function(){return this.size()===0},size:function(){return this.errorList.length},focusInvalid:function(){if(this.settings.focusInvalid){try{$(this.findLastActive()||this.errorList.length&&this.errorList[0].element||[]).filter(":visible").focus().trigger("focusin")}catch(e){}}},findLastActive:function(){var lastActive=this.lastActive;return lastActive&&$.grep(this.errorList,function(n){return n.element.name===lastActive.name}).length===1&&lastActive},elements:function(){var validator=this,rulesCache={};return $(this.currentForm).find("input, select, textarea").not(":submit, :reset, :image, [disabled]").not(this.settings.ignore).filter(function(){if(!this.name){if(window.console){console.error("%o has no name assigned",this)}throw new Error("Failed to validate, found an element with no name assigned. See console for element reference.")}if(this.name in rulesCache||!validator.objectLength($(this).rules())){return false}rulesCache[this.name]=true;return true})},clean:function(selector){return $(selector)[0]},errors:function(){var errorClass=this.settings.errorClass.replace(" ",".");return $(this.settings.errorElement+"."+errorClass,this.errorContext)},reset:function(){this.successList=[];this.errorList=[];this.errorMap={};this.toShow=$([]);this.toHide=$([]);this.currentElements=$([])},prepareForm:function(){this.reset();this.toHide=this.errors().add(this.containers)},prepareElement:function(element){this.reset();this.toHide=this.errorsFor(element)},elementValue:function(element){var type=$(element).attr("type"),val=$(element).val();if(type==="radio"||type==="checkbox"){return $("input[name='"+$(element).attr("name")+"']:checked").val()}if(typeof val==="string"){return val.replace(/\r/g,"")}return val},check:function(element){element=this.validationTargetFor(this.clean(element));var rules=$(element).rules();var dependencyMismatch=false;var val=this.elementValue(element);var result;for(var method in rules){var rule={method:method,parameters:rules[method]};try{result=$.validator.methods[method].call(this,val,element,rule.parameters);if(result==="dependency-mismatch"){dependencyMismatch=true;continue}dependencyMismatch=false;if(result==="pending"){this.toHide=this.toHide.not(this.errorsFor(element));return}if(!result){this.formatAndAdd(element,rule);return false}}catch(e){if(this.settings.debug&&window.console){console.log("Exception occured when checking element "+element.id+", check the '"+rule.method+"' method.",e)}throw e}}if(dependencyMismatch){return}if(this.objectLength(rules)){this.successList.push(element)}return true},customDataMessage:function(element,method){return $(element).data("msg-"+method.toLowerCase())||(element.attributes&&$(element).attr("data-msg-"+method.toLowerCase()))},customMessage:function(name,method){var m=this.settings.messages[name];return m&&(m.constructor===String?m:m[method])},findDefined:function(){for(var i=0;i<arguments.length;i++){if(arguments[i]!==undefined){return arguments[i]}}return undefined},defaultMessage:function(element,method){return this.findDefined(this.customMessage(element.name,method),this.customDataMessage(element,method),!this.settings.ignoreTitle&&element.title||undefined,$.validator.messages[method],"<strong>Warning: No message defined for "+element.name+"</strong>")},formatAndAdd:function(element,rule){var message=this.defaultMessage(element,rule.method),theregex=/\$?\{(\d+)\}/g;if(typeof message==="function"){message=message.call(this,rule.parameters,element)}else if(theregex.test(message)){message=$.validator.format(message.replace(theregex,"{$1}"),rule.parameters)}this.errorList.push({message:message,element:element});this.errorMap[element.name]=message;this.submitted[element.name]=message},addWrapper:function(toToggle){if(this.settings.wrapper){toToggle=toToggle.add(toToggle.parent(this.settings.wrapper))}return toToggle},defaultShowErrors:function(){var i,elements;for(i=0;this.errorList[i];i++){var error=this.errorList[i];if(this.settings.highlight){this.settings.highlight.call(this,error.element,this.settings.errorClass,this.settings.validClass)}this.showLabel(error.element,error.message)}if(this.errorList.length){this.toShow=this.toShow.add(this.containers)}if(this.settings.success){for(i=0;this.successList[i];i++){this.showLabel(this.successList[i])}}if(this.settings.unhighlight){for(i=0,elements=this.validElements();elements[i];i++){this.settings.unhighlight.call(this,elements[i],this.settings.errorClass,this.settings.validClass)}}this.toHide=this.toHide.not(this.toShow);this.hideErrors();this.addWrapper(this.toShow).show()},validElements:function(){return this.currentElements.not(this.invalidElements())},invalidElements:function(){return $(this.errorList).map(function(){return this.element})},showLabel:function(element,message){var label=this.errorsFor(element);if(label.length){label.removeClass(this.settings.validClass).addClass(this.settings.errorClass);if(label.attr("generated")){label.html(message)}}else{label=$("<"+this.settings.errorElement+"/>").attr({"for":this.idOrName(element),generated:true}).addClass(this.settings.errorClass).html(message||"");if(this.settings.wrapper){label=label.hide().show().wrap("<"+this.settings.wrapper+"/>").parent()}if(!this.labelContainer.append(label).length){if(this.settings.errorPlacement){this.settings.errorPlacement(label,$(element))}else{label.insertAfter(element)}}}if(!message&&this.settings.success){label.text("");if(typeof this.settings.success==="string"){label.addClass(this.settings.success)}else{this.settings.success(label,element)}}this.toShow=this.toShow.add(label)},errorsFor:function(element){var name=this.idOrName(element);return this.errors().filter(function(){return $(this).attr("for")===name})},idOrName:function(element){return this.groups[element.name]||(this.checkable(element)?element.name:element.id||element.name)},validationTargetFor:function(element){if(this.checkable(element)){element=this.findByName(element.name).not(this.settings.ignore)[0]}return element},checkable:function(element){return(/radio|checkbox/i).test(element.type)},findByName:function(name){return $(this.currentForm).find("[name='"+name+"']")},getLength:function(value,element){switch(element.nodeName.toLowerCase()){case"select":return $("option:selected",element).length;case"input":if(this.checkable(element)){return this.findByName(element.name).filter(":checked").length}}return value.length},depend:function(param,element){return this.dependTypes[typeof param]?this.dependTypes[typeof param](param,element):true},dependTypes:{"boolean":function(param,element){return param},"string":function(param,element){return!!$(param,element.form).length},"function":function(param,element){return param(element)}},optional:function(element){var val=this.elementValue(element);return!$.validator.methods.required.call(this,val,element)&&"dependency-mismatch"},startRequest:function(element){if(!this.pending[element.name]){this.pendingRequest++;this.pending[element.name]=true}},stopRequest:function(element,valid){this.pendingRequest--;if(this.pendingRequest<0){this.pendingRequest=0}delete this.pending[element.name];if(valid&&this.pendingRequest===0&&this.formSubmitted&&this.form()){$(this.currentForm).submit();this.formSubmitted=false}else if(!valid&&this.pendingRequest===0&&this.formSubmitted){$(this.currentForm).triggerHandler("invalid-form",[this]);this.formSubmitted=false}},previousValue:function(element){return $.data(element,"previousValue")||$.data(element,"previousValue",{old:null,valid:true,message:this.defaultMessage(element,"remote")})}},classRuleSettings:{required:{required:true},email:{email:true},url:{url:true},date:{date:true},dateISO:{dateISO:true},number:{number:true},digits:{digits:true},creditcard:{creditcard:true}},addClassRules:function(className,rules){if(className.constructor===String){this.classRuleSettings[className]=rules}else{$.extend(this.classRuleSettings,className)}},classRules:function(element){var rules={};var classes=$(element).attr("class");if(classes){$.each(classes.split(" "),function(){if(this in $.validator.classRuleSettings){$.extend(rules,$.validator.classRuleSettings[this])}})}return rules},attributeRules:function(element){var rules={};var $element=$(element);for(var method in $.validator.methods){var value;if(method==="required"){value=$element.get(0).getAttribute(method);if(value===""){value=true}value=!!value}else{value=$element.attr(method)}if(value){rules[method]=value}else if($element[0].getAttribute("type")===method){rules[method]=true}}if(rules.maxlength&&/-1|2147483647|524288/.test(rules.maxlength)){delete rules.maxlength}return rules},dataRules:function(element){var method,value,rules={},$element=$(element);for(method in $.validator.methods){value=$element.data("rule-"+method.toLowerCase());if(value!==undefined){rules[method]=value}}return rules},staticRules:function(element){var rules={};var validator=$.data(element.form,"validator");if(validator.settings.rules){rules=$.validator.normalizeRule(validator.settings.rules[element.name])||{}}return rules},normalizeRules:function(rules,element){$.each(rules,function(prop,val){if(val===false){delete rules[prop];return}if(val.param||val.depends){var keepRule=true;switch(typeof val.depends){case"string":keepRule=!!$(val.depends,element.form).length;break;case"function":keepRule=val.depends.call(element,element);break}if(keepRule){rules[prop]=val.param!==undefined?val.param:true}else{delete rules[prop]}}});$.each(rules,function(rule,parameter){rules[rule]=$.isFunction(parameter)?parameter(element):parameter});$.each(["minlength","maxlength","min","max"],function(){if(rules[this]){rules[this]=Number(rules[this])}});$.each(["rangelength","range"],function(){var parts;if(rules[this]){if($.isArray(rules[this])){rules[this]=[Number(rules[this][0]),Number(rules[this][1])]}else if(typeof rules[this]==="string"){parts=rules[this].split(/[\s,]+/);rules[this]=[Number(parts[0]),Number(parts[1])]}}});if($.validator.autoCreateRanges){if(rules.min&&rules.max){rules.range=[rules.min,rules.max];delete rules.min;delete rules.max}if(rules.minlength&&rules.maxlength){rules.rangelength=[rules.minlength,rules.maxlength];delete rules.minlength;delete rules.maxlength}}return rules},normalizeRule:function(data){if(typeof data==="string"){var transformed={};$.each(data.split(/\s/),function(){transformed[this]=true});data=transformed}return data},addMethod:function(name,method,message){$.validator.methods[name]=method;$.validator.messages[name]=message!==undefined?message:$.validator.messages[name];if(method.length<3){$.validator.addClassRules(name,$.validator.normalizeRule(name))}},methods:{required:function(value,element,param){if(!this.depend(param,element)){return"dependency-mismatch"}if(element.nodeName.toLowerCase()==="select"){var val=$(element).val();return val&&val.length>0}if(this.checkable(element)){return this.getLength(value,element)>0}return $.trim(value).length>0},remote:function(value,element,param){if(this.optional(element)){return"dependency-mismatch"}var previous=this.previousValue(element);if(!this.settings.messages[element.name]){this.settings.messages[element.name]={}}previous.originalMessage=this.settings.messages[element.name].remote;this.settings.messages[element.name].remote=previous.message;param=typeof param==="string"&&{url:param}||param;if(previous.old===value){return previous.valid}previous.old=value;var validator=this;this.startRequest(element);var data={};data[element.name]=value;$.ajax($.extend(true,{url:param,mode:"abort",port:"validate"+element.name,dataType:"json",data:data,success:function(response){validator.settings.messages[element.name].remote=previous.originalMessage;var valid=response===true||response==="true";if(valid){var submitted=validator.formSubmitted;validator.prepareElement(element);validator.formSubmitted=submitted;validator.successList.push(element);delete validator.invalid[element.name];validator.showErrors()}else{var errors={};var message=response||validator.defaultMessage(element,"remote");errors[element.name]=previous.message=$.isFunction(message)?message(value):message;validator.invalid[element.name]=true;validator.showErrors(errors)}previous.valid=valid;validator.stopRequest(element,valid)}},param));return"pending"},minlength:function(value,element,param){var length=$.isArray(value)?value.length:this.getLength($.trim(value),element);return this.optional(element)||length>=param},maxlength:function(value,element,param){var length=$.isArray(value)?value.length:this.getLength($.trim(value),element);return this.optional(element)||length<=param},rangelength:function(value,element,param){var length=$.isArray(value)?value.length:this.getLength($.trim(value),element);return this.optional(element)||(length>=param[0]&&length<=param[1])},min:function(value,element,param){return this.optional(element)||value>=param},max:function(value,element,param){return this.optional(element)||value<=param},range:function(value,element,param){return this.optional(element)||(value>=param[0]&&value<=param[1])},email:function(value,element){return this.optional(element)||/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i.test(value)},url:function(value,element){return this.optional(element)||/^(https?|s?ftp):\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?)(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i.test(value)},date:function(value,element){return this.optional(element)||!/Invalid|NaN/.test(new Date(value).toString())},dateISO:function(value,element){return this.optional(element)||/^\d{4}[\/\-]\d{1,2}[\/\-]\d{1,2}$/.test(value)},number:function(value,element){return this.optional(element)||/^-?(?:\d+|\d{1,3}(?:,\d{3})+)?(?:\.\d+)?$/.test(value)},digits:function(value,element){return this.optional(element)||/^\d+$/.test(value)},creditcard:function(value,element){if(this.optional(element)){return"dependency-mismatch"}if(/[^0-9 \-]+/.test(value)){return false}var nCheck=0,nDigit=0,bEven=false;value=value.replace(/\D/g,"");for(var n=value.length-1;n>=0;n--){var cDigit=value.charAt(n);nDigit=parseInt(cDigit,10);if(bEven){if((nDigit*=2)>9){nDigit-=9}}nCheck+=nDigit;bEven=!bEven}return(nCheck%10)===0},equalTo:function(value,element,param){var target=$(param);if(this.settings.onfocusout){target.unbind(".validate-equalTo").bind("blur.validate-equalTo",function(){$(element).valid()})}return value===target.val()}}});$.format=$.validator.format}(jQuery));(function($){var pendingRequests={};if($.ajaxPrefilter){$.ajaxPrefilter(function(settings,_,xhr){var port=settings.port;if(settings.mode==="abort"){if(pendingRequests[port]){pendingRequests[port].abort()}pendingRequests[port]=xhr}})}else{var ajax=$.ajax;$.ajax=function(settings){var mode=("mode"in settings?settings:$.ajaxSettings).mode,port=("port"in settings?settings:$.ajaxSettings).port;if(mode==="abort"){if(pendingRequests[port]){pendingRequests[port].abort()}return(pendingRequests[port]=ajax.apply(this,arguments))}return ajax.apply(this,arguments)}}}(jQuery));(function($){$.extend($.fn,{validateDelegate:function(delegate,type,handler){return this.bind(type,function(event){var target=$(event.target);if(target.is(delegate)){return handler.apply(target,arguments)}})}})}(jQuery));


Step - 2

Copy the following HTML code and save it as mywebapge.html in myajaxfolder
In the following code the layer <div id="validationresults"></div> displays the validation messages from the php action page mypage.php



<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My Website</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript">
<script type="text/javascript" src="myformquery.js"></script>
</head>
<body>


<script>
$(document).ready(function(){
$("#myformsubmit").validate({
submitHandler : function(form) {
if($('#myformsubmit').submit(function(){return false;}))
{

$.ajax

({
type: 'POST',
url: $('#myformsubmit').attr('action'),
data: $('#myformsubmit').serialize(),
success: function(data)
{

$('#validationresults').html(data);

}

});

}
return false;
},
});

});

</script>

<form action="mypage.php" class="myform" id="myformsubmit" method="post">
Name <input id="namefrm" name="namel" type="text" />
Email ID <input id="emailfrm" name="email" type="text" />
Phone <input id="phonefrm" name="phone" type="text" />
<input type="submit" value="submit" />
</form>

In following layer we will get the validation results from action page (mypage.php)

<div id="validationresults"></div>

</head>
</html>




Step - 3

Copy the following PHP code and save it as mypage.php in myajaxfolder and the following php code doesn't send the form but gives some validation messages by checking the inputs
if name, email and phone is less than 4 charectors it gives proper validation messages


&lt?php
$name = $_POST['namel'];
$email = $_POST['email'];
$phone = $_POST['phone'];

if (strlen($name < 4)) {echo "Bad name";} if (strlen($email < 4)) {echo "Bad Email";} if (strlen($phone < 4)) {echo "Bad Input on Phone";} ?&gt

Sunday 14 July 2013

jQuery load() not working in IE - Internet Explorer

JQUERY load() IS NOT working in Internet Explorer IE ?


 May be you are spending a lot of time to working behind this, Your jQuery load() is working fine in all browsers except Internet Explorer, It is your problem ?

The major issue is Internet Explorer will not load the web papges that have broken HTML code called invalid markups.

$('#mycontent').html('<div class="loader">
<img src="loader.jpg"><BR/><BR/>Please Wait for loading
. .
.

</div>').load('home.html #content');  

Suppose you have jquery script  as above, which loads the layer #content from home.html into the #mycontent, some times you may get nothing inside the #mycontent layer, while checking in browser IE. It is because any of the following issues.


1) Check the HTML Markup of loading webpage
Internet Explorer will not load the webpages that have broken links or having invalid markups. Suppose in our above case if home.html is not loading in layer #mycontent, it is because the webpage home.html have invalid markups, Examples of invalid markups are , Opening a tag, but not closing it OR closing a tag which is not opened. You can check the invalid markups of your webpage using

W3C Markup Validation Service

-->



2) Flush the cache of browser

Internet Explorer normally keep the copy of previously loaded content,To empty the cache memory
Tools -> Internet options -> on general tab -> Delete (Delete temporary internet files, history and cookies)


Correcting the markup of  your website will solve the issue in IE and this solution  can only be applied if the page is loading in all other browsers including Mozilla and Chrome But not in Internet Explorer, if the content is not loading in any browsers, you need check the errors in your coding. but you need to correct the markup for loading the content in some versions of Internet Explorer.

Saturday 22 June 2013

SENDING HTML AND PLAIN TEXT MAILS IN PHP

How to Send HTML and Plain Text Emails in PHP


We can send HTML emails through PHP,  But the major issue we need to take care is some of the mail clients doesn't support HTML mails, some times they display our  HTML message as HTML coding instead of design, to solve from the issue we need to add a text version of the message along with our email.

In the below code, I added both HTML and plain text message formats, if the client's Mail client is not supported HTML Emails, it automatically displays the plain text version, Normally major mail clients supports HTML message, but some others not.

-->
HTML Code (FORM) - contact.html


 <form method="post" name="frmCheckout"  action="post.php">

<div>Name</div>
<div class="quotecontact2">
<input name="nname" class="cform" id="nname"  size="37">
</div>

<div >Email Address</div>
<div>
<input name="email" class="cform" id="email"  size="37">
 </div>

<div>Phone</div>      

<div >
<input name="mphone" class="cform" id="mphone" size="37"> 
</div>
  
<div>Country</div> 
<div>
<input name="nationality" class="cform" id="nationality" size="37">
</div>


<div>Intrested Services</div>

<div>


<input name="webdesign" id="webdesign" type="checkbox" class="fpr" value="Web Design" />
<span class="cform0" >Web designing</span>
<input name="webhost" id="webhost" type="checkbox" class="fpr" value="Web Hosting" />
<span class="cform0">Webhosting</span></div>

<input name="seo" id="seo" type="checkbox" class="fpr" value="SEO" />
<span class="cform0">SEO</span>

<input name="blog" id="blog" type="checkbox" class="fpr" value="Blog" />
<span class="cform0">Blog</span>
</div>

<div>Message</div>

<div> 
<textarea name="msg" cols="40" rows="6" class="cform1" id="msg"></textarea>
 </div>



<div> 
<input name="submit" type="submit"  value="Submit">
<input name="RESET" type="reset" id="RESET">
</div>

</form>


PHP Code  - Post.php

<?PHP
//Posting Input values
$nname=$_POST['nname'];
$email=$_POST['email'];
$mphone=$_POST['mphone'];
$nationality=$_POST['nationality'];

//Posting Check box values
$webdesign = $_POST[webdesign];
$webhost = $_POST[webhost];
$seo = $_POST[seo];
$blog = $_POST[blog];

//Posting Messagebox values
$msg=$_POST['msg'];



# -=-=-=- MIME BOUNDARY
$mime_boundary = "Tom's Cyber Explorations | http://cyberexploration.blogspot.in |".md5(time());
# -=-=-=- MAIL HEADERS
$to = "me@mymailid.com"; // Your email address must be added here
$subject = "Enquiry";
$headers = "From: ".$HTTP_POST_VARS['name'];
$headers .= "Reply-To".$_POST['email'];
$headers .= "MIME-Version: 1.0\n";
$headers .= "Content-Type: multipart/alternative; boundary=\"$mime_boundary\"\r\n";
$headers .= "Content-Transfer-Encoding: 8bit\n\n";



// Starting Plain text message
$message .= "--{$mime_boundary}\r\n";
$message .= "Content-Type: text/plain; charset=UTF-8\n";
$message .= "Content-Transfer-Encoding: 8bit\n\n";

$message .="Name = $nname | Email Address - $email | My Phone number  - $mphone | Country - $nationality | Interested Services - $webdesign , $webhost , $seo, $blog | Message - $msg "; // Message Body

$message .= "--{$mime_boundary}--\r\n";
// Ending Plain text message

// Starting HTML message
$message .= "--{$mime_boundary}\r\n";
$message .= "Content-Type: text/html; charset=UTF-8\n";
$message .= "Content-Transfer-Encoding: 8bit\n\n";

$message .= "<html>\n";
$message .= "<body style=\"font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#006393;\">\n";

$message .= "<table width=\"800\" height=\"159\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" >";
$message .="<tr>";
$message .="<td height=\"66\" colspan=\"4\" bgcolor=\"#002953\"></td>";
$message .="</tr>";
$message .="<tr>";
$message .="<td width=\"1%\"></td>";
$message .="<td colspan=\"3\">&nbsp;</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td width=\"200\"><b>Name</b></td>";
$message .="<td align=\"left\" >:</td>";
$message .="<td>$nname</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";


$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td><b>Email</b></td>";
$message .="<td>:</td>";
$message .="<td>$email</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td><b>Phone</b></td>";
$message .="<td>:</td>";
$message .="<td>$mphone</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td><b>Country</b></td>";
$message .="<td>:</td>";
$message .="<td>$nationality</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td><b>Interested Services</b></td>";
$message .="<td>:</td>";
$message .="<td>$webdesign</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td><b></b></td>";
$message .="<td></td>";
$message .="<td>$webhost</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td><b></b></td>";
$message .="<td></td>";
$message .="<td>$seo</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td><b></b></td>";
$message .="<td></td>";
$message .="<td>$blog</td>";
$message .="</tr>";


$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";


$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td><b>Message</b></td>";
$message .="<td>:</td>";
$message .="<td>$msg</td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td>&nbsp;</td>";
$message .="<td></td>";
$message .="<td>:</td>";
$message .="<td></td>";
$message .="</tr>";

$message .="<tr>";
$message .="<td height=\"21\" colspan=\"4\" bgcolor=\"#CCCCCC\"></td>";
$message .="</tr>";
$message .="</table>";
$message .= "</body>\n";
$message .= "</html>";
# -=-=-=- FINAL BOUNDARY
$message .= "--{$mime_boundary}--\r\n";
// Ending HTML message
$message .= preg_replace("/(\r\n|\r)/", "\n", $message);
# -=-=-=- SEND MAIL
$mail_sent = @mail( $to, $subject, $message, $headers );
//echo $mail_sent ? "Mail sent" : "Mail failed";
if($mail_sent)
{
echo "&radic; Hi<strong>".'&nbsp;'.$HTTP_POST_VARS['nname'].'&nbsp;'."</strong> your message has been sent<BR><button onclick='history.go(-1);'>Back </button>

  ";
}
else
{
echo "Opps your message has been not sent";
}
?>

Thursday 6 June 2013

HOW TO BE SECURE IN CYBER WORLD

Protect Yourself from Vulnerable Threats

-->
If we are driving a car we should know and strictly follow  the traffic rules of that driving environment. Likewise i would like to recommend you that, understand the cyber laws before start surfing the internet, you can use the search term "cyber law" in Google will give you the fine results about it. 
Cyber world is a complex network consists of fine and nasty things,  its our choice to go with good or bad. If we are going with fine and good things we have better opportunity to develop ourselves by using internet. While you are surfing internet you think nobody is seeing the actions you are doing in internet, yes in your room may be you are the only person there and nobody is surrounded there for  watching you, but when you connected to internet there a lot of eyes watching your movements (not watching every time, but they can watch). If you are a continues user in internet keep in mind that the ISP can get all the details of website we are surfing and ISP can identify who we are,  but ISP will not point the movements of a particular user you or me, with out any legal issues. These all facilities are not forbidding our freedom to surf webpages, but in common sense, we can say internet is not for cheating, and threatening others, but for research, trade, education and establishing good relation ships among the outside world.  Otherwise doing nasty things like hacking , sending malicious codes, unauthorized access of data, posting contents supporting terrorism and pornography, IPR(intellectual property infringement) violations, Credit card Fraud and more will treat as a serious offense.

"My computer is attacked by virus". It is a statement some what related to "My House is attacked by robbers" . Think , if our home is attacked by thieves, it is because of our irresponsibility to certain extent.  Like wise, if our computer is attacked by viruses it is due to the negligence of its administrator to a certain level. Following are the steps we consider to protect our system from malicious threats.
  1. Use only the licensed version of application software, if we are using licensed version of software, the particular software vendor have the responsibility to protect our system from threats happening from their application.
  2. Use a good antivirus software. (updating anti virus is a good idea, but in certain cases some updates may break data libraries of our operating system will leads to software crash.
  3. Next we need to consider an important thing that is ,use only a good search engine to find our needs, some of the websites available in search engines have dangerous malicious codes not only attack and harm our computer , but also capture our authorization details stored in our computer, frankly speaking the username and password of our email accounts, ftp accounts, even bank accounts also. Be safe, In my point of view using a well known search engine as our search provider will reduce the weight of issue,  because they provide a facility of warning message for the websites having malicious codes that hacks our system, we can see a warning message in search result some thing like "This site may harm your computer" or something like that,  clicking on that link may affect viruses on our system and the accurate solution to resolve  from that dangerous risk is replacing the operating system(formatting) and scan other hard drives  with a good anti virus software. 
  4. Another agent for transferring virus between computers are pen drives (flash drives), Flash drive is not a subject related to cyber world or internet, but for the information of readers iam explaining it.  Viruses from pen drives doesn't  catch directly, but when we connect pen drive in our system, if auto play option in our operating system is turned on, it might be a higher risk that the system must be attacked by viruses, because if connected pen drive have viruses it will create a auto play text file in pen drive will run the viruses instantly when we connect the flash drive in our system. We can turn off auto play option of our system by
    Start -> programs -> Accessories -> command prompt  and type
    gpedit.msc will display a small window, Select Administrative Templates ->system -> turnoff auto play -> enabled ->Turnoff Auto play on -> All drives -> click apply -> ok. It will turn off the auto play option of pen drive but risk for affecting viruses are still there. Scanning the USB drive using a good anti-virus application will kill the infected files and it is secure to open.     



  Protect our Email From unauthorized access


Here in this subject we don't want to do anything additionally, because email providers are providing their own security levels, but we must consider certain factors, 

First thing we must consider is before entering the user name and password in the input box, check the URL you entered is correct or not in address bar( address bar is the area where you put the domain name, on top of browser), hackers may do phishing by designing a same webpage like our email service provider and host it in different domain name, sometimes some people may put their user name and password their and clicking submit button will receive our username and password to the hacker.    

Another issue is hackers can access our email by using cookies stored in our computer, as these cookie will stole from the victims computer(cache memory of browser) and access email accounts through that cookies, once we login to our email, we started a new session, the part of that session is stored in the cache memory of our browser, hijacking or stealing that session from our browser and accessing our email accounts is some what related to session hijacking. To protect our email from session hijacking, the user must logout or signout their email account after the use, signout and logout option closes the session we opened. 

 It is an important step but some times we forget to LOGOUT or SIGNOUT our email account, instead of doing logout or signout,  we may click the close button in browser, it is one of the worst idea and it  will not close your session opened for accessing the mail,   and your email can be accessed by next user of same computer by typing the same domain, some times it will automatically redirect to previous visited email account.

Additionally beware of fraud mails, which is commonly received in the SPAM box , in my point of view opening and reading spam messages will not cause any problem, but accessing or clicking links available there and downloading attachments will affect malicious threats to your computer and clicking links available on spam messages will catch passwords directly or indirectly

Another thing we need to consider is we must change the password of our email account at least once in a month , because  there are lot of applications available for generation passwords through mixed characters.

Moreover it would be nice if we clear the cache memory of our browser once in a week,  but clearing cache memory in daily will increases the bandwidth usage of our internet service data pack, because browser caching is the process of storing some part of a website we visiting , while we again  visit the same website the browser will not reload the website fully, it will load the partial content only from the remote server because some part of website is already cached in our browser while we visited the same website before, that how caching produces the results faster and reduces the bandwidth usage of Internet data pack.



Monday 20 May 2013

BEGINNERS WEBSITE DESIGN

Web Design Tutorial for Beginners | Learn Website Designing

 

All adults are become in such manner from the stage of Kid, likewise all expert computer programmers are become in such manner from a beginner.


First of all I would like to appreciate you, for take a time to look into by Website Designing Tutorial. I am writing this blog from my few years of experience in cyber world especially in the field of website designing. If you are a beginner in web development, you will be the next expert/web programmer. All experts programmers are come from the situation where your are now, but he/she is become an expert now, because they are submitted thyself for their dreams. We should have a aim before start anything, that aim brings us into higher positions, That why we say "AIM AT STARS THEN WE CAN REACH AT THE TOP OF A TREE". But i recommend you that, If you Aim at stars and believe in God, God will take you into higher positions, Then you will reach not in the top of a tree you will reach at the point where you are expected, over the stars. We will become and expert through experience. We say he is an expert Pilot, means he have years of experience in flying flights, So if you want to be an expert in website designing/web programming, you need to spend your time for that also. in one words when you interact with it, you will get more experience, then you will become more expert.

Before all you need to understand who are you ?


Now no shrub had yet appeared on the earth and no plant had yet sprung up, for the Lord God had not sent rain on the earth and there was no one to work the ground, but streams came up from the earth and watered the whole surface of the ground. Then the Lord God formed a man from the dust of the ground and breathed into his nostrils the breath of life, and the man became a living being.(Genesis 2:5).

Did you understand the life in you was the GIFT OF GOD and you are the creature of God ?. If you are the creature of God, you are person having great abilities, don't think what others say about you good or bad, but God have a good plan about you, that you are. We have great abilities but, it should be known only , when we start to believe in the our Heavenly father Jesus Christ.

How to begin? Where to start ?


First of all we need to pray before starting our every work. Then God will give the wisdom to do the things more successfully, moreover we will get the opportunity to study the new things when we do something. God will make our losses are our success and success as our victory.

Now its the time to go and look into our real subject how become a good web designer. First we need a tool or application to develop our website, There are lot of applications available in market, but i would like to recommend Macromedia Dreamweaver for beginners, it provides a lot facilities to study new things in web design.Dream weaver provides some additional theme support which help the beginners to build website easily an can understand the things more frequently.

First we need understand what is a web page and it consists of what/ in which logic it is developed. A webpage is a HTML page, which is processed by server side scripting languages like PHP ASP.NET etc.. OR it is statically developed as same as in HTML. It is the part of an intermediate or expert programmer to look the server side scripting languages like PHP, ASP.net and more. So we can go through basic HTML page. According to my principle i am classifying an HTML pages as 3. Which is

Header - Header is defined using head tag called (opening tag) </head> (closing tag). Header consist of Title, Meta Data, External style sheet files, External JavaScript files and more. In header we includes the contents that should be loaded or cached first, when the web page loads. Suppose if we call a style sheet (css file) in footer, it loads only after loading all other contents of web page, In style sheet we define the structure and layout of website, then the webpage will fix the layout and alignment of content only after loading the whole webpage, it will provide a bad look on the website if the content is not loaded fully in slow internet connections.

Body - We define a body section of webpage by using body tag called (opening tag)</body> (closing tag). This the section where, real design and coding must adopted by a developer/designer. We can put the width of our body in either pixel or percentage., but i will recommend pixel, because it stays same in all screen resolutions. It is more complicated if we use percentage as width, because we can't assure that is there any overflow of layers occur in different screen resolutions. But i strongly insist one important thing that is, millions of users are now surfing internet through their handsets, you should keep a mobile version of your website also, that we will discuss later. The minimum width of a website (or body wrapper) is normally taken as 970px- 974px, which is the recommended standard. Taking beyond more or less than that is not at all a good idea,and in such circumstances we need to keep different designs for different screen resolutions, that subject will be understand when you are a intermediate.

Footer- There is nothing with footer in a webpage with defining tags like head or body, but if it is web page we must design a footer inside the body by giving some navigational links, contact details, and copyright notice.

Header of a webpage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Website Designing Tutorial | Learn Website Designing</title>
<meta name="description" content="A Good website designing tutorial to learn basic of web development"/>    
<meta name="keywords" content="Web designing Tutorials, Tutorials for Web development, Learn Website Designing"/>   
<meta name="keyphrases" content=""/>  <meta name="robots" content="index,follow"/>   
<meta name="copyright" content="youdomainname.ed"/>    
<meta name="document-distribution" content="Global"/>    
<meta name = "author" content="Your company Name"/> 
<link rel="SHORTCUT ICON" href="http://youdomainname.ed/iamges/favicon.ico" /> 
<link href="http://youdomainname.ed/css/mystyle.css"type="text/css" rel="stylesheet"/> 
<script type="text/javascript" src="http://youdomainname.ed/js/myjavascript.js"></script>  
</head>  


This is a header of a webpage. Which refers all major parts required in a website. For detailed explanations, please refer the following.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> 
Website Designing Tutorial | Learn Website Designing
</title>
Title is important on your webpage, it is displayed in search result with blue colored and with big font size.

<meta name="description" content="A Good website designing tutorial to learn basic of web development"/>
Meta Description Should be related to your Title, which is displayed as description text in search results.
<meta name="keywords" content="Web designing Tutorials, Tutorials for Web development, Learn Website Designing"/>
Meta Key words should also be related to your Title. and description, which merely defines in which keywords your site should appear.
<meta name="keyphrases" content=""/>
Meta Key phrases is not important in my point of view, it doesn't give any priority in my experience, if you want you can add it by combining Keywords, Description and Title.
<meta name="robots" content="index,follow"/> 
We have three options -
"index,follow" If you set index,follow the crawler of search engines will crawl and follow all the links in the current page and put it in search results.
"index,nofollow" The crawler will only look at this page and will NOT crawl or access the links or sub pages in this page.
"noindex, nofollow" The crawler will NOT crawl this page and will NOT crawl or access the links or sub pages in this page.

<meta name="copyright" content="youdomainname.ed"/>
You can put your the name of your domain in this part.
<meta name="document-distribution" content="Global"/>
There are three forms of distributions 1. Global - accessible to all (everyone) 2. Local - distribution of document 3. IU - for internal use not for public distribution

.
<meta name= "author" content="Your company Name"/>
You can put name of the author who written the meta content, your name/company name.
<link rel="SHORTCUT ICON" href="http://youdomainname.ed/iamges/favicon.ico" />
The above code refers an icon for your webpage, you can save your icon file using the extension .ICO
<link href="http://youdomainname.ed/css/mystyle.css"type="text/css" rel="stylesheet"/>
The above code refers calling a external cascade style sheet called "mystyle.css" you must give the correct location or path of your style sheet document correctly in domain name.
<script type="text/javascript" src="http://youdomainname.ed/js/myjavascript.js"></script>
The above code refers calling an external java script file myjavscript.js.
</head>
Body of a webpage

We define a body section of webpage by using body tag called <body>(opening tag)</body> (closing tag). This the section where, real design and coding must adopted by a developer/designer. First of all we must create layer wrapping all our contents, there is only wrapper layer in a webpage, so we can give it as ID instead of CLASS. following are the examples for giving id and class in a layer .

<div id="wrapper"></div> Giving ID for layer
<div class = "wrapper"></div> Giving Class for layer.
The important thing you should consider is you can use only one id wrapper one time in a webpage, but if you are defined it in class you can use class my-class  in different parts of webpage.

Following refers true 
For ID
<div id="wrapper1"></div>
<div id ="wrapper2"></div>

For class
<div class="my-class"></div>
<div class ="my-class"></div>

Following refers False
For ID
<div id="wrapper1"></div>
<div id ="wrapper1"></div>

Hope this will understand how to use id and class in a webpage, there is no limit for adding classes and ids in webpage, but you should keep the above rule in mind. Then we called the id "wrapper" and class "my-class' in our webpage. Then where the id wrapper is and class my-class in coded. For that we must create a cascade style sheet document  called (CSS) in webpage.

For creating a style sheet you can read the post CSS styling techniques.

First we need to create a folder in our hard drive for our webpage

Open the your E drive of your system and create a new folder by right clicking New ->folder and rename it as My site.

Open the dream weaver and click File -> New -> Basic page -> HTML. Again click File -> New -> Basic page -> CSS.

Click File -> Save Us -> mystyle as (File name) & Save as type as Style Sheets (CSS)

Now save your style sheet file in the folder we created "my site"

Now we need to go our webpage on tab Untitled-1.html then click View -> code.

Next step is we need to call our style sheet file on our webpage by using following code in our header in between <head></head> (if any doubt look above coding of header). 
<link href="mystyle.css"type="text/css rel="stylesheet"/>

Up to this we are created a style sheet and a webpage (HTML page) and we called the style sheet on our webpage by using above command

Next we create a root layer in between <body> </body> tags with an ID name wrapper.as HTML coding <div id="wrapper"> </div> Remember we only called the ID wrapper  in the layer(div), but the properties of id is not yet defined in style sheet, if its property is not defined in style sheet it displays nothing.

Then our next step is to define the properties of id wrapper in our style sheet.  As we studied already an id is created by using # as #wrapper. Our id wrapper is the root  id support all sub layers. We can create an id as follows. (CSS coding). along with the wrapper we are creating a layer #header for our site with its content is in h1 tag.


CSS Coding for Wrapper, Header and H1



#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#wrapper { width:970px; overflow:auto; border:1px solid #EAEAEA; margin:0px auto; background-color:#FFFFFF }

#header { border-bottom:1px solid #EAEAEA;; }

h1 { font-family: Arial, Helvetica, sans-serif; font-size:21px; padding-left:18px; color:orange; }



We created the properties of our id wrapper, header and h1 as above in our mystyle.css file.
Now we want to create the root layer called wrapper in HTML page as follows.Additonally we want a header in our web page. we need to create a sub layer for header inside the wrapper layer as follows(#header). Header of our website should be defined in h1(heading 1 tags), it gives more priority in search result for the keyword we added in between <h1> </h1> in our tutorial the word "My site".

HTML Coding for Wrapper, Header and H1




following is the structure of the wrapper and header of webpage, #wrapper refers the black border, #header refers the pink border

<div id="wrapper">
<div id="header"><h1>My Site</h1></div> <!-- closing header --->
</div> <!-- closing wrapper --->


Now its time to create the parent layer for our menu and description of website called #container as follows.



#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#description {float:left;width:620px; min-height:400px;font-family:Arial, Helvetica, sans-serif;font-size:12px; color:#555555; line-height:20px;padding:20px; text-align:justify;}

h2{font-family:Arial, Helvetica, sans-serif;color: #737373;font-size:18px; border-bottom: 1px solid red;padding-bottom:8px;}



HTML Coding for Container, menu, description and heading 2



following is the structure of our webpage when #container refers the red border , #menu refers the green border and #decrption refers the blue border.


<div id="container">

<div id="menu"></div> <!-- closing menu --->

<div id="description">

<h2> My Website </h2>

Header is defined using head tag called <head>(opening tag) </head>(closing tag). Header consist of Title, Meta Data, External style sheet files, External JavaScript files and more. In header we includes the contents that should be loaded or cached first, when the web page loads. Suppose if we call a style sheet (css file) in footer, it loads only after loading all other contents of web page, In style sheet we define the structure and layout of website, then the webpage will fix the layout and alignment of content only after loading the whole webpage, it will provide a bad look on the website if the content is not loaded fully in slow internet connections.

Body - We define a body section of webpage by using body tag called <body>(opening tag)< (closing tag). This the section where, real design and coding must adopted by a developer/designer. We can put the width of our body in either pixel or percentage., but i will recommend pixel, because it stays same in all screen resolutions. It is more complicated if we use percentage as width, because we can't assure that is there any overflow of layers occur in different screen resolutions. But i strongly insist one important thing that is, millions of users are now surfing internet through their handsets, you should keep a mobile version of your website also, that we will discuss later. The minimum width of a website (or body wrapper) is normally taken as 970px- 974px, which is the recommended standard. Taking beyond more or less than that is not at all a good idea,and in such circumstances we need to keep different designs for different screen resolutions, that subject will be understand when you are a intermediate.

</div> <!-- closing description --->

</div> <!-- closing container --->



Please note the above HTML code must put inside the layer wrapper(As wrapper is the root layer), which is put after the closing tag #header. For more information check the HTML coding of wrapper.


Footer of a webpage
Footer is created as the part of body and there is not tag defintions for footer.as head and body have. Designing a Footer provides the facility to add contact details, important links, Copyright information and more about the website under every page.




CSS Coding for Footer





#footer{border-top :1px solid #EAEAEA;; min-height:50px; background-color:#F2F2F2; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:10px; padding-top:10px;}


HTML Coding for Footer




following is the structure of the footer of webpage, #footer refers the yellow border



<div id="footer"> &copy All Rights reserved by My First Webpage <BR /><BR /> Home | About Me | Contact Me</div>
Our final output for HTML and CSS, while we integrate this whole coding, we get the following output . Additionally we applied a background-color for our body of webpage in bold


Final Coding of Stylesheet(CSS)mystyle.css



body{background-color:#0A5989;}
#wrapper { width:970px; overflow:auto; border:1px solid #EAEAEA; margin:0px auto; background-color:#FFFFFF }

#header { border-bottom:1px solid #EAEAEA; }

h1 { font-family: Arial, Helvetica, sans-serif; font-size:21px; padding-left:18px; color:orange; }

#container { clear:both; overflow:auto;}

#menu {float:left;width:300px; border-right: 1px solid #D2D2D2;background:#F4F4F4;min-height:400px;}

#description {float:left;width:620px; min-height:400px;font-family:Arial, Helvetica, sans-serif;font-size:12px; color:#555555; line-height:20px;padding:20px; text-align:justify;}

#footer{border-top :1px solid #EAEAEA;; min-height:50px; background-color:#F2F2F2; font-family:Arial, Helvetica, sans-serif; font-size:11px; padding-left:10px; padding-top:10px;}



Final Coding of our HTML page



<div id="wrapper">
<div id="header"><h1>My Site</h1></div> <!-- closing header --->
<div id="container">

<div id="menu"></div> <!-- closing menu --->


<div id="description">

<h2> My Website </h2>

Header is defined using head tag called <head>(opening tag) </head>(closing tag). Header consist of Title, Meta Data, External style sheet files, External JavaScript files and more. In header we includes the contents that should be loaded or cached first, when the web page loads. Suppose if we call a style sheet (css file) in footer, it loads only after loading all other contents of web page, In style sheet we define the structure and layout of website, then the webpage will fix the layout and alignment of content only after loading the whole webpage, it will provide a bad look on the website if the content is not loaded fully in slow internet connections.

Body - We define a body section of webpage by using body tag called <body>(opening tag)< (closing tag). This the section where, real design and coding must adopted by a developer/designer. We can put the width of our body in either pixel or percentage., but i will recommend pixel, because it stays same in all screen resolutions. It is more complicated if we use percentage as width, because we can't assure that is there any overflow of layers occur in different screen resolutions. But i strongly insist one important thing that is, millions of users are now surfing internet through their handsets, you should keep a mobile version of your website also, that we will discuss later. The minimum width of a website (or body wrapper) is normally taken as 970px- 974px, which is the recommended standard. Taking beyond more or less than that is not at all a good idea,and in such circumstances we need to keep different designs for different screen resolutions, that subject will be understand when you are a intermediate.

</div> <!-- closing description --->

</div> <!-- closing container --->


<div id="footer"> &copy All Rights reserved by My First Webpage <BR /><BR /> Home | About Me | Contact Me</div><!-- closing footer --->


</div> <!-- closing wrapper --->




Save your webpage



  • After copying the above code to the body section of your webpage and save it as file name index.htm OR html
  • We save the landing page or Home page of our webpage as index.html because when we type a URL www.yourwebsite.ed it automatically redirects to the index.htm file as first page.
  • Next step is to copy the Final Coding of Stylesheet(CSS)mystyle.css on your file mystyle.css and save it as mystyle.css.
  • Back to your webpage(index.html) on dreamweaver and press F12 button on your keyboard to see the preview of your webpage. 



Screen Shot of our webpage