{"id":590,"date":"2014-08-08T13:34:38","date_gmt":"2014-08-08T13:34:38","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=590"},"modified":"2014-08-08T13:34:38","modified_gmt":"2014-08-08T13:34:38","slug":"ajax-php-login-with-jquery-shake-effect","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/ajax-php-login-with-jquery-shake-effect\/","title":{"rendered":"Ajax PHP Login with jQuery Shake effect"},"content":{"rendered":"<p>It\u2019s very simple and basic tutorial for beginners.<\/p>\n<h3>Create User Table<\/h3>\n<div id=\"crayon-53e4d0ebeac1b748319082\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; opacity: 0; z-index: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">CREATE TABLE `users` (<br \/>\n`uid` INT(11) NOT NULL AUTO_INCREMENT ,<br \/>\n`username` VARCHAR(45) ,<br \/>\n`password` VARCHAR(100) ,<br \/>\n`email` VARCHAR(45) ,<br \/>\nPRIMARY KEY (`uid`));<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac1b748319082-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac1b748319082-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac1b748319082-3\">3<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac1b748319082-4\">4<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac1b748319082-5\">5<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac1b748319082-6\">6<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac1b748319082-1\" class=\"crayon-line\"><span class=\"crayon-st\">CREATE<\/span><span class=\"crayon-st\">TABLE<\/span>`users`(<\/div>\n<div id=\"crayon-53e4d0ebeac1b748319082-2\" class=\"crayon-line crayon-striped-line\">`uid`<span class=\"crayon-t\">INT<\/span>(11)<span class=\"crayon-st\">NOT NULL<\/span><span class=\"crayon-st\">AUTO_INCREMENT<\/span>,<\/div>\n<div id=\"crayon-53e4d0ebeac1b748319082-3\" class=\"crayon-line\">`username`<span class=\"crayon-t\">VARCHAR<\/span>(45),<\/div>\n<div id=\"crayon-53e4d0ebeac1b748319082-4\" class=\"crayon-line crayon-striped-line\">`<span class=\"crayon-st\">password<\/span>`<span class=\"crayon-t\">VARCHAR<\/span>(100),<\/div>\n<div id=\"crayon-53e4d0ebeac1b748319082-5\" class=\"crayon-line\">`email`<span class=\"crayon-t\">VARCHAR<\/span>(45),<\/div>\n<div id=\"crayon-53e4d0ebeac1b748319082-6\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-st\">PRIMARY KEY<\/span>(`uid`));<\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>To store user login records.<\/p>\n<h3>Required jQuery files\u00a0for Login Page<\/h3>\n<div id=\"crayon-53e4d0ebeac25970285620\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; opacity: 0; z-index: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">&lt;link rel=&#8221;stylesheet&#8221; href=&#8221;\/\/code.jquery.com\/ui\/1.11.0\/themes\/smoothness\/jquery-ui.css&#8221;&gt;<br \/>\n&lt;script src=&#8221;\/\/code.jquery.com\/jquery-1.10.2.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;script src=&#8221;\/\/code.jquery.com\/ui\/1.11.0\/jquery-ui.js&#8221;&gt;&lt;\/script&gt;<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac25970285620-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac25970285620-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac25970285620-3\">3<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac25970285620-1\" class=\"crayon-line\"><span class=\"crayon-r \">&lt;link <\/span><span class=\"crayon-e \">rel<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">&#8220;stylesheet&#8221;<\/span><span class=\"crayon-e \">href<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s \">&#8220;\/\/code.jquery.com\/ui\/1.11.0\/themes\/smoothness\/jquery-ui.css&#8221;<\/span><span class=\"crayon-r \">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac25970285620-2\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-ta\">&lt;script <\/span><span class=\"crayon-e \">src<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;\/\/code.jquery.com\/jquery-1.10.2.js&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-ta\">&lt;\/script&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac25970285620-3\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;script <\/span><span class=\"crayon-e \">src<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;\/\/code.jquery.com\/ui\/1.11.0\/jquery-ui.js&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-ta\">&lt;\/script&gt;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>We need 3 files for login page. jQuery, jQuery ui and jQuery ui CSS file. We need jQuery ui files for shake effects.<\/p>\n<h3>jQuery\u00a0Code for Login Page<\/h3>\n<div id=\"crayon-53e4d0ebeac2a194134760\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; opacity: 0; z-index: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">&lt;script&gt;<br \/>\n$(document).ready(function()<br \/>\n {<\/p>\n<p>\t$(&#8216;#btnLogin&#8217;).click(function(){<br \/>\n\t\tvar username=$(&#8220;#username&#8221;).val();<br \/>\n\t\tvar password=$(&#8220;#password&#8221;).val();<br \/>\n\t\tvar dataString = &#8216;username=&#8217;+username+&#8217;&amp;password=&#8217;+password;<br \/>\n\t\tif($.trim(username).length&gt;0 &amp;&amp;<br \/>\n$.trim(password).length&gt;0)<br \/>\n\t\t{<br \/>\n\t\t\t$.ajax({<br \/>\n\t\t\ttype: &#8220;POST&#8221;,<br \/>\n\t\t\turl: &#8220;ajax_login.php&#8221;,<br \/>\n\t\t\tdata: dataString,<br \/>\n\t\t\tcache: false,<br \/>\n\t\t\tsuccess: function(response){<br \/>\n\t\t\t\tif(response)<br \/>\n\t\t\t\t{<br \/>\n\t\t\t\t\t$(&#8220;body&#8221;).load(&#8220;welcome.php&#8221;).hide().fadeIn(1500).delay(6000);<br \/>\n\t\t\t\t\twindow.location.href = &#8220;welcome.php&#8221;;<br \/>\n\t\t\t\t}<br \/>\n\t\t\t\telse<br \/>\n\t\t\t\t{<br \/>\n\t\t\t\t\t$( &#8220;#login-box&#8221; ).effect( &#8220;shake&#8221; ); \/\/Shake Effect<br \/>\n\t\t\t\t\t$(&#8220;#login-error&#8221;).html(&#8220;&lt;span<br \/>\nstyle=&#8217;color:#cc0000&#8217;&gt;&lt;strong&gt;Error:&lt;\/strong&gt;&lt;\/span&gt;<br \/>\n Invalid Username\/Password. &#8220;);<br \/>\n\t\t\t\t}<br \/>\n\t\t\t}<br \/>\n\t\t\t});<\/p>\n<p>\t\t}<br \/>\n\t\treturn false;<br \/>\n\t});<\/p>\n<p>});<br \/>\n&lt;\/script&gt;<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-3\">3<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-4\">4<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-5\">5<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-6\">6<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-7\">7<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-8\">8<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-9\">9<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-10\">10<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-11\">11<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-12\">12<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-13\">13<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-14\">14<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-15\">15<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-16\">16<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-17\">17<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-18\">18<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-19\">19<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-20\">20<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-21\">21<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-22\">22<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-23\">23<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-24\">24<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-25\">25<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-26\">26<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-27\">27<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-28\">28<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-29\">29<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-30\">30<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-31\">31<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-32\">32<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2a194134760-33\">33<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2a194134760-34\">34<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac2a194134760-1\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;script&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-2\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-r\">document<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">ready<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-t\">function<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-3\" class=\"crayon-line\"><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-4\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8216;#btnLogin&#8217;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">click<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-t\">function<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-5\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-t\">var<\/span><span class=\"crayon-v\">username<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;#username&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">val<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-6\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-t\">var<\/span><span class=\"crayon-v\">password<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;#password&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">val<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-7\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-t\">var<\/span><span class=\"crayon-e \">dataString<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8216;username=&#8217;<\/span><span class=\"crayon-o\">+<\/span><span class=\"crayon-v\">username<\/span><span class=\"crayon-o\">+<\/span><span class=\"crayon-s\">&#8216;&amp;password=&#8217;<\/span><span class=\"crayon-o\">+<\/span><span class=\"crayon-v\">password<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-8\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">trim<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">username<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">length<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-cn\">0<\/span><span class=\"crayon-o\">&amp;&amp;<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">trim<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">password<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">length<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-cn\">0<\/span><span class=\"crayon-sy\">)<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-9\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-10\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">ajax<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-11\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">type<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-s\">&#8220;POST&#8221;<\/span><span class=\"crayon-sy\">,<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-12\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">url<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-s\">&#8220;ajax_login.php&#8221;<\/span><span class=\"crayon-sy\">,<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-13\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">data<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-v\">dataString<\/span><span class=\"crayon-sy\">,<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-14\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">cache<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-t\">false<\/span><span class=\"crayon-sy\">,<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-15\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">success<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-t\">function<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">response<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-16\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">response<\/span><span class=\"crayon-sy\">)<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-17\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-18\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;body&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">load<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;welcome.php&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">hide<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">fadeIn<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-cn\">1500<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">delay<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-cn\">6000<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-19\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">window<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">location<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e \">href<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;welcome.php&#8221;<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-20\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-21\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">else<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-22\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-23\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;#login-box&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">effect<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;shake&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><span class=\"crayon-c\">\/\/Shake Effect<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-24\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;#login-error&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">html<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;&lt;span style=&#8217;color:#cc0000&#8242;&gt;&lt;strong&gt;Error:&lt;\/strong&gt;&lt;\/span&gt; Invalid Username\/Password. &#8220;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-25\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-26\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-27\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-28\" class=\"crayon-line crayon-striped-line\"><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-29\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-30\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">return<\/span><span class=\"crayon-t\">false<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-31\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-32\" class=\"crayon-line crayon-striped-line\"><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-33\" class=\"crayon-line\"><span class=\"crayon-sy\">}<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2a194134760-34\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-ta\">&lt;\/script&gt;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>We used $.ajax method of jQuery to check login information on Login button click event. If $.ajax receives any success response, It will redirect to welcome.php page, and in case of invalid username\/password it shakes the login box and displays an\u00a0error.<\/p>\n<h3>Login form on Login Page<\/h3>\n<div id=\"crayon-53e4d0ebeac2e552963412\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; opacity: 0; z-index: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">&lt;div id=&#8221;login-box&#8221;&gt;<br \/>\n\t\t&lt;form action=&#8221;&#8221; method=&#8221;post&#8221;&gt;<br \/>\n\t\t\tUsername<br \/>\n\t\t\t&lt;input type=&#8221;text&#8221; class=&#8221;input&#8221;  id=&#8221;username&#8221;\/&gt;<br \/>\n\t\t\tPassword<br \/>\n\t\t\t&lt;input type=&#8221;password&#8221; class=&#8221;input&#8221;  id=&#8221;password&#8221;\/&gt;<br \/>\n\t\t\t&lt;input type=&#8221;button&#8221; class=&#8221;button button-primary&#8221; value=&#8221;Log In&#8221; id=&#8221;btnLogin&#8221;\/&gt;<br \/>\n\t\t\t&lt;div id=&#8221;login-error&#8221;&gt;&lt;\/div&gt;<br \/>\n\t\t&lt;\/form&gt;<br \/>\n\t&lt;\/div&gt;<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2e552963412-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2e552963412-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2e552963412-3\">3<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2e552963412-4\">4<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2e552963412-5\">5<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2e552963412-6\">6<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2e552963412-7\">7<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2e552963412-8\">8<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac2e552963412-9\">9<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac2e552963412-10\">10<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac2e552963412-1\" class=\"crayon-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">div <\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;login-box&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-2\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">form <\/span><span class=\"crayon-v\">action<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;&#8221;<\/span><span class=\"crayon-v\">method<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;post&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-3\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">Username<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-4\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">input <\/span><span class=\"crayon-v\">type<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;text&#8221;<\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;input&#8221;<\/span><span class=\"crayon-h\">\u00a0\u00a0<\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;username&#8221;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-5\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">Password<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-6\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">input <\/span><span class=\"crayon-v\">type<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;password&#8221;<\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;input&#8221;<\/span><span class=\"crayon-h\">\u00a0\u00a0<\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;password&#8221;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-7\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">input <\/span><span class=\"crayon-v\">type<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;button&#8221;<\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;button button-primary&#8221;<\/span><span class=\"crayon-v\">value<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;Log In&#8221;<\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;btnLogin&#8221;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-8\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">div <\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;login-error&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-9\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">form<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac2e552963412-10\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>It\u2019s the basic login form.<\/p>\n<h3>Complete Login Page<\/h3>\n<p>create <strong>login.php<\/strong> page and paste the following code<\/p>\n<div id=\"crayon-53e4d0ebeac33004484481\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; opacity: 0; z-index: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">&lt;?php<br \/>\nsession_start();<br \/>\nif(!empty($_SESSION[&#8216;login_userid&#8217;]))<br \/>\n{<br \/>\nheader(&#8216;Location:<br \/>\n welcome.php&#8217;);<br \/>\n}<br \/>\n?&gt;<br \/>\n&lt;!doctype html&gt;<br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;meta charset=&#8221;utf-8&#8243;&gt;<br \/>\n&lt;title&gt;Ajax PHP Login with jQuery Shake Effect by<br \/>\nsharp-coders.com&lt;\/title&gt;<br \/>\n&lt;link rel=&#8221;stylesheet&#8221;<br \/>\nhref=&#8221;\/\/code.jquery.com\/ui\/1.11.0\/themes\/smoothness\/jquery-ui.css&#8221;&gt;<br \/>\n&lt;script src=&#8221;\/\/code.jquery.com\/jquery-1.10.2.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;script<br \/>\nsrc=&#8221;\/\/code.jquery.com\/ui\/1.11.0\/jquery-ui.js&#8221;&gt;&lt;\/script&gt;<br \/>\n&lt;script&gt;<br \/>\n$(document).ready(function() {<\/p>\n<p>\t$(&#8216;#btnLogin&#8217;).click(function(){<br \/>\n\t\tvar username=$(&#8220;#username&#8221;).val();<br \/>\n\t\tvar password=$(&#8220;#password&#8221;).val();<br \/>\n\t\tvar dataString = &#8216;username=&#8217;+username+&#8217;&amp;password=&#8217;+password;<br \/>\n\t\tif($.trim(username).length&gt;0 &amp;&amp;<br \/>\n$.trim(password).length&gt;0)<br \/>\n\t\t{<br \/>\n\t\t\t$.ajax({<br \/>\n\t\t\ttype: &#8220;POST&#8221;,<br \/>\n\t\t\turl: &#8220;ajax_login.php&#8221;,<br \/>\n\t\t\tdata: dataString,<br \/>\n\t\t\tcache: false,<br \/>\n\t\t\tsuccess: function(response){<br \/>\n\t\t\t\tif(response)<br \/>\n\t\t\t\t{<br \/>\n\t\t\t\t\t$(&#8220;body&#8221;).load(&#8220;welcome.php&#8221;).hide().fadeIn(1500).delay(6000);<br \/>\n\t\t\t\t\twindow.location.href = &#8220;welcome.php&#8221;;<br \/>\n\t\t\t\t}<br \/>\n\t\t\t\telse<br \/>\n\t\t\t\t{<br \/>\n\t\t\t\t\t$( &#8220;#login-box&#8221; ).effect( &#8220;shake&#8221; ); \/\/Shake Effect<br \/>\n\t\t\t\t\t$(&#8220;#login-error&#8221;).html(&#8220;&lt;span<br \/>\nstyle=&#8217;color:#cc0000&#8217;&gt;&lt;strong&gt;Error:&lt;\/strong&gt;&lt;\/span&gt;<br \/>\n Invalid Username\/Password. &#8220;);<br \/>\n\t\t\t\t}<br \/>\n\t\t\t}<br \/>\n\t\t\t});<\/p>\n<p>\t\t}<br \/>\n\t\treturn false;<br \/>\n\t});<\/p>\n<p>});<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<\/p>\n<p>&lt;body&gt;<\/p>\n<p>&lt;div class=&#8221;container&#8221;&gt;<br \/>\n  &lt;div class=&#8221;content&#8221;&gt;<br \/>\n    &lt;h3&gt;Ajax PHP Login with jQuery Shake Effect by &lt;a<br \/>\nhref=&#8221;http:\/\/sharp-coders.com&#8221; target=&#8221;_blank&#8221;&gt;<br \/>\n\t\thttp:\/\/sharp-coders.com<br \/>\n\t&lt;\/a&gt;&lt;\/h3&gt;<br \/>\n    &lt;div id=&#8221;login-box&#8221;&gt;<br \/>\n\t\t&lt;form action=&#8221;&#8221; method=&#8221;post&#8221;&gt;<br \/>\n\t\t\tUsername<br \/>\n\t\t\t&lt;input type=&#8221;text&#8221; class=&#8221;input&#8221;  id=&#8221;username&#8221;\/&gt;<br \/>\n\t\t\tPassword<br \/>\n\t\t\t&lt;input type=&#8221;password&#8221; class=&#8221;input&#8221;  id=&#8221;password&#8221;\/&gt;<br \/>\n\t\t\t&lt;input type=&#8221;button&#8221; class=&#8221;button button-primary&#8221; value=&#8221;Log In&#8221;<br \/>\nid=&#8221;btnLogin&#8221;\/&gt;<br \/>\n\t\t\t&lt;div id=&#8221;login-error&#8221;&gt;&lt;\/div&gt;<br \/>\n\t\t&lt;\/form&gt;<br \/>\n\t&lt;\/div&gt;<br \/>\n&lt;\/div&gt;<br \/>\n&lt;\/div&gt;&lt;!&#8211; end .content &#8211;&gt;<br \/>\n  &lt;\/div&gt;&lt;!&#8211; end .container &#8211;&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-3\">3<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-4\">4<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-5\">5<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-6\">6<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-7\">7<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-8\">8<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-9\">9<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-10\">10<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-11\">11<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-12\">12<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-13\">13<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-14\">14<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-15\">15<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-16\">16<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-17\">17<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-18\">18<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-19\">19<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-20\">20<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-21\">21<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-22\">22<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-23\">23<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-24\">24<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-25\">25<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-26\">26<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-27\">27<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-28\">28<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-29\">29<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-30\">30<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-31\">31<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-32\">32<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-33\">33<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-34\">34<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-35\">35<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-36\">36<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-37\">37<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-38\">38<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-39\">39<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-40\">40<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-41\">41<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-42\">42<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-43\">43<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-44\">44<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-45\">45<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-46\">46<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-47\">47<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-48\">48<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-49\">49<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-50\">50<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-51\">51<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-52\">52<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-53\">53<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-54\">54<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-55\">55<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-56\">56<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-57\">57<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-58\">58<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-59\">59<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-60\">60<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-61\">61<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-62\">62<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-63\">63<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-64\">64<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-65\">65<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-66\">66<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-67\">67<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-68\">68<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-69\">69<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-70\">70<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-71\">71<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac33004484481-72\">72<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac33004484481-73\">73<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac33004484481-1\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;?php<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-2\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-e\">session_start<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-3\" class=\"crayon-line\"><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-o\">!<\/span><span class=\"crayon-k \">empty<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$_SESSION<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;login_userid&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">)<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-4\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-5\" class=\"crayon-line\"><span class=\"crayon-e\">header<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8216;Location: welcome.php&#8217;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-6\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-7\" class=\"crayon-line\"><span class=\"crayon-ta\">?&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-8\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">!<\/span><span class=\"crayon-e\">doctype <\/span><span class=\"crayon-v\">html<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-9\" class=\"crayon-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-v\">html<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-10\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-v\">head<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-11\" class=\"crayon-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">meta <\/span><span class=\"crayon-v\">charset<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;utf-8&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-12\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-v\">title<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-e\">Ajax <\/span><span class=\"crayon-e\">PHP <\/span><span class=\"crayon-e\">Login <\/span><span class=\"crayon-e\">with <\/span><span class=\"crayon-e\">jQuery <\/span><span class=\"crayon-e\">Shake <\/span><span class=\"crayon-e\">Effect <\/span><span class=\"crayon-e\">by <\/span><span class=\"crayon-v\">sharp<\/span><span class=\"crayon-o\">&#8211;<\/span><span class=\"crayon-v\">coders<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">com<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">title<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-13\" class=\"crayon-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">link <\/span><span class=\"crayon-v\">rel<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;stylesheet&#8221;<\/span><span class=\"crayon-v\">href<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;\/\/code.jquery.com\/ui\/1.11.0\/themes\/smoothness\/jquery-ui.css&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-14\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-ta\">&lt;script <\/span><span class=\"crayon-e \">src<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;\/\/code.jquery.com\/jquery-1.10.2.js&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-ta\">&lt;\/script&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-15\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;script <\/span><span class=\"crayon-e \">src<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;\/\/code.jquery.com\/ui\/1.11.0\/jquery-ui.js&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-ta\">&lt;\/script&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-16\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-ta\">&lt;script&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-17\" class=\"crayon-line\"><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-r\">document<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">ready<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-t\">function<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-18\" class=\"crayon-line crayon-striped-line\"><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-19\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8216;#btnLogin&#8217;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">click<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-t\">function<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-20\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-t\">var<\/span><span class=\"crayon-v\">username<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;#username&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">val<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-21\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-t\">var<\/span><span class=\"crayon-v\">password<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;#password&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">val<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-22\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-t\">var<\/span><span class=\"crayon-e \">dataString<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8216;username=&#8217;<\/span><span class=\"crayon-o\">+<\/span><span class=\"crayon-v\">username<\/span><span class=\"crayon-o\">+<\/span><span class=\"crayon-s\">&#8216;&amp;password=&#8217;<\/span><span class=\"crayon-o\">+<\/span><span class=\"crayon-v\">password<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-23\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">trim<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">username<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">length<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-cn\">0<\/span><span class=\"crayon-o\">&amp;&amp;<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">trim<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">password<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">length<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-cn\">0<\/span><span class=\"crayon-sy\">)<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-24\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-25\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">ajax<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-26\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">type<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-s\">&#8220;POST&#8221;<\/span><span class=\"crayon-sy\">,<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-27\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">url<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-s\">&#8220;ajax_login.php&#8221;<\/span><span class=\"crayon-sy\">,<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-28\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">data<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-v\">dataString<\/span><span class=\"crayon-sy\">,<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-29\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">cache<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-t\">false<\/span><span class=\"crayon-sy\">,<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-30\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">success<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-t\">function<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">response<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-31\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">response<\/span><span class=\"crayon-sy\">)<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-32\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-33\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;body&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">load<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;welcome.php&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">hide<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">fadeIn<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-cn\">1500<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">delay<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-cn\">6000<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-34\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">window<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">location<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e \">href<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;welcome.php&#8221;<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-35\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-36\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">else<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-37\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-38\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;#login-box&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">effect<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;shake&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><span class=\"crayon-c\">\/\/Shake Effect<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-39\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">$<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;#login-error&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-e\">html<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;&lt;span style=&#8217;color:#cc0000&#8242;&gt;&lt;strong&gt;Error:&lt;\/strong&gt;&lt;\/span&gt; Invalid Username\/Password. &#8220;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-40\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-41\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-42\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-43\" class=\"crayon-line\"><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-44\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-45\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">return<\/span><span class=\"crayon-t\">false<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-46\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-47\" class=\"crayon-line\"><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-48\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-sy\">}<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-49\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;\/script&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-50\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">head<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-51\" class=\"crayon-line\"><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-52\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-v\">body<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-53\" class=\"crayon-line\"><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-54\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">div <\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;container&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-55\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">div <\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;content&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-56\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-v\">h3<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-e\">Ajax <\/span><span class=\"crayon-e\">PHP <\/span><span class=\"crayon-e\">Login <\/span><span class=\"crayon-e\">with <\/span><span class=\"crayon-e\">jQuery <\/span><span class=\"crayon-e\">Shake <\/span><span class=\"crayon-e\">Effect <\/span><span class=\"crayon-v\">by<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-i\">a<\/span><span class=\"crayon-v\">href<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;http:\/\/sharp-coders.com&#8221;<\/span><span class=\"crayon-v\">target<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;_blank&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-57\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">http<\/span><span class=\"crayon-o\">:<\/span><span class=\"crayon-c\">\/\/sharp-coders.com<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-58\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">a<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">h3<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-59\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">div <\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;login-box&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-60\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">form <\/span><span class=\"crayon-v\">action<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;&#8221;<\/span><span class=\"crayon-v\">method<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;post&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-61\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">Username<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-62\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">input <\/span><span class=\"crayon-v\">type<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;text&#8221;<\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;input&#8221;<\/span><span class=\"crayon-h\">\u00a0\u00a0<\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;username&#8221;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-63\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">Password<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-64\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">input <\/span><span class=\"crayon-v\">type<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;password&#8221;<\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;input&#8221;<\/span><span class=\"crayon-h\">\u00a0\u00a0<\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;password&#8221;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-65\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">input <\/span><span class=\"crayon-v\">type<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;button&#8221;<\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;button button-primary&#8221;<\/span><span class=\"crayon-v\">value<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;Log In&#8221;<\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;btnLogin&#8221;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-66\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">div <\/span><span class=\"crayon-v\">id<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;login-error&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-67\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">form<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-68\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-69\" class=\"crayon-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-70\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">!<\/span><span class=\"crayon-o\">&#8212;<\/span><span class=\"crayon-st\">end<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">content<\/span><span class=\"crayon-o\">&#8212;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-71\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">!<\/span><span class=\"crayon-o\">&#8212;<\/span><span class=\"crayon-st\">end<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">container<\/span><span class=\"crayon-o\">&#8212;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-72\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">body<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac33004484481-73\" class=\"crayon-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">html<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>Ajax Login Page<\/h3>\n<p>create <strong>ajax_login.php<\/strong> file and paste following code<\/p>\n<div id=\"crayon-53e4d0ebeac38642013996\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; opacity: 0; z-index: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">&lt;?php<br \/>\ninclude(&#8220;config.php&#8221;);<br \/>\nsession_start();<br \/>\nif(isset($_POST[&#8216;username&#8217;]) &amp;&amp; isset($_POST[&#8216;password&#8217;]))<br \/>\n{<br \/>\n\t\/\/ Username<br \/>\n\t$username=mysql_real_escape_string($_POST[&#8216;username&#8217;]);<br \/>\n\t\/\/Password<br \/>\n\t$password=md5($_POST[&#8216;password&#8217;]); <\/p>\n<p>\t$result=mysql_query(&#8220;SELECT * FROM users WHERE username='&#8221;.$username.&#8221;&#8216; and password='&#8221;.$password.&#8221;&#8216;&#8221;);<br \/>\n\tif($result){<br \/>\n\t\t$num_rows=mysql_num_rows($result);<br \/>\n\t\tif($num_rows == 1){<br \/>\n\t\t\t$row=mysql_fetch_array($result);<br \/>\n\t\t\t$_SESSION[&#8216;login_userid&#8217;]=$row[&#8216;uid&#8217;];<br \/>\n\t\t\techo $row[&#8220;uid&#8221;];<br \/>\n\t\t}<br \/>\n\t}<br \/>\n}<br \/>\n?&gt;<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-3\">3<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-4\">4<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-5\">5<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-6\">6<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-7\">7<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-8\">8<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-9\">9<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-10\">10<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-11\">11<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-12\">12<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-13\">13<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-14\">14<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-15\">15<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-16\">16<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-17\">17<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-18\">18<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-19\">19<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac38642013996-20\">20<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac38642013996-21\">21<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac38642013996-1\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;?php<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-2\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-k \">include<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;config.php&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-3\" class=\"crayon-line\"><span class=\"crayon-e\">session_start<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-4\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-k \">isset<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$_POST<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;username&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-o\">&amp;&amp;<\/span><span class=\"crayon-k \">isset<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$_POST<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;password&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">)<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-5\" class=\"crayon-line\"><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-6\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-c\">\/\/ Username<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-7\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">$username<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-e\">mysql_real_escape_string<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$_POST<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;username&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-8\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-c\">\/\/Password<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-9\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">$password<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-e\">md5<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$_POST<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;password&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-10\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-11\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">$result<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-e\">mysql_query<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;SELECT * FROM users WHERE username='&#8221;<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">$username<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-s\">&#8220;&#8216; and password='&#8221;<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">$password<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-s\">&#8220;&#8216;&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-12\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$result<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-13\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">$num_rows<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-e\">mysql_num_rows<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$result<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-14\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$num_rows<\/span><span class=\"crayon-o\">==<\/span><span class=\"crayon-cn\">1<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-15\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">$row<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-e\">mysql_fetch_array<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$result<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-16\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">$_SESSION<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;login_userid&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-v\">$row<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;uid&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-17\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-k \">echo<\/span><span class=\"crayon-v\">$row<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8220;uid&#8221;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-18\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-19\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-20\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac38642013996-21\" class=\"crayon-line\"><span class=\"crayon-ta\">?&gt;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>It receives the posted information via $.ajax method on login.php and validate it from database. If login informations is valid it creates a session for that user.<\/p>\n<h3>Welcome Home Page<\/h3>\n<p>create <strong>welcome.php<\/strong>\u00a0page and paste the following code<\/p>\n<div id=\"crayon-53e4d0ebeac3d931959513\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; opacity: 0; z-index: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">&lt;?php<br \/>\nsession_start();<br \/>\nif(empty($_SESSION[&#8216;login_userid&#8217;]))<br \/>\n{<br \/>\n\theader(&#8216;Location: login.php&#8217;);<br \/>\n}<br \/>\n?&gt;<br \/>\n&lt;div class=&#8221;container&#8221;&gt;<br \/>\n  &lt;div class=&#8221;content&#8221;&gt;<br \/>\n    &lt;h1&gt;Welcome to HomePage&lt;\/h1&gt;<br \/>\n    &lt;p&gt;&lt;a href=&#8221;logout.php&#8221;&gt;Logout&lt;\/a&gt;&lt;\/p&gt;<br \/>\n   &lt;\/div&gt;&lt;!&#8211; end .content &#8211;&gt;<br \/>\n &lt;\/div&gt;&lt;!&#8211; end .container &#8211;&gt;<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac3d931959513-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac3d931959513-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac3d931959513-3\">3<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac3d931959513-4\">4<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac3d931959513-5\">5<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac3d931959513-6\">6<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac3d931959513-7\">7<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac3d931959513-8\">8<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac3d931959513-9\">9<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac3d931959513-10\">10<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac3d931959513-11\">11<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac3d931959513-12\">12<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac3d931959513-13\">13<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac3d931959513-1\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;?php<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-2\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-e\">session_start<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-3\" class=\"crayon-line\"><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-k \">empty<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$_SESSION<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;login_userid&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">)<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-4\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-5\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-e\">header<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8216;Location: login.php&#8217;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-6\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-7\" class=\"crayon-line\"><span class=\"crayon-ta\">?&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-8\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">div <\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;container&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-9\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-e\">div <\/span><span class=\"crayon-t\">class<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;content&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-10\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-v\">h1<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-e\">Welcome <\/span><span class=\"crayon-st\">to<\/span><span class=\"crayon-v\">HomePage<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">h1<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-11\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-v\">p<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-i\">a<\/span><span class=\"crayon-v\">href<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8220;logout.php&#8221;<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-v\">Logout<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">a<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">p<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-12\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0 <\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">!<\/span><span class=\"crayon-o\">&#8212;<\/span><span class=\"crayon-st\">end<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">content<\/span><span class=\"crayon-o\">&#8212;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac3d931959513-13\" class=\"crayon-line\"><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">\/<\/span><span class=\"crayon-v\">div<\/span><span class=\"crayon-o\">&gt;<\/span><span class=\"crayon-o\">&lt;<\/span><span class=\"crayon-o\">!<\/span><span class=\"crayon-o\">&#8212;<\/span><span class=\"crayon-st\">end<\/span><span class=\"crayon-sy\">.<\/span><span class=\"crayon-v\">container<\/span><span class=\"crayon-o\">&#8212;<\/span><span class=\"crayon-o\">&gt;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h3>\u00a0Logout Page<\/h3>\n<p>create <strong>logout.php<\/strong>\u00a0page and paste<\/p>\n<div id=\"crayon-53e4d0ebeac41534394719\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; opacity: 0; z-index: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">&lt;?php<br \/>\nsession_start();<br \/>\nif(!empty($_SESSION[&#8216;login_userid&#8217;]))<br \/>\n{<br \/>\n\t$_SESSION[&#8216;login_userid&#8217;]=&#8221;;<br \/>\n\tsession_destroy();<br \/>\n}<br \/>\nheader(&#8220;Location:login.php&#8221;);<br \/>\n?&gt;<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac41534394719-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac41534394719-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac41534394719-3\">3<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac41534394719-4\">4<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac41534394719-5\">5<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac41534394719-6\">6<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac41534394719-7\">7<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac41534394719-8\">8<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac41534394719-9\">9<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac41534394719-1\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;?php<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac41534394719-2\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-e\">session_start<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac41534394719-3\" class=\"crayon-line\"><span class=\"crayon-st\">if<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-o\">!<\/span><span class=\"crayon-k \">empty<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-v\">$_SESSION<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;login_userid&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">)<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac41534394719-4\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-sy\">{<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac41534394719-5\" class=\"crayon-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-v\">$_SESSION<\/span><span class=\"crayon-sy\">[<\/span><span class=\"crayon-s\">&#8216;login_userid&#8217;<\/span><span class=\"crayon-sy\">]<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-s\">&#8221;<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac41534394719-6\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-h\">\u00a0\u00a0\u00a0\u00a0<\/span><span class=\"crayon-e\">session_destroy<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac41534394719-7\" class=\"crayon-line\"><span class=\"crayon-sy\">}<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac41534394719-8\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-e\">header<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8220;Location:login.php&#8221;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac41534394719-9\" class=\"crayon-line\"><span class=\"crayon-ta\">?&gt;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>It checks the session, if session is created it will destroy and redirect to<strong> login.php<\/strong> page<\/p>\n<h3>Database Connectivity Configuration Page<\/h3>\n<p>create <strong>config.php\u00a0<\/strong>file and paste following:<\/p>\n<div id=\"crayon-53e4d0ebeac45056255840\" class=\"crayon-syntax crayon-theme-classic crayon-font-monaco crayon-os-pc print-yes notranslate\" style=\"margin-top: 12px; margin-bottom: 12px; font-size: 12px ! important; line-height: 15px ! important; height: auto;\" data-settings=\" minimize scroll-mouseover\">\n<div class=\"crayon-plain-wrap\"><textarea class=\"crayon-plain print-no\" style=\"-moz-tab-size: 4; font-size: 12px ! important; line-height: 15px ! important; z-index: 0; opacity: 0; overflow: hidden;\" readonly=\"readonly\" wrap=\"soft\" data-settings=\"dblclick\">&lt;?php<br \/>\ndefine(&#8216;DB_SERVER&#8217;, &#8216;localhost&#8217;);<br \/>\ndefine(&#8216;DB_USERNAME&#8217;, &#8216;username&#8217;);<br \/>\ndefine(&#8216;DB_PASSWORD&#8217;, &#8216;password&#8217;);<br \/>\ndefine(&#8216;DB_DATABASE&#8217;, &#8216;database_name&#8217;);<br \/>\n$con = mysql_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD);<br \/>\n$db = mysql_select_db(DB_DATABASE);<br \/>\n?&gt;<\/textarea><\/div>\n<div class=\"crayon-main\" style=\"position: relative; z-index: 1; overflow: hidden;\">\n<table class=\"crayon-table\">\n<tbody>\n<tr class=\"crayon-row\">\n<td class=\"crayon-nums \" data-settings=\"show\">\n<div class=\"crayon-nums-content\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac45056255840-1\">1<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac45056255840-2\">2<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac45056255840-3\">3<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac45056255840-4\">4<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac45056255840-5\">5<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac45056255840-6\">6<\/div>\n<div class=\"crayon-num\" data-line=\"crayon-53e4d0ebeac45056255840-7\">7<\/div>\n<div class=\"crayon-num crayon-striped-num\" data-line=\"crayon-53e4d0ebeac45056255840-8\">8<\/div>\n<\/div>\n<\/td>\n<td class=\"crayon-code\">\n<div class=\"crayon-pre\" style=\"font-size: 12px !important; line-height: 15px !important;\">\n<div id=\"crayon-53e4d0ebeac45056255840-1\" class=\"crayon-line\"><span class=\"crayon-ta\">&lt;?php<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac45056255840-2\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-e\">define<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8216;DB_SERVER&#8217;<\/span><span class=\"crayon-sy\">,<\/span><span class=\"crayon-s\">&#8216;localhost&#8217;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac45056255840-3\" class=\"crayon-line\"><span class=\"crayon-e\">define<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8216;DB_USERNAME&#8217;<\/span><span class=\"crayon-sy\">,<\/span><span class=\"crayon-s\">&#8216;username&#8217;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac45056255840-4\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-e\">define<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8216;DB_PASSWORD&#8217;<\/span><span class=\"crayon-sy\">,<\/span><span class=\"crayon-s\">&#8216;password&#8217;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac45056255840-5\" class=\"crayon-line\"><span class=\"crayon-e\">define<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-s\">&#8216;DB_DATABASE&#8217;<\/span><span class=\"crayon-sy\">,<\/span><span class=\"crayon-s\">&#8216;database_name&#8217;<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac45056255840-6\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-v\">$con<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-e\">mysql_connect<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-cn\">DB_SERVER<\/span><span class=\"crayon-sy\">,<\/span><span class=\"crayon-cn\">DB_USERNAME<\/span><span class=\"crayon-sy\">,<\/span><span class=\"crayon-cn\">DB_PASSWORD<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac45056255840-7\" class=\"crayon-line\"><span class=\"crayon-v\">$db<\/span><span class=\"crayon-o\">=<\/span><span class=\"crayon-e\">mysql_select_db<\/span><span class=\"crayon-sy\">(<\/span><span class=\"crayon-cn\">DB_DATABASE<\/span><span class=\"crayon-sy\">)<\/span><span class=\"crayon-sy\">;<\/span><\/div>\n<div id=\"crayon-53e4d0ebeac45056255840-8\" class=\"crayon-line crayon-striped-line\"><span class=\"crayon-ta\">?&gt;<\/span><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<p>change values according to your database server.<\/p>\n<p style=\"text-align: center;\"><a class=\"cboxElement\" href=\"http:\/\/sharp-coders.com\/wp-content\/uploads\/2014\/07\/animated-ajax-login-form.gif\"><img loading=\"lazy\" class=\"size-full wp-image-700 aligncenter colorbox-697\" title=\"Ajax PHP Login with jQuery Shake effect\" src=\"http:\/\/sharp-coders.com\/wp-content\/uploads\/2014\/07\/animated-ajax-login-form.gif\" alt=\"animated ajax login form Ajax PHP Login with jQuery Shake effect\" width=\"300\" height=\"174\" \/><\/a><\/p>\n<h3 class=\"nr_title\"><\/h3>\n","protected":false},"excerpt":{"rendered":"<p>It\u2019s very simple and basic tutorial for beginners. Create User Table CREATE TABLE `users` ( `uid` INT(11) NOT NULL AUTO_INCREMENT , `username` VARCHAR(45) , `password` VARCHAR(100) , `email` VARCHAR(45) , PRIMARY KEY (`uid`)); 1 2 3 4 5 6 CREATETABLE`users`( `uid`INT(11)NOT NULLAUTO_INCREMENT, `username`VARCHAR(45), `password`VARCHAR(100), `email`VARCHAR(45), PRIMARY KEY(`uid`)); To store user login records. Required jQuery files\u00a0for [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":591,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/590"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=590"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/590\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media\/591"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=590"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=590"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=590"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}